chore: add button and link variants
This commit is contained in:
parent
d1ee8d02ff
commit
217410852f
|
@ -6,7 +6,7 @@ interface Props {
|
|||
imgSrc?: string;
|
||||
imgAltText?: string;
|
||||
sectionTitle: string;
|
||||
buttonLabel: string;
|
||||
linkLabel: string;
|
||||
buttonHref: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
@ -15,7 +15,7 @@ export const HomeSection: FC<Props> = ({
|
|||
imgSrc,
|
||||
imgAltText,
|
||||
sectionTitle,
|
||||
buttonLabel,
|
||||
linkLabel,
|
||||
buttonHref,
|
||||
children
|
||||
}) => {
|
||||
|
@ -51,29 +51,8 @@ export const HomeSection: FC<Props> = ({
|
|||
|
||||
<Stack sx={{ mt: '0 !important' }}>
|
||||
<NextLink href={buttonHref} passHref>
|
||||
<Link
|
||||
color='brand.light.primary'
|
||||
bg='green.50'
|
||||
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
|
||||
_focus={{
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.primary',
|
||||
color: 'yellow.50',
|
||||
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
|
||||
}}
|
||||
_active={{ textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }}
|
||||
isExternal={buttonHref.startsWith('http')}
|
||||
>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
// TODO: move to theme colors
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
p={4}
|
||||
>
|
||||
{buttonLabel}
|
||||
</Text>
|
||||
<Link variant='secondary' isExternal={buttonHref.startsWith('http')}>
|
||||
<Text textStyle='home-section-link-label'>{linkLabel}</Text>
|
||||
</Link>
|
||||
</NextLink>
|
||||
</Stack>
|
||||
|
|
|
@ -21,13 +21,11 @@ export const QuickLinks: FC = () => {
|
|||
borderColor='brand.light.primary'
|
||||
>
|
||||
<Stack p={4} h='100%'>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
|
||||
<Text textStyle='quick-link-text' mb={-1}>
|
||||
Don't know where to start?
|
||||
</Text>
|
||||
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
We can help.
|
||||
</Text>
|
||||
<Text textStyle='quick-link-text'>We can help.</Text>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
|
||||
|
@ -52,19 +50,7 @@ export const QuickLinks: FC = () => {
|
|||
h='100%'
|
||||
p={4}
|
||||
>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
// TODO: move to theme colors
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
color='brand.light.primary'
|
||||
_groupHover={{ color: 'yellow.50' }}
|
||||
_groupActive={{ color: 'yellow.50' }}
|
||||
_groupFocus={{ color: 'yellow.50' }}
|
||||
>
|
||||
Get started
|
||||
</Text>
|
||||
<Text textStyle='quick-link-label'>Get started</Text>
|
||||
</Stack>
|
||||
</Link>
|
||||
</NextLink>
|
||||
|
@ -77,13 +63,11 @@ export const QuickLinks: FC = () => {
|
|||
borderColor='brand.light.primary'
|
||||
>
|
||||
<Stack p={4} h='100%'>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
|
||||
<Text textStyle='quick-link-text' mb={-1}>
|
||||
Have doubts?
|
||||
</Text>
|
||||
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
Check the FAQ section in the documentation.
|
||||
</Text>
|
||||
<Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
<GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
|
||||
|
@ -93,21 +77,22 @@ export const QuickLinks: FC = () => {
|
|||
data-group
|
||||
bg='green.50'
|
||||
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
|
||||
_focus={{
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.primary',
|
||||
color: 'yellow.50',
|
||||
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
|
||||
}}
|
||||
_active={{
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.secondary',
|
||||
color: 'yellow.50'
|
||||
}}
|
||||
justifyContent='center'
|
||||
h='100%'
|
||||
p={4}
|
||||
>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
// TODO: move to theme colors
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
color='brand.light.primary'
|
||||
_groupHover={{ color: 'yellow.50' }}
|
||||
>
|
||||
Go to the FAQ
|
||||
</Text>
|
||||
<Text textStyle='quick-link-label'>Go to the FAQ</Text>
|
||||
</Stack>
|
||||
</Link>
|
||||
</NextLink>
|
||||
|
@ -116,13 +101,11 @@ export const QuickLinks: FC = () => {
|
|||
{/* how to contribute */}
|
||||
<GridItem borderRight='2px solid' borderColor='brand.light.primary'>
|
||||
<Stack p={4} h='100%'>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
|
||||
<Text textStyle='quick-link-text' mb={-1}>
|
||||
Want to know how to contribute?
|
||||
</Text>
|
||||
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
Get more information in the documentation.
|
||||
</Text>
|
||||
<Text textStyle='quick-link-text'>Get more information in the documentation.</Text>
|
||||
</Stack>
|
||||
</GridItem>
|
||||
<GridItem>
|
||||
|
@ -132,21 +115,22 @@ export const QuickLinks: FC = () => {
|
|||
data-group
|
||||
bg='green.50'
|
||||
_hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
|
||||
_focus={{
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.primary',
|
||||
color: 'yellow.50',
|
||||
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
|
||||
}}
|
||||
_active={{
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.secondary',
|
||||
color: 'yellow.50'
|
||||
}}
|
||||
justifyContent='center'
|
||||
h='100%'
|
||||
p={4}
|
||||
>
|
||||
<Text
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
// TODO: move to text style
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
textAlign='center'
|
||||
color='brand.light.primary'
|
||||
_groupHover={{ color: 'yellow.50' }}
|
||||
>
|
||||
How to contribute
|
||||
</Text>
|
||||
<Text textStyle='quick-link-label'>How to contribute</Text>
|
||||
</Stack>
|
||||
</Link>
|
||||
</NextLink>
|
||||
|
|
|
@ -26,7 +26,7 @@ const HomePage: NextPage = ({}) => {
|
|||
imgSrc='/images/pages/gopher-home-front.svg'
|
||||
imgAltText='Gopher greeting'
|
||||
sectionTitle='What is Geth'
|
||||
buttonLabel='Get started with Geth'
|
||||
linkLabel='Get started with Geth'
|
||||
buttonHref={`${DOCS_PAGE}/getting-started`}
|
||||
>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
|
@ -100,7 +100,7 @@ const HomePage: NextPage = ({}) => {
|
|||
imgSrc='/images/pages/glyph-home-light.svg'
|
||||
imgAltText='Ethereum glyph'
|
||||
sectionTitle='What is Ethereum'
|
||||
buttonLabel='Learn more on Ethereum.org'
|
||||
linkLabel='Learn more on Ethereum.org'
|
||||
buttonHref={ETHEREUM_ORG_URL}
|
||||
>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
|
@ -115,7 +115,7 @@ const HomePage: NextPage = ({}) => {
|
|||
imgSrc='/images/pages/gopher-home-nodes.svg'
|
||||
imgAltText='Gopher staring at nodes'
|
||||
sectionTitle='Why run a node?'
|
||||
buttonLabel='Read more about running a node'
|
||||
linkLabel='Read more about running a node'
|
||||
buttonHref={ETHEREUM_ORG_RUN_A_NODE_URL}
|
||||
>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
|
@ -132,7 +132,7 @@ const HomePage: NextPage = ({}) => {
|
|||
{/* SECTION:Contribute to Geth */}
|
||||
<HomeSection
|
||||
sectionTitle='Contribute to Geth'
|
||||
buttonLabel='Read our contribution guidelines'
|
||||
linkLabel='Read our contribution guidelines'
|
||||
buttonHref={CONTRIBUTING_PAGE}
|
||||
>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
|
@ -165,7 +165,7 @@ const HomePage: NextPage = ({}) => {
|
|||
{/* SECTION: About the Team */}
|
||||
<HomeSection
|
||||
sectionTitle='About the Team'
|
||||
buttonLabel='Read more about the Ethereum Foundation'
|
||||
linkLabel='Read more about the Ethereum Foundation'
|
||||
buttonHref={ETHEREUM_FOUNDATION_URL}
|
||||
>
|
||||
<Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
export const Link = {
|
||||
variants: {
|
||||
secondary: {
|
||||
color: 'brand.light.primary',
|
||||
bg: 'green.50',
|
||||
_hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' },
|
||||
_focus: {
|
||||
textDecoration: 'none',
|
||||
bg: 'brand.light.primary',
|
||||
color: 'yellow.50',
|
||||
boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
|
||||
},
|
||||
_active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
|
||||
}
|
||||
}
|
||||
};
|
|
@ -1 +1,2 @@
|
|||
export * from './Button';
|
||||
export * from './Link';
|
||||
|
|
|
@ -1,12 +1,13 @@
|
|||
import { extendTheme } from '@chakra-ui/react';
|
||||
|
||||
import { colors, sizes } from './foundations';
|
||||
import { Button } from './components';
|
||||
import { Button, Link } from './components';
|
||||
|
||||
const overrides = {
|
||||
colors,
|
||||
components: {
|
||||
Button
|
||||
Button,
|
||||
Link
|
||||
},
|
||||
sizes,
|
||||
styles: {
|
||||
|
@ -16,7 +17,6 @@ const overrides = {
|
|||
}
|
||||
})
|
||||
},
|
||||
// TODO: fix textStyles
|
||||
textStyles: {
|
||||
h1: {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
|
@ -47,6 +47,20 @@ const overrides = {
|
|||
fontWeight: 700,
|
||||
textTransform: 'uppercase'
|
||||
},
|
||||
'quick-link-text': {
|
||||
fontFamily: '"Inter", sans-serif',
|
||||
lineHeight: '26px'
|
||||
},
|
||||
'quick-link-label': {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase',
|
||||
textAlign: 'center',
|
||||
color: 'brand.light.primary',
|
||||
_groupHover: { color: 'yellow.50' },
|
||||
_groupActive: { color: 'yellow.50' },
|
||||
_groupFocus: { color: 'yellow.50' }
|
||||
},
|
||||
'hero-text-small': {
|
||||
fontSize: '13px',
|
||||
fontFamily: '"Inter", sans-serif'
|
||||
|
|
Loading…
Reference in New Issue