Fix margins, paddings and optimize ui

chambaz · web-flow · commit d970a22ab099 · 2022-04-20T00:34:44.000+05:30
* Various padding / margin updates to intro component to better match values

* Partners top / bottom padding to match design

* Update partners button padding to match design

* Clean up footer styles

* Collapse footer on mobile

* Increase partners spacing on mobile

* Intro component margin adjustments on mobile

* Values component width adjustment on mobile

* Add key to link lists in footer

* Remove nav padding on mobile

* Intro fade in animation
diff --git a/frontend/src/Components/Footer/index.tsx b/frontend/src/Components/Footer/index.tsx
@@ -20,123 +20,111 @@ const ListHeader = ({ children }: { children: ReactNode }) => {
   );
 };
 
+type link = {
+  href: string;
+  text: string;
+};
+
+const ListLinks = (links: link[]) => {
+  return (
+    <>
+      {links.map((link: link, key) => {
+        return (
+          <Link
+            key={key}
+            textDecoration="underline"
+            fontSize="1.3rem"
+            color="#C3C3C3"
+            _hover={{ textDecoration: 'none' }}
+            href={link.href}
+            isExternal
+          >
+            {link.text}
+          </Link>
+        );
+      })}
+    </>
+  );
+};
+
 const Footer = () => {
   const { colorMode } = useColorMode();
   return (
-    <Box pt={{ base: 8, lg: 16 }}>
+    <Box pt="6rem" pb="5.875rem" width="100%">
       <SimpleGrid
         templateColumns={{
-          sm: '4fr 2fr',
-          md: '1.5fr 1.5fr 1fr 1fr',
+          md: '1fr',
+          lg: '3fr 1fr 1fr 1fr',
         }}
         spacing={{ base: 10, md: 16 }}
       >
         <Stack>
           <Flex alignItems="center">
             <Image
-              width="4rem"
-              h="4rem"
+              width="5rem"
+              h="5rem"
               src={`/D_D_logo-${colorMode === 'dark' ? 'dark' : 'light'}.svg`}
               alt="logo"
             />
             <Text
               ml={'1.25rem'}
               mr={{ base: '0', md: '3rem' }}
               fontWeight="bold"
+              fontSize="1.7rem"
               color={colorMode === 'dark' ? '#FFFFFF' : '#000000'}
             >
               Developer DAO
             </Text>
           </Flex>
         </Stack>
 
-        <Stack align={'flex-start'}>
+        <Stack align={'flex-start'} paddingTop="1.4375rem">
           <ListHeader>Useful Links</ListHeader>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={
-              'https://developerdao.notion.site/developerdao/Developer-DAO-Wiki-eff4dcb00bef46fbaa93e9e4cf940e2e'
-            }
-            isExternal
-          >
-            Wiki
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={'https://forum.developerdao.com/'}
-            isExternal
-          >
-            Forum
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={
-              'https://developerdao.notion.site/How-to-use-Snapshot-32692309faf446ddb2a898f22050fb5f#05f55b4052c044169402a443b36945ff'
-            }
-            isExternal
-          >
-            Snapshot
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={'https://www.youtube.com/channel/UCoYk_C5So-Tec1OGzbGKhRw'}
-            isExternal
-          >
-            Podcast
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={
-              'https://developerdao.notion.site/Newsletter-d9c971f2bea446338624042ea20547f9'
-            }
-            isExternal
-          >
-            Newsletter
-          </Link>
+          {ListLinks([
+            {
+              href: 'https://developerdao.notion.site/developerdao/Developer-DAO-Wiki-eff4dcb00bef46fbaa93e9e4cf940e2e',
+              text: 'Wiki',
+            },
+            {
+              href: 'https://forum.developerdao.com/',
+              text: 'Forum',
+            },
+            {
+              href: 'https://developerdao.notion.site/How-to-use-Snapshot-32692309faf446ddb2a898f22050fb5f#05f55b4052c044169402a443b36945ff',
+              text: 'Snapshot',
+            },
+            {
+              href: 'https://www.youtube.com/channel/UCoYk_C5So-Tec1OGzbGKhRw',
+              text: 'Podcast',
+            },
+            {
+              href: 'https://developerdao.notion.site/Newsletter-d9c971f2bea446338624042ea20547f9',
+              text: 'Newsletter',
+            },
+          ])}
         </Stack>
-        <Stack align={'flex-start'}>
+        <Stack align={'flex-start'} paddingTop="1.4375rem">
           <ListHeader>Discover</ListHeader>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={'https://devdao.mirror.xyz/'}
-            isExternal
-          >
-            Blog
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={'https://airtable.com/shrzgqiMiHE18Iy9O/tbljejdzelezqT0W7'}
-            isExternal
-          >
-            Learning Resources
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={
-              'https://developerdao.notion.site/Projects-c2240a6c0b0c41bea285f1ef9629f6db'
-            }
-            isExternal
-          >
-            Projects
-          </Link>
-          <Link
-            textDecoration="underline"
-            _hover={{ textDecoration: 'none' }}
-            href={'#'}
-            isExternal
-          >
-            Partners
-          </Link>
+          {ListLinks([
+            {
+              href: 'https://devdao.mirror.xyz/',
+              text: 'Blog',
+            },
+            {
+              href: 'https://airtable.com/shrzgqiMiHE18Iy9O/tbljejdzelezqT0W7/',
+              text: 'Learning Resources',
+            },
+            {
+              href: 'https://developerdao.notion.site/Projects-c2240a6c0b0c41bea285f1ef9629f6db',
+              text: 'Projects',
+            },
+            {
+              href: '#',
+              text: 'Partners',
+            },
+          ])}
         </Stack>
-        <Stack align={'flex-start'}>
+        <Stack align={'flex-start'} paddingTop="1.4375rem">
           <ListHeader>Social</ListHeader>
           <ButtonGroup>
             <Link target={'_blank'} href="https://twitter.com/developer_dao">
diff --git a/frontend/src/Components/Header/index.tsx b/frontend/src/Components/Header/index.tsx
@@ -172,7 +172,7 @@ const NavBarContainer = ({ children }: { children: ReactNode }) => {
       w="100%"
       mb={8}
       py={1}
-      px={3}
+      px={{ base: 0, lg: 3 }}
     >
       {children}
     </Flex>
diff --git a/frontend/src/Components/Intro/index.tsx b/frontend/src/Components/Intro/index.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import {
   Box,
   Button,
@@ -18,16 +19,27 @@ const codeLaunched = false;
 
 const IntroComponent = () => {
   const { colorMode } = useColorMode();
+  const [showImages, setShowImages] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShowImages(true);
+    }, 1000);
+  }, []);
+
   return (
     <Flex
       flexDirection={{ base: 'column', lg: 'row' }}
       justifyContent="space-between"
       pt={{ base: '0', lg: '4.5rem' }}
+      pb="5rem"
       w="100%"
     >
       {!codeLaunched && (
         <Box
-          w={{ base: '100%', xl: '34rem' }}
+          w={{ base: '100%', xl: '40%' }}
+          minW={{ base: '0', xl: '34rem' }}
+          margin={{ lg: '0.75rem' }}
           border="1px solid"
           borderRadius="11px"
           p="2rem"
@@ -106,7 +118,11 @@ const IntroComponent = () => {
       )}
 
       {codeLaunched && (
-        <Box w={{ base: '100%', xl: '35rem' }}>
+        <Box
+          w={{ base: '100%', xl: '40%' }}
+          minW={{ base: '0', xl: '35rem' }}
+          margin="0.85rem"
+        >
           <Text
             fontFamily="Inter"
             fontWeight="800"
@@ -169,7 +185,7 @@ const IntroComponent = () => {
       <Flex
         direction="column"
         maxWidth={{ base: 'none', xl: '45%', '2xl': 'none' }}
-        mr={{ base: 'auto', xl: '0' }}
+        mr={{ base: 'auto', xl: '.75rem' }}
         ml={{ base: 'auto', lg: '2rem' }}
         mt={{ base: '5rem', lg: 0 }}
         mb={{ base: '2rem', xl: 0 }}
@@ -178,6 +194,8 @@ const IntroComponent = () => {
         <Image
           h={{ base: '2rem', xl: '2.6875rem' }}
           alignSelf="end"
+          opacity={Number(showImages)}
+          transition=".3s"
           src="/intro_person_top.svg"
           alt="intro_person_top"
           mr={{ base: '3rem', lg: '5rem', xl: '7.75rem' }}
@@ -194,7 +212,9 @@ const IntroComponent = () => {
             <Image
               src="/intro_person_1.svg"
               alt="intro_person_1"
+              opacity={Number(showImages)}
               transition=".3s"
+              transitionDelay=".2s"
               w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
               transform={{
                 base: 'translateX(0)',
@@ -206,7 +226,9 @@ const IntroComponent = () => {
             <Image
               src="/intro_person_2.svg"
               alt="intro_person_2"
+              opacity={Number(showImages)}
               transition=".3s"
+              transitionDelay=".4s"
               w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
               transform={{
                 base: 'translateY(30px)',
@@ -217,7 +239,9 @@ const IntroComponent = () => {
             <Image
               src="/intro_person_3.svg"
               alt="intro_person_3"
+              opacity={Number(showImages)}
               transition=".3s"
+              transitionDelay=".6s"
               w={{ base: '15rem', xl: '17rem', '2xl': '19.75rem' }}
               transform={{
                 base: 'translate(40px)',
@@ -231,7 +255,9 @@ const IntroComponent = () => {
             <Image
               src="/intro_person_4.svg"
               alt="intro_person_4"
+              opacity={Number(showImages)}
               transition=".3s"
+              transitionDelay=".8s"
               w={{ base: '9rem', md: '12rem', lg: '13rem', '2xl': '15.75rem' }}
               style={{ transform: 'translate(-30px, 30px)' }}
             />
diff --git a/frontend/src/Components/Partners/index.tsx b/frontend/src/Components/Partners/index.tsx
@@ -18,12 +18,12 @@ const Partners = () => {
   }, []);
 
   return (
-    <Flex flexDir={'column'} justifyContent="center">
+    <Flex flexDir="column" justifyContent="center" pt="5.5rem" pb="5.5rem">
       <Heading
         textTransform={'capitalize'}
         fontFamily="Inter"
         fontWeight="800"
-        fontSize={{ base: '2.625rem', xl: '3.375rem' }}
+        fontSize="3.375rem"
         mb={{ base: '5rem', xl: '6.175rem' }}
         textAlign="center"
       >
@@ -32,7 +32,7 @@ const Partners = () => {
       <Flex flexDir={{ base: 'column', xl: 'row' }} alignItems={'center'}>
         <Link
           href="https://thirdweb.com"
-          mb={{ base: '2.5rem', xl: '0' }}
+          mb={{ base: '4rem', xl: '0' }}
           mr={{ base: '0', xl: '6rem' }}
           target="_blank"
         >
@@ -43,7 +43,7 @@ const Partners = () => {
         </Link>
         <Link
           href="https://gitcoin.co"
-          mb={{ base: '2.5rem', xl: '0' }}
+          mb={{ base: '4rem', xl: '0' }}
           mr={{ base: '0', xl: '6rem' }}
           target="_blank"
         >
@@ -53,7 +53,7 @@ const Partners = () => {
           />
         </Link>
         <Link
-          mb={{ base: '2.5rem', xl: '0' }}
+          mb={{ base: '4rem', xl: '0' }}
           mr={{ base: '0', xl: '6rem' }}
           href="https://polygon.technology"
           target="_blank"
@@ -79,11 +79,10 @@ const Partners = () => {
         fontWeight="500"
         fontSize={{ base: '1rem', xl: '1.25rem' }}
         borderRadius="56px"
-        paddingX={'1.5rem'}
-        paddingY={'1.5rem'}
+        px="2rem"
+        py="2rem"
         mt={{ base: '5rem', xl: '6.85rem' }}
         alignSelf="center"
-        mb={'4rem'}
         onClick={handleButtonClick}
       >
         Become a partner <ArrowForwardIcon w="1.5rem" h={'22px'} ml="8px" />
diff --git a/frontend/src/Components/Values/index.tsx b/frontend/src/Components/Values/index.tsx
@@ -84,7 +84,7 @@ const Values = () => {
   );
 
   return (
-    <Flex justify="center" wrap="wrap-reverse" w={isMobile ? '95vw' : 'auto'}>
+    <Flex justify="center" wrap="wrap-reverse">
       <Box className="box-border" flex="3" minW={isMobile ? '100%' : '20rem'}>
         <Heading variant={isMobile ? 'mediumMobile' : 'medium'}>
           {t('values.title')}

Original file line number	Diff line number	Diff line change
`@@ -172,7 +172,7 @@ const NavBarContainer = ({ children }: { children: ReactNode }) => {`
`172`	`172`	`w="100%"`
`173`	`173`	`mb={8}`
`174`	`174`	`py={1}`
`175`		`- px={3}`
	`175`	`+ px={{ base: 0, lg: 3 }}`
`176`	`176`	`>`
`177`	`177`	`{children}`
`178`	`178`	`</Flex>`