From d1ee8d02ff4237d45fc3ddd71f4aa48ffc78a93e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Fri, 7 Oct 2022 20:42:06 -0500
Subject: [PATCH] chore: add textStyles to theme

---
 src/components/UI/homepage/HomeHero.tsx    | 44 ++++------------------
 src/components/UI/homepage/HomeSection.tsx | 15 ++------
 src/components/UI/homepage/QuickLinks.tsx  | 15 ++------
 src/theme/components/Button.ts             |  1 -
 src/theme/index.ts                         | 31 ++++++++++++++-
 5 files changed, 43 insertions(+), 63 deletions(-)

diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index 8d25c7d3f7..94a2963078 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/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
-          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>
 
diff --git a/src/components/UI/homepage/HomeSection.tsx b/src/components/UI/homepage/HomeSection.tsx
index 2b2a292905..13339eb8ad 100644
--- a/src/components/UI/homepage/HomeSection.tsx
+++ b/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
-          // 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
diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx
index f947bbc2c6..2b431f596d 100644
--- a/src/components/UI/homepage/QuickLinks.tsx
+++ b/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
-          // 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' }}>
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index a1a4962762..5d953f46c0 100644
--- a/src/theme/components/Button.ts
+++ b/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: {
diff --git a/src/theme/index.ts b/src/theme/index.ts
index a356b8948a..ba6300439f 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -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'