From 520d48f11955d615dfa584bff18d0349d8850883 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Tue, 29 Nov 2022 15:47:58 -0300
Subject: [PATCH] chore: update SpecificVersionsSection component layout to
 match homepage (#64)

* chore: update SpecificVersionsSection component layout to match homepage

* chore: remove non-required repeat function
---
 .../UI/downloads/SpecificVersionsSection.tsx  | 56 ++++++++++---------
 src/pages/index.tsx                           |  2 +-
 2 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/src/components/UI/downloads/SpecificVersionsSection.tsx b/src/components/UI/downloads/SpecificVersionsSection.tsx
index 2909379d63..aa619529bb 100644
--- a/src/components/UI/downloads/SpecificVersionsSection.tsx
+++ b/src/components/UI/downloads/SpecificVersionsSection.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, Image, Stack } from '@chakra-ui/react';
+import { Box, Flex, Grid, GridItem, Image, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
 import { GopherHomeLinks } from '../svgs';
 
@@ -8,31 +8,33 @@ interface Props {
 
 export const SpecificVersionsSection: FC<Props> = ({ children }) => {
   return (
-    <Flex
-      id='specificversions'
-      border='2px'
-      borderColor='primary'
-      flexDir={{ base: 'column', md: 'row' }}
-    >
-      <Flex
-        p={4}
-        alignItems='center'
-        justifyContent='center'
-        borderBottom={{ base: '2px', md: 'none' }}
-        borderRight={{ base: 'none', md: '2px' }}
-        borderColor='primary !important'
-        flex='none'
-      >
-        <GopherHomeLinks />
-      </Flex>
-      <Flex flexDir='column'>
-        <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
-          <Box as='h2' textStyle='h2'>
-            Specific Versions
-          </Box>
-        </Stack>
-        {children}
-      </Flex>
-    </Flex>
+    <Grid id='specificversions' templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
+      <GridItem w='auto'>
+        <Box h='100%'>
+          {/* TODO: replace with animated/video version */}
+          <Stack
+            justifyContent='center'
+            alignItems='center'
+            p={4}
+            border='2px solid'
+            borderColor='primary'
+            h='100%'
+          >
+            <GopherHomeLinks />
+          </Stack>
+        </Box>
+      </GridItem>
+
+      <GridItem>
+        <Flex flexDir='column' border='2px solid' borderColor='primary' pb={6}>
+          <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
+            <Box as='h2' textStyle='h2'>
+              Specific Versions
+            </Box>
+          </Stack>
+          {children}
+        </Flex>
+      </GridItem>
+    </Grid>
   );
 };
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 1ca4bb54fd..d49a3bb476 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -142,7 +142,7 @@ const HomePage: NextPage = ({}) => {
             </GridItem>
           </Grid>
 
-          <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: '300px 1fr' }} gap={4}>
+          <Grid templateColumns={{ base: '1fr', md: '300px 1fr' }} gap={4}>
             <GridItem w='auto'>
               <Box h='100%'>
                 {/* TODO: replace with animated/video version */}