fix: DAH-2962 Update FCFS heading styling (#2423)

* fix: xl heading size * test: snapshot * fix: remove header margin * test: snapshot
SFDigitalServices · Nov 19, 2024 · 9a65fe5 · 9a65fe5
1 parent 1f51454
commit 9a65fe5
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 16 deletions.
diff --git a/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap b/app/javascript/__tests__/pages/how-to-apply/__snapshots__/how-to-apply.test.tsx.snap
@@ -296,18 +296,18 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                       class="py-10"
                     >
                       <h2
-                        class="text-2xl font-alt-serif"
+                        class="text-2xl mb-0 font-alt-serif"
                       >
                         How long it takes
                       </h2>
                       <h3
-                        class="font-semibold font-alt-sans pt-6 pb-4"
+                        class="text-heading-xl font-semibold font-alt-sans pt-6 pb-4"
                       >
                         Preparing your application
                       </h3>
                       It depends on how easy it is for you to gather all your information and documents. It may take a few hours, or you may need to do it over several days. If you applied before, it might take you less time.
                       <h3
-                        class="font-semibold font-alt-sans pt-6 pb-4"
+                        class="text-heading-xl font-semibold font-alt-sans pt-6 pb-4"
                       >
                         Submitting your application
                       </h3>
@@ -317,12 +317,12 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                       class="pb-10"
                     >
                       <h2
-                        class="text-2xl font-alt-serif"
+                        class="text-2xl mb-0 font-alt-serif"
                       >
                         Before you start
                       </h2>
                       <h3
-                        class="font-semibold font-alt-sans pt-6 pb-4"
+                        class="text-heading-xl font-semibold font-alt-sans pt-6 pb-4"
                       >
                         Make sure you are eligible
                       </h3>
@@ -380,7 +380,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                         </li>
                       </ul>
                       <h3
-                        class="font-semibold font-alt-sans pt-6 pb-4"
+                        class="text-heading-xl font-semibold font-alt-sans pt-6 pb-4"
                       >
                         See the unit in person
                       </h3>
@@ -398,7 +398,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                       </div>
                     </div>
                     <h2
-                      class="text-2xl font-alt-serif"
+                      class="text-2xl mb-0 font-alt-serif"
                     >
                       How to apply
                     </h2>
@@ -411,7 +411,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                       >
                         <li>
                           <h3
-                            class="font-semibold font-alt-sans pb-4"
+                            class="text-heading-xl font-semibold font-alt-sans pb-4"
                           >
                             Fill out PDF application
                           </h3>
@@ -451,7 +451,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                         </li>
                         <li>
                           <h3
-                            class="font-semibold font-alt-sans pb-4"
+                            class="text-heading-xl font-semibold font-alt-sans pb-4"
                           >
                             Gather documents
                           </h3>
@@ -479,7 +479,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                         </li>
                         <li>
                           <h3
-                            class="font-semibold font-alt-sans pb-4"
+                            class="text-heading-xl font-semibold font-alt-sans pb-4"
                           >
                             Combine everything into 1 PDF file
                           </h3>
@@ -541,7 +541,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                         </li>
                         <li>
                           <h3
-                            class="font-semibold font-alt-sans pb-4"
+                            class="text-heading-xl font-semibold font-alt-sans pb-4"
                           >
                             Create a free account at Box.com
                           </h3>
@@ -582,7 +582,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                         </li>
                         <li>
                           <h3
-                            class="font-semibold font-alt-sans pb-4"
+                            class="text-heading-xl font-semibold font-alt-sans pb-4"
                           >
                             Submit your application and get your place in line
                           </h3>
@@ -664,7 +664,7 @@ exports[`<HowToApply /> renders HowToApply component 1`] = `
                       </ol>
                     </div>
                     <h2
-                      class="text-2xl font-alt-serif"
+                      class="text-2xl mb-0 font-alt-serif"
                     >
                       What happens next
                     </h2>

diff --git a/app/javascript/pages/howToApply/how-to-apply.tsx b/app/javascript/pages/howToApply/how-to-apply.tsx
@@ -51,11 +51,15 @@ const applicationsOpen = (listing: RailsSaleListing) =>
   listing && getFcfsSalesListingState(listing) === ListingState.Open
 
 const Header = ({ headerText }: { headerText: string }) => {
-  return <h2 className="text-2xl font-alt-serif">{headerText}</h2>
+  return <h2 className="text-2xl mb-0 font-alt-serif">{headerText}</h2>
 }
 
 const SubHeader = ({ subHeaderText }: { subHeaderText: string }) => {
-  return <h3 className="font-semibold font-alt-sans pt-6 pb-4">{subHeaderText}</h3>
+  return (
+    <Heading size="xl" className="font-semibold font-alt-sans pt-6 pb-4" priority={3}>
+      {subHeaderText}
+    </Heading>
+  )
 }
 
 const InfoBox = ({ title, children }: { title: string; children: ReactNode }) => {
@@ -229,7 +233,9 @@ const HowToApplyListItem = ({
 }) => {
   return (
     <li>
-      <h3 className="font-semibold font-alt-sans pb-4">{headerText}</h3>
+      <Heading priority={3} size="xl" className="font-semibold font-alt-sans pb-4">
+        {headerText}
+      </Heading>
       <div className="text-base">{children}</div>
     </li>
   )