added theme icon and login button when user is unauthenticated

src/app/UserWrapper.tsx

@@ -19,6 +19,15 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
   };
 };
 
+const globalDefault = {
+  user: User.create(),
+  team: Team.create(),
+  as: "",
+  showErrors: false,
+  userTeamPermissions: [],
+  backgroundTasksComplete: false
+}
+
 export default function UserWrapper() {
   const [count, setCount] = useState(0)
   const [loading, setLoading] = useState(false)
@@ -47,17 +56,13 @@ export default function UserWrapper() {
       })
     }).catch(err => {
       console.log(err.toString())
-      if (err.toString().includes("CORS")) {
-        setMessage("CORS error")
-      } else {
-        setMessage("Loading failed, refresh may help")
-      }
+      setGlobal(globalDefault)
     })
     .finally(() => {
       setLoading(false)
       hasFetched.current = true;
     })
-  }, [])
+  }, [setGlobal, setUser])
   
   useEffect(() => {
     if (loading) return;

src/common/ThemeIcon.tsx

@@ -0,0 +1,44 @@
+import { Tooltip, useTheme } from "@mui/material";
+import DarkThemeIcon from "@mui/icons-material/Brightness3"
+import LightThemeIcon from "@mui/icons-material/Brightness7";
+import classNames from "classnames";
+import { makeStyles } from "@mui/styles";
+
+const useStyles = makeStyles(() => ({
+    darkThemeIcon: {
+        borderRadius: "50%",
+        padding: "1px",
+        backgroundColor: "#003366",
+        color: "#fefcd7 !important"
+    },
+    lightThemeIcon: {
+        color: "#fdb813 !important"
+    }
+}));
+
+export default function ThemeIcon() {
+    const classes = useStyles();
+    const theme = useTheme();
+
+    const lightThemeIcon = () => (
+        <DarkThemeIcon className={classNames(classes.darkThemeIcon)} fontSize="small" />
+    );
+
+    const darkThemeIcon = () => (
+        <LightThemeIcon className={classNames(classes.lightThemeIcon)} fontSize="small" />
+    );
+
+    if (theme.palette.mode === "light") {
+        return (
+            <Tooltip title="Switch to Dark Theme" placement="bottom-end">
+                {darkThemeIcon()}
+            </Tooltip>
+        );
+    } else {
+        return (
+            <Tooltip title="Switch to Light Theme" placement="bottom-end">
+                {lightThemeIcon()}
+            </Tooltip>
+        );
+    }
+}

src/user/UserMenu.tsx

@@ -1,10 +1,12 @@
-import { Avatar, Box, Button, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Button, IconButton, PaletteColor, Theme, Typography, useTheme } from "@mui/material";
 import { useGlobalState } from "../providers/StateContainer";
 import { getSecondaryColour, getSignatureAccentColour } from "../services/whiteLabel";
 import { makeStyles } from "@mui/styles";
-import { Person } from "@mui/icons-material";
-import { useEffect } from "react";
+import { LockOpen, Person, Lock,  } from "@mui/icons-material";
+import { useEffect, useState } from "react";
 import UserTeamName from "./UserTeamName";
+import React from "react";
+import ThemeIcon from "../common/ThemeIcon";
 
 const useStyles = makeStyles((theme: Theme) => ({
   userAvatar: {
@@ -29,7 +31,14 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   red: {
     color: "var(--status-alert)"
-  }
+  },
+  rightIcon: {
+    marginLeft: theme.spacing(1)
+  },
+  signIn: {
+    color: getSignatureAccentColour(),
+    borderColor: getSignatureAccentColour()
+  },
 }));
 
 interface Props {
@@ -45,17 +54,46 @@ export default function UserMenu(props: Props) {
 
     const name = user.name();
     const picture = user.settings.avatar;
-    const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
-    const allowedToCopyToken = user.allowedTo("copy-token");
-    const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
-    console.log(hasTeams)
-    // const hasBilling = user.settings.useTeam
-    //   ? userTeamPermissions.includes(pond.Permission.PERMISSION_BILLING)
-    //   : true;
+    const [lockIsHovered, setLockIsHovered] = useState<boolean>(false);
+    // const hasAdmin = user.hasFeature ? user.hasFeature("admin") : false;
+    // const allowedToCopyToken = user.allowedTo("copy-token");
+    // const hasTeams = user.hasFeature ? user.hasFeature("teams") : false;
 
-    useEffect(() => {
-      console.log(user)
-    }, [user])
+    const lockHover = () => {
+      setLockIsHovered(true);
+    };
+  
+    const lockNoHover = () => {
+      setLockIsHovered(false);
+    };
+
+    const unauthenticatedUserMenu = () => {
+      return (
+        <React.Fragment>
+          <Button
+            variant="outlined"
+            aria-label="Sign In"
+            // onClick={handleLogin}
+            onMouseEnter={lockHover}
+            onMouseLeave={lockNoHover}
+            size="small"
+            className={classes.signIn}>
+            Sign In
+            {lockIsHovered ? (
+              <LockOpen className={classes.rightIcon} fontSize="small" />
+            ) : (
+              <Lock className={classes.rightIcon} fontSize="small" />
+            )}
+          </Button>
+  
+          <IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
+            <ThemeIcon />
+          </IconButton>
+        </React.Fragment>
+      );
+    };
+
+    if (user.id().length < 1) return unauthenticatedUserMenu()
 
     return (
       <Button