From ffcdace1137934dd44ba876efde205a20228483b Mon Sep 17 00:00:00 2001
From: Kanav Arora <kanavarora1515@gmail.com>
Date: Tue, 19 Dec 2023 20:11:58 +0530
Subject: [PATCH] 2980-Fix: CommandGroup background (#2985)

* 2980-fix: CommandGroup background

* Box Shadow fix

* suggested color fixes

* Fix related to design dicussion: add border + make everything background secondary

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
---
 .../modules/command-menu/components/CommandMenu.tsx |  9 +++++----
 .../menu-item/components/MenuItemCommand.tsx        |  4 +++-
 .../src/modules/ui/theme/constants/boxShadow.ts     | 13 +++++++++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
index 5805ce1a9..be10a6079 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenu.tsx
@@ -27,9 +27,10 @@ import { CommandGroup } from './CommandGroup';
 import { CommandMenuItem } from './CommandMenuItem';
 
 export const StyledDialog = styled.div`
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
-  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+  box-shadow: ${({ theme }) => theme.boxShadow.superHeavy};
   font-family: ${({ theme }) => theme.font.family};
   left: 50%;
   max-width: 640px;
@@ -44,9 +45,9 @@ export const StyledDialog = styled.div`
 `;
 
 export const StyledInput = styled.input`
-  background: ${({ theme }) => theme.background.primary};
+  background: ${({ theme }) => theme.background.secondary};
   border: none;
-  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: 0;
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
index a9506ae14..8b93424c6 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx
@@ -31,7 +31,9 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
   --vertical-padding: ${({ theme }) => theme.spacing(2)};
   align-items: center;
   background: ${({ isSelected, theme }) =>
-    isSelected ? theme.background.transparent.light : theme.background.primary};
+    isSelected
+      ? theme.background.transparent.light
+      : theme.background.secondary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   color: ${({ theme }) => theme.font.color.secondary};
   cursor: pointer;
diff --git a/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts b/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts
index f31f2608e..267453ad1 100644
--- a/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts
+++ b/packages/twenty-front/src/modules/ui/theme/constants/boxShadow.ts
@@ -1,7 +1,6 @@
 import { grayScale, rgba } from './colors';
 
 export const boxShadowLight = {
-  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,
@@ -11,10 +10,16 @@ export const boxShadowLight = {
     0.12,
   )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
   underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
+  superHeavy: `0px 0px 8px 0px ${rgba(
+    grayScale.gray100,
+    0.16,
+  )}, 0px 8px 64px -16px ${rgba(
+    grayScale.gray100,
+    0.48,
+  )}, 0px 24px 56px -16px ${rgba(grayScale.gray100, 0.08)}`,
 };
 
 export const boxShadowDark = {
-  extraLight: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.04)}`,
   light: `0px 2px 4px 0px ${rgba(
     grayScale.gray100,
     0.04,
@@ -24,4 +29,8 @@ export const boxShadowDark = {
     0.16,
   )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.08)}`,
   underline: `0px 1px 0px 0px ${rgba(grayScale.gray100, 0.32)}`,
+  superHeavy: `2px 4px 16px 0px ${rgba(
+    grayScale.gray100,
+    0.12,
+  )}, 0px 2px 4px 0px ${rgba(grayScale.gray100, 0.04)}`,
 };