From b64784cf450161842fa7e3a0098f23023d3ac239 Mon Sep 17 00:00:00 2001 From: Nicola Benaglia Date: Fri, 18 Apr 2025 09:20:29 +0200 Subject: [PATCH] Add theme dark/light --- src/components/Group/Settings.tsx | 144 ++++++++++++++---------------- 1 file changed, 67 insertions(+), 77 deletions(-) diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx index 2aba6f6..d3ff1f7 100644 --- a/src/components/Group/Settings.tsx +++ b/src/components/Group/Settings.tsx @@ -1,37 +1,20 @@ -import * as React from "react"; -import Button from "@mui/material/Button"; -import Dialog from "@mui/material/Dialog"; -import ListItemText from "@mui/material/ListItemText"; -import ListItemButton from "@mui/material/ListItemButton"; -import List from "@mui/material/List"; -import Divider from "@mui/material/Divider"; -import AppBar from "@mui/material/AppBar"; -import Toolbar from "@mui/material/Toolbar"; -import IconButton from "@mui/material/IconButton"; -import Typography from "@mui/material/Typography"; -import CloseIcon from "@mui/icons-material/Close"; -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"; +import * as React from 'react'; +import Dialog from '@mui/material/Dialog'; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Typography from '@mui/material/Typography'; +import CloseIcon from '@mui/icons-material/Close'; +import Slide from '@mui/material/Slide'; +import { TransitionProps } from '@mui/material/transitions'; +import { Box, FormControlLabel, Switch, styled, useTheme } from '@mui/material'; +import { enabledDevModeAtom } from '../../atoms/global'; +import { useRecoilState } from 'recoil'; function a11yProps(index: number) { return { id: `simple-tab-${index}`, - "aria-controls": `simple-tabpanel-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, }; } @@ -49,13 +32,13 @@ const LocalNodeSwitch = styled(Switch)(({ theme }) => ({ }, '&::before': { backgroundImage: `url('data:image/svg+xml;utf8,')`, left: 12, }, '&::after': { backgroundImage: `url('data:image/svg+xml;utf8,')`, right: 12, }, @@ -77,35 +60,34 @@ const Transition = React.forwardRef(function Transition( return ; }); -export const Settings = ({ - address, - open, - setOpen, -}) => { +export const Settings = ({ address, open, setOpen }) => { const [checked, setChecked] = React.useState(false); - const [isEnabledDevMode, setIsEnabledDevMode] = useRecoilState(enabledDevModeAtom) - - + const [isEnabledDevMode, setIsEnabledDevMode] = + useRecoilState(enabledDevModeAtom); + const theme = useTheme(); const handleChange = (event: React.ChangeEvent) => { setChecked(event.target.checked); - window.sendMessage("addUserSettings", { - keyValue: { - key: 'disable-push-notifications', - value: event.target.checked, - }, - }) + window + .sendMessage('addUserSettings', { + keyValue: { + key: 'disable-push-notifications', + value: event.target.checked, + }, + }) .then((response) => { if (response?.error) { - console.error("Error adding user settings:", response.error); + console.error('Error adding user settings:', response.error); } else { - console.log("User settings added successfully"); + console.log('User settings added successfully'); } }) .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 = () => { @@ -115,9 +97,10 @@ export const Settings = ({ const getUserSettings = async () => { try { return new Promise((res, rej) => { - window.sendMessage("getUserSettings", { - key: "disable-push-notifications", - }) + window + .sendMessage('getUserSettings', { + key: 'disable-push-notifications', + }) .then((response) => { if (!response?.error) { setChecked(response || false); @@ -127,12 +110,11 @@ export const Settings = ({ rej(response.error); }) .catch((error) => { - rej(error.message || "An error occurred"); + rej(error.message || 'An error occurred'); }); - }); } catch (error) { - console.log("error", error); + console.log('error', error); } }; @@ -140,8 +122,6 @@ export const Settings = ({ getUserSettings(); }, []); - - return ( - + - + General Settings + + @@ -188,17 +172,23 @@ export const Settings = ({ /> {window?.electronAPI && ( { - setIsEnabledDevMode(e.target.checked) - localStorage.setItem('isEnabledDevMode', JSON.stringify(e.target.checked)) - }} /> - } - label="Enable dev mode" - /> + sx={{ + color: 'white', + }} + control={ + { + setIsEnabledDevMode(e.target.checked); + localStorage.setItem( + 'isEnabledDevMode', + JSON.stringify(e.target.checked) + ); + }} + /> + } + label="Enable dev mode" + /> )}