Remove flex from DownloadsHero

This commit is contained in:
Corwin Smith 2022-11-15 15:19:12 -07:00
parent 99dfffb820
commit 4cd65f1b22
1 changed files with 35 additions and 34 deletions

View File

@ -2,7 +2,6 @@ import {
Box, Box,
Center, Center,
Button, Button,
Flex,
Grid, Grid,
Image, Image,
Link, Link,
@ -47,24 +46,14 @@ export const DownloadsHero: FC<DownloadsHero> = ({
templateColumns={{ base: 'repeat(1, 1fr)', lg: '1fr 430px' }} templateColumns={{ base: 'repeat(1, 1fr)', lg: '1fr 430px' }}
gap={4} gap={4}
> >
<Flex flexDirection='column'> <Stack>
<Flex mb={4} direction={{ base: 'column', md: 'row-reverse' }}> <Grid
<Flex mb={4}
py={{ base: 0 }} templateColumns={{ base: 'repeat(1, 1fr)', md: '1fr 300px', lg: '1fr' }}
px={{ base: 8 }} gap={4}
flex={{ base: 'none' }} p={4}
display={{ base: 'block', lg: 'none' }}
> >
<Center> <Stack flexDirection={{ base: 'column' }} alignItems={{ base: 'flex-start' }}>
<Image
src='/images/pages/gopher-downloads-front-light.svg'
alt='Gopher plugged in'
w={{ md: 72 }}
/>
</Center>
</Flex>
<Flex flexDirection={{ base: 'column' }} alignItems={{ base: 'flex-start' }}>
<Box as='h1' textStyle='h1'> <Box as='h1' textStyle='h1'>
Download go-ethereum Download go-ethereum
</Box> </Box>
@ -84,8 +73,24 @@ export const DownloadsHero: FC<DownloadsHero> = ({
further down the page. If you&apos;re looking to install Geth and/or associated tools further down the page. If you&apos;re looking to install Geth and/or associated tools
via your favorite package manager, please check our installation guide. via your favorite package manager, please check our installation guide.
</Text> </Text>
</Flex> </Stack>
</Flex>
<Stack
py={{ base: 0 }}
px={{ base: 8 }}
flex={{ base: 'none' }}
display={{ base: 'block', lg: 'none' }}
order={{base: -1, md: 1}}
>
<Center>
<Image
src='/images/pages/gopher-downloads-front-light.svg'
alt='Gopher plugged in'
w={{ md: 72 }}
/>
</Center>
</Stack>
</Grid>
<Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4} mb={4}> <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4} mb={4}>
{Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
@ -117,21 +122,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
Release notes for {currentBuildName} {currentBuildVersion} Release notes for {currentBuildName} {currentBuildVersion}
</Link> </Link>
</Box> </Box>
</Flex> </Stack>
<Flex
py={{ base: 0 }} <Center
px={{ base: 8 }}
flex={{ base: 'none' }}
display={{ base: 'none', lg: 'flex' }} display={{ base: 'none', lg: 'flex' }}
> >
<Center>
<Image <Image
src='/images/pages/gopher-downloads-front-light.svg' src='/images/pages/gopher-downloads-front-light.svg'
alt='Gopher plugged in' alt='Gopher plugged in'
w={96} w={96}
/> />
</Center> </Center>
</Flex>
</Grid> </Grid>
); );
}; };