added theme icon and login button when user is unauthenticated

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