tornadocontrib/go-ethereum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement ButtonLinkSecondary component

Browse Source
This commit is contained in:
Paul Wackerow 2022-11-16 15:03:37 -08:00
parent e9ca402279
commit 87f1d60428
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
4 changed files with 17 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/UI/homepage/HomeSection.tsx
View File

@ -1,7 +1,7 @@
import { Box, IconProps, Link, Stack, Text } from '@chakra-ui/react';
import { Box, IconProps, Stack } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
import { ButtonLinkSecondary } from '..';
interface Props {
sectionTitle: string;
linkLabel: string;
@ -26,12 +26,7 @@ export const HomeSection: FC<Props> = ({
<Svg aria-label={ariaLabel} />
</Stack>
)}
<Stack
p={4}
borderBottom='2px solid'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Stack p={4} borderBottom='2px solid' borderColor='primary' sx={{ mt: '0 !important' }}>
<Box as='h2' textStyle='h2'>
{sectionTitle}
</Box>
@ -48,13 +43,7 @@ export const HomeSection: FC<Props> = ({
{children}
</Stack>
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={buttonHref} passHref>
<Link variant='button-link-secondary' isExternal={buttonHref.startsWith('http')}>
<Text textStyle='home-section-link-label'>{linkLabel}</Text>
</Link>
</NextLink>
</Stack>
<ButtonLinkSecondary href={buttonHref}>{linkLabel}</ButtonLinkSecondary>
</Stack>
);
};

20
src/components/UI/homepage/WhatIsEthereum.tsx
View File

@ -1,9 +1,8 @@
import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
import { GlyphHome } from '../svgs/GlyphHome';
import { ETHEREUM_ORG_URL } from '../../../constants';
import { ButtonLinkSecondary } from '..';
interface Props {
children: React.ReactNode;
@ -22,12 +21,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
borderRight={{ base: 'none', md: '2px' }}
borderColor='primary !important'
>
<Stack
p={4}
borderBottom='2px'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
<Box as='h2' textStyle='h2'>
What is Ethereum
</Box>
@ -52,13 +46,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
</GridItem>
</Grid>
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={ETHEREUM_ORG_URL} passHref>
<Link variant='button-link-secondary' isExternal>
<Text textStyle='home-section-link-label'>Learn more on Ethereum.org</Text>
</Link>
</NextLink>
</Stack>
<ButtonLinkSecondary href={ETHEREUM_ORG_URL}>Learn more on Ethereum.org</ButtonLinkSecondary>
</Stack>
);
};

21
src/components/UI/homepage/WhyRunANode.tsx
View File

@ -1,7 +1,7 @@
import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react';
import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
import { FC } from 'react';
import NextLink from 'next/link';
import { ButtonLinkSecondary } from '..'
import { GopherHomeNodes } from '../svgs/GopherHomeNodes';
import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants';
@ -18,12 +18,7 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
borderColor='primary !important'
>
<GridItem order={{ base: 1, md: 2 }}>
<Stack
p={4}
borderBottom='2px'
borderColor='primary'
sx={{ mt: '0 !important' }}
>
<Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
<Box as='h2' textStyle='h2'>
Why run a node?
</Box>
@ -54,13 +49,9 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
</GridItem>
</Grid>
<Stack sx={{ mt: '0 !important' }}>
<NextLink href={ETHEREUM_ORG_RUN_A_NODE_URL} passHref>
<Link variant='button-link-secondary' isExternal>
<Text textStyle='home-section-link-label'>Read more about running a node</Text>
</Link>
</NextLink>
</Stack>
<ButtonLinkSecondary href={ETHEREUM_ORG_RUN_A_NODE_URL}>
Read more about running a node
</ButtonLinkSecondary>
</Stack>
);
};

6
src/theme/components/Link.ts
View File

@ -2,13 +2,13 @@ export const Link = {
variants: {
'button-link-secondary': {
color: 'primary',
bg: 'button-bg !important',
bg: 'button-bg',
_hover: { textDecoration: 'none', bg: 'primary', color: 'bg' },
_focus: {
textDecoration: 'none',
bg: 'primary',
color: 'bg',
boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg)'
},
_active: { textDecoration: 'none', bg: 'secondary', color: 'bg' }
},
@ -18,7 +18,7 @@ export const Link = {
_hover: { color: 'body', textDecorationColor: 'body' },
_focus: {
color: 'primary',
boxShadow: '0 0 0 1px var(--chakra-colors-primary) !important',
boxShadow: '0 0 0 1px var(--chakra-colors-primary)',
textDecoration: 'none'
},
_pressed: {