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