From da3ed01d4685275b9a692482c5e140e1d870a7d3 Mon Sep 17 00:00:00 2001
From: Elliot Braem <16282460+elliotBraem@users.noreply.github.com>
Date: Wed, 17 Jul 2024 17:28:34 -0400
Subject: [PATCH] Adds danger variant to button (#479)

* add danger variant

* fmt
---
 apps/new/widget/page/projects/Editor.jsx | 15 ++-------------
 apps/old/widget/components/Button.jsx    |  8 +++++++-
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/apps/new/widget/page/projects/Editor.jsx b/apps/new/widget/page/projects/Editor.jsx
index 7958af39..1f0fb46a 100644
--- a/apps/new/widget/page/projects/Editor.jsx
+++ b/apps/new/widget/page/projects/Editor.jsx
@@ -425,15 +425,6 @@ const Container = styled.div`
     }
   }
 
-  .destructive {
-    background-color: #fd2a5c;
-    color: white;
-    border-color: #fd2a5c;
-
-    &:hover {
-      background-color: #fd2a5c !important;
-    }
-  }
   .err,
   .err-p_id {
     color: #ff8888;
@@ -585,8 +576,7 @@ const DeleteConfirmationModal = () => {
               Cancel
             </Button>
             <Button
-              variant="outline"
-              className="destructive"
+              variant="danger"
               onClick={() => {
                 setShowDeleteModal(true);
                 onDeleteProject();
@@ -794,8 +784,7 @@ const DeleteProjectBtn = () => {
   if (isEditScreen) {
     return (
       <Button
-        variant="outline"
-        className="destructive"
+        variant="danger"
         loading={showDeleteModal}
         onClick={() => setShowDeleteModal(true)}
       >
diff --git a/apps/old/widget/components/Button.jsx b/apps/old/widget/components/Button.jsx
index 4797419e..bde7d12c 100644
--- a/apps/old/widget/components/Button.jsx
+++ b/apps/old/widget/components/Button.jsx
@@ -36,6 +36,8 @@ const StyledButton = styled.button`
         return "var(--button-secondary-bg, #23242B)";
       case "transparent":
         return "transparent";
+      case "danger":
+        return "var(--button-danger-bg, #fd2a5c)";
       default:
         return "var(--button-default-bg, #23242B)";
     }
@@ -49,8 +51,10 @@ const StyledButton = styled.button`
         return "var(--button-outline-color, #fff)";
       case "secondary":
         return "var(--button-secondary-color, #CDD0D5)";
+      case "danger":
+        return "var(--button-danger-hover-bg, #fff)";
       default:
-        return "var(--button-default-color, #CDD0D5)";
+        return "var(--button-default-color, #white)";
     }
   }};
 
@@ -67,6 +71,8 @@ const StyledButton = styled.button`
           return "var(--button-primary-hover-bg, #e49b48)";
         case "outline":
           return "var(--button-outline-hover-bg, rgba(255, 255, 255, 0.20))";
+        case "danger":
+          return "var(--button-danger-hover-bg, #fd2a5c";
         default:
           return "var(--button-default-hover-bg, #17181c)";
       }