From 53420ede873479ed1f801acf9924e38feff5c1ae Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Sat, 8 Oct 2022 09:53:09 -0600
Subject: [PATCH] refactor to use theme

---
 src/components/UI/downloads/DownloadsHero.tsx | 141 ++++--------------
 .../UI/downloads/DownloadsSection.tsx         |  27 ++--
 .../UI/downloads/DownloadsTable.tsx           |  88 ++++-------
 src/pages/downloads.tsx                       |  54 ++-----
 src/theme/foundations/index.ts                |   1 +
 src/theme/foundations/shadows.ts              |   3 +
 src/theme/index.ts                            |  16 +-
 7 files changed, 103 insertions(+), 227 deletions(-)
 create mode 100644 src/theme/foundations/shadows.ts

diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 488171096b..4b492b5f55 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Heading, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
+import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
 import NextLink from 'next/link';
 
@@ -28,17 +28,12 @@ export const DownloadsHero: FC<DownloadsHero> = ({
       </Box>
 
       <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'
         >
           Download go-ethereum
-        </Heading>
+        </Box>
 
         <Text
           // TODO: move text style to theme
@@ -49,26 +44,16 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           {currentBuildName} ({currentBuildVersion})
         </Text>
 
-        <Text
-          mb={4}
-        >
+        <Text mb={4}>
           You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide.
         </Text>
 
         <NextLink href={linuxBuildURL} passHref>
           <Button
             as='a'
-            p={8}
-            borderRadius={0}
+            variant='primary'
             width={{ base: '100%' }}
-            // TODO: move to theme colors
-            bg='brand.light.primary'
-            _hover={{ bg: 'brand.light.secondary' }}
-            _focus={{
-              bg: 'brand.light.primary',
-              boxShadow: 'inset 0 0 0 2px #06fece !important'
-            }}
-            _active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
+            p={8}
             mb={4}
           >
             <HStack spacing={4}>
@@ -76,22 +61,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
                 <Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' />
               </Box>  
               <Box>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontWeight={700}
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   For linux
                 </Text>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontSize='xs'
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   geth {currentBuildName}
                 </Text>
               </Box>
@@ -102,17 +75,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <NextLink href={macOSBuildURL} passHref>
           <Button
             as='a'
-            p={8}
-            borderRadius={0}
+            variant='primary'
             width={{ base: '100%' }}
-            // TODO: move to theme colors
-            bg='brand.light.primary'
-            _hover={{ bg: 'brand.light.secondary' }}
-            _focus={{
-              bg: 'brand.light.primary',
-              boxShadow: 'inset 0 0 0 2px #06fece !important'
-            }}
-            _active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
+            p={8}
             mb={4}
           >
             <HStack spacing={4}>
@@ -120,22 +85,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
                 <Image m={'auto'} src='/images/pages/macos-logo.svg' alt='Gopher greeting' />
               </Box>  
               <Box>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontWeight={700}
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   For macos
                 </Text>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontSize='xs'
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   geth {currentBuildName}
                 </Text>
               </Box>
@@ -146,17 +99,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <NextLink href={windowsBuildURL} passHref>
           <Button
             as='a'
-            p={8}
-            borderRadius={0}
+            variant='primary'
             width={{ base: '100%' }}
-            // TODO: move to theme colors
-            bg='brand.light.primary'
-            _hover={{ bg: 'brand.light.secondary' }}
-            _focus={{
-              bg: 'brand.light.primary',
-              boxShadow: 'inset 0 0 0 2px #06fece !important'
-            }}
-            _active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
+            p={8}
             mb={4}
           >
             <HStack spacing={4}>
@@ -164,22 +109,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
                 <Image m={'auto'} src='/images/pages/windows-logo.svg' alt='Gopher greeting' />
               </Box>  
               <Box>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontWeight={700}
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   For windows
                 </Text>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontSize='xs'
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   geth {currentBuildName}
                 </Text>
               </Box>
@@ -190,17 +123,9 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <NextLink href={sourceCodeURL} passHref>
           <Button
             as='a'
-            p={8}
-            borderRadius={0}
+            variant='primary'
             width={{ base: '100%' }}
-            // TODO: move to theme colors
-            bg='brand.light.primary'
-            _hover={{ bg: 'brand.light.secondary' }}
-            _focus={{
-              bg: 'brand.light.primary',
-              boxShadow: 'inset 0 0 0 2px #06fece !important'
-            }}
-            _active={{ borderTop: '4px solid', borderColor: 'green.200', pt: '4px' }}
+            p={8}
             mb={4}
           >
             <HStack spacing={4}>
@@ -208,22 +133,10 @@ export const DownloadsHero: FC<DownloadsHero> = ({
                 <Image m={'auto'} src='/images/pages/source-branch.svg' alt='Gopher greeting' />
               </Box>  
               <Box>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontWeight={700}
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   Sources
                 </Text>
-                <Text
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  color='yellow.50'
-                  fontSize='xs'
-                  textTransform='uppercase'
-                >
+                <Text textStyle='downloads-button-label'>
                   geth {currentBuildName}
                 </Text>
               </Box>
@@ -235,14 +148,14 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           <Link
             href={releaseNotesURL}
             isExternal
-            color='#11866f'
-            _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
+            color='brand.light.primary'
+            _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
             _focus={{
-              color: '#11866f',
-              boxShadow: '0 0 0 1px #11866f !important',
+              color: 'brand.light.primary',
+              boxShadow: 'linkBoxShadow',
               textDecoration: 'none'
             }}
-            _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+            _pressed={{ color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' }}
           >
             Release notes for {currentBuildName} {currentBuildVersion}
           </Link>
diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx
index 19cee95f39..aea02d3973 100644
--- a/src/components/UI/downloads/DownloadsSection.tsx
+++ b/src/components/UI/downloads/DownloadsSection.tsx
@@ -1,4 +1,4 @@
-import { Heading, Image, Stack } from '@chakra-ui/react';
+import { Box, Image, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
 
 interface Props {
@@ -15,28 +15,23 @@ export const DownloadsSection: FC<Props> = ({
   sectionTitle,
 }) => {
   return (
-    <Stack border='2px solid #11866F'>
+    <Stack border='2px solid' borderColor='brand.light.primary'>
       {!!imgSrc && (
-        <Stack alignItems='center' p={4} borderBottom='2px solid #11866f'>
+        <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
           {/* TODO: use NextImage */}
           <Image src={imgSrc} alt={imgAltText} />
         </Stack>
       )}
 
-      <Stack p={4} borderBottom='2px solid #11866f' 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%'
-          // TODO: move to theme colors
-          color='#1d242c'
-        >
+      <Stack
+        p={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
+        <Box as='h2' textStyle='h2'>
           {sectionTitle}
-        </Heading>
+        </Box>
       </Stack>
 
       <Stack spacing={4}>
diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx
index 1bed002b33..97b4d4c74e 100644
--- a/src/components/UI/downloads/DownloadsTable.tsx
+++ b/src/components/UI/downloads/DownloadsTable.tsx
@@ -22,27 +22,21 @@ export const DownloadsTable: FC<Props> = ({
     <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
       <Tabs variant='unstyled'>
         <TabList
-          color='#11866f'
-          bg='#d7f5ef'
-          borderBottom='2px solid #11866f'
+          color='brand.light.primary'
+          bg='green.50'
         >
           <Tab
             w={'20%'}
             p={4}
             _selected={{
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
             }}
-            borderRight='2px solid #11866f'
+            borderRight='2px solid'
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
           >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              fontSize='sm'
-            >
+            <Text textStyle='download-tab-label'>
               LINUX
             </Text>
           </Tab>
@@ -50,19 +44,14 @@ export const DownloadsTable: FC<Props> = ({
             w={'20%'}
             p={4}
             _selected={{
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
             }}
-            borderRight='2px solid #11866f'
+            borderRight='2px solid'
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
           >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              fontSize='sm'
-            >
+            <Text textStyle='download-tab-label'>
               MACOS
             </Text>
           </Tab>
@@ -70,19 +59,14 @@ export const DownloadsTable: FC<Props> = ({
             w={'20%'}
             p={4}
             _selected={{
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
             }}
-            borderRight='2px solid #11866f'
+            borderRight='2px solid'
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
           >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              fontSize='sm'
-            >
+            <Text textStyle='download-tab-label'>
               WINDOWS
             </Text>
           </Tab>
@@ -90,19 +74,14 @@ export const DownloadsTable: FC<Props> = ({
             w={'20%'}
             p={4}
             _selected={{
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
             }}
-            borderRight='2px solid #11866f'
+            borderRight='2px solid'
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
           >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              fontSize='sm'
-            >
+            <Text textStyle='download-tab-label'>
               IOS
             </Text>
           </Tab>
@@ -110,18 +89,13 @@ export const DownloadsTable: FC<Props> = ({
             w={'20%'}
             p={4}
             _selected={{
-              bg: '#11866f',
-              color: '#f0f2e2',
+              bg: 'brand.light.primary',
+              color: 'yellow.50',
             }}
+            borderBottom='2px solid'
+            borderColor='brand.light.primary'
           >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              fontSize='sm'
-            >
+            <Text textStyle='download-tab-label'>
               ANDROID
             </Text>
           </Tab>
diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx
index 937d989bca..11c5db357e 100644
--- a/src/pages/downloads.tsx
+++ b/src/pages/downloads.tsx
@@ -47,29 +47,29 @@ const DownloadsPage: NextPage = ({}) => {
           sectionTitle='Specific Versions'
         >
           <Stack p={4}>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               If you&apos;re looking for a specific release, operating system or architecture, below you will find:
             </Text>
 
             <UnorderedList px={4}>
               <ListItem>
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   All stable and develop builds of Geth and tools
                 </Text>
               </ListItem>
               <ListItem>
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Archives for non-primary processor architectures
                 </Text>
               </ListItem>
               <ListItem>
-                <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+                <Text textStyle='quick-link-text'>
                   Android library archives and iOS XCode frameworks
                 </Text>
               </ListItem>
             </UnorderedList>
 
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
               <Link
                 href={''}
@@ -92,7 +92,7 @@ const DownloadsPage: NextPage = ({}) => {
 
         <DownloadsSection sectionTitle='Stable releases'>
           <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '}
               <Link
                 href={GETH_REPO_URL}
@@ -115,19 +115,7 @@ const DownloadsPage: NextPage = ({}) => {
           <DownloadsTable data={testDownloadData}/>
 
           <Stack sx={{ mt: '0 !important' }}>
-            <Button
-              color='#11866f'
-              bg='#d7f5ef'
-              _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
-              _focus={{
-                textDecoration: 'none',
-                bg: '#11866f',
-                color: '#f0f2e2',
-                boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
-              }}
-              _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
-              h={'100%'}
-            >
+            <Link as='button' variant='secondary'>
               <Text
                 fontFamily='"JetBrains Mono", monospace'
                 // TODO: move to theme colors
@@ -138,13 +126,13 @@ const DownloadsPage: NextPage = ({}) => {
               >
                 SHOW OLDER RELEASES
               </Text>
-            </Button>
+            </Link>
           </Stack>
         </DownloadsSection>
 
         <DownloadsSection sectionTitle='Develop builds'>
           <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '}
               <Link
                 href={GETH_REPO_URL}
@@ -167,19 +155,7 @@ const DownloadsPage: NextPage = ({}) => {
           <DownloadsTable data={testDownloadData} />
 
           <Stack sx={{ mt: '0 !important' }}>
-            <Button
-              color='#11866f'
-              bg='#d7f5ef'
-              _hover={{ textDecoration: 'none', bg: '#11866f', color: '#f0f2e2' }}
-              _focus={{
-                textDecoration: 'none',
-                bg: '#11866f',
-                color: '#f0f2e2',
-                boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
-              }}
-              _active={{ textDecoration: 'none', bg: '#25453f', color: '#f0f2e2' }}
-              h={'100%'}
-            >
+            <Link as='button' variant='secondary'>
               <Text
                 fontFamily='"JetBrains Mono", monospace'
                 // TODO: move to theme colors
@@ -190,13 +166,13 @@ const DownloadsPage: NextPage = ({}) => {
               >
                 SHOW OLDER RELEASES
               </Text>
-            </Button>
+            </Link>
           </Stack>
         </DownloadsSection>
 
         <DownloadsSection sectionTitle='OpenPGP Signatures'>
           <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               All the binaries available from this page are signed via our build server PGP keys:
             </Text>
           </Stack>
@@ -215,7 +191,7 @@ const DownloadsPage: NextPage = ({}) => {
 
         <DownloadsSection sectionTitle='Importing keys and verifying builds'>
           <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
             </Text>
 
@@ -226,7 +202,7 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
 
           <Stack p={4} borderBottom='2px solid #11866f'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
             </Text>
 
@@ -237,7 +213,7 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
 
           <Stack p={4}>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>
               From the download listings above you should see a link both to the downloadable archives as well as detached signature files. To verify the authenticity of any downloaded data, grab both files and then run:
             </Text>
 
diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts
index 06d0f4f4f0..b0e872689b 100644
--- a/src/theme/foundations/index.ts
+++ b/src/theme/foundations/index.ts
@@ -1,2 +1,3 @@
 export * from './colors';
+export * from './shadows';
 export * from './sizes';
diff --git a/src/theme/foundations/shadows.ts b/src/theme/foundations/shadows.ts
new file mode 100644
index 0000000000..d870a80e6b
--- /dev/null
+++ b/src/theme/foundations/shadows.ts
@@ -0,0 +1,3 @@
+export const shadows = {
+  linkBoxShadow: '0 0 0 1px #11866f !important'
+}
\ No newline at end of file
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ee49f0ac91..69069c2030 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,6 +1,6 @@
 import { extendTheme } from '@chakra-ui/react';
 
-import { colors, sizes } from './foundations';
+import { colors, shadows, sizes } from './foundations';
 import { Button, Link } from './components';
 
 const overrides = {
@@ -9,6 +9,7 @@ const overrides = {
     Button,
     Link
   },
+  shadows,
   sizes,
   styles: {
     global: () => ({
@@ -65,6 +66,19 @@ const overrides = {
       fontSize: '13px',
       fontFamily: '"Inter", sans-serif'
     },
+    'downloads-button-label': {
+      fontFamily:'"JetBrains Mono", monospace',
+      color:'yellow.50',
+      fontSize:'xs',
+      textTransform:'uppercase',
+    },
+    'download-tab-label': {
+      fontFamily: '"JetBrains Mono", monospace',
+      fontWeight: 700,
+      textTransform: 'uppercase',
+      textAlign: 'center',
+      fontSize: 'sm',
+    },
     // TODO: refactor w/ semantic tokens for light/dark mode
     'link-light': {},
     // TODO: refactor w/ semantic tokens for light/dark mode