feat: playing with colours

src/Avatar.tsx

@@ -1,6 +1,8 @@
 import { createRef, MouseEventHandler, useEffect, useState } from "react";
 import { useSession } from "./Session";
 import { User } from "./api";
+import { useTheme } from "./ThemeProvider";
+import { colourTheme, darkTheme, normalTheme, rainbowTheme } from "./themes";
 
 interface ContextMenuItem {
   label: string;
@@ -32,6 +34,7 @@ const UserInfo = (user: User) => {
 
 export default function Avatar() {
   const { user, onLogout } = useSession();
+  const { theme, setTheme } = useTheme();
   const [contextMenu, setContextMenu] = useState<{
     open: boolean;
     allowOpen: boolean;
@@ -42,8 +45,26 @@ export default function Avatar() {
   const avatarRef = createRef<HTMLDivElement>();
 
   const contextMenuItems: ContextMenuItem[] = [
-    { label: "View Profile", onClick: handleViewProfile },
-    { label: "Logout", onClick: onLogout },
+    { label: "view Profile", onClick: handleViewProfile },
+    {
+      label: "change theme",
+      onClick: () => {
+        switch (theme) {
+          case darkTheme:
+            setTheme(colourTheme);
+            break;
+          case colourTheme:
+            setTheme(rainbowTheme);
+            break;
+          case rainbowTheme:
+            setTheme(normalTheme);
+            break;
+          case normalTheme:
+            setTheme(darkTheme);
+        }
+      },
+    },
+    { label: "logout", onClick: onLogout },
   ];
 
   const handleMenuClick: MouseEventHandler<HTMLDivElement> = (event) => {
@@ -94,7 +115,6 @@ export default function Avatar() {
   const dialogRef = createRef<HTMLDialogElement>();
 
   function handleViewProfile() {
-    handleMenuClose();
     if (user) {
       dialogRef.current?.showModal();
       setDialog(UserInfo(user));
@@ -105,7 +125,7 @@ export default function Avatar() {
     <div
       className="avatar"
       onContextMenu={handleMenuClick}
-      style={{ display: user ? "block" : "none" }}
+      style={{ display: user ? "block" : "none", color: "black" }}
       onClick={(event) => {
         if (contextMenu.open && event.target === avatarRef.current) {
           handleMenuClose();
@@ -121,25 +141,13 @@ export default function Avatar() {
           className="context-menu"
           ref={contextMenuRef}
           style={{
-            zIndex: 3,
-            position: "absolute",
             top: contextMenu.mouseY,
             left: contextMenu.mouseX,
-            background: "white",
-            border: "1px solid #ddd",
-            padding: 0,
-            margin: 0,
-            listStyle: "none",
           }}
         >
           {contextMenuItems.map((item, index) => (
             <li
               key={index}
-              style={{
-                padding: "10px",
-                borderBottom: "1px solid #ddd",
-                cursor: "pointer",
-              }}
               onClick={() => {
                 item.onClick();
                 handleMenuClose();