Update frontend to reflect design changes (#1708)

* adding new colors and changing styles

* removing unneccessary code

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 {

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

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

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 {

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

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

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

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};
+    }
+  }
+`;

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

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],