Separate small and big logo

karlosos · Nov 22, 2023 · aaa21be · aaa21be
1 parent e3773b5
commit aaa21be
Show file tree

Hide file tree

Showing 10 changed files with 1,460 additions and 2 deletions.
diff --git a/public/favicon-24px.png b/public/favicon-24px.png
diff --git a/public/favicon-280px.png b/public/favicon-280px.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logo-original.png b/public/logo-original.png
diff --git a/public/logo-original.svg b/public/logo-original.svg
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/app/layout/header/Header.jsx b/src/app/layout/header/Header.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import { HeaderWrapper, Title } from './Header.style';
+import { HeaderWrapper, Logo, Title } from './Header.style';
 
 const Header = () => {
     return (
         <HeaderWrapper>
-            <p style={{ fontSize: '18px' }}>📚</p>
+            <Logo><img src='./favicon.svg' width='24px' alt='logo'/></Logo>
             <Title>Kindle Clippings Manager</Title>
             {/* <SearchBar icon='search' placeholder='Search...' value="" onChange={() => undefined}/> */}
         </HeaderWrapper>

diff --git a/src/app/layout/header/Header.style.jsx b/src/app/layout/header/Header.style.jsx
@@ -30,6 +30,12 @@ export const Title = styled('h1')`
     }
 `;
 
+export const Logo = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
 export const SearchBar = styled(Input)`
     justify-self: flex-end;
 `;