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

fix: Fixed the design of 'Tab List' (#1517)

Browse Source 
* fix: Fixed the design of 'Tab List'

* fix: Fixed design of 'Tab list'
This commit is contained in:
Zoltán Völcsey
2023-09-10 20:52:10 +02:00
committed by GitHub
parent c3f5566fde
commit 677e444d8e
4 changed files with 8 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx
View File

@ -27,14 +27,12 @@ const StyledShowPageRightContainer = styled.div`
`;
const StyledTabListContainer = styled.div`
align-items: end;
align-items: center;
border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
box-sizing: border-box;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
gap: ${({ theme }) => theme.spacing(2)};
height: 40px;
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
`;
type OwnProps = {

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

@ -42,9 +42,12 @@ const StyledHover = styled.span`
padding-right: ${({ theme }) => theme.spacing(2)};
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
background: ${({ theme }) => theme.background.tertiary};
border-radius: ${({ theme }) => theme.border.radius.sm};
}
&:active {
background: ${({ theme }) => theme.background.quaternary};
}
`;
export function Tab({

2
front/src/modules/ui/top-bar/TopBar.tsx
View File

@ -24,8 +24,6 @@ const StyledTopBar = styled.div<{ displayBottomBorder: boolean }>`
font-weight: ${({ theme }) => theme.font.weight.medium};
height: 39px;
justify-content: space-between;
padding-left: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(2)};
z-index: 5;
`;

2
front/src/pages/tasks/Tasks.tsx
View File

@ -27,7 +27,9 @@ const StyledTasksContainer = styled.div`
const StyledTabListContainer = styled.div`
align-items: end;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: 40px;
margin-left: ${({ theme }) => theme.spacing(2)};
`;
export function Tasks() {