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

* 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

View File

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

View File

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

View File

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

View File

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