change requests for cleanup

src/components/layouts/Footer.tsx

@@ -29,14 +29,14 @@ export const Footer: FC = () => {
         borderColor='brand.light.primary'
       >
         <Flex
-          sx={{ mt: '-2px !important' }}
           borderBottom={{
             base: '2px solid',
             md: 'none'
           }}
           borderColor='brand.light.primary'
         >
-          <Stack
+          <NextLink href={DOWNLOADS_PAGE} passHref>
+            <Link
               flex={1}
               color='brand.light.primary'
               _hover={{
@@ -44,18 +44,17 @@ export const Footer: FC = () => {
                 bg: 'brand.light.primary',
                 color: 'yellow.50 !important'
               }}
-            justifyContent='center'
+              height='full'
               borderRight='2px solid'
               borderColor='brand.light.primary'
             >
-            <NextLink href={DOWNLOADS_PAGE} passHref>
-              <Link _hover={{ textDecoration: 'none' }}>
               <Text textStyle='home-section-link-label'>DOWNLOADS</Text>
             </Link>
           </NextLink>
-          </Stack>
 
-          <Stack
+
+          <NextLink href={DOCS_PAGE} passHref>
+            <Link
               flex={1}
               color='brand.light.primary'
               _hover={{
@@ -63,23 +62,24 @@ export const Footer: FC = () => {
                 bg: 'brand.light.primary',
                 color: 'yellow.50 !important'
               }}
+              height='full'
               borderRight={{
                 base: 'none',
                 md: '2px solid'
               }}
               borderColor='brand.light.primary'
-            justifyContent='center'
             >
-            <NextLink href={DOCS_PAGE} passHref>
-              <Link _hover={{ textDecoration: 'none' }}>
               <Text textStyle='home-section-link-label'>DOCUMENTATION</Text>
             </Link>
           </NextLink>
-          </Stack>
         </Flex>
 
-        <Flex sx={{ mt: '0 !important' }}>
+        <Flex>
-          <Stack
+          <NextLink href={GETH_TWITTER_URL} passHref>
+            <Link
+              isExternal
+              p={4}
+              display='flex'
               flex={1}
               data-group
               borderLeft={{
@@ -92,13 +92,12 @@ export const Footer: FC = () => {
               _hover={{
                 bg: 'brand.light.primary',
               }}
-            alignItems='center'
+              justifyContent='center'
             >
-            <NextLink href={GETH_TWITTER_URL} passHref>
-              <Link isExternal p={4}>
               <TwitterIcon
-                  w={8}
+                w={6}
-                  height={8} 
+                height={6}
+                margin='auto'
                 _groupHover={{
                   svg: {
                     path:{fill: 'yellow.50 !important'}
@@ -107,24 +106,25 @@ export const Footer: FC = () => {
               />
             </Link>
           </NextLink>
-          </Stack>
 
-          <Stack
+          <NextLink href={GETH_DISCORD_URL} passHref>
+            <Link
+              isExternal
+              p={4} 
               data-group 
+              display='flex'
               flex={1}
               _hover={{
                 bg: 'brand.light.primary',
               }}
-            alignItems='center'
+              justifyContent='center'
               borderWidth='2px'
               borderStyle='none solid'
               borderColor='brand.light.primary'
             >
-            <NextLink href={GETH_DISCORD_URL} passHref>
-              <Link isExternal p={4}>
               <DiscordIcon
-                  w={8}
+                w={6}
-                  height={8} 
+                height={6} 
                 _groupHover={{
                   svg: {
                     path:{fill: 'yellow.50 !important'}
@@ -133,21 +133,22 @@ export const Footer: FC = () => {
               />
             </Link>
           </NextLink>
-          </Stack>
 
-          <Stack
+          <NextLink href={GETH_REPO_URL} passHref>
+            <Link
+              isExternal
+              p={4}
               data-group
               flex={1}
+              display='flex'
               _hover={{
                 bg: 'brand.light.primary',
               }}
-            alignItems='center'
+              justifyContent='center'
             >
-            <NextLink href={GETH_REPO_URL} passHref>
-              <Link isExternal p={4}>
               <GitHubIcon
-                  w={7}
+                w={6}
-                  height={7} 
+                height={6} 
                 _groupHover={{
                   svg: {
                     path:{fill: 'yellow.50 !important'}
@@ -156,13 +157,11 @@ export const Footer: FC = () => {
               />
             </Link>
           </NextLink>
-          </Stack>
         </Flex>
       </Flex>
 
       <Stack
         p={4}
-        sx={{ mt: '0 !important' }}
         textAlign='center'
         justifyContent='center'
         borderWidth='2px'