AppearancePage

src/components/Layout/Content.js

@@ -10,6 +10,7 @@ import Maps from "../../pages/maps/Maps";
 import Tables from "../../pages/tables/Tables";
 import Icons from "../../pages/icons/Icons";
 import Charts from "../../pages/charts/Charts";
+import AppearancePage from "../../pages/settings/appearance/components/AppearancePage";
 import ContentFooter from "./ContentFooter";
 
 // context
@@ -32,6 +33,7 @@ const Content = () => {
       <div className={classes.fakeToolbar} />
       <Switch>
         <Route path="/dashboard" component={Dashboard} />
+        <Route path="/appearance" component={AppearancePage} />
         <Route path="/typography" component={Typography} />
         <Route path="/tables" component={Tables} />
         <Route path="/notifications" component={Notifications} />

src/pages/settings/api.js

@@ -0,0 +1 @@
+//test

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  InputLabel,
+  MenuItem,
+  FormControl,
+  Select,
+  Card,
+  CardContent,
+  CardActions,
+  Button
+} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core/styles";
+import PageTitle from "../../../../components/PageTitle";
+import LanguageContainer from "./LanguageContainer";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    minWidth: 275
+  },
+  formControl: {
+    margin: theme.spacing(1),
+    minWidth: 300
+  }
+}));
+
+const AppearancePage = () => {
+  const [state, setState] = React.useState({ theme: "default" });
+
+  const { t } = useTranslation();
+  const classes = useStyles();
+
+  const handleThemeChange = (event) => {
+    const theme = event.target.value;
+    setState((prev) => ({ ...prev, theme }));
+  };
+
+  return (
+    <>
+      <PageTitle title={t("Menu.Appearance")} />
+      <Card className={classes.root}>
+        <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>
+        </CardContent>
+        <CardActions>
+          <Button size="small">Save</Button>
+        </CardActions>
+      </Card>
+    </>
+  );
+};
+
+export default AppearancePage;

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

@@ -0,0 +1,54 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Flag from "react-flags";
+import { IconButton } from "@material-ui/core";
+import LanguageMenu from "./LanguageMenu";
+
+const LanguageComponent = ({
+  languageIsSet,
+  anchorEl,
+  onMenuOpen,
+  onLanguageChange,
+  onClose,
+  flag,
+  getFlagsPath
+}) => {
+  return (
+    <>
+      <IconButton
+        aria-controls="language-menu"
+        aria-haspopup="true"
+        onClick={onMenuOpen}
+        color="inherit"
+      >
+        {languageIsSet && (
+          <Flag
+            name={flag.name}
+            format="png"
+            pngSize={32}
+            shiny={true}
+            basePath={getFlagsPath()}
+            alt={flag.alt}
+          />
+        )}
+      </IconButton>
+      <LanguageMenu
+        anchorEl={anchorEl}
+        onLanguageChange={onLanguageChange}
+        onClose={onClose}
+      />
+    </>
+  );
+};
+
+LanguageComponent.propTypes = {
+  languageIsSet: PropTypes.bool.isRequired,
+  anchorEl: PropTypes.object,
+  onMenuOpen: PropTypes.func.isRequired,
+  onLanguageChange: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+  flag: PropTypes.object.isRequired,
+  getFlagsPath: PropTypes.func.isRequired
+};
+
+export default LanguageComponent;

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

@@ -0,0 +1,59 @@
+import React, { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import LanguageComponent from "./LanguageComponent";
+
+const LanguageContainer = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+
+  const { i18n } = useTranslation();
+  const [flag, setFlag] = useState({
+    name: "RO",
+    alt: "-"
+  });
+
+  useEffect(() => {
+    if (!i18n.language) return;
+    setFlag({
+      name: i18n.language === "en" ? "GB" : i18n.language.toUpperCase(),
+      alt: i18n.language
+    });
+  }, [i18n.language]);
+
+  const handleMenuOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleLanguageChange = (language) => () => {
+    if (language !== i18n.language) {
+      i18n.changeLanguage(language);
+    }
+    setAnchorEl(null);
+  };
+
+  const getFlagsPath = () => {
+    const basePath = "flags";
+    if (process.env.PUBLIC_URL) {
+      return `${process.env.PUBLIC_URL}/${basePath}`;
+    } else {
+      return basePath;
+    }
+  };
+
+  return (
+    <LanguageComponent
+      languageIsSet={i18n.language ? true : false}
+      anchorEl={anchorEl}
+      onMenuOpen={handleMenuOpen}
+      onLanguageChange={handleLanguageChange}
+      onClose={handleClose}
+      flag={flag}
+      getFlagsPath={getFlagsPath}
+    />
+  );
+};
+
+export default LanguageContainer;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { Menu, MenuItem } from "@material-ui/core";
+
+const LanguageMenu = ({ anchorEl, onLanguageChange, onClose }) => {
+  const { t } = useTranslation();
+  const open = Boolean(anchorEl);
+
+  return (
+    <Menu
+      id="language-menu"
+      anchorEl={anchorEl}
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      keepMounted
+      transformOrigin={{
+        vertical: "top",
+        horizontal: "right"
+      }}
+      open={open}
+      onClose={onClose}
+    >
+      <MenuItem onClick={onLanguageChange("ro")}>
+        {t("Language.Romanian")}
+      </MenuItem>
+      <MenuItem onClick={onLanguageChange("en")}>
+        {t("Language.English")}
+      </MenuItem>
+    </Menu>
+  );
+};
+
+LanguageMenu.propTypes = {
+  anchorEl: PropTypes.object,
+  onLanguageChange: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired
+};
+
+export default LanguageMenu;