fix(dashboard): inconsistent interaction for dashboard profile menu options

[amitamrutiya]

Fix Issue #4393

Make the entire MenuTile clickable while maintaining the existing functionality. Additionally, I have added text Light Mode so that users can see light mode text when the dashboard is in dark mode, and dark mode text when the dashboard is in light mode.

[siddhart1o1]

Thanks for the PR.

I tried it locally, and when I used it for the first time and clicked on the theme toggle, it stayed in light mode, but the text changed.

[siddhart1o1]

Also, in dark mode, it shows "light mode" and in light mode, it shows "dark."

[amitamrutiya]

Also, in dark mode, it shows "light mode" and in light mode, it shows "dark."

I have explicitly replaced this text with an icon.

I tried it locally, and when I used it for the first time and clicked on the theme toggle, it stayed in light mode, but the text changed.

It's weird. I am not able to reproduce this same error.

[siddhart1o1]

It's weird. I am not able to reproduce this same error.

I am using Brave; maybe try in a private window of Brave so you don't have cookies or other data stored to mimic first-time usage.

[amitamrutiya]

@siddhart1o1 I tried in brave private window still not able to reproduce this error 😟

[siddhart1o1]

Thanks for the PR.

I tried it locally, and when I used it for the first time and clicked on the theme toggle, it stayed in light mode, but the text changed.

Here is how you can fix this issue: the mode is not just dark and light, but it can also be system, so we need to handle that case as well.

Something like

export default function ColorSchemeToggle() {
  const { mode, setMode, systemMode } = useColorScheme()
  const currentMode = mode === "system" ? systemMode : mode   // if mode is system use `systemMode`

  return (
    <MenuItem
      onClick={() => {
        if (currentMode === "light") {
          setMode("dark")
        } else {
          setMode("light")
        }
      }}
      sx={{
        display: "flex",
        justifyContent: "space-between",
        fontWeight: "500",
      }}
    >
      {currentMode === "light" ? "Light Mode" : "Dark Mode"}.        // Also if currentMode is light show `Light Mode` text same for dark i think this is better for understanding.
      {currentMode === "light" ? <LightModeIcon /> : <DarkModeRoundedIcon />}
    </MenuItem>
  )
}