diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 43c43f3c8..71eb2c755 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,17 +1,13 @@
.monitors h1.MuiTypography-root {
+ font-size: var(--env-var-font-size-large-plus);
color: var(--env-var-color-1);
font-weight: 500;
}
.monitors h2.MuiTypography-root {
+ font-size: var(--env-var-font-size-large);
color: var(--env-var-color-5);
font-weight: 500;
}
-.monitors h1.MuiTypography-root {
- font-size: var(--env-var-font-size-large-plus);
-}
-.monitors h2.MuiTypography-root {
- font-size: var(--env-var-font-size-large);
-}
.monitors p.MuiTypography-root {
font-size: var(--env-var-font-size-medium);
color: var(--env-var-color-5);
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index e8b24306c..373680640 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -27,6 +27,7 @@ import Breadcrumbs from "../../Components/Breadcrumbs";
import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
import background from "../../assets/Images/background-grid.svg";
import Arrow from "../../assets/icons/top-right-arrow.svg?react";
+import ClockSnooze from "../../assets/icons/clock-snooze.svg?react";
import "./index.css";
const ActionsMenu = ({ monitor }) => {
@@ -260,6 +261,16 @@ Host.propTypes = {
}).isRequired,
};
+/**
+ * StatusBox component displays a status box with a title and value.
+ * The icon and color change based on the status title.
+ *
+ * @param {Object} props
+ * @param {string} props.title - The status title, which determines the icon and color.
+ * @param {number|string} props.value - The value to be displayed inside the box.
+ * @returns {JSX.Element} The rendered StatusBox component.
+ */
+
const StatusBox = ({ title, value }) => {
const theme = useTheme();
@@ -283,6 +294,11 @@ const StatusBox = ({ title, value }) => {
);
} else if (title === "paused") {
color = theme.pie.yellow.stroke;
+ icon = (
+
+
+
+ );
}
return (
@@ -300,8 +316,6 @@ const StatusBox = ({ title, value }) => {
"&:hover": {
backgroundColor: "#f9fafb",
},
- // backgroundImage:
- // "linear-gradient(to right bottom, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #fefefe, #fefefe, #fdfdfd, #fcfcfd, #fafbfc, #f9fafb)",
"&:after": {
position: "absolute",
content: `""`,
@@ -311,6 +325,7 @@ const StatusBox = ({ title, value }) => {
top: "-10%",
left: "5%",
zIndex: 10000,
+ pointerEvents: "none",
},
}}
>
@@ -348,6 +363,11 @@ const StatusBox = ({ title, value }) => {
);
};
+StatusBox.propTypes = {
+ title: PropTypes.oneOf(["up", "down", "paused"]).isRequired,
+ value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+};
+
/**
* Renders a skeleton layout.
*
diff --git a/Client/src/assets/icons/clock-snooze.svg b/Client/src/assets/icons/clock-snooze.svg
new file mode 100644
index 000000000..708e7ba91
--- /dev/null
+++ b/Client/src/assets/icons/clock-snooze.svg
@@ -0,0 +1,3 @@
+
diff --git a/Client/src/index.css b/Client/src/index.css
index 887d7da07..d513ac9a1 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -85,7 +85,7 @@
--env-var-font-size-medium: 13px;
--env-var-font-size-medium-plus: 14px;
--env-var-font-size-large: 16px;
- --env-var-font-size-large-plus: 24px;
+ --env-var-font-size-large-plus: 22px;
--env-var-font-size-xlarge: 30px;
--env-var-img-width-1: 20px;