From 988ab9697c4a2c6fab10825dc9390326b34caab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Bosi?=
 <71827178+bosiraphael@users.noreply.github.com>
Date: Fri, 7 Feb 2025 16:55:24 +0100
Subject: [PATCH] Command menu list design updates (#10075)

- Add 2px gap between items
- Update `MenuItemCommand` style to distinguish `hovered` and `selected`
states



https://github.com/user-attachments/assets/d1e29f07-32e7-4ace-9aa1-0ea83712f052
---
 .../command-menu/components/CommandGroup.tsx     | 16 +++++++++++-----
 .../menu-item/components/MenuItemCommand.tsx     |  4 ++--
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
index dfcecaa72..320ebee6a 100644
--- a/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
+++ b/packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import React from 'react';
 
-const StyledGroup = styled.div`
+const StyledGroupHeading = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
@@ -13,6 +13,12 @@ const StyledGroup = styled.div`
   user-select: none;
 `;
 
+const StyledGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(0.5)};
+`;
+
 type CommandGroupProps = {
   heading: string;
   children: React.ReactNode | React.ReactNode[];
@@ -23,9 +29,9 @@ export const CommandGroup = ({ heading, children }: CommandGroupProps) => {
     return null;
   }
   return (
-    <div>
-      <StyledGroup>{heading}</StyledGroup>
-      {children}
-    </div>
+    <>
+      <StyledGroupHeading>{heading}</StyledGroupHeading>
+      <StyledGroup>{children}</StyledGroup>
+    </>
   );
 };
diff --git a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
index 2aed3ce35..769c2f09a 100644
--- a/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
+++ b/packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
@@ -48,10 +48,10 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
   user-select: none;
   width: calc(100% - 2 * var(--horizontal-padding));
   &:hover {
-    background: ${({ theme }) => theme.background.transparent.light};
+    background: ${({ theme }) => theme.background.transparent.lighter};
   }
   &[data-selected='true'] {
-    background: ${({ theme }) => theme.background.tertiary};
+    background: ${({ theme }) => theme.background.transparent.light};
   }
   &[data-disabled='true'] {
     color: ${({ theme }) => theme.font.color.light};