login fix and theme implementation

private/Notes.txt

@@ -1,3 +1,6 @@
 REACT v4:
 https://v4.mui.com/getting-started/installation/
 https://v4.mui.com/components/material-icons/
+
+Theming:
+https://v4.mui.com/customization/palette/ (Dark theme)

src/components/Layout.js

@@ -14,13 +14,13 @@ import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import ListItem from "@material-ui/core/ListItem";
 import ListItemIcon from "@material-ui/core/ListItemIcon";
 import ListItemText from "@material-ui/core/ListItemText";
-import InboxIcon from "@material-ui/icons/MoveToInbox";
-import MailIcon from "@material-ui/icons/Mail";
+import DeleteIcon from "@material-ui/icons/Delete";
 import DnsIcon from "@material-ui/icons/Dns";
 import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 import AccountCircle from "@material-ui/icons/AccountCircle";
 import SettingsIcon from "@material-ui/icons/Settings";
+import DashboardIcon from "@material-ui/icons/Dashboard";
 import Main from "./layout/Main";
 import { useHistory } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
@@ -203,17 +203,16 @@ export default function MiniDrawer() {
         </div>
         <Divider />
         <List>
-          {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
-        </List>
-        <Divider />
-        <List>
+          <ListItem
+            button
+            key="dashboard"
+            onClick={() => history.push("/dashboard")}
+          >
+            <ListItemIcon>
+              <DashboardIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Dashboard"} />
+          </ListItem>
           <ListItem
             button
             key="machines"
@@ -224,6 +223,15 @@ export default function MiniDrawer() {
             </ListItemIcon>
             <ListItemText primary={"Machines"} />
           </ListItem>
+        </List>
+        <Divider />
+        <List>
+          <ListItem button key="trash" onClick={() => history.push("/trash")}>
+            <ListItemIcon>
+              <DeleteIcon />
+            </ListItemIcon>
+            <ListItemText primary={"Trash"} />
+          </ListItem>
           <ListItem
             button
             key="settings"
@@ -234,14 +242,6 @@ export default function MiniDrawer() {
             </ListItemIcon>
             <ListItemText primary={"Settings"} />
           </ListItem>
-          {["All mail", "Trash", "Spam"].map((text, index) => (
-            <ListItem button key={text}>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItem>
-          ))}
         </List>
       </Drawer>
       <main className={classes.content}>

src/components/common/PageTitle.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { makeStyles } from "@material-ui/core/styles";
+import { Typography } from "@material-ui/core";
+
+const useStyles = makeStyles(theme => ({
+  box: {
+    display: "flex",
+    justifyContent: "space-between",
+    marginBottom: theme.spacing(2),
+    marginTop: theme.spacing(0)
+  },
+  title: { textTransform: "uppercase" }
+}));
+
+const PageTitle = ({ text }) => {
+  var classes = useStyles();
+
+  return (
+    <div className={classes.box}>
+      <Typography className={classes.title} variant="h3" size="sm">
+        {text}
+      </Typography>
+    </div>
+  );
+};
+
+export default PageTitle;

src/components/layout/Switcher.js

@@ -4,10 +4,12 @@ import PageNotFound from "./PageNotFound";
 import LoginContainer from "../../features/login/components/LoginContainer";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
 import SettingsContainer from "../../features/settings/components/SettingsContainer";
+import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 
 const Switcher = () => {
   return (
     <Switch>
+      <Route exact path="/dashboard" component={DashboardContainer} />
       <Route exact path="/user-profile" component={LoginContainer} />
       <Route exact path="/machines" component={NetworkContainer} />
       <Route exact path="/settings" component={SettingsContainer} />

src/features/dashboard/components/DashboardContainer.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+const DashboardContainer = () => <h2>In development...</h2>;
+
+export default DashboardContainer;

src/features/machines/components/MachinesContainer.js

@@ -5,6 +5,7 @@ import {
 } from "../../../state/ApplicationContexts";
 import useApi from "../../../api";
 import MachinesList from "./MachinesList";
+import PageTitle from "../../../components/common/PageTitle";
 
 const MachinesContainer = () => {
   const state = useContext(ApplicationStateContext);
@@ -27,7 +28,12 @@ const MachinesContainer = () => {
     }
   }, [handleReadMachines, state.network.machines.loaded]);
 
-  return <MachinesList dense={true} machines={state.network.machines} />;
+  return (
+    <>
+      <PageTitle text="Machines" />
+      <MachinesList dense={true} machines={state.network.machines} />
+    </>
+  );
 };
 
 export default MachinesContainer;

src/index.css

@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  background-color: #282c34;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}

src/index.js

@@ -1,22 +1,25 @@
 import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
-import "./index.css";
-import "./utils/i18n";
+import { ThemeProvider } from "@material-ui/styles";
+import Themes from "./themes";
 import CssBaseline from "@material-ui/core/CssBaseline";
 import App from "./components/App";
 import { TuitioProvider } from "@flare/tuitio-client-react";
 import ApplicationStateProvider from "./providers/ApplicationStateProvider";
 import ToastProvider from "./providers/ToastProvider";
+import "./utils/i18n";
 
 ReactDOM.render(
   <TuitioProvider tuitioUrl={process.env.REACT_APP_TUITIO_URL}>
     <ApplicationStateProvider>
-      <CssBaseline />
-      <Suspense fallback={<div>Loading...</div>}>
-        <ToastProvider>
-          <App />
-        </ToastProvider>
-      </Suspense>
+      <ThemeProvider theme={Themes.default}>
+        <CssBaseline />
+        <Suspense fallback={<div>Loading...</div>}>
+          <ToastProvider>
+            <App />
+          </ToastProvider>
+        </Suspense>
+      </ThemeProvider>
     </ApplicationStateProvider>
   </TuitioProvider>,
   document.getElementById("root")

src/themes/default.js

@@ -0,0 +1,35 @@
+const primary = "#00695C";
+const secondary = "#FF5C93";
+const warning = "#ff9800";
+const success = "#4caf50";
+const info = "#2196f3";
+
+const defaultTheme = {
+  palette: {
+    primary: {
+      main: primary
+    },
+    secondary: {
+      main: secondary,
+      contrastText: "#ffcc00"
+    },
+    warning: {
+      main: warning
+    },
+    success: {
+      main: success
+    },
+    info: {
+      main: info
+    }
+  },
+  overrides: {
+    MuiBackdrop: {
+      root: {
+        backgroundColor: "#4A4A4A1A"
+      }
+    }
+  }
+};
+
+export default defaultTheme;

src/themes/index.js

@@ -0,0 +1,40 @@
+import defaultTheme from "./default";
+import { createTheme } from "@material-ui/core/styles";
+
+const prefersDarkMode = false;
+
+const overrides = {
+  palette: {
+    type: prefersDarkMode ? "dark" : "light"
+  },
+  typography: {
+    h1: {
+      fontSize: "3rem"
+    },
+    h2: {
+      fontSize: "2rem"
+    },
+    h3: {
+      fontSize: "1.64rem"
+    },
+    h4: {
+      fontSize: "1.5rem"
+    },
+    h5: {
+      fontSize: "1.285rem"
+    },
+    h6: {
+      fontSize: "1.142rem"
+    }
+  }
+};
+
+const themes = {
+  default: createTheme({
+    ...defaultTheme,
+    ...overrides,
+    palette: { ...defaultTheme.palette, ...overrides.palette }
+  })
+};
+
+export default themes;