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

Fix issue #1037: Task inbox small design improvements (#1238)

Browse Source 
* Fix issue #1037: Task inbox small design improvements

* Fix issue #1037: Task inbox small design improvements
This commit is contained in:
Kelvin Yelyen
2023-08-16 21:29:26 +00:00
committed by GitHub
parent 4f524bd2a7
commit c762d0ff7b
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
front/src/modules/ui/tab/components/Tab.tsx
View File

@ -21,12 +21,19 @@ const StyledTab = styled.div<{ active?: boolean }>`
display: flex; display: flex;
gap: ${({ theme }) => theme.spacing(1)}; gap: ${({ theme }) => theme.spacing(1)};
justify-content: center; justify-content: center;
padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)}; padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2)};
`;
&:hover, const StyledHover = styled.span`
&:active { display: flex;
border-color: ${({ theme }) => theme.border.color.inverted}; gap: ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.font.color.primary}; padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
} }
`; `;
@ -39,8 +46,10 @@ export function Tab({
}: OwnProps) { }: OwnProps) {
return ( return (
<StyledTab onClick={onClick} active={active} className={className}> <StyledTab onClick={onClick} active={active} className={className}>
{icon} <StyledHover>
{title} {icon}
{title}
</StyledHover>
</StyledTab> </StyledTab>
); );
} }