Merge branch 'develop' into 1229-add-a-placeholder-if-there-are-no-infrastructure-monitors

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.background.fill}
+						backgroundColor={theme.palette.border.light}
 						sx={{
 							borderRadius: theme.spacing(1.5),
 						}}

Client/src/Components/HttpStatusLabel/index.jsx

@@ -23,7 +23,7 @@ const handleStatusCode = (status) => {
 };
 
 const getRoundedStatusCode = (status) => {
-		return Math.floor(status / 100) * 100;
+	return Math.floor(status / 100) * 100;
 };
 
 const HttpStatusLabel = ({ status, customStyles }) => {
@@ -31,12 +31,12 @@ const HttpStatusLabel = ({ status, customStyles }) => {
 	const colors = {
 		400: {
 			dotColor: theme.palette.warning.main,
-			bgColor: theme.palette.warning.bg,
+			bgColor: theme.palette.warning.dark,
 			borderColor: theme.palette.warning.light,
 		},
 		500: {
 			dotColor: theme.palette.error.main,
-			bgColor: theme.palette.error.bg,
+			bgColor: theme.palette.error.dark,
 			borderColor: theme.palette.error.light,
 		},
 		default: {
@@ -46,11 +46,10 @@ const HttpStatusLabel = ({ status, customStyles }) => {
 		},
 	};
 
-	const statusCode = handleStatusCode(status)
+	const statusCode = handleStatusCode(status);
 
 	const { borderColor, bgColor, dotColor } =
 		colors[getRoundedStatusCode(statusCode)] || colors.default;
-
 	return (
 		<BaseLabel
 			label={String(statusCode)}
@@ -65,7 +64,7 @@ const HttpStatusLabel = ({ status, customStyles }) => {
 };
 
 HttpStatusLabel.propTypes = {
-	status:PropTypes.number,
+	status: PropTypes.number,
 	customStyles: PropTypes.object,
 };
 

Client/src/Pages/Account/index.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useNavigate } from "react-router";
 import { useSelector } from "react-redux";

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

@@ -103,7 +103,7 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 							"& ul": { p: theme.spacing(2.5) },
 							"& li": { m: 0 },
 							"& li:last-of-type": {
-								color: theme.palette.error.contrastText,
+								color: theme.palette.error.main,
 							},
 						},
 					},

Client/src/Pages/Infrastructure/index.jsx

@@ -190,10 +190,7 @@ function Infrastructure() {
 			{isActuallyLoading ? (
 				<SkeletonLayout />
 			) : monitorState.monitors?.length !== 0 ? (
-				<Stack
-					component="main"
-					style={{ width: "100%", gap: "1rem" }}
-				>
+				<Stack gap={theme.spacing(8)}>
 					<Breadcrumbs list={BREADCRUMBS} />
 					<Stack
 						direction="row"

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

@@ -114,7 +114,7 @@ const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 							"& ul": { p: theme.spacing(2.5) },
 							"& li": { m: 0 },
 							"& li:last-of-type": {
-								color: theme.palette.error.contrastText,
+								color: theme.palette.error.main,
 							},
 						},
 					},

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

@@ -109,7 +109,7 @@ const ActionsMenu = ({ monitor, isAdmin, updateCallback }) => {
 							"& ul": { p: theme.spacing(2.5) },
 							"& li": { m: 0 },
 							"& li:last-of-type": {
-								color: theme.palette.error.contrastText,
+								color: theme.palette.error.main,
 							},
 						},
 					},

Client/src/Pages/Monitors/Home/index.jsx

@@ -20,8 +20,6 @@ const Monitors = ({ isAdmin }) => {
 	const authState = useSelector((state) => state.auth);
 	const dispatch = useDispatch({});
 
-	console.log({ monitorState });
-
 	useEffect(() => {
 		dispatch(getUptimeMonitorsByTeamId(authState.authToken));
 	}, [authState.authToken, dispatch]);

Client/src/Utils/Theme/constants.js

@@ -206,12 +206,14 @@ const semanticColors = {
 		light: {
 			light: paletteColors.gray200,
 			dark: paletteColors.gray800,
+			/* TODO this should live in a different key (border.disabled.light and .dark) */
 			disabled: paletteColors.gray150,
 		},
 		dark: {
 			light: paletteColors.gray200,
 			dark: paletteColors.gray750,
-			disabled: paletteColors.gray800,
+			/* TODO this should live in a different key (border.disabled.light and .dark) */
+			disabled: paletteColors.gray150,
 		},
 	},
 	unresolved: {

Client/src/Utils/Theme/lightTheme.js

@@ -28,6 +28,7 @@ const {
 } = colors;
 
 const palette = {
+	/* TODO check if we need the addition of a new color gray150 for this. Also, this color would probably fit for primary contrastText */
 	action: {
 		disabled: border.light.disabled,
 	},

Server/package-lock.json

@@ -2179,9 +2179,10 @@
 			}
 		},
 		"node_modules/dotenv": {
-			"version": "16.4.5",
-			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
-			"integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+			"version": "16.4.6",
+			"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.6.tgz",
+			"integrity": "sha512-JhcR/+KIjkkjiU8yEpaB/USlzVi3i5whwOjpIRNGi9svKEXZSe+Qp6IWAjFjv+2GViAoDRCUv/QLNziQxsLqDg==",
+			"license": "BSD-2-Clause",
 			"engines": {
 				"node": ">=12"
 			},