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

Update frontend to reflect design changes (#1708)

Browse source 
* adding new colors and changing styles

* removing unneccessary code
This commit is contained in:
NelyDavtyan 2022-03-09 15:15:19 +04:00 • committed by GitHub
parent 11c6ce25ff
commit f7e7bc0e38
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 154 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -21,22 +21,22 @@ exports[`Actions view matches snapshot 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -45,7 +45,7 @@ exports[`Actions view matches snapshot 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -96,7 +96,7 @@ exports[`Actions view matches snapshot 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {
@ -214,22 +214,22 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -238,7 +238,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -289,7 +289,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {
@ -407,22 +407,22 @@ exports[`Actions view matches snapshot when failed 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -431,7 +431,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -482,7 +482,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {
@ -585,22 +585,22 @@ exports[`Actions view matches snapshot when paused 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -609,7 +609,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -660,7 +660,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {
@ -778,22 +778,22 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -802,7 +802,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -853,7 +853,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {
@ -971,22 +971,22 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
border: none;
border-radius: 4px;
white-space: nowrap;
background: #4F4FFF;
color: #FFFFFF;
background: #E8E8FC;
color: #171A1C;
font-size: 14px;
font-weight: 500;
height: 32px;
}
.c1:hover:enabled {
background: #1717CF;
color: #FFFFFF;
background: #D1D1FA;
color: #171A1C;
cursor: pointer;
}
.c1:active:enabled {
background: #1414B8;
color: #FFFFFF;
background: #A3A3F5;
color: #171A1C;
}
.c1:disabled {
@ -995,7 +995,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
}
.c1 a {
color: #FFFFFF;
color: #171A1C;
}
.c1 i {
@ -1046,7 +1046,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
}
.c2 a {
color: #FFFFFF;
color: #171A1C;
}
.c2 i {

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

@ -31,7 +31,7 @@ exports[`Details view matches snapshot 1`] = `
}
.c1 a.is-active {
border-bottom: 1px #4F4FFF solid;
border-bottom: 1px #4C4CFF solid;
color: #171A1C;
}

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

@ -99,6 +99,20 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"hover": "#454F54",
"normal": "#73848C",
},
"danger": Object {
"backgroundColor": Object {
"active": "#B81414",
"disabled": "#F5A3A3",
"hover": "#CF1717",
"normal": "#E51A1A",
},
"color": "#171A1C",
"invertedColors": Object {
"active": "#1717CF",
"hover": "#1717CF",
"normal": "#4C4CFF",
},
},
"fontSize": Object {
"L": "16px",
"M": "14px",
@ -111,15 +125,16 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"primary": Object {
"backgroundColor": Object {
"active": "#1414B8",
"hover": "#1717CF",
"normal": "#4F4FFF",
"active": "#A3A3F5",
"disabled": "#F1F2F3",
"hover": "#D1D1FA",
"normal": "#E8E8FC",
},
"color": "#FFFFFF",
"color": "#171A1C",
"invertedColors": Object {
"active": "#1414B8",
"active": "#1717CF",
"hover": "#1717CF",
"normal": "#4F4FFF",
"normal": "#4C4CFF",
},
},
"secondary": Object {
@ -173,8 +188,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"circleBig": "#FAD1D1",
"circleSmall": "#E51A1A",
},
"messageToggleIconClosed": "#ABB5BA",
"messageToggleIconOpened": "#171A1C",
"messageToggleIcon": Object {
"active": "#1717CF",
"hover": "#A3A3F5",
"normal": "#4C4CFF",
},
"verticalElipsisIcon": "#73848C",
"warningIcon": "#FFDD57",
},
@ -216,14 +234,15 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"menu": Object {
"backgroundColor": Object {
"active": "#E3E6E8",
"hover": "#F1F2F3",
"active": "#F1F2F3",
"hover": "#F9FAFA",
"normal": "#FFFFFF",
},
"chevronIconColor": "#73848C",
"color": Object {
"active": "#171A1C",
"hover": "#73848C",
"active": "#1414B8",
"hover": "#454F54",
"isOpen": "#171A1C",
"normal": "#73848C",
},
"statusIconColor": Object {
@ -257,7 +276,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
"pageLoader": Object {
"borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF",
"borderColor": "#4C4CFF",
},
"pagination": Object {
"backgroundColor": "#FFFFFF",
@ -278,7 +297,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"panelColor": "#FFFFFF",
"primaryTab": Object {
"borderColor": Object {
"active": "#4F4FFF",
"active": "#4C4CFF",
"hover": "transparent",
"nav": "#E3E6E8",
"normal": "transparent",
@ -342,9 +361,10 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
},
"switch": Object {
"checked": "#29A352",
"checked": "#4C4CFF",
"circle": "#FFFFFF",
"unchecked": "#ABB5BA",
"disabled": "#E3E6E8",
"unchecked": "#A3A3F5",
},
"table": Object {
"link": Object {
@ -362,12 +382,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"normal": "#FFFFFF",
},
"color": Object {
"active": "#4F4FFF",
"hover": "#4F4FFF",
"active": "#4C4CFF",
"hover": "#4C4CFF",
"normal": "#73848C",
},
"previewColor": Object {
"normal": "#4F4FFF",
"normal": "#4C4CFF",
},
},
"tr": Object {
@ -440,7 +460,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
},
},
"viewer": Object {
"wrapper": "#f9fafa",
"wrapper": "#F9FAFA",
},
}
}

8
kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts
View file

@ -1,8 +1,10 @@
import styled, { css } from 'styled-components';
import { ServerStatus } from 'generated-sources';
export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
({ theme }) => css`
export const Wrapper = styled.li.attrs({ role: 'menuitem' })<{
isOpen: boolean;
}>(
({ theme, isOpen }) => css`
font-size: 14px;
font-weight: 500;
user-select: none;
@ -18,7 +20,7 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
margin: 0;
line-height: 20px;
align-items: center;
color: ${theme.menu.color.normal};
color: ${isOpen ? theme.menu.color.isOpen : theme.menu.color.normal};
background-color: ${theme.menu.backgroundColor.normal};
&:hover {

2
kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx
View file

@ -16,7 +16,7 @@ const ClusterTab: React.FC<ClusterTabProps> = ({
isOpen,
toggleClusterMenu,
}) => (
<S.Wrapper onClick={toggleClusterMenu}>
<S.Wrapper onClick={toggleClusterMenu} isOpen>
<S.Title title={title}>{title}</S.Title>
<S.StatusIconWrapper>

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

@ -63,7 +63,7 @@ exports[`Details when it has readonly flag does not render the Action button a T
}
.c2 a.is-active {
border-bottom: 1px #4F4FFF solid;
border-bottom: 1px #4C4CFF solid;
color: #171A1C;
}

10
kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts Normal file
View file

@ -0,0 +1,10 @@
import styled from 'styled-components';
export const Svg = styled.svg`
& > path {
fill: ${({ theme }) => theme.icons.messageToggleIcon.normal};
&:hover {
fill: ${({ theme }) => theme.icons.messageToggleIcon.hover};
}
}
`;

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

@ -1,14 +1,14 @@
import React from 'react';
import { useTheme } from 'styled-components';
import * as S from 'components/common/Icons/MessageToggleIcon.styled';
interface Props {
isOpen: boolean;
}
const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
const theme = useTheme();
if (isOpen) {
return (
<svg
<S.Svg
width="16"
height="16"
viewBox="0 0 16 16"
@ -19,13 +19,12 @@ 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={theme.icons.messageToggleIconOpened}
/>
</svg>
</S.Svg>
);
}
return (
<svg
<S.Svg
width="16"
height="16"
viewBox="0 0 16 16"
@ -36,9 +35,8 @@ 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={theme.icons.messageToggleIconClosed}
/>
</svg>
</S.Svg>
);
};

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

@ -2,7 +2,7 @@
export const Colors = {
neutral: {
'0': '#FFFFFF',
'3': '#f9fafa',
'3': '#F9FAFA',
'5': '#F1F2F3',
'10': '#E3E6E8',
'15': '#D5DADD',
@ -28,14 +28,19 @@ export const Colors = {
'60': '#29A352',
},
brand: {
'5': '#E8E8FC',
'10': '#D1D1FA',
'20': '#A3A3F5',
'50': '#4F4FFF',
'55': '#1717CF',
'60': '#1414B8',
'50': '#4C4CFF',
'60': '#1717CF',
'70': '#1414B8',
},
red: {
'10': '#FAD1D1',
'20': '#F5A3A3',
'50': '#E51A1A',
'55': '#CF1717',
'60': '#B81414',
},
yellow: {
'10': '#FFEECC',
@ -95,14 +100,15 @@ const theme = {
button: {
primary: {
backgroundColor: {
normal: Colors.brand[50],
hover: Colors.brand[55],
active: Colors.brand[60],
normal: Colors.brand[5],
hover: Colors.brand[10],
active: Colors.brand[20],
disabled: Colors.neutral[5],
},
color: Colors.neutral[0],
color: Colors.neutral[90],
invertedColors: {
normal: Colors.brand[50],
hover: Colors.brand[55],
hover: Colors.brand[60],
active: Colors.brand[60],
},
},
@ -119,6 +125,20 @@ const theme = {
active: Colors.neutral[90],
},
},
danger: {
backgroundColor: {
normal: Colors.red[50],
hover: Colors.red[55],
active: Colors.red[60],
disabled: Colors.red[20],
},
color: Colors.neutral[90],
invertedColors: {
normal: Colors.brand[50],
hover: Colors.brand[60],
active: Colors.brand[60],
},
},
height: {
S: '24px',
M: '32px',
@ -138,13 +158,14 @@ const theme = {
menu: {
backgroundColor: {
normal: Colors.neutral[0],
hover: Colors.neutral[5],
active: Colors.neutral[10],
hover: Colors.neutral[3],
active: Colors.neutral[5],
},
color: {
normal: Colors.neutral[50],
hover: Colors.neutral[50],
active: Colors.neutral[90],
hover: Colors.neutral[70],
active: Colors.brand[70],
isOpen: Colors.neutral[90],
},
statusIconColor: {
online: Colors.green[40],
@ -330,9 +351,10 @@ const theme = {
},
},
switch: {
unchecked: Colors.neutral[30],
checked: Colors.green[60],
unchecked: Colors.brand[20],
checked: Colors.brand[50],
circle: Colors.neutral[0],
disabled: Colors.neutral[10],
},
pageLoader: {
borderColor: Colors.brand[50],
@ -398,8 +420,11 @@ const theme = {
icons: {
closeIcon: Colors.neutral[30],
warningIcon: Colors.yellow[20],
messageToggleIconOpened: Colors.neutral[90],
messageToggleIconClosed: Colors.neutral[30],
messageToggleIcon: {
normal: Colors.brand[50],
hover: Colors.brand[20],
active: Colors.brand[60],
},
verticalElipsisIcon: Colors.neutral[50],
liveIcon: {
circleBig: Colors.red[10],