Added docs

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);

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 = (
+      <Box sx={{ ...sharedStyles, top: 12, right: 12 }}>
+        <ClockSnooze />
+      </Box>
+    );
   }
 
   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.
  *

Client/src/assets/icons/clock-snooze.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 17H21.5L16.5 22H21.5M21.9506 13C21.9833 12.6711 22 12.3375 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C12.1677 22 12.3344 21.9959 12.5 21.9877C12.6678 21.9795 12.8345 21.9671 13 21.9506M12 6V12L15.7384 13.8692" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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;