Adds danger variant to button (#479)

* add danger variant * fmt
NEARBuilders · Jul 17, 2024 · da3ed01 · da3ed01
1 parent 8b6e4c7
commit da3ed01
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git 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
@@ -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)";
       }