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 && (