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 <[email protected]>

Author: Kanav-Arora

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};

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;

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)}`,
 };