interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

convert from grid to flex

This commit is contained in:
Corwin Smith 2022-10-21 12:41:07 -05:00
parent 87706df147
commit d77761ca6e
1 changed files with 78 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/layouts/Footer.tsx
View File

@ -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 { FC } from 'react';
import NextLink from 'next/link'; import NextLink from 'next/link';
@ -18,9 +18,13 @@ import {
export const Footer: FC = () => { export const Footer: FC = () => {
return ( 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'}}
>
<Flex sx={{ mt: '-2px !important' }}>
<Stack
flex={1}
borderRight='2px solid' borderRight='2px solid'
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='brand.light.primary'
@ -36,9 +40,10 @@ export const Footer: FC = () => {
<Text textStyle='home-section-link-label'>DOWNLOADS</Text> <Text textStyle='home-section-link-label'>DOWNLOADS</Text>
</Link> </Link>
</NextLink> </NextLink>
</GridItem> </Stack>
<GridItem <Stack
flex={1}
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='brand.light.primary'
color='brand.light.primary' color='brand.light.primary'
@ -53,11 +58,12 @@ export const Footer: FC = () => {
<Text textStyle='home-section-link-label'>DOCUMENTATION</Text> <Text textStyle='home-section-link-label'>DOCUMENTATION</Text>
</Link> </Link>
</NextLink> </NextLink>
</GridItem> </Stack>
</Grid> </Flex>
<Grid templateColumns='repeat(3, 1fr)' sx={{ mt: '0 !important' }}> <Flex sx={{ mt: '0 !important' }}>
<GridItem <Stack
flex={1}
data-group data-group
borderRight='2px solid' borderRight='2px solid'
borderBottom='2px solid' borderBottom='2px solid'
@ -65,8 +71,8 @@ export const Footer: FC = () => {
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'brand.light.primary',
}} }}
alignItems='center'
> >
<Stack alignItems='center'>
<NextLink href={GETH_TWITTER_URL} passHref> <NextLink href={GETH_TWITTER_URL} passHref>
<Link isExternal p={4}> <Link isExternal p={4}>
<TwitterIcon <TwitterIcon
@ -81,18 +87,18 @@ export const Footer: FC = () => {
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Stack>
</GridItem>
<GridItem <Stack
data-group data-group
flex={1}
borderRight='2px solid' borderRight='2px solid'
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='brand.light.primary'
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'brand.light.primary',
}} }}
alignItems='center'
> >
<Stack alignItems='center'>
<NextLink href={GETH_DISCORD_URL} passHref> <NextLink href={GETH_DISCORD_URL} passHref>
<Link isExternal p={4}> <Link isExternal p={4}>
<DiscordIcon <DiscordIcon
@ -107,17 +113,17 @@ export const Footer: FC = () => {
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Stack>
</GridItem>
<GridItem <Stack
data-group data-group
flex={1}
borderBottom='2px solid' borderBottom='2px solid'
borderColor='brand.light.primary' borderColor='brand.light.primary'
_hover={{ _hover={{
bg: 'brand.light.primary', bg: 'brand.light.primary',
}} }}
alignItems='center'
> >
<Stack alignItems='center'>
<NextLink href={GETH_REPO_URL} passHref> <NextLink href={GETH_REPO_URL} passHref>
<Link isExternal p={4}> <Link isExternal p={4}>
<GitHubIcon <GitHubIcon
@ -132,12 +138,12 @@ export const Footer: FC = () => {
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Stack>
</GridItem> </Flex>
</Grid> </Flex>
<Stack p={4} sx={{ mt: '0 !important' }} textAlign='center'> <Stack p={4} sx={{ mt: '0 !important' }} textAlign='center'>
<Text textStyle='footer-text'>© 2013–2022. The go-ethereum Authors.</Text> <Text textStyle='footer-text'>© 2013–2022. The go-ethereum Authors.</Text>
</Stack> </Stack>
</Stack> </Box>
) )
} }