Merge branch 'develop' into feat/create-monitor-display-name-v2

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,