From a688f81afe85e12d12e49114092e3911b3de650b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= <nh.quiroz@gmail.com>
Date: Thu, 15 Dec 2022 19:37:21 -0300
Subject: [PATCH] fix: buttons :active/:focus styles (#173)

* chore: update Button component styles

* chore: update textStyles

* chore: remove redundant styles
---
 src/components/UI/downloads/DownloadsHero.tsx |  4 +++-
 src/theme/components/Button.ts                | 15 +--------------
 src/theme/foundations/textStyles.ts           | 12 +++++++++---
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx
index 8a5caa07ef..7160e99297 100644
--- a/src/components/UI/downloads/DownloadsHero.tsx
+++ b/src/components/UI/downloads/DownloadsHero.tsx
@@ -83,13 +83,15 @@ export const DownloadsHero: FC<DownloadsHero> = ({
 
             return (
               <NextLink key={key} href={buildURL} passHref legacyBehavior>
-                <Button as='a' variant='downloadsHeader' width={{ base: '100%' }} h={16} data-group>
+                <Button as='a' variant='primary' width={{ base: '100%' }} h={16} data-group>
                   <HStack spacing={4}>
                     <Stack alignItems='center'>
                       <Svg
                         aria-label={ariaLabel}
                         maxH='44px'
                         _groupHover={{ color: 'yellow.50' }}
+                        _groupFocus={{ color: 'yellow.50' }}
+                        _groupActive={{ color: 'yellow.50' }}
                       />
                     </Stack>
                     <Box>
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts
index 1efd558779..d0bf5ebc62 100644
--- a/src/theme/components/Button.ts
+++ b/src/theme/components/Button.ts
@@ -13,23 +13,10 @@ export const Button = {
       },
       _active: {
         bg: 'secondary',
-        borderTop: '4px',
+        borderTop: '4px solid',
         borderColor: 'primary',
         pt: '4px'
       }
-    },
-    downloadsHeader: {
-      py: '8px',
-      px: '32px',
-      borderRadius: 0,
-      width: { base: '188px', md: 'auto' },
-      bg: 'primary',
-      _hover: { bg: 'secondary' },
-      _focus: {
-        bg: 'primary',
-        boxShadow: 'inset 0 0 0 2px var(--chakra-colors-green-200) !important'
-      },
-      _active: { borderTop: '4px solid', borderColor: 'green.200' }
     }
   }
 };
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index e2e3b4e7f6..407cd245a9 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -63,7 +63,9 @@ export const textStyles = {
     color: 'bg',
     fontWeight: 700,
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'home-section-link-label': {
     fontFamily: 'heading',
@@ -111,14 +113,18 @@ export const textStyles = {
     color: 'bg',
     fontSize: { base: 'md', lg: 'xl' },
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'downloads-button-sublabel': {
     fontFamily: 'heading',
     color: 'bg',
     fontSize: { base: 'xs', lg: 'sm' },
     textTransform: 'uppercase',
-    _groupHover: { color: 'yellow.50' }
+    _groupHover: { color: 'yellow.50' },
+    _groupFocus: { color: 'yellow.50' },
+    _groupActive: { color: 'yellow.50' }
   },
   'download-tab-label': {
     fontFamily: 'heading',