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

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,7 +110,8 @@ export default function UserMenu(props: Props) {
     if (user.id().length < 1) return unauthenticatedUserMenu()
 
     return (
-      <Button
+      <>
+        <Button
           id="tour-user-menu"
           // aria-owns={userMenuIsOpen ? "userMenu" : undefined}
           aria-haspopup="true"
@@ -140,6 +147,10 @@ export default function UserMenu(props: Props) {
               </Avatar>
             {/* )} */}
           </Box>
-        </Button>
-    )
+      </Button>
+      <IconButton onClick={toggleTheme} className={classes.rightIcon} aria-label="Toggle Theme">
+        <ThemeIcon />
+      </IconButton>
+    </>
+  )
 }