Merge pull request #1161 from tblivet/feat/visual-check

[NEW UI] Visual web integration check

_dev/src/scss/_utilities.scss

@@ -0,0 +1,98 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License version 3.0
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to [email protected] so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA and Contributors <[email protected]>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
+ */
+@use "variables" as *;
+
+// Spacers
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3
+);
+
+// stylelint-disable
+
+#{$ua-id} {
+  // Margin utilities
+  @each $key, $value in $spacers {
+    .m-#{$key} {
+      margin: $value !important;
+    }
+
+    .mt-#{$key} {
+      margin-block-start: $value !important;
+    }
+
+    .mb-#{$key} {
+      margin-block-end: $value !important;
+    }
+
+    .ml-#{$key} {
+      margin-inline-start: $value !important;
+    }
+
+    .mr-#{$key} {
+      margin-inline-end: $value !important;
+    }
+
+    .mx-#{$key} {
+      margin-inline: $value !important;
+    }
+
+    .my-#{$key} {
+      margin-block: $value !important;
+    }
+  }
+
+  // Padding utilities
+  @each $key, $value in $spacers {
+    .p-#{$key} {
+      padding: $value !important;
+    }
+
+    .pt-#{$key} {
+      padding-block-start: $value !important;
+    }
+
+    .pb-#{$key} {
+      padding-block-end: $value !important;
+    }
+
+    .pl-#{$key} {
+      padding-inline-start: $value !important;
+    }
+
+    .pr-#{$key} {
+      padding-inline-end: $value !important;
+    }
+
+    .px-#{$key} {
+      padding-inline: $value !important;
+    }
+
+    .py-#{$key} {
+      padding-block: $value !important;
+    }
+  }
+}
+
+// stylelint-enable

_dev/src/scss/components/_button.scss

@@ -34,7 +34,9 @@ $e: ".btn";
     }
 
     &-lg {
+      padding-block: 0.875rem;
       font-size: 1rem;
+      line-height: 1.25;
     }
 
     &--loading {

_dev/src/scss/components/_check-requirements.scss

@@ -47,7 +47,7 @@ $e: ".check-requirements";
     &__requirement {
       padding-inline-start: 1.75rem;
       background-repeat: no-repeat;
-      background-position: left center;
+      background-position: left -0.125rem;
       background-size: 1.5rem 1.5rem;
       font-size: 0.875rem;
       line-height: 1.4;

_dev/src/scss/components/_logs.scss

@@ -29,6 +29,7 @@ $e-logs: ".logs";
   #{$e-tracker} {
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
     height: 100%;
   }
 

_dev/src/scss/components/_progress.scss

@@ -25,7 +25,10 @@ $e: ".log-progress";
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-    margin-block-end: 0.5rem;
+
+    &:empty {
+      display: none;
+    }
 
     &__status {
       display: flex;

_dev/src/scss/layouts/_backup.scss

@@ -25,7 +25,7 @@ $e: ".backup-page";
     &__container {
       display: flex;
       flex-direction: column;
-      gap: 2rem;
+      gap: 1.5rem;
     }
 
     &__section {

_dev/src/scss/layouts/_error.scss

@@ -70,9 +70,6 @@ $e: ".error-page";
     }
 
     &__button {
-      padding: 0.875rem 1rem;
-      font-size: 0.875rem;
-      font-weight: 400;
       white-space: initial;
     }
 
@@ -92,10 +89,12 @@ $e: ".error-page";
 
       &__buttons {
         flex-direction: column;
+        gap: 1rem;
       }
 
       &__button {
         justify-content: center;
+        width: 100%;
       }
     }
   }

_dev/src/scss/layouts/_page.scss

@@ -29,9 +29,14 @@ $e: ".page";
     justify-content: flex-end;
 
     @container ua-main (max-width: 479px) {
+      > form {
+        width: 100%;
+      }
+
       .btn {
         justify-content: center;
         width: 100%;
+        white-space: normal;
       }
     }
   }

_dev/src/scss/layouts/_version-choice.scss

@@ -75,5 +75,9 @@ $e: ".version-choice-page";
       display: grid;
       gap: 0.5rem;
     }
+
+    &__local-archive-message {
+      margin-block-end: 0.5rem;
+    }
   }
 }

_dev/src/scss/main.scss

@@ -16,5 +16,6 @@
  * @copyright Since 2007 PrestaShop SA and Contributors
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
  */
+@use "utilities";
 @use "components";
 @use "layouts";

views/templates/components/logs-viewer.html.twig

@@ -17,7 +17,7 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
  *#}
 <div data-component="logs-viewer" class="logs__inner">
-  <form id="form-logs-download-button" data-download-logs-route="{{ downloadLogsRoute }}">
+  <form id="form-logs-download-button" data-download-logs-route="{{ downloadLogsRoute }}" hidden>
     <input type="hidden" name="download-logs-type" value="{{ downloadLogsType }}" />
   </form>
   <div class="logs__scroll">

views/templates/steps/backup.html.twig

@@ -25,7 +25,7 @@
 {% endblock %}
 
 {% block content %}
-  <div class="backup-page__section">
+  <div class="backup-page__section mb-3">
     <p>
       {{ "Backing up your store's files, database, and images means you can restore to a previous version if something goes wrong during the update. This keeps your data safe and ensures your business stays up and running."|trans({}) }}
     </p>

views/templates/steps/version-choice.html.twig

@@ -104,7 +104,7 @@
           </strong>
         </p>
 
-        <p>
+        <p class="mb-2">
           {{ 'A more recent version of PrestaShop is available. You can also use a local archive.'|trans({}) }}
         </p>
       {% endif %}