[Fixes #1410] Edited using colors in styled components using our Theme (#1442)

* Edited using colors in syled components

* updated snapshots

* updated snapshots

* edited stylistic mistake

Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/Alerts/Alert.styled.ts

@@ -10,7 +10,7 @@ export const Alert = styled.div<{ $type: AlertType }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+  filter: drop-shadow(0px 4px 16px ${({ theme }) => theme.alert.shadow});
   margin-top: 10px;
   line-height: 20px;
 `;

kafka-ui-react-app/src/components/App.styled.ts

@@ -26,7 +26,7 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
     width: ${theme.layout.navBarWidth};
     display: flex;
     flex-direction: column;
-    border-right: 1px solid #e7e7e7;
+    border-right: 1px solid ${theme.layout.stuffBorderColor};
     position: fixed;
     top: ${theme.layout.navBarHeight};
     left: 0;
@@ -85,7 +85,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
         right: 0;
         visibility: 'visible';
         opacity: 1;
-        background-color: rgba(34, 41, 47, 0.5);
+        background-color: ${theme.layout.overlay.backgroundColor};
       }
     `}
   `
@@ -93,7 +93,7 @@ export const Overlay = styled.div<{ $visible: boolean }>(
 
 export const Navbar = styled.nav(
   ({ theme }) => css`
-    border-bottom: 1px solid #e7e7e7;
+    border-bottom: 1px solid ${theme.layout.stuffBorderColor};
     position: fixed;
     top: 0;
     left: 0;

kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap

@@ -45,7 +45,7 @@ exports[`Actions view matches snapshot 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -96,7 +96,7 @@ exports[`Actions view matches snapshot 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {
@@ -238,7 +238,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -289,7 +289,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {
@@ -431,7 +431,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -482,7 +482,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {
@@ -609,7 +609,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -660,7 +660,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {
@@ -802,7 +802,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -853,7 +853,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {
@@ -995,7 +995,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
 }
 
 .c1 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c1 i {
@@ -1046,7 +1046,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
 }
 
 .c2 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c2 i {

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

@@ -61,7 +61,7 @@ exports[`Details view matches snapshot 1`] = `
   font-size: 24px;
   font-weight: 500;
   line-height: 32px;
-  color: #000;
+  color: #171A1C;
 }
 
 .c0 > div {

kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -86,6 +86,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "success": "#D6F5E0",
           "warning": "#FFEECC",
         },
+        "shadow": "rgba(0, 0, 0, 0.1)",
       },
       "buttonStyles": Object {
         "fontSize": Object {
@@ -133,17 +134,38 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "warning": "#FFEECC",
         },
       },
+      "confirmationModal": Object {
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "headingStyles": Object {
+        "h1": Object {
+          "color": "#171A1C",
+        },
         "h3": Object {
           "color": "#73848C",
           "fontSize": "14px",
         },
       },
+      "icons": Object {
+        "closeIcon": "#ABB5BA",
+        "liveIcon": Object {
+          "circleBig": "#FAD1D1",
+          "circleSmall": "#E51A1A",
+        },
+        "messageToggleIconClosed": "#ABB5BA",
+        "messageToggleIconOpened": "#171A1C",
+        "verticalElipsisIcon": "#73848C",
+      },
       "layout": Object {
-        "mainColor": "#F1F2F3",
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
         "navBarWidth": "201px",
+        "overlay": Object {
+          "backgroundColor": "#73848C",
+        },
+        "stuffBorderColor": "#E3E6E8",
+        "stuffColor": "#F1F2F3",
       },
       "menuStyles": Object {
         "backgroundColor": Object {
@@ -247,6 +269,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
       },
       "switch": Object {
         "checked": "#29A352",
+        "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
       "tagStyles": Object {
@@ -260,6 +283,9 @@ exports[`Connectors ListItem matches snapshot 1`] = `
         },
         "color": "#171A1C",
       },
+      "textarea": Object {
+        "focus": "transparent",
+      },
       "thStyles": Object {
         "backgroundColor": Object {
           "normal": "#FFFFFF",
@@ -273,6 +299,9 @@ exports[`Connectors ListItem matches snapshot 1`] = `
           "normal": "#4F4FFF",
         },
       },
+      "viewer": Object {
+        "wrapper": "#f9fafa",
+      },
     }
   }
 >

kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Colors } from 'theme/theme';
 
 export const TopicContentWrapper = styled.tr`
@@ -8,8 +8,10 @@ export const TopicContentWrapper = styled.tr`
   }
 `;
 
-export const ContentBox = styled.div`
-  background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-`;
+export const ContentBox = styled.div(
+  ({ theme }) => css`
+    background-color: ${theme.menuStyles.backgroundColor.normal};
+    padding: 20px;
+    border-radius: 8px;
+  `
+);

kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts

@@ -3,7 +3,7 @@ import theme from 'theme/theme';
 
 export const LatestVersionWrapper = styled.div`
   width: 100%;
-  background-color: ${theme.layout.mainColor};
+  background-color: ${theme.layout.stuffColor};
   padding: 16px;
   display: flex;
   justify-content: center;

kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import LatestVersionItem from 'components/Schemas/Details/LatestVersion/LatestVersionItem';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 import { jsonSchema, protoSchema } from './fixtures';
 
 describe('LatestVersionItem', () => {
   it('renders latest version of json schema', () => {
-    const wrapper = mount(<LatestVersionItem schema={jsonSchema} />);
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <LatestVersionItem schema={jsonSchema} />
+      </ThemeProvider>
+    );
 
     expect(wrapper.find('div[data-testid="meta-data"]').length).toEqual(1);
     expect(
@@ -16,7 +22,11 @@ describe('LatestVersionItem', () => {
   });
 
   it('renders latest version of compatibility', () => {
-    const wrapper = mount(<LatestVersionItem schema={protoSchema} />);
+    const wrapper = mount(
+      <ThemeProvider theme={theme}>
+        <LatestVersionItem schema={protoSchema} />
+      </ThemeProvider>
+    );
 
     expect(wrapper.find('div[data-testid="meta-data"]').length).toEqual(1);
     expect(
@@ -27,7 +37,11 @@ describe('LatestVersionItem', () => {
 
   it('matches snapshot', () => {
     expect(
-      shallow(<LatestVersionItem schema={jsonSchema} />)
+      shallow(
+        <ThemeProvider theme={theme}>
+          <LatestVersionItem schema={jsonSchema} />
+        </ThemeProvider>
+      )
     ).toMatchSnapshot();
   });
 });

kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import SchemaVersion from 'components/Schemas/Details/SchemaVersion/SchemaVersion';
+import { ThemeProvider } from 'styled-components';
+import theme from 'theme/theme';
 
 import { versions } from './fixtures';
 
 describe('SchemaVersion', () => {
   it('renders versions', () => {
     const wrapper = mount(
-      <table>
-        <tbody>
-          <SchemaVersion version={versions[0]} />
-        </tbody>
-      </table>
+      <ThemeProvider theme={theme}>
+        <table>
+          <tbody>
+            <SchemaVersion version={versions[0]} />
+          </tbody>
+        </table>
+      </ThemeProvider>
     );
 
     expect(wrapper.find('td').length).toEqual(3);
@@ -21,6 +25,12 @@ describe('SchemaVersion', () => {
   });
 
   it('matches snapshot', () => {
-    expect(shallow(<SchemaVersion version={versions[0]} />)).toMatchSnapshot();
+    expect(
+      shallow(
+        <ThemeProvider theme={theme}>
+          <SchemaVersion version={versions[0]} />
+        </ThemeProvider>
+      )
+    ).toMatchSnapshot();
   });
 });

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap

@@ -1,52 +1,246 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`LatestVersionItem matches snapshot 1`] = `
-<styled.div>
-  <div>
-    <h1>
-      Relevant version
-    </h1>
-    <EditorViewer
-      data="{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}"
-      maxLines={28}
-      schemaType="JSON"
-    />
-  </div>
-  <div
-    data-testid="meta-data"
-  >
-    <div>
-      <styled.h3>
-        Latest version
-      </styled.h3>
-      <p>
-        1
-      </p>
-    </div>
-    <div>
-      <styled.h3>
-        ID
-      </styled.h3>
-      <p>
-        1
-      </p>
-    </div>
-    <div>
-      <styled.h3>
-        Subject
-      </styled.h3>
-      <p>
-        test
-      </p>
-    </div>
-    <div>
-      <styled.h3>
-        Compatibility
-      </styled.h3>
-      <p>
-        BACKWARD
-      </p>
-    </div>
-  </div>
-</styled.div>
+<ContextProvider
+  value={
+    Object {
+      "alert": Object {
+        "color": Object {
+          "error": "#FAD1D1",
+          "info": "#E3E6E8",
+          "success": "#D6F5E0",
+          "warning": "#FFEECC",
+        },
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
+      "buttonStyles": Object {
+        "fontSize": Object {
+          "L": "16px",
+          "M": "14px",
+          "S": "14px",
+        },
+        "height": Object {
+          "L": "40px",
+          "M": "32px",
+          "S": "24px",
+        },
+        "primary": Object {
+          "backgroundColor": Object {
+            "active": "#1414B8",
+            "hover": "#1717CF",
+            "normal": "#4F4FFF",
+          },
+          "color": "#FFFFFF",
+          "invertedColors": Object {
+            "active": "#1414B8",
+            "hover": "#1717CF",
+            "normal": "#4F4FFF",
+          },
+        },
+        "secondary": Object {
+          "backgroundColor": Object {
+            "active": "#D5DADD",
+            "hover": "#E3E6E8",
+            "normal": "#F1F2F3",
+          },
+          "color": "#171A1C",
+          "invertedColors": Object {
+            "active": "#171A1C",
+            "hover": "#454F54",
+            "normal": "#73848C",
+          },
+        },
+      },
+      "circularAlert": Object {
+        "color": Object {
+          "error": "#E51A1A",
+          "info": "#E3E6E8",
+          "success": "#5CD685",
+          "warning": "#FFEECC",
+        },
+      },
+      "confirmationModal": Object {
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
+      "headingStyles": Object {
+        "h1": Object {
+          "color": "#171A1C",
+        },
+        "h3": Object {
+          "color": "#73848C",
+          "fontSize": "14px",
+        },
+      },
+      "icons": Object {
+        "closeIcon": "#ABB5BA",
+        "liveIcon": Object {
+          "circleBig": "#FAD1D1",
+          "circleSmall": "#E51A1A",
+        },
+        "messageToggleIconClosed": "#ABB5BA",
+        "messageToggleIconOpened": "#171A1C",
+        "verticalElipsisIcon": "#73848C",
+      },
+      "layout": Object {
+        "minWidth": "1200px",
+        "navBarHeight": "3.25rem",
+        "navBarWidth": "201px",
+        "overlay": Object {
+          "backgroundColor": "#73848C",
+        },
+        "stuffBorderColor": "#E3E6E8",
+        "stuffColor": "#F1F2F3",
+      },
+      "menuStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+        "chevronIconColor": "#73848C",
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#73848C",
+        },
+        "statusIconColor": Object {
+          "offline": "#E51A1A",
+          "online": "#5CD685",
+        },
+      },
+      "metrics": Object {
+        "backgroundColor": "#F1F2F3",
+        "indicator": Object {
+          "backgroundColor": "#FFFFFF",
+          "lightTextColor": "#ABB5BA",
+          "titleColor": "#73848C",
+          "warningTextColor": "#E51A1A",
+        },
+      },
+      "pageLoader": Object {
+        "borderBottomColor": "#FFFFFF",
+        "borderColor": "#4F4FFF",
+      },
+      "paginationStyles": Object {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": Object {
+          "active": "#454F54",
+          "disabled": "#C7CED1",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "disabled": "#C7CED1",
+          "hover": "#171A1C",
+          "normal": "#171A1C",
+        },
+        "currentPage": "#E3E6E8",
+      },
+      "panelColor": "#FFFFFF",
+      "primaryTabStyles": Object {
+        "borderColor": Object {
+          "active": "#4F4FFF",
+          "hover": "transparent",
+          "normal": "transparent",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#171A1C",
+          "normal": "#73848C",
+        },
+      },
+      "scrollbar": Object {
+        "thumbColor": Object {
+          "active": "#73848C",
+          "normal": "#FFFFFF",
+        },
+        "trackColor": Object {
+          "active": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+      },
+      "secondaryTabStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#171A1C",
+          "normal": "#73848C",
+        },
+      },
+      "selectStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#E3E6E8",
+          "normal": "#FFFFFF",
+        },
+        "borderColor": Object {
+          "active": "#454F54",
+          "disabled": "#E3E6E8",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "disabled": "#ABB5BA",
+          "hover": "#171A1C",
+          "normal": "#171A1C",
+        },
+      },
+      "switch": Object {
+        "checked": "#29A352",
+        "circle": "#FFFFFF",
+        "unchecked": "#ABB5BA",
+      },
+      "tagStyles": Object {
+        "backgroundColor": Object {
+          "blue": "#e3f2fd",
+          "gray": "#F1F2F3",
+          "green": "#D6F5E0",
+          "red": "#FAD1D1",
+          "white": "#E3E6E8",
+          "yellow": "#FFEECC",
+        },
+        "color": "#171A1C",
+      },
+      "textarea": Object {
+        "focus": "transparent",
+      },
+      "thStyles": Object {
+        "backgroundColor": Object {
+          "normal": "#FFFFFF",
+        },
+        "color": Object {
+          "active": "#4F4FFF",
+          "hover": "#4F4FFF",
+          "normal": "#73848C",
+        },
+        "previewColor": Object {
+          "normal": "#4F4FFF",
+        },
+      },
+      "viewer": Object {
+        "wrapper": "#f9fafa",
+      },
+    }
+  }
+>
+  <LatestVersionItem
+    schema={
+      Object {
+        "compatibilityLevel": "BACKWARD",
+        "id": 1,
+        "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
+        "schemaType": "JSON",
+        "subject": "test",
+        "version": "1",
+      }
+    }
+  />
+</ContextProvider>
 `;

kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap

@@ -1,35 +1,246 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`SchemaVersion matches snapshot 1`] = `
-<Fragment>
-  <tr>
-    <td
-      style={
-        Object {
-          "width": "3%",
-        }
+<ContextProvider
+  value={
+    Object {
+      "alert": Object {
+        "color": Object {
+          "error": "#FAD1D1",
+          "info": "#E3E6E8",
+          "success": "#D6F5E0",
+          "warning": "#FFEECC",
+        },
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
+      "buttonStyles": Object {
+        "fontSize": Object {
+          "L": "16px",
+          "M": "14px",
+          "S": "14px",
+        },
+        "height": Object {
+          "L": "40px",
+          "M": "32px",
+          "S": "24px",
+        },
+        "primary": Object {
+          "backgroundColor": Object {
+            "active": "#1414B8",
+            "hover": "#1717CF",
+            "normal": "#4F4FFF",
+          },
+          "color": "#FFFFFF",
+          "invertedColors": Object {
+            "active": "#1414B8",
+            "hover": "#1717CF",
+            "normal": "#4F4FFF",
+          },
+        },
+        "secondary": Object {
+          "backgroundColor": Object {
+            "active": "#D5DADD",
+            "hover": "#E3E6E8",
+            "normal": "#F1F2F3",
+          },
+          "color": "#171A1C",
+          "invertedColors": Object {
+            "active": "#171A1C",
+            "hover": "#454F54",
+            "normal": "#73848C",
+          },
+        },
+      },
+      "circularAlert": Object {
+        "color": Object {
+          "error": "#E51A1A",
+          "info": "#E3E6E8",
+          "success": "#5CD685",
+          "warning": "#FFEECC",
+        },
+      },
+      "confirmationModal": Object {
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
+      "headingStyles": Object {
+        "h1": Object {
+          "color": "#171A1C",
+        },
+        "h3": Object {
+          "color": "#73848C",
+          "fontSize": "14px",
+        },
+      },
+      "icons": Object {
+        "closeIcon": "#ABB5BA",
+        "liveIcon": Object {
+          "circleBig": "#FAD1D1",
+          "circleSmall": "#E51A1A",
+        },
+        "messageToggleIconClosed": "#ABB5BA",
+        "messageToggleIconOpened": "#171A1C",
+        "verticalElipsisIcon": "#73848C",
+      },
+      "layout": Object {
+        "minWidth": "1200px",
+        "navBarHeight": "3.25rem",
+        "navBarWidth": "201px",
+        "overlay": Object {
+          "backgroundColor": "#73848C",
+        },
+        "stuffBorderColor": "#E3E6E8",
+        "stuffColor": "#F1F2F3",
+      },
+      "menuStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+        "chevronIconColor": "#73848C",
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#73848C",
+          "normal": "#73848C",
+        },
+        "statusIconColor": Object {
+          "offline": "#E51A1A",
+          "online": "#5CD685",
+        },
+      },
+      "metrics": Object {
+        "backgroundColor": "#F1F2F3",
+        "indicator": Object {
+          "backgroundColor": "#FFFFFF",
+          "lightTextColor": "#ABB5BA",
+          "titleColor": "#73848C",
+          "warningTextColor": "#E51A1A",
+        },
+      },
+      "pageLoader": Object {
+        "borderBottomColor": "#FFFFFF",
+        "borderColor": "#4F4FFF",
+      },
+      "paginationStyles": Object {
+        "backgroundColor": "#FFFFFF",
+        "borderColor": Object {
+          "active": "#454F54",
+          "disabled": "#C7CED1",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "disabled": "#C7CED1",
+          "hover": "#171A1C",
+          "normal": "#171A1C",
+        },
+        "currentPage": "#E3E6E8",
+      },
+      "panelColor": "#FFFFFF",
+      "primaryTabStyles": Object {
+        "borderColor": Object {
+          "active": "#4F4FFF",
+          "hover": "transparent",
+          "normal": "transparent",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#171A1C",
+          "normal": "#73848C",
+        },
+      },
+      "scrollbar": Object {
+        "thumbColor": Object {
+          "active": "#73848C",
+          "normal": "#FFFFFF",
+        },
+        "trackColor": Object {
+          "active": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+      },
+      "secondaryTabStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#F1F2F3",
+          "normal": "#FFFFFF",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "hover": "#171A1C",
+          "normal": "#73848C",
+        },
+      },
+      "selectStyles": Object {
+        "backgroundColor": Object {
+          "active": "#E3E6E8",
+          "hover": "#E3E6E8",
+          "normal": "#FFFFFF",
+        },
+        "borderColor": Object {
+          "active": "#454F54",
+          "disabled": "#E3E6E8",
+          "hover": "#73848C",
+          "normal": "#ABB5BA",
+        },
+        "color": Object {
+          "active": "#171A1C",
+          "disabled": "#ABB5BA",
+          "hover": "#171A1C",
+          "normal": "#171A1C",
+        },
+      },
+      "switch": Object {
+        "checked": "#29A352",
+        "circle": "#FFFFFF",
+        "unchecked": "#ABB5BA",
+      },
+      "tagStyles": Object {
+        "backgroundColor": Object {
+          "blue": "#e3f2fd",
+          "gray": "#F1F2F3",
+          "green": "#D6F5E0",
+          "red": "#FAD1D1",
+          "white": "#E3E6E8",
+          "yellow": "#FFEECC",
+        },
+        "color": "#171A1C",
+      },
+      "textarea": Object {
+        "focus": "transparent",
+      },
+      "thStyles": Object {
+        "backgroundColor": Object {
+          "normal": "#FFFFFF",
+        },
+        "color": Object {
+          "active": "#4F4FFF",
+          "hover": "#4F4FFF",
+          "normal": "#73848C",
+        },
+        "previewColor": Object {
+          "normal": "#4F4FFF",
+        },
+      },
+      "viewer": Object {
+        "wrapper": "#f9fafa",
+      },
+    }
+  }
+>
+  <SchemaVersion
+    version={
+      Object {
+        "compatibilityLevel": "BACKWARD",
+        "id": 1,
+        "schema": "{\\"type\\":\\"record\\",\\"name\\":\\"MyRecord1\\",\\"namespace\\":\\"com.mycompany\\",\\"fields\\":[{\\"name\\":\\"id\\",\\"type\\":\\"long\\"}]}",
+        "schemaType": "JSON",
+        "subject": "test",
+        "version": "1",
       }
-    >
-      <styled.span
-        onClick={[Function]}
-      >
-        <MessageToggleIcon
-          isOpen={false}
-        />
-      </styled.span>
-    </td>
-    <td
-      style={
-        Object {
-          "width": "6%",
-        }
-      }
-    >
-      1
-    </td>
-    <td>
-      1
-    </td>
-  </tr>
-</Fragment>
+    }
+  />
+</ContextProvider>
 `;

kafka-ui-react-app/src/components/Schemas/Edit/Edit.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const EditWrapper = styled.div`
   padding: 16px;
@@ -33,15 +33,17 @@ export const EditorsWrapper = styled.div`
   }
 `;
 
-export const EditorContainer = styled.div`
-  border: 1px solid #e3e6e8;
-  border-radius: 8px;
-  margin-bottom: 16px;
-  padding: 16px;
-  & > h4 {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-    padding-bottom: 16px;
-  }
-`;
+export const EditorContainer = styled.div(
+  ({ theme }) => css`
+    border: 1px solid ${theme.layout.stuffBorderColor};
+    border-radius: 8px;
+    margin-bottom: 16px;
+    padding: 16px;
+    & > h4 {
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+      padding-bottom: 16px;
+    }
+  `
+);

kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap

@@ -323,7 +323,7 @@ exports[`Filters component matches the snapshot 1`] = `
 }
 
 .c10 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c10 i {
@@ -967,7 +967,7 @@ exports[`Filters component when fetching matches the snapshot 1`] = `
 }
 
 .c10 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c10 i {

kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap

@@ -22,7 +22,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
   font-size: 24px;
   font-weight: 500;
   line-height: 32px;
-  color: #000;
+  color: #171A1C;
 }
 
 .c0 > div {
@@ -97,6 +97,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "success": "#D6F5E0",
           "warning": "#FFEECC",
         },
+        "shadow": "rgba(0, 0, 0, 0.1)",
       },
       "buttonStyles": Object {
         "fontSize": Object {
@@ -144,17 +145,38 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "warning": "#FFEECC",
         },
       },
+      "confirmationModal": Object {
+        "overlay": "rgba(10, 10, 10, 0.1)",
+        "shadow": "rgba(0, 0, 0, 0.1)",
+      },
       "headingStyles": Object {
+        "h1": Object {
+          "color": "#171A1C",
+        },
         "h3": Object {
           "color": "#73848C",
           "fontSize": "14px",
         },
       },
+      "icons": Object {
+        "closeIcon": "#ABB5BA",
+        "liveIcon": Object {
+          "circleBig": "#FAD1D1",
+          "circleSmall": "#E51A1A",
+        },
+        "messageToggleIconClosed": "#ABB5BA",
+        "messageToggleIconOpened": "#171A1C",
+        "verticalElipsisIcon": "#73848C",
+      },
       "layout": Object {
-        "mainColor": "#F1F2F3",
         "minWidth": "1200px",
         "navBarHeight": "3.25rem",
         "navBarWidth": "201px",
+        "overlay": Object {
+          "backgroundColor": "#73848C",
+        },
+        "stuffBorderColor": "#E3E6E8",
+        "stuffColor": "#F1F2F3",
       },
       "menuStyles": Object {
         "backgroundColor": Object {
@@ -258,6 +280,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
       },
       "switch": Object {
         "checked": "#29A352",
+        "circle": "#FFFFFF",
         "unchecked": "#ABB5BA",
       },
       "tagStyles": Object {
@@ -271,6 +294,9 @@ exports[`Details when it has readonly flag does not render the Action button a T
         },
         "color": "#171A1C",
       },
+      "textarea": Object {
+        "focus": "transparent",
+      },
       "thStyles": Object {
         "backgroundColor": Object {
           "normal": "#FFFFFF",
@@ -284,6 +310,9 @@ exports[`Details when it has readonly flag does not render the Action button a T
           "normal": "#4F4FFF",
         },
       },
+      "viewer": Object {
+        "wrapper": "#f9fafa",
+      },
     }
   }
 >

kafka-ui-react-app/src/components/Topics/Topic/Edit/__tests__/__snapshots__/DangerZone.spec.tsx.snap

@@ -45,7 +45,7 @@ exports[`DangerZone is rendered properly 1`] = `
 }
 
 .c6 a {
-  color: white;
+  color: #FFFFFF;
 }
 
 .c6 i {

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

@@ -55,7 +55,7 @@ const StyledButton = styled.button<ButtonProps>`
   }
 
   & a {
-    color: white;
+    color: ${(props) => props.theme.buttonStyles.primary.color};
   }
 
   & i {

kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx

@@ -1,58 +1,60 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Colors } from 'theme/theme';
 
-export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  justify-content: center;
-  overflow: hidden;
-  position: fixed;
-  z-index: 40;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  top: 0;
-  & div:first-child {
-    background-color: rgba(10, 10, 10, 0.1);
+export const ConfirmationModalWrapper = styled.div.attrs({ role: 'dialog' })(
+  ({ theme }) => css`
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    position: fixed;
+    z-index: 40;
     bottom: 0;
     left: 0;
-    position: absolute;
     right: 0;
     top: 0;
-  }
+    & div:first-child {
+      background-color: ${theme.confirmationModal.overlay};
+      bottom: 0;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
 
-  & div:last-child {
-    position: absolute;
-    display: flex;
-    flex-direction: column;
-    width: 560px;
-    border-radius: 8px;
+    & div:last-child {
+      position: absolute;
+      display: flex;
+      flex-direction: column;
+      width: 560px;
+      border-radius: 8px;
 
-    background-color: ${Colors.neutral[0]};
-    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+      background-color: ${Colors.neutral[0]};
+      filter: drop-shadow(0px 4px 16px ${theme.confirmationModal.shadow});
 
-    & > * {
-      padding: 16px;
-      width: 100%;
-    }
+      & > * {
+        padding: 16px;
+        width: 100%;
+      }
 
-    & > header {
-      height: 64px;
-      font-size: 20px;
-      text-align: start;
-    }
+      & > header {
+        height: 64px;
+        font-size: 20px;
+        text-align: start;
+      }
 
-    & > section {
-      border-top: 1px solid ${Colors.neutral[5]};
-      border-bottom: 1px solid ${Colors.neutral[5]};
-    }
+      & > section {
+        border-top: 1px solid ${Colors.neutral[5]};
+        border-bottom: 1px solid ${Colors.neutral[5]};
+      }
 
-    & > footer {
-      height: 64px;
-      display: flex;
-      justify-content: flex-end;
-      gap: 10px;
+      & > footer {
+        height: 64px;
+        display: flex;
+        justify-content: flex-end;
+        gap: 10px;
+      }
     }
-  }
-`;
+  `
+);

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

@@ -1,6 +1,8 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
-export const StyledWrapper = styled.div`
-  background-color: #f9fafa;
-  padding: 8px 16px;
-`;
+export const StyledWrapper = styled.div(
+  ({ theme }) => css`
+    background-color: ${theme.viewer.wrapper};
+    padding: 8px 16px;
+  `
+);

kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
-const CloseIcon = () => {
+const CloseIcon: React.FC = () => {
+  const theme = useTheme();
   return (
     <svg
       width="16"
@@ -13,7 +15,7 @@ const CloseIcon = () => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM11.707 4.29289C12.0976 4.68342 12.0976 5.31658 11.707 5.70711L9.41415 8L11.707 10.2929C12.0976 10.6834 12.0976 11.3166 11.707 11.7071C11.3165 12.0976 10.6834 12.0976 10.2928 11.7071L7.99994 9.41421L5.70711 11.707C5.31658 12.0976 4.68342 12.0976 4.29289 11.707C3.90237 11.3165 3.90237 10.6834 4.29289 10.2928L6.58573 8L4.29289 5.70717C3.90237 5.31664 3.90237 4.68348 4.29289 4.29295C4.68342 3.90243 5.31658 3.90243 5.70711 4.29295L7.99994 6.58579L10.2928 4.29289C10.6834 3.90237 11.3165 3.90237 11.707 4.29289Z"
-        fill="#ABB5BA"
+        fill={theme.icons.closeIcon}
       />
     </svg>
   );

kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
 interface Props {
   isOpen: boolean;
 }
 const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
+  const theme = useTheme();
   if (isOpen) {
     return (
       <svg
@@ -17,7 +19,7 @@ const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
           fillRule="evenodd"
           clipRule="evenodd"
           d="M14 16C15.1046 16 16 15.1046 16 14L16 2C16 0.895431 15.1046 -7.8281e-08 14 -1.74846e-07L2 -1.22392e-06C0.895432 -1.32048e-06 1.32048e-06 0.895429 1.22392e-06 2L1.74846e-07 14C7.8281e-08 15.1046 0.895431 16 2 16L14 16ZM5 7C4.44772 7 4 7.44771 4 8C4 8.55228 4.44772 9 5 9L11 9C11.5523 9 12 8.55228 12 8C12 7.44772 11.5523 7 11 7L5 7Z"
-          fill="#171A1C"
+          fill={theme.icons.messageToggleIconOpened}
         />
       </svg>
     );
@@ -34,7 +36,7 @@ const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
         fillRule="evenodd"
         clipRule="evenodd"
         d="M0 2C0 0.895431 0.895431 0 2 0H14C15.1046 0 16 0.895431 16 2V14C16 15.1046 15.1046 16 14 16H2C0.895431 16 0 15.1046 0 14V2ZM8 4C8.55229 4 9 4.44772 9 5V7H11C11.5523 7 12 7.44772 12 8C12 8.55229 11.5523 9 11 9H9V11C9 11.5523 8.55229 12 8 12C7.44772 12 7 11.5523 7 11V9H5C4.44772 9 4 8.55228 4 8C4 7.44771 4.44772 7 5 7H7V5C7 4.44772 7.44772 4 8 4Z"
-        fill="#ABB5BA"
+        fill={theme.icons.messageToggleIconClosed}
       />
     </svg>
   );

kafka-ui-react-app/src/components/common/Icons/VerticalElipsisIcon.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
+import { useTheme } from 'styled-components';
 
 const VerticalElipsisIcon: React.FC = () => {
+  const theme = useTheme();
   return (
     <svg
       width="4"
@@ -11,7 +13,7 @@ const VerticalElipsisIcon: React.FC = () => {
     >
       <path
         d="M2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"
-        fill="#73848C"
+        fill={theme.icons.verticalElipsisIcon}
       />
     </svg>
   );

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

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import React from 'react';
 
 interface Props {
@@ -15,20 +15,22 @@ const PageHeading: React.FC<Props> = ({ text, className, children }) => {
   );
 };
 
-export default styled(PageHeading)`
-  height: 56px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0px 16px;
-  & h1 {
-    font-size: 24px;
-    font-weight: 500;
-    line-height: 32px;
-    color: #000;
-  }
-  & > div {
+export default styled(PageHeading)(
+  ({ theme }) => css`
+    height: 56px;
     display: flex;
-    gap: 16px;
-  }
-`;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 16px;
+    & h1 {
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 32px;
+      color: ${theme.headingStyles.h1.color};
+    }
+    & > div {
+      display: flex;
+      gap: 16px;
+    }
+  `
+);

kafka-ui-react-app/src/components/common/Select/LiveIcon.styled.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { useTheme } from 'styled-components';
 import React from 'react';
 
 interface Props {
@@ -6,6 +6,7 @@ interface Props {
 }
 
 const LiveIcon: React.FC<Props> = () => {
+  const theme = useTheme();
   return (
     <i>
       <svg
@@ -15,8 +16,8 @@ const LiveIcon: React.FC<Props> = () => {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <circle cx="8" cy="8" r="7" fill="#FAD1D1" />
-        <circle cx="8" cy="8" r="4" fill="#E61A1A" />
+        <circle cx="8" cy="8" r="7" fill={theme.icons.liveIcon.circleBig} />
+        <circle cx="8" cy="8" r="4" fill={theme.icons.liveIcon.circleSmall} />
       </svg>
     </i>
   );

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

@@ -74,7 +74,7 @@ exports[`Custom Select when live matches the snapshot 1`] = `
           <circle
             cx="8"
             cy="8"
-            fill="#E61A1A"
+            fill="#E51A1A"
             r="4"
           />
         </svg>

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

@@ -26,7 +26,7 @@ export const StyledSlider = styled.span`
     width: 14px;
     left: 3px;
     bottom: 3px;
-    background-color: white;
+    background-color: ${({ theme }) => theme.switch.circle};
     transition: 0.4s;
     border-radius: 50%;
   }

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

@@ -8,7 +8,7 @@ export const SecondaryTabs = styled.nav`
     padding: 6px;
     height: 32px;
     min-width: 57px;
-    border: 1px solid #e3e6e8;
+    border: 1px solid ${(props) => props.theme.layout.stuffBorderColor};
     cursor: pointer;
 
     &:hover {

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

@@ -1,41 +1,43 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Colors } from 'theme/theme';
 
-export const Textarea = styled.textarea`
-  border: 1px ${Colors.neutral[30]} solid;
-  border-radius: 4px;
-  width: 100%;
-  padding: 12px;
-  padding-top: 6px;
+export const Textarea = styled.textarea(
+  ({ theme }) => css`
+    border: 1px ${Colors.neutral[30]} solid;
+    border-radius: 4px;
+    width: 100%;
+    padding: 12px;
+    padding-top: 6px;
 
-  &::placeholder {
-    color: ${Colors.neutral[30]};
-    font-size: 14px;
-  }
-  &:hover {
-    border-color: ${Colors.neutral[50]};
-  }
-  &:focus {
-    outline: none;
-    border-color: ${Colors.neutral[70]};
     &::placeholder {
-      color: transparent;
+      color: ${Colors.neutral[30]};
+      font-size: 14px;
+    }
+    &:hover {
+      border-color: ${Colors.neutral[50]};
     }
-  }
-  &:disabled {
-    color: ${Colors.neutral[30]};
-    border-color: ${Colors.neutral[10]};
-    cursor: not-allowed;
-  }
-  &:read-only {
-    color: ${Colors.neutral[90]};
-    border: none;
-    background-color: ${Colors.neutral[5]};
     &:focus {
+      outline: none;
+      border-color: ${Colors.neutral[70]};
       &::placeholder {
-        color: ${Colors.neutral[30]};
+        color: ${theme.textarea.focus};
+      }
+    }
+    &:disabled {
+      color: ${Colors.neutral[30]};
+      border-color: ${Colors.neutral[10]};
+      cursor: not-allowed;
+    }
+    &:read-only {
+      color: ${Colors.neutral[90]};
+      border: none;
+      background-color: ${Colors.neutral[5]};
+      &:focus {
+        &::placeholder {
+          color: ${Colors.neutral[30]};
+        }
       }
+      cursor: not-allowed;
     }
-    cursor: not-allowed;
-  }
-`;
+  `
+);

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

@@ -2,6 +2,7 @@
 export const Colors = {
   neutral: {
     '0': '#FFFFFF',
+    '3': '#f9fafa',
     '5': '#F1F2F3',
     '10': '#E3E6E8',
     '15': '#D5DADD',
@@ -14,6 +15,11 @@ export const Colors = {
     '80': '#2F3639',
     '90': '#171A1C',
   },
+  transparency: {
+    '10': 'rgba(10, 10, 10, 0.1)',
+    '20': 'rgba(0, 0, 0, 0.1)',
+    '50': 'rgba(34, 41, 47, 0.5)',
+  },
   green: {
     '10': '#D6F5E0',
     '15': '#C2F0D1',
@@ -47,10 +53,17 @@ const theme = {
     minWidth: '1200px',
     navBarWidth: '201px',
     navBarHeight: '3.25rem',
-    mainColor: Colors.neutral[5],
+    stuffColor: Colors.neutral[5],
+    stuffBorderColor: Colors.neutral[10],
+    overlay: {
+      backgroundColor: Colors.neutral[50],
+    },
   },
   panelColor: Colors.neutral[0],
   headingStyles: {
+    h1: {
+      color: Colors.neutral[90],
+    },
     h3: {
       color: Colors.neutral[50],
       fontSize: '14px',
@@ -63,6 +76,7 @@ const theme = {
       warning: Colors.yellow[10],
       info: Colors.neutral[10],
     },
+    shadow: Colors.transparency[20],
   },
   circularAlert: {
     color: {
@@ -213,6 +227,7 @@ const theme = {
   switch: {
     unchecked: Colors.neutral[30],
     checked: Colors.green[60],
+    circle: Colors.neutral[0],
   },
   pageLoader: {
     borderColor: Colors.brand[50],
@@ -237,6 +252,26 @@ const theme = {
       active: Colors.neutral[50],
     },
   },
+  confirmationModal: {
+    overlay: Colors.transparency[10],
+    shadow: Colors.transparency[20],
+  },
+  icons: {
+    closeIcon: Colors.neutral[30],
+    messageToggleIconOpened: Colors.neutral[90],
+    messageToggleIconClosed: Colors.neutral[30],
+    verticalElipsisIcon: Colors.neutral[50],
+    liveIcon: {
+      circleBig: Colors.red[10],
+      circleSmall: Colors.red[50],
+    },
+  },
+  viewer: {
+    wrapper: Colors.neutral[3],
+  },
+  textarea: {
+    focus: 'transparent',
+  },
 };
 
 export type ThemeType = typeof theme;