FE: UX: Update color palette (#158)

kafbat · Mar 1, 2024 · 3608b26 · 3608b26
1 parent 481df49
commit 3608b26
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 40 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -5,8 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Favicons -->
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.ico" sizes="any" />
-    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/icon.svg" type="image/svg+xml" />
+    <link rel="icon" href="<%= PUBLIC_PATH %>/favicon/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="<%= PUBLIC_PATH %>/favicon/apple-touch-icon.png" />
     <link rel="manifest" href="<%= PUBLIC_PATH %>/manifest.json" />
 

diff --git a/frontend/public/favicon/favicon.ico b/frontend/public/favicon/favicon.ico
diff --git a/frontend/public/favicon/icon.svg → frontend/public/favicon/favicon.svg b/frontend/public/favicon/icon.svg → frontend/public/favicon/favicon.svg
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
@@ -50,7 +50,7 @@ const App: React.FC = () => {
     <QueryClientProvider client={queryClient}>
       <GlobalSettingsProvider>
         <ThemeProvider theme={isDarkMode ? darkTheme : theme}>
-          <Suspense fallback={<PageLoader />}>
+          <Suspense fallback={<PageLoader fullSize />}>
             <UserInfoRolesAccessProvider>
               <ConfirmContextProvider>
                 <GlobalCSS />

diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
@@ -130,18 +130,20 @@ export const Hyperlink = styled(Link)(
     align-items: center;
     gap: 8px;
 
-    margin: 0;
+    margin: 0 0 0 8px;
     padding: 0.5rem 0.75rem;
 
     font-family: Inter, sans-serif;
     font-style: normal;
     font-weight: bold;
-    font-size: 12px;
+    font-size: 22px;
     line-height: 16px;
     color: ${theme.default.color.normal};
+
     &:hover {
       color: ${theme.default.color.normal};
     }
+
     text-decoration: none;
     word-break: break-word;
     cursor: pointer;

diff --git a/frontend/src/components/NavBar/NavBar.tsx b/frontend/src/components/NavBar/NavBar.tsx
@@ -69,7 +69,7 @@ const NavBar: React.FC<Props> = ({ onBurgerClick }) => {
 
           <S.Hyperlink to="/">
             <Logo />
-            Kafbat UI
+            kafbat UI
           </S.Hyperlink>
 
           <S.NavbarItem>

diff --git a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
@@ -26,7 +26,7 @@ describe('NavBar', () => {
   it('correctly renders header', () => {
     const header = screen.getByLabelText('Page Header');
     expect(header).toBeInTheDocument();
-    expect(within(header).getByText('Kafbat UI')).toBeInTheDocument();
+    expect(within(header).getByText('kafbat UI')).toBeInTheDocument();
     expect(within(header).getAllByRole('separator').length).toEqual(3);
     expect(
       within(header).getByRole('button', burgerButtonOptions)

diff --git a/frontend/src/components/common/Logo/Logo.styled.ts b/frontend/src/components/common/Logo/Logo.styled.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Logo = styled.svg`
+  fill: ${({ theme }) => theme.logo.color};
+`;
diff --git a/frontend/src/components/common/Logo/Logo.tsx b/frontend/src/components/common/Logo/Logo.tsx
@@ -1,19 +1,18 @@
 import React from 'react';
 
+import * as S from './Logo.styled';
+
 const Logo: React.FC = () => {
   return (
-    <svg
+    <S.Logo
       width="23"
       height="30"
       viewBox="0 0 23 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M2.17668 0C2.17668 0 8.45218 9.02115 19.6155 13.3524C19.6155 13.3524 27.0635 7.06532 19.862 16.1041C12.6605 25.1428 1.6961 30.617 2.17668 29.9444C3.60584 27.9442 8.31948 24.1222 5.91024 21.7649C10.6395 17.1375 0 14.0868 0 14.0868C2.75705 8.06572 2.17668 0 2.17668 0Z"
-        fill="#4F4FFF"
-      />
-    </svg>
+      <path d="M1.9874 0.5C1.9874 0.5 7.7172 8.91974 17.9098 12.9622C17.9098 12.9622 24.7102 7.0943 18.1349 15.5305C11.5596 23.9666 1.54861 29.0758 1.9874 28.4481C3.29229 26.5813 7.59605 23.014 5.3963 20.8139C9.71432 16.495 0 13.6477 0 13.6477C2.51731 8.02801 1.9874 0.5 1.9874 0.5Z" />
+    </S.Logo>
   );
 };
 

diff --git a/frontend/src/components/common/PageLoader/PageLoader.styled.ts b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
@@ -1,10 +1,15 @@
 import styled from 'styled-components';
 
-export const Wrapper = styled.div`
+export interface PageLoaderProps {
+  fullSize?: boolean;
+}
+
+export const Wrapper = styled.div<PageLoaderProps>`
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-top: 15%;
   height: 100%;
   width: 100%;
+  background-color: ${({ theme }) => theme.default.backgroundColor};
+  ${({ fullSize }) => (fullSize ? `min-height: 100vh;` : 'padding-top: 15%;')}
 `;
diff --git a/frontend/src/components/common/PageLoader/PageLoader.tsx b/frontend/src/components/common/PageLoader/PageLoader.tsx
@@ -2,9 +2,10 @@ import React from 'react';
 import Spinner from 'components/common/Spinner/Spinner';
 
 import * as S from './PageLoader.styled';
+import { PageLoaderProps } from './PageLoader.styled';
 
-const PageLoader: React.FC = () => (
-  <S.Wrapper>
+const PageLoader: React.FC<PageLoaderProps> = ({ fullSize }) => (
+  <S.Wrapper fullSize={fullSize}>
     <Spinner />
   </S.Wrapper>
 );

diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
@@ -35,15 +35,15 @@ const Colors = {
     '60': '#29A352',
   },
   brand: {
-    '5': '#E8E8FC',
-    '10': '#D1D1FA',
-    '15': '#B8BEF9',
-    '20': '#A3A3F5',
-    '30': '#7E7EF1',
-    '40': '#6666FF',
-    '50': '#4C4CFF',
-    '60': '#1717CF',
-    '70': '#1414B8',
+    '5': '#F1F2F3',
+    '10': '#E3E6E8',
+    '15': '#D5DADD',
+    '20': '#C7CED1',
+    '30': '#ABB5BA',
+    '40': '#8F9CA3',
+    '50': '#2F3639',
+    '60': '#22282A',
+    '70': '#171A1C',
   },
   red: {
     '10': '#FAD1D1',
@@ -313,6 +313,9 @@ const baseTheme = {
 
 export const theme = {
   ...baseTheme,
+  logo: {
+    color: Colors.brand[70],
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[30],
@@ -389,8 +392,8 @@ export const theme = {
     primary: {
       backgroundColor: {
         normal: Colors.brand[50],
-        hover: Colors.brand[60],
-        active: Colors.brand[70],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[5],
       },
       color: {
@@ -756,6 +759,9 @@ export type ThemeType = typeof theme;
 
 export const darkTheme: ThemeType = {
   ...baseTheme,
+  logo: {
+    color: '#FDFDFD',
+  },
   version: {
     currentVersion: {
       color: Colors.neutral[50],
@@ -831,13 +837,13 @@ export const darkTheme: ThemeType = {
   button: {
     primary: {
       backgroundColor: {
-        normal: Colors.brand[30],
-        hover: Colors.brand[20],
-        active: Colors.brand[10],
-        disabled: Colors.neutral[75],
+        normal: Colors.brand[10],
+        hover: Colors.brand[5],
+        active: Colors.brand[20],
+        disabled: Colors.brand[60],
       },
       color: {
-        normal: Colors.neutral[0],
+        normal: Colors.neutral[70],
         disabled: Colors.neutral[60],
       },
       invertedColors: {
@@ -848,9 +854,9 @@ export const darkTheme: ThemeType = {
     },
     secondary: {
       backgroundColor: {
-        normal: Colors.blue[80],
-        hover: Colors.blue[70],
-        active: Colors.blue[60],
+        normal: Colors.brand[50],
+        hover: Colors.brand[70],
+        active: Colors.brand[60],
         disabled: Colors.neutral[75],
       },
       color: {