From 539d9ac1734ef8855892b46f1e3c994a98b6fc1a Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 7 Nov 2024 04:21:32 -0500 Subject: [PATCH 01/16] feat: change in structure to apply architecture to project --- Client/src/App.jsx | 44 +++++++++++-------- .../{ => Components}/HOC/withAdminCheck.jsx | 6 +-- .../{ => Components}/HOC/withAdminProp.jsx | 0 .../Layouts/HomeLayout/index.css | 0 .../Layouts/HomeLayout/index.jsx | 2 +- Client/src/Components/Sidebar/index.jsx | 9 +++- Client/src/Pages/Infrastructure/index.jsx | 5 +++ Client/src/Pages/ReadMe.md | 1 - 8 files changed, 42 insertions(+), 25 deletions(-) rename Client/src/{ => Components}/HOC/withAdminCheck.jsx (85%) rename Client/src/{ => Components}/HOC/withAdminProp.jsx (100%) rename Client/src/{ => Components}/Layouts/HomeLayout/index.css (100%) rename Client/src/{ => Components}/Layouts/HomeLayout/index.jsx (85%) create mode 100644 Client/src/Pages/Infrastructure/index.jsx delete mode 100644 Client/src/Pages/ReadMe.md diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 6cb2f433a..65ba6fc21 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -8,7 +8,6 @@ import { ToastContainer } from "react-toastify"; import NotFound from "./Pages/NotFound"; import Login from "./Pages/Auth/Login"; import Register from "./Pages/Auth/Register/Register"; -import HomeLayout from "./Layouts/HomeLayout"; import Account from "./Pages/Account"; import Monitors from "./Pages/Monitors/Home"; import CreateMonitor from "./Pages/Monitors/CreateMonitor"; @@ -30,8 +29,9 @@ import CreatePageSpeed from "./Pages/PageSpeed/CreatePageSpeed"; import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenance"; import PageSpeedDetails from "./Pages/PageSpeed/Details"; import PageSpeedConfigure from "./Pages/PageSpeed/Configure"; -import withAdminCheck from "./HOC/withAdminCheck"; -import withAdminProp from "./HOC/withAdminProp"; +import HomeLayout from "./Components/Layouts/HomeLayout"; +import withAdminCheck from "./Components/HOC/withAdminCheck"; +import withAdminProp from "./Components/HOC/withAdminProp"; import { ThemeProvider } from "@emotion/react"; import lightTheme from "./Utils/Theme/lightTheme"; import darkTheme from "./Utils/Theme/darkTheme"; @@ -39,6 +39,7 @@ import { CssBaseline } from "@mui/material"; import { getAppSettings } from "./Features/Settings/settingsSlice"; import { logger } from "./Utils/Logger"; // Import the logger import { networkService } from "./main"; +import { Infrastructure } from "./Pages/Infrastructure"; function App() { const AdminCheckedRegister = withAdminCheck(Register); const MonitorsWithAdminProp = withAdminProp(Monitors); @@ -96,6 +97,27 @@ function App() { path="/monitors/configure/:monitorId/" element={} /> + } + /> + } + /> + } + /> + } + /> + } + /> + } @@ -152,22 +174,6 @@ function App() { /> } /> - } - /> - } - /> - } - /> - } - /> { const WithAdminCheck = (props) => { diff --git a/Client/src/HOC/withAdminProp.jsx b/Client/src/Components/HOC/withAdminProp.jsx similarity index 100% rename from Client/src/HOC/withAdminProp.jsx rename to Client/src/Components/HOC/withAdminProp.jsx diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Components/Layouts/HomeLayout/index.css similarity index 100% rename from Client/src/Layouts/HomeLayout/index.css rename to Client/src/Components/Layouts/HomeLayout/index.css diff --git a/Client/src/Layouts/HomeLayout/index.jsx b/Client/src/Components/Layouts/HomeLayout/index.jsx similarity index 85% rename from Client/src/Layouts/HomeLayout/index.jsx rename to Client/src/Components/Layouts/HomeLayout/index.jsx index 0fe787fd6..b605a0d53 100644 --- a/Client/src/Layouts/HomeLayout/index.jsx +++ b/Client/src/Components/Layouts/HomeLayout/index.jsx @@ -1,4 +1,4 @@ -import Sidebar from "../../Components/Sidebar"; +import Sidebar from "../../Sidebar"; import { Outlet } from "react-router"; import { Stack } from "@mui/material"; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 9135dcefa..ac0e8f9e5 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -54,6 +54,7 @@ const menu = [ nested: [ { name: "Monitors", path: "monitors", icon: }, { name: "Pagespeed", path: "pagespeed", icon: }, + { name: "Infrastructure", path: "infrastructure", icon: }, ], }, { name: "Incidents", path: "incidents", icon: }, @@ -181,7 +182,13 @@ function Sidebar() { direction="row" alignItems="center" gap={theme.spacing(4)} - onClick={() => window.open("https://github.com/bluewave-labs/bluewave-uptime", "_blank", "noreferrer")} + onClick={() => + window.open( + "https://github.com/bluewave-labs/bluewave-uptime", + "_blank", + "noreferrer" + ) + } sx={{ cursor: "pointer" }} > Infrastructure monitors; +} + +export { Infrastructure }; diff --git a/Client/src/Pages/ReadMe.md b/Client/src/Pages/ReadMe.md deleted file mode 100644 index 45ec6ce12..000000000 --- a/Client/src/Pages/ReadMe.md +++ /dev/null @@ -1 +0,0 @@ -#Pages Folder From 082380ad8c74f5222d312d8a18d29cd723869bb5 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Thu, 7 Nov 2024 04:31:31 -0500 Subject: [PATCH 02/16] feat: removing border --- Client/src/Components/Sidebar/index.jsx | 4 ++-- Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx | 5 ----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index ac0e8f9e5..948f875c0 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -19,7 +19,7 @@ import { useLocation, useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { clearAuthState } from "../../Features/Auth/authSlice"; -import { setMode, toggleSidebar } from "../../Features/UI/uiSlice"; +import { /* setMode, */ toggleSidebar } from "../../Features/UI/uiSlice"; import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; import Avatar from "../Avatar"; import LockSvg from "../../assets/icons/lock.svg?react"; @@ -29,7 +29,7 @@ import LogoutSvg from "../../assets/icons/logout.svg?react"; import Support from "../../assets/icons/support.svg?react"; import Dashboard from "../../assets/icons/dashboard.svg?react"; import Account from "../../assets/icons/user-edit.svg?react"; -import StatusPages from "../../assets/icons/status-pages.svg?react"; +/* import StatusPages from "../../assets/icons/status-pages.svg?react"; */ import Maintenance from "../../assets/icons/maintenance.svg?react"; import Monitors from "../../assets/icons/monitors.svg?react"; import Incidents from "../../assets/icons/incidents.svg?react"; diff --git a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx index 613c280a4..4fd2eef56 100644 --- a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx +++ b/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx @@ -18,12 +18,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => { return ( Date: Thu, 7 Nov 2024 12:31:58 -0500 Subject: [PATCH 03/16] feat: redirect from home to monitors, and setting dashboard open when user navigates to screen even withou clicking --- Client/src/App.jsx | 5 +++-- Client/src/Components/Sidebar/index.jsx | 4 ++-- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 65ba6fc21..0814f8c13 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; -import { Routes, Route } from "react-router-dom"; +import { Routes, Route, Navigate } from "react-router-dom"; import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; // import "./App.css"; @@ -79,7 +79,8 @@ function App() { } + /* TODO redirect to /monitors */ + element={} /> state.auth); - // Remove demo password if demo const accountMenuItem = menu.find((item) => item.name === "Account"); if (user.role?.includes("demo") && accountMenuItem) { accountMenuItem.nested = accountMenuItem.nested.filter((item) => { @@ -149,7 +148,7 @@ function Sidebar() { if (matchedKey) { setOpen((prev) => ({ ...prev, [PATH_MAP[matchedKey]]: true })); } - }, []); + }, [location]); return ( ) : collapsed ? ( + /* TODO Do we ever get here? */ Date: Fri, 8 Nov 2024 18:36:43 -0500 Subject: [PATCH 04/16] feat: using common baseTheme to avoid repetition --- Client/src/App.jsx | 1 - Client/src/Components/Heading/index.jsx | 29 ++++++++++++++++ Client/src/Components/Sidebar/index.jsx | 2 ++ Client/src/Pages/Infrastructure/index.jsx | 19 ++++++++++- .../Monitors/Home/CurrentMonitoring/index.jsx | 13 +++----- Client/src/Pages/Monitors/Home/index.css | 1 + Client/src/Utils/Theme/constants.js | 18 ++++++++++ Client/src/Utils/Theme/darkTheme.js | 22 +++++++------ Client/src/Utils/Theme/globalTheme.js | 33 +++++++++++++++++++ Client/src/Utils/Theme/lightTheme.js | 30 ++++++++++------- 10 files changed, 135 insertions(+), 33 deletions(-) create mode 100644 Client/src/Components/Heading/index.jsx create mode 100644 Client/src/Utils/Theme/constants.js create mode 100644 Client/src/Utils/Theme/globalTheme.js diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 0814f8c13..a1b18be74 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -79,7 +79,6 @@ function App() { } /> + {children} + + ); +} + +Heading.propTypes = { + component: PropTypes.oneOf(["h1", "h2", "h3"]).isRequired, + children: PropTypes.string.isRequired, +}; +export { Heading }; diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 810ec8f21..0019486df 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -150,6 +150,8 @@ function Sidebar() { } }, [location]); + /* TODO refactor this, there are a some ternaries and comments in the return */ + return ( Infrastructure monitors; + return ( + + + Infrastructure monitors + + ); } export { Infrastructure }; diff --git a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx b/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx index 4fd2eef56..a7f70d96e 100644 --- a/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx +++ b/Client/src/Pages/Monitors/Home/CurrentMonitoring/index.jsx @@ -1,10 +1,11 @@ import { useTheme } from "@emotion/react"; -import { Box, Stack, Typography } from "@mui/material"; +import { Box, Stack } from "@mui/material"; import Search from "../../../../Components/Inputs/Search"; import MemoizedMonitorTable from "../MonitorTable"; import { useState } from "react"; import useDebounce from "../../../../Utils/debounce"; import PropTypes from "prop-types"; +import { Heading } from "../../../../Components/Heading"; const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => { const theme = useTheme(); @@ -25,14 +26,8 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin }) => { alignItems="center" mb={theme.spacing(8)} > - - Actively monitoring - + Actively monitoring + button:not(.MuiIconButton-root) { font-size: var(--env-var-font-size-medium); height: var(--env-var-height-2); diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js new file mode 100644 index 000000000..9d4361153 --- /dev/null +++ b/Client/src/Utils/Theme/constants.js @@ -0,0 +1,18 @@ +const typographyLevels = { + xs: ".625rem", + s: ".75rem", + m: ".875rem", + l: "1rem", + xl: "1.5rem", +}; + +const paletteLight = { + text: { + primary: "#1c2130", + secondary: "#344054", + tertiary: "#475467", + accent: "#838c99", + }, +}; + +export { typographyLevels, paletteLight }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 6eca20aa3..050907ea6 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,4 +1,5 @@ import { createTheme } from "@mui/material"; +import { baseTheme } from "./globalTheme"; const text = { primary: "#fafafa", @@ -15,20 +16,21 @@ const background = { }; const border = { light: "#27272a", dark: "#36363e" }; -const fontFamilyDefault = - '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; +/* const fontFamilyDefault = + '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */ const shadow = "0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)"; const darkTheme = createTheme({ - typography: { - fontFamily: fontFamilyDefault, - fontSize: 13, - h1: { fontSize: 22, color: text.primary, fontWeight: 500 }, - h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 }, - body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, - body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, - }, + ...baseTheme, + // typography: { + // /* fontFamily: fontFamilyDefault, */ + // fontSize: 13, + // h1: { fontSize: 22, color: text.primary, fontWeight: 500 }, + // h2: { fontSize: 16, color: text.secondary, fontWeight: 400 }, + // body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, + // body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, + // }, chart: { header: { fontWeight: 400, diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js new file mode 100644 index 000000000..d59c84186 --- /dev/null +++ b/Client/src/Utils/Theme/globalTheme.js @@ -0,0 +1,33 @@ +import { paletteLight, typographyLevels } from "./constants"; + +const fontFamilyPrimary = '"Inter" , sans-serif'; +// const fontFamilySecondary = '"Avenir", sans-serif'; + +const baseTheme = { + typography: { + fontFamily: fontFamilyPrimary, + fontSize: typographyLevels.m, + h1: { + fontSize: typographyLevels.xl, + color: paletteLight.text.primary, + fontWeight: 500, + }, + h2: { + fontSize: typographyLevels.l, + color: paletteLight.text.secondary, + fontWeight: 400, + }, + body1: { + fontSize: typographyLevels.m, + color: paletteLight.text.tertiary, + fontWeight: 400, + }, + body2: { + fontSize: typographyLevels.s, + color: paletteLight.text.tertiary, + fontWeight: 400, + }, + }, +}; + +export { baseTheme }; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index e6335a062..edf20da42 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -1,4 +1,6 @@ import { createTheme } from "@mui/material"; +import { typographyLevels } from "./constants"; +import { baseTheme } from "./globalTheme"; const text = { primary: "#1c2130", @@ -15,30 +17,34 @@ const background = { const border = { light: "#eaecf0", dark: "#d0d5dd" }; -const fontFamilyDefault = - '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; +/* TODO stop using mui for fonts. Create text component based on emotion */ + +/* const fontFamilyDefault = + '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */ + const shadow = "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; const lightTheme = createTheme({ - typography: { - fontFamily: fontFamilyDefault, - fontSize: 13, - h1: { fontSize: 22, color: text.primary, fontWeight: 500 }, - h2: { fontSize: 14.5, color: text.secondary, fontWeight: 400 }, - body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, - body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, - }, + ...baseTheme, + // typography: { + // /* fontFamily: fontFamilyDefault, */ + // fontSize: typographyLevels.m, + // h1: { fontSize: typographyLevels.xl, color: text.primary, fontWeight: 500 }, + // h2: { fontSize: typographyLevels.l, color: text.secondary, fontWeight: 400 }, + // body1: { fontSize: typographyLevels.m, color: text.tertiary, fontWeight: 400 }, + // body2: { fontSize: typographyLevels.s, color: text.tertiary, fontWeight: 400 }, + // }, chart: { header: { fontWeight: 400, fill: text.tertiary, - fontSize: 11, + fontSize: typographyLevels.m, }, subheader: { fontWeight: 400, fill: text.tertiary, - fontSize: 9, + fontSize: typographyLevels.xs, }, }, palette: { From 097b71915944eef63521403decfe0630e34f0667 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sat, 9 Nov 2024 08:01:14 -0500 Subject: [PATCH 05/16] feat: creating base for colors out from createTheme --- Client/package-lock.json | 202 ++++++++++++++--- Client/package.json | 7 +- Client/src/App.jsx | 13 +- .../src/Components/Charts/BarChart/index.jsx | 2 +- Client/src/Utils/Theme/constants.js | 75 ++++++- Client/src/Utils/Theme/darkTheme.js | 205 +---------------- Client/src/Utils/Theme/globalTheme.js | 195 +++++++++++++++- Client/src/Utils/Theme/lightTheme.js | 210 +----------------- 8 files changed, 473 insertions(+), 436 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 145d2783b..7f5cc1704 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -8,12 +8,13 @@ "name": "client", "version": "0.0.0", "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", + "6": "^0.0.1", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.17", "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "^5.15.16", + "@mui/material": "6.1", "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.1", "@mui/x-date-pickers": "7.22.1", @@ -304,9 +305,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz", - "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", "license": "MIT", "dependencies": { "regenerator-runtime": "^0.14.0" @@ -1135,9 +1136,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz", - "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==", + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz", + "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==", "license": "MIT", "funding": { "type": "opencollective", @@ -1212,26 +1213,26 @@ } }, "node_modules/@mui/material": { - "version": "5.16.7", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz", - "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==", + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz", + "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/core-downloads-tracker": "^5.16.7", - "@mui/system": "^5.16.7", - "@mui/types": "^7.2.15", - "@mui/utils": "^5.16.6", + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.1.6", + "@mui/system": "^6.1.6", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.6", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=12.0.0" + "node": ">=14.0.0" }, "funding": { "type": "opencollective", @@ -1240,9 +1241,10 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@mui/material-pigment-css": "^6.1.6", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -1251,6 +1253,140 @@ "@emotion/styled": { "optional": true }, + "@mui/material-pigment-css": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/private-theming": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz", + "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.1.6", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/styled-engine": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz", + "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.1", + "@emotion/serialize": "^1.3.2", + "@emotion/sheet": "^1.4.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/system": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz", + "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.1.6", + "@mui/styled-engine": "^6.1.6", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.6", + "clsx": "^2.1.1", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/utils": { + "version": "6.1.6", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz", + "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.19", + "@types/prop-types": "^15.7.13", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { "@types/react": { "optional": true } @@ -1356,12 +1492,12 @@ } }, "node_modules/@mui/types": { - "version": "7.2.15", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.15.tgz", - "integrity": "sha512-nbo7yPhtKJkdf9kcVOF8JZHPZTmqXjJ/tI0bdWgHg5tp9AnIN4Y7f7wm9T+0SyGYJk76+GYZ8Q5XaTYAsUHN0Q==", + "version": "7.2.19", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz", + "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==", "license": "MIT", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, "peerDependenciesMeta": { "@types/react": { @@ -2350,9 +2486,9 @@ "license": "MIT" }, "node_modules/@types/prop-types": { - "version": "15.7.12", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz", - "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==", + "version": "15.7.13", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz", + "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==", "license": "MIT" }, "node_modules/@types/react": { @@ -2417,6 +2553,12 @@ "vite": "^4.2.0 || ^5.0.0" } }, + "node_modules/6": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/6/-/6-0.0.1.tgz", + "integrity": "sha512-kMT8ZPwxbwjMM73Cpy+VbrcYILF5a7UbuziJBcMPCEG33XCw4h00XecvmBMUD2KFfugBolHUmoSzjyl7Wtzbeg==", + "license": "mit" + }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", diff --git a/Client/package.json b/Client/package.json index 1a7213c20..1915e97c9 100644 --- a/Client/package.json +++ b/Client/package.json @@ -11,12 +11,13 @@ "preview": "vite preview" }, "dependencies": { - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.5", + "6": "^0.0.1", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.17", "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "^5.15.16", + "@mui/material": "6.1", "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.1", "@mui/x-date-pickers": "7.22.1", diff --git a/Client/src/App.jsx b/Client/src/App.jsx index a1b18be74..1a59ea9e5 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -35,7 +35,7 @@ import withAdminProp from "./Components/HOC/withAdminProp"; import { ThemeProvider } from "@emotion/react"; import lightTheme from "./Utils/Theme/lightTheme"; import darkTheme from "./Utils/Theme/darkTheme"; -import { CssBaseline } from "@mui/material"; +import { CssBaseline, GlobalStyles } from "@mui/material"; import { getAppSettings } from "./Features/Settings/settingsSlice"; import { logger } from "./Utils/Logger"; // Import the logger import { networkService } from "./main"; @@ -68,8 +68,19 @@ function App() { }, []); return ( + /* Extract Themeprovider, baseline and global styles to Styles */ + { + return { + body: { + backgroundImage: `radial-gradient(circle, ${palette.gradient.color1}, ${palette.gradient.color2}, ${palette.gradient.color3}, ${palette.gradient.color4}, ${palette.gradient.color5})`, + }, + }; + }} + /> + {/* Extract Routes to Routes */} { ], sx: { "& .MuiTooltip-tooltip": { - backgroundColor: theme.palette.background.main, + backgroundColor: theme.palette.secondary.main, border: 1, borderColor: theme.palette.border.dark, borderRadius: theme.shape.borderRadius, diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 9d4361153..21bac7352 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,11 +1,14 @@ +const typographyBase = 14; const typographyLevels = { - xs: ".625rem", - s: ".75rem", - m: ".875rem", - l: "1rem", - xl: "1.5rem", + base: typographyBase, + xs: `${(typographyBase - 4) / 16}rem`, + s: `${(typographyBase - 2) / 16}rem`, + m: `${typographyBase / 16}rem`, + l: `${(typographyBase + 2) / 16}rem`, + xl: `${(typographyBase + 10) / 16}rem`, }; +/* This should not be here. INcorporate into color structure */ const paletteLight = { text: { primary: "#1c2130", @@ -15,4 +18,64 @@ const paletteLight = { }, }; -export { typographyLevels, paletteLight }; +/* TODO Expand this */ + +const paletteColors = { + white: "#FFFFFF", + gray50: "#FEFEFE", + gray60: "#FEFDFE", + gray70: "#FDFDFD", + gray80: "#FDFCFD", + gray90: "#FCFCFD", + gray850: "#131315", + gray860: "#111113", + gray870: "#0F0F11", + gray880: "#0C0C0E", + gray890: "#09090B", + black: "#000000", +}; + +/* TODO Export this as colors */ +/* primary: { + main: { + light:, + dark: + }, + light:{ + light:, + dark: + }, + dark:{ + light:, + dark: + }, + contrastText: { + light:, + dark: + }, + } */ +const semanticColors = { + gradient: { + color1: { + light: paletteColors.gray90, + dark: paletteColors.gray890, + }, + color2: { + light: paletteColors.gray80, + dark: paletteColors.gray880, + }, + color3: { + light: paletteColors.gray70, + dark: paletteColors.gray870, + }, + color4: { + light: paletteColors.gray60, + dark: paletteColors.gray860, + }, + color5: { + light: paletteColors.gray50, + dark: paletteColors.gray850, + }, + }, +}; +export { typographyLevels, paletteLight, semanticColors as colors }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 050907ea6..ea1674ccd 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -1,5 +1,6 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; +import { colors } from "./constants"; const text = { primary: "#fafafa", @@ -16,35 +17,18 @@ const background = { }; const border = { light: "#27272a", dark: "#36363e" }; -/* const fontFamilyDefault = - '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */ -const shadow = - "0px 4px 24px -4px rgba(255, 255, 255, 0.03), 0px 3px 3px -3px rgba(255, 255, 255, 0.01)"; +const { gradient } = colors; +/* const gradient = { + color1: "#09090b", + color2: "#0c0c0e", + color3: "#0f0f11", + color4: "#111113", + color5: "#131315", +}; */ const darkTheme = createTheme({ ...baseTheme, - // typography: { - // /* fontFamily: fontFamilyDefault, */ - // fontSize: 13, - // h1: { fontSize: 22, color: text.primary, fontWeight: 500 }, - // h2: { fontSize: 16, color: text.secondary, fontWeight: 400 }, - // body1: { fontSize: 13, color: text.tertiary, fontWeight: 400 }, - // body2: { fontSize: 12, color: text.tertiary, fontWeight: 400 }, - // }, - chart: { - header: { - fontWeight: 400, - fill: text.tertiary, - fontSize: 11, - }, - subheader: { - fontWeight: 400, - fill: text.tertiary, - fontSize: 9, - }, - }, palette: { - mode: "dark", primary: { main: "#1570ef" }, secondary: { main: "#2D2D33" }, text: text, @@ -57,6 +41,7 @@ const darkTheme = createTheme({ light: background.main, border: border.light, }, + gradient, success: { text: "#079455", main: "#45bb7a", @@ -94,176 +79,6 @@ const darkTheme = createTheme({ autofill: "#2d2d33", }, }, - spacing: 2, - components: { - MuiCssBaseline: { - styleOverrides: { - body: { - backgroundImage: - "radial-gradient(circle, #09090b, #0c0c0e, #0f0f11, #111113, #131315, #131315, #131315, #131315, #111113, #0f0f11, #0c0c0e, #09090b)", - lineHeight: "inherit", - paddingLeft: "calc(100vw - 100%)", - }, - }, - }, - MuiButton: { - defaultProps: { - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - variants: [ - { - props: (props) => props.variant === "group", - style: { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.background.main, - border: 1, - borderStyle: "solid", - borderColor: theme.palette.border.light, - }, - }, - { - props: (props) => props.variant === "group" && props.filled === "true", - style: { - backgroundColor: theme.palette.secondary.main, - }, - }, - { - props: (props) => - props.variant === "contained" && props.color === "secondary", - style: { - border: 1, - borderStyle: "solid", - borderColor: theme.palette.border.dark, - }, - }, - ], - fontWeight: 400, - borderRadius: 4, - boxShadow: "none", - textTransform: "none", - "&:focus": { - outline: "none", - }, - "&:hover": { - boxShadow: "none", - }, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - padding: 4, - transition: "none", - "&:hover": { - backgroundColor: border.light, - }, - }, - }, - }, - MuiPaper: { - styleOverrides: { - root: { - marginTop: 4, - padding: 0, - border: 1, - borderStyle: "solid", - borderColor: border.light, - borderRadius: 4, - boxShadow: shadow, - backgroundColor: background.main, - backgroundImage: "none", - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - transition: "none", - }, - }, - }, - MuiMenuItem: { - styleOverrides: { - root: { - borderRadius: 4, - backgroundColor: "inherit", - padding: "4px 6px", - color: text.secondary, - fontSize: 13, - margin: 2, - minWidth: 100, - "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible": - { - backgroundColor: background.fill, - }, - }, - }, - }, - MuiTableCell: { - styleOverrides: { - root: { - borderBottomColor: border.light, - }, - }, - }, - MuiTableHead: { - styleOverrides: { - root: { - backgroundColor: background.accent, - }, - }, - }, - MuiPagination: { - styleOverrides: { - root: { - backgroundColor: background.main, - border: 1, - borderStyle: "solid", - borderColor: border.light, - "& button": { - color: text.tertiary, - borderRadius: 4, - }, - "& li:first-of-type button, & li:last-of-type button": { - border: 1, - borderStyle: "solid", - borderColor: border.light, - }, - }, - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: { - "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": { - backgroundColor: background.fill, - }, - }, - }, - }, - MuiSkeleton: { - styleOverrides: { - root: { - backgroundColor: "#151518", - }, - }, - }, - }, - shape: { - borderRadius: 2, - borderThick: 2, - boxShadow: shadow, - }, }); export default darkTheme; diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index d59c84186..f94e7cb37 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -3,10 +3,30 @@ import { paletteLight, typographyLevels } from "./constants"; const fontFamilyPrimary = '"Inter" , sans-serif'; // const fontFamilySecondary = '"Avenir", sans-serif'; +const shadow = + "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; + +const background = { + main: "#FFFFFF", + alt: "#FCFCFD", + fill: "#F4F4F4", + accent: "#f9fafb", +}; + +const border = { light: "#eaecf0", dark: "#d0d5dd" }; + +const text = { + primary: "#1c2130", + secondary: "#344054", + tertiary: "#475467", + accent: "#838c99", +}; + const baseTheme = { + /* TODO colors should not live here */ typography: { fontFamily: fontFamilyPrimary, - fontSize: typographyLevels.m, + fontSize: 14, h1: { fontSize: typographyLevels.xl, color: paletteLight.text.primary, @@ -28,6 +48,179 @@ const baseTheme = { fontWeight: 400, }, }, + /* TODO take chart from here, it should live inside of the gauge, and get info from the theme */ + chart: { + header: { + fontWeight: 400, + fill: paletteLight.text.tertiary, + fontSize: typographyLevels.m, + }, + subheader: { + fontWeight: 400, + fill: paletteLight.text.tertiary, + fontSize: typographyLevels.xs, + }, + }, + spacing: 2, + components: { + MuiButton: { + defaultProps: { + disableRipple: true, + }, + styleOverrides: { + root: ({ theme }) => ({ + variants: [ + { + props: (props) => props.variant === "group", + style: { + color: theme.palette.secondary.contrastText, + backgroundColor: theme.palette.background.main, + border: 1, + borderStyle: "solid", + borderColor: theme.palette.border.light, + }, + }, + { + props: (props) => props.variant === "group" && props.filled === "true", + style: { + backgroundColor: theme.palette.secondary.main, + }, + }, + { + props: (props) => + props.variant === "contained" && props.color === "secondary", + style: { + border: 1, + borderStyle: "solid", + borderColor: theme.palette.border.light, + }, + }, + ], + fontWeight: 400, + borderRadius: 4, + boxShadow: "none", + textTransform: "none", + "&:focus": { + outline: "none", + }, + "&:hover": { + boxShadow: "none", + }, + }), + }, + }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 4, + transition: "none", + "&:hover": { + backgroundColor: background.fill, + }, + }, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + marginTop: 4, + padding: 0, + border: 1, + borderStyle: "solid", + borderColor: border.light, + borderRadius: 4, + boxShadow: shadow, + backgroundColor: background.main, + backgroundImage: "none", + }, + }, + }, + MuiList: { + styleOverrides: { + root: { + padding: 0, + }, + }, + }, + MuiListItemButton: { + styleOverrides: { + root: { + transition: "none", + }, + }, + }, + MuiMenuItem: { + styleOverrides: { + root: { + borderRadius: 4, + backgroundColor: "inherit", + padding: "4px 6px", + color: text.secondary, + fontSize: 13, + margin: 2, + minWidth: 100, + "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible": + { + backgroundColor: background.fill, + }, + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: border.light, + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: background.accent, + }, + }, + }, + MuiPagination: { + styleOverrides: { + root: { + backgroundColor: background.main, + border: 1, + borderStyle: "solid", + borderColor: border.light, + "& button": { + color: text.tertiary, + borderRadius: 4, + }, + "& li:first-of-type button, & li:last-of-type button": { + border: 1, + borderStyle: "solid", + borderColor: border.light, + }, + }, + }, + }, + MuiPaginationItem: { + styleOverrides: { + root: { + "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": { + backgroundColor: background.fill, + }, + }, + }, + }, + MuiSkeleton: { + styleOverrides: { + root: ({ theme }) => ({ + backgroundColor: theme.palette.unresolved.bg, + }), + }, + }, + }, + shape: { + borderRadius: 2, + borderThick: 2, + boxShadow: shadow, + }, }; export { baseTheme }; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index edf20da42..1f88d0696 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -1,6 +1,6 @@ import { createTheme } from "@mui/material"; -import { typographyLevels } from "./constants"; import { baseTheme } from "./globalTheme"; +import { colors } from "./constants"; const text = { primary: "#1c2130", @@ -15,38 +15,19 @@ const background = { accent: "#f9fafb", }; +const { gradient } = colors; +/* const gradient = { + color1: "#fcfcfd", + color2: "#fdfcfd", + color3: "#fdfdfd", + color4: "#fefdfe", + color5: "#fefefe", +}; */ + const border = { light: "#eaecf0", dark: "#d0d5dd" }; -/* TODO stop using mui for fonts. Create text component based on emotion */ - -/* const fontFamilyDefault = - '"Inter","system-ui", "Avenir", "Helvetica", "Arial", sans-serif'; */ - -const shadow = - "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; - const lightTheme = createTheme({ ...baseTheme, - // typography: { - // /* fontFamily: fontFamilyDefault, */ - // fontSize: typographyLevels.m, - // h1: { fontSize: typographyLevels.xl, color: text.primary, fontWeight: 500 }, - // h2: { fontSize: typographyLevels.l, color: text.secondary, fontWeight: 400 }, - // body1: { fontSize: typographyLevels.m, color: text.tertiary, fontWeight: 400 }, - // body2: { fontSize: typographyLevels.s, color: text.tertiary, fontWeight: 400 }, - // }, - chart: { - header: { - fontWeight: 400, - fill: text.tertiary, - fontSize: typographyLevels.m, - }, - subheader: { - fontWeight: 400, - fill: text.tertiary, - fontSize: typographyLevels.xs, - }, - }, palette: { primary: { main: "#1570EF" }, secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" }, @@ -60,6 +41,7 @@ const lightTheme = createTheme({ light: background.main, border: border.dark, }, + gradient, success: { text: "#079455", main: "#17b26a", @@ -96,176 +78,6 @@ const lightTheme = createTheme({ autofill: "#e8f0fe", }, }, - spacing: 2, - components: { - MuiCssBaseline: { - styleOverrides: { - body: { - backgroundImage: - "radial-gradient(circle, #fcfcfd, #fdfcfd, #fdfdfd, #fefdfe, #fefefe, #fefefe, #fefefe, #fefefe, #fefdfe, #fdfdfd, #fdfcfd, #fcfcfd)", - lineHeight: "inherit", - paddingLeft: "calc(100vw - 100%)", - }, - }, - }, - MuiButton: { - defaultProps: { - disableRipple: true, - }, - styleOverrides: { - root: ({ theme }) => ({ - variants: [ - { - props: (props) => props.variant === "group", - style: { - color: theme.palette.secondary.contrastText, - backgroundColor: theme.palette.background.main, - border: 1, - borderStyle: "solid", - borderColor: theme.palette.border.light, - }, - }, - { - props: (props) => props.variant === "group" && props.filled === "true", - style: { - backgroundColor: theme.palette.secondary.main, - }, - }, - { - props: (props) => - props.variant === "contained" && props.color === "secondary", - style: { - border: 1, - borderStyle: "solid", - borderColor: theme.palette.border.light, - }, - }, - ], - fontWeight: 400, - borderRadius: 4, - boxShadow: "none", - textTransform: "none", - "&:focus": { - outline: "none", - }, - "&:hover": { - boxShadow: "none", - }, - }), - }, - }, - MuiIconButton: { - styleOverrides: { - root: { - padding: 4, - transition: "none", - "&:hover": { - backgroundColor: background.fill, - }, - }, - }, - }, - MuiPaper: { - styleOverrides: { - root: { - marginTop: 4, - padding: 0, - border: 1, - borderStyle: "solid", - borderColor: border.light, - borderRadius: 4, - boxShadow: shadow, - backgroundColor: background.main, - backgroundImage: "none", - }, - }, - }, - MuiList: { - styleOverrides: { - root: { - padding: 0, - }, - }, - }, - MuiListItemButton: { - styleOverrides: { - root: { - transition: "none", - }, - }, - }, - MuiMenuItem: { - styleOverrides: { - root: { - borderRadius: 4, - backgroundColor: "inherit", - padding: "4px 6px", - color: text.secondary, - fontSize: 13, - margin: 2, - minWidth: 100, - "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible": - { - backgroundColor: background.fill, - }, - }, - }, - }, - MuiTableCell: { - styleOverrides: { - root: { - borderBottomColor: border.light, - }, - }, - }, - MuiTableHead: { - styleOverrides: { - root: { - backgroundColor: background.accent, - }, - }, - }, - MuiPagination: { - styleOverrides: { - root: { - backgroundColor: background.main, - border: 1, - borderStyle: "solid", - borderColor: border.light, - "& button": { - color: text.tertiary, - borderRadius: 4, - }, - "& li:first-of-type button, & li:last-of-type button": { - border: 1, - borderStyle: "solid", - borderColor: border.light, - }, - }, - }, - }, - MuiPaginationItem: { - styleOverrides: { - root: { - "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": { - backgroundColor: background.fill, - }, - }, - }, - }, - MuiSkeleton: { - styleOverrides: { - root: { - backgroundColor: "#f2f4f7", - }, - }, - }, - }, - shape: { - borderRadius: 2, - borderThick: 2, - boxShadow: shadow, - }, }); export default lightTheme; From 067400437f72718a6fae26af6c9006e7470980a0 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Sun, 10 Nov 2024 17:00:13 -0500 Subject: [PATCH 06/16] feat: reoganizing color scheme --- Client/src/Components/Alert/index.jsx | 1 + .../src/Components/Charts/BarChart/index.jsx | 11 +- Client/src/Components/Check/Check.jsx | 2 +- Client/src/Components/Inputs/Field/index.jsx | 6 +- Client/src/Components/Inputs/Search/index.jsx | 2 +- Client/src/Components/Label/index.jsx | 10 +- Client/src/Components/ProgressBars/index.jsx | 6 +- .../MaintenanceTable/ActionsMenu/index.jsx | 2 +- .../Pages/Monitors/CreateMonitor/index.jsx | 60 +- .../Pages/Monitors/Details/Charts/index.jsx | 16 +- Client/src/Pages/Monitors/Home/StatusBox.jsx | 2 +- .../src/Pages/Monitors/Home/actionsMenu.jsx | 2 +- Client/src/Pages/Monitors/utils.jsx | 20 +- .../Pages/PageSpeed/CreatePageSpeed/index.jsx | 515 +++++++++--------- .../PageSpeed/Details/Charts/PieChart.jsx | 14 +- Client/src/Pages/PageSpeed/Details/index.jsx | 2 +- Client/src/Utils/Theme/constants.js | 131 ++++- Client/src/Utils/Theme/darkTheme.js | 81 +-- Client/src/Utils/Theme/lightTheme.js | 84 +-- 19 files changed, 551 insertions(+), 416 deletions(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index 49c089813..116ac5dea 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -31,6 +31,7 @@ const icons = { const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { const theme = useTheme(); + /* TODO check if this still works. text bg and border not necessarilly exist. Text becomes contrastText. border becomes contrastText. bg becomes dark */ const { text, bg, border } = theme.palette[variant]; const icon = icons[variant]; diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 20f016f46..c6308ee2d 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -5,6 +5,7 @@ import { useEffect, useState } from "react"; import "./index.css"; import { useSelector } from "react-redux"; +/* TODO add prop validation and jsdocs */ const BarChart = ({ checks = [] }) => { const theme = useTheme(); const [animate, setAnimate] = useState(false); @@ -65,7 +66,9 @@ const BarChart = ({ checks = [] }) => { width={theme.spacing(4)} height={theme.spacing(4)} backgroundColor={ - check.status ? theme.palette.success.main : theme.palette.error.text + check.status + ? theme.palette.success.main + : theme.palette.error.contrastText } sx={{ borderRadius: "50%" }} /> @@ -138,7 +141,7 @@ const BarChart = ({ checks = [] }) => { width="9px" height="100%" backgroundColor={ - check.status ? theme.palette.success.bg : theme.palette.error.bg + check.status ? theme.palette.success.dark : theme.palette.error.dark } sx={{ borderRadius: theme.spacing(1.5), @@ -153,7 +156,9 @@ const BarChart = ({ checks = [] }) => { width="100%" height={`${animate ? check.responseTime : 0}%`} backgroundColor={ - check.status ? theme.palette.success.main : theme.palette.error.text + check.status + ? theme.palette.success.main + : theme.palette.error.contrastText } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index 01a023345..3219fec29 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -24,7 +24,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) => const theme = useTheme(); const colors = { success: theme.palette.success.main, - error: theme.palette.error.text, + error: theme.palette.error.contrastText, info: theme.palette.info.border, }; diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx index 4ead8a705..ccb0c1e37 100644 --- a/Client/src/Components/Inputs/Field/index.jsx +++ b/Client/src/Components/Inputs/Field/index.jsx @@ -67,7 +67,7 @@ const Field = forwardRef( borderColor: theme.palette.border.dark, }, "&:has(.input-error) .MuiOutlinedInput-root fieldset": { - borderColor: theme.palette.error.text, + borderColor: theme.palette.error.contrastText, }, display: hidden ? "none" : "", }} @@ -83,7 +83,7 @@ const Field = forwardRef( * @@ -189,7 +189,7 @@ const Field = forwardRef( { const colors = { up: { dotColor: theme.palette.success.main, - bgColor: theme.palette.success.bg, + bgColor: theme.palette.success.dark, borderColor: theme.palette.success.light, }, down: { - dotColor: theme.palette.error.text, - bgColor: theme.palette.error.bg, + dotColor: theme.palette.error.contrastText, + bgColor: theme.palette.error.dark, borderColor: theme.palette.error.light, }, paused: { dotColor: theme.palette.warning.main, - bgColor: theme.palette.warning.bg, + bgColor: theme.palette.warning.dark, borderColor: theme.palette.warning.light, }, pending: { dotColor: theme.palette.warning.main, - bgColor: theme.palette.warning.bg, + bgColor: theme.palette.warning.dark, borderColor: theme.palette.warning.light, }, "cannot resolve": { diff --git a/Client/src/Components/ProgressBars/index.jsx b/Client/src/Components/ProgressBars/index.jsx index 46b2efab1..198f740aa 100644 --- a/Client/src/Components/ProgressBars/index.jsx +++ b/Client/src/Components/ProgressBars/index.jsx @@ -34,11 +34,11 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => backgroundColor: theme.palette.background.fill, "&:has(.input-error)": { borderColor: theme.palette.error.main, - backgroundColor: theme.palette.error.bg, + backgroundColor: theme.palette.error.dark, py: theme.spacing(4), px: theme.spacing(8), "& > .MuiStack-root > svg": { - fill: theme.palette.error.text, + fill: theme.palette.error.contrastText, width: "20px", height: "20px", }, @@ -85,7 +85,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) => {error} diff --git a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx index 8928b1e05..35a28f6da 100644 --- a/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx +++ b/Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx @@ -114,7 +114,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => { "& ul": { p: theme.spacing(2.5) }, "& li": { m: 0 }, "& li:last-of-type": { - color: theme.palette.error.text, + color: theme.palette.error.contrastText, }, }, }, diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index bfa62c7fa..451ca2df3 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -1,10 +1,10 @@ import { useState, useEffect } from "react"; import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material"; -import LoadingButton from '@mui/lab/LoadingButton'; +import LoadingButton from "@mui/lab/LoadingButton"; import { useSelector, useDispatch } from "react-redux"; import { monitorValidation } from "../../../Validation/validation"; import { createUptimeMonitor } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; -import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice" +import { checkEndpointResolution } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice"; import { useNavigate, useParams } from "react-router-dom"; import { useTheme } from "@emotion/react"; import { createToast } from "../../../Utils/toastUtils"; @@ -19,12 +19,12 @@ import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMon import "./index.css"; const CreateMonitor = () => { - const MS_PER_MINUTE = 60000; - const { user, authToken } = useSelector((state) => state.auth); - const { monitors, isLoading } = useSelector((state) => state.uptimeMonitors); - const dispatch = useDispatch(); - const navigate = useNavigate(); - const theme = useTheme(); + const MS_PER_MINUTE = 60000; + const { user, authToken } = useSelector((state) => state.auth); + const { monitors, isLoading } = useSelector((state) => state.uptimeMonitors); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const theme = useTheme(); const idMap = { "monitor-url": "url", @@ -148,16 +148,18 @@ const CreateMonitor = () => { setErrors(newErrors); createToast({ body: "Error validation data." }); } else { - if (monitor.type === "http") { - const checkEndpointAction = await dispatch( - checkEndpointResolution({ authToken, monitorURL: form.url }) - ) - if (checkEndpointAction.meta.requestStatus === "rejected") { - createToast({ body: "The endpoint you entered doesn't resolve. Check the URL again." }); - setErrors({ url: "The entered URL is not reachable." }); - return; - } - } + if (monitor.type === "http") { + const checkEndpointAction = await dispatch( + checkEndpointResolution({ authToken, monitorURL: form.url }) + ); + if (checkEndpointAction.meta.requestStatus === "rejected") { + createToast({ + body: "The endpoint you entered doesn't resolve. Check the URL again.", + }); + setErrors({ url: "The entered URL is not reachable." }); + return; + } + } form = { ...form, @@ -304,7 +306,7 @@ const CreateMonitor = () => { {errors["type"]} @@ -386,19 +388,19 @@ const CreateMonitor = () => { direction="row" justifyContent="flex-end" > - - Create monitor - + + Create monitor + ); }; -export default CreateMonitor; \ No newline at end of file +export default CreateMonitor; diff --git a/Client/src/Pages/Monitors/Details/Charts/index.jsx b/Client/src/Pages/Monitors/Details/Charts/index.jsx index 52b677495..915ee0933 100644 --- a/Client/src/Pages/Monitors/Details/Charts/index.jsx +++ b/Client/src/Pages/Monitors/Details/Charts/index.jsx @@ -61,7 +61,7 @@ const UpBarChart = memo(({ data, type, onBarHover }) => { ? { main: theme.palette.success.main, light: theme.palette.success.light } : uptime > 50 ? { main: theme.palette.warning.main, light: theme.palette.warning.light } - : { main: theme.palette.error.text, light: theme.palette.error.light }; + : { main: theme.palette.error.contrastText, light: theme.palette.error.light }; }; // TODO - REMOVE THIS LATER @@ -201,10 +201,10 @@ const DownBarChart = memo(({ data, type, onBarHover }) => { key={`cell-${entry.time}`} fill={ hoveredBarIndex === index - ? theme.palette.error.text + ? theme.palette.error.contrastText : chartHovered ? theme.palette.error.light - : theme.palette.error.text + : theme.palette.error.contrastText } onMouseEnter={() => { setHoveredBarIndex(index); @@ -246,24 +246,24 @@ const ResponseGaugeChart = ({ data }) => { ? { category: "Excellent", main: theme.palette.success.main, - bg: theme.palette.success.bg, + bg: theme.palette.success.dark, } : responseTime <= 500 ? { category: "Fair", main: theme.palette.success.main, - bg: theme.palette.success.bg, + bg: theme.palette.success.dark, } : responseTime <= 600 ? { category: "Acceptable", main: theme.palette.warning.main, - bg: theme.palette.warning.bg, + bg: theme.palette.warning.dark, } : { category: "Poor", - main: theme.palette.error.text, - bg: theme.palette.error.bg, + main: theme.palette.error.contrastText, + bg: theme.palette.error.dark, }; return ( diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx index b87e883d7..d84690432 100644 --- a/Client/src/Pages/Monitors/Home/StatusBox.jsx +++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx @@ -25,7 +25,7 @@ const StatusBox = ({ title, value }) => { ); } else if (title === "down") { - color = theme.palette.error.text; + color = theme.palette.error.contrastText; icon = ( diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index 7efffa93c..4ab601fea 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx @@ -109,7 +109,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => { "& ul": { p: theme.spacing(2.5) }, "& li": { m: 0 }, "& li:last-of-type": { - color: theme.palette.error.text, + color: theme.palette.error.contrastText, }, }, }, diff --git a/Client/src/Pages/Monitors/utils.jsx b/Client/src/Pages/Monitors/utils.jsx index 826a92bbb..4dc4260cd 100644 --- a/Client/src/Pages/Monitors/utils.jsx +++ b/Client/src/Pages/Monitors/utils.jsx @@ -28,20 +28,20 @@ const useUtils = () => { }; const statusStyles = { up: { - backgroundColor: theme.palette.success.bg, - background: `linear-gradient(340deg, ${theme.palette.success.light} -60%, ${theme.palette.success.bg} 35%)`, + backgroundColor: theme.palette.success.dark, + background: `linear-gradient(340deg, ${theme.palette.success.light} -60%, ${theme.palette.success.dark} 35%)`, borderColor: theme.palette.success.light, "& h2": { color: theme.palette.success.main }, }, down: { - backgroundColor: theme.palette.error.bg, - background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.bg} 35%)`, + backgroundColor: theme.palette.error.dark, + background: `linear-gradient(340deg, ${theme.palette.error.light} -60%, ${theme.palette.error.dark} 35%)`, borderColor: theme.palette.error.light, "& h2": { color: theme.palette.error.main }, }, paused: { - backgroundColor: theme.palette.warning.bg, - background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.bg} 35%)`, + backgroundColor: theme.palette.warning.dark, + background: `linear-gradient(340deg, ${theme.palette.warning.light} -60%, ${theme.palette.warning.dark} 35%)`, borderColor: theme.palette.warning.light, "& h2": { color: theme.palette.warning.main }, }, @@ -54,22 +54,22 @@ const useUtils = () => { }; const pagespeedStyles = { up: { - bg: theme.palette.success.bg, + bg: theme.palette.success.dark, light: theme.palette.success.light, stroke: theme.palette.success.main, }, down: { - bg: theme.palette.error.bg, + bg: theme.palette.error.dark, light: theme.palette.error.light, stroke: theme.palette.error.main, }, paused: { - bg: theme.palette.warning.bg, + bg: theme.palette.warning.dark, light: theme.palette.warning.light, stroke: theme.palette.warning.main, }, pending: { - bg: theme.palette.warning.bg, + bg: theme.palette.warning.dark, light: theme.palette.warning.light, stroke: theme.palette.warning.main, }, diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx index 162b231a2..f771c3988 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx @@ -1,11 +1,14 @@ import { useState } from "react"; import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material"; -import LoadingButton from '@mui/lab/LoadingButton'; +import LoadingButton from "@mui/lab/LoadingButton"; import { useSelector, useDispatch } from "react-redux"; import { monitorValidation } from "../../../Validation/validation"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@emotion/react"; -import { createPageSpeed, checkEndpointResolution } from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice"; +import { + createPageSpeed, + checkEndpointResolution, +} from "../../../Features/PageSpeedMonitor/pageSpeedMonitorSlice"; import { createToast } from "../../../Utils/toastUtils"; import { logger } from "../../../Utils/Logger"; import { ConfigBox } from "../../Monitors/styled"; @@ -17,12 +20,12 @@ import Breadcrumbs from "../../../Components/Breadcrumbs"; import "./index.css"; const CreatePageSpeed = () => { - const MS_PER_MINUTE = 60000; - const { user, authToken } = useSelector((state) => state.auth); - const { isLoading } = useSelector((state) => state.pageSpeedMonitors); - const dispatch = useDispatch(); - const navigate = useNavigate(); - const theme = useTheme(); + const MS_PER_MINUTE = 60000; + const { user, authToken } = useSelector((state) => state.auth); + const { isLoading } = useSelector((state) => state.pageSpeedMonitors); + const dispatch = useDispatch(); + const navigate = useNavigate(); + const theme = useTheme(); const idMap = { "monitor-url": "url", @@ -105,252 +108,260 @@ const CreatePageSpeed = () => { abortEarly: false, }); - if (error) { - const newErrors = {}; - error.details.forEach((err) => { - newErrors[err.path[0]] = err.message; - }); - setErrors(newErrors); - createToast({ body: "Error validation data." }); - } else { - const checkEndpointAction = await dispatch( - checkEndpointResolution({ authToken, monitorURL: form.url }) - ) - if (checkEndpointAction.meta.requestStatus === "rejected") { - createToast({ body: "The endpoint you entered doesn't resolve. Check the URL again." }); - setErrors({ url: "The entered URL is not reachable." }); - return; - } + if (error) { + const newErrors = {}; + error.details.forEach((err) => { + newErrors[err.path[0]] = err.message; + }); + setErrors(newErrors); + createToast({ body: "Error validation data." }); + } else { + const checkEndpointAction = await dispatch( + checkEndpointResolution({ authToken, monitorURL: form.url }) + ); + if (checkEndpointAction.meta.requestStatus === "rejected") { + createToast({ + body: "The endpoint you entered doesn't resolve. Check the URL again.", + }); + setErrors({ url: "The entered URL is not reachable." }); + return; + } - form = { - ...form, - description: form.name, - teamId: user.teamId, - userId: user._id, - notifications: monitor.notifications, - }; - const action = await dispatch( - createPageSpeed({ authToken, monitor: form }) - ); - if (action.meta.requestStatus === "fulfilled") { - createToast({ body: "Monitor created successfully!" }); - navigate("/pagespeed"); - } else { - createToast({ body: "Failed to create monitor." }); - } - } - }; + form = { + ...form, + description: form.name, + teamId: user.teamId, + userId: user._id, + notifications: monitor.notifications, + }; + const action = await dispatch(createPageSpeed({ authToken, monitor: form })); + if (action.meta.requestStatus === "fulfilled") { + createToast({ body: "Monitor created successfully!" }); + navigate("/pagespeed"); + } else { + createToast({ body: "Failed to create monitor." }); + } + } + }; - //select values - const frequencies = [ - { _id: 3, name: "3 minutes" }, - { _id: 5, name: "5 minutes" }, - { _id: 10, name: "10 minutes" }, - { _id: 20, name: "20 minutes" }, - { _id: 60, name: "1 hour" }, - { _id: 1440, name: "1 day" }, - { _id: 10080, name: "1 week" }, - ]; - return ( - - - - - - Create your{" "} - - - pagespeed monitor - - - - - General settings - - Here you can select the URL of the host, together with the type of - monitor. - - - - - - - - - - Checks to perform - - You can always add or remove checks after adding your site. - - - - - handleChange(event)} - /> - - - - - - {errors["type"] ? ( - - - {errors["type"]} - - - ) : ( - "" - )} - - - - - Incident notifications - - When there is an incident, notify users. - - - - When there is a new incident, - logger.warn("disabled")} - isDisabled={true} - /> - notification.type === "email" - )} - value={user?.email} - onChange={(event) => handleChange(event)} - /> - logger.warn("disabled")} - isDisabled={true} - /> - {monitor.notifications.some( - (notification) => notification.type === "emails" - ) ? ( - - logger.warn("disabled")} - /> - - You can separate multiple emails with a comma - - - ) : ( - "" - )} - - - - - Advanced settings - - - handleChange(event, "interval")} + items={frequencies} + /> + + + + + Create monitor + + + + + ); }; export default CreatePageSpeed; diff --git a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx b/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx index a330c3c12..d1d106c11 100644 --- a/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx +++ b/Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx @@ -127,22 +127,22 @@ const PieChart = ({ audits }) => { return { stroke: theme.palette.success.main, strokeBg: theme.palette.success.light, - text: theme.palette.success.text, - bg: theme.palette.success.bg, + text: theme.palette.success.contrastText, + bg: theme.palette.success.dark, }; else if (value >= 50 && value < 90) return { stroke: theme.palette.warning.main, strokeBg: theme.palette.warning.light, - text: theme.palette.warning.text, - bg: theme.palette.warning.bg, + text: theme.palette.warning.contrastText, + bg: theme.palette.warning.dark, }; else if (value >= 0 && value < 50) return { - stroke: theme.palette.error.text, + stroke: theme.palette.error.contrastText, strokeBg: theme.palette.error.light, - text: theme.palette.error.text, - bg: theme.palette.error.bg, + text: theme.palette.error.contrastText, + bg: theme.palette.error.dark, }; return { stroke: theme.palette.unresolved.main, diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 015a17c6b..ca852e124 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -362,7 +362,7 @@ const PageSpeedDetails = ({ isAdmin }) => { : score >= 50 ? theme.palette.warning.main : score >= 0 - ? theme.palette.error.text + ? theme.palette.error.contrastText : theme.palette.unresolved.main; // Find the position where the number ends and the unit begins diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 21bac7352..ceb138fc3 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -27,34 +27,127 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", + gray100: "#F4F4F4", + gray200: "#E3E3E3", + gray800: "#2D2D33", + gray830: "#262115", gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", gray880: "#0C0C0E", gray890: "#09090B", black: "#000000", + blueBlueWave: "#1570EF", + blue700: "#475467", + green20: "#ECFDF3", + green50: "#D4F4E1", + green150: "#45BB7A", + green200: "#17B26A", + green400: "#079455", + green800: "#1C4428", + green900: "#12261E", + red50: "#F9ECED", + red100: "#FBD1D1", + red200: "#F04438", + red300: "#D32F2F", + red700: "#542426", + red800: "#301A1F", + orange50: "#FEF8EA", + orange100: "#FFECBC", + orange200: "#FEC84B", + orange300: "#FDB022", + orange400: "#FF9F00", + orange500: "#E88C30", + orange600: "#DC6803", + orange800: "#624711", }; -/* TODO Export this as colors */ -/* primary: { - main: { - light:, - dark: - }, - light:{ - light:, - dark: - }, - dark:{ - light:, - dark: - }, - contrastText: { - light:, - dark: - }, - } */ const semanticColors = { + primary: { + main: { + light: paletteColors.blueBlueWave, + dark: paletteColors.blueBlueWave, + }, + // TODO we dont have primary light, dark or contrast text + }, + secondary: { + main: { + light: paletteColors.gray100, + dark: paletteColors.gray800, + }, + // TODO we dont have secondary light + dark: { + light: paletteColors.gray200, + //TODO we dont have secondary dark for dark mode + }, + constrastText: { + light: paletteColors.blue700, + //TODO we dont have secondary contrastText for dark mode + }, + }, + success: { + main: { + light: paletteColors.green200, + dark: paletteColors.green150, + }, + contrastText: { + //TODO values are equal (confirm) + //TODO contrasttext semantically should be something that contrasts with the main + light: paletteColors.green400, + dark: paletteColors.green400, + }, + light: { + light: paletteColors.green50, + //TODO dark mode light success is darker than the main success + dark: paletteColors.green800, + }, + dark: { + light: paletteColors.green20, + dark: paletteColors.green900, + }, + }, + error: { + main: { + light: paletteColors.red300, + dark: paletteColors.red300, + }, + contrastText: { + //TODO contrasttext semantically should be something that contrasts with the main + light: paletteColors.red200, + dark: paletteColors.red200, + }, + light: { + light: paletteColors.red100, + dark: paletteColors.red700, + }, + dark: { + light: paletteColors.red50, + dark: paletteColors.red800, + }, + }, + warning: { + main: { + light: paletteColors.orange300, + dark: paletteColors.orange400, + }, + text: { + light: paletteColors.orange600, + dark: paletteColors.orange500, + }, + light: { + light: paletteColors.orange100, + dark: paletteColors.orange800, + }, + bg: { + light: paletteColors.orange50, + dark: paletteColors.gray830, + }, + border: { + light: paletteColors.orange200, + dark: paletteColors.orange500, + }, + }, + gradient: { color1: { light: paletteColors.gray90, diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index ea1674ccd..5b47b3963 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -17,51 +17,43 @@ const background = { }; const border = { light: "#27272a", dark: "#36363e" }; -const { gradient } = colors; -/* const gradient = { - color1: "#09090b", - color2: "#0c0c0e", - color3: "#0f0f11", - color4: "#111113", - color5: "#131315", -}; */ +const { + primary, + secondary, + success, + error, + warning, + gradient: { + color1: { dark: color1 }, + color2: { dark: color2 }, + color3: { dark: color3 }, + color4: { dark: color4 }, + color5: { dark: color5 }, + }, +} = colors; const darkTheme = createTheme({ ...baseTheme, palette: { - primary: { main: "#1570ef" }, - secondary: { main: "#2D2D33" }, - text: text, - background: background, - border: border, - info: { - text: text.primary, - main: text.secondary, - bg: background.main, - light: background.main, - border: border.light, - }, - gradient, + primary: { main: primary.main.dark }, + secondary: { main: secondary.main.dark }, success: { - text: "#079455", - main: "#45bb7a", - light: "#1c4428", - bg: "#12261e", + main: success.main.dark, + contrastText: success.contrastText.dark, + light: success.light.dark, + dark: success.dark.dark, }, error: { - text: "#f04438", - main: "#d32f2f", - light: "#542426", - bg: "#301a1f", - dark: "#932020", - border: "#f04438", + main: error.main.dark, + contrastText: error.contrastText.dark, + light: error.light.dark, + dark: error.dark.dark, }, warning: { - text: "#e88c30", - main: "#FF9F00", - light: "#624711", - bg: "#262115", - border: "#e88c30", + main: warning.main.dark, + light: warning.light.dark, + contrastText: warning.contrastText.dark, + dark: warning.dark.dark, }, percentage: { uptimePoor: "#d32f2f", @@ -78,6 +70,23 @@ const darkTheme = createTheme({ grid: "#454546", autofill: "#2d2d33", }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: text, + background: background, + border: border, + info: { + text: text.primary, + main: text.secondary, + bg: background.main, + light: background.main, + border: border.light, + }, }, }); diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 1f88d0696..c8229ad1e 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -15,52 +15,49 @@ const background = { accent: "#f9fafb", }; -const { gradient } = colors; -/* const gradient = { - color1: "#fcfcfd", - color2: "#fdfcfd", - color3: "#fdfdfd", - color4: "#fefdfe", - color5: "#fefefe", -}; */ - const border = { light: "#eaecf0", dark: "#d0d5dd" }; +const { + primary, + secondary, + success, + error, + warning, + gradient: { + color1: { light: color1 }, + color2: { light: color2 }, + color3: { light: color3 }, + color4: { light: color4 }, + color5: { light: color5 }, + }, +} = colors; + const lightTheme = createTheme({ ...baseTheme, palette: { - primary: { main: "#1570EF" }, - secondary: { main: "#F4F4F4", dark: "#e3e3e3", contrastText: "#475467" }, - text: text, - background: background, - border: border, - info: { - text: text.primary, - main: text.tertiary, - bg: background.main, - light: background.main, - border: border.dark, + primary: { main: primary.main.light }, + secondary: { + main: secondary.main.light, + dark: secondary.dark.light, + contrastText: secondary.constrastText.light, }, - gradient, success: { - text: "#079455", - main: "#17b26a", - light: "#d4f4e1", - bg: "#ecfdf3", + main: success.main.light, + contrastText: success.contrastText.light, + light: success.light.light, + dark: success.dark.light, }, error: { - text: "#f04438", - main: "#d32f2f", - light: "#fbd1d1", - bg: "#f9eced", - border: "#f04438", + main: error.main.light, + contrastText: error.contrastText.light, + light: error.light.light, + dark: error.dark.light, }, warning: { - text: "#DC6803", - main: "#fdb022", - light: "#ffecbc", - bg: "#fef8ea", - border: "#fec84b", + main: warning.main.light, + light: warning.light.light, + contrastText: warning.contrastText.light, + dark: warning.dark.light, }, percentage: { uptimePoor: "#d32f2f", @@ -77,6 +74,23 @@ const lightTheme = createTheme({ grid: "#a2a3a3", autofill: "#e8f0fe", }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: text, + background: background, + border: border, + info: { + text: text.primary, + main: text.tertiary, + bg: background.main, + light: background.main, + border: border.dark, + }, }, }); From aa1b73c3054761dd765735d8932a08e794a9c1a5 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 12 Nov 2024 09:54:19 -0500 Subject: [PATCH 07/16] feat: finishing extracting color palette --- Client/src/Utils/Theme/constants.js | 132 +++++++++++++++++++++++---- Client/src/Utils/Theme/darkTheme.js | 76 ++++++++------- Client/src/Utils/Theme/lightTheme.js | 81 +++++++++------- 3 files changed, 207 insertions(+), 82 deletions(-) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index ceb138fc3..a27e65921 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -8,7 +8,9 @@ const typographyLevels = { xl: `${(typographyBase + 10) / 16}rem`, }; -/* This should not be here. INcorporate into color structure */ +/* This should not be here. Incorporate into color structure. + +Is is being exported to globalStyle*/ const paletteLight = { text: { primary: "#1c2130", @@ -19,7 +21,6 @@ const paletteLight = { }; /* TODO Expand this */ - const paletteColors = { white: "#FFFFFF", gray50: "#FEFEFE", @@ -27,18 +28,42 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", + gray95: "#FAFAFA", + gray97: "#F9FAFB", gray100: "#F4F4F4", + gray125: "#F2F4F7", + gray150: "#EAECF0", + gray180: "#E6E6E6", gray200: "#E3E3E3", + gray225: "#D6D9DD", + gray250: "#D0D5DD", + gray300: "#A2A3A3", + gray350: "#A1A1AA", + gray450: "#8E8E8F", + gray500: "#838C99", + gray600: "#454546", + gray750: "#36363E", gray800: "#2D2D33", + gray815: "#27272A", gray830: "#262115", + gray835: "#18181a", + gray840: "#151518", gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", gray880: "#0C0C0E", gray890: "#09090B", black: "#000000", + blueGray20: "#E8F0FE", + blueGray40: "#E2EAF7", + blueGray150: "#667085", + blueGray200: "#475467", + blueGray400: "#344054", + blueGray900: "#1c2130", blueBlueWave: "#1570EF", - blue700: "#475467", + blue700: "#4E5BA6", + purple300: "#664EFF", + purple400: "#3A1BFF", green20: "#ECFDF3", green50: "#D4F4E1", green150: "#45BB7A", @@ -54,7 +79,6 @@ const paletteColors = { red800: "#301A1F", orange50: "#FEF8EA", orange100: "#FFECBC", - orange200: "#FEC84B", orange300: "#FDB022", orange400: "#FF9F00", orange500: "#E88C30", @@ -81,7 +105,7 @@ const semanticColors = { //TODO we dont have secondary dark for dark mode }, constrastText: { - light: paletteColors.blue700, + light: paletteColors.blueGray200, //TODO we dont have secondary contrastText for dark mode }, }, @@ -114,7 +138,7 @@ const semanticColors = { contrastText: { //TODO contrasttext semantically should be something that contrasts with the main light: paletteColors.red200, - dark: paletteColors.red200, + dark: paletteColors.red50, }, light: { light: paletteColors.red100, @@ -130,24 +154,20 @@ const semanticColors = { light: paletteColors.orange300, dark: paletteColors.orange400, }, - text: { - light: paletteColors.orange600, - dark: paletteColors.orange500, - }, light: { light: paletteColors.orange100, dark: paletteColors.orange800, }, - bg: { + contrastText: { + light: paletteColors.orange600, + dark: paletteColors.orange500, + }, + dark: { light: paletteColors.orange50, dark: paletteColors.gray830, }, - border: { - light: paletteColors.orange200, - dark: paletteColors.orange500, - }, }, - + /* From this part on, try to create semantic structure, not feature based structure */ gradient: { color1: { light: paletteColors.gray90, @@ -170,5 +190,85 @@ const semanticColors = { dark: paletteColors.gray850, }, }, + background: { + main: { + light: paletteColors.white, + dark: paletteColors.gray840, + }, + alt: { + light: paletteColors.gray90, + dark: paletteColors.gray890, + }, + fill: { + light: paletteColors.gray100, + dark: paletteColors.gray800, + }, + accent: { + light: paletteColors.gray97, + dark: paletteColors.gray835, + }, + }, + text: { + primary: { + light: paletteColors.blueGray900, + dark: paletteColors.gray95, + }, + secondary: { + light: paletteColors.blueGray400, + dark: paletteColors.gray180, + }, + tertiary: { + light: paletteColors.blueGray200, + dark: paletteColors.gray350, + }, + accent: { + light: paletteColors.gray500, + dark: paletteColors.gray450, + }, + }, + border: { + light: { + light: paletteColors.gray150, + dark: paletteColors.gray815, + }, + dark: { + light: paletteColors.gray250, + dark: paletteColors.gray750, + }, + }, + percentage: { + /* uptimeFair: { + light: paletteColors. + } */ + }, + unresolved: { + main: { + light: paletteColors.blue700, + dark: paletteColors.purple300, + }, + light: { + light: paletteColors.blueGray40, + dark: paletteColors.purple400, + }, + bg: { + light: paletteColors.gray125, + dark: paletteColors.gray125, + }, + }, + other: { + icon: { + light: paletteColors.blueGray150, + }, + line: { + light: paletteColors.gray225, + }, + grid: { + light: paletteColors.gray300, + dark: paletteColors.gray600, + }, + autofill: { + light: paletteColors.blueGray20, + }, + }, }; export { typographyLevels, paletteLight, semanticColors as colors }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 5b47b3963..f5948217d 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -2,21 +2,6 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; -const text = { - primary: "#fafafa", - secondary: "#e6e6e6", - tertiary: "#a1a1aa", - accent: "#8e8e8f", - disabled: "rgba(172, 172, 172, 0.3)", -}; -const background = { - main: "#151518", - alt: "#09090b", - fill: "#2D2D33", - accent: "#18181a", -}; -const border = { light: "#27272a", dark: "#36363e" }; - const { primary, secondary, @@ -30,6 +15,11 @@ const { color4: { dark: color4 }, color5: { dark: color5 }, }, + background, + text, + border, + unresolved, + other, } = colors; const darkTheme = createTheme({ @@ -55,20 +45,25 @@ const darkTheme = createTheme({ contrastText: warning.contrastText.dark, dark: warning.dark.dark, }, + /* From this part on, try to create semantic structure, not feature based structure */ percentage: { - uptimePoor: "#d32f2f", - uptimeFair: "#e88c30", - uptimeGood: "#ffd600", - uptimeExcellent: "#079455", + uptimePoor: error.main.dark, + uptimeFair: warning.contrastText.dark, + uptimeGood: warning.main.dark /* Change for a success color? ?*/, + uptimeExcellent: success.contrastText.light, }, - unresolved: { main: "#664eff", light: "#3a1bff", bg: "#f2f4f7" }, - divider: border.light, + unresolved: { + main: unresolved.main.dark, + light: unresolved.light.dark, + bg: unresolved.bg.dark, + }, + divider: border.light.dark, other: { - icon: "#e6e6e6", - line: "#27272a", - fill: "#18181a", - grid: "#454546", - autofill: "#2d2d33", + icon: text.secondary.dark, + line: border.light.dark, + fill: background.accent.dark, + grid: other.grid.dark, + autofill: secondary.main.dark, }, gradient: { color1, @@ -77,15 +72,28 @@ const darkTheme = createTheme({ color4, color5, }, - text: text, - background: background, - border: border, + text: { + primary: text.primary.dark, + secondary: text.secondary.dark, + tertiary: text.tertiary.dark, + accent: text.accent.dark, + }, + background: { + main: background.main.dark, + alt: background.alt.dark, + fill: background.fill.dark, + accent: background.accent.dark, + }, + border: { + light: border.light.dark, + dark: border.dark.dark, + }, info: { - text: text.primary, - main: text.secondary, - bg: background.main, - light: background.main, - border: border.light, + text: text.primary.dark, + main: text.secondary.dark, + bg: background.main.dark, + light: background.main.dark, + border: border.light.dark, }, }, }); diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index c8229ad1e..7687d6cf0 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -2,20 +2,14 @@ import { createTheme } from "@mui/material"; import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; -const text = { - primary: "#1c2130", - secondary: "#344054", - tertiary: "#475467", - accent: "#838c99", -}; -const background = { - main: "#FFFFFF", - alt: "#FCFCFD", - fill: "#F4F4F4", - accent: "#f9fafb", -}; +/* +Take things from global theme -const border = { light: "#eaecf0", dark: "#d0d5dd" }; +Next step: check if all here are being used. + +Discuss colors with Gorkem and rest of the team + +*/ const { primary, @@ -30,6 +24,11 @@ const { color4: { light: color4 }, color5: { light: color5 }, }, + background, + text, + border, + unresolved, + other, } = colors; const lightTheme = createTheme({ @@ -59,20 +58,25 @@ const lightTheme = createTheme({ contrastText: warning.contrastText.light, dark: warning.dark.light, }, + /* From this part on, try to create semantic structure, not feature based structure */ percentage: { - uptimePoor: "#d32f2f", - uptimeFair: "#ec8013", - uptimeGood: "#ffb800", - uptimeExcellent: "#079455", + uptimePoor: error.main.light, + uptimeFair: warning.contrastText.light, + uptimeGood: warning.main.light /* Change for a success color? */, + uptimeExcellent: success.contrastText.light, }, - unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, - divider: border.light, + unresolved: { + main: unresolved.main.light, + light: unresolved.light.light, + bg: unresolved.bg.light, + }, + divider: border.light.light, other: { - icon: "#667085", - line: "#d6d9dd", - fill: "#e3e3e3", - grid: "#a2a3a3", - autofill: "#e8f0fe", + icon: other.icon.light, + line: other.line.light, + fill: secondary.dark.light, + grid: other.grid.light, + autofill: other.autofill.light, }, gradient: { color1, @@ -81,15 +85,28 @@ const lightTheme = createTheme({ color4, color5, }, - text: text, - background: background, - border: border, + text: { + primary: text.primary.light, + secondary: text.secondary.light, + tertiary: text.tertiary.light, + accent: text.accent.light, + }, + background: { + main: background.main.light, + alt: background.alt.light, + fill: background.fill.light, + accent: background.accent.light, + }, + border: { + light: border.light.light, + dark: border.dark.light, + }, info: { - text: text.primary, - main: text.tertiary, - bg: background.main, - light: background.main, - border: border.dark, + text: text.primary.light, + main: text.tertiary.light, + bg: background.main.light, + light: background.main.light, + border: border.dark.light, }, }, }); From 841bf7b5ed922cadac2c780e6187d8ab7d724c95 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 12 Nov 2024 17:24:21 -0500 Subject: [PATCH 08/16] feat: removing colors from global theme --- Client/src/Utils/Theme/globalTheme.js | 84 +++++++++++---------------- 1 file changed, 35 insertions(+), 49 deletions(-) diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index f94e7cb37..796271fb0 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -3,27 +3,11 @@ import { paletteLight, typographyLevels } from "./constants"; const fontFamilyPrimary = '"Inter" , sans-serif'; // const fontFamilySecondary = '"Avenir", sans-serif'; +/* TODO take the color out from here */ const shadow = "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; -const background = { - main: "#FFFFFF", - alt: "#FCFCFD", - fill: "#F4F4F4", - accent: "#f9fafb", -}; - -const border = { light: "#eaecf0", dark: "#d0d5dd" }; - -const text = { - primary: "#1c2130", - secondary: "#344054", - tertiary: "#475467", - accent: "#838c99", -}; - const baseTheme = { - /* TODO colors should not live here */ typography: { fontFamily: fontFamilyPrimary, fontSize: 14, @@ -111,27 +95,29 @@ const baseTheme = { }, MuiIconButton: { styleOverrides: { - root: { + root: ({ theme }) => ({ padding: 4, transition: "none", "&:hover": { - backgroundColor: background.fill, + backgroundColor: theme.palette.background.fill, }, - }, + }), }, }, MuiPaper: { styleOverrides: { - root: { - marginTop: 4, - padding: 0, - border: 1, - borderStyle: "solid", - borderColor: border.light, - borderRadius: 4, - boxShadow: shadow, - backgroundColor: background.main, - backgroundImage: "none", + root: ({ theme }) => { + return { + marginTop: 4, + padding: 0, + border: 1, + borderStyle: "solid", + borderColor: theme.palette.border.light, + borderRadius: 4, + boxShadow: shadow, + backgroundColor: theme.palette.background.main, + backgroundImage: "none", + }; }, }, }, @@ -151,61 +137,61 @@ const baseTheme = { }, MuiMenuItem: { styleOverrides: { - root: { + root: ({ theme }) => ({ borderRadius: 4, backgroundColor: "inherit", padding: "4px 6px", - color: text.secondary, + color: theme.palette.text.secondary, fontSize: 13, margin: 2, minWidth: 100, "&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible": { - backgroundColor: background.fill, + backgroundColor: theme.palette.background.fill, }, - }, + }), }, }, MuiTableCell: { styleOverrides: { - root: { - borderBottomColor: border.light, - }, + root: ({ theme }) => ({ + borderBottomColor: theme.palette.border.light, + }), }, }, MuiTableHead: { styleOverrides: { - root: { - backgroundColor: background.accent, - }, + root: ({ theme }) => ({ + backgroundColor: theme.palette.background.accent, + }), }, }, MuiPagination: { styleOverrides: { - root: { - backgroundColor: background.main, + root: ({ theme }) => ({ + backgroundColor: theme.palette.background.main, border: 1, borderStyle: "solid", - borderColor: border.light, + borderColor: theme.palette.border.light, "& button": { - color: text.tertiary, + color: theme.palette.text.tertiary, borderRadius: 4, }, "& li:first-of-type button, & li:last-of-type button": { border: 1, borderStyle: "solid", - borderColor: border.light, + borderColor: theme.palette.border.light, }, - }, + }), }, }, MuiPaginationItem: { styleOverrides: { - root: { + root: ({ theme }) => ({ "&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": { - backgroundColor: background.fill, + backgroundColor: theme.palette.background.fill, }, - }, + }), }, }, MuiSkeleton: { From 2969ca3e350773ebfe67e91286a54059fba3424b Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Tue, 12 Nov 2024 19:10:48 -0500 Subject: [PATCH 09/16] feat: passing ppalette to global theme, and starting color cleanup --- Client/src/Pages/Monitors/Home/StatusBox.jsx | 2 +- Client/src/Utils/Theme/constants.js | 40 ++--- Client/src/Utils/Theme/darkTheme.js | 148 ++++++++--------- Client/src/Utils/Theme/globalTheme.js | 26 +-- Client/src/Utils/Theme/lightTheme.js | 161 ++++++++++--------- 5 files changed, 188 insertions(+), 189 deletions(-) diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx index d84690432..a929c31f9 100644 --- a/Client/src/Pages/Monitors/Home/StatusBox.jsx +++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx @@ -25,7 +25,7 @@ const StatusBox = ({ title, value }) => { ); } else if (title === "down") { - color = theme.palette.error.contrastText; + color = theme.palette.error.main; icon = ( diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index a27e65921..7beaaa20a 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -8,18 +8,6 @@ const typographyLevels = { xl: `${(typographyBase + 10) / 16}rem`, }; -/* This should not be here. Incorporate into color structure. - -Is is being exported to globalStyle*/ -const paletteLight = { - text: { - primary: "#1c2130", - secondary: "#344054", - tertiary: "#475467", - accent: "#838c99", - }, -}; - /* TODO Expand this */ const paletteColors = { white: "#FFFFFF", @@ -28,26 +16,26 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", - gray95: "#FAFAFA", - gray97: "#F9FAFB", + /* gray95: "#FAFAFA", + gray97: "#F9FAFB", */ gray100: "#F4F4F4", - gray125: "#F2F4F7", + /* gray125: "#F2F4F7", gray150: "#EAECF0", - gray180: "#E6E6E6", + gray180: "#E6E6E6", */ gray200: "#E3E3E3", - gray225: "#D6D9DD", - gray250: "#D0D5DD", + /* gray225: "#D6D9DD", + gray250: "#D0D5DD", */ gray300: "#A2A3A3", - gray350: "#A1A1AA", - gray450: "#8E8E8F", + /* gray350: "#A1A1AA", + gray450: "#8E8E8F", */ gray500: "#838C99", gray600: "#454546", gray750: "#36363E", gray800: "#2D2D33", - gray815: "#27272A", + /* gray815: "#27272A", gray830: "#262115", gray835: "#18181a", - gray840: "#151518", + gray840: "#151518", */ gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", @@ -137,7 +125,7 @@ const semanticColors = { }, contrastText: { //TODO contrasttext semantically should be something that contrasts with the main - light: paletteColors.red200, + light: paletteColors.gray50, dark: paletteColors.red50, }, light: { @@ -204,14 +192,14 @@ const semanticColors = { dark: paletteColors.gray800, }, accent: { - light: paletteColors.gray97, + light: paletteColors.gray100, dark: paletteColors.gray835, }, }, text: { primary: { light: paletteColors.blueGray900, - dark: paletteColors.gray95, + dark: paletteColors.gray100, }, secondary: { light: paletteColors.blueGray400, @@ -271,4 +259,4 @@ const semanticColors = { }, }, }; -export { typographyLevels, paletteLight, semanticColors as colors }; +export { typographyLevels, semanticColors as colors }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index f5948217d..7dfb0d38a 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -22,80 +22,82 @@ const { other, } = colors; -const darkTheme = createTheme({ - ...baseTheme, - palette: { - primary: { main: primary.main.dark }, - secondary: { main: secondary.main.dark }, - success: { - main: success.main.dark, - contrastText: success.contrastText.dark, - light: success.light.dark, - dark: success.dark.dark, - }, - error: { - main: error.main.dark, - contrastText: error.contrastText.dark, - light: error.light.dark, - dark: error.dark.dark, - }, - warning: { - main: warning.main.dark, - light: warning.light.dark, - contrastText: warning.contrastText.dark, - dark: warning.dark.dark, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.dark, - uptimeFair: warning.contrastText.dark, - uptimeGood: warning.main.dark /* Change for a success color? ?*/, - uptimeExcellent: success.contrastText.light, - }, - unresolved: { - main: unresolved.main.dark, - light: unresolved.light.dark, - bg: unresolved.bg.dark, - }, - divider: border.light.dark, - other: { - icon: text.secondary.dark, - line: border.light.dark, - fill: background.accent.dark, - grid: other.grid.dark, - autofill: secondary.main.dark, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.dark, - secondary: text.secondary.dark, - tertiary: text.tertiary.dark, - accent: text.accent.dark, - }, - background: { - main: background.main.dark, - alt: background.alt.dark, - fill: background.fill.dark, - accent: background.accent.dark, - }, - border: { - light: border.light.dark, - dark: border.dark.dark, - }, - info: { - text: text.primary.dark, - main: text.secondary.dark, - bg: background.main.dark, - light: background.main.dark, - border: border.light.dark, - }, +const palette = { + primary: { main: primary.main.dark }, + secondary: { main: secondary.main.dark }, + success: { + main: success.main.dark, + contrastText: success.contrastText.dark, + light: success.light.dark, + dark: success.dark.dark, }, + error: { + main: error.main.dark, + contrastText: error.contrastText.dark, + light: error.light.dark, + dark: error.dark.dark, + }, + warning: { + main: warning.main.dark, + light: warning.light.dark, + contrastText: warning.contrastText.dark, + dark: warning.dark.dark, + }, + /* From this part on, try to create semantic structure, not feature based structure */ + percentage: { + uptimePoor: error.main.dark, + uptimeFair: warning.contrastText.dark, + uptimeGood: warning.main.dark /* Change for a success color? ?*/, + uptimeExcellent: success.contrastText.light, + }, + unresolved: { + main: unresolved.main.dark, + light: unresolved.light.dark, + bg: unresolved.bg.dark, + }, + divider: border.light.dark, + other: { + icon: text.secondary.dark, + line: border.light.dark, + fill: background.accent.dark, + grid: other.grid.dark, + autofill: secondary.main.dark, + }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: { + primary: text.primary.dark, + secondary: text.secondary.dark, + tertiary: text.tertiary.dark, + accent: text.accent.dark, + }, + background: { + main: background.main.dark, + alt: background.alt.dark, + fill: background.fill.dark, + accent: background.accent.dark, + }, + border: { + light: border.light.dark, + dark: border.dark.dark, + }, + info: { + text: text.primary.dark, + main: text.secondary.dark, + bg: background.main.dark, + light: background.main.dark, + border: border.light.dark, + }, +}; + +const darkTheme = createTheme({ + palette, + ...baseTheme(palette), }); export default darkTheme; diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 796271fb0..7737d396e 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -1,4 +1,4 @@ -import { paletteLight, typographyLevels } from "./constants"; +import { typographyLevels } from "./constants"; const fontFamilyPrimary = '"Inter" , sans-serif'; // const fontFamilySecondary = '"Avenir", sans-serif'; @@ -7,28 +7,28 @@ const fontFamilyPrimary = '"Inter" , sans-serif'; const shadow = "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; -const baseTheme = { +const baseTheme = (palette) => ({ typography: { fontFamily: fontFamilyPrimary, fontSize: 14, h1: { fontSize: typographyLevels.xl, - color: paletteLight.text.primary, + color: palette.text.primary, fontWeight: 500, }, h2: { fontSize: typographyLevels.l, - color: paletteLight.text.secondary, + color: palette.text.secondary, fontWeight: 400, }, body1: { fontSize: typographyLevels.m, - color: paletteLight.text.tertiary, + color: palette.text.tertiary, fontWeight: 400, }, body2: { fontSize: typographyLevels.s, - color: paletteLight.text.tertiary, + color: palette.text.tertiary, fontWeight: 400, }, }, @@ -36,16 +36,17 @@ const baseTheme = { chart: { header: { fontWeight: 400, - fill: paletteLight.text.tertiary, + fill: palette.text.tertiary, fontSize: typographyLevels.m, }, subheader: { fontWeight: 400, - fill: paletteLight.text.tertiary, + fill: palette.text.tertiary, fontSize: typographyLevels.xs, }, }, spacing: 2, + /* TODO All these should live inside of a component*/ components: { MuiButton: { defaultProps: { @@ -79,6 +80,13 @@ const baseTheme = { borderColor: theme.palette.border.light, }, }, + { + props: (props) => props.variant === "contained" && props.disabled, + style: { + backgroundColor: `${theme.palette.secondary.main} !important`, + color: `${theme.palette.secondary.contrastText} !important`, + }, + }, ], fontWeight: 400, borderRadius: 4, @@ -207,6 +215,6 @@ const baseTheme = { borderThick: 2, boxShadow: shadow, }, -}; +}); export { baseTheme }; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 7687d6cf0..f345b227b 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -3,12 +3,11 @@ import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; /* -Take things from global theme - Next step: check if all here are being used. -Discuss colors with Gorkem and rest of the team +Check for Hex in code base +Check for px in codebase */ const { @@ -31,84 +30,86 @@ const { other, } = colors; -const lightTheme = createTheme({ - ...baseTheme, - palette: { - primary: { main: primary.main.light }, - secondary: { - main: secondary.main.light, - dark: secondary.dark.light, - contrastText: secondary.constrastText.light, - }, - success: { - main: success.main.light, - contrastText: success.contrastText.light, - light: success.light.light, - dark: success.dark.light, - }, - error: { - main: error.main.light, - contrastText: error.contrastText.light, - light: error.light.light, - dark: error.dark.light, - }, - warning: { - main: warning.main.light, - light: warning.light.light, - contrastText: warning.contrastText.light, - dark: warning.dark.light, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.light, - uptimeFair: warning.contrastText.light, - uptimeGood: warning.main.light /* Change for a success color? */, - uptimeExcellent: success.contrastText.light, - }, - unresolved: { - main: unresolved.main.light, - light: unresolved.light.light, - bg: unresolved.bg.light, - }, - divider: border.light.light, - other: { - icon: other.icon.light, - line: other.line.light, - fill: secondary.dark.light, - grid: other.grid.light, - autofill: other.autofill.light, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.light, - secondary: text.secondary.light, - tertiary: text.tertiary.light, - accent: text.accent.light, - }, - background: { - main: background.main.light, - alt: background.alt.light, - fill: background.fill.light, - accent: background.accent.light, - }, - border: { - light: border.light.light, - dark: border.dark.light, - }, - info: { - text: text.primary.light, - main: text.tertiary.light, - bg: background.main.light, - light: background.main.light, - border: border.dark.light, - }, +const palette = { + primary: { main: primary.main.light }, + secondary: { + main: secondary.main.light, + dark: secondary.dark.light, + contrastText: secondary.constrastText.light, }, + success: { + main: success.main.light, + contrastText: success.contrastText.light, + light: success.light.light, + dark: success.dark.light, + }, + error: { + main: error.main.light, + contrastText: error.contrastText.light, + light: error.light.light, + dark: error.dark.light, + }, + warning: { + main: warning.main.light, + light: warning.light.light, + contrastText: warning.contrastText.light, + dark: warning.dark.light, + }, + /* From this part on, try to create semantic structure, not feature based structure */ + percentage: { + uptimePoor: error.main.light, + uptimeFair: warning.contrastText.light, + uptimeGood: warning.main.light /* Change for a success color? */, + uptimeExcellent: success.contrastText.light, + }, + unresolved: { + main: unresolved.main.light, + light: unresolved.light.light, + bg: unresolved.bg.light, + }, + divider: border.light.light, + other: { + icon: other.icon.light, + line: other.line.light, + fill: secondary.dark.light, + grid: other.grid.light, + autofill: other.autofill.light, + }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: { + primary: text.primary.light, + secondary: text.secondary.light, + tertiary: text.tertiary.light, + accent: text.accent.light, + }, + background: { + main: background.main.light, + alt: background.alt.light, + fill: background.fill.light, + accent: background.accent.light, + }, + border: { + light: border.light.light, + dark: border.dark.light, + }, + info: { + text: text.primary.light, + main: text.tertiary.light, + bg: background.main.light, + light: background.main.light, + border: border.dark.light, + }, +}; + +const lightTheme = createTheme({ + palette, + ...baseTheme(palette), }); export default lightTheme; From 5ad5ba7e6fd940c259d92564ac85e69d0b9f5259 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 05:50:32 -0500 Subject: [PATCH 10/16] feat: removing all colors from codebase that do not come from theme --- Client/src/App.css | 7 -- Client/src/App.jsx | 1 - .../src/Components/Charts/BarChart/index.jsx | 4 +- Client/src/Components/Inputs/Radio/index.jsx | 2 +- Client/src/Components/Label/index.css | 1 - Client/src/Components/Label/index.jsx | 6 +- Client/src/Utils/Theme/constants.js | 91 +++++++------------ Client/src/Utils/Theme/darkTheme.js | 9 +- Client/src/Utils/Theme/lightTheme.js | 8 +- 9 files changed, 54 insertions(+), 75 deletions(-) delete mode 100644 Client/src/App.css diff --git a/Client/src/App.css b/Client/src/App.css deleted file mode 100644 index 44e06cd5f..000000000 --- a/Client/src/App.css +++ /dev/null @@ -1,7 +0,0 @@ -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 1a59ea9e5..151512701 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -2,7 +2,6 @@ import { useEffect } from "react"; import { Routes, Route, Navigate } from "react-router-dom"; import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; -// import "./App.css"; import "react-toastify/dist/ReactToastify.css"; import { ToastContainer } from "react-toastify"; import NotFound from "./Pages/NotFound"; diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index c6308ee2d..70fd66390 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -141,7 +141,9 @@ const BarChart = ({ checks = [] }) => { width="9px" height="100%" backgroundColor={ - check.status ? theme.palette.success.dark : theme.palette.error.dark + check.status + ? theme.palette.success.contrastText + : theme.palette.error.dark } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Components/Inputs/Radio/index.jsx b/Client/src/Components/Inputs/Radio/index.jsx index a0874b25b..7a700e2b7 100644 --- a/Client/src/Components/Inputs/Radio/index.jsx +++ b/Client/src/Components/Inputs/Radio/index.jsx @@ -41,7 +41,7 @@ const Radio = (props) => { color: "transparent", width: 16, height: 16, - boxShadow: "inset 0 0 0 1px #656a74", + boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`, mt: theme.spacing(0.5), }} /> diff --git a/Client/src/Components/Label/index.css b/Client/src/Components/Label/index.css index 104d43410..d3fe53da5 100644 --- a/Client/src/Components/Label/index.css +++ b/Client/src/Components/Label/index.css @@ -1,5 +1,4 @@ .label { - border: 1px solid #000; display: inline-flex; justify-content: center; align-items: center; diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 97cc3e5f3..eb6499a31 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -31,7 +31,7 @@ const BaseLabel = ({ label, styles, children }) => { className="label" sx={{ borderRadius: borderRadius, - borderColor: theme.palette.text.tertiary, + border: `1px solid ${theme.palette.text.tertiary}`, color: theme.palette.text.tertiary, padding: padding, ...styles, @@ -127,8 +127,8 @@ const StatusLabel = ({ status, text, customStyles }) => { const colors = { up: { dotColor: theme.palette.success.main, - bgColor: theme.palette.success.dark, - borderColor: theme.palette.success.light, + bgColor: theme.palette.success./* dark */ contrastText, + borderColor: theme.palette.success.main /* light */, }, down: { dotColor: theme.palette.error.contrastText, diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 7beaaa20a..4fa2292c3 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -8,7 +8,7 @@ const typographyLevels = { xl: `${(typographyBase + 10) / 16}rem`, }; -/* TODO Expand this */ +/* TODO Review color palette and semantic colors */ const paletteColors = { white: "#FFFFFF", gray50: "#FEFEFE", @@ -16,34 +16,19 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", - /* gray95: "#FAFAFA", - gray97: "#F9FAFB", */ gray100: "#F4F4F4", - /* gray125: "#F2F4F7", - gray150: "#EAECF0", - gray180: "#E6E6E6", */ gray200: "#E3E3E3", - /* gray225: "#D6D9DD", - gray250: "#D0D5DD", */ gray300: "#A2A3A3", - /* gray350: "#A1A1AA", - gray450: "#8E8E8F", */ gray500: "#838C99", gray600: "#454546", gray750: "#36363E", gray800: "#2D2D33", - /* gray815: "#27272A", - gray830: "#262115", - gray835: "#18181a", - gray840: "#151518", */ gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", gray880: "#0C0C0E", gray890: "#09090B", - black: "#000000", blueGray20: "#E8F0FE", - blueGray40: "#E2EAF7", blueGray150: "#667085", blueGray200: "#475467", blueGray400: "#344054", @@ -52,10 +37,8 @@ const paletteColors = { blue700: "#4E5BA6", purple300: "#664EFF", purple400: "#3A1BFF", - green20: "#ECFDF3", green50: "#D4F4E1", green150: "#45BB7A", - green200: "#17B26A", green400: "#079455", green800: "#1C4428", green900: "#12261E", @@ -87,34 +70,34 @@ const semanticColors = { light: paletteColors.gray100, dark: paletteColors.gray800, }, - // TODO we dont have secondary light - dark: { - light: paletteColors.gray200, - //TODO we dont have secondary dark for dark mode - }, constrastText: { light: paletteColors.blueGray200, - //TODO we dont have secondary contrastText for dark mode + dark: paletteColors.blueGray200, + }, + light: { + light: paletteColors.gray200, + dark: paletteColors.gray200, + }, + dark: { + light: paletteColors.gray200, + dark: paletteColors.gray200, }, }, success: { main: { - light: paletteColors.green200, - dark: paletteColors.green150, - }, - contrastText: { - //TODO values are equal (confirm) - //TODO contrasttext semantically should be something that contrasts with the main light: paletteColors.green400, dark: paletteColors.green400, }, + contrastText: { + light: paletteColors.green50, + dark: paletteColors.green900, + }, light: { light: paletteColors.green50, - //TODO dark mode light success is darker than the main success - dark: paletteColors.green800, + dark: paletteColors.green150, }, dark: { - light: paletteColors.green20, + light: paletteColors.green800, dark: paletteColors.green900, }, }, @@ -124,9 +107,8 @@ const semanticColors = { dark: paletteColors.red300, }, contrastText: { - //TODO contrasttext semantically should be something that contrasts with the main light: paletteColors.gray50, - dark: paletteColors.red50, + dark: paletteColors.gray50, }, light: { light: paletteColors.red100, @@ -142,17 +124,17 @@ const semanticColors = { light: paletteColors.orange300, dark: paletteColors.orange400, }, - light: { - light: paletteColors.orange100, - dark: paletteColors.orange800, - }, contrastText: { light: paletteColors.orange600, dark: paletteColors.orange500, }, + light: { + light: paletteColors.orange100, + dark: paletteColors.orange800, + }, dark: { light: paletteColors.orange50, - dark: paletteColors.gray830, + dark: paletteColors.gray800, }, }, /* From this part on, try to create semantic structure, not feature based structure */ @@ -181,7 +163,7 @@ const semanticColors = { background: { main: { light: paletteColors.white, - dark: paletteColors.gray840, + dark: paletteColors.gray850, }, alt: { light: paletteColors.gray90, @@ -193,7 +175,7 @@ const semanticColors = { }, accent: { light: paletteColors.gray100, - dark: paletteColors.gray835, + dark: paletteColors.gray850, }, }, text: { @@ -203,44 +185,39 @@ const semanticColors = { }, secondary: { light: paletteColors.blueGray400, - dark: paletteColors.gray180, + dark: paletteColors.gray200, }, tertiary: { light: paletteColors.blueGray200, - dark: paletteColors.gray350, + dark: paletteColors.gray300, }, accent: { light: paletteColors.gray500, - dark: paletteColors.gray450, + dark: paletteColors.gray500, }, }, border: { light: { - light: paletteColors.gray150, - dark: paletteColors.gray815, + light: paletteColors.gray200, + dark: paletteColors.gray800, }, dark: { - light: paletteColors.gray250, + light: paletteColors.gray200, dark: paletteColors.gray750, }, }, - percentage: { - /* uptimeFair: { - light: paletteColors. - } */ - }, unresolved: { main: { light: paletteColors.blue700, dark: paletteColors.purple300, }, light: { - light: paletteColors.blueGray40, + light: paletteColors.blueGray20, dark: paletteColors.purple400, }, bg: { - light: paletteColors.gray125, - dark: paletteColors.gray125, + light: paletteColors.gray100, + dark: paletteColors.gray100, }, }, other: { @@ -248,7 +225,7 @@ const semanticColors = { light: paletteColors.blueGray150, }, line: { - light: paletteColors.gray225, + light: paletteColors.gray200, }, grid: { light: paletteColors.gray300, diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 7dfb0d38a..ff2c628d2 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -24,7 +24,12 @@ const { const palette = { primary: { main: primary.main.dark }, - secondary: { main: secondary.main.dark }, + secondary: { + main: secondary.main.dark, + contrastText: secondary.constrastText.dark, + light: secondary.dark.dark, + dark: secondary.dark.dark, + }, success: { main: success.main.dark, contrastText: success.contrastText.dark, @@ -48,7 +53,7 @@ const palette = { uptimePoor: error.main.dark, uptimeFair: warning.contrastText.dark, uptimeGood: warning.main.dark /* Change for a success color? ?*/, - uptimeExcellent: success.contrastText.light, + uptimeExcellent: success.main.dark, }, unresolved: { main: unresolved.main.dark, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index f345b227b..d65146486 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -3,7 +3,10 @@ import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; /* +TODO Next step: check if all here are being used. +*/ +/* TODO Check for Hex in code base @@ -34,8 +37,9 @@ const palette = { primary: { main: primary.main.light }, secondary: { main: secondary.main.light, - dark: secondary.dark.light, contrastText: secondary.constrastText.light, + light: secondary.dark.light, + dark: secondary.dark.light, }, success: { main: success.main.light, @@ -60,7 +64,7 @@ const palette = { uptimePoor: error.main.light, uptimeFair: warning.contrastText.light, uptimeGood: warning.main.light /* Change for a success color? */, - uptimeExcellent: success.contrastText.light, + uptimeExcellent: success.main.light, }, unresolved: { main: unresolved.main.light, From 6c521436adabc468dc5f9dd1e62f93b90d8359eb Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 06:08:58 -0500 Subject: [PATCH 11/16] chore adding comments --- Client/src/Components/Alert/index.jsx | 4 +++- Client/src/Utils/Theme/constants.js | 5 +++++ Client/src/Utils/Theme/lightTheme.js | 9 ++------- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index 116ac5dea..bf941368a 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -31,7 +31,9 @@ const icons = { const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { const theme = useTheme(); - /* TODO check if this still works. text bg and border not necessarilly exist. Text becomes contrastText. border becomes contrastText. bg becomes dark */ + /* TODO + This needs fixing. text bg and border not necessarilly exist. Probably text becomes contrastText. border becomes contrastText. bg becomes dark. + Check possible variants, see implementation in light and dark theme, and adjust */ const { text, bg, border } = theme.palette[variant]; const icon = icons[variant]; diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 4fa2292c3..1944da40f 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -1,4 +1,9 @@ const typographyBase = 14; + +/* TODO +Check for px in codebase. All font sizes should be in REM and should live here. +Rest should be checked on each case +*/ const typographyLevels = { base: typographyBase, xs: `${(typographyBase - 4) / 16}rem`, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index d65146486..e03fd9ee7 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -4,13 +4,7 @@ import { colors } from "./constants"; /* TODO -Next step: check if all here are being used. -*/ -/* TODO - -Check for Hex in code base - -Check for px in codebase +Next step: check if all keys here are being used in the codebase. e.g.: Search codebase for palette.primary; also check for destructuring palette ('= theme.palette') */ const { @@ -111,6 +105,7 @@ const palette = { }, }; +/* TODO I figured out we could have just one theme by passing mode as parameter for theme function. Implement later */ const lightTheme = createTheme({ palette, ...baseTheme(palette), From 5797a03a4cbc745960a8ac8a63068e5d98c7a5ee Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 07:48:34 -0500 Subject: [PATCH 12/16] merge --- Client/package-lock.json | 171 +++++---------------------------------- Client/package.json | 2 +- 2 files changed, 19 insertions(+), 154 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index aa9a9d7ff..1a005e6f1 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -14,7 +14,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.17", "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "6.1", + "@mui/material": "^5.16.7", "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.2", "@mui/x-date-pickers": "7.22.2", @@ -1136,9 +1136,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz", - "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==", + "version": "5.16.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.7.tgz", + "integrity": "sha512-RtsCt4Geed2/v74sbihWzzRs+HsIQCfclHeORh5Ynu2fS4icIKozcSubwuG7vtzq2uW3fOR1zITSP84TNt2GoQ==", "license": "MIT", "funding": { "type": "opencollective", @@ -1213,26 +1213,26 @@ } }, "node_modules/@mui/material": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz", - "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==", + "version": "5.16.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz", + "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==", "license": "MIT", "dependencies": { - "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.1.6", - "@mui/system": "^6.1.6", - "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.6", + "@babel/runtime": "^7.23.9", + "@mui/core-downloads-tracker": "^5.16.7", + "@mui/system": "^5.16.7", + "@mui/types": "^7.2.15", + "@mui/utils": "^5.16.6", "@popperjs/core": "^2.11.8", - "@types/react-transition-group": "^4.4.11", - "clsx": "^2.1.1", + "@types/react-transition-group": "^4.4.10", + "clsx": "^2.1.0", "csstype": "^3.1.3", "prop-types": "^15.8.1", "react-is": "^18.3.1", "react-transition-group": "^4.4.5" }, "engines": { - "node": ">=14.0.0" + "node": ">=12.0.0" }, "funding": { "type": "opencollective", @@ -1241,10 +1241,9 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.6", - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "@emotion/react": { @@ -1253,140 +1252,6 @@ "@emotion/styled": { "optional": true }, - "@mui/material-pigment-css": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/private-theming": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz", - "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.1.6", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/styled-engine": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz", - "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.26.0", - "@emotion/cache": "^11.13.1", - "@emotion/serialize": "^1.3.2", - "@emotion/sheet": "^1.4.0", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.4.1", - "@emotion/styled": "^11.3.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/system": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz", - "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.1.6", - "@mui/styled-engine": "^6.1.6", - "@mui/types": "^7.2.19", - "@mui/utils": "^6.1.6", - "clsx": "^2.1.1", - "csstype": "^3.1.3", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@emotion/react": "^11.5.0", - "@emotion/styled": "^11.3.0", - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { - "@emotion/react": { - "optional": true - }, - "@emotion/styled": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, - "node_modules/@mui/material/node_modules/@mui/utils": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz", - "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.26.0", - "@mui/types": "^7.2.19", - "@types/prop-types": "^15.7.13", - "clsx": "^2.1.1", - "prop-types": "^15.8.1", - "react-is": "^18.3.1" - }, - "engines": { - "node": ">=14.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui-org" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react": "^17.0.0 || ^18.0.0 || ^19.0.0" - }, - "peerDependenciesMeta": { "@types/react": { "optional": true } diff --git a/Client/package.json b/Client/package.json index 846276b85..cf8cfd7cf 100644 --- a/Client/package.json +++ b/Client/package.json @@ -17,7 +17,7 @@ "@fontsource/roboto": "^5.0.13", "@mui/icons-material": "^5.15.17", "@mui/lab": "^5.0.0-alpha.170", - "@mui/material": "6.1", + "@mui/material": "^5.16.7", "@mui/x-charts": "^7.5.1", "@mui/x-data-grid": "7.22.2", "@mui/x-date-pickers": "7.22.2", From cae03c7c9870aace797e6f1c11a3709382e70cab Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 21:05:31 -0500 Subject: [PATCH 13/16] remove unused code from Sidebar --- Client/src/Components/Sidebar/index.jsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 0019486df..2e91289f8 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -19,7 +19,7 @@ import { useLocation, useNavigate } from "react-router"; import { useTheme } from "@emotion/react"; import { useDispatch, useSelector } from "react-redux"; import { clearAuthState } from "../../Features/Auth/authSlice"; -import { /* setMode, */ toggleSidebar } from "../../Features/UI/uiSlice"; +import { toggleSidebar } from "../../Features/UI/uiSlice"; import { clearUptimeMonitorState } from "../../Features/UptimeMonitors/uptimeMonitorsSlice"; import Avatar from "../Avatar"; import LockSvg from "../../assets/icons/lock.svg?react"; @@ -29,7 +29,6 @@ import LogoutSvg from "../../assets/icons/logout.svg?react"; import Support from "../../assets/icons/support.svg?react"; import Dashboard from "../../assets/icons/dashboard.svg?react"; import Account from "../../assets/icons/user-edit.svg?react"; -/* import StatusPages from "../../assets/icons/status-pages.svg?react"; */ import Maintenance from "../../assets/icons/maintenance.svg?react"; import Monitors from "../../assets/icons/monitors.svg?react"; import Incidents from "../../assets/icons/incidents.svg?react"; @@ -625,22 +624,6 @@ function Sidebar() { )} {collapsed && } - {/* { - dispatch(setMode("light")); - closePopup(); - }} - > - Light - - { - dispatch(setMode("dark")); - closePopup(); - }} - > - Dark - */} Date: Wed, 13 Nov 2024 21:10:00 -0500 Subject: [PATCH 14/16] chore: adding jsdocs --- Client/src/Pages/Infrastructure/index.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Client/src/Pages/Infrastructure/index.jsx b/Client/src/Pages/Infrastructure/index.jsx index 0e78c4904..324268af7 100644 --- a/Client/src/Pages/Infrastructure/index.jsx +++ b/Client/src/Pages/Infrastructure/index.jsx @@ -1,6 +1,13 @@ import { Box, Button } from "@mui/material"; import { Heading } from "../../Components/Heading"; +/** + * This is the Infrastructure monitoring page. This is a work in progress + * + * @param - Define params. + * @returns {JSX.Element} The infrastructure monitoring page. + */ + function Infrastructure() { return ( From b13f4b1633d8a3bb9fe078b7e3545b34a772a3d2 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 21:11:41 -0500 Subject: [PATCH 15/16] fix: fixing typo --- Client/src/Utils/Theme/constants.js | 2 +- Client/src/Utils/Theme/darkTheme.js | 2 +- Client/src/Utils/Theme/lightTheme.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 1944da40f..0626edbaa 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -75,7 +75,7 @@ const semanticColors = { light: paletteColors.gray100, dark: paletteColors.gray800, }, - constrastText: { + contrastText: { light: paletteColors.blueGray200, dark: paletteColors.blueGray200, }, diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index ff2c628d2..0f4a391de 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -26,7 +26,7 @@ const palette = { primary: { main: primary.main.dark }, secondary: { main: secondary.main.dark, - contrastText: secondary.constrastText.dark, + contrastText: secondary.contrastText.dark, light: secondary.dark.dark, dark: secondary.dark.dark, }, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index e03fd9ee7..8bc6434c6 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -31,7 +31,7 @@ const palette = { primary: { main: primary.main.light }, secondary: { main: secondary.main.light, - contrastText: secondary.constrastText.light, + contrastText: secondary.contrastText.light, light: secondary.dark.light, dark: secondary.dark.light, }, From 7eaba0a47d19bc39e34933ff0ddcface1d4ad966 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 21:14:57 -0500 Subject: [PATCH 16/16] feat: removing package 6 --- Client/package-lock.json | 7 ------- Client/package.json | 1 - 2 files changed, 8 deletions(-) diff --git a/Client/package-lock.json b/Client/package-lock.json index 1a005e6f1..095a013f7 100644 --- a/Client/package-lock.json +++ b/Client/package-lock.json @@ -8,7 +8,6 @@ "name": "client", "version": "0.0.0", "dependencies": { - "6": "^0.0.1", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.0.13", @@ -2418,12 +2417,6 @@ "vite": "^4.2.0 || ^5.0.0" } }, - "node_modules/6": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/6/-/6-0.0.1.tgz", - "integrity": "sha512-kMT8ZPwxbwjMM73Cpy+VbrcYILF5a7UbuziJBcMPCEG33XCw4h00XecvmBMUD2KFfugBolHUmoSzjyl7Wtzbeg==", - "license": "mit" - }, "node_modules/acorn": { "version": "8.12.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", diff --git a/Client/package.json b/Client/package.json index cf8cfd7cf..a13ee09ae 100644 --- a/Client/package.json +++ b/Client/package.json @@ -11,7 +11,6 @@ "preview": "vite preview" }, "dependencies": { - "6": "^0.0.1", "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/roboto": "^5.0.13",