From 640b72abc699251cf2e7d4f2888bcb83aee85103 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Wed, 7 Dec 2022 18:40:13 -0300
Subject: [PATCH] fix: add :hover color for hero buttons on dark mode

---
 src/components/UI/downloads/DownloadsHero.tsx |  9 +++++++--
 src/components/UI/homepage/HomeHero.tsx       |  4 ++--
 src/theme/foundations/textStyles.ts           | 11 +++++++----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 3792864f71..9588bded9f 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -80,12 +80,17 @@ export const DownloadsHero: FC<DownloadsHero> = ({
         <Grid templateColumns={{ base: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' }} gap={4}>
           {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => {
             const { name, buildURL, Svg, ariaLabel } = DOWNLOAD_HEADER_BUTTONS[key];
+
             return (
               <NextLink key={key} href={buildURL} passHref>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16}>
+                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
-                      <Svg aria-label={ariaLabel} maxH='44px' />
+                      <Svg
+                        aria-label={ariaLabel}
+                        maxH='44px'
+                        _groupHover={{ color: 'yellow.50' }}
+                      />
                     </Stack>
                     <Box>
                       <Text textStyle='downloads-button-label'>For {name}</Text>
diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx
index d3df7fa563..ae9963eecb 100644
--- a/src/components/UI/homepage/HomeHero.tsx
+++ b/src/components/UI/homepage/HomeHero.tsx
@@ -37,7 +37,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}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Download</Text>
             </Button>
           </NextLink>
@@ -49,7 +49,7 @@ export const HomeHero: FC = () => {
 
         <Flex direction='column' alignItems='center'>
           <NextLink href={DOCS_PAGE} passHref>
-            <Button variant='primary' as='a' mb={1}>
+            <Button variant='primary' as='a' mb={1} data-group>
               <Text textStyle='homepage-primary-label'>Documentation</Text>
             </Button>
           </NextLink>
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index ade07a1901..64d1949408 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -77,7 +77,8 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontWeight: 700,
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -124,13 +125,15 @@ export const textStyles = {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
-    textTransform: 'uppercase'
+    textTransform: 'uppercase',
+    _groupHover: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',
@@ -190,7 +193,7 @@ export const textStyles = {
     fontWeight: 400,
     fontSize: '13px',
     lineHeight: 5,
-    letterSpacing: '1%',
+    letterSpacing: '1%'
   },
   'note-text': {
     fontFamily: 'body',