feat: setting new colors

Client/src/Components/BasicTable/index.jsx

@@ -312,7 +312,7 @@ const BasicTable = ({ data, paginated, reversed, table, emptyMessage = "No data"
 							},
 							"& .MuiSelect-select": {
 								border: 1,
-								borderColor: theme.palette.border.light,
+								borderColor: theme.palette.primary.lowContrast,
 								borderRadius: theme.shape.borderRadius,
 							},
 						}}

Client/src/Components/Breadcrumbs/index.jsx

@@ -28,12 +28,12 @@ const Breadcrumbs = ({ list }) => {
 			px={theme.spacing(2)}
 			py={theme.spacing(3.5)}
 			width="fit-content"
-			backgroundColor={theme.palette.background.fill}
+			backgroundColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
 			lineHeight="18px"
 			sx={{
 				"& .MuiBreadcrumbs-li:not(:last-of-type):hover a": {
-					backgroundColor: theme.palette.other.fill,
+					backgroundColor: theme.palette.primary.lowContrast,
 					opacity: 1,
 				},
 			}}

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

@@ -149,7 +149,7 @@ const CustomAreaChart = ({
 				/>
 
 				<CartesianGrid
-					stroke={theme.palette.border.light}
+					stroke={theme.palette.primary.lowContrast}
 					strokeWidth={1}
 					strokeOpacity={1}
 					fill="transparent"
@@ -180,7 +180,7 @@ const CustomAreaChart = ({
 				})}
 				{customTooltip ? (
 					<Tooltip
-						cursor={{ stroke: theme.palette.border.light }}
+						cursor={{ stroke: theme.palette.primary.lowContrast }}
 						content={customTooltip}
 						wrapperStyle={{ pointerEvents: "none" }}
 					/>

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

@@ -44,7 +44,7 @@ const BarChart = ({ checks = [] }) => {
 						position="relative"
 						width={theme.spacing(4.5)}
 						height="100%"
-						backgroundColor={theme.palette.border.light}
+						backgroundColor={theme.palette.primary.lowContrast}
 						sx={{
 							borderRadius: theme.spacing(1.5),
 						}}
@@ -116,7 +116,7 @@ const BarChart = ({ checks = [] }) => {
 									"& .MuiTooltip-tooltip": {
 										backgroundColor: theme.palette.secondary.main,
 										border: 1,
-										borderColor: theme.palette.border.dark,
+										borderColor: theme.palette.primary.lowContrast,
 										borderRadius: theme.shape.borderRadius,
 										boxShadow: theme.shape.boxShadow,
 										px: theme.spacing(4),

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

@@ -70,7 +70,7 @@ const CustomGauge = ({ progress = 0, radius = 70, strokeWidth = 15, threshold =
 			>
 				<circle
 					className="radial-chart-base"
-					stroke={theme.palette.background.fill}
+					stroke={theme.palette.primary.lowContrast}
 					strokeWidth={strokeWidth}
 					fill="none"
 					cx={totalSize / 2} // Center the circle

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

@@ -84,7 +84,7 @@ function Gauge({ progressValue, width = DEFAULT_WIDTH }) {
 							? theme.palette.primary.main
 							: theme.palette.percentage.uptimePoor
 					}
-					background={{ fill: theme.palette.background.fill }}
+					background={{ fill: theme.palette.primary.lowContrast }}
 					label={{
 						position: "center",
 						content: () => (

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

@@ -28,7 +28,7 @@ const CustomToolTip = ({ active, payload, label }) => {
 				sx={{
 					backgroundColor: theme.palette.background.main,
 					border: 1,
-					borderColor: theme.palette.border.dark,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					py: theme.spacing(2),
 					px: theme.spacing(4),
@@ -155,7 +155,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 				onMouseLeave={() => setIsHovered(false)}
 			>
 				<CartesianGrid
-					stroke={theme.palette.border.light}
+					stroke={theme.palette.primary.lowContrast}
 					strokeWidth={1}
 					strokeOpacity={1}
 					fill="transparent"
@@ -182,7 +182,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 					</linearGradient>
 				</defs>
 				<XAxis
-					stroke={theme.palette.border.dark}
+					stroke={theme.palette.primary.lowContrast}
 					dataKey="_id"
 					tick={<CustomTick />}
 					minTickGap={0}
@@ -192,7 +192,7 @@ const MonitorDetailsAreaChart = ({ checks }) => {
 					interval="equidistantPreserveStart"
 				/>
 				<Tooltip
-					cursor={{ stroke: theme.palette.border.light }}
+					cursor={{ stroke: theme.palette.primary.lowContrast }}
 					content={<CustomToolTip />}
 					wrapperStyle={{ pointerEvents: "none" }}
 				/>

Client/src/Components/Charts/Utils/chartUtils.jsx

@@ -120,7 +120,7 @@ export const InfrastructureTooltip = ({
 				sx={{
 					backgroundColor: theme.palette.background.main,
 					border: 1,
-					borderColor: theme.palette.border.dark,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					py: theme.spacing(2),
 					px: theme.spacing(4),
@@ -200,7 +200,7 @@ export const TemperatureTooltip = ({ active, payload, label, keys, dotColor }) =
 				sx={{
 					backgroundColor: theme.palette.background.main,
 					border: 1,
-					borderColor: theme.palette.border.dark,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					py: theme.spacing(2),
 					px: theme.spacing(4),

Client/src/Components/ConfigBox/index.jsx

@@ -8,7 +8,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 	backgroundColor: theme.palette.background.main,
 	border: 1,
 	borderStyle: "solid",
-	borderColor: theme.palette.border.light,
+	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: theme.spacing(2),
 	"& > *": {
 		paddingTop: theme.spacing(12),
@@ -18,7 +18,7 @@ const ConfigBox = styled(Stack)(({ theme }) => ({
 		flex: 0.7,
 		borderRight: 1,
 		borderRightStyle: "solid",
-		borderRightColor: theme.palette.border.light,
+		borderRightColor: theme.palette.primary.lowContrast,
 		paddingRight: theme.spacing(15),
 		paddingLeft: theme.spacing(15),
 	},

Client/src/Components/Dialog/genericDialog.jsx

@@ -24,7 +24,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					width: 400,
 					bgcolor: theme.palette.background.main,
 					border: 1,
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					boxShadow: 24,
 					p: theme.spacing(15),

Client/src/Components/Fallback/index.jsx

@@ -40,7 +40,7 @@ const Fallback = ({ title, checks, link = "/", isAdmin, vowelStart = false }) =>
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>

Client/src/Components/HttpStatusLabel/index.jsx

@@ -41,7 +41,7 @@ const HttpStatusLabel = ({ status, customStyles }) => {
 		},
 		default: {
 			dotColor: theme.palette.unresolved.main,
-			bgColor: theme.palette.unresolved.bg,
+			bgColor: theme.palette.primary.lowContrast,
 			borderColor: theme.palette.unresolved.light,
 		},
 	};

Client/src/Components/IconBox/index.jsx

@@ -48,7 +48,7 @@ const IconBox = styled(Box)(
 		position: "relative",
 		border: 1,
 		borderStyle: "solid",
-		borderColor: theme.palette.border.dark,
+		borderColor: theme.palette.primary.lowContrast,
 		borderRadius: borderRadius,
 		backgroundColor: theme.palette.background.accent,
 		"& svg": {

Client/src/Components/Inputs/Image/index.jsx

@@ -39,7 +39,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 							borderRadius: theme.shape.borderRadius,
 							borderColor: isDragging
 								? theme.palette.primary.main
-								: theme.palette.border.light,
+								: theme.palette.primary.lowContrast,
 							borderWidth: "2px",
 							transition: "0.2s",
 							"&:hover": {
@@ -86,7 +86,7 @@ const ImageField = ({ id, src, loading, onChange }) => {
 								sx={{
 									pointerEvents: "none",
 									borderRadius: theme.shape.borderRadius,
-									border: `solid ${theme.shape.borderThick}px ${theme.palette.border.light}`,
+									border: `solid ${theme.shape.borderThick}px ${theme.palette.primary.lowContrast}`,
 									boxShadow: theme.shape.boxShadow,
 								}}
 							>

Client/src/Components/Inputs/Search/index.jsx

@@ -95,12 +95,12 @@ const Search = ({
 						}}
 						sx={{
 							"& fieldset": {
-								borderColor: theme.palette.border.light,
+								borderColor: theme.palette.primary.lowContrast,
 								borderRadius: theme.shape.borderRadius,
 							},
 							"& .MuiOutlinedInput-root:hover:not(:has(input:focus)):not(:has(textarea:focus)) fieldset":
 								{
-									borderColor: theme.palette.border.light,
+									borderColor: theme.palette.primary.lowContrast,
 								},
 							"& .MuiOutlinedInput-root": {
 								paddingY: 0,
@@ -163,7 +163,7 @@ const Search = ({
 						},
 						"& .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'], & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true'].Mui-focused, & .MuiAutocomplete-listbox .MuiAutocomplete-option[aria-selected='true']:hover":
 							{
-								backgroundColor: theme.palette.background.fill,
+								backgroundColor: theme.palette.primary.lowContrast,
 							},
 						"& .MuiAutocomplete-noOptions": {
 							px: theme.spacing(6),

Client/src/Components/Inputs/Select/index.jsx

@@ -89,13 +89,13 @@ const Select = ({
 					minWidth: "125px",
 					"& fieldset": {
 						borderRadius: theme.shape.borderRadius,
-						borderColor: theme.palette.border.dark,
+						borderColor: theme.palette.primary.lowContrast,
 					},
 					"&:not(.Mui-focused):hover fieldset": {
-						borderColor: theme.palette.border.dark,
+						borderColor: theme.palette.primary.lowContrast,
 					},
 					"& svg path": {
-						fill: theme.palette.other.icon,
+						fill: theme.palette.primary.contrastText.tertiary,
 					},
 					...sx,
 				}}

Client/src/Components/Inputs/TextInput/Adornments/index.jsx

@@ -12,7 +12,7 @@ export const HttpAdornment = ({ https }) => {
 			alignItems="center"
 			height="100%"
 			sx={{
-				borderRight: `solid 1px ${theme.palette.border.dark}`,
+				borderRight: `solid 1px ${theme.palette.primary.lowContrast}`,
 				backgroundColor: theme.palette.background.accent,
 				pl: theme.spacing(6),
 			}}
@@ -41,7 +41,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
 				aria-label="toggle password visibility"
 				onClick={() => setFieldType(fieldType === "password" ? "text" : "password")}
 				sx={{
-					color: theme.palette.border.dark,
+					color: theme.palette.primary.lowContrast,
 					padding: theme.spacing(1),
 					"&:focus-visible": {
 						outline: `2px solid ${theme.palette.primary.main}`,

Client/src/Components/Label/index.jsx

@@ -87,7 +87,7 @@ const ColoredLabel = ({ label, color }) => {
 	const theme = useTheme();
 	// If an invalid color is passed, default to the labelGray color
 	if (typeof color !== "string" || !/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(color)) {
-		color = theme.palette.border.light;
+		color = theme.palette.primary.lowContrast;
 	}
 
 	// Calculate lighter shades for border and bg
@@ -143,11 +143,11 @@ const StatusLabel = ({ status, text, customStyles }) => {
 		pending: {
 			dotColor: theme.palette.primary.contrastText.secondary,
 			bgColor: theme.palette.background.main,
-			borderColor: theme.palette.border.dark,
+			borderColor: theme.palette.primary.lowContrast,
 		},
 		"cannot resolve": {
 			dotColor: theme.palette.unresolved.main,
-			bgColor: theme.palette.unresolved.bg,
+			bgColor: theme.palette.primary.lowContrast,
 			borderColor: theme.palette.unresolved.light,
 		},
 	};

Client/src/Components/Link/index.jsx

@@ -33,7 +33,7 @@ const Link = ({ level, label, url }) => {
 				":hover": {
 					color: theme.palette.primary.contrastText.tertiary,
 					textDecorationColor: theme.palette.primary.main,
-					backgroundColor: theme.palette.background.fill,
+					backgroundColor: theme.palette.primary.lowContrast,
 				},
 			},
 		},

Client/src/Components/ProgressBars/index.jsx

@@ -30,8 +30,8 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 				height: "fit-content",
 				borderRadius: theme.shape.borderRadius,
 				border: 1,
-				borderColor: theme.palette.border.light,
-				backgroundColor: theme.palette.background.fill,
+				borderColor: theme.palette.primary.lowContrast,
+				backgroundColor: theme.palette.primary.lowContrast,
 				"&:has(.input-error)": {
 					borderColor: theme.palette.error.main,
 					backgroundColor: theme.palette.error.dark,
@@ -60,7 +60,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 							height: 30,
 							minWidth: 30,
 							border: 1,
-							borderColor: theme.palette.border.dark,
+							borderColor: theme.palette.primary.lowContrast,
 							borderRadius: 2,
 							backgroundColor: theme.palette.background.main,
 							"& svg": {
@@ -71,7 +71,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 								width: 23,
 								height: 23,
 								"& path": {
-									fill: theme.palette.other.icon,
+									fill: theme.palette.primary.contrastText.tertiary,
 								},
 							},
 						}}
@@ -148,7 +148,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 								height: "10px",
 								borderRadius: theme.shape.borderRadius,
 								maxWidth: "500px",
-								backgroundColor: theme.palette.border.light,
+								backgroundColor: theme.palette.primary.lowContrast,
 							}}
 						/>
 					</Box>

Client/src/Components/Sidebar/index.jsx

@@ -166,7 +166,7 @@ function Sidebar() {
 			gap={theme.spacing(6)}
 			sx={{
 				border: 1,
-				borderColor: theme.palette.border.light,
+				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: theme.shape.borderRadius,
 				backgroundColor: theme.palette.background.main,
 				"& .selected-path, & .MuiListItemButton-root:hover": {
@@ -223,9 +223,9 @@ function Sidebar() {
 						top: 60,
 						right: 0,
 						transform: `translate(50%, 0)`,
-						backgroundColor: theme.palette.background.fill,
+						backgroundColor: theme.palette.primary.lowContrast,
 						border: 1,
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						p: theme.spacing(2.5),
 						"& svg": {
 							width: theme.spacing(8),
@@ -236,8 +236,8 @@ function Sidebar() {
 						},
 						"&:focus": { outline: "none" },
 						"&:hover": {
-							backgroundColor: theme.palette.border.light,
-							borderColor: theme.palette.border.light,
+							backgroundColor: theme.palette.primary.lowContrast,
+							borderColor: theme.palette.primary.lowContrast,
 						},
 					}}
 					onClick={() => {
@@ -399,7 +399,7 @@ function Sidebar() {
 												opacity: 0.9,
 												"& svg": {
 													"& path": {
-														stroke: theme.palette.other.icon,
+														stroke: theme.palette.primary.contrastText.tertiary,
 														strokeWidth: 1.1,
 													},
 												},
@@ -474,7 +474,7 @@ function Sidebar() {
 														left: "-7px",
 														height: "100%",
 														borderLeft: 1,
-														borderLeftColor: theme.palette.other.line,
+														borderLeftColor: theme.palette.primary.lowContrast,
 													},
 													"&:last-child::before": {
 														height: "50%",
@@ -487,7 +487,7 @@ function Sidebar() {
 														height: "3px",
 														width: "3px",
 														borderRadius: "50%",
-														backgroundColor: theme.palette.other.line,
+														backgroundColor: theme.palette.primary.lowContrast,
 													},
 													"&.selected-path::after": {
 														backgroundColor: theme.palette.primary.contrastText.tertiary,
@@ -580,7 +580,7 @@ function Sidebar() {
 											height: "22px",
 										},
 										"& svg path": {
-											stroke: theme.palette.other.icon,
+											stroke: theme.palette.primary.contrastText.tertiary,
 										},
 									}}
 									onClick={(event) => openPopup(event, "logout")}
@@ -647,7 +647,7 @@ function Sidebar() {
 							borderRadius: theme.shape.borderRadius,
 							pl: theme.spacing(4),
 							"& svg path": {
-								stroke: theme.palette.other.icon,
+								stroke: theme.palette.primary.contrastText.tertiary,
 							},
 						}}
 					>

Client/src/Components/StatBox/index.jsx

@@ -36,7 +36,7 @@ const StatBox = ({ heading, subHeading, sx }) => {
 				width: 225,
 				border: 1,
 				borderStyle: "solid",
-				borderColor: theme.palette.border.light,
+				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: 4,
 				backgroundColor: theme.palette.background.main,
 				background: `linear-gradient(340deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -360,7 +360,7 @@ const ProfilePanel = () => {
 				aria-hidden="true"
 				sx={{
 					marginY: theme.spacing(20),
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 				}}
 			/>
 			{!user.role.includes("demo") && (

Client/src/Pages/Account/index.jsx

@@ -58,7 +58,7 @@ const Account = ({ open = "profile" }) => {
 			px={theme.spacing(20)}
 			py={theme.spacing(12)}
 			border={1}
-			borderColor={theme.palette.border.light}
+			borderColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
 			backgroundColor={theme.palette.background.main}
 		>
@@ -66,7 +66,7 @@ const Account = ({ open = "profile" }) => {
 				<Box
 					sx={{
 						borderBottom: 1,
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
 					}}
 				>
@@ -94,11 +94,11 @@ const Account = ({ open = "profile" }) => {
 									marginRight: theme.spacing(8),
 									borderBottom: "2px solid transparent",
 									"&:focus": {
-										borderBottom: `2px solid ${theme.palette.border.light}`,
+										borderBottom: `2px solid ${theme.palette.primary.lowContrast}`,
 									},
 
 									"&:hover": {
-										borderBottom: `2px solid ${theme.palette.border.light}`,
+										borderBottom: `2px solid ${theme.palette.primary.lowContrast}`,
 									},
 								}}
 							/>

Client/src/Pages/Auth/CheckEmail.jsx

@@ -102,7 +102,7 @@ const CheckEmail = () => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -129,7 +129,7 @@ const CheckEmail = () => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Auth/ForgotPassword.jsx

@@ -104,7 +104,7 @@ const ForgotPassword = () => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -131,7 +131,7 @@ const ForgotPassword = () => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Auth/Login/Login.jsx

@@ -153,7 +153,7 @@ const Login = () => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -181,7 +181,7 @@ const Login = () => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Auth/NewPasswordConfirmed.jsx

@@ -38,7 +38,7 @@ const NewPasswordConfirmed = () => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -65,7 +65,7 @@ const NewPasswordConfirmed = () => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Auth/Register/Register.jsx

@@ -50,7 +50,7 @@ const LandingPage = ({ isSuperAdmin, onSignup }) => {
 							"& svg": {
 								mr: theme.spacing(4),
 								"& path": {
-									stroke: theme.palette.other.icon,
+									stroke: theme.palette.primary.contrastText.tertiary,
 								},
 							},
 							"&:focus-visible": {
@@ -293,7 +293,7 @@ const Register = ({ isSuperAdmin }) => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -320,7 +320,7 @@ const Register = ({ isSuperAdmin }) => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Auth/SetNewPassword.jsx

@@ -83,7 +83,7 @@ const SetNewPassword = () => {
 				className="background-pattern-svg"
 				sx={{
 					"& svg g g:last-of-type path": {
-						stroke: theme.palette.border.light,
+						stroke: theme.palette.primary.lowContrast,
 					},
 				}}
 			>
@@ -110,7 +110,7 @@ const SetNewPassword = () => {
 					"& > .MuiStack-root": {
 						border: 1,
 						borderRadius: theme.spacing(5),
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						backgroundColor: theme.palette.background.main,
 						padding: {
 							xs: theme.spacing(12),

Client/src/Pages/Incidents/IncidentTable/index.jsx

@@ -130,7 +130,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 
 	let sharedStyles = {
 		border: 1,
-		borderColor: theme.palette.border.light,
+		borderColor: theme.palette.primary.lowContrast,
 		borderRadius: theme.shape.borderRadius,
 		backgroundColor: theme.palette.background.main,
 		p: theme.spacing(30),

Client/src/Pages/Incidents/index.jsx

@@ -102,7 +102,7 @@ const Incidents = () => {
 							sx={{
 								ml: "auto",
 								"& .MuiButtonBase-root, & .MuiButtonBase-root:hover": {
-									borderColor: theme.palette.border.light,
+									borderColor: theme.palette.primary.lowContrast,
 								},
 							}}
 						>

Client/src/Pages/Infrastructure/Details/index.jsx

@@ -112,7 +112,7 @@ const BaseBox = ({ children, sx = {} }) => {
 				backgroundColor: theme.palette.background.main,
 				border: 1,
 				borderStyle: "solid",
-				borderColor: theme.palette.border.light,
+				borderColor: theme.palette.primary.lowContrast,
 				...sx,
 			}}
 		>
@@ -156,7 +156,7 @@ const GaugeBox = ({ value, heading, metricOne, valueOne, metricTwo, valueTwo })
 				<Box
 					sx={{
 						width: "100%",
-						borderTop: `1px solid ${theme.palette.border.light}`,
+						borderTop: `1px solid ${theme.palette.primary.lowContrast}`,
 					}}
 				>
 					<Stack
@@ -665,7 +665,7 @@ const InfrastructureDetails = () => {
 				<Empty
 					styles={{
 						border: 1,
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: theme.shape.borderRadius,
 						backgroundColor: theme.palette.background.main,
 						p: theme.spacing(30),

Client/src/Pages/Infrastructure/components/Menu/index.jsx

@@ -83,7 +83,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 						outline: "none",
 					},
 					"& svg path": {
-						stroke: theme.palette.other.icon,
+						stroke: theme.palette.primary.contrastText.tertiary,
 					},
 				}}
 				ref={anchor}

Client/src/Pages/Infrastructure/components/TablePagination/index.jsx

@@ -105,7 +105,7 @@ function Pagination({
 					},
 					"& .MuiSelect-select": {
 						border: 1,
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: theme.shape.borderRadius,
 					},
 				}}

Client/src/Pages/Infrastructure/index.jsx

@@ -156,7 +156,7 @@ function Infrastructure() {
 					? theme.palette.percentage.uptimeFair
 					: monitor.uptimePercentage < 0.75
 						? theme.palette.percentage.uptimeGood
-						: theme.palette.percentage.uptimeExcellent;
+						: theme.palette.success.accent;
 		return {
 			id: monitor._id,
 			name: monitor.name,
@@ -179,7 +179,7 @@ function Infrastructure() {
 				':has(> [class*="fallback__"])': {
 					position: "relative",
 					border: 1,
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
 					backgroundColor: theme.palette.background.main,
@@ -231,7 +231,7 @@ function Infrastructure() {
 								className="current-monitors-counter"
 								color={theme.palette.primary.contrastText.main}
 								border={1}
-								borderColor={theme.palette.border.light}
+								borderColor={theme.palette.primary.lowContrast}
 								backgroundColor={theme.palette.background.accent}
 							>
 								{totalMonitors}
@@ -313,7 +313,7 @@ function Infrastructure() {
 													<IconButton
 														sx={{
 															"& svg path": {
-																stroke: theme.palette.other.icon,
+																stroke: theme.palette.primary.contrastText.tertiary,
 															},
 														}}
 													>

Client/src/Pages/Integrations/index.jsx

@@ -33,7 +33,7 @@ const IntegrationsComponent = ({ icon, header, info, onClick }) => {
 				pl={theme.spacing(12)}
 				height="100%"
 				border={1}
-				borderColor={theme.palette.border.light}
+				borderColor={theme.palette.primary.lowContrast}
 				borderRadius={theme.shape.borderRadius}
 				backgroundColor={theme.palette.background.main}
 			>

Client/src/Pages/Maintenance/CreateMaintenance/index.jsx

@@ -379,12 +379,12 @@ const CreateMaintenance = () => {
 													pr: theme.spacing(5),
 												},
 												"& fieldset": {
-													borderColor: theme.palette.border.dark,
+													borderColor: theme.palette.primary.lowContrast,
 													borderRadius: theme.shape.borderRadius,
 												},
 												"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 													{
-														borderColor: theme.palette.border.dark,
+														borderColor: theme.palette.primary.lowContrast,
 													},
 											},
 										},
@@ -394,7 +394,7 @@ const CreateMaintenance = () => {
 												py: 0,
 												mr: 0,
 												"& path": {
-													stroke: theme.palette.other.icon,
+													stroke: theme.palette.primary.contrastText.tertiary,
 													strokeWidth: 1.1,
 												},
 												"&:hover": { backgroundColor: "transparent" },
@@ -444,12 +444,12 @@ const CreateMaintenance = () => {
 												pl: theme.spacing(5),
 											},
 											"& fieldset": {
-												borderColor: theme.palette.border.dark,
+												borderColor: theme.palette.primary.lowContrast,
 												borderRadius: theme.shape.borderRadius,
 											},
 											"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
 												{
-													borderColor: theme.palette.border.dark,
+													borderColor: theme.palette.primary.lowContrast,
 												},
 										},
 									},

Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -95,7 +95,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 						outline: "none",
 					},
 					"& svg path": {
-						stroke: theme.palette.other.icon,
+						stroke: theme.palette.primary.contrastText.tertiary,
 					},
 				}}
 			>

Client/src/Pages/Maintenance/MaintenanceTable/index.jsx

@@ -336,7 +336,7 @@ const MaintenanceTable = ({
 						},
 						"& .MuiSelect-select": {
 							border: 1,
-							borderColor: theme.palette.border.light,
+							borderColor: theme.palette.primary.lowContrast,
 							borderRadius: theme.shape.borderRadius,
 						},
 					}}

Client/src/Pages/Maintenance/index.jsx

@@ -51,7 +51,7 @@ const Maintenance = () => {
 				':has(> [class*="fallback__"])': {
 					position: "relative",
 					border: 1,
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
 					backgroundColor: theme.palette.background.main,

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -276,7 +276,7 @@ const PageSpeedConfigure = () => {
 										"& svg": {
 											mr: theme.spacing(2),
 											"& path": {
-												stroke: theme.palette.other.icon,
+												stroke: theme.palette.primary.contrastText.tertiary,
 												strokeWidth: 0.1,
 											},
 										},

Client/src/Pages/PageSpeed/Details/Charts/AreaChart.jsx

@@ -56,7 +56,7 @@ const CustomToolTip = ({ active, payload, label, config }) => {
 				sx={{
 					backgroundColor: theme.palette.background.main,
 					border: 1,
-					borderColor: theme.palette.border.dark,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					py: theme.spacing(2),
 					px: theme.spacing(4),
@@ -238,14 +238,14 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
 				onMouseLeave={() => setIsHovered(false)}
 			>
 				<CartesianGrid
-					stroke={theme.palette.border.light}
+					stroke={theme.palette.primary.lowContrast}
 					strokeWidth={1}
 					strokeOpacity={1}
 					fill="transparent"
 					vertical={false}
 				/>
 				<XAxis
-					stroke={theme.palette.border.dark}
+					stroke={theme.palette.primary.lowContrast}
 					dataKey="createdAt"
 					tick={<CustomTick />}
 					axisLine={false}
@@ -255,7 +255,7 @@ const PagespeedDetailsAreaChart = ({ data, interval, metrics }) => {
 					interval="equidistantPreserveStart"
 				/>
 				<Tooltip
-					cursor={{ stroke: theme.palette.border.light }}
+					cursor={{ stroke: theme.palette.primary.lowContrast }}
 					content={<CustomToolTip config={filteredConfig} />}
 				/>
 				<defs>

Client/src/Pages/PageSpeed/Details/Charts/PieChart.jsx

@@ -148,7 +148,7 @@ const PieChart = ({ audits }) => {
 			stroke: theme.palette.unresolved.main,
 			strokeBg: theme.palette.unresolved.light,
 			text: theme.palette.unresolved.main,
-			bg: theme.palette.unresolved.bg,
+			bg: theme.palette.primary.lowContrast,
 		};
 	};
 

Client/src/Pages/PageSpeed/Details/index.jsx

@@ -175,7 +175,7 @@ const PageSpeedDetails = () => {
 									"& svg": {
 										mr: theme.spacing(3),
 										"& path": {
-											stroke: theme.palette.other.icon,
+											stroke: theme.palette.primary.contrastText.tertiary,
 										},
 									},
 								}}
@@ -393,7 +393,7 @@ const PageSpeedDetails = () => {
 											gap={theme.spacing(4)}
 											p={theme.spacing(3)}
 											border={1}
-											borderColor={theme.palette.border.light}
+											borderColor={theme.palette.primary.lowContrast}
 											borderRadius={4}
 										>
 											<Box>

Client/src/Pages/PageSpeed/Details/styled.jsx

@@ -6,7 +6,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	minWidth: 250,
 	border: 1,
 	borderStyle: "solid",
-	borderColor: theme.palette.border.light,
+	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: 4,
 	borderTopRightRadius: 16,
 	borderBottomRightRadius: 16,
@@ -31,7 +31,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 		padding: theme.spacing(8),
 		borderLeft: 1,
 		borderLeftStyle: "solid",
-		borderLeftColor: theme.palette.border.light,
+		borderLeftColor: theme.palette.primary.lowContrast,
 		borderRadius: 16,
 		backgroundColor: theme.palette.background.main,
 		background: `linear-gradient(325deg, ${theme.palette.background.accent} 20%, ${theme.palette.background.main} 45%)`,

Client/src/Pages/PageSpeed/card.jsx

@@ -25,7 +25,7 @@ const CustomToolTip = ({ payload }) => {
 			sx={{
 				backgroundColor: theme.palette.background.main,
 				border: 1,
-				borderColor: theme.palette.border.dark,
+				borderColor: theme.palette.primary.lowContrast,
 				borderRadius: theme.shape.borderRadius,
 				py: theme.spacing(2),
 				px: theme.spacing(4),
@@ -134,14 +134,14 @@ const PagespeedAreaChart = ({ data, status }) => {
 				onMouseLeave={() => setIsHovered(false)}
 			>
 				<CartesianGrid
-					stroke={theme.palette.border.light}
+					stroke={theme.palette.primary.lowContrast}
 					strokeWidth={1}
 					strokeOpacity={1}
 					fill="transparent"
 					vertical={false}
 				/>
 				<Tooltip
-					cursor={{ stroke: theme.palette.border.light }}
+					cursor={{ stroke: theme.palette.primary.lowContrast }}
 					content={<CustomToolTip />}
 				/>
 				<defs>
@@ -215,7 +215,7 @@ const Card = ({ monitor }) => {
 				p={theme.spacing(8)}
 				onClick={() => navigate(`/pagespeed/${monitor._id}`)}
 				border={1}
-				borderColor={theme.palette.border.light}
+				borderColor={theme.palette.primary.lowContrast}
 				borderRadius={theme.shape.borderRadius}
 				backgroundColor={theme.palette.background.main}
 				sx={{
@@ -278,7 +278,7 @@ const Card = ({ monitor }) => {
 					px={theme.spacing(4)}
 					borderTop={1}
 					borderRight={1}
-					borderColor={theme.palette.border.light}
+					borderColor={theme.palette.primary.lowContrast}
 					backgroundColor={theme.palette.background.accent}
 					sx={{
 						pointerEvents: "none",

Client/src/Pages/PageSpeed/index.jsx

@@ -68,7 +68,7 @@ const PageSpeed = () => {
 				':has(> [class*="fallback__"])': {
 					position: "relative",
 					border: 1,
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
 					backgroundColor: theme.palette.background.main,
@@ -115,7 +115,7 @@ const PageSpeed = () => {
 							className="current-monitors-counter"
 							color={theme.palette.primary.contrastText.main}
 							border={1}
-							borderColor={theme.palette.border.light}
+							borderColor={theme.palette.primary.lowContrast}
 							backgroundColor={theme.palette.background.accent}
 						>
 							{monitorCount}

Client/src/Pages/Status/index.jsx

@@ -12,7 +12,7 @@ const Status = () => {
 				':has(> [class*="fallback__"])': {
 					position: "relative",
 					border: 1,
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					borderRadius: theme.shape.borderRadius,
 					borderStyle: "dashed",
 					backgroundColor: theme.palette.background.main,

Client/src/Pages/Uptime/Details/Charts/DownBarChart.jsx

@@ -31,7 +31,7 @@ const DownBarChart = memo(({ stats, type, onBarHover }) => {
 				}}
 			>
 				<XAxis
-					stroke={theme.palette.border.dark}
+					stroke={theme.palette.primary.lowContrast}
 					height={15}
 					tick={false}
 					label={

Client/src/Pages/Uptime/Details/Charts/UpBarChart.jsx

@@ -38,7 +38,7 @@ const UpBarChart = memo(({ stats, type, onBarHover }) => {
 				}}
 			>
 				<XAxis
-					stroke={theme.palette.border.dark}
+					stroke={theme.palette.primary.lowContrast}
 					height={15}
 					tick={false}
 					label={

Client/src/Pages/Uptime/Details/styled.jsx

@@ -8,7 +8,7 @@ export const ChartBox = styled(Stack)(({ theme }) => ({
 	padding: theme.spacing(8),
 	border: 1,
 	borderStyle: "solid",
-	borderColor: theme.palette.border.light,
+	borderColor: theme.palette.primary.lowContrast,
 	borderRadius: 4,
 	backgroundColor: theme.palette.background.main,
 	"& h2": {

Client/src/Pages/Uptime/Home/CurrentMonitoring/index.jsx

@@ -32,7 +32,7 @@ const CurrentMonitoring = ({ totalMonitors, monitors, isAdmin, handlePause }) =>
 					className="current-monitors-counter"
 					color={theme.palette.primary.contrastText.main}
 					border={1}
-					borderColor={theme.palette.border.light}
+					borderColor={theme.palette.primary.lowContrast}
 					backgroundColor={theme.palette.background.accent}
 				>
 					{totalMonitors}

Client/src/Pages/Uptime/Home/StatusBox.jsx

@@ -12,7 +12,7 @@ const StatusBox = ({ title, value }) => {
 		position: "absolute",
 		right: 8,
 		opacity: 0.5,
-		"& svg path": { stroke: theme.palette.other.icon },
+		"& svg path": { stroke: theme.palette.primary.contrastText.tertiary },
 	};
 
 	let color;
@@ -45,7 +45,7 @@ const StatusBox = ({ title, value }) => {
 			position="relative"
 			flex={1}
 			border={1}
-			borderColor={theme.palette.border.light}
+			borderColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
 			backgroundColor={theme.palette.background.main}
 			p={theme.spacing(8)}

Client/src/Pages/Uptime/Home/UptimeTable/index.jsx

@@ -171,7 +171,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 					>
 						<CircularProgress
 							sx={{
-								color: theme.palette.other.icon,
+								color: theme.palette.primary.contrastText.tertiary,
 							}}
 						/>
 					</Box>
@@ -231,7 +231,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 						{monitors.length > 0 ? (
 							monitors.map((monitor) => {
 								let uptimePercentage = "";
-								let percentageColor = theme.palette.percentage.uptimeExcellent;
+								let percentageColor = theme.palette.success.accent;
 
 								// Determine uptime percentage and color based on the monitor's uptimePercentage value
 								if (monitor.uptimePercentage !== undefined) {
@@ -247,7 +247,7 @@ const MonitorTable = ({ isAdmin, filter, setIsSearching, isSearching, handlePaus
 												? theme.palette.percentage.uptimeFair
 												: monitor.uptimePercentage < 0.75
 													? theme.palette.percentage.uptimeGood
-													: theme.palette.percentage.uptimeExcellent;
+													: theme.palette.success.accent;
 								}
 
 								const params = {

Client/src/Pages/Uptime/Home/actionsMenu.jsx

@@ -90,7 +90,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateRowCallback, pauseCallback }) =>
 						outline: "none",
 					},
 					"& svg path": {
-						stroke: theme.palette.other.icon,
+						stroke: theme.palette.primary.contrastText.tertiary,
 					},
 				}}
 			>

Client/src/Pages/Uptime/Home/fallback.jsx

@@ -20,7 +20,7 @@ const Fallback = ({ isAdmin }) => {
 			gap={theme.spacing(2)}
 			border={1}
 			borderRadius={theme.shape.borderRadius}
-			borderColor={theme.palette.border.light}
+			borderColor={theme.palette.primary.lowContrast}
 			color={theme.palette.primary.contrastText.secondary}
 		>
 			<Box pb={theme.spacing(20)}>

Client/src/Utils/Theme/constants.js

@@ -1,3 +1,5 @@
+import { light } from "@mui/material/styles/createPalette";
+
 const typographyBase = 14;
 
 /* TODO
@@ -257,14 +259,12 @@ const semanticColors = {
 const newColors = {
 	offWhite: "#FEFEFE",
 	offBlack: "#131315",
-	gray300: "#E3E3E3",
-	gray600: "#A2A3A3",
+	gray200: "#E3E3E3",
+	gray500: "#A2A3A3",
 	blueGray50: "#E8F0FE",
 	blueGray500: "#475467",
 	blueGray600: "#344054",
 	blueGray800: "#1C2130",
-	gray200: "#E3E3E3",
-	gray500: "#A2A3A3",
 	blueBlueWave: "#1570EF",
 	green100: "#8CFFCB",
 	green200: "#4B9B77",
@@ -303,13 +303,17 @@ const newSemanticColors = {
 			},
 			secondary: {
 				light: newColors.blueGray600,
-				dark: newColors.gray300,
+				dark: newColors.gray200,
 			},
 			tertiary: {
 				light: newColors.blueGray500,
 				dark: newColors.gray500,
 			},
 		},
+		lowContrast: {
+			light: newColors.gray200,
+			dark: newColors.blueGray600,
+		},
 	},
 	/* 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: {
@@ -376,6 +380,18 @@ const newSemanticColors = {
 			dark: paletteColors.gray850,
 		},
 	},
+	other: {
+		grid: {
+			light: paletteColors.gray300,
+			dark: paletteColors.gray600,
+		},
+	},
+	unresolved: {
+		main: {
+			light: paletteColors.blue700,
+			dark: paletteColors.purple300,
+		},
+	},
 };
 
 /* TODO proximo passo: quebrar o projeto */

Client/src/Utils/Theme/darkTheme.js

@@ -57,7 +57,7 @@ export default darkTheme;
 
 // const palette = {
 // 	action: {
-// 		disabled: border.dark.disabled,
+// 		disabled: primary.lowContrast.disabled,
 // 	},
 // 	primary: { main: primary.main.dark },
 // 	secondary: {
@@ -128,7 +128,7 @@ export default darkTheme;
 // 	},
 // 	border: {
 // 		light: border.light.dark,
-// 		dark: border.dark.dark,
+// 		dark: primary.lowContrast.dark,
 // 	},
 // 	info: {
 // 		text: text.primary.dark,

Client/src/Utils/Theme/globalTheme.js

@@ -48,11 +48,11 @@ const baseTheme = (palette) => ({
 							props: (props) => props.variant === "group",
 							style: {
 								/* color: theme.palette.secondary.contrastText, */
-								color: theme.palette.neutral.contrastText,
-								backgroundColor: theme.palette.background.main,
+								color: theme.palette.primary.contrastText.main,
+								backgroundColor: theme.palette.primary.main,
 								border: 1,
 								borderStyle: "solid",
-								borderColor: theme.palette.border.light,
+								borderColor: theme.palette.primary.lowContrast,
 							},
 						},
 						{
@@ -67,7 +67,7 @@ const baseTheme = (palette) => ({
 							style: {
 								border: 1,
 								borderStyle: "solid",
-								borderColor: theme.palette.border.light,
+								borderColor: theme.palette.primary.lowContrast,
 							},
 						},
 						{
@@ -118,7 +118,7 @@ const baseTheme = (palette) => ({
 					padding: 4,
 					transition: "none",
 					"&:hover": {
-						backgroundColor: theme.palette.background.fill,
+						backgroundColor: theme.palette.primary.lowContrast,
 					},
 				}),
 			},
@@ -131,7 +131,7 @@ const baseTheme = (palette) => ({
 						padding: 0,
 						border: 1,
 						borderStyle: "solid",
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: 4,
 						boxShadow: shadow,
 						backgroundColor: theme.palette.background.main,
@@ -166,7 +166,7 @@ const baseTheme = (palette) => ({
 					minWidth: 100,
 					"&:hover, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected.Mui-focusVisible":
 						{
-							backgroundColor: theme.palette.background.fill,
+							backgroundColor: theme.palette.primary.lowContrast,
 						},
 				}),
 			},
@@ -174,7 +174,7 @@ const baseTheme = (palette) => ({
 		MuiTableCell: {
 			styleOverrides: {
 				root: ({ theme }) => ({
-					borderBottomColor: theme.palette.border.light,
+					borderBottomColor: theme.palette.primary.lowContrast,
 				}),
 			},
 		},
@@ -191,7 +191,7 @@ const baseTheme = (palette) => ({
 					backgroundColor: theme.palette.background.main,
 					border: 1,
 					borderStyle: "solid",
-					borderColor: theme.palette.border.light,
+					borderColor: theme.palette.primary.lowContrast,
 					"& button": {
 						color: theme.palette.primary.contrastText.tertiary,
 						borderRadius: 4,
@@ -199,7 +199,7 @@ const baseTheme = (palette) => ({
 					"& li:first-of-type button, & li:last-of-type button": {
 						border: 1,
 						borderStyle: "solid",
-						borderColor: theme.palette.border.light,
+						borderColor: theme.palette.primary.lowContrast,
 					},
 				}),
 			},
@@ -208,7 +208,7 @@ const baseTheme = (palette) => ({
 			styleOverrides: {
 				root: ({ theme }) => ({
 					"&:not(.MuiPaginationItem-ellipsis):hover, &.Mui-selected": {
-						backgroundColor: theme.palette.background.fill,
+						backgroundColor: theme.palette.primary.lowContrast,
 					},
 				}),
 			},
@@ -216,7 +216,7 @@ const baseTheme = (palette) => ({
 		MuiSkeleton: {
 			styleOverrides: {
 				root: ({ theme }) => ({
-					backgroundColor: theme.palette.unresolved.bg,
+					backgroundColor: theme.palette.primary.lowContrast,
 				}),
 			},
 		},
@@ -224,7 +224,7 @@ const baseTheme = (palette) => ({
 			styleOverrides: {
 				root: ({ theme }) => ({
 					"& fieldset": {
-						borderColor: theme.palette.border.dark,
+						borderColor: theme.palette.primary.lowContrast,
 						borderRadius: theme.shape.borderRadius,
 					},
 					"& .MuiInputBase-input": {

Client/src/Utils/Theme/lightTheme.js

@@ -134,13 +134,13 @@ Next step: check if all keys here are being used in the codebase. e.g.: Search c
 // 	},
 // 	border: {
 // 		light: border.light.light,
-// 		dark: border.dark.light,
+// 		dark: primary.lowContrast.light,
 // 	},
 // 	info: {
 // 		text: text.primary.light,
 // 		main: text.tertiary.light,
 // 		bg: background.main.light,
 // 		light: background.main.light,
-// 		border: border.dark.light,
+// 		border: primary.lowContrast.light,
 // 	},
 // };