resolve merge conflicts

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

@@ -20,6 +20,10 @@ const StyledMenuItem = styled.li<MenuItemProps>`
           background-color: ${theme.liStyles[liType].backgroundColor.normal};
           color: ${theme.liStyles[liType].color.normal};
 
+          &.hover {
+            background-color: ${theme.liStyles[liType].backgroundColor.hover};
+            color: ${theme.liStyles[liType].color.hover};
+          }
           &.is-active {
             background-color: ${theme.liStyles[liType].backgroundColor.active};
             color: ${theme.liStyles[liType].color.active};

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

@@ -1,23 +1,19 @@
 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 { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { mountWithTheme } from 'lib/testHelpers';
 
 describe('ClusterMenu', () => {
   const setupComponent = (cluster: Cluster) => (
-    <ThemeProvider theme={theme}>
-      <StaticRouter>
-        <ClusterMenu cluster={cluster} />
-      </StaticRouter>
-    </ThemeProvider>
+    <StaticRouter>
+      <ClusterMenu cluster={cluster} />
+    </StaticRouter>
   );
 
   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
     );
@@ -26,7 +22,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,23 +1,19 @@
 import React from 'react';
-import { mount } from 'enzyme';
 import { StaticRouter } from 'react-router';
 import ClusterMenuItem, {
   MenuItemProps,
 } from 'components/Nav/ClusterMenuItem/ClusterMenuItem';
-import { ThemeProvider } from 'styled-components';
-import theme from 'theme/theme';
+import { mountWithTheme } from 'lib/testHelpers';
 
 describe('ClusterMenuItem', () => {
   const setupComponent = (props: MenuItemProps) => (
-    <ThemeProvider theme={theme}>
-      <StaticRouter>
-        <ClusterMenuItem {...props} />
-      </StaticRouter>
-    </ThemeProvider>
+    <StaticRouter>
+      <ClusterMenuItem {...props} />
+    </StaticRouter>
   );
 
   it('renders with NavLink', () => {
-    const wrapper = mount(
+    const wrapper = mountWithTheme(
       setupComponent({
         liType: 'primary',
         to: 'test-url',
@@ -27,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

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

kafka-ui-react-app/src/components/common/Button/Button.styled.ts

@@ -1,12 +1,12 @@
-import styled from 'styled-components';
+import { styled } from 'lib/themedStyles';
 
-export interface Props {
+export interface ButtonProps {
   buttonType: 'primary' | 'secondary';
   buttonSize: 'S' | 'M' | 'L';
   isInverted?: boolean;
 }
 
-const StyledButton = styled('button')<Props>`
+const StyledButton = styled('button')<ButtonProps>`
   display: flex;
   flex-direction: row;
   align-items: center;

kafka-ui-react-app/src/components/common/Button/Button.tsx

@@ -1,11 +1,10 @@
 import StyledButton, {
-  Props as ButtonProps,
+  ButtonProps,
 } from 'components/common/Button/Button.styled';
 import React from 'react';
 
 type Props = ButtonProps;
 
 export const Button: React.FC<Props> = (props) => {
-  // Later we can add other logic here
   return <StyledButton {...props} />;
 };

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/lib/themedStyles.ts

@@ -0,0 +1,10 @@
+import baseStyled, {
+  useTheme as baseUseTheme,
+  ThemedStyledInterface,
+} from 'styled-components';
+import theme from 'theme/theme';
+
+type ThemeInterface = typeof theme;
+
+export const styled = baseStyled as ThemedStyledInterface<ThemeInterface>;
+export const useTheme = () => baseUseTheme() as ThemeInterface;

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

@@ -78,14 +78,28 @@ const theme = {
     primary: {
       backgroundColor: {
         normal: Colors.neutral[0],
+        hover: Colors.neutral[5],
         active: Colors.neutral[10],
       },
       color: {
         normal: Colors.neutral[50],
+        hover: Colors.neutral[5],
         active: Colors.neutral[90],
       },
     },
   },
+  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;