feat: change focus styling for links and buttons

SuperSuperDev · Aug 30, 2021 · aa71317 · aa71317
1 parent 0b85e0d
commit aa71317
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
@@ -18,9 +18,10 @@ export default function Button({
       className={clsx(
         'py-2 px-4 rounded font-bold hover:text-primary-400 animated-underline',
         'border border-gray-600',
+        'focus:outline-none focus-visible:text-primary-400',
         {
           'bg-dark text-white': variants === 'primary',
-          'bg-white text-dark hover:bg-gray-200 hover:text-dark transition-colors':
+          'bg-white text-dark hover:bg-gray-200 hover:text-dark focus-visible:text-dark':
             variants === 'secondary',
         },
         className

diff --git a/src/components/links/ButtonLink.tsx b/src/components/links/ButtonLink.tsx
@@ -17,9 +17,10 @@ export default function ButtonLink({
       className={clsx(
         'py-2 px-4 inline-block rounded font-bold hover:text-primary-400 animated-underline',
         'border border-gray-600',
+        'focus:outline-none focus-visible:text-primary-400',
         {
           'bg-dark text-white': variants === 'primary',
-          'bg-white text-dark hover:bg-gray-200 hover:text-dark transition-colors':
+          'bg-white text-dark hover:bg-gray-200 hover:text-dark focus-visible:text-dark':
             variants === 'secondary',
         },
         className

diff --git a/src/components/links/CustomLink.tsx b/src/components/links/CustomLink.tsx
@@ -11,6 +11,7 @@ export default function CustomLink({
       {...rest}
       className={clsx(
         'inline-flex items-center font-bold hover:text-primary-400 animated-underline',
+        'focus:outline-none focus-visible:text-primary-400 ',
         className
       )}
     >