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

Fix header dropdown button style (#9599)

Browse Source
This commit is contained in:
Marie
2025-01-14 12:13:26 +01:00
committed by GitHub
parent 6fc691beb0
commit 35d165dbe9
6 changed files with 44 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -30,26 +30,6 @@ const StyledDropdownFallbackAnchor = styled.div`
top: 0;
`;
type StyledHeaderDivProps = {
isUnfolded?: boolean;
isActive?: boolean;
};
const StyledHeaderDiv = styled.div<StyledHeaderDivProps>`
& button,
& > * {
background: ${({ theme, isUnfolded }) =>
isUnfolded ? theme.background.transparent.light : 'none'};
&:hover {
background: ${({ theme, isUnfolded }) =>
isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
}
}
`;
type DropdownProps = {
className?: string;
clickableComponent?: ReactNode;
@ -151,17 +131,16 @@ export const Dropdown = ({
<DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
<>
{isDefined(clickableComponent) ? (
<StyledHeaderDiv
<div
ref={refs.setReference}
onClick={handleClickableComponentClick}
aria-controls={`${dropdownId}-options`}
aria-expanded={isDropdownOpen}
aria-haspopup={true}
role="button"
isUnfolded={isDropdownOpen}
>
{clickableComponent}
</StyledHeaderDiv>
</div>
) : (
<StyledDropdownFallbackAnchor ref={refs.setReference} />
)}

10
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledHeaderDropdownButton.tsx
View File

@ -20,4 +20,14 @@ export const StyledHeaderDropdownButton = styled.button<StyledDropdownButtonProp
padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none;
background: ${({ theme, isUnfolded }) =>
isUnfolded ? theme.background.transparent.light : theme.background.primary};
&:hover {
background: ${({ theme, isUnfolded }) =>
isUnfolded
? theme.background.transparent.medium
: theme.background.transparent.light};
}
`;