chore: add button and link variants

src/components/UI/homepage/HomeSection.tsx

@@ -6,7 +6,7 @@ interface Props {
   imgSrc?: string;
   imgAltText?: string;
   sectionTitle: string;
-  buttonLabel: string;
+  linkLabel: string;
   buttonHref: string;
   children?: React.ReactNode;
 }
@@ -15,7 +15,7 @@ export const HomeSection: FC<Props> = ({
   imgSrc,
   imgAltText,
   sectionTitle,
-  buttonLabel,
+  linkLabel,
   buttonHref,
   children
 }) => {
@@ -51,29 +51,8 @@ export const HomeSection: FC<Props> = ({
 
       <Stack sx={{ mt: '0 !important' }}>
         <NextLink href={buttonHref} passHref>
-          <Link
+          <Link variant='secondary' isExternal={buttonHref.startsWith('http')}>
-            color='brand.light.primary'
+            <Text textStyle='home-section-link-label'>{linkLabel}</Text>
-            bg='green.50'
-            _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
-            _focus={{
-              textDecoration: 'none',
-              bg: 'brand.light.primary',
-              color: 'yellow.50',
-              boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
-            }}
-            _active={{ textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }}
-            isExternal={buttonHref.startsWith('http')}
-          >
-            <Text
-              fontFamily='"JetBrains Mono", monospace'
-              // TODO: move to theme colors
-              fontWeight={700}
-              textTransform='uppercase'
-              textAlign='center'
-              p={4}
-            >
-              {buttonLabel}
-            </Text>
           </Link>
         </NextLink>
       </Stack>

src/components/UI/homepage/QuickLinks.tsx

@@ -21,13 +21,11 @@ export const QuickLinks: FC = () => {
           borderColor='brand.light.primary'
         >
           <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
               Don&apos;t know where to start?
             </Text>
 
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>We can help.</Text>
-              We can help.
-            </Text>
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
@@ -52,19 +50,7 @@ export const QuickLinks: FC = () => {
                 h='100%'
                 p={4}
               >
-                <Text
+                <Text textStyle='quick-link-label'>Get started</Text>
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                  _groupActive={{ color: 'yellow.50' }}
-                  _groupFocus={{ color: 'yellow.50' }}
-                >
-                  Get started
-                </Text>
               </Stack>
             </Link>
           </NextLink>
@@ -77,13 +63,11 @@ export const QuickLinks: FC = () => {
           borderColor='brand.light.primary'
         >
           <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
               Have doubts?
             </Text>
 
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
-              Check the FAQ section in the documentation.
-            </Text>
           </Stack>
         </GridItem>
         <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
@@ -93,21 +77,22 @@ export const QuickLinks: FC = () => {
                 data-group
                 bg='green.50'
                 _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
                 justifyContent='center'
                 h='100%'
                 p={4}
               >
-                <Text
+                <Text textStyle='quick-link-label'>Go to the FAQ</Text>
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to theme colors
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                >
-                  Go to the FAQ
-                </Text>
               </Stack>
             </Link>
           </NextLink>
@@ -116,13 +101,11 @@ export const QuickLinks: FC = () => {
         {/* how to contribute */}
         <GridItem borderRight='2px solid' borderColor='brand.light.primary'>
           <Stack p={4} h='100%'>
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px' mb={-1}>
+            <Text textStyle='quick-link-text' mb={-1}>
               Want to know how to contribute?
             </Text>
 
-            <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
+            <Text textStyle='quick-link-text'>Get more information in the documentation.</Text>
-              Get more information in the documentation.
-            </Text>
           </Stack>
         </GridItem>
         <GridItem>
@@ -132,21 +115,22 @@ export const QuickLinks: FC = () => {
                 data-group
                 bg='green.50'
                 _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
                 justifyContent='center'
                 h='100%'
                 p={4}
               >
-                <Text
+                <Text textStyle='quick-link-label'>How to contribute</Text>
-                  fontFamily='"JetBrains Mono", monospace'
-                  // TODO: move to text style
-                  fontWeight={700}
-                  textTransform='uppercase'
-                  textAlign='center'
-                  color='brand.light.primary'
-                  _groupHover={{ color: 'yellow.50' }}
-                >
-                  How to contribute
-                </Text>
               </Stack>
             </Link>
           </NextLink>

src/pages/index.tsx

@@ -26,7 +26,7 @@ const HomePage: NextPage = ({}) => {
             imgSrc='/images/pages/gopher-home-front.svg'
             imgAltText='Gopher greeting'
             sectionTitle='What is Geth'
-            buttonLabel='Get started with Geth'
+            linkLabel='Get started with Geth'
             buttonHref={`${DOCS_PAGE}/getting-started`}
           >
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@@ -100,7 +100,7 @@ const HomePage: NextPage = ({}) => {
             imgSrc='/images/pages/glyph-home-light.svg'
             imgAltText='Ethereum glyph'
             sectionTitle='What is Ethereum'
-            buttonLabel='Learn more on Ethereum.org'
+            linkLabel='Learn more on Ethereum.org'
             buttonHref={ETHEREUM_ORG_URL}
           >
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@@ -115,7 +115,7 @@ const HomePage: NextPage = ({}) => {
             imgSrc='/images/pages/gopher-home-nodes.svg'
             imgAltText='Gopher staring at nodes'
             sectionTitle='Why run a node?'
-            buttonLabel='Read more about running a node'
+            linkLabel='Read more about running a node'
             buttonHref={ETHEREUM_ORG_RUN_A_NODE_URL}
           >
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@@ -132,7 +132,7 @@ const HomePage: NextPage = ({}) => {
           {/* SECTION:Contribute to Geth */}
           <HomeSection
             sectionTitle='Contribute to Geth'
-            buttonLabel='Read our contribution guidelines'
+            linkLabel='Read our contribution guidelines'
             buttonHref={CONTRIBUTING_PAGE}
           >
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>
@@ -165,7 +165,7 @@ const HomePage: NextPage = ({}) => {
           {/* SECTION: About the Team */}
           <HomeSection
             sectionTitle='About the Team'
-            buttonLabel='Read more about the Ethereum Foundation'
+            linkLabel='Read more about the Ethereum Foundation'
             buttonHref={ETHEREUM_FOUNDATION_URL}
           >
             <Text fontFamily='"Inter", sans-serif' lineHeight='26px'>

src/theme/components/Link.ts

@@ -0,0 +1,16 @@
+export const Link = {
+  variants: {
+    secondary: {
+      color: 'brand.light.primary',
+      bg: 'green.50',
+      _hover: { textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' },
+      _focus: {
+        textDecoration: 'none',
+        bg: 'brand.light.primary',
+        color: 'yellow.50',
+        boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+      },
+      _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
+    }
+  }
+};

src/theme/components/index.ts

@@ -1 +1,2 @@
 export * from './Button';
+export * from './Link';

src/theme/index.ts

@@ -1,12 +1,13 @@
 import { extendTheme } from '@chakra-ui/react';
 
 import { colors, sizes } from './foundations';
-import { Button } from './components';
+import { Button, Link } from './components';
 
 const overrides = {
   colors,
   components: {
-    Button
+    Button,
+    Link
   },
   sizes,
   styles: {
@@ -16,7 +17,6 @@ const overrides = {
       }
     })
   },
-  // TODO: fix textStyles
   textStyles: {
     h1: {
       fontFamily: '"JetBrains Mono", monospace',
@@ -47,6 +47,20 @@ const overrides = {
       fontWeight: 700,
       textTransform: 'uppercase'
     },
+    'quick-link-text': {
+      fontFamily: '"Inter", sans-serif',
+      lineHeight: '26px'
+    },
+    'quick-link-label': {
+      fontFamily: '"JetBrains Mono", monospace',
+      fontWeight: 700,
+      textTransform: 'uppercase',
+      textAlign: 'center',
+      color: 'brand.light.primary',
+      _groupHover: { color: 'yellow.50' },
+      _groupActive: { color: 'yellow.50' },
+      _groupFocus: { color: 'yellow.50' }
+    },
     'hero-text-small': {
       fontSize: '13px',
       fontFamily: '"Inter", sans-serif'