Merge pull request #1220 from bluewave-labs/fix/fe/color-adjustments

fix: adjusted theme settings for color fixes, references #1178

Client/src/Components/Charts/BarChart/index.jsx

@@ -158,9 +158,7 @@ const BarChart = ({ checks = [] }) => {
 								width="100%"
 								height={`${animate ? check.responseTime : 0}%`}
 								backgroundColor={
-									check.status
-										? theme.palette.success.main
-										: theme.palette.error.contrastText
+									check.status ? theme.palette.success.main : theme.palette.error.main
 								}
 								sx={{
 									borderRadius: theme.spacing(1.5),

Client/src/Components/Label/index.jsx

@@ -127,11 +127,11 @@ const StatusLabel = ({ status, text, customStyles }) => {
 	const colors = {
 		up: {
 			dotColor: theme.palette.success.main,
-			bgColor: theme.palette.success./* dark */ contrastText,
+			bgColor: theme.palette.success.contrastText /* dark */,
 			borderColor: theme.palette.success.main /* light */,
 		},
 		down: {
-			dotColor: theme.palette.error.contrastText,
+			dotColor: theme.palette.error.main,
 			bgColor: theme.palette.error.dark,
 			borderColor: theme.palette.error.light,
 		},

Client/src/Utils/Theme/constants.js

@@ -22,6 +22,7 @@ const paletteColors = {
 	gray80: "#FDFCFD",
 	gray90: "#FCFCFD",
 	gray100: "#F4F4F4",
+	gray150: "#EFEFEF",
 	gray200: "#E3E3E3",
 	gray300: "#A2A3A3",
 	gray500: "#838C99",
@@ -205,10 +206,12 @@ const semanticColors = {
 		light: {
 			light: paletteColors.gray200,
 			dark: paletteColors.gray800,
+			disabled: paletteColors.gray150,
 		},
 		dark: {
 			light: paletteColors.gray200,
 			dark: paletteColors.gray750,
+			disabled: paletteColors.gray800,
 		},
 	},
 	unresolved: {

Client/src/Utils/Theme/darkTheme.js

@@ -23,6 +23,9 @@ const {
 } = colors;
 
 const palette = {
+	action: {
+		disabled: border.dark.disabled,
+	},
 	primary: { main: primary.main.dark },
 	secondary: {
 		main: secondary.main.dark,

Client/src/Utils/Theme/globalTheme.js

@@ -220,7 +220,7 @@ const baseTheme = (palette) => ({
 						height: "var(--env-var-height-2)",
 						fontSize: "var(--env-var-font-size-medium)",
 						fontWeight: 400,
-						color: palette.text.secondary, // or any color from your palette
+						color: palette.text.secondary,
 					},
 					"& .MuiInputBase-input.MuiOutlinedInput-input": {
 						padding: "0 var(--env-var-spacing-1-minus) !important",
@@ -231,6 +231,7 @@ const baseTheme = (palette) => ({
 					"& .MuiOutlinedInput-notchedOutline": {
 						borderRadius: 4,
 					},
+
 					"& .MuiFormHelperText-root": {
 						color: palette.error.main,
 						opacity: 0.8,

Client/src/Utils/Theme/lightTheme.js

@@ -28,6 +28,9 @@ const {
 } = colors;
 
 const palette = {
+	action: {
+		disabled: border.light.disabled,
+	},
 	primary: { main: primary.main.light },
 	secondary: {
 		main: secondary.main.light,