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 3c652c86e..3b6c829cd 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,27 +8,40 @@ 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; + + &:hover { + background: ${({ theme, onClick }) => + onClick ? theme.background.transparent.light : 'none'}; + } +`; + +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)}; `; -const StyledLightIconButton = styled(LightIconButton)` - display: inline-flex; - margin-left: auto; - margin-right: 0; -`; - type DropdownMenuHeaderProps = ComponentProps<'li'> & { StartIcon?: IconComponent; EndIcon?: IconComponent; @@ -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 2424d08e0..66b6ab1b0 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; } } `;