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

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>
+    </>
   );
 };

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