Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-12 04:18:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

opti: 1.adjust padding of page-tree item; 2. fetch new icon from figma;

Browse Source
This commit is contained in:
mitsuha
2022-08-02 17:10:13 +08:00
parent efa23c806a
commit 68eddb597c
17 changed files with 234 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
libs/components/ui/src/button/IconButton.tsx
View File

@@ -36,6 +36,7 @@ interface IconButtonProps {
style?: CSSProperties;
className?: string;
size?: SizeType;
hoverColor?: CSSProperties['backgroundColor'];
}
export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
@@ -57,47 +58,48 @@ export const IconButton: FC<PropsWithChildren<IconButtonProps>> = ({
);
};
const Container = styled('button')<{ size?: SizeType }>(
({ theme, size = SIZE_MIDDLE }) => {
const { iconSize, areaSize } = SIZE_CONFIG[size];
const Container = styled('button')<{
size?: SizeType;
hoverColor?: CSSProperties['backgroundColor'];
}>(({ theme, size = SIZE_MIDDLE, hoverColor }) => {
const { iconSize, areaSize } = SIZE_CONFIG[size];
return {
return {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: areaSize,
height: areaSize,
backgroundColor: 'transparent',
color: theme.affine.palette.icons,
padding: theme.affine.spacing.iconPadding,
borderRadius: '3px',
'& svg': {
width: iconSize,
height: iconSize,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: areaSize,
height: areaSize,
backgroundColor: theme.affine.palette.white,
color: theme.affine.palette.icons,
padding: theme.affine.spacing.iconPadding,
borderRadius: '5px',
},
'& svg': {
width: iconSize,
height: iconSize,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
},
'&:hover': {
backgroundColor: hoverColor || theme.affine.palette.hover,
},
'&:hover': {
backgroundColor: theme.affine.palette.hover,
},
[`&${buttonStatus.hover}`]: {
backgroundColor: theme.affine.palette.hover,
},
[`&${buttonStatus.hover}`]: {
backgroundColor: theme.affine.palette.hover,
},
'&:focus': {
color: theme.affine.palette.primary,
},
[`&.${buttonStatus.focus}`]: {
color: theme.affine.palette.primary,
},
'&:focus': {
color: theme.affine.palette.primary,
},
[`&.${buttonStatus.focus}`]: {
color: theme.affine.palette.primary,
},
[`&${buttonStatus.disabled}`]: {
cursor: 'not-allowed',
},
};
}
);
[`&${buttonStatus.disabled}`]: {
cursor: 'not-allowed',
},
};
});