Merge pull request #218 from PrestaShopCorp/feat/responsive

Responsive of Onboarding header
PrestaShopCorp · Oct 6, 2021 · 1ed4614 · 1ed4614
2 parents 55bc68c + 907d8a2
commit 1ed4614
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 40 deletions.
diff --git a/_dev/src/core/app/components/panel/ConfigInformation.vue b/_dev/src/core/app/components/panel/ConfigInformation.vue
@@ -17,18 +17,19 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <b-container class="m-auto p-0" id="config-information">
-    <div class="d-flex col-left">
-      <b-col sm="4" md="4" lg="4" class="p-16 m-auto text-center d-flex">
-        <img src="@/assets/prestashop-logo-2.png" width="50" height="50" />
-        <h1><span class="white-text">Prestashop</span> Account</h1>
-      </b-col>
+  <aside class="config-information">
+    <div class="titleWrapper">
+      <img src="@/assets/prestashop-logo-2.png" class="logo" />
+      <h1 class="title">
+        PrestaShop
+        <span class="font-normal" style="color: #6b868f;">Account</span>
+      </h1>
+    </div>
 
-      <b-col sm="8" md="8" lg="8" class="col-right py-5">
-        <h2>{{ $t("configure.incentivePanel.howTo") }}</h2>
-      </b-col>
+    <div class="description">
+      <h2 class="text">{{ $t("configure.incentivePanel.howTo") }}</h2>
     </div>
-  </b-container>
+  </aside>
 </template>
 
 <script>
@@ -44,35 +45,55 @@ export default {
 };
 </script>
 
-<style lang="scss">
-#config-information {
-  background-color: #011638;
-  @apply rounded;
+<style lang="scss" scoped>
+.config-information {
+  @apply flex flex-col justify-around p-4 bg-brand-dark rounded #{!important};
+
+  & .titleWrapper {
+    @apply flex-1 flex justify-start items-center #{!important};
+  }
+
+  & .logo {
+    @apply w-10 h-10 mr-2 #{!important};
+  }
 
-  .col-left > .d-flex {
-    @apply items-center justify-start pl-16;
+  & .title {
+    @apply m-0 text-white text-base #{!important};
+  }
 
-    h1 {
-      font-size: 18px;
-      color: #6B868F;
-      @apply font-light my-0 mx-2;
+  & .description {
+    @apply flex-1 mt-4 #{!important};
+  }
 
-      span.white-text {
-        @apply text-white font-bold;
-      }
+  & .text {
+    @apply m-0 text-sm text-white #{!important};
+  }
+
+  @screen md {
+    @apply flex-row items-center p-8 #{!important};
+
+    & .logo {
+      @apply mr-4 #{!important};
+    }
+
+    & .title {
+      @apply flex flex-col #{!important};
     }
 
-    img {
-      max-width: 100%;
+    & .description {
+      @apply mt-0 #{!important};
+    }
+
+    & .text {
+      @apply text-2xl #{!important};
     }
   }
-  div.col-right {
-    @apply flex justify-end pr-16;
 
-    h2 {
-      font-size: 22px;
-      max-width: 50%;
-      @apply text-white font-bold mb-0;
+  @screen lg {
+    @apply px-12 py-16 #{!important};
+
+    & .title {
+      @apply block #{!important};
     }
   }
 }

diff --git a/_dev/src/core/settings/pages/OnBoardingApp.vue b/_dev/src/core/settings/pages/OnBoardingApp.vue
@@ -17,15 +17,13 @@
  * International Registered Trademark & Property of PrestaShop SA
  *-->
 <template>
-  <div class="pt-5">
-    <section>
+  <div class="onboarding pt-5">
+    <section class="onboarding-header">
       <ConfigInformation :app="app" />
     </section>
 
-    <section>
-      <div class="m-auto p-0 container">
-        <PsAccounts :force-show-plans="true" />
-      </div>
+    <section class="onboarding-content">
+      <PsAccounts :force-show-plans="true" />
     </section>
   </div>
 </template>
@@ -99,8 +97,12 @@ export default {
 };
 </script>
 
-<style scoped>
-section {
-  margin-bottom: 35px;
+<style lang="scss" scoped>
+.onboarding {
+  @apply max-w-6xl mx-auto #{!important};
+
+  &-header {
+    @apply mb-4 #{!important};
+  }
 }
 </style>
diff --git a/_dev/tailwind.config.js b/_dev/tailwind.config.js
@@ -4,4 +4,13 @@ module.exports = {
   purge: {
     content: ["./src/**/*.vue"],
   },
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          dark: "#011638",
+        },
+      },
+    },
+  }
 };