From aa7131771f0b748517abbdc216a1b7a80639dd60 Mon Sep 17 00:00:00 2001
From: SuperSuperDev <steven@supersuperstore.com>
Date: Mon, 30 Aug 2021 18:02:03 +0700
Subject: [PATCH] feat: change focus styling for links and buttons

---
 src/components/buttons/Button.tsx   | 3 ++-
 src/components/links/ButtonLink.tsx | 3 ++-
 src/components/links/CustomLink.tsx | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/buttons/Button.tsx b/src/components/buttons/Button.tsx
index ccff3bf..75dfc53 100644
--- 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
index 62d9976..11d037f 100644
--- 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
index 54c7a50..cb9769c 100644
--- 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
       )}
     >