diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx index 3c652c86e902..3b6c829cdfeb 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx @@ -1,4 +1,5 @@ import { ComponentProps, MouseEvent } from 'react'; +import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { IconComponent } from '@/ui/display/icon/types/IconComponent'; @@ -7,25 +8,38 @@ import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; const StyledHeader = styled.li` align-items: center; color: ${({ theme }) => theme.font.color.primary}; - cursor: pointer; + cursor: ${({ onClick }) => (onClick ? 'pointer' : 'default')}; display: flex; font-size: ${({ theme }) => theme.font.size.sm}; font-weight: ${({ theme }) => theme.font.weight.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; + border-top-left-radius: ${({ theme }) => theme.border.radius.sm}; + border-top-right-radius: ${({ theme }) => theme.border.radius.sm}; padding: ${({ theme }) => theme.spacing(1)}; user-select: none; -`; -const StyledChildrenWrapper = styled.span` - padding: 0 ${({ theme }) => theme.spacing(1)}; + &:hover { + background: ${({ theme, onClick }) => + onClick ? theme.background.transparent.light : 'none'}; + } `; -const StyledLightIconButton = styled(LightIconButton)` +const StyledEndIcon = styled.div` display: inline-flex; + color: ${({ theme }) => theme.font.color.tertiary}; + padding: ${({ theme }) => theme.spacing(1)}; margin-left: auto; margin-right: 0; + + & > svg { + height: ${({ theme }) => theme.icon.size.md}px; + width: ${({ theme }) => theme.icon.size.md}px; + } +`; + +const StyledChildrenWrapper = styled.span` + padding: 0 ${({ theme }) => theme.spacing(1)}; `; type DropdownMenuHeaderProps = ComponentProps<'li'> & { @@ -42,27 +56,29 @@ export const DropdownMenuHeader = ({ onClick, testId, }: DropdownMenuHeaderProps) => { + const theme = useTheme(); return ( - - {StartIcon && ( - - )} - {children} + <> {EndIcon && ( - + + {children} + + + + + )} + {StartIcon && ( + + + {children} + )} - + ); }; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 2424d08e0855..66b6ab1b0dd2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -117,6 +117,7 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ & .hoverable-buttons { opacity: 1; pointer-events: auto; + position: static; } } `;