From a7a23144a9ac46f37005cc1047c4aa29ec0e260b Mon Sep 17 00:00:00 2001 From: Tudor Stanciu Date: Fri, 3 Mar 2023 18:56:30 +0200 Subject: [PATCH] login fix and theme implementation --- private/Notes.txt | 5 ++- src/components/Layout.js | 42 +++++++++---------- src/components/common/PageTitle.js | 27 ++++++++++++ src/components/layout/Switcher.js | 2 + .../components/DashboardContainer.js | 5 +++ .../machines/components/MachinesContainer.js | 8 +++- src/index.css | 14 ------- src/index.js | 19 +++++---- src/themes/default.js | 35 ++++++++++++++++ src/themes/index.js | 40 ++++++++++++++++++ 10 files changed, 152 insertions(+), 45 deletions(-) create mode 100644 src/components/common/PageTitle.js create mode 100644 src/features/dashboard/components/DashboardContainer.js delete mode 100644 src/index.css create mode 100644 src/themes/default.js create mode 100644 src/themes/index.js diff --git a/private/Notes.txt b/private/Notes.txt index 29e5673..d291f00 100644 --- a/private/Notes.txt +++ b/private/Notes.txt @@ -1,3 +1,6 @@ REACT v4: https://v4.mui.com/getting-started/installation/ -https://v4.mui.com/components/material-icons/ \ No newline at end of file +https://v4.mui.com/components/material-icons/ + +Theming: +https://v4.mui.com/customization/palette/ (Dark theme) \ No newline at end of file diff --git a/src/components/Layout.js b/src/components/Layout.js index e5827d7..47b0b8c 100644 --- a/src/components/Layout.js +++ b/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() { - {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => ( - - - {index % 2 === 0 ? : } - - - - ))} - - - + history.push("/dashboard")} + > + + + + + + + + + history.push("/trash")}> + + + + + - {["All mail", "Trash", "Spam"].map((text, index) => ( - - - {index % 2 === 0 ? : } - - - - ))}
diff --git a/src/components/common/PageTitle.js b/src/components/common/PageTitle.js new file mode 100644 index 0000000..c428197 --- /dev/null +++ b/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 ( +
+ + {text} + +
+ ); +}; + +export default PageTitle; diff --git a/src/components/layout/Switcher.js b/src/components/layout/Switcher.js index 471c4ef..14c57a5 100644 --- a/src/components/layout/Switcher.js +++ b/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 ( + diff --git a/src/features/dashboard/components/DashboardContainer.js b/src/features/dashboard/components/DashboardContainer.js new file mode 100644 index 0000000..88c8ee0 --- /dev/null +++ b/src/features/dashboard/components/DashboardContainer.js @@ -0,0 +1,5 @@ +import React from "react"; + +const DashboardContainer = () =>

In development...

; + +export default DashboardContainer; diff --git a/src/features/machines/components/MachinesContainer.js b/src/features/machines/components/MachinesContainer.js index 7c59cbf..5708861 100644 --- a/src/features/machines/components/MachinesContainer.js +++ b/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 ; + return ( + <> + + + + ); }; export default MachinesContainer; diff --git a/src/index.css b/src/index.css deleted file mode 100644 index 9f93577..0000000 --- a/src/index.css +++ /dev/null @@ -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; -} diff --git a/src/index.js b/src/index.js index a699898..6fdef0e 100644 --- a/src/index.js +++ b/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( - - Loading...}> - - - - + + + Loading...}> + + + + + , document.getElementById("root") diff --git a/src/themes/default.js b/src/themes/default.js new file mode 100644 index 0000000..eb6dad5 --- /dev/null +++ b/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; diff --git a/src/themes/index.js b/src/themes/index.js new file mode 100644 index 0000000..a0830ec --- /dev/null +++ b/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;