From 77a4aa2649b2e9c62577bcf4e244261f36d5a57f Mon Sep 17 00:00:00 2001
From: Muhammad Abdullah <118609756+abdullah5361k@users.noreply.github.com>
Date: Tue, 29 Oct 2024 15:42:04 +0500
Subject: [PATCH] added light background for better hover visibility on dark
 theme (#8043)

fixes: #7969

## What does this PR do?

Apply a lighter background color to enhance the hover effect in dark
mode.


![twenty-hover](https://github.com/user-attachments/assets/3d218060-2328-481e-9e66-250abd276dc0)
---
 .../components/StyledDropdownButtonContainer.tsx    | 13 ++++++++-----
 .../components/StyledHeaderDropdownButton.tsx       | 13 ++++++++-----
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
index 20c4f0f70..c65335131 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
@@ -7,13 +7,13 @@ type StyledDropdownButtonProps = {
 
 export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProps>`
   align-items: center;
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : 'none')};
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.color.blue : theme.font.color.secondary};
   cursor: pointer;
   display: flex;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
   padding: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -22,6 +22,9 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
   user-select: none;
 
   &:hover {
-    filter: brightness(0.95);
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
   }
 `;
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
index 023060aad..ba6658ff5 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
@@ -8,14 +8,14 @@ type StyledDropdownButtonProps = {
 export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProps>`
   font-family: inherit;
   align-items: center;
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme, isUnfolded }) =>
+    isUnfolded ? theme.background.transparent.light : theme.background.primary};
   border: none;
   border-radius: ${({ theme }) => theme.border.radius.sm};
-  color: ${({ isActive, theme, color }) =>
-    color ?? (isActive ? theme.color.blue : theme.font.color.secondary)};
+  color: ${({ isActive, theme }) =>
+    isActive ? theme.color.blue : theme.font.color.secondary};
   cursor: pointer;
   display: flex;
-  filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
 
   padding: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -24,6 +24,9 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
   user-select: none;
 
   &:hover {
-    filter: brightness(0.95);
+    background: ${({ theme, isUnfolded }) =>
+      isUnfolded
+        ? theme.background.transparent.medium
+        : theme.background.transparent.light};
   }
 `;