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;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(4)};
padding: ${({ theme }) => theme.spacing(2) + ' ' + theme.spacing(2)};
`;
&:hover,
&:active {
border-color: ${({ theme }) => theme.border.color.inverted};
color: ${({ theme }) => theme.font.color.primary};
const StyledHover = styled.span`
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
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) {
return (
<StyledTab onClick={onClick} active={active} className={className}>
{icon}
{title}
<StyledHover>
{icon}
{title}
</StyledHover>
</StyledTab>
);
}