diff --git a/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts b/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts index 141f696948..131fc92243 100644 --- a/kafka-ui-react-app/src/components/Alerts/Alert.styled.ts +++ b/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; `; diff --git a/kafka-ui-react-app/src/components/App.styled.ts b/kafka-ui-react-app/src/components/App.styled.ts index a999bdee4d..5d6f412b96 100644 --- a/kafka-ui-react-app/src/components/App.styled.ts +++ b/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; diff --git a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap index 57c8cb4f90..2a7e19bd94 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/Actions/__tests__/__snapshots__/Actions.spec.tsx.snap +++ b/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 { diff --git a/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap index e9a96eb1a4..3eb96e4868 100644 --- a/kafka-ui-react-app/src/components/Connect/Details/__tests__/__snapshots__/Details.spec.tsx.snap +++ b/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 { diff --git a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap index 90e15c1d01..1ad6e95dc0 100644 --- a/kafka-ui-react-app/src/components/Connect/List/__tests__/__snapshots__/ListItem.spec.tsx.snap +++ b/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", + }, } } > diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts b/kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts index be77b80855..8eee65148e 100644 --- a/kafka-ui-react-app/src/components/ConsumerGroups/Details/TopicContents/TopicContent.styled.ts +++ b/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; + ` +); diff --git a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts b/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts index a34db254cc..d2f0ea729a 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/LatestVersion/LatestVersionItem.styled.ts +++ b/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; diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx index a6bbeebb7c..5872d070de 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/LatestVersionItem.spec.tsx +++ b/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(); + const wrapper = mount( + + + + ); 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(); + const wrapper = mount( + + + + ); expect(wrapper.find('div[data-testid="meta-data"]').length).toEqual(1); expect( @@ -27,7 +37,11 @@ describe('LatestVersionItem', () => { it('matches snapshot', () => { expect( - shallow() + shallow( + + + + ) ).toMatchSnapshot(); }); }); diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx b/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx index 815b34298e..42fca8cdee 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/SchemaVersion.spec.tsx +++ b/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( - - - - -
+ + + + + +
+ ); expect(wrapper.find('td').length).toEqual(3); @@ -21,6 +25,12 @@ describe('SchemaVersion', () => { }); it('matches snapshot', () => { - expect(shallow()).toMatchSnapshot(); + expect( + shallow( + + + + ) + ).toMatchSnapshot(); }); }); diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap index bf4e34ebd0..d2b48ab71f 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/LatestVersionItem.spec.tsx.snap +++ b/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`] = ` - -
-

- Relevant version -

- -
-
-
- - Latest version - -

- 1 -

-
-
- - ID - -

- 1 -

-
-
- - Subject - -

- test -

-
-
- - Compatibility - -

- BACKWARD -

-
-
- + + + `; diff --git a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap b/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap index f52f7de522..2f6e5d091d 100644 --- a/kafka-ui-react-app/src/components/Schemas/Details/__test__/__snapshots__/SchemaVersion.spec.tsx.snap +++ b/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`] = ` - - - + - - - - - - 1 - - - 1 - - - + } + /> + `; diff --git a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.styled.ts b/kafka-ui-react-app/src/components/Schemas/Edit/Edit.styled.ts index c81f1d8f00..fd1efe29e6 100644 --- a/kafka-ui-react-app/src/components/Schemas/Edit/Edit.styled.ts +++ b/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; + } + ` +); diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap index 0955c7c852..8b9d33e740 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/__snapshots__/Filters.spec.tsx.snap +++ b/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 { diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap index 1e5b99cb51..de3f4ea860 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Details/__test__/__snapshots__/Details.spec.tsx.snap +++ b/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", + }, } } > diff --git a/kafka-ui-react-app/src/components/Topics/Topic/Edit/__tests__/__snapshots__/DangerZone.spec.tsx.snap b/kafka-ui-react-app/src/components/Topics/Topic/Edit/__tests__/__snapshots__/DangerZone.spec.tsx.snap index 68a4008272..74af8432fe 100644 --- a/kafka-ui-react-app/src/components/Topics/Topic/Edit/__tests__/__snapshots__/DangerZone.spec.tsx.snap +++ b/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 { diff --git a/kafka-ui-react-app/src/components/common/Button/Button.styled.ts b/kafka-ui-react-app/src/components/common/Button/Button.styled.ts index 2691956f25..4e8471fdec 100644 --- a/kafka-ui-react-app/src/components/common/Button/Button.styled.ts +++ b/kafka-ui-react-app/src/components/common/Button/Button.styled.ts @@ -55,7 +55,7 @@ const StyledButton = styled.button` } & a { - color: white; + color: ${(props) => props.theme.buttonStyles.primary.color}; } & i { diff --git a/kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx b/kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx index 83b8baa329..e000df864e 100644 --- a/kafka-ui-react-app/src/components/common/ConfirmationModal/ConfirmationModal.styled.tsx +++ b/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: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)); - - & > * { - padding: 16px; - width: 100%; + & div:first-child { + background-color: ${theme.confirmationModal.overlay}; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } - & > header { - height: 64px; - font-size: 20px; - text-align: start; - } - - & > section { - border-top: 1px solid ${Colors.neutral[5]}; - border-bottom: 1px solid ${Colors.neutral[5]}; - } - - & > footer { - height: 64px; + & div:last-child { + position: absolute; display: flex; - justify-content: flex-end; - gap: 10px; + flex-direction: column; + width: 560px; + border-radius: 8px; + + background-color: ${Colors.neutral[0]}; + filter: drop-shadow(0px 4px 16px ${theme.confirmationModal.shadow}); + + & > * { + padding: 16px; + width: 100%; + } + + & > header { + height: 64px; + font-size: 20px; + text-align: start; + } + + & > 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; + } } - } -`; + ` +); diff --git a/kafka-ui-react-app/src/components/common/EditorViewer/StyledWrapper.styled.ts b/kafka-ui-react-app/src/components/common/EditorViewer/StyledWrapper.styled.ts index 91a6ab049a..cd2bccaae5 100644 --- a/kafka-ui-react-app/src/components/common/EditorViewer/StyledWrapper.styled.ts +++ b/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; + ` +); diff --git a/kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx index 1f63a3271c..17e750e120 100644 --- a/kafka-ui-react-app/src/components/common/Icons/CloseIcon.tsx +++ b/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 ( { 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} /> ); diff --git a/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx index 724566d4a4..e49f6dbfc7 100644 --- a/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx +++ b/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 = ({ isOpen }) => { + const theme = useTheme(); if (isOpen) { return ( = ({ 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} /> ); @@ -34,7 +36,7 @@ const MessageToggleIcon: React.FC = ({ 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} /> ); diff --git a/kafka-ui-react-app/src/components/common/Icons/VerticalElipsisIcon.tsx b/kafka-ui-react-app/src/components/common/Icons/VerticalElipsisIcon.tsx index a22ed68142..baf18d614b 100644 --- a/kafka-ui-react-app/src/components/common/Icons/VerticalElipsisIcon.tsx +++ b/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 ( { > ); diff --git a/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx b/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx index b9413b8f16..a2debddad4 100644 --- a/kafka-ui-react-app/src/components/common/PageHeading/PageHeading.tsx +++ b/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 = ({ 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; + } + ` +); diff --git a/kafka-ui-react-app/src/components/common/Select/LiveIcon.styled.tsx b/kafka-ui-react-app/src/components/common/Select/LiveIcon.styled.tsx index 4904710e39..0168da6304 100644 --- a/kafka-ui-react-app/src/components/common/Select/LiveIcon.styled.tsx +++ b/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 = () => { + const theme = useTheme(); return ( = () => { fill="none" xmlns="http://www.w3.org/2000/svg" > - - + + ); diff --git a/kafka-ui-react-app/src/components/common/Select/__tests__/__snapshots__/Select.spec.tsx.snap b/kafka-ui-react-app/src/components/common/Select/__tests__/__snapshots__/Select.spec.tsx.snap index eaad40a9f6..8d5f5686c7 100644 --- a/kafka-ui-react-app/src/components/common/Select/__tests__/__snapshots__/Select.spec.tsx.snap +++ b/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`] = ` diff --git a/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts b/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts index 591d339feb..cced933eb8 100644 --- a/kafka-ui-react-app/src/components/common/Switch/Switch.styled.ts +++ b/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%; } diff --git a/kafka-ui-react-app/src/components/common/Tabs/SecondaryTabs.styled.ts b/kafka-ui-react-app/src/components/common/Tabs/SecondaryTabs.styled.ts index 45bb39c6c8..3c0afbae99 100644 --- a/kafka-ui-react-app/src/components/common/Tabs/SecondaryTabs.styled.ts +++ b/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 { diff --git a/kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts b/kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts index 5c0e09f5b9..469a835231 100644 --- a/kafka-ui-react-app/src/components/common/Textbox/Textarea.styled.ts +++ b/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}; } } - cursor: not-allowed; - } -`; + &: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; + } + ` +); diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts index c72f063351..7107d94aa2 100644 --- a/kafka-ui-react-app/src/theme/theme.ts +++ b/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;