fix(button): add border variant theme color

Bandmators · Mar 7, 2024 · 8f85a67 · 8f85a67
1 parent 6499f92
commit 8f85a67
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/components/common/Button/index.tsx b/src/components/common/Button/index.tsx
@@ -11,6 +11,7 @@ const ButtonVariantStyles = ({ theme, variant }: { theme: Theme; variant: Button
   switch (variant) {
     case 'secondary':
       return css`
+        border: 1px solid ${theme.colors.secondary};
         background-color: ${theme.colors.secondary};
         &:hover {
           opacity: 0.8;
@@ -19,6 +20,7 @@ const ButtonVariantStyles = ({ theme, variant }: { theme: Theme; variant: Button
     case 'danger':
       return css`
         color: ${theme.colors.white};
+        border: 1px solid ${theme.colors.danger};
         background-color: ${theme.colors.danger};
         &:hover {
           opacity: 0.8;
@@ -27,15 +29,16 @@ const ButtonVariantStyles = ({ theme, variant }: { theme: Theme; variant: Button
     case 'warning':
       return css`
         color: ${theme.colors.white};
+        border: 1px solid ${theme.colors.warning};
         background-color: ${theme.colors.warning};
         &:hover {
           opacity: 0.8;
         }
       `;
     case 'outline':
       return css`
-        background-color: transparent;
         border: 1px solid ${theme.colors.gray['300']};
+        background-color: transparent;
         &:hover {
           background-color: ${theme.colors.gray['100']};
         }
@@ -47,6 +50,7 @@ const ButtonVariantStyles = ({ theme, variant }: { theme: Theme; variant: Button
     case 'primary':
       return css`
         color: white;
+        border: 1px solid ${theme.colors.primary};
         background-color: ${theme.colors.primary};
         &:hover {
           opacity: 0.8;