feat: add small brand logo

cosmology-tech · Jul 15, 2024 · 22ab91b · 22ab91b
1 parent f5ad37c
commit 22ab91b
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 9 deletions.
diff --git a/templates/chain-template/components/common/Header/Header.tsx b/templates/chain-template/components/common/Header/Header.tsx
@@ -15,9 +15,15 @@ interface HeaderProps {
 export const Header = ({ onOpenSidebar }: HeaderProps) => {
   const { theme, setTheme } = useTheme();
   const { isDesktop, isMobile } = useDetectBreakpoints();
-  const brandLogoSrc = useColorModeValue(
-    '/logos/your-logo.svg',
-    '/logos/your-logo-dark.svg'
+
+  const brandLogo = useColorModeValue(
+    '/logos/brand-logo.svg',
+    '/logos/brand-logo-dark.svg'
+  );
+
+  const brandLogoSm = useColorModeValue(
+    '/logos/brand-logo-sm.svg',
+    '/logos/brand-logo-sm-dark.svg'
   );
 
   return (
@@ -30,11 +36,11 @@ export const Header = ({ onOpenSidebar }: HeaderProps) => {
       {!isDesktop && (
         <Link href="/">
           <Image
-            src={brandLogoSrc}
-            alt="cosmology"
+            src={isMobile ? brandLogoSm : brandLogo}
+            alt="your logo"
             width="0"
             height="0"
-            style={{ width: isMobile ? '160px' : '180px', height: 'auto' }}
+            style={{ width: isMobile ? '40px' : '180px', height: 'auto' }}
           />
         </Link>
       )}

diff --git a/templates/chain-template/components/common/Sidebar/Sidebar.tsx b/templates/chain-template/components/common/Sidebar/Sidebar.tsx
@@ -16,8 +16,8 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
   const { isDesktop } = useDetectBreakpoints();
 
   const brandLogoSrc = useColorModeValue(
-    '/logos/your-logo.svg',
-    '/logos/your-logo-dark.svg'
+    '/logos/brand-logo.svg',
+    '/logos/brand-logo-dark.svg'
   );
 
   const desktopSidebar = (
@@ -40,7 +40,7 @@ export const Sidebar = ({ isOpen, onClose }: SidebarProps) => {
       <Link href="/" style={{ marginBottom: '50px' }}>
         <Image
           src={brandLogoSrc}
-          alt="cosmology"
+          alt="your logo"
           width="0"
           height="0"
           style={{ width: '180px', height: 'auto' }}

diff --git a/...-template/public/logos/your-logo-dark.svg → ...template/public/logos/brand-logo-dark.svg b/...-template/public/logos/your-logo-dark.svg → ...template/public/logos/brand-logo-dark.svg
diff --git a/templates/chain-template/public/logos/brand-logo-sm-dark.svg b/templates/chain-template/public/logos/brand-logo-sm-dark.svg
diff --git a/templates/chain-template/public/logos/brand-logo-sm.svg b/templates/chain-template/public/logos/brand-logo-sm.svg
diff --git a/...chain-template/public/logos/your-logo.svg → ...hain-template/public/logos/brand-logo.svg b/...chain-template/public/logos/your-logo.svg → ...hain-template/public/logos/brand-logo.svg