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: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -45,7 +45,7 @@ exports[`Actions view matches snapshot 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -96,7 +96,7 @@ exports[`Actions view matches snapshot 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .c2 i {
@ -214,22 +214,22 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
border: none; border: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -238,7 +238,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -289,7 +289,7 @@ exports[`Actions view matches snapshot when deleting connector 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .c2 i {
@ -407,22 +407,22 @@ exports[`Actions view matches snapshot when failed 1`] = `
border: none; border: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -431,7 +431,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -482,7 +482,7 @@ exports[`Actions view matches snapshot when failed 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .c2 i {
@ -585,22 +585,22 @@ exports[`Actions view matches snapshot when paused 1`] = `
border: none; border: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -609,7 +609,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -660,7 +660,7 @@ exports[`Actions view matches snapshot when paused 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .c2 i {
@ -778,22 +778,22 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
border: none; border: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -802,7 +802,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -853,7 +853,7 @@ exports[`Actions view matches snapshot when running connector action 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .c2 i {
@ -971,22 +971,22 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
border: none; border: none;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: #4F4FFF; background: #E8E8FC;
color: #FFFFFF; color: #171A1C;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
height: 32px; height: 32px;
} }
.c1:hover:enabled { .c1:hover:enabled {
background: #1717CF; background: #D1D1FA;
color: #FFFFFF; color: #171A1C;
cursor: pointer; cursor: pointer;
} }
.c1:active:enabled { .c1:active:enabled {
background: #1414B8; background: #A3A3F5;
color: #FFFFFF; color: #171A1C;
} }
.c1:disabled { .c1:disabled {
@ -995,7 +995,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
} }
.c1 a { .c1 a {
color: #FFFFFF; color: #171A1C;
} }
.c1 i { .c1 i {
@ -1046,7 +1046,7 @@ exports[`Actions view matches snapshot when unassigned 1`] = `
} }
.c2 a { .c2 a {
color: #FFFFFF; color: #171A1C;
} }
.c2 i { .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 { .c1 a.is-active {
border-bottom: 1px #4F4FFF solid; border-bottom: 1px #4C4CFF solid;
color: #171A1C; 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", "hover": "#454F54",
"normal": "#73848C", "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 { "fontSize": Object {
"L": "16px", "L": "16px",
"M": "14px", "M": "14px",
@ -111,15 +125,16 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}, },
"primary": Object { "primary": Object {
"backgroundColor": Object { "backgroundColor": Object {
"active": "#1414B8", "active": "#A3A3F5",
"hover": "#1717CF", "disabled": "#F1F2F3",
"normal": "#4F4FFF", "hover": "#D1D1FA",
"normal": "#E8E8FC",
}, },
"color": "#FFFFFF", "color": "#171A1C",
"invertedColors": Object { "invertedColors": Object {
"active": "#1414B8", "active": "#1717CF",
"hover": "#1717CF", "hover": "#1717CF",
"normal": "#4F4FFF", "normal": "#4C4CFF",
}, },
}, },
"secondary": Object { "secondary": Object {
@ -173,8 +188,11 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"circleBig": "#FAD1D1", "circleBig": "#FAD1D1",
"circleSmall": "#E51A1A", "circleSmall": "#E51A1A",
}, },
"messageToggleIconClosed": "#ABB5BA", "messageToggleIcon": Object {
"messageToggleIconOpened": "#171A1C", "active": "#1717CF",
"hover": "#A3A3F5",
"normal": "#4C4CFF",
},
"verticalElipsisIcon": "#73848C", "verticalElipsisIcon": "#73848C",
"warningIcon": "#FFDD57", "warningIcon": "#FFDD57",
}, },
@ -216,14 +234,15 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}, },
"menu": Object { "menu": Object {
"backgroundColor": Object { "backgroundColor": Object {
"active": "#E3E6E8", "active": "#F1F2F3",
"hover": "#F1F2F3", "hover": "#F9FAFA",
"normal": "#FFFFFF", "normal": "#FFFFFF",
}, },
"chevronIconColor": "#73848C", "chevronIconColor": "#73848C",
"color": Object { "color": Object {
"active": "#171A1C", "active": "#1414B8",
"hover": "#73848C", "hover": "#454F54",
"isOpen": "#171A1C",
"normal": "#73848C", "normal": "#73848C",
}, },
"statusIconColor": Object { "statusIconColor": Object {
@ -257,7 +276,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}, },
"pageLoader": Object { "pageLoader": Object {
"borderBottomColor": "#FFFFFF", "borderBottomColor": "#FFFFFF",
"borderColor": "#4F4FFF", "borderColor": "#4C4CFF",
}, },
"pagination": Object { "pagination": Object {
"backgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF",
@ -278,7 +297,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"panelColor": "#FFFFFF", "panelColor": "#FFFFFF",
"primaryTab": Object { "primaryTab": Object {
"borderColor": Object { "borderColor": Object {
"active": "#4F4FFF", "active": "#4C4CFF",
"hover": "transparent", "hover": "transparent",
"nav": "#E3E6E8", "nav": "#E3E6E8",
"normal": "transparent", "normal": "transparent",
@ -342,9 +361,10 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}, },
}, },
"switch": Object { "switch": Object {
"checked": "#29A352", "checked": "#4C4CFF",
"circle": "#FFFFFF", "circle": "#FFFFFF",
"unchecked": "#ABB5BA", "disabled": "#E3E6E8",
"unchecked": "#A3A3F5",
}, },
"table": Object { "table": Object {
"link": Object { "link": Object {
@ -362,12 +382,12 @@ exports[`Connectors ListItem matches snapshot 1`] = `
"normal": "#FFFFFF", "normal": "#FFFFFF",
}, },
"color": Object { "color": Object {
"active": "#4F4FFF", "active": "#4C4CFF",
"hover": "#4F4FFF", "hover": "#4C4CFF",
"normal": "#73848C", "normal": "#73848C",
}, },
"previewColor": Object { "previewColor": Object {
"normal": "#4F4FFF", "normal": "#4C4CFF",
}, },
}, },
"tr": Object { "tr": Object {
@ -440,7 +460,7 @@ exports[`Connectors ListItem matches snapshot 1`] = `
}, },
}, },
"viewer": Object { "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 styled, { css } from 'styled-components';
import { ServerStatus } from 'generated-sources'; import { ServerStatus } from 'generated-sources';
export const Wrapper = styled.li.attrs({ role: 'menuitem' })( export const Wrapper = styled.li.attrs({ role: 'menuitem' })<{
({ theme }) => css` isOpen: boolean;
}>(
({ theme, isOpen }) => css`
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
user-select: none; user-select: none;
@ -18,7 +20,7 @@ export const Wrapper = styled.li.attrs({ role: 'menuitem' })(
margin: 0; margin: 0;
line-height: 20px; line-height: 20px;
align-items: center; align-items: center;
color: ${theme.menu.color.normal}; color: ${isOpen ? theme.menu.color.isOpen : theme.menu.color.normal};
background-color: ${theme.menu.backgroundColor.normal}; background-color: ${theme.menu.backgroundColor.normal};
&:hover { &:hover {

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

@ -16,7 +16,7 @@ const ClusterTab: React.FC<ClusterTabProps> = ({
isOpen, isOpen,
toggleClusterMenu, toggleClusterMenu,
}) => ( }) => (
<S.Wrapper onClick={toggleClusterMenu}> <S.Wrapper onClick={toggleClusterMenu} isOpen>
<S.Title title={title}>{title}</S.Title> <S.Title title={title}>{title}</S.Title>
<S.StatusIconWrapper> <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 { .c2 a.is-active {
border-bottom: 1px #4F4FFF solid; border-bottom: 1px #4C4CFF solid;
color: #171A1C; 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 React from 'react';
import { useTheme } from 'styled-components'; import * as S from 'components/common/Icons/MessageToggleIcon.styled';
interface Props { interface Props {
isOpen: boolean; isOpen: boolean;
} }
const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => { const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
const theme = useTheme();
if (isOpen) { if (isOpen) {
return ( return (
<svg <S.Svg
width="16" width="16"
height="16" height="16"
viewBox="0 0 16 16" viewBox="0 0 16 16"
@ -19,13 +19,12 @@ const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
fillRule="evenodd" fillRule="evenodd"
clipRule="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" 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 ( return (
<svg <S.Svg
width="16" width="16"
height="16" height="16"
viewBox="0 0 16 16" viewBox="0 0 16 16"
@ -36,9 +35,8 @@ const MessageToggleIcon: React.FC<Props> = ({ isOpen }) => {
fillRule="evenodd" fillRule="evenodd"
clipRule="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" 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 = { export const Colors = {
neutral: { neutral: {
'0': '#FFFFFF', '0': '#FFFFFF',
'3': '#f9fafa', '3': '#F9FAFA',
'5': '#F1F2F3', '5': '#F1F2F3',
'10': '#E3E6E8', '10': '#E3E6E8',
'15': '#D5DADD', '15': '#D5DADD',
@ -28,14 +28,19 @@ export const Colors = {
'60': '#29A352', '60': '#29A352',
}, },
brand: { brand: {
'5': '#E8E8FC',
'10': '#D1D1FA',
'20': '#A3A3F5', '20': '#A3A3F5',
'50': '#4F4FFF', '50': '#4C4CFF',
'55': '#1717CF', '60': '#1717CF',
'60': '#1414B8', '70': '#1414B8',
}, },
red: { red: {
'10': '#FAD1D1', '10': '#FAD1D1',
'20': '#F5A3A3',
'50': '#E51A1A', '50': '#E51A1A',
'55': '#CF1717',
'60': '#B81414',
}, },
yellow: { yellow: {
'10': '#FFEECC', '10': '#FFEECC',
@ -95,14 +100,15 @@ const theme = {
button: { button: {
primary: { primary: {
backgroundColor: { backgroundColor: {
normal: Colors.brand[50], normal: Colors.brand[5],
hover: Colors.brand[55], hover: Colors.brand[10],
active: Colors.brand[60], active: Colors.brand[20],
disabled: Colors.neutral[5],
}, },
color: Colors.neutral[0], color: Colors.neutral[90],
invertedColors: { invertedColors: {
normal: Colors.brand[50], normal: Colors.brand[50],
hover: Colors.brand[55], hover: Colors.brand[60],
active: Colors.brand[60], active: Colors.brand[60],
}, },
}, },
@ -119,6 +125,20 @@ const theme = {
active: Colors.neutral[90], 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: { height: {
S: '24px', S: '24px',
M: '32px', M: '32px',
@ -138,13 +158,14 @@ const theme = {
menu: { menu: {
backgroundColor: { backgroundColor: {
normal: Colors.neutral[0], normal: Colors.neutral[0],
hover: Colors.neutral[5], hover: Colors.neutral[3],
active: Colors.neutral[10], active: Colors.neutral[5],
}, },
color: { color: {
normal: Colors.neutral[50], normal: Colors.neutral[50],
hover: Colors.neutral[50], hover: Colors.neutral[70],
active: Colors.neutral[90], active: Colors.brand[70],
isOpen: Colors.neutral[90],
}, },
statusIconColor: { statusIconColor: {
online: Colors.green[40], online: Colors.green[40],
@ -330,9 +351,10 @@ const theme = {
}, },
}, },
switch: { switch: {
unchecked: Colors.neutral[30], unchecked: Colors.brand[20],
checked: Colors.green[60], checked: Colors.brand[50],
circle: Colors.neutral[0], circle: Colors.neutral[0],
disabled: Colors.neutral[10],
}, },
pageLoader: { pageLoader: {
borderColor: Colors.brand[50], borderColor: Colors.brand[50],
@ -398,8 +420,11 @@ const theme = {
icons: { icons: {
closeIcon: Colors.neutral[30], closeIcon: Colors.neutral[30],
warningIcon: Colors.yellow[20], warningIcon: Colors.yellow[20],
messageToggleIconOpened: Colors.neutral[90], messageToggleIcon: {
messageToggleIconClosed: Colors.neutral[30], normal: Colors.brand[50],
hover: Colors.brand[20],
active: Colors.brand[60],
},
verticalElipsisIcon: Colors.neutral[50], verticalElipsisIcon: Colors.neutral[50],
liveIcon: { liveIcon: {
circleBig: Colors.red[10], circleBig: Colors.red[10],