refactor: replace color mode dropdown menu with a direct light/dark toggle button.

resources/js/pages/theme/ColorModeIconDropdown.jsx

@@ -1,89 +1,29 @@
 import * as React from 'react';
 import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeIcon from '@mui/icons-material/LightModeRounded';
-import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { useColorScheme } from '@mui/material/styles';
 
-export default function ColorModeIconDropdown(props) {
+export default function ColorModeToggle(props) {
-    const { mode, systemMode, setMode } = useColorScheme();
+    const { mode, setMode } = useColorScheme();
-    const [anchorEl, setAnchorEl] = React.useState(null);
+
-    const open = Boolean(anchorEl);
+    const handleToggle = () => {
-    const handleClick = (event) => {
+        if (mode === 'light') {
-        setAnchorEl(event.currentTarget);
+            setMode('dark');
+        } else {
+            setMode('light');
+        }
     };
-    const handleClose = () => {
+
-        setAnchorEl(null);
+    const icon = mode === 'light' ? <LightModeIcon /> : <DarkModeIcon />;
-    };
+
-    const handleMode = (targetMode) => () => {
-        setMode(targetMode);
-        handleClose();
-    };
-    if (!mode) {
-        return (
-            <Box
-                data-screenshot="toggle-mode"
-                sx={(theme) => ({
-                    verticalAlign: 'bottom',
-                    display: 'inline-flex',
-                    width: '2.25rem',
-                    height: '2.25rem',
-                    borderRadius: (theme.vars || theme).shape.borderRadius,
-                    border: '1px solid',
-                    borderColor: (theme.vars || theme).palette.divider,
-                })}
-            />
-        );
-    }
-    const resolvedMode = (systemMode || mode);
-    const icon = {
-        light: <LightModeIcon />,
-        dark: <DarkModeIcon />,
-    }[resolvedMode];
     return (
-        <React.Fragment>
+        <IconButton
-            <IconButton
+            onClick={handleToggle}
-                data-screenshot="toggle-mode"
+            size="small"
-                onClick={handleClick}
+            {...props}
-                disableRipple
+        >
-                size="small"
+            {icon}
-                aria-controls={open ? 'color-scheme-menu' : undefined}
+        </IconButton>
-                aria-haspopup="true"
-                aria-expanded={open ? 'true' : undefined}
-                {...props}
-            >
-                {icon}
-            </IconButton>
-            <Menu
-                anchorEl={anchorEl}
-                id="account-menu"
-                open={open}
-                onClose={handleClose}
-                onClick={handleClose}
-                slotProps={{
-                    paper: {
-                        variant: 'outlined',
-                        elevation: 0,
-                        sx: {
-                            my: '4px',
-                        },
-                    },
-                }}
-                transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-            >
-                <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
-                    System
-                </MenuItem>
-                <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
-                    Light
-                </MenuItem>
-                <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
-                    Dark
-                </MenuItem>
-            </Menu>
-        </React.Fragment>
     );
 }