chore: add textStyles to theme
This commit is contained in:
parent
0d0c486240
commit
d1ee8d02ff
|
@ -1,4 +1,4 @@
|
|||
import { Box, Button, Flex, Heading, Stack, Text } from '@chakra-ui/react';
|
||||
import { Box, Button, Flex, Stack, Text } from '@chakra-ui/react';
|
||||
import { FC } from 'react';
|
||||
import NextLink from 'next/link';
|
||||
|
||||
|
@ -8,28 +8,16 @@ export const HomeHero: FC = () => {
|
|||
return (
|
||||
<Stack border='2px solid' borderColor='brand.light.primary' px={4} py={{ base: 8, md: 5 }}>
|
||||
<Box mb={4}>
|
||||
<Heading
|
||||
as='h1' // TODO: move text style to theme
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
fontSize='2.75rem'
|
||||
lineHeight='3.375rem'
|
||||
letterSpacing='5%'
|
||||
color='brand.light.body'
|
||||
<Box
|
||||
as='h1'
|
||||
textStyle='h1'
|
||||
mb={{ base: 2, md: 4 }}
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
>
|
||||
go-ethereum
|
||||
</Heading>
|
||||
</Box>
|
||||
|
||||
<Text
|
||||
// TODO: move text style to theme
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={700}
|
||||
lineHeight='21px'
|
||||
letterSpacing='0.05em'
|
||||
textAlign={{ base: 'center', md: 'left' }}
|
||||
>
|
||||
<Text textStyle='homepage-description'>
|
||||
Official Go implementation of the Ethereum protocol
|
||||
</Text>
|
||||
</Box>
|
||||
|
@ -41,15 +29,7 @@ export const HomeHero: FC = () => {
|
|||
<Flex direction='column' alignItems='center' mr={{ md: 6 }}>
|
||||
<NextLink href={DOWNLOADS_PAGE} passHref>
|
||||
<Button variant='primary' as='a' mb={1}>
|
||||
<Text
|
||||
// TODO: move to textstyles
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
color='yellow.50'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
>
|
||||
Download
|
||||
</Text>
|
||||
<Text textStyle='homepage-primary-label'>Download</Text>
|
||||
</Button>
|
||||
</NextLink>
|
||||
|
||||
|
@ -61,15 +41,7 @@ export const HomeHero: FC = () => {
|
|||
<Flex direction='column' alignItems='center'>
|
||||
<NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
|
||||
<Button variant='primary' as='a' mb={1}>
|
||||
<Text
|
||||
// TODO: move to textstyles
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
color='yellow.50'
|
||||
fontWeight={700}
|
||||
textTransform='uppercase'
|
||||
>
|
||||
Documentation
|
||||
</Text>
|
||||
<Text textStyle='homepage-primary-label'>Documentation</Text>
|
||||
</Button>
|
||||
</NextLink>
|
||||
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Heading, Image, Link, Stack, Text } from '@chakra-ui/react';
|
||||
import { Box, Image, Link, Stack, Text } from '@chakra-ui/react';
|
||||
import { FC } from 'react';
|
||||
import NextLink from 'next/link';
|
||||
|
||||
|
@ -34,18 +34,9 @@ export const HomeSection: FC<Props> = ({
|
|||
borderColor='brand.light.primary'
|
||||
sx={{ mt: '0 !important' }}
|
||||
>
|
||||
<Heading
|
||||
// TODO: move text style to theme
|
||||
as='h2'
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={400}
|
||||
fontSize='1.5rem'
|
||||
lineHeight='auto'
|
||||
letterSpacing='4%'
|
||||
color='brand.light.body'
|
||||
>
|
||||
<Box as='h2' textStyle='h2'>
|
||||
{sectionTitle}
|
||||
</Heading>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Stack
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { Grid, GridItem, Heading, Link, Stack, Text } from '@chakra-ui/react';
|
||||
import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
|
||||
import { FC } from 'react';
|
||||
import NextLink from 'next/link';
|
||||
|
||||
|
@ -8,18 +8,9 @@ export const QuickLinks: FC = () => {
|
|||
return (
|
||||
<Stack border='2px solid' borderColor='brand.light.primary'>
|
||||
<Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
|
||||
<Heading
|
||||
// TODO: move text style to theme
|
||||
as='h2'
|
||||
fontFamily='"JetBrains Mono", monospace'
|
||||
fontWeight={400}
|
||||
fontSize='1.5rem'
|
||||
lineHeight='auto'
|
||||
letterSpacing='4%'
|
||||
color='brand.light.body'
|
||||
>
|
||||
<Box as='h2' textStyle='h2'>
|
||||
Quick Links
|
||||
</Heading>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
<Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>
|
||||
|
|
|
@ -5,7 +5,6 @@ export const Button = {
|
|||
px: '32px',
|
||||
borderRadius: 0,
|
||||
width: { base: '188px', md: 'auto' },
|
||||
// TODO: move to theme colors
|
||||
bg: 'brand.light.primary',
|
||||
_hover: { bg: 'brand.light.secondary' },
|
||||
_focus: {
|
||||
|
|
|
@ -18,8 +18,35 @@ const overrides = {
|
|||
},
|
||||
// TODO: fix textStyles
|
||||
textStyles: {
|
||||
h1: {},
|
||||
h2: {},
|
||||
h1: {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
fontWeight: 700,
|
||||
fontSize: '2.75rem',
|
||||
lineHeight: '3.375rem',
|
||||
letterSpacing: '5%',
|
||||
color: 'brand.light.body'
|
||||
},
|
||||
h2: {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
fontWeight: 400,
|
||||
fontSize: '1.5rem',
|
||||
lineHeight: 'auto',
|
||||
letterSpacing: '4%',
|
||||
color: 'brand.light.body'
|
||||
},
|
||||
'homepage-description': {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
fontWeight: 700,
|
||||
lineHeight: '21px',
|
||||
letterSpacing: '0.05em',
|
||||
textAlign: { base: 'center', md: 'left' }
|
||||
},
|
||||
'homepage-primary-label': {
|
||||
fontFamily: '"JetBrains Mono", monospace',
|
||||
color: 'yellow.50',
|
||||
fontWeight: 700,
|
||||
textTransform: 'uppercase'
|
||||
},
|
||||
'hero-text-small': {
|
||||
fontSize: '13px',
|
||||
fontFamily: '"Inter", sans-serif'
|
||||
|
|
Loading…
Reference in New Issue