ShaneBerhoff · TheMaxRob · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
diff --git a/client/index.html b/client/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/geoChatLogo.png" />
+    <link rel="icon" type="image/png" href="/geoChatLogoP1.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
     <!-- Minimal fallback -->

diff --git a/client/public/geoChatLogo.png b/client/public/geoChatLogo.png
diff --git a/client/public/geoChatLogoBlack.png b/client/public/geoChatLogoBlack.png
diff --git a/client/public/geoChatLogoP1.png b/client/public/geoChatLogoP1.png
diff --git a/client/public/geoChatLogoP3.png b/client/public/geoChatLogoP3.png
diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -9,7 +9,7 @@ import { HelmetProvider } from "react-helmet-async";
 import Countdown from "./pages/Countdown";
 
 function App() {
-  const launchDate = new Date(2024, 8, 28, 12, 0, 0);
+  const launchDate = new Date(2024, 9, 28, 12, 0, 0);
   const [isLaunched, setIsLaunched] = useState(false);
 
   return (

diff --git a/client/src/components/Loading.jsx b/client/src/components/Loading.jsx
@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import { useLogo } from '../hooks/useLogo';
 
 const Loading = () => {
   const [progress, setProgress] = useState(0);
+  const logoUrl = useLogo();
 
   useEffect(() => {
     const updateInterval = 8;
@@ -20,7 +22,7 @@ const Loading = () => {
     <div className="flex flex-col items-center justify-center min-h-screen w-full bg-primary-darker">
       <div className="w-[350px] h-[350px] overflow-hidden">
         <img
-          src="/geoChatLogo.png"
+          src={logoUrl}
           alt="Loading Globe"
           className="w-full h-full object-cover"
           style={{

diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx
@@ -2,10 +2,12 @@ import ThemeSelector from "./ThemeSelector";
 import FontSelector from "./FontSelector";
 import LocationCheck from "./LocationCheck";
 import { useState } from "react";
+import { useLogo } from "../hooks/useLogo";
 
 const NavBar = () => {
   const [navIsOpen, setNavIsOpen] = useState(false);
   const [propsIsOpen, setPropsIsOpen] = useState(false);
+  const logoUrl = useLogo();
 
   return (
     <div className="w-full h-min flex flex-row items-center px-4 pb-4 justify-between">
@@ -21,7 +23,7 @@ const NavBar = () => {
           aria-label={navIsOpen ? "Close navigation menu" : "Open navigation menu"}
           aria-expanded={navIsOpen}
         >
-          <img src='/geoChatLogo.png' alt='geoChat Logo' className="h-8 w-8" />
+          <img src={logoUrl} alt='geoChat Logo' className="h-8 w-8" />
         </button>
         <div 
             className={`flex items-center transition-all duration-500 ease-in-out space-x-4 overflow-hidden ${navIsOpen ? 'max-w-32 ml-4' : 'max-w-0 opacity-0 ml-0'}`}

diff --git a/client/src/hooks/useLogo.jsx b/client/src/hooks/useLogo.jsx
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+
+export const useLogo = () => {
+  const [logoUrl, setLogoUrl] = useState(() => {
+    // Initialize with current theme
+    const currentTheme = document.documentElement.className;
+    if (currentTheme.includes('phosphor-P3')) return '/geoChatLogoP3.png';
+    return '/geoChatLogoP1.png';
+  });
+
+  useEffect(() => {
+    const updateLogo = () => {
+      const currentTheme = document.documentElement.className;
+      if (currentTheme.includes('phosphor-P3')) {
+        setLogoUrl('/geoChatLogoP3.png');
+      } else {
+        setLogoUrl('/geoChatLogoP1.png');
+      }
+    };
+
+    const observer = new MutationObserver(updateLogo);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+
+    return () => observer.disconnect();
+  }, []);
+
+  return logoUrl;
+};
diff --git a/client/src/pages/Countdown.jsx b/client/src/pages/Countdown.jsx
@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from "react";
 import { useGlitch } from "react-powerglitch";
+import { useLogo } from "../hooks/useLogo";
 
 const Countdown = ({ onLaunch, launchDate }) => {
     const [timeRemaining, setTimeRemaining] = useState("");
     const [shouldDisplay, setShouldDisplay] = useState(true);
+    const logoUrl = useLogo();
     const glitch = useGlitch({
         "timing": {
             "duration": 6000
@@ -57,7 +59,7 @@ const Countdown = ({ onLaunch, launchDate }) => {
 
     return (
         <div className="fixed inset-0 flex justify-center items-center bg-primary-darker text-primary flex-col space-y-10 z-50 transition-opacity duration-1000">
-            <img ref={glitch.ref} src='../geoChatLogo.png' alt='Logo' className="w-32 h-32" />
+            <img ref={glitch.ref} src={logoUrl} alt='Logo' className="w-32 h-32" />
             <div className="text-6xl">geoChat</div>
             <div className="text-5xl text-primary-dark">
                 {timeRemaining}