feat: simplify and adjust status label

Client/src/Utils/Theme/constants.js

@@ -97,22 +97,36 @@ const newColors = {
 	green200: "#4B9B77",
 	green400: "#079455",
 	green700: "#026513",
-	orange100: "#FFE5CC",
+	orange100: "#CCB368",
 	orange400: "#FD8F22",
 	orange600: "#9B734B",
-	orange700: "#694016",
-	red100: "#F9C2C2",
+	orange700: "#884605" /* "#6F5404" */,
+	/* warning: {
+		main: {
+			light: newColors.orange700,
+			dark: newColors.orange100,
+		},
+		contrastText: {
+			light: newColors.offWhite,
+			dark: newColors.offBlack,
+		},
+		lowContrast: {
+			light: newColors.orange400,
+			dark: newColors.orange600,
+		},
+	}, */
+	red100: "#F27C7C",
 	red400: "#D92020",
 	red600: "#9B4B4B",
-	red700: "#791515",
+	red700: "#980303",
 };
 
 /* Structure:
 Key: 
 main: background color
 contrastText: color for main contrast text
-light and dark: should be transparent (since we don't want MUI to make the light dark automatic calculations for us)
-lowerContrastText: if there are any, use nested keys secondary and tertiary
+contrastTextSecondary: if needed
+contrastTextTertiary: if needed
 lowContrast: if we need some low contrast for that color (for borders, and decorative elements). This should never be usend in text
 
 */
@@ -133,18 +147,16 @@ const newSemanticColors = {
 			dark: newColors.offBlack,
 		},
 		contrastText: {
-			main: {
-				light: newColors.blueGray800,
-				dark: newColors.blueGray50,
-			},
-			secondary: {
-				light: newColors.blueGray600,
-				dark: newColors.gray200,
-			},
-			tertiary: {
-				light: newColors.blueGray500,
-				dark: newColors.gray500,
-			},
+			light: newColors.blueGray800,
+			dark: newColors.blueGray50,
+		},
+		contrastTextSecondary: {
+			light: newColors.blueGray600,
+			dark: newColors.gray200,
+		},
+		contrastTextTertiary: {
+			light: newColors.blueGray500,
+			dark: newColors.gray500,
 		},
 		lowContrast: {
 			light: newColors.gray200,
@@ -171,49 +183,48 @@ const newSemanticColors = {
 			dark: newColors.gray100,
 		},
 	},
-	/* For success, warning and error, contrastText works wll with main, and with the theme primary main color. Accent is to be used in graphs */
 	success: {
 		main: {
 			light: newColors.green700,
 			dark: newColors.green100,
 		},
 		contrastText: {
-			light: newColors.green100,
-			dark: newColors.green700,
+			light: newColors.offWhite,
+			dark: newColors.offBlack,
 		},
-		accent: {
+		lowContrast: {
 			light: newColors.green400,
 			dark: newColors.green200,
 		},
 	},
-	error: {
-		main: {
-			light: newColors.red700,
-			dark: newColors.red100,
-		},
-		contrastText: {
-			light: newColors.red100,
-			dark: newColors.red700,
-		},
-		accent: {
-			light: newColors.red400,
-			dark: newColors.red600,
-		},
-	},
 	warning: {
 		main: {
 			light: newColors.orange700,
 			dark: newColors.orange100,
 		},
 		contrastText: {
-			light: newColors.orange100,
-			dark: newColors.orange700,
+			light: newColors.offWhite,
+			dark: newColors.offBlack,
 		},
-		accent: {
+		lowContrast: {
 			light: newColors.orange400,
 			dark: newColors.orange600,
 		},
 	},
+	error: {
+		main: {
+			light: newColors.red700,
+			dark: newColors.red100,
+		},
+		contrastText: {
+			light: newColors.offWhite,
+			dark: newColors.offBlack,
+		},
+		lowContrast: {
+			light: newColors.red400,
+			dark: newColors.red600,
+		},
+	},
 	/* These are temporary, just for everything not to break */
 	gradient: {
 		color1: {
@@ -237,12 +248,6 @@ const newSemanticColors = {
 			dark: paletteColors.gray850,
 		},
 	},
-	other: {
-		grid: {
-			light: paletteColors.gray300,
-			dark: paletteColors.gray600,
-		},
-	},
 	unresolved: {
 		main: {
 			light: paletteColors.blue700,
@@ -255,7 +260,15 @@ export { typographyLevels, semanticColors as colors, newSemanticColors };
 
 /* TODO
 
+
+
 Look up for
+
+success.contrastText
+warning.contrastText
+error.contrastText
+
+
 "red"
 "white"
 { text, bg, border }
@@ -263,5 +276,5 @@ Look up for
  .dark
 
 
-theme.palette.unresolved
+theme.palette.unresolved (will become tertiary)
 */

Client/src/Utils/Theme/globalTheme.js

@@ -58,7 +58,7 @@ const baseTheme = (palette) => ({
 							props: (props) => props.variant === "group",
 							style: {
 								/* color: theme.palette.secondary.contrastText, */
-								color: theme.palette.primary.contrastText.main,
+								color: theme.palette.primary.contrastText,
 								backgroundColor: theme.palette.primary.main,
 								border: 1,
 								borderStyle: "solid",
@@ -114,7 +114,7 @@ const baseTheme = (palette) => ({
 					"&.MuiLoadingButton-root": {
 						"&:disabled": {
 							backgroundColor: theme.palette.secondary.main,
-							color: theme.palette.primary.contrastText.main,
+							color: theme.palette.primary.contrastText,
 						},
 					},
 					"&.MuiLoadingButton-loading": {
@@ -177,7 +177,7 @@ const baseTheme = (palette) => ({
 					borderRadius: 4,
 					backgroundColor: "inherit",
 					padding: "4px 6px",
-					color: theme.palette.primary.contrastText.secondary,
+					color: theme.palette.primary.contrastTextSecondary,
 					fontSize: 13,
 					margin: 2,
 					minWidth: 100,
@@ -210,7 +210,7 @@ const baseTheme = (palette) => ({
 					borderStyle: "solid",
 					borderColor: theme.palette.primary.lowContrast,
 					"& button": {
-						color: theme.palette.primary.contrastText.tertiary,
+						color: theme.palette.primary.contrastTextTertiary,
 						borderRadius: 4,
 					},
 					"& li:first-of-type button, & li:last-of-type button": {
@@ -258,7 +258,7 @@ const baseTheme = (palette) => ({
 					"& .MuiInputBase-input:-webkit-autofill": {
 						transition: "background-color 5000s ease-in-out 0s",
 						WebkitBoxShadow: `0 0 0px 1000px ${theme.palette.primary.main} inset`,
-						WebkitTextFillColor: theme.palette.primary.contrastText.main,
+						WebkitTextFillColor: theme.palette.primary.contrastText,
 					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {
 						padding: "0 var(--env-var-spacing-1-minus) !important",

Client/src/Utils/greeting.jsx

@@ -163,7 +163,7 @@ const Greeting = ({ type = "" }) => {
 				<Typography
 					component="span"
 					fontSize="inherit"
-					color={theme.palette.primary.contrastText.tertiary}
+					color={theme.palette.primary.contrastTextTertiary}
 				>
 					{prepend},{" "}
 				</Typography>
@@ -171,7 +171,7 @@ const Greeting = ({ type = "" }) => {
 					component="span"
 					fontSize="inherit"
 					fontWeight="inherit"
-					color={theme.palette.primary.contrastText.secondary}
+					color={theme.palette.primary.contrastTextSecondary}
 				>
 					{firstName} {emoji}
 				</Typography>
@@ -179,7 +179,7 @@ const Greeting = ({ type = "" }) => {
 			<Typography
 				variant="h2"
 				lineHeight={1}
-				color={theme.palette.primary.contrastText.tertiary}
+				color={theme.palette.primary.contrastTextTertiary}
 			>
 				{append} — Here’s an overview of your {type} monitors.
 			</Typography>