Qortal/Qortal-Hub
1
0
Fork 0
mirror of https://github.com/Qortal/Qortal-Hub.git synced 2025-06-13 19:41:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add theme dark/light

Browse Source
This commit is contained in:
Nicola Benaglia 2025-04-18 09:20:29 +02:00
parent 6621527e82
commit b64784cf45
1 changed files with 67 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
src/components/Group/Settings.tsx
View File

@ -1,37 +1,20 @@
import * as React from "react"; import * as React from 'react';
import Button from "@mui/material/Button"; import Dialog from '@mui/material/Dialog';
import Dialog from "@mui/material/Dialog"; import AppBar from '@mui/material/AppBar';
import ListItemText from "@mui/material/ListItemText"; import Toolbar from '@mui/material/Toolbar';
import ListItemButton from "@mui/material/ListItemButton"; import IconButton from '@mui/material/IconButton';
import List from "@mui/material/List"; import Typography from '@mui/material/Typography';
import Divider from "@mui/material/Divider"; import CloseIcon from '@mui/icons-material/Close';
import AppBar from "@mui/material/AppBar"; import Slide from '@mui/material/Slide';
import Toolbar from "@mui/material/Toolbar"; import { TransitionProps } from '@mui/material/transitions';
import IconButton from "@mui/material/IconButton"; import { Box, FormControlLabel, Switch, styled, useTheme } from '@mui/material';
import Typography from "@mui/material/Typography"; import { enabledDevModeAtom } from '../../atoms/global';
import CloseIcon from "@mui/icons-material/Close"; import { useRecoilState } from 'recoil';
import Slide from "@mui/material/Slide";
import { TransitionProps } from "@mui/material/transitions";
import ListOfMembers from "./ListOfMembers";
import { InviteMember } from "./InviteMember";
import { ListOfInvites } from "./ListOfInvites";
import { ListOfBans } from "./ListOfBans";
import { ListOfJoinRequests } from "./ListOfJoinRequests";
import { Box, FormControlLabel, Switch, Tab, Tabs, styled } from "@mui/material";
import { CustomizedSnackbars } from "../Snackbar/Snackbar";
import { MyContext, isMobile } from "../../App";
import { getGroupMembers, getNames } from "./Group";
import { LoadingSnackbar } from "../Snackbar/LoadingSnackbar";
import { getFee } from "../../background";
import { LoadingButton } from "@mui/lab";
import { subscribeToEvent, unsubscribeFromEvent } from "../../utils/events";
import { enabledDevModeAtom } from "../../atoms/global";
import { useRecoilState } from "recoil";
function a11yProps(index: number) { function a11yProps(index: number) {
return { return {
id: `simple-tab-${index}`, id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`, 'aria-controls': `simple-tabpanel-${index}`,
}; };
} }
@ -49,13 +32,13 @@ const LocalNodeSwitch = styled(Switch)(({ theme }) => ({
}, },
'&::before': { '&::before': {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent( backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
theme.palette.getContrastText(theme.palette.primary.main), theme.palette.getContrastText(theme.palette.primary.main)
)}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`, )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
left: 12, left: 12,
}, },
'&::after': { '&::after': {
backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent( backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
theme.palette.getContrastText(theme.palette.primary.main), theme.palette.getContrastText(theme.palette.primary.main)
)}" d="M19,13H5V11H19V13Z" /></svg>')`, )}" d="M19,13H5V11H19V13Z" /></svg>')`,
right: 12, right: 12,
}, },
@ -77,35 +60,34 @@ const Transition = React.forwardRef(function Transition(
return <Slide direction="up" ref={ref} {...props} />; return <Slide direction="up" ref={ref} {...props} />;
}); });
export const Settings = ({ export const Settings = ({ address, open, setOpen }) => {
address,
open,
setOpen,
}) => {
const [checked, setChecked] = React.useState(false); const [checked, setChecked] = React.useState(false);
const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) const [isEnabledDevMode, setIsEnabledDevMode] =
useRecoilState(enabledDevModeAtom);
const theme = useTheme();
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked); setChecked(event.target.checked);
window.sendMessage("addUserSettings", { window
keyValue: { .sendMessage('addUserSettings', {
key: 'disable-push-notifications', keyValue: {
value: event.target.checked, key: 'disable-push-notifications',
}, value: event.target.checked,
}) },
})
.then((response) => { .then((response) => {
if (response?.error) { if (response?.error) {
console.error("Error adding user settings:", response.error); console.error('Error adding user settings:', response.error);
} else { } else {
console.log("User settings added successfully"); console.log('User settings added successfully');
} }
}) })
.catch((error) => { .catch((error) => {
console.error("Failed to add user settings:", error.message || "An error occurred"); console.error(
'Failed to add user settings:',
error.message || 'An error occurred'
);
}); });
}; };
const handleClose = () => { const handleClose = () => {
@ -115,9 +97,10 @@ export const Settings = ({
const getUserSettings = async () => { const getUserSettings = async () => {
try { try {
return new Promise((res, rej) => { return new Promise((res, rej) => {
window.sendMessage("getUserSettings", { window
key: "disable-push-notifications", .sendMessage('getUserSettings', {
}) key: 'disable-push-notifications',
})
.then((response) => { .then((response) => {
if (!response?.error) { if (!response?.error) {
setChecked(response || false); setChecked(response || false);
@ -127,12 +110,11 @@ export const Settings = ({
rej(response.error); rej(response.error);
}) })
.catch((error) => { .catch((error) => {
rej(error.message || "An error occurred"); rej(error.message || 'An error occurred');
}); });
}); });
} catch (error) { } catch (error) {
console.log("error", error); console.log('error', error);
} }
}; };
@ -140,8 +122,6 @@ export const Settings = ({
getUserSettings(); getUserSettings();
}, []); }, []);
return ( return (
<React.Fragment> <React.Fragment>
<Dialog <Dialog
@ -150,11 +130,14 @@ export const Settings = ({
onClose={handleClose} onClose={handleClose}
TransitionComponent={Transition} TransitionComponent={Transition}
> >
<AppBar sx={{ position: "relative", bgcolor: "#232428" }}> <AppBar
sx={{ position: 'relative', bgcolor: theme.palette.background }}
>
<Toolbar> <Toolbar>
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div"> <Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
General Settings General Settings
</Typography> </Typography>
<IconButton <IconButton
edge="start" edge="start"
color="inherit" color="inherit"
@ -165,21 +148,22 @@ export const Settings = ({
</IconButton> </IconButton>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Box <Box
sx={{ sx={{
bgcolor: "#27282c", bgcolor: theme.palette.background,
flexGrow: 1, flexGrow: 1,
overflowY: "auto", overflowY: 'auto',
color: "white", color: theme.palette.text.primary,
padding: "20px", padding: '20px',
flexDirection: 'column', flexDirection: 'column',
display: 'flex', display: 'flex',
gap: '20px' gap: '20px',
}} }}
> >
<FormControlLabel <FormControlLabel
sx={{ sx={{
color: "white", color: theme.palette.text.primary,
}} }}
control={ control={
<LocalNodeSwitch checked={checked} onChange={handleChange} /> <LocalNodeSwitch checked={checked} onChange={handleChange} />
@ -188,17 +172,23 @@ export const Settings = ({
/> />
{window?.electronAPI && ( {window?.electronAPI && (
<FormControlLabel <FormControlLabel
sx={{ sx={{
color: "white", color: 'white',
}} }}
control={ control={
<LocalNodeSwitch checked={isEnabledDevMode} onChange={(e)=> { <LocalNodeSwitch
setIsEnabledDevMode(e.target.checked) checked={isEnabledDevMode}
localStorage.setItem('isEnabledDevMode', JSON.stringify(e.target.checked)) onChange={(e) => {
}} /> setIsEnabledDevMode(e.target.checked);
} localStorage.setItem(
label="Enable dev mode" 'isEnabledDevMode',
/> JSON.stringify(e.target.checked)
);
}}
/>
}
label="Enable dev mode"
/>
)} )}
</Box> </Box>
</Dialog> </Dialog>