added Autocomplete from material-ui lab

package-lock.json

@@ -2248,6 +2248,18 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.60",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.60.tgz",
+      "integrity": "sha512-fadlYsPJF+0fx2lRuyqAuJj7hAS1tLDdIEEdov5jlrpb5pp4b+mRDUqQTUxi4inRZHS1bEXpU8QWUhO6xX88aA==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0 || ^17.0.0"
+      }
+    },
     "@material-ui/styles": {
       "version": "4.11.3",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.3.tgz",

package.json

@@ -11,30 +11,31 @@
   "dependencies": {
     "@material-ui/core": "^4.11.3",
     "@material-ui/icons": "^4.11.2",
+    "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.3",
     "@mdi/js": "^5.9.55",
     "@mdi/react": "^1.4.0",
     "apexcharts": "^3.24.0",
+    "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "font-awesome": "^4.7.0",
+    "i18next": "^19.4.4",
+    "i18next-browser-languagedetector": "^4.1.1",
+    "i18next-http-backend": "^1.0.10",
+    "moment": "^2.25.3",
     "mui-datatables": "^3.7.4",
     "react": "^16.14.0",
     "react-apexcharts": "^1.3.7",
     "react-dom": "^16.14.0",
+    "react-flags": "^0.1.18",
     "react-google-maps": "^9.4.5",
+    "react-i18next": "^11.4.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
     "react-syntax-highlighter": "^15.4.3",
     "react-toastify": "^7.0.3",
-    "react-i18next": "^11.4.0",
-    "react-flags": "^0.1.18",
     "recharts": "^2.0.4",
-    "tinycolor2": "^1.4.2",
-    "axios": "^0.19.2",
-    "i18next": "^19.4.4",
-    "i18next-browser-languagedetector": "^4.1.1",
-    "i18next-http-backend": "^1.0.10",
-    "moment": "^2.25.3"
+    "tinycolor2": "^1.4.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/pages/settings/appearance/components/AppearancePage.js

@@ -1,18 +1,11 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  InputLabel,
-  MenuItem,
-  FormControl,
-  Select,
-  Card,
-  CardContent,
-  CardActions,
-  Button
-} from "@material-ui/core";
+import { Card, CardContent, CardActions, Button } from "@material-ui/core";
 import { makeStyles } from "@material-ui/core/styles";
 import PageTitle from "../../../../components/PageTitle";
 import LanguageContainer from "./LanguageContainer";
+import TextField from "@material-ui/core/TextField";
+import Autocomplete from "@material-ui/lab/Autocomplete";
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -20,7 +13,7 @@ const useStyles = makeStyles((theme) => ({
   },
   formControl: {
     margin: theme.spacing(1),
-    minWidth: 300
+    width: 300
   }
 }));
 
@@ -30,11 +23,11 @@ const AppearancePage = () => {
   const { t } = useTranslation();
   const classes = useStyles();
 
-  const handleThemeChange = (event) => {
-    const theme = event.target.value;
-    setState((prev) => ({ ...prev, theme }));
+  const handleThemeChange = (event, newValue) => {
+    setState((prev) => ({ ...prev, theme: newValue }));
   };
 
+  const themes = ["default", "black", "blue"];
   return (
     <>
       <PageTitle title={t("Menu.Appearance")} />
@@ -42,23 +35,18 @@ const AppearancePage = () => {
         <CardContent>
           <LanguageContainer />
           <br />
-          <FormControl variant="outlined" className={classes.formControl}>
-            <InputLabel id="settings.appearance.theme.label">Theme</InputLabel>
-            <Select
-              labelId="settings.appearance.theme.label"
-              id="settings.appearance.theme.select"
-              value={state.theme}
-              onChange={handleThemeChange}
-              label="Theme"
-            >
-              <MenuItem value="">
-                <em>None</em>
-              </MenuItem>
-              <MenuItem value={"default"}>default</MenuItem>
-              <MenuItem value={"dark"}>dark</MenuItem>
-              <MenuItem value={"white"}>white</MenuItem>
-            </Select>
-          </FormControl>
+          <Autocomplete
+            id="settings.appearance.theme.autocomplete"
+            size="small"
+            options={themes}
+            value={state.theme}
+            onChange={handleThemeChange}
+            getOptionLabel={(option) => option}
+            className={classes.formControl}
+            renderInput={(params) => (
+              <TextField {...params} label="Theme" variant="outlined" />
+            )}
+          />
         </CardContent>
         <CardActions>
           <Button size="small">Save</Button>