Colored menu elements fix (#984)

Co-authored-by: Leshe4ka <kozyurov.alexey@google.com>
Co-authored-by: German Osin <german.osin@gmail.com>

Author: 3 people

frontend/src/components/Nav/Menu/MenuTab.tsx

@@ -20,7 +20,7 @@ const MenuTab: FC<MenuTabProps> = ({
   isOpen,
   setColorKey,
 }) => (
-  <S.MenuItem $variant="secondary" onClick={toggleClusterMenu}>
+  <S.MenuItem $variant="primary" onClick={toggleClusterMenu}>
     <S.ContentWrapper>
       <S.StatusIconWrapper>
         <S.StatusIcon status={status} aria-label="status">

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;
 `;
 

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: -8px;
   background-color: ${({ theme, $colorKey }) =>
     theme.clusterMenu.backgroundColor[$colorKey]};
 `;

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],