connect theme toggle

src/app/AuthHTTPWrapper.tsx

@@ -43,7 +43,7 @@ function AuthHTTPWrapper() {
         <AuthWrapper setToken={setToken}>
           { token ? 
             <HTTPProvider token={token}>
-              <UserWrapper/>
+              <UserWrapper toggleTheme={toggleTheme}/>
             </HTTPProvider>
           :
             <LoadingScreen

src/app/UserWrapper.tsx

@@ -6,7 +6,7 @@ import { useUserAPI } from '../providers/pond/userAPI'
 import { useAuth0 } from '@auth0/auth0-react'
 import { or } from '../utils/types'
 import LoadingScreen from './LoadingScreen'
-import { pond } from "protobuf-ts/pond";
+// import { pond } from "protobuf-ts/pond";
 import NavigationContainer from '../navigation/NavigationContainer'
 import { GlobalState, GlobalStateAction, StateProvider } from '../providers/StateContainer'
 import { User } from '../models/user'
@@ -28,14 +28,19 @@ const globalDefault = {
   backgroundTasksComplete: false
 }
 
-export default function UserWrapper() {
+interface Props {
+  toggleTheme: () => void;
+}
+
+export default function UserWrapper(props: Props) {
+  const { toggleTheme } = props;
   const [count, setCount] = useState(0)
   const [loading, setLoading] = useState(false)
   const userAPI = useUserAPI();
   const useAuth = useAuth0();
   const hasFetched = useRef(false);
   // const [user, setUser] = useState<pond.User | undefined>(undefined)
-  const [message, setMessage] = useState("Loading user profile...")
+  // const [message, setMessage] = useState("Loading user profile...")
   const [global, setGlobal] = useState<undefined | GlobalState>(undefined)
 
   let user_id = or(useAuth.user?.sub, "")
@@ -72,14 +77,12 @@ export default function UserWrapper() {
   console.log(loading)
   console.log(global)
   if (loading || !global) return (
-    <LoadingScreen
-      message={message}
-    />
+    <LoadingScreen />
   )
 
   return (
     <StateProvider state={global} reducer={reducer}>
-      <NavigationContainer>
+      <NavigationContainer toggleTheme={toggleTheme}>
         <div>
           <a href="https://vitejs.dev" target="_blank">
               <img src={viteLogo} className="logo" alt="Vite logo" />

src/navigation/NavigationContainer.tsx

@@ -9,13 +9,14 @@ import React, { PropsWithChildren, useState } from "react";
 // import NotificationBanner from "common/NotificationBanner";
 
 interface Props extends PropsWithChildren {
-//   toggleTheme: () => void;
+  toggleTheme: () => void;
 //   teams: Team[];
 //   setTeams: React.Dispatch<React.SetStateAction<Team[]>>;
 }
 
 export default function NavigationContainer(props: Props) {
 //   const { toggleTheme, teams, setTeams } = props;
+  const { toggleTheme } = props;
   const { children } = props;
   const [sideNavigatorOpen, setSideNavigatorOpen] = useState<boolean>(false);
 //   const isMobile = useMobile();
@@ -34,7 +35,7 @@ export default function NavigationContainer(props: Props) {
       <Header
         sideIsOpen={sideNavigatorOpen}
         openSide={openSideNavigator}
-        // toggleTheme={toggleTheme}
+        toggleTheme={toggleTheme}
         // teams={teams}
         // setTeams={setTeams}
       />

src/user/UserMenu.tsx

@@ -67,6 +67,14 @@ export default function UserMenu(props: Props) {
       setLockIsHovered(false);
     };
 
+    useEffect(() => {
+      console.log(theme.palette.mode)
+    }, [theme.palette.mode])
+
+    useEffect(() => {
+      console.log(theme)
+    }, [theme])
+
     const unauthenticatedUserMenu = () => {
       return (
         <React.Fragment>