add theme styles, move interface, update test, snapshot

kafka-ui-react-app/src/components/Nav/ClusterMenuItem/ClusterMenuItem.styled.ts

@@ -1,12 +1,6 @@
 import styled from 'styled-components';
 
-export interface MenuItemProps {
-  liType: 'primary';
-  to?: string;
-  activeClassName?: string;
-  title?: string;
-  isInverted?: boolean;
-}
+import { MenuItemProps } from './ClusterMenuItem';
 
 const StyledMenuItem = styled.li<MenuItemProps>`
   a {
@@ -18,12 +12,14 @@ const StyledMenuItem = styled.li<MenuItemProps>`
     font-weight: normal;
     font-size: 14px;
     line-height: 20px;
-    background: #fff;
-    color: #73848c;
+    background-color: ${(props) =>
+      props.theme.liStyles[props.liType].backgroundColor.normal};
+    color: ${(props) => props.theme.liStyles[props.liType].color.normal};
 
     &.is-active {
-      background: #e3e6e8;
-      color: #171a1c;
+      background-color: ${(props) =>
+        props.theme.liStyles[props.liType].backgroundColor.active};
+      color: ${(props) => props.theme.liStyles[props.liType].color.active};
     }
   }
 `;

kafka-ui-react-app/src/components/Nav/ClusterMenuItem/ClusterMenuItem.tsx

@@ -1,10 +1,14 @@
-import StyledMenuItem, {
-  MenuItemProps,
-} from 'components/Nav/ClusterMenuItem/ClusterMenuItem.styled';
+import StyledMenuItem from 'components/Nav/ClusterMenuItem/ClusterMenuItem.styled';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-export type { MenuItemProps };
+export interface MenuItemProps {
+  liType: 'primary';
+  to?: string;
+  activeClassName?: string;
+  title?: string;
+  isInverted?: boolean;
+}
 
 const ClusterMenuItem: React.FC<MenuItemProps> = (props) => {
   const { to, activeClassName, title, children, liType, ...rest } = props;

kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenu.spec.tsx

@@ -4,12 +4,16 @@ import { StaticRouter } from 'react-router';
 import { Cluster, ClusterFeaturesEnum } from 'generated-sources';
 import { onlineClusterPayload } from 'redux/reducers/clusters/__test__/fixtures';
 import ClusterMenu from 'components/Nav/ClusterMenu';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 describe('ClusterMenu', () => {
   const setupComponent = (cluster: Cluster) => (
-    <StaticRouter>
-      <ClusterMenu cluster={cluster} />
-    </StaticRouter>
+    <ThemeProvider theme={theme}>
+      <StaticRouter>
+        <ClusterMenu cluster={cluster} />
+      </StaticRouter>
+    </ThemeProvider>
   );
 
   it('renders cluster menu without Kafka Connect & Schema Registry', () => {

kafka-ui-react-app/src/components/Nav/__tests__/ClusterMenuItem.spec.tsx

@@ -4,12 +4,16 @@ import { StaticRouter } from 'react-router';
 import ClusterMenuItem, {
   MenuItemProps,
 } from 'components/Nav/ClusterMenuItem/ClusterMenuItem';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 describe('ClusterMenuItem', () => {
   const setupComponent = (props: MenuItemProps) => (
-    <StaticRouter>
-      <ClusterMenuItem {...props} />
-    </StaticRouter>
+    <ThemeProvider theme={theme}>
+      <StaticRouter>
+        <ClusterMenuItem {...props} />
+      </StaticRouter>
+    </ThemeProvider>
   );
 
   it('renders with NavLink', () => {

kafka-ui-react-app/src/components/__tests__/__snapshots__/App.spec.tsx.snap

@@ -94,6 +94,18 @@ exports[`App view matches snapshot 1`] = `
                   },
                 },
               },
+              "liStyles": Object {
+                "primary": Object {
+                  "backgroundColor": Object {
+                    "active": "#E3E6E8",
+                    "normal": "#FFFFFF",
+                  },
+                  "color": Object {
+                    "active": "#171A1C",
+                    "normal": "#73848C",
+                  },
+                },
+              },
             }
           }
         >

kafka-ui-react-app/src/theme/theme.ts

@@ -74,6 +74,18 @@ const theme = {
       L: '16px',
     },
   },
+  liStyles: {
+    primary: {
+      backgroundColor: {
+        normal: Colors.neutral[0],
+        active: Colors.neutral[10],
+      },
+      color: {
+        normal: Colors.neutral[50],
+        active: Colors.neutral[90],
+      },
+    },
+  },
 };
 
 export default theme;