From dcdba6e7d7cad2ded2598620558c4346165d0575 Mon Sep 17 00:00:00 2001
From: Maria Mattlin <maria.mattlin@topcoder.com>
Date: Wed, 6 Jul 2022 17:50:37 -0700
Subject: [PATCH 1/4] PROD-2420 #comment Fixed styling issues #time 3h

---
 .../FormInputTextArea/styles.module.scss      |  5 +-
 src/components/PageContent/index.jsx          |  2 +-
 src/components/PageContent/styles.module.scss |  5 ++
 .../PageElements/PageP/styles.module.scss     | 24 ++++++-
 .../components/BasicInfoFormLegacy/index.jsx  | 12 ++--
 .../components/DeviceTypes/index.jsx          |  2 +-
 src/routes/BasicInfoLegacy/index.jsx          |  2 +-
 src/routes/BasicInfoLegacy/styles.module.scss |  5 --
 .../components/BrandingForm/index.jsx         | 37 +++++-----
 .../components/PageDetailsForm/index.jsx      |  4 +-
 .../Products/components/BasicInfo/index.jsx   |  2 +-
 .../components/BasicInfo/styles.module.scss   |  5 --
 .../components/BasicInfoForm/index.jsx        | 69 ++++++++-----------
 .../BasicInfoForm/styles.module.scss          | 29 --------
 src/routes/Review/index.jsx                   |  4 +-
 src/routes/Review/styles.module.scss          | 11 ---
 src/routes/ReviewLegacy/index.jsx             |  2 +-
 src/routes/SelectWorkType/index.jsx           |  2 +-
 src/routes/SelectWorkType/styles.module.scss  |  2 +
 .../components/WebsitePurposeForm/index.jsx   | 23 +++----
 src/routes/WorkItems/index.jsx                |  2 +-
 src/styles/_mixins.scss                       | 13 ++--
 22 files changed, 113 insertions(+), 149 deletions(-)

diff --git a/src/components/FormElements/FormInputTextArea/styles.module.scss b/src/components/FormElements/FormInputTextArea/styles.module.scss
index 55ba8d87d..040e9f601 100644
--- a/src/components/FormElements/FormInputTextArea/styles.module.scss
+++ b/src/components/FormElements/FormInputTextArea/styles.module.scss
@@ -10,15 +10,16 @@
   border: 0 !important;
   padding: 0 15px !important;
   width: 100% !important;
-  height: 70px;
+  height: 117px !important;
   resize: none;
+  @include font-roboto;
+
 
   &::placeholder {
     color: #aaaaaa !important;
     font-size: 18px !important;
     text-transform: none !important;
     font-weight: 400;
-    @include font-barlow;
   }
 
   &:focus {
diff --git a/src/components/PageContent/index.jsx b/src/components/PageContent/index.jsx
index 9e3d017ec..095e4840b 100644
--- a/src/components/PageContent/index.jsx
+++ b/src/components/PageContent/index.jsx
@@ -10,7 +10,7 @@ import styles from "./styles.module.scss";
 
 const PageContent = ({ children, styleName, ...props }) => {
   return (
-    <div className={cn(styles["page-content"], styleName)} {...props}>
+    <div className={cn(styles["page-content"], !!styleName ? styles[styleName] : undefined)} {...props}>
       {children}
     </div>
   );
diff --git a/src/components/PageContent/styles.module.scss b/src/components/PageContent/styles.module.scss
index da8f49005..327420160 100644
--- a/src/components/PageContent/styles.module.scss
+++ b/src/components/PageContent/styles.module.scss
@@ -11,4 +11,9 @@
   background: white;
   border-radius: 8px;
   position: relative;
+}
+
+.container {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
\ No newline at end of file
diff --git a/src/components/PageElements/PageP/styles.module.scss b/src/components/PageElements/PageP/styles.module.scss
index bedadcc8f..320e39875 100644
--- a/src/components/PageElements/PageP/styles.module.scss
+++ b/src/components/PageElements/PageP/styles.module.scss
@@ -11,6 +11,28 @@
   font-weight: 800;
 }
 
+.title {
+  font-weight: 600;
+  color: $grey-text;
+  font-size: 20px;
+  line-height: 20px;
+  text-transform: uppercase;
+}
+
 .description {
-  margin-top: 0;
+  @include font-roboto;
+  font-size: 16px;
+  line-height: 26px;
+  margin-top: 24px;
+  color: $grey-text;
+}
+
+.label {
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 26px;
+
+  @include mobile {
+    font-size: 16px;
+  }
 }
\ No newline at end of file
diff --git a/src/routes/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx b/src/routes/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx
index ecd869fc2..3aff7d88d 100644
--- a/src/routes/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx
+++ b/src/routes/BasicInfoLegacy/components/BasicInfoFormLegacy/index.jsx
@@ -50,8 +50,8 @@ const BasicInfoFormLegacy = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>PROJECT TITLE</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">PROJECT TITLE</PageP>
+          <PageP styleName="description">
             Give your project a descriptive title. This is what the designers
             will see when looking for your work.
           </PageP>
@@ -74,8 +74,8 @@ const BasicInfoFormLegacy = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>How many pages?</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">How many pages?</PageP>
+          <PageP styleName="description">
             How many pages (individual screens) would you like designed?
           </PageP>
         </div>
@@ -95,8 +95,8 @@ const BasicInfoFormLegacy = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Device Types</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Device Types</PageP>
+          <PageP styleName="description">
             Your project includes designs for computers. You can add tablet and/
             or mobile device sizes as well. Designing for multiple devices,
             sizes or types is referred to as Responsive Design.
diff --git a/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx b/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
index 93013c889..6c4ef20c9 100644
--- a/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
+++ b/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
@@ -96,7 +96,7 @@ const DeviceTypes = ({ numOfPages, selectedOptions, onSelect }) => {
             >
               {isActive ? type.iconActive : type.icon}
             </div>
-            <div className={styles["title"]}>{type.title}</div>
+            <div styleName="title">{type.title}</div>
             <div className={styles["subTitle"]}>{type.description}</div>
             {type.subDescription && (
               <div className={styles["subDescription"]}>{type.subDescription}</div>
diff --git a/src/routes/BasicInfoLegacy/index.jsx b/src/routes/BasicInfoLegacy/index.jsx
index 7a66ccbc3..d0929d24a 100644
--- a/src/routes/BasicInfoLegacy/index.jsx
+++ b/src/routes/BasicInfoLegacy/index.jsx
@@ -173,7 +173,7 @@ const BasicInfoLegacy = ({
       <Page>
         <Breadcrumb items={breadcrumbs} />
         <WebsiteDesignBannerLegacy />
-        <PageContent styleName={styles["container"]}>
+        <PageContent styleName={"container"}>
           <div className={styles["title-wrapper"]}>
             <PageH2>BASIC INFO</PageH2>
           </div>
diff --git a/src/routes/BasicInfoLegacy/styles.module.scss b/src/routes/BasicInfoLegacy/styles.module.scss
index 6b947ef6c..ff4221c1f 100644
--- a/src/routes/BasicInfoLegacy/styles.module.scss
+++ b/src/routes/BasicInfoLegacy/styles.module.scss
@@ -12,11 +12,6 @@
   }
 }
 
-.container {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .backButtonWrapper {
   @include backButtonWrapper;
 }
diff --git a/src/routes/BrandingLegacy/components/BrandingForm/index.jsx b/src/routes/BrandingLegacy/components/BrandingForm/index.jsx
index 88edd6382..0298e330f 100644
--- a/src/routes/BrandingLegacy/components/BrandingForm/index.jsx
+++ b/src/routes/BrandingLegacy/components/BrandingForm/index.jsx
@@ -163,8 +163,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>{"STYLE & THEME"}</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">{"STYLE & THEME"}</PageP>
+          <PageP styleName="description">
             What ideas do you have for the overall style and theme of your
             website? For example, modern and minimalist, bold and colorful, or
             muted and masculine. Describe the vibe and personality you have in
@@ -178,7 +178,6 @@ const BrandingForm = ({
             <FormInputTextArea
               value={formData?.theme?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="theme"
               placeholder={"Be as descriptive as possible"}
             />
@@ -189,8 +188,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Inspiration</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Inspiration</PageP>
+          <PageP styleName="description">
             Are there other websites you would like our designers to draw
             inspiration from? List websites you like and describe what you like
             about them.
@@ -236,7 +235,6 @@ const BrandingForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="feedback"
                   placeholder={"Describe what you like about this website"}
                 />
@@ -256,8 +254,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>COLORS</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">COLORS</PageP>
+          <PageP styleName="description">
             Pick up to three colors you'd like our designers to use. You can
             also include your specific brand colors.
           </PageP>
@@ -282,7 +280,6 @@ const BrandingForm = ({
               }
               value={formData?.specificColor?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="specificColor"
             />
           </FormField>
@@ -292,8 +289,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>FONTS</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">FONTS</PageP>
+          <PageP styleName="description">
             Choose your general font style preference. If you have specific
             fonts that should be used, please share them.
           </PageP>
@@ -341,7 +338,6 @@ const BrandingForm = ({
                   "Describe in detail how you would like our designers to use your fonts"
                 }
                 value={formData?.fontUsageDescription?.value}
-                styleName={styles["text-area"]}
                 name="fontUsageDescription"
                 onChange={(e) =>
                   handleInputChange(e.target.name, e.target.value)
@@ -355,8 +351,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Other Assets (optional)</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Other Assets (optional)</PageP>
+          <PageP styleName="description">
             Do you have any additional assets that would be helpful to our
             designers? For example, your current logo, branding direction,
             photos, illustrations, content, layout ideas, etc.
@@ -386,8 +382,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Anything to avoid? (optional)</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Anything to avoid? (optional)</PageP>
+          <PageP styleName="description">
             If there are any themes, ideas, or specific directions our designers
             should avoid, please let us know. Be as descriptive as possible.
           </PageP>
@@ -398,7 +394,6 @@ const BrandingForm = ({
             <FormInputTextArea
               value={formData?.anythingToAvoid?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="anythingToAvoid"
               placeholder={"Describe themes or ideas to avoid"}
             />
@@ -409,8 +404,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Allow Stock Photos?</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Allow Stock Photos?</PageP>
+          <PageP styleName="description">
             There may be additional costs for designs that use stock images.
             Our designers will include details for any stock images used, so you
             can buy them at the end of the project.{" "}
@@ -446,8 +441,8 @@ const BrandingForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Final Deliverable SOURCE FILES</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Final Deliverable SOURCE FILES</PageP>
+          <PageP styleName="description">
             If you want your final deliverables created with a specific design
             software, please specify.{" "}
           </PageP>
diff --git a/src/routes/PageDetailsLegacy/components/PageDetailsForm/index.jsx b/src/routes/PageDetailsLegacy/components/PageDetailsForm/index.jsx
index 362d70961..ac1729313 100644
--- a/src/routes/PageDetailsLegacy/components/PageDetailsForm/index.jsx
+++ b/src/routes/PageDetailsLegacy/components/PageDetailsForm/index.jsx
@@ -79,8 +79,8 @@ const PageDetailsForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Describe each page</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Describe each page</PageP>
+          <PageP styleName="description">
             <PageP>
               For each page (or screen) required in your design project, please
               provide:
diff --git a/src/routes/Products/components/BasicInfo/index.jsx b/src/routes/Products/components/BasicInfo/index.jsx
index ecf2e967e..8a6f4c0b2 100644
--- a/src/routes/Products/components/BasicInfo/index.jsx
+++ b/src/routes/Products/components/BasicInfo/index.jsx
@@ -249,7 +249,7 @@ const BasicInfo = ({
           subTitle={workItemConfig.subTitle}
           workType={workItemConfig.type}
         />
-        <PageContent styleName={styles["container"]}>
+        <PageContent styleName={"container"}>
           <BasicInfoForm
             pageListOptions={_.map(PageOptions, (o, i) => ({
               ...o,
diff --git a/src/routes/Products/components/BasicInfo/styles.module.scss b/src/routes/Products/components/BasicInfo/styles.module.scss
index 06941f058..6299d2d84 100644
--- a/src/routes/Products/components/BasicInfo/styles.module.scss
+++ b/src/routes/Products/components/BasicInfo/styles.module.scss
@@ -55,11 +55,6 @@
   }
 }
 
-.container {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .backButtonWrapper {
   @include backButtonWrapper;
   margin-top: 0;
diff --git a/src/routes/Products/components/BasicInfoForm/index.jsx b/src/routes/Products/components/BasicInfoForm/index.jsx
index 1a982cefe..690ebe3dd 100644
--- a/src/routes/Products/components/BasicInfoForm/index.jsx
+++ b/src/routes/Products/components/BasicInfoForm/index.jsx
@@ -182,15 +182,15 @@ const BasicInfoForm = ({
 
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>PROJECT TITLE</PageP>
+          <PageP styleName="title">PROJECT TITLE</PageP>
           {isWebsiteDesign && (
-            <PageP className={styles["description"]}>
+            <PageP styleName="description">
               Give your project a descriptive title. This is the name designers
               will see when looking for your work.
             </PageP>
           )}
           {(isDataExploration || isFindMeData || isDataAdvisory) && (
-            <PageP className={styles["description"]}>
+            <PageP styleName="description">
               Give your project a descriptive title. This is what the data
               scientists will see when looking for your work.
             </PageP>
@@ -218,8 +218,8 @@ const BasicInfoForm = ({
         <>
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>Share Your Data (optional)</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">Share Your Data (optional)</PageP>
+              <PageP styleName="description">
                 Add links (separate multiple links with commas) or upload your
                 data files here. Not ready or able to share? No problem, we'll
                 work with you on that later.
@@ -250,8 +250,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>{"what would you like to learn?"}</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">{"what would you like to learn?"}</PageP>
+              <PageP styleName="description">
                 Describe your data and what you would like to learn about it. If
                 you have a formal problem statement, please share it.
               </PageP>
@@ -280,7 +280,6 @@ const BasicInfoForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="goals"
                   placeholder={"Enter your goals and descriptions here"}
                 />
@@ -294,8 +293,8 @@ const BasicInfoForm = ({
         <>
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>{"What Data Do You Need?"}</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">{"What Data Do You Need?"}</PageP>
+              <PageP styleName="description">
                 Briefly describe the analysis you want to do, and the type of
                 data you're looking for to do it. Be sure to include any
                 critical data requirements, such as specific geographies,
@@ -347,7 +346,6 @@ const BasicInfoForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="analysis"
                   placeholder={
                     "Describe your analysis goal and data requirements"
@@ -361,8 +359,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>{"Primary Data Challenge"}</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">{"Primary Data Challenge"}</PageP>
+              <PageP styleName="description">
                 Select the primary data challenge you're facing.
               </PageP>
             </div>
@@ -407,8 +405,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>Sample Data</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">Sample Data</PageP>
+              <PageP styleName="description">
                 Sample data helps us understand your data needs. Often this is a
                 simple CSV/Excel table that shows the data labels (usually the
                 title of each column or row) and two or more rows of example
@@ -443,8 +441,8 @@ const BasicInfoForm = ({
         <>
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>{"what’s your goal?"}</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">{"what’s your goal?"}</PageP>
+              <PageP styleName="description">
                 Describe what you want to do or learn with the help of data
                 science. What will this information or ability help improve?
                 Keep in mind that data science typically answers a question.
@@ -479,7 +477,6 @@ const BasicInfoForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="goals"
                   placeholder={"Describe your goal"}
                 />
@@ -491,8 +488,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>What data do you have?</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">What data do you have?</PageP>
+              <PageP styleName="description">
                 The data you have available helps determine your data science
                 approach. Briefly describe the data you have in mind for your
                 project. What is it and how do you use it today? How much do you
@@ -545,7 +542,6 @@ const BasicInfoForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="assetsDescription"
                   placeholder={"Describe your data"}
                 />
@@ -559,8 +555,8 @@ const BasicInfoForm = ({
         <>
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>{"Description"}</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">{"Description"}</PageP>
+              <PageP styleName="description">
                 What is the purpose of your website? What do you want visitors
                 to be able to do, e.g., see your work? Contact you? You should
                 include a general description as well as goals of the website.
@@ -631,7 +627,6 @@ const BasicInfoForm = ({
                       e.target.value
                     )
                   }
-                  styleName={styles["text-area"]}
                   name="analysis"
                   placeholder={"Describe your website"}
                 />
@@ -643,8 +638,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>Your industry</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">Your industry</PageP>
+              <PageP styleName="description">
                 Knowing your industry will help our designers understand you and
                 your audience. For example, some common industries are: Business
                 & Consulting, Construction, Entertainment & Arts, Healthcare,
@@ -676,8 +671,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>inspiration</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">inspiration</PageP>
+              <PageP styleName="description">
                 Are there websites that you love, from which our designers may
                 draw inspiration? Share the website URLs and tell us what you
                 like about them.
@@ -723,7 +718,6 @@ const BasicInfoForm = ({
                           e.target.value
                         )
                       }
-                      styleName={styles["text-area"]}
                       name="feedback"
                       placeholder={"Describe what you like about this website"}
                     />
@@ -741,12 +735,12 @@ const BasicInfoForm = ({
           <PageDivider />
 
           <PageRow className={styles["form-row"]}>
-            <PageP className={styles["title"]}>STYLE &amp; THEME</PageP>
+            <PageP styleName="title">STYLE &amp; THEME</PageP>
           </PageRow>
 
           <PageRow className={styles["form-row"]}>
             <div className={classNames(styles["formFieldWrapper"], styles["style-picker"])}>
-              <PageP className={styles["label"]}>
+              <PageP styleName="label">
                 Let us know the visual styles you like or dislike (optional):
               </PageP>
               <div className={styles["styles"]}>
@@ -764,7 +758,7 @@ const BasicInfoForm = ({
               </div>
               <PageRow className={styles["form-row"]}>
                 <div>
-                  <PageP className={styles["label"]}>
+                  <PageP styleName="label">
                     Additional details about your look & feel preferences:
                   </PageP>
                 </div>
@@ -775,7 +769,6 @@ const BasicInfoForm = ({
                       onChange={(e) =>
                         handleInputChange(e.target.name, e.target.value)
                       }
-                      styleName={styles["text-area"]}
                       name="stylePreferences"
                       placeholder={"Describe your ideal look & feel"}
                     />
@@ -802,7 +795,7 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div className={classNames(styles["formFieldWrapper"], styles["color-picker"])}>
-              <PageP className={styles["label"]}>
+              <PageP styleName="label">
                 Choose colors you would like our designers to use in your site
                 design:
               </PageP>
@@ -817,7 +810,7 @@ const BasicInfoForm = ({
               </div>
               <PageRow className={styles["form-row"]}>
                 <div>
-                  <PageP className={styles["label"]}>
+                  <PageP styleName="label">
                     List any specific colors you would like used in your design:
                   </PageP>
                 </div>
@@ -831,7 +824,6 @@ const BasicInfoForm = ({
                       onChange={(e) =>
                         handleInputChange(e.target.name, e.target.value)
                       }
-                      styleName={styles["text-area"]}
                       name="specificColor"
                       placeholder={
                         "Specify colors using their value in RGB, CMYK, or Hex"
@@ -847,8 +839,8 @@ const BasicInfoForm = ({
 
           <PageRow className={styles["form-row"]}>
             <div>
-              <PageP className={styles["title"]}>share your brand or style assets</PageP>
-              <PageP className={styles["description"]}>
+              <PageP styleName="title">share your brand or style assets</PageP>
+              <PageP styleName="description">
                 If you have them, gather and upload any assets that you think
                 might be helpful for our designers. Let us know if there is
                 anything you would like to communicate about these items. <br />
@@ -889,7 +881,6 @@ const BasicInfoForm = ({
                         e.target.value
                       )
                     }
-                    styleName={styles["text-area"]}
                     name="assetsDescription"
                     placeholder={"Describe what you would like us to know"}
                   />
diff --git a/src/routes/Products/components/BasicInfoForm/styles.module.scss b/src/routes/Products/components/BasicInfoForm/styles.module.scss
index 6490f2353..0149a5622 100644
--- a/src/routes/Products/components/BasicInfoForm/styles.module.scss
+++ b/src/routes/Products/components/BasicInfoForm/styles.module.scss
@@ -1,13 +1,6 @@
 @import "../../../../styles/include";
 
 .basicInfoForm {
-  .title {
-    font-weight: 600;
-    color: $grey-text;
-    font-size: 20px;
-    line-height: 20px;
-    text-transform: uppercase;
-  }
 
   .remove-website {
     color: $green1;
@@ -37,22 +30,10 @@
     }
   }
 
-  .description {
-    @include font-roboto;
-    font-size: 16px;
-    line-height: 26px;
-    margin-top: 24px;
-    color: $grey-text;
-  }
-
   .form-row {
     align-items: flex-start;
   }
 
-  .text-area {
-    height: 117px !important;
-  }
-
   .formFieldWrapper {
     margin-top: 48px;
 
@@ -116,14 +97,4 @@
       padding-right: 30px;
     }
   }
-}
-
-.label {
-  font-weight: 500;
-  font-size: 20px;
-  line-height: 26px;
-
-  @include mobile {
-    font-size: 16px;
-  }
 }
\ No newline at end of file
diff --git a/src/routes/Review/index.jsx b/src/routes/Review/index.jsx
index 9723a1b37..aaf33bfb9 100644
--- a/src/routes/Review/index.jsx
+++ b/src/routes/Review/index.jsx
@@ -215,7 +215,7 @@ const Review = ({
           }))}
         />
         {banner}
-        <PageContent styleName={styles["container"]}>
+        <PageContent styleName={"container"}>
           <ServicePrice
             hideTitle
             showIcon={showIcon}
@@ -225,8 +225,6 @@ const Review = ({
             stickerPrice={estimate?.stickerPrice}
             serviceType={workType?.selectedWorkTypeDetail}
           />
-          <br className={styles["mobileHidden"]} />
-          <br className={styles["mobileHidden"]} />
           {secondaryBanner}
           {introText && <div className={styles["infoAlert"]}>{introText}</div>}
           <div className={styles["splitView"]}>
diff --git a/src/routes/Review/styles.module.scss b/src/routes/Review/styles.module.scss
index 34f2d3174..17a0bc768 100644
--- a/src/routes/Review/styles.module.scss
+++ b/src/routes/Review/styles.module.scss
@@ -12,12 +12,6 @@
   }
 }
 
-.mobileHidden {
-  @include mobile {
-    display: none;
-  }
-}
-
 .splitView {
   display: grid;
   grid-template-columns: 1fr 562px;
@@ -34,11 +28,6 @@
   }
 }
 
-.container {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .paymentWrapper {
 
   .infoBox {
diff --git a/src/routes/ReviewLegacy/index.jsx b/src/routes/ReviewLegacy/index.jsx
index bda2e6be5..1496059df 100644
--- a/src/routes/ReviewLegacy/index.jsx
+++ b/src/routes/ReviewLegacy/index.jsx
@@ -215,7 +215,7 @@ const ReviewLegacy = ({
       <Page>
         <Breadcrumb items={breadcrumbs} />
         {banner}
-        <PageContent styleName={styles["container"]}>
+        <PageContent styleName={"container"}>
           <div className={styles["title-wrapper"]}>
             <PageH2>REVIEW & PAYMENT</PageH2>
           </div>
diff --git a/src/routes/SelectWorkType/index.jsx b/src/routes/SelectWorkType/index.jsx
index 86c425c6d..72551e832 100644
--- a/src/routes/SelectWorkType/index.jsx
+++ b/src/routes/SelectWorkType/index.jsx
@@ -171,7 +171,7 @@ const SelectWorkType = ({
       />
       <Breadcrumb items={breadcrumb} />
       <Page>
-        <PageContent styleName={styles["pageContent"]}>
+        <PageContent className={styles["pageContent"]}>
           <PageH2 className={styles.pageHeading}>Start work</PageH2>
 
           <PageDivider />
diff --git a/src/routes/SelectWorkType/styles.module.scss b/src/routes/SelectWorkType/styles.module.scss
index 09b46beff..c1a2be5bb 100644
--- a/src/routes/SelectWorkType/styles.module.scss
+++ b/src/routes/SelectWorkType/styles.module.scss
@@ -279,6 +279,8 @@
   margin-top: 0;
   font-weight: 600;
   color: #2a2a2a;
+  font-size: 34px;
+  line-height: 32px;
 
   @include mobile {
     font-size: 28px;
diff --git a/src/routes/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx b/src/routes/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx
index 47781b092..1de497404 100644
--- a/src/routes/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx
+++ b/src/routes/WebsitePurposeLegacy/components/WebsitePurposeForm/index.jsx
@@ -45,8 +45,8 @@ const WebsitePurposeForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>Your industry</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">Your industry</PageP>
+          <PageP styleName="description">
             Knowing your industry will help our designers understand your
             audience, and the basic visual direction and overall tone to take
             for your website design.
@@ -71,14 +71,14 @@ const WebsitePurposeForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>DESCRIPTION</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">DESCRIPTION</PageP>
+          <PageP styleName="description">
             What is the purpose of your website? What do you want visitors to be
             able to do, e.g., see your work? Contact you? You can include a
             general description as well as goals of the website.{" "}
           </PageP>
           <br />
-          <PageP className={styles["description"]}>
+          <PageP styleName="description">
             <strong>Example:</strong> <br />A dog walking website that allows
             visitors to select dog walkers and schedule dog walking appointments
           </PageP>
@@ -89,7 +89,6 @@ const WebsitePurposeForm = ({
             <FormInputTextArea
               value={formData?.description?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="description"
               placeholder={"Describe your website"}
             />
@@ -100,15 +99,15 @@ const WebsitePurposeForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>USERS</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">USERS</PageP>
+          <PageP styleName="description">
             Describe your target audience—are they pharmaceutical reps?
             Middle-aged mechanical engineers? Beekeepers? Write their user
             story, using the format, “As a &lt;type of users&gt;, I want
             &lt;some goal&gt;, so that &lt;some reason&gt;.”
           </PageP>
           <br />
-          <PageP className={styles["description"]}>
+          <PageP styleName="description">
             <strong>Example:</strong> <br />
             “As a dog owner, I want someone trustworthy to walk my dog, so that
             he feels loved when I'm at work.“
@@ -120,7 +119,6 @@ const WebsitePurposeForm = ({
             <FormInputTextArea
               value={formData?.userStory?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="userStory"
               placeholder={"Enter your user story"}
             />
@@ -131,8 +129,8 @@ const WebsitePurposeForm = ({
       <PageDivider />
       <PageRow className={styles["form-row"]}>
         <div>
-          <PageP className={styles["title"]}>EXISTING WEBSITE?</PageP>
-          <PageP className={styles["description"]}>
+          <PageP styleName="title">EXISTING WEBSITE?</PageP>
+          <PageP styleName="description">
             If you have an existing website, please enter it here. Are we
             designing additional pages for your existing website? Or are we
             redesigning your current website? Please add additional information
@@ -153,7 +151,6 @@ const WebsitePurposeForm = ({
             <FormInputTextArea
               value={formData?.existingWebsiteInfo?.value}
               onChange={(e) => handleInputChange(e.target.name, e.target.value)}
-              styleName={styles["text-area"]}
               name="existingWebsiteInfo"
               placeholder={
                 "Anything we should know about your existing website"
diff --git a/src/routes/WorkItems/index.jsx b/src/routes/WorkItems/index.jsx
index 56ae2cc68..3af99fe88 100644
--- a/src/routes/WorkItems/index.jsx
+++ b/src/routes/WorkItems/index.jsx
@@ -235,7 +235,7 @@ const WorkItem = ({
     <>
       <LoadingSpinner show={isLoadingWork || isLoadingSolutions} />
       <Page className={styles["page"]}>
-        <PageContent styleName={styles["pageContent"]}>
+        <PageContent className={styles["pageContent"]}>
           <Breadcrumb items={breadcrumb} />
           <WorkDetailHeader
             challenge={work}
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index e4fd32d48..57b0d5218 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -34,26 +34,29 @@
 }
 
 @mixin formInputText {
-  background-color: $black-0 !important;
+  background-color: $black-0  !important;
+  border: 0 !important;
   box-sizing: border-box !important;
   color: #444 !important;
   font-size: 18px !important;
   height: 32px !important;
+  margin-bottom: 10px !important;
   outline: none !important;
-  border: 0 !important;
   padding: 0 15px !important;
   width: 100% !important;
+
   &::placeholder {
-    color: $black-40 !important;
+    color: $black-40  !important;
     font-size: 18px !important;
     text-transform: none !important;
   }
+
   &:focus {
     box-shadow: none !important;
   }
 
   &:disabled {
-    background-color: $grey-bg !important;
+    background-color: $grey-bg  !important;
   }
 }
 
@@ -65,4 +68,4 @@
 @mixin backButtonContainer {
   display: flex;
   flex: 1;
-}
+}
\ No newline at end of file

From 5a196043cef40d630b71e93276c32bcb007b5510 Mon Sep 17 00:00:00 2001
From: Maria Mattlin <maria.mattlin@topcoder.com>
Date: Wed, 6 Jul 2022 18:12:00 -0700
Subject: [PATCH 2/4] PROD-2420 #comment Fixed styling issue with carousel
 #time 10m

---
 src/routes/SelectWorkType/styles.module.scss | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/SelectWorkType/styles.module.scss b/src/routes/SelectWorkType/styles.module.scss
index c1a2be5bb..be4a734cb 100644
--- a/src/routes/SelectWorkType/styles.module.scss
+++ b/src/routes/SelectWorkType/styles.module.scss
@@ -269,9 +269,15 @@
 
 .pageContent {
   margin-top: 0;
-  padding-right: 0;
-  padding-left: 0;
-  padding-top: 28px;
+  padding: 40px 0;
+
+  @include mobile {
+    padding: 20px;
+  }
+
+  background: white;
+  border-radius: 8px;
+  position: relative;
 }
 
 .pageHeading {

From 43512183ac3732be709dd249e3356e6817eae7fa Mon Sep 17 00:00:00 2001
From: Brooke <brooke.souza@topcoder.com>
Date: Thu, 7 Jul 2022 07:54:01 -0700
Subject: [PATCH 3/4] PROD-2420 #comment clean-up #time 5m

---
 src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx b/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
index 6c4ef20c9..9bce8bc1a 100644
--- a/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
+++ b/src/routes/BasicInfoLegacy/components/DeviceTypes/index.jsx
@@ -96,7 +96,7 @@ const DeviceTypes = ({ numOfPages, selectedOptions, onSelect }) => {
             >
               {isActive ? type.iconActive : type.icon}
             </div>
-            <div styleName="title">{type.title}</div>
+            <div>{type.title}</div>
             <div className={styles["subTitle"]}>{type.description}</div>
             {type.subDescription && (
               <div className={styles["subDescription"]}>{type.subDescription}</div>

From d8e453036e80c80c168c718ce2fe43bc4597fdf6 Mon Sep 17 00:00:00 2001
From: Maria Mattlin <maria.mattlin@topcoder.com>
Date: Thu, 7 Jul 2022 09:32:03 -0700
Subject: [PATCH 4/4] PROD-2421 #comment Added missing style #time 10m

---
 src/routes/ThankYou/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/ThankYou/index.jsx b/src/routes/ThankYou/index.jsx
index 3e68de643..74a95c145 100644
--- a/src/routes/ThankYou/index.jsx
+++ b/src/routes/ThankYou/index.jsx
@@ -41,7 +41,7 @@ const ThankYou = () => {
       <LoadingSpinner show={isLoading} />
       <Page>
         <PageContent>
-          <div className={["container"]}>
+          <div className={styles["container"]}>
             <div className={styles["content"]}>
               <PageH2>THANK YOU</PageH2>