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:
@ -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 = {
|
||||||
|
|||||||
@ -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({
|
||||||
|
|||||||
@ -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;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -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() {
|
||||||
|
|||||||
Reference in New Issue
Block a user