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

chore: add button and link variants

Browse Source
This commit is contained in:
Nicolás Quiroz 2022-10-07 22:18:55 -05:00
parent d1ee8d02ff
commit 217410852f
6 changed files with 74 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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>

78
src/components/UI/homepage/QuickLinks.tsx
View File

@ -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&apos;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>

10
src/pages/index.tsx
View File

@ -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'>

16
src/theme/components/Link.ts Normal file
View File

@ -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
src/theme/components/index.ts
View File

@ -1 +1,2 @@
export * from './Button';
export * from './Link';

20
src/theme/index.ts
View File

@ -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'