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 141f6969480f0713ebf55245b9a89a6c9534d0dd..131fc922437e49ad75c22c1c60d34e9e3a59b806 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 a999bdee4d6bd71b15df96b4581b27d50a949a64..5d6f412b96fd80123547ed013af2c2faaed9f730 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 57c8cb4f9069a72c4ab251faa20a4264a2506bd6..2a7e19bd9453e0637dccd7ed573537fb6065be29 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 e9a96eb1a4df56bad02c61705115ece4a3b8d700..3eb96e48680a80e179f9b56c232159445c952ec9 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 90e15c1d01db10ce54929e865b3fa58c40667bfc..1ad6e95dc02d87dc66148da822a9c80d011a78d6 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 be77b8085573f7f0e120c791be050df03d50944f..8eee65148ea733fc75c83f7aa8eb915a921f4079 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 a34db254cc51c5589f8d52a4ed3160f7a48c9fde..d2f0ea729aaad61208ac06dff3caf6962d78ba38 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 a6bbeebb7c5be93868bed8a3d65e4375853aa0bb..5872d070de764ae1bcd0396e636f7438342a20d1 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 815b34298eb38d14e0343d59c9d68965368df725..42fca8cdeea1bad61d038b3a10ed30e90af469d2 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 bf4e34ebd0bf9f2b0ea6f6c2eb139b9b3448115f..d2b48ab71f7bb0d2fbcb27f5a5744b31b1c71a1e 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 f52f7de52249dfa5639f330275e513170adbbce2..2f6e5d091d3a61f9f7fce0cb6647f25413782a90 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 c81f1d8f0000deb9621dafe42688d9faa404adfd..fd1efe29e600895692553c087391127bb1f0adcf 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 0955c7c8527a0068f723576d3b771d5399e27bed..8b9d33e7403431a6c473fd669b511e347ed2e29a 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 1e5b99cb517eb43a6a0f25e4399a3576990dfafc..de3f4ea860a43741eae0d64fc970d1e1df737e0b 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 68a4008272f484793fdca44cd7eca3e7ebc2461c..74af8432fe52b4a98dc80894679f65bd3be59bc5 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 2691956f250bc83c8912beb9d091db8f744a8553..4e8471fdec468f411a61174a09c152a015151722 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 83b8baa329e8a3dc08b73b5f1230fc005086ffa0..e000df864e27303f521d1cf2e758a4badd9a2446 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: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; + } } - } -`; + ` +); 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 91a6ab049a2bcd7acb0cb49def298c3f3aaa4d93..cd2bccaae54f72316e444117713776b4b6bd677c 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 1f63a3271c34ec98fd785602b029b7eacf006467..17e750e12043615f1bfd0abe392d3e0a7a6fe372 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 724566d4a46a8c099eb36391fff2aa0347e0de34..e49f6dbfc78c57eca0acde497be19a910b7a9cba 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 a22ed681427ca9735e08f91a8c10d58125c88254..baf18d614bec021e73a389bc43f14cafa482623c 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 b9413b8f1605bf0b75afdf8e608a82c5063bb82a..a2debddad419127eeb2338b195be5947200fdd5b 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 4904710e39a1bdbfa3b60465b4db8c135129cd9d..0168da63045f121fabc9982d7aa8743978b5df04 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 eaad40a9f6ef6055861242c285a6c38584c2e62a..8d5f5686c74226200d7eb283b13398ddf95019ba 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 591d339feb938aa0e4dc659dc38af7447b6535d2..cced933eb807b1e5f4bd1149c846d2290980c500 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 45bb39c6c85418631fecf2c5278de52673634caa..3c0afbae99a0171b4edfc3e3de17526ba7d47051 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 5c0e09f5b9e3ef036320e014b3d39c5a4e575e08..469a8352317be0dfe662719847d4c19b71921521 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}; + } + } + &: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; - } -`; + ` +); diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts index c72f063351a8e8e85409faa6ab7493477b172efa..7107d94aa2614356006fab55ac02ca80d6565ac7 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;