feat(web): disable style for secondarybutton

kleros · Jan 25, 2024 · bd524db · bd524db
1 parent d4d2d2c
commit bd524db
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/examples/buttons.tsx b/src/examples/buttons.tsx
@@ -8,6 +8,7 @@ const Buttons = () => (
     <Button small text="Get help" Icon={Telegram} />
     <Button disabled isLoading text="Hello" />
     <Button variant="secondary" text="Hello" />
+    <Button variant="secondary" isLoading disabled text="Hello" />
     <Button variant="tertiary" small text="Hello" />
   </>
 );

diff --git a/src/lib/button/secondary.tsx b/src/lib/button/secondary.tsx
@@ -2,24 +2,41 @@ import styled from "styled-components";
 import BaseButton from "./base";
 
 const SecondaryButton = styled(BaseButton)`
-  background: ${(props) => props.theme.klerosUIComponentsWhiteBackground};
+  background: ${(props) =>
+    props.disabled
+      ? props.theme.klerosUIComponentsLightGrey
+      : props.theme.klerosUIComponentsWhiteBackground};
   border: ${(props) =>
-    "1px solid " + props.theme.klerosUIComponentsPrimaryBlue};
+    props.disabled
+      ? `1px solid ${props.theme.klerosUIComponentsStroke}`
+      : `1px solid ${props.theme.klerosUIComponentsPrimaryBlue}`};
 
   .button-text {
-    color: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    color: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   .button-svg {
-    fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    fill: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   .button-loading {
-    fill: ${(props) => props.theme.klerosUIComponentsPrimaryBlue};
+    fill: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsStroke
+        : props.theme.klerosUIComponentsPrimaryBlue};
   }
 
   :hover {
-    background: ${(props) => props.theme.klerosUIComponentsMediumBlue};
+    background: ${(props) =>
+      props.disabled
+        ? props.theme.klerosUIComponentsLightGrey
+        : props.theme.klerosUIComponentsMediumBlue};
   }
 `;