diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index 815d38fee..6866db02b 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -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 = { diff --git a/front/src/modules/ui/tab/components/Tab.tsx b/front/src/modules/ui/tab/components/Tab.tsx index 97e42de88..0d2336315 100644 --- a/front/src/modules/ui/tab/components/Tab.tsx +++ b/front/src/modules/ui/tab/components/Tab.tsx @@ -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({ diff --git a/front/src/modules/ui/top-bar/TopBar.tsx b/front/src/modules/ui/top-bar/TopBar.tsx index 54d762e4a..09cd0ff4e 100644 --- a/front/src/modules/ui/top-bar/TopBar.tsx +++ b/front/src/modules/ui/top-bar/TopBar.tsx @@ -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; `; diff --git a/front/src/pages/tasks/Tasks.tsx b/front/src/pages/tasks/Tasks.tsx index 40dadfaea..7da9cfae3 100644 --- a/front/src/pages/tasks/Tasks.tsx +++ b/front/src/pages/tasks/Tasks.tsx @@ -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() {