refactor: Update button styles to include active state

softstack · May 15, 2024 · eefb3b6 · eefb3b6
1 parent 8d4bc7b
commit eefb3b6
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -310,7 +310,7 @@ function App() {
                         <div>
                             <PrimaryButton
                                 title="Disconnect"
-                                className="bg-red-200 border border-red-300"
+                                className="bg-red-200 border border-red-300 active:bg-red-300"
                                 textColor="customBlackText"
                                 callback={handleDisconnect}
                             />

diff --git a/src/components/buttons/ConnectButton.tsx b/src/components/buttons/ConnectButton.tsx
@@ -9,7 +9,7 @@ type Props = {
 const ConnectButton: React.FC<Props> = ({ title, icon, callback }) => {
     return (
         <div
-            className="flex items-center justify-center bg-customBlueButton text-white py-3 px-5 rounded-xl border-none text-base font-semibold whitespace-nowrap"
+            className="flex items-center justify-center bg-customBlueButton active:bg-blue-400 text-white py-3 px-5 rounded-xl border-none text-base font-semibold whitespace-nowrap"
             onClick={callback}
         >
             <div className="flex flex-shrink-0 items-center justify-center h-7 w-11 mr-3">

diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx
@@ -15,7 +15,7 @@ const PrimaryButton: React.FC<Props> = ({
 }) => {
     return (
         <div
-            className={`flex items-center justify-center bg-customBlueButton h-12 text-${textColor} py-3 px-5 rounded-lg border-customBlueButton border-1 text-base font-semibold text-center ${className}`}
+            className={`flex items-center justify-center bg-customBlueButton h-12 text-${textColor} py-3 px-5 rounded-lg border-customBlueButton border-1 text-base font-semibold text-center ${className} active:bg-blue-400`}
             onClick={callback}
         >
             <span>{title}</span>