Merge pull request #439 from DTS-STN/reponsive-headings

[frontend] refactor responsive headings
DTS-STN · Jun 20, 2023 · fb4bd08 · fb4bd08
2 parents 9170def + a4ebbbd
commit fb4bd08
Show file tree

Hide file tree

Showing 15 changed files with 276 additions and 167 deletions.
diff --git a/frontend/src/components/AccessibilityGraphContainer.tsx b/frontend/src/components/AccessibilityGraphContainer.tsx
@@ -27,9 +27,9 @@ const AccessibilityGraphContainer: FC<AccessibilityGraphContainerProps> = ({
         <div>{buttonLabel}</div>
       </summary>
       <section className="p-2">
-        <h3 className="mb-4 font-display text-lg font-bold">{descriptionHeading}</h3>
+        <h3 className="h6 my-4">{descriptionHeading}</h3>
         <p>{description}</p>
-        <h3 className="my-4 font-display text-lg font-bold">{valuesHeading}</h3>
+        <h3 className="h6 my-4">{valuesHeading}</h3>
         <AccessibilityTable tableData={tableData} />
       </section>
     </details>

diff --git a/frontend/src/components/LearnPageLayout.tsx b/frontend/src/components/LearnPageLayout.tsx
@@ -15,17 +15,15 @@ export interface LearnPageLayoutProps {
 export const LearnPageLayout: FC<LearnPageLayoutProps> = ({ children, header, breadcrumbItems }) => {
   const tableOfContentsData = useTableOfContentsData()
   return (
-    <Layout 
-      breadcrumbItems={breadcrumbItems}
-    >
-      <h1 className="mb-10 rounded-3xl bg-gray-surface px-4 py-6 font-display text-4xl font-medium text-primary-700 md:mb-12 md:px-10 md:py-10 md:text-6xl md:font-bold">
+    <Layout breadcrumbItems={breadcrumbItems}>
+      <h1 className="h1 mb-10 rounded-3xl bg-gray-surface px-4 py-6 text-primary-700 md:mb-12 md:px-10 md:py-10">
         {header}
       </h1>
       <div className="sm:grid sm:gap-6 lg:grid-cols-12">
         <section className="hidden lg:col-span-4 lg:block xl:col-span-3">
           {!tableOfContentsData.loading && <TableOfContents {...tableOfContentsData} />}
         </section>
-        <section className="flex justify-end sticky top-4 z-10 ml-auto lg:hidden">
+        <section className="sticky top-4 z-10 ml-auto flex justify-end lg:hidden">
           {!tableOfContentsData.loading && <TableOfContentsDialog {...tableOfContentsData} />}
         </section>
         <section id="content" className="lg:col-span-8 xl:col-span-9">

diff --git a/frontend/src/pages/checklist/[filters].tsx b/frontend/src/pages/checklist/[filters].tsx
@@ -149,7 +149,7 @@ const ChecklistResults: FC<ChecklistResultsProps> = ({
       >
         <div className="hidden md:block">
           <HeroBanner className="h-[215px] grid-rows-1" imageProps={{ src: checklistBannerImage }}>
-            <h1 className="font-display text-4xl font-bold text-primary-700 md:text-6xl">{t('header')}</h1>
+            <h1 className="h1 text-primary-700">{t('header')}</h1>
           </HeroBanner>
         </div>
 

diff --git a/frontend/src/pages/home.tsx b/frontend/src/pages/home.tsx
@@ -84,9 +84,7 @@ const Home: FC = () => {
       <Layout contained={false}>
         <Container className="mb-8 md:mb-12">
           <HeroBanner imageProps={{ className: 'md:object-right-bottom', src: landingPageImage }}>
-            <h1 className='mb-2 font-display text-4xl font-bold text-primary-700 md:mb-4 md:text-4xl lg:text-6xl'>
-              {t('banner.title')}
-            </h1>
+            <h1 className="h1 mb-2 text-primary-700 md:mb-4">{t('banner.title')}</h1>
             <p className="m-0">{t('banner.text')}</p>
           </HeroBanner>
         </Container>
@@ -182,21 +180,19 @@ const Home: FC = () => {
                 <TabPanel value="learn" className="px-0 py-8">
                   <div className="flex flex-col gap-6 md:flex-row">
                     <Paper className="p-8 md:w-2/6 md:grow">
-                      <h2 className="mb-8 font-display text-2xl font-medium text-primary-700 md:text-4xl">
-                        {t('tabs.learn.heading')}
-                      </h2>
+                      <h2 className="h2 mb-8 text-primary-700">{t('tabs.learn.heading')}</h2>
                       <Divider className="mb-8" />
                       <p>{t('tabs.learn.description.options-and-tips')}</p>
                       <p>{t('tabs.learn.description.stories')}</p>
                       <Divider className="my-8" />
                       <div className="text-right">
-                        <Button component={Link} href="/learn" size="large" className='text-center'>
+                        <Button component={Link} href="/learn" size="large" className="text-center">
                           {t('tabs.learn.button-text')}
                         </Button>
                       </div>
                     </Paper>
                     <Paper className="p-8 md:w-4/6">
-                      <h3 className="mb-8 font-display text-xl font-light md:mb-8 md:text-3xl">
+                      <h3 className="h3 h3-gutter-bottom">
                         {t('tabs.learn.linksTitle')}
                       </h3>
                       <List disablePadding>
@@ -252,9 +248,7 @@ const Home: FC = () => {
                 <TabPanel value="plan" className="px-0 py-8">
                   <div className="flex flex-col gap-6 md:flex-row">
                     <Paper className="p-8 md:w-2/6 md:grow">
-                      <h2 className="mb-8 font-display text-2xl font-medium text-primary-700 md:text-4xl">
-                        {t('tabs.plan.heading')}
-                      </h2>
+                      <h2 className="h2 mb-8 text-primary-700">{t('tabs.plan.heading')}</h2>
                       <Divider className="mb-8" />
                       <p>{t('tabs.plan.description')}</p>
                       <Divider className="my-8" />
@@ -265,7 +259,7 @@ const Home: FC = () => {
                       </div>
                     </Paper>
                     <Paper className="p-8 md:w-4/6">
-                      <h3 className="mb-8 font-display text-xl font-light md:mb-11 md:text-3xl">
+                      <h3 className="h3 h3-gutter-bottom">
                         {t('tabs.plan.linksTitle')}
                       </h3>
                       <List disablePadding className="ml-4">
@@ -314,9 +308,7 @@ const Home: FC = () => {
                 <TabPanel value="apply" className="px-0 py-8">
                   <div className="flex flex-col gap-6 md:flex-row">
                     <Paper className="p-8 md:w-2/6 md:grow">
-                      <h2 className="mb-8 font-display text-2xl font-medium text-primary-700 md:text-4xl">
-                        {t('tabs.apply.heading')}
-                      </h2>
+                      <h2 className="h2 mb-8 text-primary-700">{t('tabs.apply.heading')}</h2>
                       <Divider className="mb-8" />
                       <p className="mb-8">{t('tabs.apply.description.text')}</p>
                       <List disablePadding className="ml-4">
@@ -357,9 +349,7 @@ const Home: FC = () => {
                 <TabPanel value="manage" className="px-0 py-8">
                   <div className="flex flex-col gap-6 md:flex-row">
                     <Paper className="p-8 md:w-2/6 md:grow">
-                      <h2 className="mb-8 font-display text-2xl font-medium text-primary-700 md:text-4xl">
-                        {t('tabs.manage.heading')}
-                      </h2>
+                      <h2 className="h2 mb-8 text-primary-700">{t('tabs.manage.heading')}</h2>
                       <Divider className="mb-8" />
                       <p>{t('tabs.manage.description.text')}</p>
                       <ul className="list-disc space-y-1 pl-7">

diff --git a/frontend/src/pages/learn/case-studies/bonnie.tsx b/frontend/src/pages/learn/case-studies/bonnie.tsx
@@ -72,7 +72,7 @@ const Bonnie: FC = () => {
           },
         ]}
       >
-        <h2 id="key-takeaways" className="h2 !mt-0">
+        <h2 id="key-takeaways" className="h2 h2-gutter-bottom">
           {t('key-takeaways.heading')}
         </h2>
         <List disablePadding>
@@ -111,7 +111,7 @@ const Bonnie: FC = () => {
           />
         </AlertCard>
 
-        <h2 id="overview" className="h2">
+        <h2 id="overview" className="h2 h2-gutter">
           {t('overview.heading')}
         </h2>
         <p>{t('overview.p1')}</p>
@@ -128,7 +128,7 @@ const Bonnie: FC = () => {
           />
         </AlertCard>
 
-        <h2 id="stopping-earnings" className="h2">
+        <h2 id="stopping-earnings" className="h2 h2-gutter">
           {t('stopping-earnings.heading')}
         </h2>
         <Image
@@ -151,7 +151,7 @@ const Bonnie: FC = () => {
           valuesHeading={t('values-heading')}
         />
 
-        <h2 id="adding-oas" className="h2">
+        <h2 id="adding-oas" className="h2 h2-gutter">
           {t('adding-oas.heading')}
         </h2>
         <p>
@@ -186,7 +186,7 @@ const Bonnie: FC = () => {
           valuesHeading={t('values-heading')}
         />
 
-        <h2 id="cpp" className="h2">
+        <h2 id="cpp" className="h2 h2-gutter">
           {t('cpp.heading')}
         </h2>
         <p>{t('cpp.p1')}</p>
@@ -210,7 +210,7 @@ const Bonnie: FC = () => {
         />
         <p>{t('cpp.p3')}</p>
 
-        <h2 id="own-savings" className="h2">
+        <h2 id="own-savings" className="h2 h2-gutter">
           {t('own-savings.heading')}
         </h2>
         <p>
@@ -238,7 +238,7 @@ const Bonnie: FC = () => {
           valuesHeading={t('values-heading')}
         />
 
-        <h2 id="early-pension" className="h2">
+        <h2 id="early-pension" className="h2 h2-gutter">
           {t('early-pension.heading')}
         </h2>
         <p>{t('early-pension.p1')}</p>
@@ -265,7 +265,7 @@ const Bonnie: FC = () => {
           valuesHeading={t('values-heading')}
         />
 
-        <h2 id="conclusion" className="h2">
+        <h2 id="conclusion" className="h2 h2-gutter">
           {t('conclusion.heading')}
         </h2>
         <p>
@@ -281,7 +281,7 @@ const Bonnie: FC = () => {
           <Trans ns="learn/case-studies/bonnie" i18nKey="conclusion.disclaimer" />
         </AlertCard>
 
-        <h2 className="h2">{t('learn-more.header')}</h2>
+        <h2 className="h2 h2-gutter">{t('learn-more.header')}</h2>
         <List disablePadding>
           {learnMoreLinks.map(({ href, primary, secondary }) => (
             <Fragment key={primary}>

diff --git a/frontend/src/pages/learn/case-studies/fred.tsx b/frontend/src/pages/learn/case-studies/fred.tsx
@@ -72,7 +72,7 @@ const Fred: FC = () => {
           },
         ]}
       >
-        <h2 id="key-takeaways" className="h2 !mt-0">
+        <h2 id="key-takeaways" className="h2 h2-gutter-bottom">
           {t('key-takeaways.heading')}
         </h2>
         <List disablePadding>
@@ -115,7 +115,7 @@ const Fred: FC = () => {
           />
         </AlertCard>
 
-        <h2 id="overview" className="h2">
+        <h2 id="overview" className="h2 h2-gutter">
           {t('overview.heading')}
         </h2>
         <p>{t('overview.p1')}</p>
@@ -143,7 +143,7 @@ const Fred: FC = () => {
         <p>{t('overview.p4')}</p>
         <p>{t('overview.p5')}</p>
 
-        <h2 id="monthly-amounts" className="h2">
+        <h2 id="monthly-amounts" className="h2 h2-gutter">
           {t('monthly-amounts.heading')}
         </h2>
         <p>
@@ -165,7 +165,7 @@ const Fred: FC = () => {
           />
         </p>
 
-        <h2 id="fred-cpp" className="h2">
+        <h2 id="fred-cpp" className="h2 h2-gutter">
           {t('cpp.heading')}
         </h2>
         <Image
@@ -215,7 +215,7 @@ const Fred: FC = () => {
         <p>{t('cpp.p2')}</p>
         <p>{t('cpp.p3')}</p>
 
-        <h2 id="fred-oas" className="h2">
+        <h2 id="fred-oas" className="h2 h2-gutter">
           {t('oas.heading')}
         </h2>
         <Image
@@ -260,15 +260,15 @@ const Fred: FC = () => {
         <p>{t('oas.p1')}</p>
         <p>{t('oas.p2')}</p>
 
-        <h2 id="fred-conclusion" className="h2">
+        <h2 id="fred-conclusion" className="h2 h2-gutter">
           {t('conclusion.heading')}
         </h2>
         <p>{t('conclusion.p')}</p>
         <AlertCard type="disclaimer" className="mt-5">
           <Trans ns="learn/case-studies/fred" i18nKey="conclusion.disclaimer" />
         </AlertCard>
 
-        <h2 className="h2">{t('learn-more.header')}</h2>
+        <h2 className="h2 h2-gutter">{t('learn-more.header')}</h2>
         <List disablePadding>
           {learnMoreLinks.map(({ href, primary, secondary }) => (
             <Fragment key={primary}>