diff --git a/public/flags/flags-iso/shiny/32/GB.png b/public/flags/flags-iso/shiny/32/GB.png
new file mode 100644
index 0000000..531836e
Binary files /dev/null and b/public/flags/flags-iso/shiny/32/GB.png differ
diff --git a/public/flags/flags-iso/shiny/32/RO.png b/public/flags/flags-iso/shiny/32/RO.png
new file mode 100644
index 0000000..5c68926
Binary files /dev/null and b/public/flags/flags-iso/shiny/32/RO.png differ
diff --git a/src/components/Layout/Content.js b/src/components/Layout/Content.js
index edcc259..bc0a2af 100644
--- a/src/components/Layout/Content.js
+++ b/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 = () => {
+
diff --git a/src/pages/settings/api.js b/src/pages/settings/api.js
new file mode 100644
index 0000000..0ae040b
--- /dev/null
+++ b/src/pages/settings/api.js
@@ -0,0 +1 @@
+//test
diff --git a/src/pages/settings/appearance/components/AppearancePage.js b/src/pages/settings/appearance/components/AppearancePage.js
new file mode 100644
index 0000000..535c133
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+
+ Theme
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default AppearancePage;
diff --git a/src/pages/settings/appearance/components/LanguageComponent.js b/src/pages/settings/appearance/components/LanguageComponent.js
new file mode 100644
index 0000000..9611e6c
--- /dev/null
+++ b/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 (
+ <>
+
+ {languageIsSet && (
+
+ )}
+
+
+ >
+ );
+};
+
+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;
diff --git a/src/pages/settings/appearance/components/LanguageContainer.js b/src/pages/settings/appearance/components/LanguageContainer.js
new file mode 100644
index 0000000..1803423
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default LanguageContainer;
diff --git a/src/pages/settings/appearance/components/LanguageMenu.js b/src/pages/settings/appearance/components/LanguageMenu.js
new file mode 100644
index 0000000..4dbea52
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+LanguageMenu.propTypes = {
+ anchorEl: PropTypes.object,
+ onLanguageChange: PropTypes.func.isRequired,
+ onClose: PropTypes.func.isRequired
+};
+
+export default LanguageMenu;