implement ButtonLinkSecondary component

src/components/UI/homepage/HomeSection.tsx

@@ -1,7 +1,7 @@
-import { Box, IconProps, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, IconProps, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
-import NextLink from 'next/link';
 
+import { ButtonLinkSecondary } from '..';
 interface Props {
   sectionTitle: string;
   linkLabel: string;
@@ -26,12 +26,7 @@ export const HomeSection: FC<Props> = ({
           <Svg aria-label={ariaLabel} />
         </Stack>
       )}
-      <Stack
+      <Stack p={4} borderBottom='2px solid' borderColor='primary' sx={{ mt: '0 !important' }}>
-        p={4}
-        borderBottom='2px solid'
-        borderColor='primary'
-        sx={{ mt: '0 !important' }}
-      >
         <Box as='h2' textStyle='h2'>
           {sectionTitle}
         </Box>
@@ -48,13 +43,7 @@ export const HomeSection: FC<Props> = ({
         {children}
       </Stack>
 
-      <Stack sx={{ mt: '0 !important' }}>
+      <ButtonLinkSecondary href={buttonHref}>{linkLabel}</ButtonLinkSecondary>
-        <NextLink href={buttonHref} passHref>
-          <Link variant='button-link-secondary' isExternal={buttonHref.startsWith('http')}>
-            <Text textStyle='home-section-link-label'>{linkLabel}</Text>
-          </Link>
-        </NextLink>
-      </Stack>
     </Stack>
   );
 };

src/components/UI/homepage/WhatIsEthereum.tsx

@@ -1,9 +1,8 @@
-import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
-import NextLink from 'next/link';
-
 import { GlyphHome } from '../svgs/GlyphHome';
 import { ETHEREUM_ORG_URL } from '../../../constants';
+import { ButtonLinkSecondary } from '..';
 
 interface Props {
   children: React.ReactNode;
@@ -22,12 +21,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
           borderRight={{ base: 'none', md: '2px' }}
           borderColor='primary !important'
         >
-          <Stack
+          <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
-            p={4}
-            borderBottom='2px'
-            borderColor='primary'
-            sx={{ mt: '0 !important' }}
-          >
             <Box as='h2' textStyle='h2'>
               What is Ethereum
             </Box>
@@ -52,13 +46,7 @@ export const WhatIsEthereum: FC<Props> = ({ children }) => {
         </GridItem>
       </Grid>
 
-      <Stack sx={{ mt: '0 !important' }}>
+      <ButtonLinkSecondary href={ETHEREUM_ORG_URL}>Learn more on Ethereum.org</ButtonLinkSecondary>
-        <NextLink href={ETHEREUM_ORG_URL} passHref>
-          <Link variant='button-link-secondary' isExternal>
-            <Text textStyle='home-section-link-label'>Learn more on Ethereum.org</Text>
-          </Link>
-        </NextLink>
-      </Stack>
     </Stack>
   );
 };

src/components/UI/homepage/WhyRunANode.tsx

@@ -1,7 +1,7 @@
-import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
 import { FC } from 'react';
-import NextLink from 'next/link';
 
+import { ButtonLinkSecondary } from '..'
 import { GopherHomeNodes } from '../svgs/GopherHomeNodes';
 import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants';
 
@@ -18,12 +18,7 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
         borderColor='primary !important'
       >
         <GridItem order={{ base: 1, md: 2 }}>
-          <Stack
+          <Stack p={4} borderBottom='2px' borderColor='primary' sx={{ mt: '0 !important' }}>
-            p={4}
-            borderBottom='2px'
-            borderColor='primary'
-            sx={{ mt: '0 !important' }}
-          >
             <Box as='h2' textStyle='h2'>
               Why run a node?
             </Box>
@@ -54,13 +49,9 @@ export const WhyRunANode: FC<Props> = ({ children }) => {
         </GridItem>
       </Grid>
 
-      <Stack sx={{ mt: '0 !important' }}>
+      <ButtonLinkSecondary href={ETHEREUM_ORG_RUN_A_NODE_URL}>
-        <NextLink href={ETHEREUM_ORG_RUN_A_NODE_URL} passHref>
+        Read more about running a node
-          <Link variant='button-link-secondary' isExternal>
+      </ButtonLinkSecondary>
-            <Text textStyle='home-section-link-label'>Read more about running a node</Text>
-          </Link>
-        </NextLink>
-      </Stack>
     </Stack>
   );
 };

src/theme/components/Link.ts

@@ -2,13 +2,13 @@ export const Link = {
   variants: {
     'button-link-secondary': {
       color: 'primary',
-      bg: 'button-bg !important',
+      bg: 'button-bg',
       _hover: { textDecoration: 'none', bg: 'primary', color: 'bg' },
       _focus: {
         textDecoration: 'none',
         bg: 'primary',
         color: 'bg',
-        boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg) !important'
+        boxShadow: 'inset 0 0 0 3px var(--chakra-colors-bg)'
       },
       _active: { textDecoration: 'none', bg: 'secondary', color: 'bg' }
     },
@@ -18,7 +18,7 @@ export const Link = {
       _hover: { color: 'body', textDecorationColor: 'body' },
       _focus: {
         color: 'primary',
-        boxShadow: '0 0 0 1px var(--chakra-colors-primary) !important',
+        boxShadow: '0 0 0 1px var(--chakra-colors-primary)',
         textDecoration: 'none'
       },
       _pressed: {