From 5ad5ba7e6fd940c259d92564ac85e69d0b9f5259 Mon Sep 17 00:00:00 2001 From: Caio Cabral Date: Wed, 13 Nov 2024 05:50:32 -0500 Subject: [PATCH] feat: removing all colors from codebase that do not come from theme --- Client/src/App.css | 7 -- Client/src/App.jsx | 1 - .../src/Components/Charts/BarChart/index.jsx | 4 +- Client/src/Components/Inputs/Radio/index.jsx | 2 +- Client/src/Components/Label/index.css | 1 - Client/src/Components/Label/index.jsx | 6 +- Client/src/Utils/Theme/constants.js | 91 +++++++------------ Client/src/Utils/Theme/darkTheme.js | 9 +- Client/src/Utils/Theme/lightTheme.js | 8 +- 9 files changed, 54 insertions(+), 75 deletions(-) delete mode 100644 Client/src/App.css diff --git a/Client/src/App.css b/Client/src/App.css deleted file mode 100644 index 44e06cd5f..000000000 --- a/Client/src/App.css +++ /dev/null @@ -1,7 +0,0 @@ -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/Client/src/App.jsx b/Client/src/App.jsx index 1a59ea9e5..151512701 100644 --- a/Client/src/App.jsx +++ b/Client/src/App.jsx @@ -2,7 +2,6 @@ import { useEffect } from "react"; import { Routes, Route, Navigate } from "react-router-dom"; import { useSelector } from "react-redux"; import { useDispatch } from "react-redux"; -// import "./App.css"; import "react-toastify/dist/ReactToastify.css"; import { ToastContainer } from "react-toastify"; import NotFound from "./Pages/NotFound"; diff --git a/Client/src/Components/Charts/BarChart/index.jsx b/Client/src/Components/Charts/BarChart/index.jsx index c6308ee2d..70fd66390 100644 --- a/Client/src/Components/Charts/BarChart/index.jsx +++ b/Client/src/Components/Charts/BarChart/index.jsx @@ -141,7 +141,9 @@ const BarChart = ({ checks = [] }) => { width="9px" height="100%" backgroundColor={ - check.status ? theme.palette.success.dark : theme.palette.error.dark + check.status + ? theme.palette.success.contrastText + : theme.palette.error.dark } sx={{ borderRadius: theme.spacing(1.5), diff --git a/Client/src/Components/Inputs/Radio/index.jsx b/Client/src/Components/Inputs/Radio/index.jsx index a0874b25b..7a700e2b7 100644 --- a/Client/src/Components/Inputs/Radio/index.jsx +++ b/Client/src/Components/Inputs/Radio/index.jsx @@ -41,7 +41,7 @@ const Radio = (props) => { color: "transparent", width: 16, height: 16, - boxShadow: "inset 0 0 0 1px #656a74", + boxShadow: `inset 0 0 0 1px ${theme.palette.secondary.main}`, mt: theme.spacing(0.5), }} /> diff --git a/Client/src/Components/Label/index.css b/Client/src/Components/Label/index.css index 104d43410..d3fe53da5 100644 --- a/Client/src/Components/Label/index.css +++ b/Client/src/Components/Label/index.css @@ -1,5 +1,4 @@ .label { - border: 1px solid #000; display: inline-flex; justify-content: center; align-items: center; diff --git a/Client/src/Components/Label/index.jsx b/Client/src/Components/Label/index.jsx index 97cc3e5f3..eb6499a31 100644 --- a/Client/src/Components/Label/index.jsx +++ b/Client/src/Components/Label/index.jsx @@ -31,7 +31,7 @@ const BaseLabel = ({ label, styles, children }) => { className="label" sx={{ borderRadius: borderRadius, - borderColor: theme.palette.text.tertiary, + border: `1px solid ${theme.palette.text.tertiary}`, color: theme.palette.text.tertiary, padding: padding, ...styles, @@ -127,8 +127,8 @@ const StatusLabel = ({ status, text, customStyles }) => { const colors = { up: { dotColor: theme.palette.success.main, - bgColor: theme.palette.success.dark, - borderColor: theme.palette.success.light, + bgColor: theme.palette.success./* dark */ contrastText, + borderColor: theme.palette.success.main /* light */, }, down: { dotColor: theme.palette.error.contrastText, diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index 7beaaa20a..4fa2292c3 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -8,7 +8,7 @@ const typographyLevels = { xl: `${(typographyBase + 10) / 16}rem`, }; -/* TODO Expand this */ +/* TODO Review color palette and semantic colors */ const paletteColors = { white: "#FFFFFF", gray50: "#FEFEFE", @@ -16,34 +16,19 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", - /* gray95: "#FAFAFA", - gray97: "#F9FAFB", */ gray100: "#F4F4F4", - /* gray125: "#F2F4F7", - gray150: "#EAECF0", - gray180: "#E6E6E6", */ gray200: "#E3E3E3", - /* gray225: "#D6D9DD", - gray250: "#D0D5DD", */ gray300: "#A2A3A3", - /* gray350: "#A1A1AA", - gray450: "#8E8E8F", */ gray500: "#838C99", gray600: "#454546", gray750: "#36363E", gray800: "#2D2D33", - /* gray815: "#27272A", - gray830: "#262115", - gray835: "#18181a", - gray840: "#151518", */ gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", gray880: "#0C0C0E", gray890: "#09090B", - black: "#000000", blueGray20: "#E8F0FE", - blueGray40: "#E2EAF7", blueGray150: "#667085", blueGray200: "#475467", blueGray400: "#344054", @@ -52,10 +37,8 @@ const paletteColors = { blue700: "#4E5BA6", purple300: "#664EFF", purple400: "#3A1BFF", - green20: "#ECFDF3", green50: "#D4F4E1", green150: "#45BB7A", - green200: "#17B26A", green400: "#079455", green800: "#1C4428", green900: "#12261E", @@ -87,34 +70,34 @@ const semanticColors = { light: paletteColors.gray100, dark: paletteColors.gray800, }, - // TODO we dont have secondary light - dark: { - light: paletteColors.gray200, - //TODO we dont have secondary dark for dark mode - }, constrastText: { light: paletteColors.blueGray200, - //TODO we dont have secondary contrastText for dark mode + dark: paletteColors.blueGray200, + }, + light: { + light: paletteColors.gray200, + dark: paletteColors.gray200, + }, + dark: { + light: paletteColors.gray200, + dark: paletteColors.gray200, }, }, success: { main: { - light: paletteColors.green200, - dark: paletteColors.green150, - }, - contrastText: { - //TODO values are equal (confirm) - //TODO contrasttext semantically should be something that contrasts with the main light: paletteColors.green400, dark: paletteColors.green400, }, + contrastText: { + light: paletteColors.green50, + dark: paletteColors.green900, + }, light: { light: paletteColors.green50, - //TODO dark mode light success is darker than the main success - dark: paletteColors.green800, + dark: paletteColors.green150, }, dark: { - light: paletteColors.green20, + light: paletteColors.green800, dark: paletteColors.green900, }, }, @@ -124,9 +107,8 @@ const semanticColors = { dark: paletteColors.red300, }, contrastText: { - //TODO contrasttext semantically should be something that contrasts with the main light: paletteColors.gray50, - dark: paletteColors.red50, + dark: paletteColors.gray50, }, light: { light: paletteColors.red100, @@ -142,17 +124,17 @@ const semanticColors = { light: paletteColors.orange300, dark: paletteColors.orange400, }, - light: { - light: paletteColors.orange100, - dark: paletteColors.orange800, - }, contrastText: { light: paletteColors.orange600, dark: paletteColors.orange500, }, + light: { + light: paletteColors.orange100, + dark: paletteColors.orange800, + }, dark: { light: paletteColors.orange50, - dark: paletteColors.gray830, + dark: paletteColors.gray800, }, }, /* From this part on, try to create semantic structure, not feature based structure */ @@ -181,7 +163,7 @@ const semanticColors = { background: { main: { light: paletteColors.white, - dark: paletteColors.gray840, + dark: paletteColors.gray850, }, alt: { light: paletteColors.gray90, @@ -193,7 +175,7 @@ const semanticColors = { }, accent: { light: paletteColors.gray100, - dark: paletteColors.gray835, + dark: paletteColors.gray850, }, }, text: { @@ -203,44 +185,39 @@ const semanticColors = { }, secondary: { light: paletteColors.blueGray400, - dark: paletteColors.gray180, + dark: paletteColors.gray200, }, tertiary: { light: paletteColors.blueGray200, - dark: paletteColors.gray350, + dark: paletteColors.gray300, }, accent: { light: paletteColors.gray500, - dark: paletteColors.gray450, + dark: paletteColors.gray500, }, }, border: { light: { - light: paletteColors.gray150, - dark: paletteColors.gray815, + light: paletteColors.gray200, + dark: paletteColors.gray800, }, dark: { - light: paletteColors.gray250, + light: paletteColors.gray200, dark: paletteColors.gray750, }, }, - percentage: { - /* uptimeFair: { - light: paletteColors. - } */ - }, unresolved: { main: { light: paletteColors.blue700, dark: paletteColors.purple300, }, light: { - light: paletteColors.blueGray40, + light: paletteColors.blueGray20, dark: paletteColors.purple400, }, bg: { - light: paletteColors.gray125, - dark: paletteColors.gray125, + light: paletteColors.gray100, + dark: paletteColors.gray100, }, }, other: { @@ -248,7 +225,7 @@ const semanticColors = { light: paletteColors.blueGray150, }, line: { - light: paletteColors.gray225, + light: paletteColors.gray200, }, grid: { light: paletteColors.gray300, diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index 7dfb0d38a..ff2c628d2 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -24,7 +24,12 @@ const { const palette = { primary: { main: primary.main.dark }, - secondary: { main: secondary.main.dark }, + secondary: { + main: secondary.main.dark, + contrastText: secondary.constrastText.dark, + light: secondary.dark.dark, + dark: secondary.dark.dark, + }, success: { main: success.main.dark, contrastText: success.contrastText.dark, @@ -48,7 +53,7 @@ const palette = { uptimePoor: error.main.dark, uptimeFair: warning.contrastText.dark, uptimeGood: warning.main.dark /* Change for a success color? ?*/, - uptimeExcellent: success.contrastText.light, + uptimeExcellent: success.main.dark, }, unresolved: { main: unresolved.main.dark, diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index f345b227b..d65146486 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -3,7 +3,10 @@ import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; /* +TODO Next step: check if all here are being used. +*/ +/* TODO Check for Hex in code base @@ -34,8 +37,9 @@ const palette = { primary: { main: primary.main.light }, secondary: { main: secondary.main.light, - dark: secondary.dark.light, contrastText: secondary.constrastText.light, + light: secondary.dark.light, + dark: secondary.dark.light, }, success: { main: success.main.light, @@ -60,7 +64,7 @@ const palette = { uptimePoor: error.main.light, uptimeFair: warning.contrastText.light, uptimeGood: warning.main.light /* Change for a success color? */, - uptimeExcellent: success.contrastText.light, + uptimeExcellent: success.main.light, }, unresolved: { main: unresolved.main.light,