0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Edited using colors in syled components

* updated snapshots

* updated snapshots

* edited stylistic mistake

Co-authored-by: Oleg Shur <workshur@gmail.com>
This commit is contained in:
Dekshut 2022-01-22 15:49:41 +02:00 • committed by GitHub
parent e2b63fcec2
commit 9446d9c39d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 786 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
`;

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

@ -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;

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

@ -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 {

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

@ -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 {

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

@ -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",
},
}
}
>

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

@ -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;
`
);

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

@ -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;

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

@ -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();
});
});

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

@ -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();
});
});

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

@ -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>
`;

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

@ -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>
`;

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

@ -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;
}
`
);

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

@ -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 {

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

@ -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",
},
}
}
>

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

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

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

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

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

@ -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;
}
}
}
`;
`
);

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

@ -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;
`
);

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

@ -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>
);

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

@ -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>
);

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

@ -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>
);

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

@ -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;
}
`
);

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

@ -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>
);

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

@ -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>

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

@ -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%;
}

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

@ -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 {

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

@ -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;
}
`
);

37
kafka-ui-react-app/src/theme/theme.ts
View file

@ -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;