From 8fa1acd193cbd136a5f904deafee987d1248722a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 29 Aug 2024 17:14:17 -0400 Subject: [PATCH] Refactored mui themes into their own files for increased readability --- Client/src/App.jsx | 5 +- Client/src/Components/BasicTable/index.jsx | 7 +- Client/src/Components/Inputs/Select/index.jsx | 10 -- .../Pages/Incidents/IncidentTable/index.jsx | 51 +------ .../Details/PaginationTable/index.jsx | 87 +---------- .../src/Pages/Monitors/Home/actionsMenu.jsx | 5 - Client/src/Utils/Theme.js | 112 +++++++++++++- Client/src/Utils/Theme/darkTheme.js | 141 ++++++++++++++++++ Client/src/Utils/Theme/lightTheme.js | 141 ++++++++++++++++++ 9 files changed, 406 insertions(+), 153 deletions(-) create mode 100644 Client/src/Utils/Theme/darkTheme.js create mode 100644 Client/src/Utils/Theme/lightTheme.js diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 7eab04f22..88e1e7019 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -29,7 +29,8 @@ import CreateNewMaintenanceWindow from "./Pages/Maintenance/CreateMaintenanceWin import PageSpeedDetails from "./Pages/PageSpeed/Details"; import PageSpeedConfigure from "./Pages/PageSpeed/Configure"; import { ThemeProvider } from "@emotion/react"; -import theme, { darkTheme } from "./Utils/Theme"; +import lightTheme from "./Utils/Theme/lightTheme"; +import darkTheme from "./Utils/Theme/darkTheme"; import { useSelector } from "react-redux"; function App() { @@ -42,7 +43,7 @@ function App() { const mode = useSelector((state) => state.ui.mode); return ( - + }> { PaperProps: { className: "pagination-dropdown", sx: { - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shape.boxShadow, - backgroundColor: theme.palette.background.main, + mt: 0, + mb: theme.spacing(2), "& li": { p: theme.spacing(2), color: theme.palette.text.tertiary, diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx index 9d5f065f4..46969d7c1 100644 --- a/Client/src/Components/Inputs/Select/index.jsx +++ b/Client/src/Components/Inputs/Select/index.jsx @@ -78,16 +78,6 @@ const Select = ({ displayEmpty inputProps={{ id: id }} MenuProps={{ - PaperProps: { - sx: { - marginTop: theme.spacing(2), - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shape.boxShadow, - backgroundColor: theme.palette.background.main, - }, - }, MenuListProps: { sx: { p: 0, diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx index c6132a26e..6c1767446 100644 --- a/Client/src/Pages/Incidents/IncidentTable/index.jsx +++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx @@ -102,19 +102,6 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { page={paginationController.page + 1} //0-indexed onChange={handlePageChange} shape="rounded" - sx={{ - backgroundColor: theme.palette.background.main, - border: 1, - borderColor: theme.palette.border.light, - "& button": { - color: theme.palette.text.tertiary, - borderRadius: theme.shape.borderRadius, - }, - "& li:first-of-type button, & li:last-of-type button": { - border: 1, - borderColor: theme.palette.border.light, - }, - }} renderItem={(item) => ( { next: ArrowForwardRoundedIcon, }} {...item} - sx={{ - "&:focus": { - outline: "none", - }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, - "&.Mui-selected, &.Mui-selected:hover": { - backgroundColor: theme.palette.background.fill, - }, - }} /> )} /> @@ -164,30 +139,10 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => { ) : ( <> - + - - .MuiTableCell-root": { - color: theme.palette.text.secondary, - }, - }} - > + + Monitor Name Status Date & Time diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx index a6be7a27f..703eebd51 100644 --- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx +++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx @@ -80,19 +80,6 @@ const PaginationTable = ({ monitorId, dateRange }) => { page={paginationController.page + 1} //0-indexed onChange={handlePageChange} shape="rounded" - sx={{ - backgroundColor: theme.palette.background.main, - border: 1, - borderColor: theme.palette.border.light, - "& button": { - color: theme.palette.text.tertiary, - borderRadius: theme.shape.borderRadius, - }, - "& li:first-of-type button, & li:last-of-type button": { - border: 1, - borderColor: theme.palette.border.light, - }, - }} renderItem={(item) => ( { next: ArrowForwardRoundedIcon, }} {...item} - sx={{ - "&:focus": { - outline: "none", - }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, - "&.Mui-selected, &.Mui-selected:hover": { - backgroundColor: theme.palette.background.fill, - }, - }} /> )} /> @@ -120,45 +95,13 @@ const PaginationTable = ({ monitorId, dateRange }) => { return ( <> - +
- + - - Status - - - Date & Time - - - Message - + Status + Date & Time + Message @@ -167,31 +110,17 @@ const PaginationTable = ({ monitorId, dateRange }) => { return ( - + - + {new Date(check.createdAt).toLocaleString()} - - {check.statusCode} - + {check.statusCode} ); })} diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index d6e9da2ee..75274ba49 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx @@ -93,11 +93,6 @@ const ActionsMenu = ({ monitor, isAdmin }) => { slotProps={{ paper: { sx: { - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shape.boxShadow, - backgroundColor: theme.palette.background.main, "& ul": { p: theme.spacing(2.5), minWidth: "100px", diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index 0122847ce..2da17339a 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -55,7 +55,7 @@ const theme = createTheme({ unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, other: { icon: "#667085", - line: "#d6d9dd" + line: "#d6d9dd", }, primary: { main: "#1570EF", @@ -68,7 +68,59 @@ const theme = createTheme({ }, }, spacing: 2, - components: {}, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + marginTop: 4, + border: 1, + borderStyle: "solid", + borderColor: "#eaecf0", + borderRadius: 4, + boxShadow: shadow, + backgroundColor: "#FFFFFF", + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: "#eaecf0", + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: "#f9fafb", + }, + }, + }, + MuiPagination: { + styleOverrides: { + root: { + backgroundColor: "#FFFFFF", + border: 1, + borderStyle: "solid", + borderColor: "#eaecf0", + "& button": { + color: "#475467", + borderRadius: 4, + }, + "& li:first-of-type button, & li:last-of-type button": { + border: 1, + borderStyle: "solid", + borderColor: "#eaecf0", + }, + }, + }, + }, + }, shape: { borderRadius: 2, borderThick: 2, @@ -123,7 +175,7 @@ export const darkTheme = createTheme({ unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, other: { icon: "#e6e6e6", - line: "#27272a" + line: "#27272a", }, primary: { main: "#1570ef", @@ -136,7 +188,59 @@ export const darkTheme = createTheme({ }, }, spacing: 2, - components: {}, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + marginTop: 4, + border: 1, + borderStyle: "solid", + borderColor: "#27272a", + borderRadius: 4, + boxShadow: shadow, + backgroundColor: "#151518", + }, + }, + }, + MuiTableCell: { + styleOverrides: { + root: { + borderBottomColor: "#27272a", + }, + }, + }, + MuiTableHead: { + styleOverrides: { + root: { + backgroundColor: "#18181a", + }, + }, + }, + MuiPagination: { + styleOverrides: { + root: { + backgroundColor: "#151518", + border: 1, + borderStyle: "solid", + borderColor: "#27272a", + "& button": { + color: "#a1a1aa", + borderRadius: 4, + }, + "& li:first-of-type button, & li:last-of-type button": { + border: 1, + borderStyle: "solid", + borderColor: "#27272a", + }, + }, + }, + }, + }, shape: { borderRadius: 2, borderThick: 2, diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js new file mode 100644 index 000000000..aeb762bc0 --- /dev/null +++ b/Client/src/Utils/Theme/darkTheme.js @@ -0,0 +1,141 @@ +import { createTheme } from "@mui/material"; + +const text = { + primary: "#fafafa", + secondary: "#e6e6e6", + tertiary: "#a1a1aa", + accent: "#e6e6e6", +}; +const background = { + main: "#151518", + alt: "#09090b", + fill: "#2e2e2e", + accent: "#18181a", +}; +const border = { light: "#27272a", dark: "#2c2c2c" }; + +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 darkTheme = createTheme({ + typography: { fontFamily: fontFamilyDefault, fontSize: 13 }, + palette: { + common: { main: "#1570ef" }, + text: text, + background: background, + border: border, + info: { + text: "#475467", + main: "#475467", + bg: "#ffffff", + light: "#ffffff", + border: "#D0D5DD", + }, + success: { + text: "#079455", + main: "#45bb7a", + light: "#93d5aa", + bg: "#27272a", + }, + error: { + text: "#f04438", + main: "#d32f2f", + light: "#f04438", + bg: "#27272a", + border: "#f04438", + }, + warning: { + text: "#DC6803", + main: "#e88c30", + light: "#fffcf5", + bg: "#ffecbc", + border: "#fec84b", + }, + unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, + other: { + icon: "#e6e6e6", + line: "#27272a", + }, + primary: { + main: "#1570ef", + }, + secondary: { + main: "#e6e6e6", + }, + tertiary: { + main: "#e6e6e6", + }, + }, + spacing: 2, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + marginTop: 4, + border: 1, + borderStyle: "solid", + borderColor: border.light, + borderRadius: 4, + boxShadow: shadow, + backgroundColor: background.main, + }, + }, + }, + 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, + }, + }, + }, + }, + }, + shape: { + borderRadius: 2, + borderThick: 2, + boxShadow: shadow, + }, +}); + +export default darkTheme; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js new file mode 100644 index 000000000..28ef2b925 --- /dev/null +++ b/Client/src/Utils/Theme/lightTheme.js @@ -0,0 +1,141 @@ +import { createTheme } from "@mui/material"; + +const text = { + primary: "#1c2130", + secondary: "#344054", + tertiary: "#475467", + accent: "#838c99", +}; +const background = { + main: "#FFFFFF", + alt: "#FCFCFD", + fill: "#F4F4F4", + accent: "#f9fafb", +}; +const border = { light: "#eaecf0", dark: "#d0d5dd" }; + +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 }, + palette: { + common: { main: "#1570ef" }, + text: text, + background: background, + border: border, + info: { + text: "#475467", + main: "#475467", + bg: "#ffffff", + light: "#ffffff", + border: "#D0D5DD", + }, + success: { + text: "#079455", + main: "#17b26a", + light: "#d4f4e1", + bg: "#ecfdf3", + }, + error: { + text: "#f04438", + main: "#d32f2f", + light: "#fbd1d1", + bg: "#f9eced", + border: "#f04438", + }, + warning: { + text: "#DC6803", + main: "#fdb022", + light: "#fffcf5", + bg: "#ffecbc", + border: "#fec84b", + }, + unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, + other: { + icon: "#667085", + line: "#d6d9dd", + }, + primary: { + main: "#1570EF", + }, + secondary: { + main: "#475467", + }, + tertiary: { + main: "#475467", + }, + }, + spacing: 2, + components: { + MuiButtonBase: { + defaultProps: { + disableRipple: true, + }, + }, + MuiPaper: { + styleOverrides: { + root: { + marginTop: 4, + border: 1, + borderStyle: "solid", + borderColor: border.light, + borderRadius: 4, + boxShadow: shadow, + backgroundColor: background.main, + }, + }, + }, + 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, + }, + }, + }, + }, + }, + shape: { + borderRadius: 2, + borderThick: 2, + boxShadow: shadow, + }, +}); + +export default lightTheme;