diff --git a/frontend/src/components/Nav/Menu/MenuTab.tsx b/frontend/src/components/Nav/Menu/MenuTab.tsx index 6ee78ae18..803f98a8d 100644 --- a/frontend/src/components/Nav/Menu/MenuTab.tsx +++ b/frontend/src/components/Nav/Menu/MenuTab.tsx @@ -20,7 +20,7 @@ const MenuTab: FC = ({ isOpen, setColorKey, }) => ( - + diff --git a/frontend/src/components/Nav/Menu/styled.ts b/frontend/src/components/Nav/Menu/styled.ts index e7666089e..e8fc1f528 100644 --- a/frontend/src/components/Nav/Menu/styled.ts +++ b/frontend/src/components/Nav/Menu/styled.ts @@ -48,7 +48,7 @@ export const MenuItem = styled('li').attrs({ role: 'menuitem' })<{ export const ContentWrapper = styled.div` display: flex; - align-items: baseline; + align-items: center; column-gap: 4px; `; diff --git a/frontend/src/components/Nav/Nav.styled.ts b/frontend/src/components/Nav/Nav.styled.ts index 7d25483e7..b8bf0fa9d 100644 --- a/frontend/src/components/Nav/Nav.styled.ts +++ b/frontend/src/components/Nav/Nav.styled.ts @@ -16,7 +16,7 @@ export const ClusterList = styled.ul.attrs<{ $colorKey: ClusterColorKey }>({ })` border-radius: 8px; padding: 4px 4px 4px 4px; - margin-bottom: 8px; + margin-bottom: 4px; background-color: ${({ theme, $colorKey }) => theme.clusterMenu.backgroundColor[$colorKey]}; `; diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts index d0f6c4067..412317b80 100644 --- a/frontend/src/theme/theme.ts +++ b/frontend/src/theme/theme.ts @@ -565,14 +565,14 @@ export const theme = { menu: { primary: { backgroundColor: { - normal: Colors.brand[0], + normal: 'transparent', hover: hexToRgba(Colors.brand[95], 0.03), active: hexToRgba(Colors.brand[95], 0.05), }, color: { - normal: Colors.brand[80], - hover: Colors.brand[90], - active: Colors.brand[70], + normal: Colors.neutral[80], + hover: Colors.neutral[90], + active: Colors.neutral[95], }, statusIconColor: { online: Colors.green[40],