Merge pull request #710 from fsargent/10-21-decrease_gaps_between_ele…

…ments_in_the_landing_pages 10 21 decrease gaps between elements in the landing pages
Equal-Vote · Dec 22, 2024 · aa7f9bb · aa7f9bb
2 parents 9797dcc + 2f0afd4
commit aa7f9bb
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 45 deletions.
diff --git a/packages/frontend/index.html b/packages/frontend/index.html
@@ -22,6 +22,7 @@
     <link rel="manifest" href="/manifest.json" />
     <!-- Importing for ballot bubble font-->
     <link href='https://fonts.googleapis.com/css?family=Archivo Black' rel='stylesheet'>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
     <!--
       Notice the use of  in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/packages/frontend/src/components/LandingPage.tsx b/packages/frontend/src/components/LandingPage.tsx
@@ -49,11 +49,8 @@ const LandingPage = () => {
             width: '100%',
             display: 'flex',
             flexDirection: 'column',
-            gap: '20rem',
-            minHeight: '600px',
+            gap: '2rem',
             margin: 'auto',
-            paddingTop: '8rem',
-            paddingBottom: '8rem',
         }}>
             <Box sx={{position:'absolute', top: '95vh', width: '100%', textAlign: 'center'}}>
                 <KeyboardArrowDownRoundedIcon sx={{

diff --git a/packages/frontend/src/components/LandingPage/LandingPageHero.tsx b/packages/frontend/src/components/LandingPage/LandingPageHero.tsx
@@ -110,8 +110,6 @@ export default ({}) => {
             <Box display='flex' flexDirection='column' sx={{
                 alignItems: 'center',
                 textAlign: 'center',
-                width: {xs: '100%', md: '600px'}, // not the same ax maxWidth 600px!, we want to make sure the carousel doesn't effect size on larger screens
-                minHeight: '600px'
             }}>
                 <Typography variant="h4" color={'lightShade.contrastText'}> {t('landing_page.hero.title')} </Typography>
                 <Box width='90%' display='flex' flexDirection='row' justifyContent='space-between' sx={{alignItems: 'center', paddingBottom: 3}}>

diff --git a/packages/frontend/src/components/LandingPage/LandingPagePricing.tsx b/packages/frontend/src/components/LandingPage/LandingPagePricing.tsx
@@ -39,7 +39,6 @@ export default () => {
                     <FadeUp key={i} delay={`${200+i*300}ms`}>
                         <Paper key={i} className='pricingOption' elevation={8} sx={{
                             width: '100%',
-                            maxWidth: '25rem',
                             display: 'flex',
                             flexDirection: 'column',
                             flexShrink: '0',

diff --git a/packages/frontend/src/components/LandingPage/LandingPageStats.tsx b/packages/frontend/src/components/LandingPage/LandingPageStats.tsx
@@ -49,7 +49,7 @@ export default () => {
             margin: 'auto',
             width: '100%',
             maxWidth: '1300px',
-            gap: '10rem',
+            gap: '2rem',
             justifyContent: 'center',
         }}
         ref={containerRef}

diff --git a/packages/frontend/src/components/LandingPage/LandingPageTestimonials.tsx b/packages/frontend/src/components/LandingPage/LandingPageTestimonials.tsx
@@ -36,8 +36,8 @@ export default () => {
                     backgroundImage: `url(${testimonial.image_url})`,
                     backgroundSize: 'cover',
                     borderRadius: '100%',
-                    width: '10rem',
-                    height: '10rem',
+                    width: '2rem',
+                    height: '2rem',
                     margin: 'auto',
                 }}/>
                 <Typography variant='h5' color={'darkShade.contrastText'} sx={{textAlign: 'center'}}>

diff --git a/packages/frontend/src/theme.tsx b/packages/frontend/src/theme.tsx
@@ -163,41 +163,19 @@ const brandPalette: PaletteOptions = {
 }
 
 const brandTypography: TypographyOptions = {
-  // fontFamily: 'Montserrat',
-  fontFamily: 'Verdana, sans-serif',
-  button:{
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-  },
-  h1: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  },
-  h2: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  },
-  h3: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  },
-  h4: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  },
-  h5: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  },
-  h6: {
-    fontFamily: 'Montserrat, Verdana, sans-serif',
-    marginTop: '1rem',
-    marginBottom: '1rem',
-  }
+   // fontFamily: 'Montserrat',
+   fontFamily: 'Montserrat, Verdana, sans-serif',
+   button:{
+     fontFamily: 'Montserrat, Verdana, sans-serif',
+   },
+  ...Object.fromEntries(['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].map(level => [
+    level,
+    {
+      fontFamily: 'Montserrat, Verdana, sans-serif',
+      marginTop: '1rem',
+      marginBottom: '1rem',
+    }
+  ]))
 }
 
 const themes = {