PROD-2145 Adddtl Fixes for Web Design v2 & Problem Statement -> master

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 {

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>
   );

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;
 }

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;
+  }
 }

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.

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>{type.title}</div>
             <div className={styles["subTitle"]}>{type.description}</div>
             {type.subDescription && (
               <div className={styles["subDescription"]}>{type.subDescription}</div>

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>

src/routes/BasicInfoLegacy/styles.module.scss

@@ -12,11 +12,6 @@
   }
 }
 
-.container {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-}
-
 .backButtonWrapper {
   @include backButtonWrapper;
 }

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>

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:

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,

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;