convert from grid to flex

src/components/layouts/Footer.tsx

@@ -1,4 +1,4 @@
-import { Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Flex, Link, Stack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
@@ -18,55 +18,61 @@ import {
 
 export const Footer: FC = () => {
   return (
-    <Stack mt={4} border='2px solid' borderColor='brand.light.primary'>
+    <Box mt={4} border='2px solid' borderColor='brand.light.primary'>
-      <Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '-2px !important' }}>
+      <Flex
-        <GridItem
+        direction={{ base: 'column'}}
-          borderRight='2px solid'
+      >
-          borderBottom='2px solid'
+        <Flex sx={{ mt: '-2px !important' }}>
-          borderColor='brand.light.primary'
+          <Stack
-          color='brand.light.primary'
+            flex={1}
-            _hover={{
+            borderRight='2px solid'
-              textDecoration: 'none',
+            borderBottom='2px solid'
-              bg: 'brand.light.primary',
+            borderColor='brand.light.primary'
-              color: 'yellow.50 !important'
+            color='brand.light.primary'
-            }}
+              _hover={{
-        >
+                textDecoration: 'none',
-          <NextLink href={DOWNLOADS_PAGE} passHref>
+                bg: 'brand.light.primary',
-            <Link _hover={{ textDecoration: 'none' }}>
+                color: 'yellow.50 !important'
-              <Text textStyle='home-section-link-label'>DOWNLOADS</Text>
+              }}
-            </Link>
+          >
-          </NextLink>
+            <NextLink href={DOWNLOADS_PAGE} passHref>
-        </GridItem>
+              <Link _hover={{ textDecoration: 'none' }}>
+                <Text textStyle='home-section-link-label'>DOWNLOADS</Text>
+              </Link>
+            </NextLink>
+          </Stack>
 
-        <GridItem
+          <Stack
-          borderBottom='2px solid'
+            flex={1}
-          borderColor='brand.light.primary'
+            borderBottom='2px solid'
-          color='brand.light.primary'
+            borderColor='brand.light.primary'
+            color='brand.light.primary'
+              _hover={{
+                textDecoration: 'none',
+                bg: 'brand.light.primary',
+                color: 'yellow.50 !important'
+              }}
+          >
+            <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' }}>
+          <Stack
+            flex={1}
+            data-group
+            borderRight='2px solid'
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
             _hover={{
-              textDecoration: 'none',
               bg: 'brand.light.primary',
-              color: 'yellow.50 !important'
             }}
-        >
+            alignItems='center'
-          <NextLink href={DOCS_PAGE} passHref>
+          >
-            <Link _hover={{ textDecoration: 'none' }}>
-              <Text textStyle='home-section-link-label'>DOCUMENTATION</Text>
-            </Link>
-          </NextLink>
-        </GridItem>
-      </Grid>
-
-      <Grid templateColumns='repeat(3, 1fr)' sx={{ mt: '0 !important' }}>
-        <GridItem
-          data-group
-          borderRight='2px solid'
-          borderBottom='2px solid'
-          borderColor='brand.light.primary'
-          _hover={{
-            bg: 'brand.light.primary',
-          }}
-        >
-          <Stack alignItems='center'>
             <NextLink href={GETH_TWITTER_URL} passHref>
               <Link isExternal p={4}>
                 <TwitterIcon
@@ -81,18 +87,18 @@ export const Footer: FC = () => {
               </Link>
             </NextLink>
           </Stack>
-        </GridItem>
 
-        <GridItem
+          <Stack
-          data-group
+            data-group
-          borderRight='2px solid'
+            flex={1}
-          borderBottom='2px solid'
+            borderRight='2px solid'
-          borderColor='brand.light.primary'
+            borderBottom='2px solid'
-          _hover={{
+            borderColor='brand.light.primary'
-            bg: 'brand.light.primary',
+            _hover={{
-          }}
+              bg: 'brand.light.primary',
-        >
+            }}
-          <Stack alignItems='center'>
+            alignItems='center'
+          >
             <NextLink href={GETH_DISCORD_URL} passHref>
               <Link isExternal p={4}>
                 <DiscordIcon
@@ -107,17 +113,17 @@ export const Footer: FC = () => {
               </Link>
             </NextLink>
           </Stack>
-        </GridItem>
 
-        <GridItem
+          <Stack
-          data-group
+            data-group
-          borderBottom='2px solid'
+            flex={1}
-          borderColor='brand.light.primary'
+            borderBottom='2px solid'
-          _hover={{
+            borderColor='brand.light.primary'
-            bg: 'brand.light.primary',
+            _hover={{
-          }}
+              bg: 'brand.light.primary',
-        >
+            }}
-          <Stack alignItems='center'>
+            alignItems='center'
+          >
             <NextLink href={GETH_REPO_URL} passHref>
               <Link isExternal p={4}>
                 <GitHubIcon
@@ -132,12 +138,12 @@ export const Footer: FC = () => {
               </Link>
             </NextLink>
           </Stack>
-        </GridItem>
+        </Flex>
-      </Grid>
+      </Flex>
 
       <Stack p={4} sx={{ mt: '0 !important' }} textAlign='center'>
         <Text textStyle='footer-text'>© 2013–2022. The go-ethereum Authors.</Text>
       </Stack>
-    </Stack>
+    </Box>
   )
 }