Settings: AppearanceComponent

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 (
+    <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;

src/features/settings/appearance/AppearanceContainer.js

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

src/features/settings/appearance/ThemeSettings.js

@@ -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;

src/features/settings/appearance/language/LanguageComponent.js

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