Settings: AppearanceComponent

master
Tudor Stanciu 2023-03-27 01:44:45 +03:00
parent 46581b33c9
commit 58e5f61a97
4 changed files with 65 additions and 32 deletions

View File

@ -0,0 +1,61 @@
import React from "react";
import { useApplicationTheme } from "../../../providers/ThemeProvider";
import { Grid, Paper, FormControlLabel, Switch } from "@material-ui/core";
import LanguageContainer from "./language/LanguageContainer";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
paper: {
paddingTop: theme.spacing(1)
},
language: {
paddingLeft: theme.spacing(1)
}
}));
const AppearanceComponent = () => {
const { isDark, onDarkModeChanged } = useApplicationTheme();
const classes = useStyles();
const handleChange = event => {
const { checked } = event.target;
onDarkModeChanged(checked);
};
return (
<Paper variant="outlined" className={classes.paper}>
<Grid container spacing={0}>
<Grid item xs={12} sm={6} md={4} lg={3}>
<FormControlLabel
value="start"
control={
<Switch
checked={isDark}
onChange={handleChange}
color="secondary"
name="dark-mode-switch"
/>
}
label="Dark mode:"
labelPlacement="start"
/>
</Grid>
<Grid item xs={12} sm={6} md={4} lg={3}>
<FormControlLabel
value="start"
control={
<div className={classes.language}>
<LanguageContainer />
</div>
}
label="Language:"
labelPlacement="start"
/>
</Grid>
</Grid>
</Paper>
);
};
export default AppearanceComponent;

View File

@ -1,14 +1,8 @@
import React from "react"; import React from "react";
import LanguageContainer from "./language/LanguageContainer"; import AppearanceComponent from "./AppearanceComponent";
import ThemeSettings from "./ThemeSettings";
const AppearanceContainer = () => { const AppearanceContainer = () => {
return ( return <AppearanceComponent />;
<>
<LanguageContainer />
<ThemeSettings />
</>
);
}; };
export default AppearanceContainer; export default AppearanceContainer;

View File

@ -1,23 +0,0 @@
import React from "react";
import { useApplicationTheme } from "../../../providers/ThemeProvider";
import { Switch } from "@material-ui/core";
const ThemeSettings = () => {
const { isDark, onDarkModeChanged } = useApplicationTheme();
const handleChange = event => {
const { checked } = event.target;
onDarkModeChanged(checked);
};
return (
<Switch
checked={isDark}
onChange={handleChange}
color="primary"
name="app-theme-switch"
/>
);
};
export default ThemeSettings;

View File

@ -23,6 +23,7 @@ const LanguageComponent = ({
aria-haspopup="true" aria-haspopup="true"
onClick={onMenuOpen} onClick={onMenuOpen}
color="inherit" color="inherit"
size="small"
> >
{languageIsSet && ( {languageIsSet && (
<Flag <Flag
@ -45,7 +46,7 @@ const LanguageComponent = ({
keepMounted keepMounted
transformOrigin={{ transformOrigin={{
vertical: "top", vertical: "top",
horizontal: "right" horizontal: "left"
}} }}
open={open} open={open}
onClose={onClose} onClose={onClose}