Add theme

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

@@ -18,12 +18,19 @@ const StyledMenuItem = styled('li')<Props>`
     font-weight: normal;
     font-size: 14px;
     line-height: 20px;
-    background: #fff;
-    color: #73848c;
+    background: ${(props) =>
+      props.theme.secondaryTabStyles.backgroundColor.normal};
+    color: ${(props) => props.theme.secondaryTabStyles.color.normal};
 
+    &:hover {
+      background: ${(props) =>
+        props.theme.secondaryTabStyles.backgroundColor.hover};
+      color: ${(props) => props.theme.secondaryTabStyles.color.hover};
+    }
     &.is-active {
-      background: #e3e6e8;
-      color: #171a1c;
+      background: ${(props) =>
+        props.theme.secondaryTabStyles.backgroundColor.active};
+      color: ${(props) => props.theme.secondaryTabStyles.color.active};
     }
   }
 `;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
 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 { mountWithTheme } from 'lib/testHelpers';
 
 describe('ClusterMenu', () => {
   const setupComponent = (cluster: Cluster) => (
@@ -13,7 +13,7 @@ describe('ClusterMenu', () => {
   );
 
   it('renders cluster menu without Kafka Connect & Schema Registry', () => {
-    const wrapper = mount(setupComponent(onlineClusterPayload));
+    const wrapper = mountWithTheme(setupComponent(onlineClusterPayload));
     expect(wrapper.find('ul.menu-list > li > NavLink').text()).toEqual(
       onlineClusterPayload.name
     );
@@ -23,7 +23,7 @@ describe('ClusterMenu', () => {
   });
 
   it('renders cluster menu with all enabled features', () => {
-    const wrapper = mount(
+    const wrapper = mountWithTheme(
       setupComponent({
         ...onlineClusterPayload,
         features: [

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router';
 import ClusterMenuItem, {
   Props as MenuItemProps,
 } from 'components/Nav/ClusterMenuItem/ClusterMenuItem';
+import { mountWithTheme } from 'lib/testHelpers';
 
 describe('ClusterMenuItem', () => {
   const setupComponent = (props: MenuItemProps) => (
@@ -13,7 +13,7 @@ describe('ClusterMenuItem', () => {
   );
 
   it('renders with NavLink', () => {
-    const wrapper = mount(
+    const wrapper = mountWithTheme(
       setupComponent({
         liType: 'primary',
         to: 'test-url',
@@ -23,7 +23,7 @@ describe('ClusterMenuItem', () => {
   });
 
   it('renders without NavLink', () => {
-    const wrapper = mount(
+    const wrapper = mountWithTheme(
       setupComponent({
         liType: 'primary',
       })

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

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

kafka-ui-react-app/src/lib/testHelpers.tsx

@@ -1,9 +1,11 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { MemoryRouter, Route, StaticRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
 import configureStore from 'redux/store/configureStore';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 interface TestRouterWrapperProps {
   pathname: string;
@@ -53,3 +55,11 @@ export const containerRendersView = (
     });
   });
 };
+
+export function mountWithTheme(child: ReactElement) {
+  return mount(child, {
+    wrappingComponent: ({ children }) => (
+      <ThemeProvider theme={theme}>{children}</ThemeProvider>
+    ),
+  });
+}

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

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