refactor: use theme H1 for page Hero section

safe-global · Oct 10, 2023 · 74e997e · 74e997e
1 parent 74bc1e1
commit 74e997e
Show file tree

Hide file tree

Showing 13 changed files with 12 additions and 75 deletions.
diff --git a/src/components/Careers/Cards/index.tsx b/src/components/Careers/Cards/index.tsx
@@ -61,7 +61,7 @@ export const Cards = ({
     <Container id={id} sx={{ marginBottom: '80px' }} className={layoutCss.containerMedium}>
       <Grid container spacing={{ xs: 2, md: '30px', xl: '50px' }}>
         <Grid item xs={12}>
-          <Typography variant="h1" className={css.title} mb={{ xs: 3, md: '50px' }}>
+          <Typography variant="h1" textAlign="center" mb={{ xs: 3, md: '50px' }}>
             {title}
           </Typography>
         </Grid>

diff --git a/src/components/Careers/Cards/styles.module.css b/src/components/Careers/Cards/styles.module.css
@@ -21,10 +21,6 @@
   transform: rotate(45deg);
 }
 
-.title {
-  text-align: center;
-}
-
 .cardTitle {
   margin-bottom: 16px;
 }

diff --git a/src/components/Careers/Intro/index.tsx b/src/components/Careers/Intro/index.tsx
@@ -32,7 +32,7 @@ export const Intro = ({
         </Grid>
 
         <Grid item xs={12} md={10} xl={5}>
-          <Typography variant="h1" className={css.title}>
+          <Typography variant="h1" textAlign="center">
             {title}
           </Typography>
         </Grid>

diff --git a/src/components/Careers/Intro/styles.module.css b/src/components/Careers/Intro/styles.module.css
@@ -28,15 +28,6 @@
   margin-top: 0px;
 }
 
-/* TODO: Use h1 from theme when implemented
-https://github.com/safe-global/safe-homepage/issues/11 */
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  text-align: center;
-  padding: 0;
-}
-
 .text {
   text-align: center;
 }
@@ -46,11 +37,6 @@ https://github.com/safe-global/safe-homepage/issues/11 */
     gap: 24px;
   }
 
-  .title {
-    font-size: 80px;
-    line-height: 88px;
-  }
-
   .bg {
     width: 900px;
     height: 900px;

diff --git a/src/components/Core/Intro/index.tsx b/src/components/Core/Intro/index.tsx
@@ -29,7 +29,7 @@ const CoreIntro = ({ title, text, link }: BaseBlock) => {
           </video>
         </Grid>
         <Grid item md={6}>
-          <Typography className={css.title} variant="h1" mb={4}>
+          <Typography variant="h1" mb={4}>
             {title}
           </Typography>
           <Typography variant="h4" component="div" mb={5}>

diff --git a/src/components/Core/Intro/styles.module.css b/src/components/Core/Intro/styles.module.css
@@ -32,12 +32,6 @@
   margin: auto;
 }
 
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: -0.01em;
-}
-
 .video {
   max-width: 90%;
   height: auto;
@@ -53,11 +47,6 @@
     padding-top: 30px;
     margin-bottom: 120px;
   }
-
-  .title {
-    font-size: 80px;
-    line-height: 82px;
-  }
 }
 
 @keyframes bounce {

diff --git a/src/components/Ecosystem/Intro/index.tsx b/src/components/Ecosystem/Intro/index.tsx
@@ -9,7 +9,7 @@ const EcosystemIntro = ({ title, text }: BaseBlock) => {
       <BackgroundParticles className={css.bg} />
       <Grid container className={css.container} spacing={{ xs: 6, md: '30px', xl: '50px' }}>
         <Grid item md={8}>
-          <Typography className={css.title} variant="h1" mb={4}>
+          <Typography variant="h1" mb={4}>
             {title}
           </Typography>
           <Typography variant="h4" component="div" mb={5}>

diff --git a/src/components/Ecosystem/Intro/styles.module.css b/src/components/Ecosystem/Intro/styles.module.css
@@ -14,22 +14,11 @@
   width: 100%;
 }
 
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: -0.01em;
-}
-
 @media (min-width: 600px) {
   .container {
     margin-top: 100px;
   }
 
-  .title {
-    font-size: 80px;
-    line-height: 82px;
-  }
-
   .bg {
     width: auto;
   }

diff --git a/src/components/Home/Intro/index.tsx b/src/components/Home/Intro/index.tsx
@@ -10,7 +10,9 @@ const Intro = ({ title, text, buttons }: BaseBlock) => {
         <Container>
           <Grid container flexDirection="column" className={css.content}>
             <Grid item md={10} width="100%">
-              <Typography className={css.title}>{title}</Typography>
+              <Typography variant="h1" mb={3}>
+                {title}
+              </Typography>
             </Grid>
             <Grid item md={6}>
               <Typography className={css.subtitle}>{text}</Typography>

diff --git a/src/components/Home/Intro/styles.module.css b/src/components/Home/Intro/styles.module.css
@@ -114,15 +114,6 @@
   margin: auto;
 }
 
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  font-weight: 400;
-  color: var(--mui-palette-text-primary);
-  margin-bottom: 24px;
-  overflow-wrap: break-word;
-}
-
 .subtitle {
   font-size: 20px;
   line-height: 30px;
@@ -131,11 +122,6 @@
 }
 
 @media (min-width: 600px) {
-  .title {
-    font-size: 80px;
-    line-height: 82px;
-  }
-
   .subtitle {
     font-size: 24px;
     line-height: 36px;

diff --git a/src/components/Wallet/Intro/index.tsx b/src/components/Wallet/Intro/index.tsx
@@ -25,7 +25,7 @@ const Intro = ({ image, title, buttons }: BaseBlock & { gif: BaseBlock['image']
           <img {...image} className={css.image} />
         </Grid>
         <Grid item md={6}>
-          <Typography className={css.title} variant="h1" mb={5}>
+          <Typography variant="h1" mb={5}>
             {title}
           </Typography>
           <Grid container gap={4} flexDirection="column" justifyContent="flex-start">

diff --git a/src/components/Wallet/Intro/styles.module.css b/src/components/Wallet/Intro/styles.module.css
@@ -51,12 +51,6 @@
   width: 134px;
 }
 
-.title {
-  font-size: 64px;
-  line-height: 64px;
-  letter-spacing: -0.01em;
-}
-
 @media (min-width: 600px) {
   .container {
     margin-top: 100px;
@@ -91,11 +85,6 @@
   .downloads svg {
     width: 181px;
   }
-
-  .title {
-    font-size: 80px;
-    line-height: 82px;
-  }
 }
 
 @keyframes scale-up-down {

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -60,13 +60,13 @@ export const theme = createTheme({
   typography: {
     fontFamily: 'Citerne, sans-serif',
     h1: {
-      fontSize: '32px',
-      lineHeight: '38px',
+      fontSize: '56px',
+      lineHeight: '60px',
       fontWeight: 400,
 
       '@media (min-width:600px)': {
-        fontSize: '60px',
-        lineHeight: '64px',
+        fontSize: '80px',
+        lineHeight: '82px',
       },
     },
     h2: {