Merge pull request #199 from gruz0/feature/update-logo-and-icon

Update logo and icon

src/app/template.tsx

@@ -1,21 +1,14 @@
-import Image from 'next/image'
 import Link from 'next/link'
+import Logo from '@/components/Logo'
 import ThemeToggle from '@/components/ThemeToggle'
-import CheckMVPLogo from '../../public/CheckMVP-Logo.png'
 
 const Template = ({ children }: { children: React.ReactNode }) => (
   <div className="flex min-h-screen flex-col bg-gray-100 transition-colors duration-300 dark:bg-gray-900">
     <nav className="w-full bg-white shadow-md transition-colors duration-300 dark:bg-gray-800">
       <div className="mx-auto max-w-5xl px-6">
         <div className="flex h-16 items-center justify-between">
           <Link href="/" className="flex items-center space-x-2">
-            <Image
-              src={CheckMVPLogo.src}
-              alt="CheckMVP"
-              width="150"
-              height="40"
-              className="dark:invert"
-            />
+            <Logo />
           </Link>
 
           <div className="flex items-center space-x-4 md:space-x-6">

src/components/IdeaPDFReport.tsx

@@ -775,6 +775,7 @@ const styles = StyleSheet.create({
   },
   logo: {
     textAlign: 'center',
+    marginBottom: '24px',
   },
   title: {
     fontSize: 24,

src/components/Logo.tsx

@@ -0,0 +1,26 @@
+'use client'
+import Image from 'next/image'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import CheckMVPLogoDark from '../../public/CheckMVP-Logo-Dark.svg'
+import CheckMVPLogo from '../../public/CheckMVP-Logo.svg'
+
+export default function Logo() {
+  const { resolvedTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) return null
+
+  return (
+    <Image
+      src={resolvedTheme === 'dark' ? CheckMVPLogo.src : CheckMVPLogoDark.src}
+      alt="CheckMVP"
+      width="150"
+      height="40"
+    />
+  )
+}