fix(dashboard): inconsistent interaction for profile menu options

Signed-off-by: amitamrutiya2210 <[email protected]>

apps/dashboard/components/color-toggle.tsx

@@ -1,58 +1,30 @@
 "use client"
 import * as React from "react"
 import { useColorScheme } from "@mui/joy/styles"
-import IconButton, { IconButtonProps } from "@mui/joy/IconButton"
 
 import DarkModeRoundedIcon from "@mui/icons-material/DarkModeRounded"
 import LightModeIcon from "@mui/icons-material/LightMode"
+import { MenuItem } from "@mui/joy"
 
-export default function ColorSchemeToggle({ onClick, sx, ...props }: IconButtonProps) {
+export default function ColorSchemeToggle() {
   const { mode, setMode } = useColorScheme()
-  const [mounted, setMounted] = React.useState(false)
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-  if (!mounted) {
-    return (
-      <IconButton
-        size="sm"
-        variant="outlined"
-        color="neutral"
-        {...props}
-        sx={sx}
-        disabled
-      />
-    )
-  }
   return (
-    <IconButton
-      id="toggle-mode"
-      size="sm"
-      variant="outlined"
-      color="neutral"
-      {...props}
-      onClick={(event) => {
+    <MenuItem
+      onClick={() => {
         if (mode === "light") {
           setMode("dark")
         } else {
           setMode("light")
         }
-        onClick?.(event)
       }}
-      sx={[
-        {
-          "& > *:first-of-type": {
-            display: mode === "dark" ? "none" : "initial",
-          },
-          "& > *:last-of-type": {
-            display: mode === "light" ? "none" : "initial",
-          },
-        },
-        ...(Array.isArray(sx) ? sx : [sx]),
-      ]}
+      sx={{
+        display: "flex",
+        justifyContent: "space-between",
+        fontWeight: "500",
+      }}
     >
-      <DarkModeRoundedIcon />
-      <LightModeIcon />
-    </IconButton>
+      {mode === "light" ? "Dark Mode" : "Light Mode"}
+      {mode === "light" ? <DarkModeRoundedIcon /> : <LightModeIcon />}
+    </MenuItem>
   )
 }

apps/dashboard/components/header.tsx

@@ -84,14 +84,14 @@ export default function Header() {
           placement="bottom-end"
         >
           <MenuItem
+            onClick={() => navigator.clipboard.writeText(userData?.defaultAccount.id)}
             sx={{
               display: "flex",
               flexDirection: "column",
               alignItems: "flex-start",
             }}
           >
             <Box
-              onClick={() => navigator.clipboard.writeText(userData?.defaultAccount.id)}
               sx={{
                 width: "100%",
                 display: "flex",
@@ -128,17 +128,7 @@ export default function Header() {
             Logout
             <LogoutOutlinedIcon></LogoutOutlinedIcon>
           </MenuItem>
-
-          <MenuItem
-            sx={{
-              display: "flex",
-              justifyContent: "space-between",
-              fontWeight: "500",
-            }}
-          >
-            Dark Mode
-            <ColorSchemeToggle></ColorSchemeToggle>
-          </MenuItem>
+          <ColorSchemeToggle></ColorSchemeToggle>
         </Menu>
       </Dropdown>
     </Sheet>