From dafe08ef784e8ee0869a6dcccba202b676b28660 Mon Sep 17 00:00:00 2001
From: Yaswanth <gosulayaswanth2@gmail.com>
Date: Thu, 21 Sep 2023 05:52:13 +0530
Subject: [PATCH] fix: dark mode for MainButton (#1681)

* fix: dark mode for MainButton

* Fix colors

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../ui/button/components/MainButton.tsx       | 25 ++++++++++++-------
 .../modules/ui/theme/constants/background.ts  |  5 ++++
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/front/src/modules/ui/button/components/MainButton.tsx b/front/src/modules/ui/button/components/MainButton.tsx
index 1861ca7ad..81740185b 100644
--- a/front/src/modules/ui/button/components/MainButton.tsx
+++ b/front/src/modules/ui/button/components/MainButton.tsx
@@ -22,11 +22,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
 
     switch (variant) {
       case 'primary':
-        return `radial-gradient(
-          50% 62.62% at 50% 0%,
-          ${theme.font.color.secondary} 0%,
-          ${theme.font.color.primary} 100%
-        )`;
+        return theme.background.radialGradient;
       case 'secondary':
         return theme.background.primary;
       default:
@@ -34,12 +30,19 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
     }
   }};
   border: 1px solid;
-  border-color: ${({ theme, disabled }) => {
+  border-color: ${({ theme, disabled, variant }) => {
     if (disabled) {
       return theme.background.transparent.lighter;
     }
 
-    return theme.border.color.light;
+    switch (variant) {
+      case 'primary':
+        return theme.background.transparent.light;
+      case 'secondary':
+        return theme.border.color.medium;
+      default:
+        return theme.background.primary;
+    }
   }};
   border-radius: ${({ theme }) => theme.border.radius.md};
   ${({ theme, disabled }) => {
@@ -56,7 +59,7 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
 
     switch (variant) {
       case 'primary':
-        return theme.font.color.inverted;
+        return theme.grayScale.gray0;
       case 'secondary':
         return theme.font.color.primary;
       default:
@@ -82,7 +85,11 @@ const StyledButton = styled.button<Pick<Props, 'fullWidth' | 'variant'>>`
           }
         `;
       default:
-        return '';
+        return `
+          &:hover {
+            background: ${theme.background.radialGradientHover}};
+          }
+        `;
     }
   }};
 `;
diff --git a/front/src/modules/ui/theme/constants/background.ts b/front/src/modules/ui/theme/constants/background.ts
index f6ee2cb30..5f54b5590 100644
--- a/front/src/modules/ui/theme/constants/background.ts
+++ b/front/src/modules/ui/theme/constants/background.ts
@@ -1,3 +1,4 @@
+/* eslint-disable twenty/no-hardcoded-colors */
 import DarkNoise from '../assets/dark-noise.jpg';
 import LightNoise from '../assets/light-noise.png';
 
@@ -20,6 +21,8 @@ export const backgroundLight = {
     danger: rgba(color.red, 0.08),
   },
   overlay: rgba(grayScale.gray80, 0.8),
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
 };
 
 export const backgroundDark = {
@@ -39,4 +42,6 @@ export const backgroundDark = {
     danger: rgba(color.red, 0.08),
   },
   overlay: rgba(grayScale.gray80, 0.8),
+  radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
+  radialGradientHover: `radial-gradient(76.32% 95.59% at 50% 0%, #505050 0%, ${grayScale.gray60} 100%)`,
 };