theme cleanup

src/components/UI/downloads/DownloadsHero.tsx

@@ -148,14 +148,7 @@ export const DownloadsHero: FC<DownloadsHero> = ({
           <Link
             href={releaseNotesURL}
             isExternal
-            color='brand.light.primary'
-            _hover={{ color: 'brand.light.body', textDecorationColor: 'brand.light.body' }}
-            _focus={{
-              color: 'brand.light.primary',
-              boxShadow: 'linkBoxShadow',
-              textDecoration: 'none'
-            }}
-            _pressed={{ color: 'brand.light.secondary', textDecorationColor: 'brand.light.secondary' }}
+            variant='href'
           >
             Release notes for {currentBuildName} {currentBuildVersion}
           </Link>

src/components/UI/downloads/DownloadsSection.tsx

@@ -3,6 +3,7 @@ import { FC } from 'react';
 
 interface Props {
   children?: React.ReactNode;
+  id: string;
   imgSrc?: string;
   imgAltText?: string;
   sectionTitle: string
@@ -13,9 +14,10 @@ export const DownloadsSection: FC<Props> = ({
   imgSrc,
   imgAltText,
   sectionTitle,
+  id
 }) => {
   return (
-    <Stack border='2px solid' borderColor='brand.light.primary'>
+    <Stack border='2px solid' borderColor='brand.light.primary' id={id}>
       {!!imgSrc && (
         <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
           {/* TODO: use NextImage */}

src/components/UI/downloads/DownloadsTable.tsx

@@ -19,7 +19,11 @@ export const DownloadsTable: FC<Props> = ({
   data
 }) => {
   return (
-    <Stack sx={{ mt: '0 !important' }} borderBottom='2px solid #11866f'>
+    <Stack
+      sx={{ mt: '0 !important' }}
+      borderBottom='2px solid'
+      borderColor='brand.light.primary'
+    >
       <Tabs variant='unstyled'>
         <TabList
           color='brand.light.primary'

src/pages/downloads.tsx

@@ -1,5 +1,4 @@
 import {
-  Button,
   Code,
   Link,
   ListItem,
@@ -45,6 +44,7 @@ const DownloadsPage: NextPage = ({}) => {
           imgSrc='/images/pages/gopher-home-side-desktop.svg'
           imgAltText='Gopher facing right'
           sectionTitle='Specific Versions'
+          id='specificversions'
         >
           <Stack p={4}>
             <Text textStyle='quick-link-text'>
@@ -72,16 +72,8 @@ const DownloadsPage: NextPage = ({}) => {
             <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={''}
-                isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                href={'#pgpsignatures'}
+                variant='href'
               >
                 OpenPGP
               </Link>{' '}
@@ -90,21 +82,14 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Stable releases'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Stable releases' id='stablereleases'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <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}
                 isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                variant='href'
               >
                 GitHub repository.
               </Link>
@@ -130,21 +115,14 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Develop builds'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Develop builds' id='developbuilds'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <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}
                 isExternal
-                color='#11866f'
-                _hover={{ color: '#1d242c', textDecorationColor: '#1d242c' }}
-                _focus={{
-                  color: '#11866f',
-                  boxShadow: '0 0 0 1px #11866f !important',
-                  textDecoration: 'none'
-                }}
-                _pressed={{ color: '#25453f', textDecorationColor: '#25453f' }}
+                variant='href'
               >
                 GitHub repository.
               </Link>
@@ -170,8 +148,8 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack>
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='OpenPGP Signatures'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='OpenPGP Signatures' id='pgpsignatures'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               All the binaries available from this page are signed via our build server PGP keys:
             </Text>
@@ -189,8 +167,8 @@ const DownloadsPage: NextPage = ({}) => {
           </Stack> */}
         </DownloadsSection>
 
-        <DownloadsSection sectionTitle='Importing keys and verifying builds'>
-          <Stack p={4} borderBottom='2px solid #11866f'>
+        <DownloadsSection sectionTitle='Importing keys and verifying builds' id='importingkeys'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               You can import the build server public keys by grabbing the individual keys directly from the keyserver network:
             </Text>
@@ -201,7 +179,7 @@ const DownloadsPage: NextPage = ({}) => {
             </Code>
           </Stack>
 
-          <Stack p={4} borderBottom='2px solid #11866f'>
+          <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
             <Text textStyle='quick-link-text'>
               Similarly you can import all the developer public keys by grabbing them directly from the keyserver network:
             </Text>

src/theme/components/Link.ts

@@ -11,6 +11,22 @@ export const Link = {
         boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
       },
       _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
+    },
+    href: {
+      color: 'brand.light.primary',
+      _hover: {
+        color: 'brand.light.body',
+        textDecorationColor: 'brand.light.body' 
+      },
+      _focus: {
+        color: 'brand.light.primary',
+        boxShadow: 'linkBoxShadow',
+        textDecoration: 'none'
+      },
+      _pressed: { 
+        color: 'brand.light.secondary',
+        textDecorationColor: 'brand.light.secondary'
+      }
     }
   }
 };