diff --git a/frontend/index.html b/frontend/index.html
index 693664306..0041f6efa 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,8 +5,7 @@
-
-
+
diff --git a/frontend/public/favicon/favicon.ico b/frontend/public/favicon/favicon.ico
deleted file mode 100644
index 2774ebccf..000000000
Binary files a/frontend/public/favicon/favicon.ico and /dev/null differ
diff --git a/frontend/public/favicon/icon.svg b/frontend/public/favicon/favicon.svg
similarity index 77%
rename from frontend/public/favicon/icon.svg
rename to frontend/public/favicon/favicon.svg
index d31960515..fc31bcf4a 100644
--- a/frontend/public/favicon/icon.svg
+++ b/frontend/public/favicon/favicon.svg
@@ -2,14 +2,16 @@
-
-
+
+
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 43abc60bd..f3d6d88cd 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -50,7 +50,7 @@ const App: React.FC = () => {
- }>
+ }>
diff --git a/frontend/src/components/NavBar/NavBar.styled.ts b/frontend/src/components/NavBar/NavBar.styled.ts
index 8c4dd6f5b..d9013dcdd 100644
--- 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
index e025c892c..1a58c7e7b 100644
--- a/frontend/src/components/NavBar/NavBar.tsx
+++ b/frontend/src/components/NavBar/NavBar.tsx
@@ -69,7 +69,7 @@ const NavBar: React.FC = ({ onBurgerClick }) => {
- Kafbat UI
+ kafbat UI
diff --git a/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx b/frontend/src/components/NavBar/__tests__/NavBar.spec.tsx
index 9b3e4528f..a94d941e5 100644
--- 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
new file mode 100644
index 000000000..51d649c62
--- /dev/null
+++ 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
index b209f32b2..d149d6511 100644
--- 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 (
-
+
+
);
};
diff --git a/frontend/src/components/common/PageLoader/PageLoader.styled.ts b/frontend/src/components/common/PageLoader/PageLoader.styled.ts
index f38f21c0b..36c5848e0 100644
--- 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`
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
index 674ab0f0c..b568357dd 100644
--- 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 = () => (
-
+const PageLoader: React.FC = ({ fullSize }) => (
+
);
diff --git a/frontend/src/theme/theme.ts b/frontend/src/theme/theme.ts
index 8426d3c2f..44e19eb5b 100644
--- 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: {