diff --git a/client/index.html b/client/index.html index 9641226..334bf42 100644 --- a/client/index.html +++ b/client/index.html @@ -2,7 +2,7 @@ - + diff --git a/client/public/geoChatLogo.png b/client/public/geoChatLogo.png deleted file mode 100644 index 8e20034..0000000 Binary files a/client/public/geoChatLogo.png and /dev/null differ diff --git a/client/public/geoChatLogoBlack.png b/client/public/geoChatLogoBlack.png new file mode 100644 index 0000000..c44a534 Binary files /dev/null and b/client/public/geoChatLogoBlack.png differ diff --git a/client/public/geoChatLogoP1.png b/client/public/geoChatLogoP1.png new file mode 100644 index 0000000..a52d381 Binary files /dev/null and b/client/public/geoChatLogoP1.png differ diff --git a/client/public/geoChatLogoP3.png b/client/public/geoChatLogoP3.png new file mode 100644 index 0000000..7a82cd8 Binary files /dev/null and b/client/public/geoChatLogoP3.png differ diff --git a/client/src/App.jsx b/client/src/App.jsx index c5355bc..758f66b 100644 --- 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 index 31d94d8..06bb647 100644 --- 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 = () => {
Loading Globe { const [navIsOpen, setNavIsOpen] = useState(false); const [propsIsOpen, setPropsIsOpen] = useState(false); + const logoUrl = useLogo(); return (
@@ -21,7 +23,7 @@ const NavBar = () => { aria-label={navIsOpen ? "Close navigation menu" : "Open navigation menu"} aria-expanded={navIsOpen} > - geoChat Logo + geoChat Logo
{ + 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; +}; \ No newline at end of file diff --git a/client/src/pages/Countdown.jsx b/client/src/pages/Countdown.jsx index 006479a..9e6e31a 100644 --- 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 (
- Logo + Logo
geoChat
{timeRemaining}