Repository: provectus/kafka-ui
Issue: UI: Topic creation "Time to retain data" rendenring looks strange
Labels: type/bug
good first issue
scope/frontend
status/accepted
status/confirmed

**Describe the bug**

"Time to retain data" section options are black. 
Setup: max os, chrome, light theme. 


**Streenshot:**

<img width="511" alt="Screenshot 2022-03-20 at 20 58 16" src="https://user-images.githubusercontent.com/702205/159175981-af428619-1a3a-48c9-a275-109967179ddf.png">



Issue comments:

Pull request review comments:

Patch that resolved the issue:
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx
index f6b745f98f0..2364d90516a 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtn.tsx
@@ -4,7 +4,7 @@ import { MILLISECONDS_IN_WEEK } from 'lib/constants';
 
 import * as S from './TopicForm.styled';
 
-interface Props {
+export interface Props {
   inputName: string;
   text: string;
   value: number;
@@ -16,7 +16,7 @@ const TimeToRetainBtn: React.FC<Props> = ({ inputName, text, value }) => {
 
   return (
     <S.Button
-      isActive={watchedValue === value}
+      isActive={parseFloat(watchedValue) === value}
       type="button"
       onClick={() => setValue(inputName, value)}
     >
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
index e48392d6e4b..53376876e4b 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TimeToRetainBtns.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import TimeToRetainBtn from './TimeToRetainBtn';
 
-interface Props {
+export interface Props {
   name: string;
   value: string;
 }
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts
index 8d17bdc7cc2..fc46d8d9397 100644
--- a/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/TopicForm.styled.ts
@@ -30,7 +30,7 @@ export const Button = styled.button<{ isActive: boolean }>`
   background-color: ${({ theme, ...props }) =>
     props.isActive
       ? theme.button.primary.backgroundColor.active
-      : theme.button.primary.color};
+      : theme.button.primary.backgroundColor.normal};
   height: 32px;
   width: 46px;
   border: 1px solid
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
new file mode 100644
index 00000000000..dcc991b5075
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtn.spec.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import TimeToRetainBtn, {
+  Props,
+} from 'components/Topics/shared/Form/TimeToRetainBtn';
+import { useForm, FormProvider } from 'react-hook-form';
+import theme from 'theme/theme';
+import userEvent from '@testing-library/user-event';
+
+describe('TimeToRetainBtn', () => {
+  const defaultProps: Props = {
+    inputName: 'defaultPropsInputName',
+    text: 'defaultPropsText',
+    value: 0,
+  };
+  const Wrapper: React.FC = ({ children }) => {
+    const methods = useForm();
+    return <FormProvider {...methods}>{children}</FormProvider>;
+  };
+  const SetUpComponent = (props: Partial<Props> = {}) => {
+    const { inputName, text, value } = props;
+    render(
+      <Wrapper>
+        <TimeToRetainBtn
+          inputName={inputName || defaultProps.inputName}
+          text={text || defaultProps.text}
+          value={value || defaultProps.value}
+        />
+      </Wrapper>
+    );
+  };
+
+  describe('Component rendering with its Default Props Setups', () => {
+    beforeEach(() => {
+      SetUpComponent();
+    });
+    it('should test the component rendering on the screen', () => {
+      expect(screen.getByRole('button')).toBeInTheDocument();
+      expect(screen.getByText(defaultProps.text)).toBeInTheDocument();
+    });
+    it('should test the non active state of the button and its styling', () => {
+      const buttonElement = screen.getByRole('button');
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.normal}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.primary.color}`
+      );
+    });
+    it('should test the non active state with click becoming active', () => {
+      const buttonElement = screen.getByRole('button');
+      userEvent.click(buttonElement);
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.active}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.border.active}`
+      );
+    });
+  });
+
+  describe('Component rendering with its Default Props Setups', () => {
+    it('should test the active state of the button and its styling', () => {
+      SetUpComponent({ value: 604800000 });
+      const buttonElement = screen.getByRole('button');
+      expect(buttonElement).toHaveStyle(
+        `background-color:${theme.button.primary.backgroundColor.active}`
+      );
+      expect(buttonElement).toHaveStyle(
+        `border:1px solid ${theme.button.border.active}`
+      );
+    });
+  });
+});
diff --git a/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx
new file mode 100644
index 00000000000..b41793f6e41
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Topics/shared/Form/__tests__/TimeToRetainBtns.spec.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { render } from 'lib/testHelpers';
+import { screen } from '@testing-library/react';
+import TimeToRetainBtns, {
+  Props,
+} from 'components/Topics/shared/Form/TimeToRetainBtns';
+import { FormProvider, useForm } from 'react-hook-form';
+
+describe('TimeToRetainBtns', () => {
+  const defaultProps: Props = {
+    name: 'defaultPropsTestingName',
+    value: 'defaultPropsValue',
+  };
+  const Wrapper: React.FC = ({ children }) => {
+    const methods = useForm();
+    return <FormProvider {...methods}>{children}</FormProvider>;
+  };
+  const SetUpComponent = (props: Props = defaultProps) => {
+    const { name, value } = props;
+
+    render(
+      <Wrapper>
+        <TimeToRetainBtns name={name} value={value} />
+      </Wrapper>
+    );
+  };
+
+  it('should test the normal view rendering of the component', () => {
+    SetUpComponent();
+    expect(screen.getAllByRole('button')).toHaveLength(5);
+  });
+});


Test patch: