settings page changes

public/locales/en/translations.json

@@ -61,6 +61,12 @@
       "Advanced": "Advanced"
     }
   },
+  "Settings": {
+    "Navigation": {
+      "Appearance": "Appearance",
+      "Notifications": "Notifications"
+    }
+  },
   "About": {
     "Navigation": {
       "System": "System",

public/locales/ro/translations.json

@@ -52,6 +52,12 @@
       "Advanced": "Avansat"
     }
   },
+  "Settings": {
+    "Navigation": {
+      "Appearance": "Aspect",
+      "Notifications": "Notificări"
+    }
+  },
   "About": {
     "Navigation": {
       "System": "Sistem",

src/components/layout/AppRoutes.js

@@ -2,7 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import PageNotFound from "./PageNotFound";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
-import SettingsContainer from "../../features/settings/components/SettingsContainer";
+import SettingsContainer from "../../features/settings/SettingsContainer";
 import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer";
 import AboutContainer from "../../features/about/AboutContainer";

src/features/settings/SettingsContainer.js

@@ -0,0 +1,49 @@
+import React, { useState, useMemo } from "react";
+import BrushIcon from "@material-ui/icons/Brush";
+import NotificationsIcon from "@material-ui/icons/Notifications";
+import { useTranslation } from "react-i18next";
+import PageTitle from "../../components/common/PageTitle";
+import NavigationButtons from "../../components/common/NavigationButtons";
+import AppearanceContainer from "./appearance/AppearanceContainer";
+import NotificationsContainer from "./notifications/NotificationsContainer";
+
+const NavigationTabs = {
+  APPEARANCE: "Settings.Navigation.Appearance",
+  NOTIFICATIONS: "Settings.Navigation.Notifications"
+};
+
+const tabs = [
+  {
+    code: NavigationTabs.APPEARANCE,
+    icon: BrushIcon
+  },
+  {
+    code: NavigationTabs.NOTIFICATIONS,
+    icon: NotificationsIcon
+  }
+];
+
+const SettingsContainer = () => {
+  const [tab, setTab] = useState(NavigationTabs.APPEARANCE);
+  const { t } = useTranslation();
+
+  const navigationTabs = useMemo(
+    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
+    [t]
+  );
+
+  return (
+    <>
+      <PageTitle
+        text={t(tab)}
+        navigation={
+          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
+        }
+      />
+      {tab === NavigationTabs.APPEARANCE && <AppearanceContainer />}
+      {tab === NavigationTabs.NOTIFICATIONS && <NotificationsContainer />}
+    </>
+  );
+};
+
+export default SettingsContainer;

src/features/settings/appearance/AppearanceContainer.js

@@ -2,7 +2,7 @@ import React from "react";
 import LanguageContainer from "./language/LanguageContainer";
 import ThemeSettings from "./ThemeSettings";
 
-const SettingsContainer = () => {
+const AppearanceContainer = () => {
   return (
     <>
       <LanguageContainer />
@@ -11,4 +11,4 @@ const SettingsContainer = () => {
   );
 };
 
-export default SettingsContainer;
+export default AppearanceContainer;

src/features/settings/notifications/NotificationsContainer.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const NotificationsContainer = () => {
+  return (
+    <div>
+      Enable/Disable email notifications (for each one separately - when
+      starting the machine, when stopping) You can go even further and have an
+      advanced site where you can configure each individual machine.
+    </div>
+  );
+};
+
+export default NotificationsContainer;