From 65037b5031770c6e4b0755bc576bfa255482b62a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Thu, 6 Apr 2023 01:03:42 +0530
Subject: [PATCH] style: disabled state for buttons (#724)

---
 apps/app/components/ui/buttons/danger-button.tsx  | 12 ++++++------
 apps/app/components/ui/buttons/primary-button.tsx | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/apps/app/components/ui/buttons/danger-button.tsx b/apps/app/components/ui/buttons/danger-button.tsx
index 1967d3b11..3adb7012b 100644
--- a/apps/app/components/ui/buttons/danger-button.tsx
+++ b/apps/app/components/ui/buttons/danger-button.tsx
@@ -13,7 +13,7 @@ export const DangerButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border font-medium duration-300 ${
+    className={`${className} border border-red-500 font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
@@ -21,13 +21,13 @@ export const DangerButton: React.FC<ButtonProps> = ({
         : "rounded-lg px-4 py-2 text-base"
     } ${
       disabled
-        ? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black"
-        : "border-red-500"
+        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
+        : ""
     } ${
       outline
-        ? "bg-transparent hover:bg-red-500 hover:text-white"
-        : "bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
-    } ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
+        ? "bg-transparent text-red-500 hover:bg-red-500 hover:text-white"
+        : "text-white bg-red-500 hover:border-opacity-90 hover:bg-opacity-90"
+    } ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
   >
diff --git a/apps/app/components/ui/buttons/primary-button.tsx b/apps/app/components/ui/buttons/primary-button.tsx
index 805afc22d..3b3c70bfe 100644
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/apps/app/components/ui/buttons/primary-button.tsx
@@ -13,7 +13,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
 }) => (
   <button
     type={type}
-    className={`${className} border font-medium duration-300 ${
+    className={`${className} border border-theme font-medium duration-300 ${
       size === "sm"
         ? "rounded px-3 py-2 text-xs"
         : size === "md"
@@ -21,13 +21,13 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
         : "rounded-lg px-4 py-2 text-base"
     } ${
       disabled
-        ? "cursor-not-allowed border-gray-300 bg-gray-300 text-black hover:border-gray-300 hover:border-opacity-100 hover:bg-gray-300 hover:bg-opacity-100 hover:text-black"
-        : "border-theme"
+        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
+        : ""
     } ${
       outline
-        ? "bg-transparent hover:bg-theme hover:text-white"
-        : "bg-theme hover:border-opacity-90 hover:bg-opacity-90"
-    } ${!disabled && !outline ? "text-white" : ""} ${loading ? "cursor-wait" : ""}`}
+        ? "bg-transparent text-theme hover:bg-theme hover:text-white"
+        : "text-white bg-theme hover:border-opacity-90 hover:bg-opacity-90"
+    }  ${loading ? "cursor-wait" : ""}`}
     onClick={onClick}
     disabled={disabled || loading}
   >