brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theme change is now in user settings

Browse source
This commit is contained in:
Carter 2025-04-15 09:29:16 -06:00
parent b208cd68f4
commit df0f7eb6aa
3 changed files with 50 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/user/UserMenu.tsx
View file

@ -226,12 +226,12 @@ export default function UserMenu() {
</ListItemIcon>
<ListItemText primary="User Settings" />
</MenuItem>
<MenuItem onClick={toggleMode} aria-label="Toggle Theme" dense>
{/* <MenuItem onClick={toggleMode} aria-label="Toggle Theme" dense>
<ListItemIcon>
<ThemeIcon />
</ListItemIcon>
<ListItemText primary="Toggle Theme" />
</MenuItem>
</MenuItem> */}
{hasTeams && (
<MenuItem onClick={openTeamDialog} aria-label="Open Team Menu" dense>
<ListItemIcon>

44
src/user/UserSettings.tsx
View file

@ -8,8 +8,9 @@ import {
Notifications as NotificationsIcon,
Email as EmailIcon,
Textsms as TextIcon,
Contrast,
} from "@mui/icons-material";
import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, Toolbar, Tooltip, Typography } from "@mui/material";
import { AppBar, Box, Button, Checkbox, CircularProgress, Collapse, Divider, FormControl, FormControlLabel, FormGroup, FormHelperText, FormLabel, Grid2, IconButton, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Radio, RadioGroup, TextField, Theme, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, Typography } from "@mui/material";
import ResponsiveDialog from "common/ResponsiveDialog";
import UserAvatar from "./UserAvatar";
import { useGlobalState, useUserAPI } from "providers";
@ -24,6 +25,8 @@ import {Option as OptionType} from "common/SearchSelect";
import moment from "moment";
import { IconPicker } from "common/IconPicker";
import { MuiTelInput } from "mui-tel-input";
import { useThemeMode } from "theme/AppThemeProvider";
import ContractsIcon from "products/CommonIcons/contractIcon";
const useStyles = makeStyles((theme: Theme) => {
return ({
@ -61,6 +64,7 @@ interface Props {
}
export default function UserSettings(props: Props) {
const themeMode = useThemeMode()
const { isOpen, closeDialogCallback } = props;
const [globalState, dispatch] = useGlobalState()
const [sharing, setSharing] = useState(false)
@ -73,6 +77,7 @@ export default function UserSettings(props: Props) {
const [avatarExpanded, setAvatarExpanded] = useState<boolean>(false);
const [notificationsExpanded, setNotificationsExpanded] = useState<boolean>(false);
const [avatarUrl, setAvatarUrl] = useState<string>("");
const [themeValue, setThemeValue] = useState<"light" | "dark" | "system">(themeMode.mode)
useEffect(() => {
function changeIcon(icon: string | undefined) {
@ -350,9 +355,46 @@ export default function UserSettings(props: Props) {
return <IconPicker url={user.settings.avatar} setUrl={setAvatarUrl} id={user.settings.id} />;
};
const handleChange = (event: React.MouseEvent<HTMLElement>, nextView: "light" | "dark" | "system") => {
event.preventDefault()
themeMode.setMode(nextView)
};
const themeToggle = () => {
return (
<ToggleButtonGroup
value={themeMode.mode}
exclusive
onChange={handleChange}
size="small"
sx={{margin:-1}}
>
<ToggleButton value="light">
light
</ToggleButton>
<ToggleButton value="system">
system
</ToggleButton>
<ToggleButton value="dark">
dark
</ToggleButton>
</ToggleButtonGroup>
)
}
const settingsList = () => {
return (
<List disablePadding>
<ListItem >
<ListItemIcon>
<Contrast />
</ListItemIcon>
<ListItemText primary={"Theme"} />
{themeToggle()}
</ListItem>
<Divider />
<ListItemButton onClick={() => setProfileExpanded(!profileExpanded)}>
<ListItemIcon>
<AccountBox />