PROD-2395 #comment fix legacy pages for mobile designs #time 1h

Author: hentrymartin

src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss

@@ -19,7 +19,10 @@
     min-width: 0;
     max-width: 100%;
     overflow: hidden;
-    grid-template-columns: 1fr 200px;
+    flex-direction: column;
+    grid-template-columns: auto;
+    margin-top: 0 !important;
+    border-radius: 0 !important;
   }
 
   .heroBackgroundContainer {
@@ -39,7 +42,12 @@
     border-radius: 0 8px 8px 0;
 
     @include mobile {
-      width: 200px;
+      width: 100%;
+      height: 156px;
+      order: 0;
+      background: url("../../../assets/images/website-design-banner-mobile.png");
+      background-size: cover;
+      background-position: bottom;
     }
   }
 
@@ -117,13 +125,23 @@
 
         .heroHeaderTitle {
           display: flex;
+
+          @include mobile {
+            font-size: 28px;
+            line-height: 32px;
+          }
         }
 
         .heroHeaderSubtitle {
           font-size: 17px;
           max-width: 713px;
           line-height: 24px;
           font-weight: 500;
+
+          @include mobile {
+            font-size: 14px;
+            line-height: 20px;
+          }
         }
       }
     }

src/components/Progress/index.jsx

@@ -41,7 +41,7 @@ const Progress = ({ level, styleName, setStep, ...props }) => {
           <span className={styles["level-num"]}>STEP {trueLevel.showIndex} </span>
           <span className={styles["muted"]}>/ {levels.length}</span>
         </div>
-        <div>{trueLevel.label}</div>
+        <div className={styles["label"]}>{trueLevel.label}</div>
       </div>
       <ProgressDonutChart
         className={styles["progress-donut-chart"]}

src/components/Progress/styles.module.scss

@@ -6,6 +6,12 @@
   top: 20px;
   display: flex;
   align-items: center;
+
+  @include mobile {
+    position: relative;
+    right: auto;
+    top: auto;
+  }
 }
 
 .level-container {
@@ -14,6 +20,11 @@
   flex-direction: column;
   color: $black;
 
+  @include mobile {
+    flex: 1;
+    align-items: flex-start;
+  }
+
   .level {
     margin-bottom: 8px;
 
@@ -25,6 +36,15 @@
       color: #ddd;
     }
   }
+
+  .label {
+    @include mobile {
+      @include font-barlow;
+      line-height: 20px;
+      text-transform: uppercase;
+      font-weight: 600;
+    }
+  }
 }
 
 .progress-donut-chart {}

src/components/ProgressDonutChart/index.jsx

@@ -42,13 +42,25 @@ const ProgressDonutChart = ({ progress, styleName, ...props }) => {
   return (
     <div className={cn(styles["progress-donut-chart"], !!styleName ? styles[styleName] : undefined)} {...props}>
       <div id="chart">
-        <Chart
-          options={chartOptions}
-          series={[progress]}
-          type="radialBar"
-          height={150}
-          width={120}
-        />
+        <div className={styles["mobile-chart"]}>
+          <Chart
+            options={chartOptions}
+            series={[progress]}
+            type="radialBar"
+            height={100}
+            width={80}
+          />
+        </div>
+
+        <div className={styles["desktop-chart"]}>
+          <Chart
+            options={chartOptions}
+            series={[progress]}
+            type="radialBar"
+            height={150}
+            width={120}
+          />
+        </div>
       </div>
     </div>
   );

src/components/ProgressDonutChart/styles.module.scss

@@ -1,3 +1,15 @@
 @import "../../styles/include";
 
-.progress-donut-chart {}
+.progress-donut-chart {}
+
+.desktop-chart {
+  @include mobile {
+    display: none;
+  }
+}
+
+.mobile-chart {
+  @include desktop {
+    display: none;
+  }
+}

src/routes/BasicInfoLegacy/index.jsx

@@ -174,7 +174,10 @@ const BasicInfoLegacy = ({
         <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent styleName={styles["container"]}>
-          <PageH2>BASIC INFO</PageH2>
+          <div className={styles["title-wrapper"]}>
+            <PageH2>BASIC INFO</PageH2>
+          </div>
+          <Progress level={2} setStep={setProgressItem} />
           <PageDivider />
 
           <BasicInfoFormLegacy
@@ -222,8 +225,6 @@ const BasicInfoLegacy = ({
               </div>
             </div>
           </PageFoot>
-
-          <Progress level={2} setStep={setProgressItem} />
         </PageContent>
       </Page>
     </>

src/routes/BasicInfoLegacy/styles.module.scss

@@ -19,4 +19,10 @@
 
 .backButtonWrapper {
   @include backButtonWrapper;
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
 }

src/routes/BrandingLegacy/index.jsx

@@ -135,7 +135,10 @@ const BrandingLegacy = ({ saveBranding, setProgressItem, isLoggedIn }) => {
         <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent>
-          <PageH2>BRANDING</PageH2>
+          <div className={styles["title-wrapper"]}>
+            <PageH2>BRANDING</PageH2>
+          </div>
+          <Progress level={5} setStep={setProgressItem} />
           <PageDivider />
 
           <BrandingForm
@@ -170,8 +173,6 @@ const BrandingLegacy = ({ saveBranding, setProgressItem, isLoggedIn }) => {
               </div>
             </div>
           </PageFoot>
-
-          <Progress level={5} setStep={setProgressItem} />
         </PageContent>
       </Page>
     </>

src/routes/BrandingLegacy/styles.module.scss

@@ -14,4 +14,10 @@
 
 .backButtonWrapper {
   @include backButtonWrapper;
-}
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
+}

src/routes/PageDetailsLegacy/index.jsx

@@ -110,7 +110,10 @@ const PageDetailsLegacy = ({ savePageDetails, setProgressItem, isLoggedIn }) =>
         <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent>
-          <PageH2>PAGE DETAILS</PageH2>
+          <div className={styles["title-wrapper"]}>
+            <PageH2>PAGE DETAILS</PageH2>
+          </div>
+          <Progress level={4} setStep={setProgressItem} />
           <PageDivider />
 
           <PageDetailsForm
@@ -146,8 +149,6 @@ const PageDetailsLegacy = ({ savePageDetails, setProgressItem, isLoggedIn }) =>
               </div>
             </div>
           </PageFoot>
-
-          <Progress level={4} setStep={setProgressItem} />
         </PageContent>
       </Page>
     </>