Skip to content

Commit 9446d9c

Browse files
Dekshutworkshur
Dekshut
and
workshur
authored
[Fixes #1410] Edited using colors in styled components using our Theme (#1442)
* Edited using colors in syled components * updated snapshots * updated snapshots * edited stylistic mistake Co-authored-by: Oleg Shur <[email protected]>
1 parent e2b63fc commit 9446d9c

File tree

28 files changed

+783
-242
lines changed

28 files changed

+783
-242
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export const Alert = styled.div<{ $type: AlertType }>`
1010
display: flex;
1111
justify-content: space-between;
1212
align-items: center;
13-
filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
13+
filter: drop-shadow(0px 4px 16px ${({ theme }) => theme.alert.shadow});
1414
margin-top: 10px;
1515
line-height: 20px;
1616
`;

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const Sidebar = styled.div<{ $visible: boolean }>(
2626
width: ${theme.layout.navBarWidth};
2727
display: flex;
2828
flex-direction: column;
29-
border-right: 1px solid #e7e7e7;
29+
border-right: 1px solid ${theme.layout.stuffBorderColor};
3030
position: fixed;
3131
top: ${theme.layout.navBarHeight};
3232
left: 0;
@@ -85,15 +85,15 @@ export const Overlay = styled.div<{ $visible: boolean }>(
8585
right: 0;
8686
visibility: 'visible';
8787
opacity: 1;
88-
background-color: rgba(34, 41, 47, 0.5);
88+
background-color: ${theme.layout.overlay.backgroundColor};
8989
}
9090
`}
9191
`
9292
);
9393

9494
export const Navbar = styled.nav(
9595
({ theme }) => css`
96-
border-bottom: 1px solid #e7e7e7;
96+
border-bottom: 1px solid ${theme.layout.stuffBorderColor};
9797
position: fixed;
9898
top: 0;
9999
left: 0;

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ exports[`Actions view matches snapshot 1`] = `
4545
}
4646
4747
.c1 a {
48-
color: white;
48+
color: #FFFFFF;
4949
}
5050
5151
.c1 i {
@@ -96,7 +96,7 @@ exports[`Actions view matches snapshot 1`] = `
9696
}
9797
9898
.c2 a {
99-
color: white;
99+
color: #FFFFFF;
100100
}
101101
102102
.c2 i {
@@ -238,7 +238,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
238238
}
239239
240240
.c1 a {
241-
color: white;
241+
color: #FFFFFF;
242242
}
243243
244244
.c1 i {
@@ -289,7 +289,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
289289
}
290290
291291
.c2 a {
292-
color: white;
292+
color: #FFFFFF;
293293
}
294294
295295
.c2 i {
@@ -431,7 +431,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
431431
}
432432
433433
.c1 a {
434-
color: white;
434+
color: #FFFFFF;
435435
}
436436
437437
.c1 i {
@@ -482,7 +482,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
482482
}
483483
484484
.c2 a {
485-
color: white;
485+
color: #FFFFFF;
486486
}
487487
488488
.c2 i {
@@ -609,7 +609,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
609609
}
610610
611611
.c1 a {
612-
color: white;
612+
color: #FFFFFF;
613613
}
614614
615615
.c1 i {
@@ -660,7 +660,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
660660
}
661661
662662
.c2 a {
663-
color: white;
663+
color: #FFFFFF;
664664
}
665665
666666
.c2 i {
@@ -802,7 +802,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
802802
}
803803
804804
.c1 a {
805-
color: white;
805+
color: #FFFFFF;
806806
}
807807
808808
.c1 i {
@@ -853,7 +853,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
853853
}
854854
855855
.c2 a {
856-
color: white;
856+
color: #FFFFFF;
857857
}
858858
859859
.c2 i {
@@ -995,7 +995,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
995995
}
996996
997997
.c1 a {
998-
color: white;
998+
color: #FFFFFF;
999999
}
10001000
10011001
.c1 i {
@@ -1046,7 +1046,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
10461046
}
10471047
10481048
.c2 a {
1049-
color: white;
1049+
color: #FFFFFF;
10501050
}
10511051
10521052
.c2 i {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ exports[`Details view matches snapshot 1`] = `
6161
font-size: 24px;
6262
font-weight: 500;
6363
line-height: 32px;
64-
color: #000;
64+
color: #171A1C;
6565
}
6666
6767
.c0 > div {

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

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
8686
"success": "#D6F5E0",
8787
"warning": "#FFEECC",
8888
},
89+
"shadow": "rgba(0, 0, 0, 0.1)",
8990
},
9091
"buttonStyles": Object {
9192
"fontSize": Object {
@@ -133,17 +134,38 @@ exports[`Connectors ListItem matches snapshot 1`] = `
133134
"warning": "#FFEECC",
134135
},
135136
},
137+
"confirmationModal": Object {
138+
"overlay": "rgba(10, 10, 10, 0.1)",
139+
"shadow": "rgba(0, 0, 0, 0.1)",
140+
},
136141
"headingStyles": Object {
142+
"h1": Object {
143+
"color": "#171A1C",
144+
},
137145
"h3": Object {
138146
"color": "#73848C",
139147
"fontSize": "14px",
140148
},
141149
},
150+
"icons": Object {
151+
"closeIcon": "#ABB5BA",
152+
"liveIcon": Object {
153+
"circleBig": "#FAD1D1",
154+
"circleSmall": "#E51A1A",
155+
},
156+
"messageToggleIconClosed": "#ABB5BA",
157+
"messageToggleIconOpened": "#171A1C",
158+
"verticalElipsisIcon": "#73848C",
159+
},
142160
"layout": Object {
143-
"mainColor": "#F1F2F3",
144161
"minWidth": "1200px",
145162
"navBarHeight": "3.25rem",
146163
"navBarWidth": "201px",
164+
"overlay": Object {
165+
"backgroundColor": "#73848C",
166+
},
167+
"stuffBorderColor": "#E3E6E8",
168+
"stuffColor": "#F1F2F3",
147169
},
148170
"menuStyles": Object {
149171
"backgroundColor": Object {
@@ -247,6 +269,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
247269
},
248270
"switch": Object {
249271
"checked": "#29A352",
272+
"circle": "#FFFFFF",
250273
"unchecked": "#ABB5BA",
251274
},
252275
"tagStyles": Object {
@@ -260,6 +283,9 @@ exports[`Connectors ListItem matches snapshot 1`] = `
260283
},
261284
"color": "#171A1C",
262285
},
286+
"textarea": Object {
287+
"focus": "transparent",
288+
},
263289
"thStyles": Object {
264290
"backgroundColor": Object {
265291
"normal": "#FFFFFF",
@@ -273,6 +299,9 @@ exports[`Connectors ListItem matches snapshot 1`] = `
273299
"normal": "#4F4FFF",
274300
},
275301
},
302+
"viewer": Object {
303+
"wrapper": "#f9fafa",
304+
},
276305
}
277306
}
278307
>

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

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from 'styled-components';
1+
import styled, { css } from 'styled-components';
22
import { Colors } from 'theme/theme';
33

44
export const TopicContentWrapper = styled.tr`
@@ -8,8 +8,10 @@ export const TopicContentWrapper = styled.tr`
88
}
99
`;
1010

11-
export const ContentBox = styled.div`
12-
background-color: white;
13-
padding: 20px;
14-
border-radius: 8px;
15-
`;
11+
export const ContentBox = styled.div(
12+
({ theme }) => css`
13+
background-color: ${theme.menuStyles.backgroundColor.normal};
14+
padding: 20px;
15+
border-radius: 8px;
16+
`
17+
);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import theme from 'theme/theme';
33

44
export const LatestVersionWrapper = styled.div`
55
width: 100%;
6-
background-color: ${theme.layout.mainColor};
6+
background-color: ${theme.layout.stuffColor};
77
padding: 16px;
88
display: flex;
99
justify-content: center;

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

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import React from 'react';
22
import { mount, shallow } from 'enzyme';
33
import LatestVersionItem from 'components/Schemas/Details/LatestVersion/LatestVersionItem';
4+
import { ThemeProvider } from 'styled-components';
5+
import theme from 'theme/theme';
46

57
import { jsonSchema, protoSchema } from './fixtures';
68

79
describe('LatestVersionItem', () => {
810
it('renders latest version of json schema', () => {
9-
const wrapper = mount(<LatestVersionItem schema={jsonSchema} />);
11+
const wrapper = mount(
12+
<ThemeProvider theme={theme}>
13+
<LatestVersionItem schema={jsonSchema} />
14+
</ThemeProvider>
15+
);
1016

1117
expect(wrapper.find('div[data-testid="meta-data"]').length).toEqual(1);
1218
expect(
@@ -16,7 +22,11 @@ describe('LatestVersionItem', () => {
1622
});
1723

1824
it('renders latest version of compatibility', () => {
19-
const wrapper = mount(<LatestVersionItem schema={protoSchema} />);
25+
const wrapper = mount(
26+
<ThemeProvider theme={theme}>
27+
<LatestVersionItem schema={protoSchema} />
28+
</ThemeProvider>
29+
);
2030

2131
expect(wrapper.find('div[data-testid="meta-data"]').length).toEqual(1);
2232
expect(
@@ -27,7 +37,11 @@ describe('LatestVersionItem', () => {
2737

2838
it('matches snapshot', () => {
2939
expect(
30-
shallow(<LatestVersionItem schema={jsonSchema} />)
40+
shallow(
41+
<ThemeProvider theme={theme}>
42+
<LatestVersionItem schema={jsonSchema} />
43+
</ThemeProvider>
44+
)
3145
).toMatchSnapshot();
3246
});
3347
});

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

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import React from 'react';
22
import { shallow, mount } from 'enzyme';
33
import SchemaVersion from 'components/Schemas/Details/SchemaVersion/SchemaVersion';
4+
import { ThemeProvider } from 'styled-components';
5+
import theme from 'theme/theme';
46

57
import { versions } from './fixtures';
68

79
describe('SchemaVersion', () => {
810
it('renders versions', () => {
911
const wrapper = mount(
10-
<table>
11-
<tbody>
12-
<SchemaVersion version={versions[0]} />
13-
</tbody>
14-
</table>
12+
<ThemeProvider theme={theme}>
13+
<table>
14+
<tbody>
15+
<SchemaVersion version={versions[0]} />
16+
</tbody>
17+
</table>
18+
</ThemeProvider>
1519
);
1620

1721
expect(wrapper.find('td').length).toEqual(3);
@@ -21,6 +25,12 @@ describe('SchemaVersion', () => {
2125
});
2226

2327
it('matches snapshot', () => {
24-
expect(shallow(<SchemaVersion version={versions[0]} />)).toMatchSnapshot();
28+
expect(
29+
shallow(
30+
<ThemeProvider theme={theme}>
31+
<SchemaVersion version={versions[0]} />
32+
</ThemeProvider>
33+
)
34+
).toMatchSnapshot();
2535
});
2636
});

0 commit comments

Comments
 (0)