diff --git a/src/features/settings/appearance/AppearanceComponent.js b/src/features/settings/appearance/AppearanceComponent.js new file mode 100644 index 0000000..99c9038 --- /dev/null +++ b/src/features/settings/appearance/AppearanceComponent.js @@ -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 ( + + + + + } + label="Dark mode:" + labelPlacement="start" + /> + + + + + + } + label="Language:" + labelPlacement="start" + /> + + + + ); +}; + +export default AppearanceComponent; diff --git a/src/features/settings/appearance/AppearanceContainer.js b/src/features/settings/appearance/AppearanceContainer.js index 868b2e0..cffe624 100644 --- a/src/features/settings/appearance/AppearanceContainer.js +++ b/src/features/settings/appearance/AppearanceContainer.js @@ -1,14 +1,8 @@ import React from "react"; -import LanguageContainer from "./language/LanguageContainer"; -import ThemeSettings from "./ThemeSettings"; +import AppearanceComponent from "./AppearanceComponent"; const AppearanceContainer = () => { - return ( - <> - - - - ); + return ; }; export default AppearanceContainer; diff --git a/src/features/settings/appearance/ThemeSettings.js b/src/features/settings/appearance/ThemeSettings.js deleted file mode 100644 index cf522d3..0000000 --- a/src/features/settings/appearance/ThemeSettings.js +++ /dev/null @@ -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 ( - - ); -}; - -export default ThemeSettings; diff --git a/src/features/settings/appearance/language/LanguageComponent.js b/src/features/settings/appearance/language/LanguageComponent.js index 7c04970..9376875 100644 --- a/src/features/settings/appearance/language/LanguageComponent.js +++ b/src/features/settings/appearance/language/LanguageComponent.js @@ -23,6 +23,7 @@ const LanguageComponent = ({ aria-haspopup="true" onClick={onMenuOpen} color="inherit" + size="small" > {languageIsSet && (