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 ( -
- {heading} - {children} -
+ <> + {heading} + {children} + ); }; 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};