From d5f7aadadc52b69192c9c47261baedd7ab2deb1a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 26 Aug 2024 14:45:31 -0400 Subject: [PATCH 01/18] =?UTF-8?q?=EF=BF=BD=20colors=20rebranded?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Client/src/index.css | 84 ++++++++++++++------------------------------ 1 file changed, 26 insertions(+), 58 deletions(-) diff --git a/Client/src/index.css b/Client/src/index.css index d513ac9a1..77ac4c1c5 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -7,19 +7,38 @@ :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; font-weight: 400; - - /* color-scheme: light dark; - color: rgba(255, 255, 255, 0.87); - background-color: #242424; */ - font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Generalized Stylings */ + --theme-main: #1570ef; - --env-var-font-familt-1: "Roboto", "Helvetica", "Arial", sans-serif; + --primary-color: #1c2130; + --secondary-color: #344054; + --secondary-color-light: #475467; + --secondary-color-light-accent: #838c99; + + --primary-bg: #ffffff; + --primary-bg-accent: #f9fafb; + --secondary-bg: #fcfcfd; + + --border-color: #eaecf0; + + /* OTHER COLORS */ + --success-color: #17b26a; + --success-color-light: #d4f4e1; + --success-bg: #ecfdf3; + --error-color: #f04438; + --error-color-light: #fbd1d1; + --error-bg: #f9eced; + --warning-color: #fdb022; + --warning-color-light: #fffcf5; + --warning-bg: #ffecbc; + --unresolved-color: #4e5ba6; + --unresolved-color-light: #e2eaf7; + --unresolved-bg: #f2f4f7; --env-var-color-0: #fff; --env-var-color-1: #1c2130; @@ -99,48 +118,12 @@ 0px 3px 3px -3px rgba(16, 24, 40, 0.03); } -a { - font-weight: 500; - color: #646cff; - text-decoration: inherit; -} - -a:hover { - color: #535bf2; -} - body { margin: 0; min-width: 320px; height: 100%; } -h1 { - font-size: 3.2em; - line-height: 1.1; -} - -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} - -button:hover { - border-color: #646cff; -} - -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - .MuiInputBase-root.Mui-disabled input { cursor: not-allowed; } @@ -165,7 +148,7 @@ button:focus-visible { } body .MuiSkeleton-root { - background-color: var(--env-var-color-15); + background-color: #f2f4f7; } @keyframes ripple { @@ -178,18 +161,3 @@ body .MuiSkeleton-root { transform: scale(2); } } - -@media (prefers-color-scheme: light) { - :root { - color: #213547; - background-color: #ffffff; - } - - a:hover { - color: #747bff; - } - - button { - background-color: #f9f9f9; - } -} From 64ca926a85038842b37f29ae4c501d6a1de58cf6 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 26 Aug 2024 17:22:21 -0400 Subject: [PATCH 02/18] =?UTF-8?q?=EF=BF=BD=EF=B8=8F=EF=BF=BD=EF=B8=8F?= =?UTF-8?q?=EF=BF=BD=20Updated=20color=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Client/src/App.css | 28 ----------- Client/src/Components/BasicTable/index.css | 35 ++++++------- Client/src/Components/Breadcrumbs/index.css | 4 +- .../src/Components/Charts/BarChart/index.css | 4 +- .../Charts/MonitorDetails60MinChart/index.jsx | 6 +-- .../Charts/MonitorDetailsAreaChart/index.css | 6 +-- .../Charts/ResponseTimeChart/index.jsx | 4 +- .../Charts/Statistics/Statistic.jsx | 35 ------------- .../Charts/Statistics/statistic.css | 31 ------------ Client/src/Components/Check/check.css | 10 ++-- Client/src/Components/Fallback/index.css | 2 +- .../src/Components/Inputs/Checkbox/index.css | 4 +- Client/src/Components/Inputs/Field/index.css | 14 +++--- Client/src/Components/Inputs/Image/index.css | 4 +- Client/src/Components/Inputs/Select/index.css | 12 ++--- Client/src/Components/ProgressBars/index.css | 10 ++-- Client/src/Components/RadioButton/index.css | 2 +- Client/src/Components/Sidebar/index.css | 20 ++++---- .../TabPanels/Account/TeamPanel.jsx | 2 +- .../TooltipWithTail/TooltipWithTail.jsx | 45 ----------------- .../TooltipWithTail/tooltipWithTail.css | 49 ------------------- Client/src/Layouts/HomeLayout/index.css | 8 +-- Client/src/Pages/Account/index.css | 9 ++-- Client/src/Pages/Auth/index.css | 10 ++-- Client/src/Pages/Incidents/index.css | 10 ++-- Client/src/Pages/Integrations/index.css | 6 +-- Client/src/Pages/Maintenance/index.css | 4 +- Client/src/Pages/Monitors/Configure/index.css | 16 +++--- Client/src/Pages/Monitors/Configure/index.jsx | 4 +- .../Pages/Monitors/CreateMonitor/index.css | 14 +++--- Client/src/Pages/Monitors/index.css | 20 ++++---- Client/src/Pages/Monitors/index.jsx | 4 +- Client/src/Pages/NotFound/index.css | 2 +- .../src/Pages/PageSpeed/Configure/index.css | 10 ++-- .../src/Pages/PageSpeed/Configure/index.jsx | 4 +- .../Pages/PageSpeed/CreatePageSpeed/index.css | 8 +-- Client/src/Pages/PageSpeed/Details/index.css | 10 ++-- Client/src/Pages/PageSpeed/Details/index.jsx | 2 +- Client/src/Pages/PageSpeed/index.css | 8 +-- Client/src/Pages/PageSpeed/index.jsx | 6 ++- Client/src/Pages/Settings/index.css | 6 +-- Client/src/index.css | 2 + 42 files changed, 155 insertions(+), 335 deletions(-) delete mode 100644 Client/src/Components/Charts/Statistics/Statistic.jsx delete mode 100644 Client/src/Components/Charts/Statistics/statistic.css delete mode 100644 Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx delete mode 100644 Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css diff --git a/Client/src/App.css b/Client/src/App.css index 0d669ffa5..bf3d4ea92 100644 --- a/Client/src/App.css +++ b/Client/src/App.css @@ -1,31 +1,3 @@ -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - .card { padding: 2em; } diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index 208604021..69562d661 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -17,7 +17,7 @@ .MuiPaper-root:has(table.MuiTable-root) { box-shadow: none; - border: solid 1px var(--env-var-color-16); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); } .MuiTable-root @@ -28,7 +28,7 @@ } .MuiTable-root .MuiTableHead-root, .MuiTable-root .MuiTableRow-root:hover { - background-color: var(--env-var-color-13); + background-color: var(--primary-bg-accent); } .MuiTable-root .MuiTableHead-root .MuiTableCell-root, .MuiTable-root .MuiTableBody-root .MuiTableCell-root { @@ -37,7 +37,7 @@ .MuiTable-root .MuiTableHead-root .MuiTableCell-root { padding: var(--env-var-spacing-1) var(--env-var-spacing-2); font-weight: 500; - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .MuiTable-root .MuiTableHead-root span { display: inline-block; @@ -52,7 +52,7 @@ height: 20px; } .MuiTable-root .MuiTableBody-root .MuiTableCell-root { - color: var(--env-var-color-5); + color: var(--secondary-color); padding: 6px var(--env-var-spacing-2); } .MuiTable-root .MuiTableBody-root .MuiTableRow-root { @@ -61,7 +61,8 @@ .MuiPaper-root + .MuiPagination-root { margin-top: 24px; - border: solid 1px var(--env-var-color-16); + background-color: var(--primary-bg); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2); } @@ -74,7 +75,7 @@ li:not(:first-child):not(:last-child) button { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); font-weight: 500; } .MuiPaper-root + .MuiPagination-root ul li:first-child { @@ -85,7 +86,7 @@ } .MuiPaper-root + .MuiPagination-root ul li:first-child button, .MuiPaper-root + .MuiPagination-root ul li:last-child button { - border: solid 1px var(--env-var-color-16); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); } .MuiPaper-root + .MuiPagination-root ul li:first-child button { @@ -108,20 +109,20 @@ margin-right: 15px; } .MuiPaper-root + .MuiPagination-root .MuiPaginationItem-root.Mui-selected { - background-color: var(--env-var-color-15); + background-color: var(--primary-bg-fill); } .MuiPaper-root + .MuiPagination-root div.MuiPaginationItem-root { user-select: none; } .MuiTablePagination-root p { - color: var(--env-var-color-2); + color: var(--secondary-color-light); font-weight: 500; font-size: var(--env-var-font-size-small-plus); } .MuiTablePagination-root button, .MuiTablePagination-root .MuiSelect-select { - border: solid 1px #ebebeb; + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); } .MuiTablePagination-root .MuiTablePagination-select.MuiSelect-select { @@ -138,7 +139,7 @@ height: 22px; } .MuiTablePagination-root svg path { - stroke: var(--env-var-color-2); + stroke: var(--secondary-color-light); stroke-width: 1.3; } .MuiTablePagination-root .MuiSelect-icon { @@ -152,13 +153,13 @@ opacity: 0.4; } .MuiTablePagination-root button:not(.Mui-disabled):hover { - background-color: #f4f4f4; - border-color: #f4f4f4; + background-color: var(--primary-bg-fill); + border-color: var(--primary-bg-fill); } .pagination-dropdown.MuiPaper-root { box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); } .pagination-dropdown ul { @@ -168,13 +169,13 @@ .pagination-dropdown li, body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); + color: var(--secondary-color-light); padding: 4px; } .pagination-dropdown li.Mui-selected, .pagination-dropdown li.Mui-selected.Mui-focusVisible, .pagination-dropdown li.Mui-selected:hover { - background-color: #f4f4f4; + background-color: var(--primary-bg-fill); } body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) { font-size: var(--env-var-font-size-small-plus); @@ -182,7 +183,7 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) { .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root { text-transform: uppercase; - color: var(--env-var-color-5); + color: var(--secondary-color); opacity: 0.8; font-size: var(--env-var-font-size-small-plus); font-weight: 400; diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css index b7d190de1..1d1454b3d 100644 --- a/Client/src/Components/Breadcrumbs/index.css +++ b/Client/src/Components/Breadcrumbs/index.css @@ -7,12 +7,12 @@ } .MuiBreadcrumbs-root .MuiBreadcrumbs-li a { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); + color: var(--secondary-color-light); opacity: 0.8; font-weight: 400; } .MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a { - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a { opacity: 1; diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css index e386aef1c..ed22f8bd7 100644 --- a/Client/src/Components/Charts/BarChart/index.css +++ b/Client/src/Components/Charts/BarChart/index.css @@ -9,11 +9,11 @@ .bar-tooltip .MuiTooltip-tooltip p { font-size: var(--env-var-font-size-small-plus); - color: var(--env-var-color-2); + color: var(--secondary-color-light); font-weight: 500; } .bar-tooltip .MuiTooltip-tooltip span { font-size: var(--env-var-font-size-small); - color: var(--env-var-color-2); + color: var(--secondary-color-light); font-weight: 600; } diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx index f7fc0d3d8..dbb45f109 100644 --- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx @@ -9,9 +9,9 @@ const MonitorDetails60MinChart = ({ data }) => { }; const color = { - true: "var(--env-var-color-23)", - false: "var(--env-var-color-24)", - undefined: "var(--env-var-color-33)", + true: "var(--success-color)", + false: "var(--error-color)", + undefined: "var(--unresolved-color)", }; return ( { key={`cell-${index}`} fill={ check.status === true - ? "var(--env-var-color-23)" - : "var(--env-var-color-24)" + ? "var(--success-color)" + : "var(--error-color)" } /> ))} diff --git a/Client/src/Components/Charts/Statistics/Statistic.jsx b/Client/src/Components/Charts/Statistics/Statistic.jsx deleted file mode 100644 index 99ad2066f..000000000 --- a/Client/src/Components/Charts/Statistics/Statistic.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from "react"; -import "./statistic.css"; -import PropTypes from "prop-types"; -import { useTheme } from "@mui/material"; - -/** - * @component - * @param {Object} props - * @param {string} props.title - The title text for the statistic (required) - * @param {string} props.value - The numerical or textual value for the statistic (required) - * @returns {JSX.Element} - Renders the statistic component - */ -const Statistic = ({ title, value }) => { - const theme = useTheme(); - - const fontLookup = { - default: theme.font.default.font, - }; - - const fontFamily = fontLookup["default"]; - - return ( -
-
{title}
-
{value}
-
- ); -}; - -Statistic.propTypes = { - title: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, -}; - -export default Statistic; diff --git a/Client/src/Components/Charts/Statistics/statistic.css b/Client/src/Components/Charts/Statistics/statistic.css deleted file mode 100644 index a8834199d..000000000 --- a/Client/src/Components/Charts/Statistics/statistic.css +++ /dev/null @@ -1,31 +0,0 @@ -:root { - --stats-spacing-general-0: 5px 10px; - --color-border-0: #eaecf0; - --border-radius-0: 4px; - --font-size-0: 1rem; - --font-size-1: 13px; - --font-color-0: #344054; - --margin-bottom-0: 10px; -} - -.statistic-tile { - margin: var(--stats-spacing-general-0); - padding: var(--stats-spacing-general-0); - border: 1px solid var(--color-border-0); - border-radius: var(--border-radius-0); - - width: 180px; -} - -.statistic-tile-title { - font-size: var(--font-size-0); - color: var(--font-color-0); - margin-bottom: var(--margin-bottom-0); -} - -.statistic-tile-value { - font-size: var(--font-size-1); - color: var(--font-color-0); - font-weight: 700; - margin-bottom: var(--margin-bottom-0); -} diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css index f1432d2bc..8d9bbc24e 100644 --- a/Client/src/Components/Check/check.css +++ b/Client/src/Components/Check/check.css @@ -1,17 +1,17 @@ .check > span.MuiTypography-root { font-size: var(--env-var-font-size-small-plus); - color: var(--env-var-color-2); + color: var(--secondary-color-light); opacity: 0.8; } .check-error span.MuiTypography-root { - color: var(--env-var-color-24); + color: var(--error-color); } .check-error svg > path { - fill: var(--env-var-color-19); + fill: var(--error-color); } .check-success span.MuiTypography-root { - color: var(--env-var-color-17); + color: var(--success-color); } .check-success svg > path { - fill: var(--env-var-color-23); + fill: var(--success-color); } diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css index 226c7bc47..ea1925ff5 100644 --- a/Client/src/Components/Fallback/index.css +++ b/Client/src/Components/Fallback/index.css @@ -9,7 +9,7 @@ } [class*="fallback__"] .check span.MuiTypography-root, [class*="fallback__"] h1.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } [class*="fallback__"] button.MuiButtonBase-root, [class*="fallback__"] .check { diff --git a/Client/src/Components/Inputs/Checkbox/index.css b/Client/src/Components/Inputs/Checkbox/index.css index 0d2285955..130be8853 100644 --- a/Client/src/Components/Inputs/Checkbox/index.css +++ b/Client/src/Components/Inputs/Checkbox/index.css @@ -2,11 +2,11 @@ border-radius: var(--env-var-radius-1); } .checkbox-wrapper:not(:has(.Mui-disabled)):hover { - background-color: var(--env-var-color-15); + background-color: var(--unresolved-bg); } .checkbox-wrapper span.MuiTypography-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .checkbox-wrapper .MuiButtonBase-root { margin-right: var(--env-var-spacing-1); diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css index 3e2435694..8c86f9e30 100644 --- a/Client/src/Components/Inputs/Field/index.css +++ b/Client/src/Components/Inputs/Field/index.css @@ -12,13 +12,13 @@ .field h5.MuiTypography-root, .field input, .field textarea { - color: var(--env-var-color-5); + color: var(--secondary-color); } .field h3.MuiTypography-root { font-weight: 500; } .field h3.MuiTypography-root span.field-required { - color: var(--env-var-color-19); + color: var(--error-color); margin-left: 2px; } .field h3.MuiTypography-root span.field-optional { @@ -53,7 +53,7 @@ margin-right: 5px; } .field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); } .field input { height: 100%; @@ -63,20 +63,20 @@ padding: var(--env-var-spacing-1-minus); } .field .MuiOutlinedInput-root fieldset { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); border-radius: var(--env-var-radius-1); } .field:not(:has(.Mui-disabled)):not(:has(.input-error)) .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); } .field .input-error { - color: var(--env-var-color-24); + color: var(--error-color); opacity: 0.8; } .field:has(.input-error) .MuiOutlinedInput-root fieldset { - border-color: var(--env-var-color-19); + border-color: var(--error-color); } .register-page .field .MuiOutlinedInput-root fieldset, diff --git a/Client/src/Components/Inputs/Image/index.css b/Client/src/Components/Inputs/Image/index.css index 96a730bf0..4c427c9de 100644 --- a/Client/src/Components/Inputs/Image/index.css +++ b/Client/src/Components/Inputs/Image/index.css @@ -2,7 +2,7 @@ .image-field-wrapper p.MuiTypography-root, .image-field-wrapper + p.MuiTypography-root, .MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root { - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .MuiStack-root:has(#modal-update-picture) h1.MuiTypography-root { font-weight: 600; @@ -24,6 +24,6 @@ font-size: var(--env-var-font-size-small-plus); } .image-field-wrapper h2.MuiTypography-root span { - color: var(--env-var-color-3); + color: var(--theme-main); font-weight: 500; } diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css index be1a92503..a760010bf 100644 --- a/Client/src/Components/Inputs/Select/index.css +++ b/Client/src/Components/Inputs/Select/index.css @@ -13,21 +13,21 @@ .MuiMenu-List .MuiMenuItem-root, .select-wrapper h3.MuiTypography-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); } .select-wrapper h3.MuiTypography-root { font-weight: 500; } .MuiInputBase-root:has(> .MuiSelect-select) fieldset { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); } .MuiInputBase-root:not(.Mui-focused):has(> .MuiSelect-select):hover fieldset { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); } .select-dropdown.MuiPaper-root { box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); } .select-dropdown .MuiList-root { @@ -35,12 +35,12 @@ } .select-dropdown li { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); padding: 5px 8px; border-radius: var(--env-var-radius-1); } .select-dropdown li.Mui-selected, .select-dropdown li.Mui-selected.Mui-focusVisible, .select-dropdown li.Mui-selected:hover { - background-color: #f4f4f4; + background-color: var(--primary-bg-fill); } diff --git a/Client/src/Components/ProgressBars/index.css b/Client/src/Components/ProgressBars/index.css index 5ba1939da..214a409a8 100644 --- a/Client/src/Components/ProgressBars/index.css +++ b/Client/src/Components/ProgressBars/index.css @@ -4,7 +4,7 @@ } .progress-bar-container h2.MuiTypography-root, .progress-bar-container p.MuiTypography-root { - color: var(--env-var-color-2); + color: var(--secondary-color-light); font-size: var(--env-var-font-size-medium); } .progress-bar-container p.MuiTypography-root { @@ -17,16 +17,16 @@ padding-left: 2px; } .progress-bar-container:has(p.input-error){ - border-color: var(--env-var-color-19); - background-color: var(--env-var-color-21); + border-color: var(--error-color); + background-color: var(--error-bg); padding: 8px var(--env-var-spacing-1-plus); } .progress-bar-container p.input-error{ - color: var(--env-var-color-24); + color: var(--error-color); opacity: 0.8; } .progress-bar-container:has(p.input-error)>.MuiStack-root>svg{ - fill: var(--env-var-color-24); + fill: var(--error-color); width: 20px; height: 20px; } diff --git a/Client/src/Components/RadioButton/index.css b/Client/src/Components/RadioButton/index.css index 353bbdf55..3f6fba7bb 100644 --- a/Client/src/Components/RadioButton/index.css +++ b/Client/src/Components/RadioButton/index.css @@ -6,7 +6,7 @@ } .create-monitor-form .custom-radio-button.MuiFormControlLabel-root:hover, .configure-monitor .custom-radio-button.MuiFormControlLabel-root:hover { - background-color: var(--env-var-color-15); + background-color: var(--unresolved-bg); } .custom-radio-button.MuiFormControlLabel-root .MuiButtonBase-root { diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css index 4c253c781..0996b3f71 100644 --- a/Client/src/Components/Sidebar/index.css +++ b/Client/src/Components/Sidebar/index.css @@ -1,7 +1,7 @@ aside .selected-path, .sidebar-popup .selected-path, aside .MuiListItemButton-root:hover { - background-color: var(--env-var-color-13); + background-color: var(--primary-bg-accent); } aside .MuiList-root svg { width: 20px; @@ -9,7 +9,7 @@ aside .MuiList-root svg { opacity: 0.9; } aside .MuiList-root svg path { - stroke: var(--env-var-color-2); + stroke: var(--secondary-color-light); } aside span.MuiTypography-root { font-size: var(--env-var-font-size-medium); @@ -29,7 +29,7 @@ aside .MuiListSubheader-root { aside span.MuiTypography-root, aside p.MuiTypography-root, aside .MuiListSubheader-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } aside p.MuiTypography-root { font-size: var(--env-var-font-size-small); @@ -48,7 +48,7 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .MuiListItemButton-root { position: relative; } aside .MuiDivider-root { - border-color: var(--env-var-color-6); + border-color: var(--border-color); } aside .MuiCollapse-wrapperInner @@ -60,7 +60,7 @@ aside top: 0; height: 100%; width: 100%; - border-left: solid 1px var(--env-var-color-5); + border-left: solid 1px var(--secondary-color); opacity: 0.2; } aside @@ -90,13 +90,13 @@ aside .MuiCollapse-wrapperInner .MuiList-root > .selected-path.MuiListItemButton-root::after { - background-color: var(--env-var-color-2); + background-color: var(--secondary-color-light); transform: scale(1.2); } .sidebar-popup .MuiPaper-root { box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); gap: 1px; } @@ -106,12 +106,12 @@ aside } .sidebar-popup li.MuiButtonBase-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); padding: 5px 8px; border-radius: var(--env-var-radius-1); } .sidebar-popup li.MuiButtonBase-root:hover { - background-color: var(--env-var-color-13); + background-color: var(--primary-bg-accent); } .sidebar-popup li.MuiButtonBase-root:has(.MuiBox-root):hover { background-color: white; @@ -121,7 +121,7 @@ aside } .sidebar-popup .MuiModal-root p.MuiTypography-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .sidebar-popup svg { width: 16px; diff --git a/Client/src/Components/TabPanels/Account/TeamPanel.jsx b/Client/src/Components/TabPanels/Account/TeamPanel.jsx index a0393977d..cac7adc62 100644 --- a/Client/src/Components/TabPanels/Account/TeamPanel.jsx +++ b/Client/src/Components/TabPanels/Account/TeamPanel.jsx @@ -90,7 +90,7 @@ const TeamPanel = () => { > {member.firstName + " " + member.lastName} - + Created {new Date(member.createdAt).toLocaleDateString()} diff --git a/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx b/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx deleted file mode 100644 index 1b1fb8b4d..000000000 --- a/Client/src/Components/Tooltips/TooltipWithTail/TooltipWithTail.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import "./tooltipWithTail.css"; -import React from "react"; -import { styled } from "@mui/material/styles"; -import Tooltip, { tooltipClasses } from "@mui/material/Tooltip"; -import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; - -const CustomizedTooltip = styled( - ({ className, placement, arrow, ...props }) => ( - - ) -)(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: "black", - }, - [`& .${tooltipClasses.arrow}`]: { - color: "black", - }, -})); - -function TooltipWithTail({ placement, arrow = false, title, text }) { - return ( -
- - {title &&
{title}
} -
{text}
- - } - className="tooltip-holder" - > - - -
- ); -} - -export default TooltipWithTail; diff --git a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css b/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css deleted file mode 100644 index 3efe67643..000000000 --- a/Client/src/Components/Tooltips/TooltipWithTail/tooltipWithTail.css +++ /dev/null @@ -1,49 +0,0 @@ -:root { - --env-var-color-1: #101828; - --env-var-color-2: #475467; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - - --env-var-radius-1: 4px; - --env-var-radius-2: 8px; - - --env-var-width-1: 100vw; - --env-var-width-2: 360px; - - --env-var-height-1: 100vh; - - --env-var-spacing-1: 12px; - --env-var-spacing-2: 24px; - --env-var-spacing-3: 32px; - --env-var-spacing-4: 40px; - - --env-var-font-size-small: 11px; - --env-var-font-size-medium: 13px; - --env-var-font-size-medium-plus: 14px; - --env-var-font-size-large: 16px; - --env-var-font-size-xlarge: 30px; - - --env-var-img-width-1: 20px; - - --env-var-default-1: 24px; - --env-var-default-2: 40px; -} - -.tooltip-title { - font-size: var(--env-var-font-size-medium); - font-weight: bold; - margin: 5px; -} - -.tooltip-description { - font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-4); - margin: 5px; -} diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index e85a6362b..75a1925f3 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -1,5 +1,5 @@ #root:has(.home-layout) { - background-color: var(--env-var-color-30); + background-color: var(--secondary-bg); } .home-layout { @@ -20,7 +20,7 @@ height: calc(100vh - var(--env-var-spacing-2) * 2); max-width: var(--env-var-side-bar-width); - border: 1px solid var(--env-var-color-6); + border: 1px solid var(--border-color); border-radius: var(--env-var-radius-1); background-color: var(--env-var-color-8); @@ -33,10 +33,10 @@ } .home-layout > div:has(> [class*="fallback__"]) { - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); border-style: dashed; - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); overflow: hidden; position: relative; } diff --git a/Client/src/Pages/Account/index.css b/Client/src/Pages/Account/index.css index 594b7b839..82d5fc991 100644 --- a/Client/src/Pages/Account/index.css +++ b/Client/src/Pages/Account/index.css @@ -10,7 +10,7 @@ .account p.MuiTypography-root, .account input, .account .MuiSelect-select { - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .account h1.MuiTypography-root { font-weight: 600; @@ -21,7 +21,7 @@ } .account .MuiDivider-root, .account .MuiButtonGroup-root button { - border-color: var(--env-var-color-16); + border-color: var(--border-color); } .account button:not(.MuiIconButton-root) { height: 34px; @@ -43,8 +43,9 @@ top: 100%; } -.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root { - color: var(--env-var-color-25); +.account .MuiTable-root .MuiTableBody-root .MuiTableCell-root, +.account .MuiTable-root p + p { + color: var(--secondary-color-light-accent); } .account .MuiTableBody-root .MuiTableCell-root { padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2); diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css index 979ae191c..bf95174a8 100644 --- a/Client/src/Pages/Auth/index.css +++ b/Client/src/Pages/Auth/index.css @@ -5,7 +5,7 @@ .auth h1 { font-size: var(--env-var-font-size-xlarge); font-weight: 600; - color: var(--env-var-color-3); + color: var(--theme-main); } .auth button:not(.MuiIconButton-root), .auth p, @@ -14,15 +14,15 @@ font-size: var(--env-var-font-size-medium-plus); } .auth p { - color: var(--env-var-color-2-light); + color: var(--secondary-color-light-accent); } .auth .field h3.MuiTypography-root, .auth .field input { - color: var(--env-var-color-5); + color: var(--secondary-color); } .auth p + span { - color: var(--env-var-color-3); + color: var(--theme-main); opacity: 0.8; cursor: pointer; transition: opacity 300ms ease-in; @@ -34,7 +34,7 @@ transition: all 200ms; } .auth p > span:not(.email-sent-to):hover { - color: var(--env-var-color-2); + color: var(--secondary-color-light); text-underline-offset: 4px; } .auth p + span:hover { diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css index 286552d22..b434d5e63 100644 --- a/Client/src/Pages/Incidents/index.css +++ b/Client/src/Pages/Incidents/index.css @@ -1,6 +1,6 @@ .incidents h1.MuiTypography-root, .incidents p.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .incidents h1.MuiTypography-root { font-size: var(--env-var-font-size-large); @@ -12,14 +12,14 @@ } .incidents button.MuiButtonBase-root { height: 34px; - border-color: var(--env-var-color-16); + border-color: var(--border-color); } .incidents .MuiPagination-root { - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } .incidents > .MuiBox-root { - background-color: var(--env-var-color-8); - border: solid 1px var(--env-var-color-6); + background-color: var(--primary-bg); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); padding: 60px; } diff --git a/Client/src/Pages/Integrations/index.css b/Client/src/Pages/Integrations/index.css index c05b44212..1258b69af 100644 --- a/Client/src/Pages/Integrations/index.css +++ b/Client/src/Pages/Integrations/index.css @@ -1,6 +1,6 @@ .integrations h1.MuiTypography-root, .integrations p.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .integrations h1.MuiTypography-root { font-size: var(--env-var-font-size-large); @@ -14,7 +14,7 @@ } .integrations .MuiGrid-item > .MuiStack-root { - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } diff --git a/Client/src/Pages/Maintenance/index.css b/Client/src/Pages/Maintenance/index.css index f26a48767..46ba8b0fa 100644 --- a/Client/src/Pages/Maintenance/index.css +++ b/Client/src/Pages/Maintenance/index.css @@ -13,7 +13,7 @@ } .maintenance-title { - color: var(--env-var-color-2); + color: var(--secondary-color-light); font-size: 16px; font-weight: bold; margin-top: 40px; @@ -22,7 +22,7 @@ .checklist-item { font-size: 13px; - color: var(--env-var-color-2); + color: var(--secondary-color-light); display: flex; margin-bottom: 10px; } diff --git a/Client/src/Pages/Monitors/Configure/index.css b/Client/src/Pages/Monitors/Configure/index.css index ec140887c..1f46d12d3 100644 --- a/Client/src/Pages/Monitors/Configure/index.css +++ b/Client/src/Pages/Monitors/Configure/index.css @@ -1,6 +1,6 @@ .configure-monitor h1.MuiTypography-root { font-size: var(--env-var-font-size-large-plus); - color: var(--env-var-color-1); + color: var(--primary-color); font-weight: 600; } .configure-monitor h2.MuiTypography-root { @@ -10,10 +10,10 @@ .configure-monitor h2.MuiTypography-root, .configure-monitor .config-box p.MuiTypography-root, .configure-monitor .MuiSelect-select { - color: var(--env-var-color-5); + color: var(--secondary-color); } .configure-monitor .MuiModal-root h2.MuiTypography-root { - color: var(--env-var-color-1); + color: var(--primary-color); } .configure-monitor p.MuiTypography-root, .configure-monitor .MuiSelect-select { @@ -33,9 +33,9 @@ height: var(--env-var-height-2); } .configure-monitor .config-box { - border: 1px solid var(--env-var-color-16); + border: 1px solid var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } .configure-monitor .config-box > .MuiBox-root, .configure-monitor .config-box > .MuiStack-root { @@ -45,7 +45,7 @@ } .configure-monitor .config-box > *:first-child { flex: 0.7; - border-right: solid 1px var(--env-var-color-16); + border-right: solid 1px var(--border-color); } .configure-monitor .MuiStack-root:has(span.MuiTypography-root.input-error) { position: relative; @@ -55,7 +55,7 @@ top: 100%; } .configure-monitor .MuiInputBase-root:has(> .Mui-disabled) { - background-color: var(--env-var-color-13); + background-color: var(--primary-bg-accent); } .MuiInputBase-root:has(#monitor-interval) { @@ -69,7 +69,7 @@ align-items: center; } .MuiInputBase-root:not(.Mui-focused):has(#monitor-interval):hover fieldset { - border-color: var(--env-var-color-29); + border-color: var(--border-color-dark); } body:has(.configure-monitor) .select-dropdown .MuiMenuItem-root, diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx index bd2a26df0..25d2698cd 100644 --- a/Client/src/Pages/Monitors/Configure/index.jsx +++ b/Client/src/Pages/Monitors/Configure/index.jsx @@ -249,8 +249,8 @@ const Configure = () => { lineHeight={theme.gap.large} sx={{ color: monitor?.status - ? "var(--env-var-color-17)" - : "var(--env-var-color-24)", + ? "var(--success-color)" + : "var(--error-color)", }} > Your site is {monitor?.status ? "up" : "down"}. diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css index 2a1b5a2a6..3e5571675 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.css +++ b/Client/src/Pages/Monitors/CreateMonitor/index.css @@ -1,6 +1,6 @@ .create-monitor h1.MuiTypography-root { font-size: var(--env-var-font-size-large-plus); - color: var(--env-var-color-1); + color: var(--primary-color); font-weight: 500; } .create-monitor h2.MuiTypography-root { @@ -12,11 +12,11 @@ font-size: var(--env-var-font-size-medium); } .create-monitor h2.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .create-monitor h6.MuiTypography-root, .create-monitor p.MuiTypography-root { - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .create-monitor h6.MuiTypography-root, .create-monitor .MuiBox-root .field + p.MuiTypography-root { @@ -30,7 +30,7 @@ position: relative; } .create-monitor .error-container p.MuiTypography-root.input-error { - color: var(--env-var-color-24); + color: var(--error-color); opacity: 0.8; position: absolute; top: 0; @@ -44,9 +44,9 @@ } .create-monitor .config-box { flex-direction: row; - border: 1px solid var(--env-var-color-16); + border: 1px solid var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } .create-monitor .config-box > .MuiBox-root, .create-monitor .config-box > .MuiStack-root { @@ -56,7 +56,7 @@ } .create-monitor .config-box > *:first-child { flex: 0.7; - border-right: solid 1px var(--env-var-color-16); + border-right: solid 1px var(--border-color); } .create-monitor .MuiStack-root .MuiButtonGroup-root button { diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css index 71eb2c755..e0c111036 100644 --- a/Client/src/Pages/Monitors/index.css +++ b/Client/src/Pages/Monitors/index.css @@ -1,16 +1,16 @@ .monitors h1.MuiTypography-root { font-size: var(--env-var-font-size-large-plus); - color: var(--env-var-color-1); + color: var(--primary-color); font-weight: 500; } .monitors h2.MuiTypography-root { font-size: var(--env-var-font-size-large); - color: var(--env-var-color-5); + color: var(--secondary-color); font-weight: 500; } .monitors p.MuiTypography-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); } .monitors h1.MuiTypography-root + p.MuiTypography-root { font-size: var(--env-var-font-size-medium-plus); @@ -28,19 +28,19 @@ padding: 5px; min-width: 25px; min-height: 25px; - background-color: var(--env-var-color-15); - border: 1px solid var(--env-var-color-6); + background-color: var(--unresolved-bg); + border: 1px solid var(--border-color); border-radius: 50%; font-size: var(--env-var-font-size-medium); font-weight: 500; - color: var(--env-var-color-1); + color: var(--primary-color); margin-left: 10px; line-height: 0.8; } body:has(.monitors) .actions-menu .MuiPaper-root { box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); gap: 1px; } @@ -50,14 +50,14 @@ body:has(.monitors) .actions-menu .MuiList-root { } body:has(.monitors) .actions-menu li.MuiButtonBase-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); padding: 5px 8px; border-radius: var(--env-var-radius-1); } body:has(.monitors) .actions-menu li.MuiButtonBase-root:last-of-type { - color: var(--env-var-color-26); + color: var(--error-color); } body:has(.monitors) .actions-menu .MuiModal-root p.MuiTypography-root { font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-2); + color: var(--secondary-color-light); } diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index b935231d6..44101b332 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -448,8 +448,8 @@ const Monitors = () => { percentage: 100, percentageColor: monitor.status === true - ? "var(--env-var-color-17)" - : "var(--env-var-color-19)", + ? "var(--success-color)" + : "var(--error-color)", status: monitor.status === true ? "up" : "down", }; diff --git a/Client/src/Pages/NotFound/index.css b/Client/src/Pages/NotFound/index.css index 621172386..3d7c48aae 100644 --- a/Client/src/Pages/NotFound/index.css +++ b/Client/src/Pages/NotFound/index.css @@ -11,5 +11,5 @@ } .not-found-page h1, .not-found-page p { - color: var(--env-var-color-5); + color: var(--secondary-color); } diff --git a/Client/src/Pages/PageSpeed/Configure/index.css b/Client/src/Pages/PageSpeed/Configure/index.css index 408e2d639..140d37887 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.css +++ b/Client/src/Pages/PageSpeed/Configure/index.css @@ -1,6 +1,6 @@ .configure-pagespeed form > .MuiStack-root:nth-child(2) { - background-color: var(--env-var-color-8); - border: solid 1px var(--env-var-color-6); + background-color: var(--primary-bg); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge); } @@ -9,14 +9,14 @@ } .configure-pagespeed h1.MuiTypography-root, .configure-pagespeed h2.MuiTypography-root { - color: var(--env-var-color-1); + color: var(--primary-color); } .configure-pagespeed span.MuiTypography-root { font-size: var(--env-var-font-size-small-plus); } .configure-pagespeed p.MuiTypography-root, .configure-pagespeed h3.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .configure-pagespeed h1.MuiTypography-root, .configure-pagespeed h3.MuiTypography-root, @@ -39,7 +39,7 @@ margin-bottom: 1px; } .configure-pagespeed .MuiInputBase-root:has(> .Mui-disabled) { - background-color: var(--env-var-color-13); + background-color: var(--primary-bg-accent); } /* to be removed */ .configure-pagespeed .section-disabled { diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx index 83484de7e..21fc32fed 100644 --- a/Client/src/Pages/PageSpeed/Configure/index.jsx +++ b/Client/src/Pages/PageSpeed/Configure/index.jsx @@ -187,8 +187,8 @@ const PageSpeedConfigure = () => { component="span" sx={{ color: monitor?.status - ? "var(--env-var-color-17)" - : "var(--env-var-color-24)", + ? "var(--success-color)" + : "var(--error-color)", }} > Your pagespeed monitor is {monitor?.status ? "live" : "down"}. diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css index 42ca0ffa8..f0581565f 100644 --- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css +++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.css @@ -1,16 +1,16 @@ .create-page-speed form > .MuiStack-root:not(:last-of-type) { - background-color: var(--env-var-color-8); - border: solid 1px var(--env-var-color-6); + background-color: var(--primary-bg); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); padding: var(--env-var-font-size-large-plus) var(--env-var-font-size-xlarge); } .create-page-speed h1.MuiTypography-root { font-size: 22px; - color: var(--env-var-color-1); + color: var(--primary-bg); } .create-page-speed p.MuiTypography-root, .create-page-speed h3.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .create-page-speed h1.MuiTypography-root, .create-page-speed h3.MuiTypography-root { diff --git a/Client/src/Pages/PageSpeed/Details/index.css b/Client/src/Pages/PageSpeed/Details/index.css index 357177c78..147c1d7d9 100644 --- a/Client/src/Pages/PageSpeed/Details/index.css +++ b/Client/src/Pages/PageSpeed/Details/index.css @@ -1,6 +1,6 @@ .page-speed-details h1 { font-size: var(--env-var-font-size-large-plus); - color: var(--env-var-color-1); + color: var(--primary-color); } .page-speed-details h2, .page-speed-details h6 { @@ -18,10 +18,10 @@ .page-speed-details h2, .page-speed-details h4, .page-speed-details p { - color: var(--env-var-color-5); + color: var(--secondary-color); } .page-speed-details h6 { - color: var(--env-var-color-3); + color: var(--theme-main); line-height: 22px; } .page-speed-details h1, @@ -36,9 +36,9 @@ .page-speed-details .stat-box, .page-speed-details > .MuiStack-root:last-child, .page-speed-details > .MuiBox-root:nth-last-child(3) { - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); min-width: 200px; } .page-speed-details .stat-box { diff --git a/Client/src/Pages/PageSpeed/Details/index.jsx b/Client/src/Pages/PageSpeed/Details/index.jsx index 2e5cc12a7..ba24c88df 100644 --- a/Client/src/Pages/PageSpeed/Details/index.jsx +++ b/Client/src/Pages/PageSpeed/Details/index.jsx @@ -342,7 +342,7 @@ const PageSpeedDetails = () => { Your pagespeed monitor is live. diff --git a/Client/src/Pages/PageSpeed/index.css b/Client/src/Pages/PageSpeed/index.css index b910c1645..904aa4e0f 100644 --- a/Client/src/Pages/PageSpeed/index.css +++ b/Client/src/Pages/PageSpeed/index.css @@ -1,10 +1,10 @@ .page-speed h1.MuiTypography-root, .page-speed span.MuiTypography-root, .page-speed p.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .page-speed h2.MuiTypography-root { - color: var(--env-var-color-3); + color: var(--theme-main); line-height: 1.1; } .page-speed h1.MuiTypography-root, @@ -20,9 +20,9 @@ font-size: var(--env-var-font-size-small-plus); } .page-speed .MuiGrid-item > .MuiStack-root { - border: solid 1px var(--env-var-color-6); + border: solid 1px var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } .page-speed .label { padding: 7px; diff --git a/Client/src/Pages/PageSpeed/index.jsx b/Client/src/Pages/PageSpeed/index.jsx index 368ae2062..dc327ad5f 100644 --- a/Client/src/Pages/PageSpeed/index.jsx +++ b/Client/src/Pages/PageSpeed/index.jsx @@ -22,7 +22,11 @@ const Card = ({ data }) => { item lg={6} flexGrow={1} - sx={{ "&:hover > .MuiStack-root": { backgroundColor: "#f9fafb" } }} + sx={{ + "&:hover > .MuiStack-root": { + backgroundColor: "var(--primary-bg-accent)", + }, + }} > Date: Mon, 26 Aug 2024 17:23:26 -0400 Subject: [PATCH 03/18] =?UTF-8?q?=EF=BF=BD=20Removed=20old=20variables?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Client/src/index.css | 40 +--------------------------------------- 1 file changed, 1 insertion(+), 39 deletions(-) diff --git a/Client/src/index.css b/Client/src/index.css index 21c252f54..717b3c16c 100644 --- a/Client/src/index.css +++ b/Client/src/index.css @@ -42,45 +42,7 @@ --unresolved-color-light: #e2eaf7; --unresolved-bg: #f2f4f7; - --env-var-color-0: #fff; - --env-var-color-1: #1c2130; - --env-var-color-2: #475467; - --env-var-color-2-light: #838c99; - --env-var-color-3: #1570ef; - - --env-var-color-4: #d0d5dd; - --env-var-color-5: #344054; - --env-var-color-6: #eaecf0; - --env-var-color-7: #7f56d9; - --env-var-color-8: #fff; - --env-var-color-9: #f2f2f2; - --env-var-color-10: #175cd3; - --env-var-color-11: #5d6b98; - --env-var-color-12: #182230; - --env-var-color-13: #f9fafb; - --env-var-color-14: #98a2b3; - --env-var-color-15: #f2f4f7; - --env-var-color-16: #ebebeb; - --env-var-color-17: #079455; - --env-var-color-18: #ffc301; - --env-var-color-19: #f04438; - --env-var-color-20: #ecfdf3; - --env-var-color-21: hsla(0, 100%, 52%, 0.06); - --env-var-color-22: #4e5ba6; - --env-var-color-23: #17b26a; - --env-var-color-24: #d92d20; - --env-var-color-25: #667085; - --env-var-color-26: #ff1818; - - --env-var-color-27: #fecf60; - --lighter-env-var-color-27: rgba(254, 207, 96, 0.1); - --env-var-color-28: #f79009; - --env-var-color-29: #d0d5dd; - --env-var-color-30: #fcfcfd; - --env-var-color-31: #1a1919; - --env-var-color-32: #f5f5f5; - --env-var-color-33: rgba(83, 83, 83, 0.1); - + /* */ --env-var-radius-1: 4px; --env-var-radius-2: 8px; From e72212a467926f6b7e55143a127f2384633a49d1 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Mon, 26 Aug 2024 19:54:48 -0400 Subject: [PATCH 04/18] Reconfigured theme colors --- Client/src/Utils/Theme.js | 45 +++++++++++++++++---------------------- 1 file changed, 19 insertions(+), 26 deletions(-) diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index c4faa2d1f..7b6535bfa 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -6,13 +6,6 @@ const secondaryMain = "#475467"; const tertiaryMain = "#475467"; const tertiaryLinkHover = "#eff8ff"; -// Label Colors -const labelOrange = "#F79009"; -const labelGray = "#475467"; -const labelPurple = "#6941C6"; -const labelGreen = "#067647"; -const labelRed = "#F04438"; - // Section colors const sectionBorder = "#D0D5DD"; const sectionBg = "#F8F9F8"; @@ -39,6 +32,25 @@ const fontFamilyDefault = const theme = createTheme({ typography: { fontFamily: fontFamilyDefault, fontSize: 13 }, palette: { + common: { main: "#1570ef" }, + text: { + primary: "#1c2130", + secondary: "#344054", + tertiary: "#475467", + accent: "#838c99", + }, + background: { + primary: "#FFFFFF", + secondary: "#FCFCFD", + fill: "#F4F4F4", + accent: "#f9fafb", + }, + border: { light: "#eaecf0", dark: "#d0d5dd" }, + success: { main: "#17b26a", light: "#d4f4e1", bg: "#ecfdf3" }, + error: { main: "#f04438", light: "#fbd1d1", bg: "#f9eced" }, + warning: { main: "#fdb022", light: "#fffcf5", bg: "#ffecbc" }, + unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, + other: {}, primary: { main: primaryMain, }, @@ -49,21 +61,6 @@ const theme = createTheme({ main: tertiaryMain, linkHover: tertiaryLinkHover, }, - labelOrange: { - color: labelOrange, - }, - labelGray: { - color: labelGray, - }, - labelPurple: { - color: labelPurple, - }, - labelGreen: { - color: labelGreen, - }, - labelRed: { - color: labelRed, - }, section: { borderColor: sectionBorder, bgColor: sectionBg, @@ -85,10 +82,6 @@ const theme = createTheme({ borderThick: 2, boxShadow: shadow, }, - content: { - pX: "80px", - pY: "40px", - }, gap: { xs: "4px", small: "8px", From 8b27bc2ab27013587eacfb70d8750b8f8206a7b2 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 27 Aug 2024 12:18:25 -0400 Subject: [PATCH 05/18] Refactored components styling 1/? --- Client/src/Components/Alert/index.jsx | 24 +++--- Client/src/Components/BasicTable/index.css | 56 +----------- Client/src/Components/BasicTable/index.jsx | 85 ++++++++++++++++--- Client/src/Components/Breadcrumbs/index.css | 11 +-- Client/src/Components/Breadcrumbs/index.jsx | 29 +++++-- Client/src/Components/Button/index.jsx | 1 + Client/src/Components/ButtonSpinner/index.jsx | 3 +- .../src/Components/Charts/BarChart/index.css | 19 ----- .../src/Components/Charts/BarChart/index.jsx | 53 ++++++++---- .../Charts/MonitorDetails60MinChart/index.jsx | 11 ++- .../Charts/MonitorDetailsAreaChart/index.css | 19 ----- .../Charts/MonitorDetailsAreaChart/index.jsx | 37 ++++++-- .../Charts/ResponseTimeChart/index.css | 7 -- .../Charts/ResponseTimeChart/index.jsx | 13 ++- .../TabPanels/Account/PasswordPanel.jsx | 2 +- Client/src/Layouts/HomeLayout/index.css | 2 +- .../Details/PaginationTable/index.jsx | 44 ++++++++-- Client/src/Pages/Monitors/Details/index.css | 14 +-- Client/src/Pages/Monitors/index.jsx | 14 ++- Client/src/Utils/Theme.js | 31 +++++-- 20 files changed, 278 insertions(+), 197 deletions(-) diff --git a/Client/src/Components/Alert/index.jsx b/Client/src/Components/Alert/index.jsx index 61c3b6bc3..cd9dcc18e 100644 --- a/Client/src/Components/Alert/index.jsx +++ b/Client/src/Components/Alert/index.jsx @@ -32,7 +32,7 @@ const icons = { const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { const theme = useTheme(); - const { bg, border, color } = theme.alert[variant]; + const { text, light, border } = theme.palette[variant]; const icon = icons[variant]; return ( @@ -41,23 +41,25 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { justifyContent="flex-start" alignItems={hasIcon ? "" : "center"} className="alert row-stack" - gap={theme.gap.ml} + gap={theme.spacing(8)} sx={{ - padding: hasIcon ? theme.gap.ml : `${theme.gap.small} ${theme.gap.ml}`, - backgroundColor: bg, + padding: hasIcon + ? theme.spacing(8) + : `${theme.spacing(4)} ${theme.spacing(8)}`, + backgroundColor: light, border: `solid 1px ${border}`, - borderRadius: `${theme.shape.borderRadius}px`, + borderRadius: theme.shape.borderRadius, }} > - {hasIcon && {icon}} + {hasIcon && {icon}} {title && ( - + {title} )} {body && ( - + {body} )} @@ -69,7 +71,7 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { sx={{ fontWeight: "600", width: "fit-content", - mt: theme.gap.small, + mt: theme.spacing(4), padding: 0, minWidth: 0, "&:hover": { @@ -95,10 +97,6 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => { "&:focus": { outline: "none", }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, }} > { return ( <> - + - + {data.cols.map((col) => ( - {col.name} + + {col.name} + ))} @@ -215,12 +232,24 @@ const BasicTable = ({ data, paginated, reversed, table }) => { {row.data.map((cell) => { - return {cell.data}; + return ( + + {cell.data} + + ); })} ); @@ -233,9 +262,14 @@ const BasicTable = ({ data, paginated, reversed, table }) => { direction="row" alignItems="center" justifyContent="space-between" - px={theme.gap.small} + px={theme.spacing(4)} + sx={{ + "& p": { + color: theme.palette.text.tertiary, + }, + }} > - + Showing {getRange()} of {data.rows.length} monitor(s) { keepMounted: true, PaperProps: { className: "pagination-dropdown", + sx: { + border: 1, + borderColor: theme.palette.border.light, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shape.boxShadow, + "& li": { + p: theme.spacing(2), + color: theme.palette.text.tertiary, + }, + "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover": + { + backgroundColor: theme.palette.background.fill, + }, + }, }, transformOrigin: { vertical: "bottom", horizontal: "left" }, anchorOrigin: { vertical: "top", horizontal: "left" }, @@ -268,19 +316,32 @@ const BasicTable = ({ data, paginated, reversed, table }) => { inputProps: { id: "pagination-dropdown" }, IconComponent: SelectorVertical, sx: { - ml: theme.gap.small, - mr: theme.gap.large, - minWidth: theme.gap.xl, + ml: theme.spacing(4), + mr: theme.spacing(12), + minWidth: theme.spacing(20), textAlign: "left", "&.Mui-focused > div": { - backgroundColor: theme.palette.otherColors.white, + backgroundColor: theme.palette.background.main, }, }, }, }} sx={{ - mt: theme.gap.medium, - color: theme.palette.otherColors.bluishGray, + mt: theme.spacing(6), + color: theme.palette.text.secondary, + "& button, & .MuiSelect-select": { + border: 1, + borderColor: theme.palette.border.light, + borderRadius: theme.shape.borderRadius, + }, + "& svg path": { + stroke: theme.palette.text.tertiary, + strokeWidth: 1.3, + }, + "& button:not(.Mui-disabled):hover": { + backgroundColor: theme.palette.background.fill, + borderColor: theme.palette.background.fill, + }, }} /> diff --git a/Client/src/Components/Breadcrumbs/index.css b/Client/src/Components/Breadcrumbs/index.css index 1d1454b3d..a425946e8 100644 --- a/Client/src/Components/Breadcrumbs/index.css +++ b/Client/src/Components/Breadcrumbs/index.css @@ -1,5 +1,5 @@ .MuiBreadcrumbs-root { - height: 36px; + height: 34px; } .MuiBreadcrumbs-root svg { width: 16px; @@ -7,17 +7,8 @@ } .MuiBreadcrumbs-root .MuiBreadcrumbs-li a { font-size: var(--env-var-font-size-medium); - color: var(--secondary-color-light); - opacity: 0.8; font-weight: 400; } -.MuiBreadcrumbs-root .MuiBreadcrumbs-li:hover a { - color: var(--secondary-color-light); -} -.MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child):hover a { - opacity: 1; - background-color: #e3e3e3; -} .MuiBreadcrumbs-root .MuiBreadcrumbs-li:not(:last-child) { cursor: pointer; } diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index 506263fce..c54b4c4a6 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -25,23 +25,36 @@ const Breadcrumbs = ({ list }) => { } aria-label="breadcrumb" - p={theme.gap.small} + px={theme.spacing(2)} + py={theme.spacing(3.5)} width="fit-content" - backgroundColor={theme.palette.otherColors.fillGray} - borderRadius={`${theme.shape.borderRadius}px`} + backgroundColor={theme.palette.background.fill} + borderRadius={theme.shape.borderRadius} lineHeight="18px" + sx={{ + "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": { + backgroundColor: "#e3e3e3", + opacity: 1, + }, + }} > {list.map((item, index) => { return ( navigate(item.path)} + sx={{ + opacity: 0.8, + textTransform: "capitalize", + "&, &:hover": { + color: theme.palette.text.tertiary, + }, + }} > {item.name} diff --git a/Client/src/Components/Button/index.jsx b/Client/src/Components/Button/index.jsx index 485973498..4c59f8b47 100644 --- a/Client/src/Components/Button/index.jsx +++ b/Client/src/Components/Button/index.jsx @@ -77,6 +77,7 @@ const Button = ({ fontWeight: 400, boxShadow: "none", textTransform: "none", + borderRadius: "4px", "&:focus": { outline: "none", }, diff --git a/Client/src/Components/ButtonSpinner/index.jsx b/Client/src/Components/ButtonSpinner/index.jsx index 62cfae477..8c6d1deb8 100644 --- a/Client/src/Components/ButtonSpinner/index.jsx +++ b/Client/src/Components/ButtonSpinner/index.jsx @@ -74,12 +74,13 @@ const ButtonSpinner = ({ sx={{ boxShadow: "none", textTransform: "none", + borderRadius: "4px", "&:focus": { outline: "none", }, "&:hover": { boxShadow: "none", - transition: "none" + transition: "none", }, ...sx, }} diff --git a/Client/src/Components/Charts/BarChart/index.css b/Client/src/Components/Charts/BarChart/index.css index ed22f8bd7..e69de29bb 100644 --- a/Client/src/Components/Charts/BarChart/index.css +++ b/Client/src/Components/Charts/BarChart/index.css @@ -1,19 +0,0 @@ -.bar-tooltip .MuiTooltip-tooltip { - background-color: white; - border: solid 1px black; - box-shadow: var(--env-var-shadow-1); - border: solid 1px var(--env-var-color-6); - border-radius: var(--env-var-radius-1); - padding: 4px 8px; -} - -.bar-tooltip .MuiTooltip-tooltip p { - font-size: var(--env-var-font-size-small-plus); - color: var(--secondary-color-light); - font-weight: 500; -} -.bar-tooltip .MuiTooltip-tooltip span { - font-size: var(--env-var-font-size-small); - color: var(--secondary-color-light); - font-weight: 600; -} diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index 9238374c2..54a9524af 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -26,7 +26,7 @@ const BarChart = ({ checks = [] }) => { event.stopPropagation()} @@ -39,11 +39,11 @@ const BarChart = ({ checks = [] }) => { ) : ( @@ -53,15 +53,15 @@ const BarChart = ({ checks = [] }) => { {formatDate(new Date(check.createdAt), { year: undefined })} - + @@ -69,8 +69,8 @@ const BarChart = ({ checks = [] }) => { display="inline-flex" direction="row" justifyContent="space-between" - ml={theme.gap.xs} - gap={theme.gap.large} + ml={theme.spacing(2)} + gap={theme.spacing(12)} > Response Time @@ -99,6 +99,27 @@ const BarChart = ({ checks = [] }) => { }, }, ], + sx: { + "& .MuiTooltip-tooltip": { + backgroundColor: theme.palette.background.main, + border: 1, + borderColor: theme.palette.border.dark, + borderRadius: theme.shape.borderRadius, + boxShadow: theme.shape.boxShadow, + px: theme.spacing(4), + py: theme.spacing(2), + }, + "& .MuiTooltip-tooltip p": { + fontSize: 12, + color: theme.palette.text.tertiary, + fontWeight: 500, + }, + "& .MuiTooltip-tooltip span": { + fontSize: 11, + color: theme.palette.text.tertiary, + fontWeight: 600, + }, + }, }, }} > @@ -107,10 +128,10 @@ const BarChart = ({ checks = [] }) => { width="9px" height="100%" backgroundColor={ - check.status ? theme.label.up.bgColor : theme.label.down.bgColor + check.status ? theme.palette.success.bg : theme.palette.error.bg } sx={{ - borderRadius: "3px", + borderRadius: theme.spacing(1.5), "&:hover > .MuiBox-root": { filter: "brightness(0.8)", }, @@ -123,11 +144,11 @@ const BarChart = ({ checks = [] }) => { height={`${animate ? check.responseTime : 0}%`} backgroundColor={ check.status - ? theme.label.up.dotColor - : theme.label.down.dotColor + ? theme.palette.success.main + : theme.palette.error.text } sx={{ - borderRadius: "3px", + borderRadius: theme.spacing(1.5), transition: "height 600ms cubic-bezier(0.4, 0, 0.2, 1)", }} /> diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx index dbb45f109..57cb344e7 100644 --- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx +++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx @@ -1,17 +1,20 @@ import { BarChart, Bar, Cell, ReferenceLine, Label } from "recharts"; import PropTypes from "prop-types"; +import { useTheme } from "@emotion/react"; const MonitorDetails60MinChart = ({ data }) => { + const theme = useTheme(); + const labelStyle = { fontSize: "10px", - fill: "#475467", + fill: theme.palette.text.tertiary, }; const color = { - true: "var(--success-color)", - false: "var(--error-color)", - undefined: "var(--unresolved-color)", + true: theme.palette.success.main, + false: theme.palette.error.text, + undefined: theme.palette.unresolved.main, }; return ( { + const theme = useTheme(); + if (active && payload && payload.length) { return ( -
-

+ + {new Date(label).toLocaleDateString("en-US", { weekday: "short", // Mon month: "long", // July @@ -18,10 +37,18 @@ const CustomToolTip = ({ active, payload, label }) => { minute: "2-digit", // 15 hour12: true, // AM/PM format })} -

-

Response Time (ms): {payload[0].payload.originalResponseTime}

{" "} + + + Response Time (ms): {payload[0].payload.originalResponseTime} + {" "} {/* Display original value */} -
+ ); } return null; diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.css b/Client/src/Components/Charts/ResponseTimeChart/index.css index 86b7a1d1b..e69de29bb 100644 --- a/Client/src/Components/Charts/ResponseTimeChart/index.css +++ b/Client/src/Components/Charts/ResponseTimeChart/index.css @@ -1,7 +0,0 @@ -.chart-container { - display: flex; - justify-content: space-around; - align-items: flex-end; - height: 50px; - width: 300px; -} diff --git a/Client/src/Components/Charts/ResponseTimeChart/index.jsx b/Client/src/Components/Charts/ResponseTimeChart/index.jsx index 3c57daf1a..fd6c0f41e 100644 --- a/Client/src/Components/Charts/ResponseTimeChart/index.jsx +++ b/Client/src/Components/Charts/ResponseTimeChart/index.jsx @@ -1,10 +1,17 @@ -import "./index.css"; import PropTypes from "prop-types"; +import { Stack } from "@mui/material"; import { BarChart, Bar, ResponsiveContainer, Cell } from "recharts"; +import "./index.css"; const ResponseTimeChart = ({ checks = [] }) => { return ( -
+ { -
+ ); }; diff --git a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx index 602816e6c..f921aa1ed 100644 --- a/Client/src/Components/TabPanels/Account/PasswordPanel.jsx +++ b/Client/src/Components/TabPanels/Account/PasswordPanel.jsx @@ -1,7 +1,7 @@ import TabPanel from "@mui/lab/TabPanel"; import React, { useState } from "react"; import { useTheme } from "@emotion/react"; -import { Box, Divider, Stack, Typography } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; import ButtonSpinner from "../../ButtonSpinner"; import Field from "../../Inputs/Field"; import { credentials } from "../../../Validation/validation"; diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css index 75a1925f3..c5407eda6 100644 --- a/Client/src/Layouts/HomeLayout/index.css +++ b/Client/src/Layouts/HomeLayout/index.css @@ -22,7 +22,7 @@ border: 1px solid var(--border-color); border-radius: var(--env-var-radius-1); - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); padding: var(--env-var-spacing-1) 0; } diff --git a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx index ad8248ab0..e484b01ae 100644 --- a/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx +++ b/Client/src/Pages/Monitors/Details/PaginationTable/index.jsx @@ -18,8 +18,10 @@ import { StatusLabel } from "../../../../Components/Label"; import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded"; import ArrowForwardRoundedIcon from "@mui/icons-material/ArrowForwardRounded"; import { logger } from "../../../../Utils/Logger"; +import { useTheme } from "@emotion/react"; const PaginationTable = ({ monitorId, dateRange }) => { + const theme = useTheme(); const { authToken } = useSelector((state) => state.auth); const [checks, setChecks] = useState([]); const [checksCount, setChecksCount] = useState(0); @@ -78,6 +80,19 @@ 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) => ( { pointerEvents: "none", display: "none", }, + "&.Mui-selected, &.Mui-selected:hover": { + backgroundColor: theme.palette.background.fill, + }, }} /> )} @@ -102,13 +120,29 @@ const PaginationTable = ({ monitorId, dateRange }) => { return ( <> - +
- + - Status - Date & Time - Message + + Status + + + Date & Time + + + Message + diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css index 127b7377a..0ebad73e3 100644 --- a/Client/src/Pages/Monitors/Details/index.css +++ b/Client/src/Pages/Monitors/Details/index.css @@ -1,6 +1,6 @@ .monitor-details h1.MuiTypography-root { font-size: var(--env-var-font-size-large-plus); - color: var(--env-var-color-1); + color: var(--primary-color); font-weight: 600; } .monitor-details h2.MuiTypography-root { @@ -11,10 +11,10 @@ } .monitor-details h2.MuiTypography-root, .monitor-details h4.MuiTypography-root { - color: var(--env-var-color-5); + color: var(--secondary-color); } .monitor-details h6.MuiTypography-root { - color: var(--env-var-color-3); + color: var(--theme-main); } .monitor-details button.MuiButtonBase-root, .monitor-details h4.MuiTypography-root { @@ -29,7 +29,7 @@ font-size: var(--env-var-font-size-small-plus); } .monitor-details p.MuiTypography-root { - color: var(--env-var-color-2); + color: var(--secondary-color-light); } .monitor-details .stat-box { @@ -38,7 +38,7 @@ border: solid 1px; border-radius: var(--env-var-radius-1); padding: var(--env-var-spacing-1) 16px; - background-color: var(--env-var-color-8); + background-color: var(--primary-bg); } .monitor-details h6.MuiTypography-root { font-size: var(--env-var-font-size-medium-plus); @@ -46,10 +46,10 @@ .monitor-details h6.MuiTypography-root span.MuiTypography-root { font-style: italic; font-size: var(--env-var-font-size-medium); - color: var(--env-var-color-5); + color: var(--secondary-color); opacity: 0.7; } .monitor-details button.MuiButtonBase-root, .monitor-details .stat-box { - border-color: var(--env-var-color-16); + border-color: var(--border-color); } diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx index 44101b332..b1f4c05c1 100644 --- a/Client/src/Pages/Monitors/index.jsx +++ b/Client/src/Pages/Monitors/index.jsx @@ -309,11 +309,11 @@ const StatusBox = ({ title, value }) => { position="relative" flex={1} border={1} - borderColor={theme.palette.otherColors.graishWhite} - borderRadius={`${theme.shape.borderRadius}px`} - backgroundColor={theme.palette.otherColors.white} - px={theme.gap.large} - py={theme.gap.ml} + borderColor={theme.palette.border.light} + borderRadius={theme.shape.borderRadius} + backgroundColor={theme.palette.background.main} + px={theme.spacing(12)} + py={theme.spacing(8)} overflow="hidden" sx={{ "&:hover": { @@ -447,9 +447,7 @@ const Monitors = () => { title: monitor.name, percentage: 100, percentageColor: - monitor.status === true - ? "var(--success-color)" - : "var(--error-color)", + monitor.status === true ? "var(--success-color)" : "var(--error-color)", status: monitor.status === true ? "up" : "down", }; diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index 7b6535bfa..3a8282dd0 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -40,15 +40,34 @@ const theme = createTheme({ accent: "#838c99", }, background: { - primary: "#FFFFFF", - secondary: "#FCFCFD", + main: "#FFFFFF", + alt: "#FCFCFD", fill: "#F4F4F4", accent: "#f9fafb", }, border: { light: "#eaecf0", dark: "#d0d5dd" }, + info: { + text: "#475467", + main: "#475467", + bg: "#ffffff", + light: "#ffffff", + border: "#D0D5DD", + }, success: { main: "#17b26a", light: "#d4f4e1", bg: "#ecfdf3" }, - error: { main: "#f04438", light: "#fbd1d1", bg: "#f9eced" }, - warning: { main: "#fdb022", light: "#fffcf5", bg: "#ffecbc" }, + 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: {}, primary: { @@ -77,8 +96,10 @@ const theme = createTheme({ fillGray: otherColorsFillGray, }, }, + spacing: 2, + components: {}, shape: { - borderRadius: 4, + borderRadius: 2, borderThick: 2, boxShadow: shadow, }, From edeaf2ede90e5c06288252b9f26ea2b5e17b7e94 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Tue, 27 Aug 2024 17:01:28 -0400 Subject: [PATCH 06/18] Refactored components styling 2/2 --- Client/src/Components/Check/Check.jsx | 38 ++- Client/src/Components/Check/check.css | 18 +- Client/src/Components/Fallback/index.css | 4 - Client/src/Components/Fallback/index.jsx | 10 +- .../src/Components/Inputs/Checkbox/index.css | 14 -- .../src/Components/Inputs/Checkbox/index.jsx | 20 +- Client/src/Components/Inputs/Field/index.css | 53 +---- Client/src/Components/Inputs/Field/index.jsx | 130 ++++++----- Client/src/Components/Inputs/Image/index.css | 11 - Client/src/Components/Inputs/Image/index.jsx | 42 +++- Client/src/Components/Inputs/Radio/index.css | 1 + .../{RadioButton => Inputs/Radio}/index.jsx | 53 +++-- Client/src/Components/Inputs/Select/index.css | 38 +-- Client/src/Components/Inputs/Select/index.jsx | 55 ++++- Client/src/Components/Label/index.jsx | 28 ++- Client/src/Components/Link/index.jsx | 14 +- Client/src/Components/ProgressBars/index.css | 22 -- Client/src/Components/ProgressBars/index.jsx | 63 +++-- Client/src/Components/RadioButton/index.css | 15 -- Client/src/Components/Sidebar/index.css | 80 ------- Client/src/Components/Sidebar/index.jsx | 221 +++++++++++++----- .../Pages/Monitors/CreateMonitor/index.jsx | 6 +- Client/src/assets/icons/radio-checked.svg | 4 + 23 files changed, 481 insertions(+), 459 deletions(-) create mode 100644 Client/src/Components/Inputs/Radio/index.css rename Client/src/Components/{RadioButton => Inputs/Radio}/index.jsx (53%) delete mode 100644 Client/src/Components/RadioButton/index.css create mode 100644 Client/src/assets/icons/radio-checked.svg diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx index 645e0b5e2..9eaba846e 100644 --- a/Client/src/Components/Check/Check.jsx +++ b/Client/src/Components/Check/Check.jsx @@ -2,7 +2,7 @@ import "./check.css"; import PropTypes from "prop-types"; import CheckGrey from "../../assets/icons/check.svg?react"; import CheckOutlined from "../../assets/icons/check-outlined.svg?react"; -import { Stack, Typography } from "@mui/material"; +import { Box, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; /** @@ -22,25 +22,41 @@ import { useTheme } from "@emotion/react"; */ const Check = ({ text, variant = "info", outlined = false }) => { const theme = useTheme(); + const colors = { + success: theme.palette.success.main, + error: theme.palette.error.text, + info: theme.palette.info.border, + }; + return ( {outlined ? ( ) : ( - + path": { fill: colors[variant] }, + }} + > + + )} - {text} + + {text} + ); }; diff --git a/Client/src/Components/Check/check.css b/Client/src/Components/Check/check.css index 8d9bbc24e..8b1378917 100644 --- a/Client/src/Components/Check/check.css +++ b/Client/src/Components/Check/check.css @@ -1,17 +1 @@ -.check > span.MuiTypography-root { - font-size: var(--env-var-font-size-small-plus); - color: var(--secondary-color-light); - opacity: 0.8; -} -.check-error span.MuiTypography-root { - color: var(--error-color); -} -.check-error svg > path { - fill: var(--error-color); -} -.check-success span.MuiTypography-root { - color: var(--success-color); -} -.check-success svg > path { - fill: var(--success-color); -} + diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css index ea1925ff5..293eb13b3 100644 --- a/Client/src/Components/Fallback/index.css +++ b/Client/src/Components/Fallback/index.css @@ -7,10 +7,6 @@ font-size: var(--env-var-font-size-large); font-weight: 600; } -[class*="fallback__"] .check span.MuiTypography-root, -[class*="fallback__"] h1.MuiTypography-root { - color: var(--secondary-color); -} [class*="fallback__"] button.MuiButtonBase-root, [class*="fallback__"] .check { width: max-content; diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 976440f7d..79053e539 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -27,15 +27,19 @@ const Fallback = ({ title, checks, link = "/" }) => { - - + + A {title} is used to: {checks.map((check, index) => ( diff --git a/Client/src/Components/Inputs/Checkbox/index.css b/Client/src/Components/Inputs/Checkbox/index.css index 130be8853..e69de29bb 100644 --- a/Client/src/Components/Inputs/Checkbox/index.css +++ b/Client/src/Components/Inputs/Checkbox/index.css @@ -1,14 +0,0 @@ -.checkbox-wrapper { - border-radius: var(--env-var-radius-1); -} -.checkbox-wrapper:not(:has(.Mui-disabled)):hover { - background-color: var(--unresolved-bg); -} -.checkbox-wrapper span.MuiTypography-root { - font-size: var(--env-var-font-size-medium); - color: var(--secondary-color-light); -} -.checkbox-wrapper .MuiButtonBase-root { - margin-right: var(--env-var-spacing-1); - padding: 0; -} diff --git a/Client/src/Components/Inputs/Checkbox/index.jsx b/Client/src/Components/Inputs/Checkbox/index.jsx index e454bbc6e..c48c59bf5 100644 --- a/Client/src/Components/Inputs/Checkbox/index.jsx +++ b/Client/src/Components/Inputs/Checkbox/index.jsx @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material"; +import { useTheme } from "@emotion/react"; import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react"; import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react"; @@ -16,7 +17,7 @@ import "./index.css"; * @param {boolean} [props.isDisabled] - Whether the checkbox is disabled or not. * * @returns {JSX.Element} - * + * * @example * { const sizes = { small: "14px", medium: "16px", large: "18px" }; + const theme = useTheme(); return ( diff --git a/Client/src/Components/Inputs/Field/index.css b/Client/src/Components/Inputs/Field/index.css index 8c86f9e30..ab1812013 100644 --- a/Client/src/Components/Inputs/Field/index.css +++ b/Client/src/Components/Inputs/Field/index.css @@ -8,24 +8,6 @@ .field .input-error { font-size: var(--env-var-font-size-medium); } -.field h3.MuiTypography-root, -.field h5.MuiTypography-root, -.field input, -.field textarea { - color: var(--secondary-color); -} -.field h3.MuiTypography-root { - font-weight: 500; -} -.field h3.MuiTypography-root span.field-required { - color: var(--error-color); - margin-left: 2px; -} -.field h3.MuiTypography-root span.field-optional { - opacity: 0.6; - margin-left: 4px; - font-weight: 400; -} .field h5.MuiTypography-root { position: relative; opacity: 0.8; @@ -37,24 +19,7 @@ .field .MuiInputBase-root:has(.MuiInputAdornment-root) { padding-right: var(--env-var-spacing-1-minus); } -.field - .MuiInputBase-root:has(.copy.MuiInputAdornment-root > .MuiButtonBase-root) { - padding-right: 0; -} -.field .MuiInputBase-root .copy.MuiInputAdornment-root .MuiButtonBase-root { - padding: 0 var(--env-var-spacing-1-minus); - font-size: var(--env-var-font-size-medium); - border-radius: 0; - height: 34px; -} -.field .MuiInputBase-root .copy.MuiInputAdornment-root .MuiButtonBase-root svg { - width: 20px; - height: 20px; - margin-right: 5px; -} -.field .MuiInputBase-root .MuiInputAdornment-root .MuiButtonBase-root:hover { - border-color: var(--border-color-dark); -} + .field input { height: 100%; padding: 0 var(--env-var-spacing-1-minus); @@ -62,22 +27,6 @@ .field .MuiInputBase-root:has(textarea) { padding: var(--env-var-spacing-1-minus); } -.field .MuiOutlinedInput-root fieldset { - border-color: var(--border-color-dark); - border-radius: var(--env-var-radius-1); -} -.field:not(:has(.Mui-disabled)):not(:has(.input-error)) - .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) - fieldset { - border-color: var(--border-color-dark); -} -.field .input-error { - color: var(--error-color); - opacity: 0.8; -} -.field:has(.input-error) .MuiOutlinedInput-root fieldset { - border-color: var(--error-color); -} .register-page .field .MuiOutlinedInput-root fieldset, .register-page .field input, diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx index 335ed178f..12ecc8775 100644 --- a/Client/src/Components/Inputs/Field/index.jsx +++ b/Client/src/Components/Inputs/Field/index.jsx @@ -23,7 +23,6 @@ import { forwardRef, useState } from "react"; * @param {boolean} [props.isRequired] - Indicates if the field is required, will display a red asterisk. * @param {boolean} [props.isOptional] - Indicates if the field is optional, will display optional text. * @param {string} [props.optionalLabel] - Optional label for the input field. - * @param {boolean} [props.hasCopy] - Indicates if the field supports copying. * @param {string} [props.autoComplete] - Autocomplete value for the input field. * @param {string} [props.placeholder] - Placeholder text for the input field. * @param {string} props.value - Value of the input field. @@ -43,7 +42,6 @@ const Field = forwardRef( isRequired, isOptional, optionalLabel, - hasCopy, autoComplete, placeholder, value, @@ -56,25 +54,54 @@ const Field = forwardRef( ) => { const theme = useTheme(); - // TODO - are we using this feature anywhere ? - const [copy, setCopy] = useState(false); - const handleCopy = () => { - setCopy(true); - setTimeout(() => setCopy(false), 1000); - }; - const [isVisible, setVisible] = useState(false); return ( - + {label && ( - + {label} - {isRequired ? * : ""} + {isRequired ? ( + + * + + ) : ( + "" + )} {isOptional ? ( - + {optionalLabel || "(optional)"} - + ) : ( "" )} @@ -115,60 +142,48 @@ const Field = forwardRef( pl: theme.gap.medium, }} > - + {https ? "https" : "http"}:// ), - endAdornment: - type === "password" ? ( - - setVisible((show) => !show)} - tabIndex={-1} - sx={{ - color: theme.palette.section.borderColor, - padding: `calc(${theme.gap.xs} / 2)`, - "&:focus": { - outline: "none", - }, - "& .MuiTouchRipple-root": { - pointerEvents: "none", - display: "none", - }, - }} - > - {!isVisible ? : } - - - ) : ( - hasCopy && ( - -
- - + + .MuiTableCell-root": { + color: theme.palette.text.secondary, + }, + }} + > Monitor Name Status Date & Time diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css index b434d5e63..73c7b93e0 100644 --- a/Client/src/Pages/Incidents/index.css +++ b/Client/src/Pages/Incidents/index.css @@ -1,7 +1,3 @@ -.incidents h1.MuiTypography-root, -.incidents p.MuiTypography-root { - color: var(--secondary-color); -} .incidents h1.MuiTypography-root { font-size: var(--env-var-font-size-large); font-weight: 600; @@ -12,19 +8,4 @@ } .incidents button.MuiButtonBase-root { height: 34px; - border-color: var(--border-color); -} -.incidents .MuiPagination-root { - background-color: var(--primary-bg); -} -.incidents > .MuiBox-root { - background-color: var(--primary-bg); - border: solid 1px var(--border-color); - border-radius: var(--env-var-radius-1); - padding: 60px; -} - -/* remove later */ -.incidents .MuiSelect-select { - padding: 0 10px; } diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 5e1cffcb0..cd0216f9e 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -78,13 +78,17 @@ const Incidents = () => { }; return ( - + {loading ? ( ) : ( <> - - + + Incidents for { items={frequencies} /> - +
diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx index 510eeeaaf..75e8fb174 100644 --- a/Client/src/Pages/Incidents/index.jsx +++ b/Client/src/Pages/Incidents/index.jsx @@ -78,7 +78,11 @@ const Incidents = () => { }; return ( - + {loading ? ( ) : ( diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx index 3de96ad5c..bc0f55ed3 100644 --- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx +++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx @@ -237,6 +237,10 @@ const CreateMonitor = () => { onClick={() => setHttps(true)} sx={{ backgroundColor: https && theme.palette.background.fill, + borderColor: theme.palette.border.dark, + "&:hover": { + borderColor: theme.palette.border.dark, + }, }} />
@@ -134,13 +135,28 @@ const PaginationTable = ({ monitorId, dateRange }) => { }} > - + Status - + Date & Time - + Message @@ -151,17 +167,31 @@ const PaginationTable = ({ monitorId, dateRange }) => { return ( - + - + {new Date(check.createdAt).toLocaleString()} - {check.statusCode} + + {check.statusCode} + ); })} diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx index e28d09d6c..a7c56d75a 100644 --- a/Client/src/Pages/Monitors/Home/StatusBox.jsx +++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx @@ -8,7 +8,12 @@ import ClockSnooze from "../../../assets/icons/clock-snooze.svg?react"; const StatusBox = ({ title, value }) => { const theme = useTheme(); - let sharedStyles = { position: "absolute", right: 8, opacity: 0.5 }; + let sharedStyles = { + position: "absolute", + right: 8, + opacity: 0.5, + "& svg path": { stroke: theme.palette.other.icon }, + }; let color; let icon; @@ -48,7 +53,7 @@ const StatusBox = ({ title, value }) => { overflow="hidden" sx={{ "&:hover": { - backgroundColor: "#f9fafb", + backgroundColor: theme.palette.background.accent, }, "&:after": { position: "absolute", diff --git a/Client/src/Pages/Monitors/Home/actionsMenu.jsx b/Client/src/Pages/Monitors/Home/actionsMenu.jsx index 11da8cbdf..d6e9da2ee 100644 --- a/Client/src/Pages/Monitors/Home/actionsMenu.jsx +++ b/Client/src/Pages/Monitors/Home/actionsMenu.jsx @@ -77,6 +77,9 @@ const ActionsMenu = ({ monitor, isAdmin }) => { "&:focus": { outline: "none", }, + "& svg path": { + stroke: theme.palette.other.icon, + }, }} > @@ -94,6 +97,7 @@ const ActionsMenu = ({ monitor, isAdmin }) => { 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/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index f98ede024..8d7edbcc1 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/Client/src/Pages/Monitors/Home/index.jsx @@ -145,7 +145,7 @@ const Monitors = ({ isAdmin }) => { color={theme.palette.text.primary} border={1} borderColor={theme.palette.border.light} - backgroundColor={theme.palette.unresolved.bg} + backgroundColor={theme.palette.background.accent} > {monitorState.monitors.length} diff --git a/Client/src/Pages/Monitors/Home/monitorData.jsx b/Client/src/Pages/Monitors/Home/monitorData.jsx index ae3cc4e30..c82a1fa95 100644 --- a/Client/src/Pages/Monitors/Home/monitorData.jsx +++ b/Client/src/Pages/Monitors/Home/monitorData.jsx @@ -4,6 +4,7 @@ import BarChart from "../../../Components/Charts/BarChart"; import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded"; import { StatusLabel } from "../../../Components/Label"; import { Box } from "@mui/material"; +import { useTheme } from "@emotion/react"; const data = { cols: [ @@ -27,13 +28,17 @@ const data = { }; export const buildData = (monitors, isAdmin, navigate) => { + const theme = useTheme(); + data.rows = monitors.map((monitor, idx) => { const params = { url: monitor.url, title: monitor.name, percentage: 100, percentageColor: - monitor.status === true ? "var(--success-color)" : "var(--error-color)", + monitor.status === true + ? theme.palette.success.main + : theme.palette.error.text, status: monitor.status === true ? "up" : "down", }; diff --git a/Client/src/Utils/Theme.js b/Client/src/Utils/Theme.js index 4f8ede4d0..0122847ce 100644 --- a/Client/src/Utils/Theme.js +++ b/Client/src/Utils/Theme.js @@ -53,7 +53,10 @@ const theme = createTheme({ border: "#fec84b", }, unresolved: { main: "#4e5ba6", light: "#e2eaf7", bg: "#f2f4f7" }, - other: {}, + other: { + icon: "#667085", + line: "#d6d9dd" + }, primary: { main: "#1570EF", }, @@ -73,4 +76,72 @@ const theme = createTheme({ }, }); +export const darkTheme = createTheme({ + typography: { fontFamily: fontFamilyDefault, fontSize: 13 }, + palette: { + common: { main: "#1570ef" }, + text: { + primary: "#fafafa", + secondary: "#e6e6e6", + tertiary: "#a1a1aa", + accent: "#e6e6e6", + }, + background: { + main: "#151518", + alt: "#09090b", + fill: "#2e2e2e", + accent: "#18181a", + }, + border: { light: "#27272a", dark: "#2c2c2c" }, + 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: {}, + shape: { + borderRadius: 2, + borderThick: 2, + boxShadow: shadow, + }, +}); + export default theme; diff --git a/Client/src/assets/icons/dots-vertical.svg b/Client/src/assets/icons/dots-vertical.svg new file mode 100644 index 000000000..e720066c4 --- /dev/null +++ b/Client/src/assets/icons/dots-vertical.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/Client/src/main.jsx b/Client/src/main.jsx index 00cec7d14..d592f9137 100644 --- a/Client/src/main.jsx +++ b/Client/src/main.jsx @@ -3,8 +3,6 @@ import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter as Router, HashRouter } from "react-router-dom"; -import theme from "./Utils/Theme.js"; -import { ThemeProvider } from "@mui/material"; import { Provider } from "react-redux"; import { persistor, store } from "./store"; import { PersistGate } from "redux-persist/integration/react"; @@ -13,11 +11,9 @@ export const networkService = new NetworkService(store); ReactDOM.createRoot(document.getElementById("root")).render( - - - - - + + + ); From 111501156feaa7c8f89ba63454bf1f7825a16658 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 29 Aug 2024 02:19:19 -0400 Subject: [PATCH 14/18] Fixed pages rerendering on sidebar state change --- Client/src/App.jsx | 2 +- Client/src/Components/Sidebar/index.jsx | 3 +-- Client/src/Features/UI/uiSlice.js | 5 ++++- Client/src/Pages/Monitors/Details/index.jsx | 2 +- 4 files changed, 7 insertions(+), 5 deletions(-) diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 69ce98c4c..7eab04f22 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -39,7 +39,7 @@ function App() { const PageSpeedWithAdminProp = withAdminProp(PageSpeed); const MaintenanceWithAdminProp = withAdminProp(Maintenance); - const { mode } = useSelector((state) => state.ui); + const mode = useSelector((state) => state.ui.mode); return ( diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 7dc3618a3..2730441b6 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -86,8 +86,7 @@ function Sidebar() { const location = useLocation(); const dispatch = useDispatch(); const authState = useSelector((state) => state.auth); - const { sidebar } = useSelector((state) => state.ui); - let collapsed = sidebar.collapsed; + const collapsed = useSelector((state) => state.ui.sidebar.collapsed); const [open, setOpen] = useState({ Dashboard: false, Account: false }); const [anchorEl, setAnchorEl] = useState(null); const [popup, setPopup] = useState(); diff --git a/Client/src/Features/UI/uiSlice.js b/Client/src/Features/UI/uiSlice.js index addc4e845..84efe58fc 100644 --- a/Client/src/Features/UI/uiSlice.js +++ b/Client/src/Features/UI/uiSlice.js @@ -20,7 +20,10 @@ const uiSlice = createSlice({ initialState, reducers: { setRowsPerPage: (state, action) => { - state[action.payload.table].rowsPerPage = action.payload.value; + const { table, value } = action.payload; + if (state[table]) { + state[table].rowsPerPage = value; + } }, toggleSidebar: (state) => { state.sidebar.collapsed = !state.sidebar.collapsed; diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx index ba59fdf52..e44e7f6c9 100644 --- a/Client/src/Pages/Monitors/Details/index.jsx +++ b/Client/src/Pages/Monitors/Details/index.jsx @@ -140,6 +140,7 @@ const SkeletonLayout = () => { * @component */ const DetailsPage = ({ isAdmin }) => { + const theme = useTheme(); const [monitor, setMonitor] = useState({}); const { monitorId } = useParams(); const { authToken } = useSelector((state) => state.auth); @@ -184,7 +185,6 @@ const DetailsPage = ({ isAdmin }) => { fetchCertificate(); }, [authToken, monitorId]); - const theme = useTheme(); let loading = Object.keys(monitor).length === 0; return ( From 8fa1acd193cbd136a5f904deafee987d1248722a Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 29 Aug 2024 17:14:17 -0400 Subject: [PATCH 15/18] 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; From 4352b3690d6365759643a4a2a9cae2eb98352e95 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 29 Aug 2024 20:42:12 -0400 Subject: [PATCH 16/18] Refactored sx styling to theme file style overrides --- Client/src/Components/Avatar/index.jsx | 1 + Client/src/Components/BasicTable/index.css | 11 ---- Client/src/Components/BasicTable/index.jsx | 12 +--- Client/src/Components/Breadcrumbs/index.jsx | 2 +- Client/src/Components/Fallback/index.jsx | 14 +++-- Client/src/Components/Inputs/Select/index.css | 5 -- Client/src/Components/Inputs/Select/index.jsx | 19 +----- Client/src/Components/Sidebar/index.jsx | 62 +++++-------------- Client/src/Layouts/HomeLayout/index.css | 2 +- Client/src/Pages/Monitors/Home/index.css | 3 - Client/src/Utils/Theme/darkTheme.js | 30 +++++++++ Client/src/Utils/Theme/lightTheme.js | 30 +++++++++ 12 files changed, 90 insertions(+), 101 deletions(-) diff --git a/Client/src/Components/Avatar/index.jsx b/Client/src/Components/Avatar/index.jsx index 2a9f70a08..975f27a32 100644 --- a/Client/src/Components/Avatar/index.jsx +++ b/Client/src/Components/Avatar/index.jsx @@ -57,6 +57,7 @@ const Avatar = ({ src, small, sx }) => { } sx={{ fontSize: small ? "16px" : "22px", + color: "white", fontWeight: 400, backgroundColor: stringToColor(`${user?.firstName} ${user?.lastName}`), display: "inline-flex", diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css index c345abf7c..5defa124d 100644 --- a/Client/src/Components/BasicTable/index.css +++ b/Client/src/Components/BasicTable/index.css @@ -120,17 +120,6 @@ opacity: 0.4; } -.pagination-dropdown ul { - padding: 4px; - min-width: 100px; -} -.pagination-dropdown li { - font-size: var(--env-var-font-size-medium); -} -body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) { - font-size: var(--env-var-font-size-small-plus); -} - .monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root { text-transform: uppercase; opacity: 0.8; diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx index 3b1d93b3d..e2de29ae1 100644 --- a/Client/src/Components/BasicTable/index.jsx +++ b/Client/src/Components/BasicTable/index.jsx @@ -272,7 +272,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => { }, }} > - + Showing {getRange()} of {data.rows.length} monitor(s) { sx: { mt: 0, mb: theme.spacing(2), - "& li": { - p: theme.spacing(2), - color: theme.palette.text.tertiary, - }, - "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover": - { - backgroundColor: theme.palette.background.fill, - }, }, }, transformOrigin: { vertical: "bottom", horizontal: "left" }, anchorOrigin: { vertical: "top", horizontal: "left" }, - sx: { mt: "-4px" }, + sx: { mt: theme.spacing(-2) }, }, inputProps: { id: "pagination-dropdown" }, IconComponent: SelectorVertical, diff --git a/Client/src/Components/Breadcrumbs/index.jsx b/Client/src/Components/Breadcrumbs/index.jsx index c54b4c4a6..f2ca2089f 100644 --- a/Client/src/Components/Breadcrumbs/index.jsx +++ b/Client/src/Components/Breadcrumbs/index.jsx @@ -33,7 +33,7 @@ const Breadcrumbs = ({ list }) => { lineHeight="18px" sx={{ "& .MuiBreadcrumbs-li:not(:last-of-type):hover a": { - backgroundColor: "#e3e3e3", + backgroundColor: theme.palette.other.fill, opacity: 1, }, }} diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx index 79c14584d..22ac837b0 100644 --- a/Client/src/Components/Fallback/index.jsx +++ b/Client/src/Components/Fallback/index.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Box, Stack, Typography } from "@mui/material"; import Skeleton from "../../assets/Images/create-placeholder.svg?react"; -import background from "../../assets/Images/background_pattern_decorative.png"; +import Background from "../../assets/Images/background-grid.svg?react"; import Button from "../Button"; import Check from "../Check/Check"; import { useNavigate } from "react-router-dom"; @@ -32,12 +32,18 @@ const Fallback = ({ title, checks, link = "/", isAdmin }) => { + sx={{ + "& svg g g:last-of-type path": { + stroke: theme.palette.border.light, + }, + }} + > + + A {title} is used to: diff --git a/Client/src/Components/Inputs/Select/index.css b/Client/src/Components/Inputs/Select/index.css index be46ad109..329cdd7d2 100644 --- a/Client/src/Components/Inputs/Select/index.css +++ b/Client/src/Components/Inputs/Select/index.css @@ -5,8 +5,3 @@ align-items: center; line-height: 1; } -.select-wrapper .MuiInputBase-root:has(> .MuiSelect-select), -.MuiMenu-List .MuiMenuItem-root, -.select-wrapper h3.MuiTypography-root { - font-size: var(--env-var-font-size-medium); -} diff --git a/Client/src/Components/Inputs/Select/index.jsx b/Client/src/Components/Inputs/Select/index.jsx index 46969d7c1..b7146f27a 100644 --- a/Client/src/Components/Inputs/Select/index.jsx +++ b/Client/src/Components/Inputs/Select/index.jsx @@ -77,26 +77,9 @@ const Select = ({ onChange={onChange} displayEmpty inputProps={{ id: id }} - MenuProps={{ - MenuListProps: { - sx: { - p: 0, - "& li": { - color: theme.palette.text.secondary, - fontSize: 13, - px: theme.spacing(4), - py: theme.spacing(2.5), - borderRadius: theme.shape.borderRadius, - }, - "& li.Mui-selected, & li.Mui-selected.Mui-focusVisible, & li.Mui-selected:hover": - { - backgroundColor: theme.palette.background.fill, - }, - }, - }, - }} IconComponent={KeyboardArrowDownIcon} sx={{ + fontSize: 13, minWidth: "125px", "& fieldset": { borderRadius: theme.shape.borderRadius, diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx index 2730441b6..2988efb54 100644 --- a/Client/src/Components/Sidebar/index.jsx +++ b/Client/src/Components/Sidebar/index.jsx @@ -305,31 +305,12 @@ function Sidebar() { slotProps={{ paper: { sx: { - border: 1, - borderColor: theme.palette.border.light, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shape.boxShadow, - backgroundColor: theme.palette.background.main, + mt: theme.spacing(-2), ml: theme.spacing(1), }, }, }} - MenuListProps={{ - sx: { - p: 3, - minWidth: "100px", - "& li": { - color: theme.palette.text.secondary, - fontSize: 13, - px: theme.spacing(4), - py: theme.spacing(2.5), - borderRadius: theme.shape.borderRadius, - }, - "& li:hover": { - backgroundColor: theme.palette.background.accent, - }, - }, - }} + MenuListProps={{ sx: { px: 1, py: 2 } }} sx={{ ml: theme.spacing(8), "& .selected-path": { @@ -360,9 +341,13 @@ function Sidebar() { }} sx={{ gap: theme.spacing(4), - borderRadius: theme.shape.borderRadius, - pl: theme.spacing(4), - mb: "1px", + opacity: 0.9, + "& svg": { + "& path": { + stroke: theme.palette.other.icon, + strokeWidth: 1.1, + }, + }, }} > {child.icon} @@ -460,9 +445,7 @@ function Sidebar() { ) )} - + {/* other */} ))} - + )} - {collapsed && ( - - )} + {collapsed && } dispatch(setMode("light"))}>Light dispatch(setMode("dark"))}>Dark + Date: Thu, 29 Aug 2024 20:47:19 -0400 Subject: [PATCH 17/18] Added icon button default padding and background --- Client/src/Utils/Theme/darkTheme.js | 10 ++++++++++ Client/src/Utils/Theme/lightTheme.js | 10 ++++++++++ 2 files changed, 20 insertions(+) diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 3599e4c53..d9d25893c 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -80,6 +80,16 @@ const darkTheme = createTheme({ disableRipple: true, }, }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 4, + "&:hover": { + backgroundColor: background.fill, + }, + }, + }, + }, MuiPaper: { styleOverrides: { root: { diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index c328302b3..18923613b 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -80,6 +80,16 @@ const lightTheme = createTheme({ disableRipple: true, }, }, + MuiIconButton: { + styleOverrides: { + root: { + padding: 4, + "&:hover": { + backgroundColor: background.fill, + }, + }, + }, + }, MuiPaper: { styleOverrides: { root: { From e402e3511913a2bd12588b9c5afd6feea4e284c8 Mon Sep 17 00:00:00 2001 From: Daniel Cojocea Date: Thu, 29 Aug 2024 21:02:15 -0400 Subject: [PATCH 18/18] Removed old theme file --- Client/src/Pages/Monitors/Home/index.jsx | 6 +- Client/src/Utils/Theme.js | 251 ----------------------- 2 files changed, 4 insertions(+), 253 deletions(-) delete mode 100644 Client/src/Utils/Theme.js diff --git a/Client/src/Pages/Monitors/Home/index.jsx b/Client/src/Pages/Monitors/Home/index.jsx index 295ded93e..e17b56e37 100644 --- a/Client/src/Pages/Monitors/Home/index.jsx +++ b/Client/src/Pages/Monitors/Home/index.jsx @@ -132,7 +132,8 @@ const Monitors = ({ isAdmin }) => { { - Current monitors + Actively monitoring