twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-08 09:47:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix:Menus go back button style fix (#1860)

Browse Source 
* fix:Menus go back button style fix

* adjust padding

* use light icon button
This commit is contained in:
Alfred Louis 2023-10-05 20:29:16 +07:00 committed by GitHub
parent 047bb8014b
commit 73fa968595
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
front/src/modules/ui/dropdown/components/DropdownMenuHeader.tsx
View File

@ -1,7 +1,7 @@
import { ComponentProps } from 'react'; import { ComponentProps, MouseEvent } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { LightIconButton } from '@/ui/button/components/LightIconButton';
import { IconComponent } from '@/ui/icon/types/IconComponent'; import { IconComponent } from '@/ui/icon/types/IconComponent';
const StyledHeader = styled.li` const StyledHeader = styled.li`
@ -11,31 +11,16 @@ const StyledHeader = styled.li`
font-size: ${({ theme }) => theme.font.size.sm}; font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
padding: ${({ theme }) => theme.spacing(2)}; padding: ${({ theme }) => theme.spacing(1)};
user-select: none; user-select: none;
${({ onClick, theme }) => {
if (onClick) {
return `
cursor: pointer;
&:hover {
background: ${theme.background.transparent.light};
}
`;
}
}}
`; `;
const StyledStartIconWrapper = styled.span` const StyledChildrenWrapper = styled.span`
color: ${({ theme }) => theme.font.color.tertiary}; padding: 0 ${({ theme }) => theme.spacing(1)};
display: inline-flex;
margin-right: ${({ theme }) => theme.spacing(2)};
`; `;
const StyledEndIconWrapper = styled(StyledStartIconWrapper)` const StyledLightIconButton = styled(LightIconButton)`
color: ${({ theme }) => theme.font.color.tertiary};
display: inline-flex; display: inline-flex;
margin-left: auto; margin-left: auto;
margin-right: 0; margin-right: 0;
@ -44,29 +29,35 @@ const StyledEndIconWrapper = styled(StyledStartIconWrapper)`
type DropdownMenuHeaderProps = ComponentProps<'li'> & { type DropdownMenuHeaderProps = ComponentProps<'li'> & {
StartIcon?: IconComponent; StartIcon?: IconComponent;
EndIcon?: IconComponent; EndIcon?: IconComponent;
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
}; };
export const DropdownMenuHeader = ({ export const DropdownMenuHeader = ({
children, children,
StartIcon, StartIcon,
EndIcon, EndIcon,
onClick,
...props ...props
}: DropdownMenuHeaderProps) => { }: DropdownMenuHeaderProps) => {
const theme = useTheme();
return ( return (
// eslint-disable-next-line twenty/no-spread-props // eslint-disable-next-line twenty/no-spread-props
<StyledHeader {...props}> <StyledHeader {...props}>
{StartIcon && ( {StartIcon && (
<StyledStartIconWrapper> <LightIconButton
<StartIcon size={theme.icon.size.md} /> Icon={StartIcon}
</StyledStartIconWrapper> onClick={onClick}
accent="tertiary"
size="small"
/>
)} )}
{children} <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
{EndIcon && ( {EndIcon && (
<StyledEndIconWrapper> <StyledLightIconButton
<EndIcon size={theme.icon.size.md} /> Icon={EndIcon}
</StyledEndIconWrapper> onClick={onClick}
accent="tertiary"
size="small"
/>
)} )}
</StyledHeader> </StyledHeader>
); );