From f7e7bc0e38271c8cd21ac0d6108686ed6535be70 Mon Sep 17 00:00:00 2001 From: NelyDavtyan <96067981+NelyDavtyan@users.noreply.github.com> Date: Wed, 9 Mar 2022 15:15:19 +0400 Subject: [PATCH] Update frontend to reflect design changes (#1708) * adding new colors and changing styles * removing unneccessary code --- .../__snapshots__/Actions.spec.tsx.snap | 96 +++++++++---------- .../__snapshots__/Details.spec.tsx.snap | 2 +- .../__snapshots__/ListItem.spec.tsx.snap | 60 ++++++++---- .../Nav/ClusterTab/ClusterTab.styled.ts | 8 +- .../components/Nav/ClusterTab/ClusterTab.tsx | 2 +- .../__snapshots__/Details.spec.tsx.snap | 2 +- .../common/Icons/MessageToggleIcon.styled.ts | 10 ++ .../common/Icons/MessageToggleIcon.tsx | 14 ++- kafka-ui-react-app/src/theme/theme.ts | 59 ++++++++---- 9 files changed, 154 insertions(+), 99 deletions(-) create mode 100644 kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts 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 14b0ba8d8c..fa7c98dc99 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 @@ -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 { 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 b073bf54ac..4787b68be3 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 @@ -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; } 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 683f1e9cc1..f6a89e6bab 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 @@ -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", }, } } diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts index 082cca5123..a01434b91a 100644 --- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts +++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.styled.ts @@ -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 { diff --git a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx index 98cded2ae6..2e6309d4ea 100644 --- a/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx +++ b/kafka-ui-react-app/src/components/Nav/ClusterTab/ClusterTab.tsx @@ -16,7 +16,7 @@ const ClusterTab: React.FC = ({ isOpen, toggleClusterMenu, }) => ( - + {title} 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 96cc3d9fae..7a17d87086 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 @@ -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; } diff --git a/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts b/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts new file mode 100644 index 0000000000..d779c86fd7 --- /dev/null +++ b/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.styled.ts @@ -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}; + } + } +`; 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 e49f6dbfc7..a71d868719 100644 --- a/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx +++ b/kafka-ui-react-app/src/components/common/Icons/MessageToggleIcon.tsx @@ -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 = ({ 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={theme.icons.messageToggleIconOpened} /> - + ); } return ( - = ({ 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} /> - + ); }; diff --git a/kafka-ui-react-app/src/theme/theme.ts b/kafka-ui-react-app/src/theme/theme.ts index 8d690a1123..eaf76ec953 100644 --- a/kafka-ui-react-app/src/theme/theme.ts +++ b/kafka-ui-react-app/src/theme/theme.ts @@ -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],