Merge pull request #265 from zesty-io/darwin1

Darwin1
zesty-io · Mar 23, 2022 · c451c08 · c451c08
2 parents b57a20a + a88d51a
commit c451c08
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 71 deletions.
diff --git a/src/blocks/blog/SimpleVerticalBlogCards/SimpleVerticalBlogCards.js b/src/blocks/blog/SimpleVerticalBlogCards/SimpleVerticalBlogCards.js
@@ -91,7 +91,7 @@ const SimpleVerticalBlogCards = ({
                       position: 'relative',
                       filter:
                         theme.palette.mode === 'dark'
-                          ? 'brightness(0.7)'
+                          ? 'brightness(1)'
                           : 'none',
                     }}
                   />

diff --git a/...locks/features/FeatureListWithDesktopAppScreenshot/FeatureListWithDesktopAppScreenshot.js b/...locks/features/FeatureListWithDesktopAppScreenshot/FeatureListWithDesktopAppScreenshot.js
@@ -140,7 +140,7 @@ const RightSide = ({ image }) => {
                 sx={{
                   objectFit: 'cover',
                   filter:
-                    theme.palette.mode === 'dark' ? 'brightness(0.7)' : 'none',
+                    theme.palette.mode === 'dark' ? 'brightness(1)' : 'none',
                 }}
               />
             </Box>

diff --git a/src/blocks/features/FeaturesWithMobileScreenshot/FeaturesWithMobileScreenshot.js b/src/blocks/features/FeaturesWithMobileScreenshot/FeaturesWithMobileScreenshot.js
@@ -94,8 +94,7 @@ const FeaturesWithMobileScreenshot = ({
               objectFit: 'contain',
               borderRadius: '2.5rem',
               transform: isMobile ? 'scale(.80)' : 'scale(.70)',
-              filter:
-                theme.palette.mode === 'dark' ? 'brightness(0.7)' : 'none',
+              filter: theme.palette.mode === 'dark' ? 'brightness(1)' : 'none',
             }}
           />
         </Grid>

diff --git a/...es/FullScreenHeroWithPromoImagesAndTypedText/FullScreenHeroWithPromoImagesAndTypedText.js b/...es/FullScreenHeroWithPromoImagesAndTypedText/FullScreenHeroWithPromoImagesAndTypedText.js
@@ -8,44 +8,62 @@ import { alpha, useTheme } from '@mui/material/styles';
 import Container from 'components/Container';
 import FillerContent from 'components/FillerContent';
 
-const slantedImages = (images = []) => {
+const reconstructImages = (images = []) => {
   return [
     {
       group: [
         {
-          cover: images && images[0]?.url,
+          cover: (images && images[0]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[0]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[1]?.url,
+          cover: (images && images[1]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[1]?.url) || FillerContent.dashboard_image,
         },
       ],
     },
     {
       group: [
         {
-          cover: images && images[2]?.url,
+          cover: (images && images[2]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[2]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[3]?.url,
+          cover: (images && images[3]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[3]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[4]?.url,
+          cover: (images && images[4]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[4]?.url) || FillerContent.dashboard_image,
         },
       ],
     },
     {
       group: [
         {
-          cover: images && images[5]?.url,
+          cover: (images && images[5]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[5]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[6]?.url,
+          cover: (images && images[6]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[6]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[7]?.url,
+          cover: (images && images[2]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[2]?.url) || FillerContent.dashboard_image,
         },
         {
-          cover: images && images[1]?.url,
+          cover: (images && images[1]?.url) || FillerContent.dashboard_image,
+          coverDark:
+            (images && images[1]?.url) || FillerContent.dashboard_image,
         },
       ],
     },
@@ -67,15 +85,15 @@ const FullScreenHeroWithPromoImagesAndTypedText = ({
     defaultMatches: true,
   });
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isDarkMode = theme.palette.mode === 'dark';
   // split the title from api by br tag for styling purposes
   const newTitle = title.split('<br/>');
   const title0 = newTitle && newTitle[0];
   const title1 = newTitle && newTitle[1];
   const title2 = newTitle && newTitle[2];
 
   // images to be map
-  const imageList =
-    slantedImages(images) || FillerContent.slantedImagesList_for_header;
+  const imageList = reconstructImages(images);
 
   return (
     <Box sx={{ overflow: 'hidden' }}>
@@ -95,7 +113,11 @@ const FullScreenHeroWithPromoImagesAndTypedText = ({
               <Typography
                 component={'h1'}
                 variant="p"
-                color={theme.palette.zesty.zestyGrey}
+                color={
+                  isDarkMode
+                    ? theme.palette.zesty.zestyWhite
+                    : theme.palette.zesty.zestyGrey
+                }
                 sx={{ fontWeight: 400, fontSize: '20px' }}
                 gutterBottom
               >

diff --git a/src/blocks/heroes/HeroWithDashboardScreenshotAndCta/HeroWithDashboardScreenshotAndCta.js b/src/blocks/heroes/HeroWithDashboardScreenshotAndCta/HeroWithDashboardScreenshotAndCta.js
@@ -112,8 +112,7 @@ const HeroWithDashboardScreenshotAndCta = ({
             borderRadius={2}
             maxWidth={600}
             sx={{
-              filter:
-                theme.palette.mode === 'dark' ? 'brightness(0.7)' : 'none',
+              filter: theme.palette.mode === 'dark' ? 'brightness(1)' : 'none',
             }}
           />
         </Grid>

diff --git a/src/blocks/heroes/HeroWithIllustrationAndCta/HeroWithIllustrationAndCta.js b/src/blocks/heroes/HeroWithIllustrationAndCta/HeroWithIllustrationAndCta.js
@@ -11,17 +11,20 @@ import Container from 'components/Container';
 import TryFreeButton from 'components/cta/TryFreeButton';
 
 const HeroWithIllustrationAndCta = ({
-  title,subtitle,
-  description='',
+  title,
+  subtitle,
+  description = '',
   image,
   button_left_text,
   button_left_link,
   hero_button_right,
-  button_right_link}) => {
+  button_right_link,
+}) => {
   const theme = useTheme();
   const isMd = useMediaQuery(theme.breakpoints.up('md'), {
     defaultMatches: true,
   });
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   let titleSplits = title.split('<br>');
 
   return (
@@ -32,65 +35,75 @@ const HeroWithIllustrationAndCta = ({
       }}
     >
       <Container>
-        <Grid container spacing={4} 
-              flexDirection={{ xs: 'column-reverse', md: 'row' }} >
+        <Grid
+          container
+          spacing={4}
+          flexDirection={{ xs: 'column-reverse', md: 'row' }}
+        >
           <Grid item container alignItems={'center'} xs={12} md={6}>
             <Box>
-            <Box >
+              <Box>
                 <Typography
                   variant="h6"
                   component="h1"
                   color="text.secondary"
                   sx={{ fontWeight: 400 }}
-                  dangerouslySetInnerHTML={{__html:subtitle}}>
-                </Typography>
+                  dangerouslySetInnerHTML={{ __html: subtitle }}
+                ></Typography>
               </Box>
               <Box>
-                <Typography 
-                  variant="h3"
+                <Typography
+                  variant="p"
+                  component={'h3'}
                   color="text.primary"
                   sx={{
                     fontWeight: 700,
+                    fontSize: isMobile ? '38px' : '60px',
+                    margin: '0',
+                    lineHeight: isMobile ? '46px' : '65px',
                   }}
-                 >{titleSplits[0]}
+                >
+                  {titleSplits[0]}
                 </Typography>
               </Box>
               <Box marginBottom={2}>
-                <Typography 
-                  variant="h3"
+                <Typography
+                  variant="p"
+                  component={'h3'}
                   color={theme.palette.zesty.zestyOrange}
                   sx={{
                     fontWeight: 700,
+                    margin: 0,
                   }}
-                 >{titleSplits[1]}
+                >
+                  {titleSplits[1]}
                 </Typography>
               </Box>
-              <Box >
+              <Box>
                 <Typography
                   variant="body1"
                   component="h2"
                   color="text.secondary"
-                  sx={{ fontWeight: 400 }}
+                  sx={{ fontWeight: 400, fontSize: isMobile ? '18px' : '20px' }}
                   marginBottom={6}
-                  dangerouslySetInnerHTML={{__html:description}}>
-                </Typography>
+                  dangerouslySetInnerHTML={{ __html: description }}
+                ></Typography>
               </Box>
-              
+
               <Box
                 display="flex"
                 flexDirection={{ xs: 'column', sm: 'row' }}
                 alignItems={{ xs: 'stretched', sm: 'flex-start' }}
               >
                 <TryFreeButton
-                 component={'a'}
-                 variant="contained"
-                 color="secondary"
-                 size="large"
-                 fullWidth={isMd ? false : true}
-                 text={button_left_text}
-                >
-                </TryFreeButton>
-
+                  component={'a'}
+                  variant="contained"
+                  color="secondary"
+                  size="large"
+                  fullWidth={isMd ? false : true}
+                  text={button_left_text}
+                ></TryFreeButton>
+
                 <Box
                   marginTop={{ xs: 2, sm: 0 }}
                   marginLeft={{ sm: 2 }}
@@ -118,7 +131,7 @@ const HeroWithIllustrationAndCta = ({
               justifyContent={'center'}
               alignItems={'center'}
             >
-              <Box height={1} width={1} maxWidth='100%'>
+              <Box height={1} width={1} maxWidth="100%">
                 <Box
                   component={'img'}
                   src={image}

diff --git a/src/blocks/heroes/SimpleHeroWithImageAndCtaButtons/SimpleHeroWithImageAndCtaButtons.js b/src/blocks/heroes/SimpleHeroWithImageAndCtaButtons/SimpleHeroWithImageAndCtaButtons.js
@@ -21,7 +21,7 @@ const SimpleHeroWithImageAndCtaButtons = ({
   image,
 }) => {
   const theme = useTheme();
-
+  const isDarkMode = theme.palette.mode === 'dark';
 
   return (
     <Container>
@@ -32,7 +32,11 @@ const SimpleHeroWithImageAndCtaButtons = ({
               <Typography
                 component={'h1'}
                 variant="p"
-                color={theme.palette.zesty.zestyGrey}
+                color={
+                  isDarkMode
+                    ? theme.palette.zesty.zestyWhite
+                    : theme.palette.zesty.zestyGrey
+                }
                 gutterBottom
                 sx={{ fontWeight: 400, fontSize: '20px' }}
               >
@@ -45,19 +49,6 @@ const SimpleHeroWithImageAndCtaButtons = ({
               >
                 {title || FillerContent.header}
                 <br />
-                {/* <Typography
-                  color={'primary'}
-                  component={'span'}
-                  variant={'inherit'}
-                  sx={{
-                    background: `linear-gradient(180deg, transparent 82%, ${alpha(
-                      theme.palette.secondary.main,
-                      0.3,
-                    )} 0%)`,
-                  }}
-                >
-                  inspires
-                </Typography> */}
               </Typography>
             </Box>
             <Box marginBottom={3}>
@@ -73,14 +64,18 @@ const SimpleHeroWithImageAndCtaButtons = ({
               <TryFreeButton
                 text={cta_left || FillerContent.cta}
                 variant="contained"
-                color="secondary"
+                color={isDarkMode ? 'primary' : 'secondary'}
                 size="large"
               ></TryFreeButton>
 
               <Box
                 href={cta_right_url || FillerContent.href}
                 component={Button}
-                color={theme.palette.zesty.zestyOrange}
+                color={
+                  isDarkMode
+                    ? theme.palette.zesty.zestyBlue
+                    : theme.palette.zesty.zestyOrange
+                }
                 size="large"
                 marginTop={{ xs: 2, sm: 0 }}
                 marginLeft={{ sm: 2 }}
-Original file line number
+Diff line change
@@ Expand Up / @@ -140,7 +140,7 @@ const RightSide = ({ image }) => { @@
                     sx={{
                       objectFit: 'cover',
                       filter:
-                        theme.palette.mode === 'dark' ? 'brightness(0.7)' : 'none',
+                        theme.palette.mode === 'dark' ? 'brightness(1)' : 'none',
                     }}
                   />
                 </Box>
@@ Expand Down @@