From bd4a51c830c7de8aafd29220a5fa358f4a908d2e Mon Sep 17 00:00:00 2001
From: Zachery Ng <zachery.ng@gmail.com>
Date: Wed, 28 Feb 2024 15:45:57 +0800
Subject: [PATCH] style: update tertiary button

---
 .../src/components/projects/create/ConnectAccount.tsx |  4 ++--
 .../src/components/shared/Button/Button.theme.ts      | 11 ++++-------
 packages/frontend/tailwind.config.js                  |  2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/projects/create/ConnectAccount.tsx b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
index 6b38deb4..1fc099a2 100644
--- a/packages/frontend/src/components/projects/create/ConnectAccount.tsx
+++ b/packages/frontend/src/components/projects/create/ConnectAccount.tsx
@@ -75,7 +75,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
             height={1000}
           >
             <Button
-              className="w-full sm:w-auto shadow-button"
+              className="w-full sm:w-auto"
               leftIcon={<GithubIcon />}
               variant="tertiary"
             >
@@ -83,7 +83,7 @@ const ConnectAccount: React.FC<ConnectAccountInterface> = ({
             </Button>
           </OauthPopup>
           <Button
-            className="w-full sm:w-auto shadow-button"
+            className="w-full sm:w-auto"
             leftIcon={<GitTeaIcon />}
             variant="tertiary"
           >
diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts
index a2cc19ca..5d5ba72e 100644
--- a/packages/frontend/src/components/shared/Button/Button.theme.ts
+++ b/packages/frontend/src/components/shared/Button/Button.theme.ts
@@ -14,6 +14,8 @@ export const buttonTheme = tv(
       'whitespace-nowrap',
       'focus-ring',
       'disabled:cursor-not-allowed',
+      'transition-colors',
+      'duration-150',
     ],
     variants: {
       size: {
@@ -61,14 +63,13 @@ export const buttonTheme = tv(
         tertiary: [
           'text-elements-on-tertiary',
           'border',
-          'border-border-interactive/10',
+          'border-border-interactive',
           'bg-controls-tertiary',
+          'shadow-button',
           'hover:bg-controls-tertiary-hovered',
           'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
           'focus-visible:bg-controls-tertiary-hovered',
           'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
           'disabled:text-elements-on-disabled',
           'disabled:bg-controls-disabled',
           'disabled:border-transparent',
@@ -81,10 +82,8 @@ export const buttonTheme = tv(
           'bg-transparent',
           'hover:bg-controls-tertiary-hovered',
           'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
           'focus-visible:bg-controls-tertiary-hovered',
           'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
           'disabled:text-elements-on-disabled',
           'disabled:bg-controls-disabled',
           'disabled:border-transparent',
@@ -109,10 +108,8 @@ export const buttonTheme = tv(
           'bg-transparent',
           'hover:bg-controls-tertiary-hovered',
           'hover:border-border-interactive-hovered',
-          'hover:border-border-interactive-hovered/[0.14]',
           'focus-visible:bg-controls-tertiary-hovered',
           'focus-visible:border-border-interactive-hovered',
-          'focus-visible:border-border-interactive-hovered/[0.14]',
           'disabled:text-elements-on-disabled',
           'disabled:bg-controls-disabled',
           'disabled:border-transparent',
diff --git a/packages/frontend/tailwind.config.js b/packages/frontend/tailwind.config.js
index 3b39ddf5..eb0bb315 100644
--- a/packages/frontend/tailwind.config.js
+++ b/packages/frontend/tailwind.config.js
@@ -152,7 +152,7 @@ export default withMT({
       },
       boxShadow: {
         button:
-          'inset 0px 0px 4px rgba(255, 255, 255, 0.25), inset 0px -2px 0px rgba(0, 0, 0, 0.04)',
+          '0px -2px 0px 0px rgba(0, 0, 0, 0.04) inset, 0px 0px 4px 0px rgba(255, 255, 255, 0.25) inset',
         dropdown:
           '0px 3px 20px rgba(8, 47, 86, 0.1), 0px 0px 4px rgba(8, 47, 86, 0.14)',
         field: '0px 1px 2px rgba(0, 0, 0, 0.04)',