admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Command menu list design updates (#10075)

Browse Source 
- 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
This commit is contained in:
Raphaël Bosi
2025-02-07 16:55:24 +01:00
committed by GitHub
parent a24e411384
commit 988ab9697c
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/twenty-front/src/modules/command-menu/components/CommandGroup.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import React from 'react'; import React from 'react';
const StyledGroup = styled.div` const StyledGroupHeading = styled.div`
align-items: center; align-items: center;
color: ${({ theme }) => theme.font.color.light}; color: ${({ theme }) => theme.font.color.light};
font-size: ${({ theme }) => theme.font.size.xs}; font-size: ${({ theme }) => theme.font.size.xs};
@ -13,6 +13,12 @@ const StyledGroup = styled.div`
user-select: none; user-select: none;
`; `;
const StyledGroup = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(0.5)};
`;
type CommandGroupProps = { type CommandGroupProps = {
heading: string; heading: string;
children: React.ReactNode | React.ReactNode[]; children: React.ReactNode | React.ReactNode[];
@ -23,9 +29,9 @@ export const CommandGroup = ({ heading, children }: CommandGroupProps) => {
return null; return null;
} }
return ( return (
<div> <>
<StyledGroup>{heading}</StyledGroup> <StyledGroupHeading>{heading}</StyledGroupHeading>
{children} <StyledGroup>{children}</StyledGroup>
</div> </>
); );
}; };

4
packages/twenty-ui/src/navigation/menu-item/components/MenuItemCommand.tsx
View File

@ -48,10 +48,10 @@ const StyledMenuItemCommandContainer = styled.div<{ isSelected?: boolean }>`
user-select: none; user-select: none;
width: calc(100% - 2 * var(--horizontal-padding)); width: calc(100% - 2 * var(--horizontal-padding));
&:hover { &:hover {
background: ${({ theme }) => theme.background.transparent.light}; background: ${({ theme }) => theme.background.transparent.lighter};
} }
&[data-selected='true'] { &[data-selected='true'] {
background: ${({ theme }) => theme.background.tertiary}; background: ${({ theme }) => theme.background.transparent.light};
} }
&[data-disabled='true'] { &[data-disabled='true'] {
color: ${({ theme }) => theme.font.color.light}; color: ${({ theme }) => theme.font.color.light};