From 58e5f61a97ead5c1e7037df14fda009de5eff438 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Mon, 27 Mar 2023 01:44:45 +0300
Subject: [PATCH] Settings: AppearanceComponent

---
 .../appearance/AppearanceComponent.js         | 61 +++++++++++++++++++
 .../appearance/AppearanceContainer.js         | 10 +--
 .../settings/appearance/ThemeSettings.js      | 23 -------
 .../appearance/language/LanguageComponent.js  |  3 +-
 4 files changed, 65 insertions(+), 32 deletions(-)
 create mode 100644 src/features/settings/appearance/AppearanceComponent.js
 delete mode 100644 src/features/settings/appearance/ThemeSettings.js

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 (
+    <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;
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 (
-    <>
-      <LanguageContainer />
-      <ThemeSettings />
-    </>
-  );
+  return <AppearanceComponent />;
 };
 
 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 (
-    <Switch
-      checked={isDark}
-      onChange={handleChange}
-      color="primary"
-      name="app-theme-switch"
-    />
-  );
-};
-
-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 && (
           <Flag
@@ -45,7 +46,7 @@ const LanguageComponent = ({
         keepMounted
         transformOrigin={{
           vertical: "top",
-          horizontal: "right"
+          horizontal: "left"
         }}
         open={open}
         onClose={onClose}