theme toggle actually toggles theme; sign-in button actually signs in

src/app/AuthHTTPWrapper.tsx

@@ -11,7 +11,7 @@ import { getThemeType, setThemeType } from '../theme/themeType'
 
 function AuthHTTPWrapper() {
   const [token, setToken] = useState<string | undefined>(undefined)
-  const [palette, setPalette] = useState<Theme>(CreateTheme("dark"));
+  const [palette, setPalette] = useState<Theme>(CreateTheme(getThemeType()));
 
   let url: string | undefined = import.meta.env.VITE_AUTH0_CLIENT_DOMAIN;
   let audience: string | undefined = import.meta.env.VITE_AUTH0_AUDIENCE;

src/app/UserWrapper.tsx

@@ -74,8 +74,6 @@ export default function UserWrapper(props: Props) {
     loadUser()
   }, [loading])
   
-  console.log(loading)
-  console.log(global)
   if (loading || !global) return (
     <LoadingScreen />
   )
@@ -104,6 +102,5 @@ export default function UserWrapper(props: Props) {
         </p>
       </NavigationContainer>
     </StateProvider>
-    
   )
 }

src/common/ThemeIcon.tsx

@@ -6,9 +6,9 @@ import { makeStyles } from "@mui/styles";
 
 const useStyles = makeStyles(() => ({
     darkThemeIcon: {
-        borderRadius: "50%",
-        padding: "1px",
-        backgroundColor: "#003366",
+        // borderRadius: "50%",
+        // padding: "1px",
+        // backgroundColor: "#003366",
         color: "#fefcd7 !important"
     },
     lightThemeIcon: {
@@ -30,13 +30,13 @@ export default function ThemeIcon() {
 
     if (theme.palette.mode === "light") {
         return (
-            <Tooltip title="Switch to Dark Theme" placement="bottom-end">
+            <Tooltip title="Switch to Dark Theme" >
                 {darkThemeIcon()}
             </Tooltip>
         );
     } else {
         return (
-            <Tooltip title="Switch to Light Theme" placement="bottom-end">
+            <Tooltip title="Switch to Light Theme" >
                 {lightThemeIcon()}
             </Tooltip>
         );

src/theme/theme.ts

@@ -20,7 +20,7 @@ function options(themeType: "light" | "dark"): ThemeOptions {
       primary: Colours[getPrimaryColour() as keyof typeof Colours],
       secondary: Colours[getSecondaryColour() as keyof typeof Colours],
       background: Colours.grey,
-      type: themeType,
+      mode: themeType,
       bxt: {
         primaryBlue: "#005bb0",
         lightBlue: "#1a86ec",

src/user/UserMenu.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import UserTeamName from "./UserTeamName";
 import React from "react";
 import ThemeIcon from "../common/ThemeIcon";
+import { useAuth0 } from "@auth0/auth0-react";
 
 const useStyles = makeStyles((theme: Theme) => ({
   userAvatar: {
@@ -49,6 +50,7 @@ export default function UserMenu(props: Props) {
 
     const { toggleTheme } = props;
     const [{ user, team }] = useGlobalState();
+    const { loginWithRedirect } = useAuth0();
     const classes = useStyles();
     const theme = useTheme();
 
@@ -67,6 +69,10 @@ export default function UserMenu(props: Props) {
       setLockIsHovered(false);
     };
 
+    const handleLogin = () => {
+      loginWithRedirect()
+    }
+
     useEffect(() => {
       console.log(theme.palette.mode)
     }, [theme.palette.mode])
@@ -81,7 +87,7 @@ export default function UserMenu(props: Props) {
           <Button
             variant="outlined"
             aria-label="Sign In"
-            // onClick={handleLogin}
+            onClick={handleLogin}
             onMouseEnter={lockHover}
             onMouseLeave={lockNoHover}
             size="small"
@@ -104,6 +110,7 @@ export default function UserMenu(props: Props) {
     if (user.id().length < 1) return unauthenticatedUserMenu()
 
     return (
+      <>
         <Button
           id="tour-user-menu"
           // aria-owns={userMenuIsOpen ? "userMenu" : undefined}
@@ -141,5 +148,9 @@ export default function UserMenu(props: Props) {
             {/* )} */}
           </Box>
       </Button>
+      <IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
+        <ThemeIcon />
+      </IconButton>
+    </>
   )
 }