From ededd850eb48a629a369ffe199a832d614954aa9 Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Tue, 5 Jul 2022 19:22:22 +0200
Subject: [PATCH 1/2] PROD-2328 #comment fix the payment page in legacy design
 #time 30m

---
 src/routes/ReviewLegacy/index.jsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx
index 25f50a40b..1cb077d3b 100644
--- a/src/routes/ReviewLegacy/index.jsx
+++ b/src/routes/ReviewLegacy/index.jsx
@@ -228,23 +228,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>
                   )}

From f539efcc853a382d77268493d9e15599d28af754 Mon Sep 17 00:00:00 2001
From: "hentrymartin.p" <hentrymartin.p@gmail.com>
Date: Wed, 6 Jul 2022 00:31:32 +0200
Subject: [PATCH 2/2] PROD-2395 #comment fix legacy pages for mobile designs
 #time 1h

---
 .../styles.module.scss                        | 22 ++++++++++++++--
 src/components/Progress/index.jsx             |  2 +-
 src/components/Progress/styles.module.scss    | 20 ++++++++++++++
 src/components/ProgressDonutChart/index.jsx   | 26 ++++++++++++++-----
 .../ProgressDonutChart/styles.module.scss     | 14 +++++++++-
 src/routes/BasicInfoLegacy/index.jsx          |  7 ++---
 src/routes/BasicInfoLegacy/styles.module.scss |  6 +++++
 src/routes/BrandingLegacy/index.jsx           |  7 ++---
 src/routes/BrandingLegacy/styles.module.scss  |  8 +++++-
 src/routes/PageDetailsLegacy/index.jsx        |  7 ++---
 .../PageDetailsLegacy/styles.module.scss      |  8 +++++-
 src/routes/ReviewLegacy/index.jsx             |  6 +++--
 src/routes/ReviewLegacy/styles.module.scss    |  6 +++++
 src/routes/WebsitePurposeLegacy/index.jsx     |  7 ++---
 .../WebsitePurposeLegacy/styles.module.scss   |  6 +++++
 15 files changed, 125 insertions(+), 27 deletions(-)

diff --git a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss b/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss
index ee4563d20..e2f83e379 100644
--- a/src/components/Banners/WebsiteDesignBannerLegacy/styles.module.scss
+++ b/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,6 +125,11 @@
 
         .heroHeaderTitle {
           display: flex;
+
+          @include mobile {
+            font-size: 28px;
+            line-height: 32px;
+          }
         }
 
         .heroHeaderSubtitle {
@@ -124,6 +137,11 @@
           max-width: 713px;
           line-height: 24px;
           font-weight: 500;
+
+          @include mobile {
+            font-size: 14px;
+            line-height: 20px;
+          }
         }
       }
     }
diff --git a/src/components/Progress/index.jsx b/src/components/Progress/index.jsx
index c709e374f..1829ff856 100644
--- a/src/components/Progress/index.jsx
+++ b/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"]}
diff --git a/src/components/Progress/styles.module.scss b/src/components/Progress/styles.module.scss
index 2929f177b..34aa416d8 100644
--- a/src/components/Progress/styles.module.scss
+++ b/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 {}
diff --git a/src/components/ProgressDonutChart/index.jsx b/src/components/ProgressDonutChart/index.jsx
index ed7e4f0c2..d80e811c6 100644
--- a/src/components/ProgressDonutChart/index.jsx
+++ b/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>
   );
diff --git a/src/components/ProgressDonutChart/styles.module.scss b/src/components/ProgressDonutChart/styles.module.scss
index 71b379161..8e32b125f 100644
--- a/src/components/ProgressDonutChart/styles.module.scss
+++ b/src/components/ProgressDonutChart/styles.module.scss
@@ -1,3 +1,15 @@
 @import "../../styles/include";
 
-.progress-donut-chart {}
\ No newline at end of file
+.progress-donut-chart {}
+
+.desktop-chart {
+  @include mobile {
+    display: none;
+  }
+}
+
+.mobile-chart {
+  @include desktop {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/src/routes/BasicInfoLegacy/index.jsx b/src/routes/BasicInfoLegacy/index.jsx
index 06b6d3333..63ff45f09 100644
--- a/src/routes/BasicInfoLegacy/index.jsx
+++ b/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>
     </>
diff --git a/src/routes/BasicInfoLegacy/styles.module.scss b/src/routes/BasicInfoLegacy/styles.module.scss
index a673a2249..6b947ef6c 100644
--- a/src/routes/BasicInfoLegacy/styles.module.scss
+++ b/src/routes/BasicInfoLegacy/styles.module.scss
@@ -19,4 +19,10 @@
 
 .backButtonWrapper {
   @include backButtonWrapper;
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/routes/BrandingLegacy/index.jsx b/src/routes/BrandingLegacy/index.jsx
index b8aed9506..f52d6bbc4 100644
--- a/src/routes/BrandingLegacy/index.jsx
+++ b/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>
     </>
diff --git a/src/routes/BrandingLegacy/styles.module.scss b/src/routes/BrandingLegacy/styles.module.scss
index a78016a04..146e82afa 100644
--- a/src/routes/BrandingLegacy/styles.module.scss
+++ b/src/routes/BrandingLegacy/styles.module.scss
@@ -14,4 +14,10 @@
 
 .backButtonWrapper {
   @include backButtonWrapper;
-}
\ No newline at end of file
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
+}
diff --git a/src/routes/PageDetailsLegacy/index.jsx b/src/routes/PageDetailsLegacy/index.jsx
index 80f47e27e..37bc3de69 100644
--- a/src/routes/PageDetailsLegacy/index.jsx
+++ b/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>
     </>
diff --git a/src/routes/PageDetailsLegacy/styles.module.scss b/src/routes/PageDetailsLegacy/styles.module.scss
index a78016a04..146e82afa 100644
--- a/src/routes/PageDetailsLegacy/styles.module.scss
+++ b/src/routes/PageDetailsLegacy/styles.module.scss
@@ -14,4 +14,10 @@
 
 .backButtonWrapper {
   @include backButtonWrapper;
-}
\ No newline at end of file
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
+}
diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx
index 1cb077d3b..2dfe2886c 100644
--- a/src/routes/ReviewLegacy/index.jsx
+++ b/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
@@ -298,7 +301,6 @@ const ReviewLegacy = ({
               </div>
             </div>
           </PageFoot>
-          {showProgress && <Progress level={6} setStep={setProgressItem} />}
         </PageContent>
       </Page>
     </>
diff --git a/src/routes/ReviewLegacy/styles.module.scss b/src/routes/ReviewLegacy/styles.module.scss
index 87d15ddc9..d6de59253 100644
--- a/src/routes/ReviewLegacy/styles.module.scss
+++ b/src/routes/ReviewLegacy/styles.module.scss
@@ -139,4 +139,10 @@
   @include mobile {
     display: block;
   }
+}
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
 }
\ No newline at end of file
diff --git a/src/routes/WebsitePurposeLegacy/index.jsx b/src/routes/WebsitePurposeLegacy/index.jsx
index 556af8a48..0dfbb95f1 100644
--- a/src/routes/WebsitePurposeLegacy/index.jsx
+++ b/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>
     </>
diff --git a/src/routes/WebsitePurposeLegacy/styles.module.scss b/src/routes/WebsitePurposeLegacy/styles.module.scss
index 3fe93b32b..146e82afa 100644
--- a/src/routes/WebsitePurposeLegacy/styles.module.scss
+++ b/src/routes/WebsitePurposeLegacy/styles.module.scss
@@ -15,3 +15,9 @@
 .backButtonWrapper {
   @include backButtonWrapper;
 }
+
+.title-wrapper {
+  @include mobile {
+    display: none;
+  }
+}