Merge branch 'homepage-mobile' into downloads-mobile

src/components/UI/homepage/HomeHero.tsx

@@ -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
+        <Box
-          as='h1' // TODO: move text style to theme
+          as='h1'
-          fontFamily='"JetBrains Mono", monospace'
+          textStyle='h1'
-          fontWeight={700}
-          fontSize='2.75rem'
-          lineHeight='3.375rem'
-          letterSpacing='5%'
-          color='brand.light.body'
           mb={{ base: 2, md: 4 }}
           textAlign={{ base: 'center', md: 'left' }}
         >
           go-ethereum
-        </Heading>
+        </Box>
 
-        <Text
+        <Text textStyle='homepage-description'>
-          // TODO: move text style to theme
-          fontFamily='"JetBrains Mono", monospace'
-          fontWeight={700}
-          lineHeight='21px'
-          letterSpacing='0.05em'
-          textAlign={{ base: 'center', md: 'left' }}
-        >
           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
+              <Text textStyle='homepage-primary-label'>Download</Text>
-                // TODO: move to textstyles
-                fontFamily='"JetBrains Mono", monospace'
-                color='yellow.50'
-                fontWeight={700}
-                textTransform='uppercase'
-              >
-                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
+              <Text textStyle='homepage-primary-label'>Documentation</Text>
-                // TODO: move to textstyles
-                fontFamily='"JetBrains Mono", monospace'
-                color='yellow.50'
-                fontWeight={700}
-                textTransform='uppercase'
-              >
-                Documentation
-              </Text>
             </Button>
           </NextLink>
 

src/components/UI/homepage/HomeSection.tsx

@@ -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
+        <Box as='h2' textStyle='h2'>
-          // 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'
-        >
           {sectionTitle}
-        </Heading>
+        </Box>
       </Stack>
 
       <Stack

src/components/UI/homepage/QuickLinks.tsx

@@ -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
+        <Box as='h2' textStyle='h2'>
-          // 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'
-        >
           Quick Links
-        </Heading>
+        </Box>
       </Stack>
 
       <Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>

src/theme/components/Button.ts

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

src/theme/index.ts

@@ -18,8 +18,35 @@ const overrides = {
   },
   // TODO: fix textStyles
   textStyles: {
-    h1: {},
+    h1: {
-    h2: {},
+      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'