diff --git a/Client/src/Pages/Monitors/Home/StatusBox.jsx b/Client/src/Pages/Monitors/Home/StatusBox.jsx index d84690432..a929c31f9 100644 --- a/Client/src/Pages/Monitors/Home/StatusBox.jsx +++ b/Client/src/Pages/Monitors/Home/StatusBox.jsx @@ -25,7 +25,7 @@ const StatusBox = ({ title, value }) => { ); } else if (title === "down") { - color = theme.palette.error.contrastText; + color = theme.palette.error.main; icon = ( diff --git a/Client/src/Utils/Theme/constants.js b/Client/src/Utils/Theme/constants.js index a27e65921..7beaaa20a 100644 --- a/Client/src/Utils/Theme/constants.js +++ b/Client/src/Utils/Theme/constants.js @@ -8,18 +8,6 @@ const typographyLevels = { xl: `${(typographyBase + 10) / 16}rem`, }; -/* This should not be here. Incorporate into color structure. - -Is is being exported to globalStyle*/ -const paletteLight = { - text: { - primary: "#1c2130", - secondary: "#344054", - tertiary: "#475467", - accent: "#838c99", - }, -}; - /* TODO Expand this */ const paletteColors = { white: "#FFFFFF", @@ -28,26 +16,26 @@ const paletteColors = { gray70: "#FDFDFD", gray80: "#FDFCFD", gray90: "#FCFCFD", - gray95: "#FAFAFA", - gray97: "#F9FAFB", + /* gray95: "#FAFAFA", + gray97: "#F9FAFB", */ gray100: "#F4F4F4", - gray125: "#F2F4F7", + /* gray125: "#F2F4F7", gray150: "#EAECF0", - gray180: "#E6E6E6", + gray180: "#E6E6E6", */ gray200: "#E3E3E3", - gray225: "#D6D9DD", - gray250: "#D0D5DD", + /* gray225: "#D6D9DD", + gray250: "#D0D5DD", */ gray300: "#A2A3A3", - gray350: "#A1A1AA", - gray450: "#8E8E8F", + /* gray350: "#A1A1AA", + gray450: "#8E8E8F", */ gray500: "#838C99", gray600: "#454546", gray750: "#36363E", gray800: "#2D2D33", - gray815: "#27272A", + /* gray815: "#27272A", gray830: "#262115", gray835: "#18181a", - gray840: "#151518", + gray840: "#151518", */ gray850: "#131315", gray860: "#111113", gray870: "#0F0F11", @@ -137,7 +125,7 @@ const semanticColors = { }, contrastText: { //TODO contrasttext semantically should be something that contrasts with the main - light: paletteColors.red200, + light: paletteColors.gray50, dark: paletteColors.red50, }, light: { @@ -204,14 +192,14 @@ const semanticColors = { dark: paletteColors.gray800, }, accent: { - light: paletteColors.gray97, + light: paletteColors.gray100, dark: paletteColors.gray835, }, }, text: { primary: { light: paletteColors.blueGray900, - dark: paletteColors.gray95, + dark: paletteColors.gray100, }, secondary: { light: paletteColors.blueGray400, @@ -271,4 +259,4 @@ const semanticColors = { }, }, }; -export { typographyLevels, paletteLight, semanticColors as colors }; +export { typographyLevels, semanticColors as colors }; diff --git a/Client/src/Utils/Theme/darkTheme.js b/Client/src/Utils/Theme/darkTheme.js index f5948217d..7dfb0d38a 100644 --- a/Client/src/Utils/Theme/darkTheme.js +++ b/Client/src/Utils/Theme/darkTheme.js @@ -22,80 +22,82 @@ const { other, } = colors; -const darkTheme = createTheme({ - ...baseTheme, - palette: { - primary: { main: primary.main.dark }, - secondary: { main: secondary.main.dark }, - success: { - main: success.main.dark, - contrastText: success.contrastText.dark, - light: success.light.dark, - dark: success.dark.dark, - }, - error: { - main: error.main.dark, - contrastText: error.contrastText.dark, - light: error.light.dark, - dark: error.dark.dark, - }, - warning: { - main: warning.main.dark, - light: warning.light.dark, - contrastText: warning.contrastText.dark, - dark: warning.dark.dark, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.dark, - uptimeFair: warning.contrastText.dark, - uptimeGood: warning.main.dark /* Change for a success color? ?*/, - uptimeExcellent: success.contrastText.light, - }, - unresolved: { - main: unresolved.main.dark, - light: unresolved.light.dark, - bg: unresolved.bg.dark, - }, - divider: border.light.dark, - other: { - icon: text.secondary.dark, - line: border.light.dark, - fill: background.accent.dark, - grid: other.grid.dark, - autofill: secondary.main.dark, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.dark, - secondary: text.secondary.dark, - tertiary: text.tertiary.dark, - accent: text.accent.dark, - }, - background: { - main: background.main.dark, - alt: background.alt.dark, - fill: background.fill.dark, - accent: background.accent.dark, - }, - border: { - light: border.light.dark, - dark: border.dark.dark, - }, - info: { - text: text.primary.dark, - main: text.secondary.dark, - bg: background.main.dark, - light: background.main.dark, - border: border.light.dark, - }, +const palette = { + primary: { main: primary.main.dark }, + secondary: { main: secondary.main.dark }, + success: { + main: success.main.dark, + contrastText: success.contrastText.dark, + light: success.light.dark, + dark: success.dark.dark, }, + error: { + main: error.main.dark, + contrastText: error.contrastText.dark, + light: error.light.dark, + dark: error.dark.dark, + }, + warning: { + main: warning.main.dark, + light: warning.light.dark, + contrastText: warning.contrastText.dark, + dark: warning.dark.dark, + }, + /* From this part on, try to create semantic structure, not feature based structure */ + percentage: { + uptimePoor: error.main.dark, + uptimeFair: warning.contrastText.dark, + uptimeGood: warning.main.dark /* Change for a success color? ?*/, + uptimeExcellent: success.contrastText.light, + }, + unresolved: { + main: unresolved.main.dark, + light: unresolved.light.dark, + bg: unresolved.bg.dark, + }, + divider: border.light.dark, + other: { + icon: text.secondary.dark, + line: border.light.dark, + fill: background.accent.dark, + grid: other.grid.dark, + autofill: secondary.main.dark, + }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: { + primary: text.primary.dark, + secondary: text.secondary.dark, + tertiary: text.tertiary.dark, + accent: text.accent.dark, + }, + background: { + main: background.main.dark, + alt: background.alt.dark, + fill: background.fill.dark, + accent: background.accent.dark, + }, + border: { + light: border.light.dark, + dark: border.dark.dark, + }, + info: { + text: text.primary.dark, + main: text.secondary.dark, + bg: background.main.dark, + light: background.main.dark, + border: border.light.dark, + }, +}; + +const darkTheme = createTheme({ + palette, + ...baseTheme(palette), }); export default darkTheme; diff --git a/Client/src/Utils/Theme/globalTheme.js b/Client/src/Utils/Theme/globalTheme.js index 796271fb0..7737d396e 100644 --- a/Client/src/Utils/Theme/globalTheme.js +++ b/Client/src/Utils/Theme/globalTheme.js @@ -1,4 +1,4 @@ -import { paletteLight, typographyLevels } from "./constants"; +import { typographyLevels } from "./constants"; const fontFamilyPrimary = '"Inter" , sans-serif'; // const fontFamilySecondary = '"Avenir", sans-serif'; @@ -7,28 +7,28 @@ const fontFamilyPrimary = '"Inter" , sans-serif'; const shadow = "0px 4px 24px -4px rgba(16, 24, 40, 0.08), 0px 3px 3px -3px rgba(16, 24, 40, 0.03)"; -const baseTheme = { +const baseTheme = (palette) => ({ typography: { fontFamily: fontFamilyPrimary, fontSize: 14, h1: { fontSize: typographyLevels.xl, - color: paletteLight.text.primary, + color: palette.text.primary, fontWeight: 500, }, h2: { fontSize: typographyLevels.l, - color: paletteLight.text.secondary, + color: palette.text.secondary, fontWeight: 400, }, body1: { fontSize: typographyLevels.m, - color: paletteLight.text.tertiary, + color: palette.text.tertiary, fontWeight: 400, }, body2: { fontSize: typographyLevels.s, - color: paletteLight.text.tertiary, + color: palette.text.tertiary, fontWeight: 400, }, }, @@ -36,16 +36,17 @@ const baseTheme = { chart: { header: { fontWeight: 400, - fill: paletteLight.text.tertiary, + fill: palette.text.tertiary, fontSize: typographyLevels.m, }, subheader: { fontWeight: 400, - fill: paletteLight.text.tertiary, + fill: palette.text.tertiary, fontSize: typographyLevels.xs, }, }, spacing: 2, + /* TODO All these should live inside of a component*/ components: { MuiButton: { defaultProps: { @@ -79,6 +80,13 @@ const baseTheme = { borderColor: theme.palette.border.light, }, }, + { + props: (props) => props.variant === "contained" && props.disabled, + style: { + backgroundColor: `${theme.palette.secondary.main} !important`, + color: `${theme.palette.secondary.contrastText} !important`, + }, + }, ], fontWeight: 400, borderRadius: 4, @@ -207,6 +215,6 @@ const baseTheme = { borderThick: 2, boxShadow: shadow, }, -}; +}); export { baseTheme }; diff --git a/Client/src/Utils/Theme/lightTheme.js b/Client/src/Utils/Theme/lightTheme.js index 7687d6cf0..f345b227b 100644 --- a/Client/src/Utils/Theme/lightTheme.js +++ b/Client/src/Utils/Theme/lightTheme.js @@ -3,12 +3,11 @@ import { baseTheme } from "./globalTheme"; import { colors } from "./constants"; /* -Take things from global theme - Next step: check if all here are being used. -Discuss colors with Gorkem and rest of the team +Check for Hex in code base +Check for px in codebase */ const { @@ -31,84 +30,86 @@ const { other, } = colors; -const lightTheme = createTheme({ - ...baseTheme, - palette: { - primary: { main: primary.main.light }, - secondary: { - main: secondary.main.light, - dark: secondary.dark.light, - contrastText: secondary.constrastText.light, - }, - success: { - main: success.main.light, - contrastText: success.contrastText.light, - light: success.light.light, - dark: success.dark.light, - }, - error: { - main: error.main.light, - contrastText: error.contrastText.light, - light: error.light.light, - dark: error.dark.light, - }, - warning: { - main: warning.main.light, - light: warning.light.light, - contrastText: warning.contrastText.light, - dark: warning.dark.light, - }, - /* From this part on, try to create semantic structure, not feature based structure */ - percentage: { - uptimePoor: error.main.light, - uptimeFair: warning.contrastText.light, - uptimeGood: warning.main.light /* Change for a success color? */, - uptimeExcellent: success.contrastText.light, - }, - unresolved: { - main: unresolved.main.light, - light: unresolved.light.light, - bg: unresolved.bg.light, - }, - divider: border.light.light, - other: { - icon: other.icon.light, - line: other.line.light, - fill: secondary.dark.light, - grid: other.grid.light, - autofill: other.autofill.light, - }, - gradient: { - color1, - color2, - color3, - color4, - color5, - }, - text: { - primary: text.primary.light, - secondary: text.secondary.light, - tertiary: text.tertiary.light, - accent: text.accent.light, - }, - background: { - main: background.main.light, - alt: background.alt.light, - fill: background.fill.light, - accent: background.accent.light, - }, - border: { - light: border.light.light, - dark: border.dark.light, - }, - info: { - text: text.primary.light, - main: text.tertiary.light, - bg: background.main.light, - light: background.main.light, - border: border.dark.light, - }, +const palette = { + primary: { main: primary.main.light }, + secondary: { + main: secondary.main.light, + dark: secondary.dark.light, + contrastText: secondary.constrastText.light, }, + success: { + main: success.main.light, + contrastText: success.contrastText.light, + light: success.light.light, + dark: success.dark.light, + }, + error: { + main: error.main.light, + contrastText: error.contrastText.light, + light: error.light.light, + dark: error.dark.light, + }, + warning: { + main: warning.main.light, + light: warning.light.light, + contrastText: warning.contrastText.light, + dark: warning.dark.light, + }, + /* From this part on, try to create semantic structure, not feature based structure */ + percentage: { + uptimePoor: error.main.light, + uptimeFair: warning.contrastText.light, + uptimeGood: warning.main.light /* Change for a success color? */, + uptimeExcellent: success.contrastText.light, + }, + unresolved: { + main: unresolved.main.light, + light: unresolved.light.light, + bg: unresolved.bg.light, + }, + divider: border.light.light, + other: { + icon: other.icon.light, + line: other.line.light, + fill: secondary.dark.light, + grid: other.grid.light, + autofill: other.autofill.light, + }, + gradient: { + color1, + color2, + color3, + color4, + color5, + }, + text: { + primary: text.primary.light, + secondary: text.secondary.light, + tertiary: text.tertiary.light, + accent: text.accent.light, + }, + background: { + main: background.main.light, + alt: background.alt.light, + fill: background.fill.light, + accent: background.accent.light, + }, + border: { + light: border.light.light, + dark: border.dark.light, + }, + info: { + text: text.primary.light, + main: text.tertiary.light, + bg: background.main.light, + light: background.main.light, + border: border.dark.light, + }, +}; + +const lightTheme = createTheme({ + palette, + ...baseTheme(palette), }); export default lightTheme;