PROD 2395 fix mobile view -> Dev

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>
     </>

src/routes/PageDetailsLegacy/styles.module.scss

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

src/routes/ReviewLegacy/index.jsx

@@ -216,7 +216,10 @@ const ReviewLegacy = ({
         <Breadcrumb items={breadcrumbs} />
         {banner}
         <PageContent styleName={styles["container"]}>
-          <PageH2>REVIEW & PAYMENT</PageH2>
+          <div className={styles["title-wrapper"]}>
+            <PageH2>REVIEW & PAYMENT</PageH2>
+          </div>
+          {showProgress && <Progress level={6} setStep={setProgressItem} />}
           <PageDivider />
           <ServicePrice
             hideTitle
@@ -228,23 +231,23 @@ const ReviewLegacy = ({
             serviceType={workType?.selectedWorkTypeDetail}
           />
           {secondaryBanner}
-          {introText && <div className={["infoAlert"]}>{introText}</div>}
+          {introText && <div className={styles["infoAlert"]}>{introText}</div>}
           <PageDivider />
-          <div className={["splitView"]}>
-            <div className={["reviewContainer"]}>
+          <div className={styles["splitView"]}>
+            <div className={styles["reviewContainer"]}>
               <ReviewTableLegacy
                 formData={intakeFormData}
                 enableEdit={enableEdit}
               />
-              <div className={["hideMobile"]}>
+              <div className={styles["hideMobile"]}>
                 <AboutYourProject />
               </div>
             </div>
-            <div className={["paymentWrapper"]}>
-              <div className={["paymentBox"]}>
-                <div className={["total"]}>
+            <div className={styles["paymentWrapper"]}>
+              <div className={styles["paymentBox"]}>
+                <div className={styles["total"]}>
                   {estimate.stickerPrice && (
-                    <span className={["originalPrice"]}>
+                    <span className={styles["originalPrice"]}>
                       {currencyFormat(estimate.stickerPrice)}
                     </span>
                   )}
@@ -298,7 +301,6 @@ const ReviewLegacy = ({
               </div>
             </div>
           </PageFoot>
-          {showProgress && <Progress level={6} setStep={setProgressItem} />}
         </PageContent>
       </Page>
     </>

src/routes/ReviewLegacy/styles.module.scss

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

src/routes/WebsitePurposeLegacy/index.jsx

@@ -106,7 +106,10 @@ const WebsitePurposeLegacy = ({ saveWebsitePurpose, setProgressItem, isLoggedIn
         <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
         <PageContent>
-          <PageH2>WEBSITE PURPOSE</PageH2>
+          <div className={styles["title-wrapper"]}>
+            <PageH2>WEBSITE PURPOSE</PageH2>
+          </div>
+          <Progress level={3} setStep={setProgressItem} />
           <PageDivider />
 
           <WebsitePurposeForm
@@ -142,8 +145,6 @@ const WebsitePurposeLegacy = ({ saveWebsitePurpose, setProgressItem, isLoggedIn
               </div>
             </div>
           </PageFoot>
-
-          <Progress level={3} setStep={setProgressItem} />
         </PageContent>
       </Page>
     </>

src/routes/WebsitePurposeLegacy/styles.module.scss

@@ -15,3 +15,9 @@
 .backButtonWrapper {
   @include backButtonWrapper;
 }
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
+}