From 0ad08f431ee84b6ed2d5baf549a9247fa714c66f Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Tue, 20 Aug 2024 20:33:28 +0330
Subject: [PATCH 01/19] Marshali data, logging it, creating post req, send to
 BE

---
 Client/package-lock.json                      |  2 +-
 Client/package.json                           |  2 +-
 .../CreateMaintenanceWindow/index.jsx         | 25 +++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/Client/package-lock.json b/Client/package-lock.json
index 44e276f63..2f1543bba 100644
--- a/Client/package-lock.json
+++ b/Client/package-lock.json
@@ -18,7 +18,7 @@
         "@mui/x-data-grid": "7.3.2",
         "@mui/x-date-pickers": "7.3.2",
         "@reduxjs/toolkit": "2.2.5",
-        "axios": "1.7.4",
+        "axios": "^1.7.4",
         "chart.js": "^4.4.3",
         "dayjs": "1.11.11",
         "joi": "17.13.1",
diff --git a/Client/package.json b/Client/package.json
index 769e1f4a6..22f15f7f9 100644
--- a/Client/package.json
+++ b/Client/package.json
@@ -20,7 +20,7 @@
     "@mui/x-data-grid": "7.3.2",
     "@mui/x-date-pickers": "7.3.2",
     "@reduxjs/toolkit": "2.2.5",
-    "axios": "1.7.4",
+    "axios": "^1.7.4",
     "chart.js": "^4.4.3",
     "dayjs": "1.11.11",
     "joi": "17.13.1",
diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 8fff6e4a1..a5cbfaf56 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -10,6 +10,7 @@ import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import Field from "../../../Components/Inputs/Field";
+import axios from "axios";
 
 const directory = {
   title: "Create a maintenance window",
@@ -71,6 +72,29 @@ const CreateNewMaintenanceWindow = () => {
     }));
   };
 
+  const handleSubmit = async () => {
+    const data = {
+      repeat: values.repeat,
+      date: values.date.format("YYYY-MM-DD"),
+      startTime: values.startTime.format("HH:mm"),
+      duration: values.duration,
+      unit: values.unit,
+      friendlyName: values.friendlyName,
+      addMonitors: values.AddMonitors,
+    };
+
+    console.log("Submitting data: ", data);
+
+    await axios
+      .post("/address-of-the-route", data)
+      .then((res) => {
+        console.log("Response: ", res.data);
+      })
+      .catch((err) => {
+        console.log("Error: ", err);
+      });
+  };
+
   const configOptions = [
     {
       title: "Repeat",
@@ -246,6 +270,7 @@ const CreateNewMaintenanceWindow = () => {
             }}
             level="primary"
             label="Create"
+            onClick={handleSubmit}
           />
         </Stack>
       </Stack>

From b247fabde0168a8cf639a24f9a1f1d3161edd796 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Wed, 21 Aug 2024 09:40:09 +0330
Subject: [PATCH 02/19] adding validations and toasts as validation error

---
 .../CreateMaintenanceWindow/index.jsx         | 33 ++++++++----
 Client/src/Validation/validation.js           | 52 +++++++++++++++----
 2 files changed, 66 insertions(+), 19 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index a5cbfaf56..c4789f883 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -10,7 +10,9 @@ import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
 import Field from "../../../Components/Inputs/Field";
-import axios from "axios";
+import { maintenanceWindowValidation } from "../../../Validation/validation";
+import { logger } from "../../../Utils/Logger";
+import { createToast } from "../../../Utils/toastUtils";
 
 const directory = {
   title: "Create a maintenance window",
@@ -63,6 +65,7 @@ const CreateNewMaintenanceWindow = () => {
     friendlyName: "",
     AddMonitors: "",
   });
+  const [errors, setErrors] = useState({});
 
   const handleChange = (event, name) => {
     const { value } = event.target;
@@ -83,16 +86,26 @@ const CreateNewMaintenanceWindow = () => {
       addMonitors: values.AddMonitors,
     };
 
-    console.log("Submitting data: ", data);
-
-    await axios
-      .post("/address-of-the-route", data)
-      .then((res) => {
-        console.log("Response: ", res.data);
-      })
-      .catch((err) => {
-        console.log("Error: ", err);
+    const { error } = maintenanceWindowValidation.validate(data, {
+      abortEarly: false,
+    });
+    logger.log("error: ", error);
+    if (error) {
+      const newErrors = {};
+      error.details.forEach((err) => {
+        newErrors[err.path[0]] = err.message;
       });
+      setErrors(newErrors);
+      createToast({
+        body:
+          error.details && error.details.length > 0
+            ? error.details[0].message
+            : "Error validating data",
+      });
+      logger.error("Validation errors:", error.details);
+    }
+
+    logger.log("Submitting data: ", data);
   };
 
   const configOptions = [
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index ab2501199..6719c2c1c 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -72,14 +72,10 @@ const credentials = joi.object({
 });
 
 const monitorValidation = joi.object({
-  url: joi
-    .string()
-    .uri({ allowRelative: true })
-    .trim()
-    .messages({
-      "string.empty": "This field is required.",
-      "string.uri": "The URL you provided is not valid.",
-    }),
+  url: joi.string().uri({ allowRelative: true }).trim().messages({
+    "string.empty": "This field is required.",
+    "string.uri": "The URL you provided is not valid.",
+  }),
   name: joi.string().trim().max(50).allow("").messages({
     "string.max": "This field should not exceed the 50 characters limit.",
   }),
@@ -108,4 +104,42 @@ const imageValidation = joi.object({
     }),
 });
 
-export { credentials, imageValidation, monitorValidation };
+const maintenanceWindowValidation = joi.object({
+  repeat: joi.number().valid(1, 2, 3).required().messages({
+    "number.base": "Repeat must be a number.",
+    "any.only": "Repeat must be one of [1, 2, 3].",
+    "any.required": "Repeat is required.",
+  }),
+  date: joi.date().required().messages({
+    "date.base": "Date must be a valid date.",
+    "any.required": "Date is required.",
+  }),
+  startTime: joi.string().required().messages({
+    "string.base": "Start time must be a valid time.",
+    "any.required": "Start time is required.",
+  }),
+  duration: joi.number().required().messages({
+    "number.base": "Duration must be a number.",
+    "any.required": "Duration is required.",
+  }),
+  unit: joi.string().valid("minutes", "hours", "days").required().messages({
+    "string.base": "Unit must be a string.",
+    "any.only": "Unit must be one of ['minutes', 'hours', 'days'].",
+    "any.required": "Unit is required.",
+  }),
+  friendlyName: joi.string().required().max(100).messages({
+    "string.max": "Friendly name must be less than 100 characters.",
+    "any.required": "Friendly name is required.",
+  }),
+  addMonitors: joi.string().required().messages({
+    "string.base": "Add monitors must be a string.",
+    "any.required": "Add monitors is required.",
+  }),
+});
+
+export {
+  credentials,
+  imageValidation,
+  monitorValidation,
+  maintenanceWindowValidation,
+};

From aecddb22bbf34907bcf8e7b996a347f62b73829f Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Wed, 21 Aug 2024 22:50:42 +0330
Subject: [PATCH 03/19] validation helper texts and input type

---
 .../Maintenance/CreateMaintenanceWindow/index.jsx   |  3 +++
 Client/src/Validation/validation.js                 | 13 +++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index c4789f883..eb19ba3d2 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -163,6 +163,7 @@ const CreateNewMaintenanceWindow = () => {
             placeholder="60"
             onChange={(e) => handleChange(e, "duration")}
             value={values.duration}
+            error={errors.duration}
           />
           <Select
             onChange={(e) => handleChange(e, "unit")}
@@ -181,6 +182,7 @@ const CreateNewMaintenanceWindow = () => {
           placeholder="Maintanence at __ : __ for ___ minutes"
           value={values.friendlyName}
           onChange={(e) => handleChange(e, "friendlyName")}
+          error={errors.friendlyName}
         />
       ),
     },
@@ -197,6 +199,7 @@ const CreateNewMaintenanceWindow = () => {
             placeholder="Start typing to search for current monitors"
             value={values.AddMonitors}
             onChange={(e) => handleChange(e, "AddMonitors")}
+            error={errors.addMonitors}
           />
           <Typography
             sx={{
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 6719c2c1c..5d53c6728 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -119,6 +119,7 @@ const maintenanceWindowValidation = joi.object({
     "any.required": "Start time is required.",
   }),
   duration: joi.number().required().messages({
+    "number.empty": "duration is required.",
     "number.base": "Duration must be a number.",
     "any.required": "Duration is required.",
   }),
@@ -127,13 +128,13 @@ const maintenanceWindowValidation = joi.object({
     "any.only": "Unit must be one of ['minutes', 'hours', 'days'].",
     "any.required": "Unit is required.",
   }),
-  friendlyName: joi.string().required().max(100).messages({
-    "string.max": "Friendly name must be less than 100 characters.",
-    "any.required": "Friendly name is required.",
+  friendlyName: joi.string().max(50).required().messages({
+    "string.empty": "Friendly name is required.",
+    "string.max": "Friendly name must be less than 50 characters long",
   }),
-  addMonitors: joi.string().required().messages({
-    "string.base": "Add monitors must be a string.",
-    "any.required": "Add monitors is required.",
+  addMonitors: joi.string().max(50).required().messages({
+    "string.empty": "Add monitors is required.",
+    "string.max": "Add monitors must be less than 50 characters long",
   }),
 });
 

From a2d710d3daf2c5be9067f7896f16f69088d1995e Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 22 Aug 2024 10:01:18 +0330
Subject: [PATCH 04/19] fixes

---
 .../src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index eb19ba3d2..a0c0cebd5 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -90,7 +90,9 @@ const CreateNewMaintenanceWindow = () => {
       abortEarly: false,
     });
     logger.log("error: ", error);
-    if (error) {
+    if (!error || error.details.length === 0) {
+      setErrors({});
+    } else {
       const newErrors = {};
       error.details.forEach((err) => {
         newErrors[err.path[0]] = err.message;
@@ -164,6 +166,7 @@ const CreateNewMaintenanceWindow = () => {
             onChange={(e) => handleChange(e, "duration")}
             value={values.duration}
             error={errors.duration}
+            type="number"
           />
           <Select
             onChange={(e) => handleChange(e, "unit")}

From d81bb8fe89c4bf10adef00ee0bb2ed9c8e7ddbe0 Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 22 Aug 2024 20:23:17 +0330
Subject: [PATCH 05/19] fixes

---
 Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
index e0311d4e7..4ee17db72 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css
@@ -23,7 +23,7 @@
 }
 
 .duration-config .field-text .MuiTextField-root,
-.duration-config .field {
+.maintenance-options .duration-config .field {
   width: 70px;
   min-width: 70px;
   max-width: 70px;

From 81072cf767d7806c8da9184d2d07d193f0ba7cae Mon Sep 17 00:00:00 2001
From: "Gorkem Cetin (BWL)" <167266851+gorkem-bwl@users.noreply.github.com>
Date: Fri, 23 Aug 2024 22:15:19 -0400
Subject: [PATCH 06/19] Add video instead

---
 README.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index adb9bc68f..9cbd37355 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,11 @@
 
 <p align="center"><strong>An open source server monitoring application</strong></p>
 
-![Dashboard](https://github.com/user-attachments/assets/0f92d7a3-19cf-430c-8b0f-fe13ff46c51b)
+
+https://github.com/user-attachments/assets/c8234cce-edf8-4d7e-8f6b-f18b06669fcc
+
+
+
 
 BlueWave Uptime is an open source server monitoring application used to track the operational status and performance of servers and websites. It regularly checks whether a server/website is accessible and performs optimally, providing real-time alerts and reports on the monitored services' availability, downtime, and response time.
 

From f5e589886b1284a3d61870e424a6bb7001f0c01f Mon Sep 17 00:00:00 2001
From: Mohammad Khalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Sat, 24 Aug 2024 10:11:13 +0330
Subject: [PATCH 07/19] adding the type number

---
 Client/src/Components/Inputs/Field/index.jsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/Client/src/Components/Inputs/Field/index.jsx b/Client/src/Components/Inputs/Field/index.jsx
index 0b2fe56fe..f44201e3f 100644
--- a/Client/src/Components/Inputs/Field/index.jsx
+++ b/Client/src/Components/Inputs/Field/index.jsx
@@ -177,7 +177,14 @@ const Field = forwardRef(
 );
 
 Field.propTypes = {
-  type: PropTypes.oneOf(["text", "password", "url", "email", "description"]),
+  type: PropTypes.oneOf([
+    "text",
+    "password",
+    "url",
+    "email",
+    "description",
+    "number",
+  ]),
   id: PropTypes.string.isRequired,
   label: PropTypes.string,
   https: PropTypes.bool,

From 63ae25c16b79cb7aacd8573136977bfa87c23be9 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 11:49:28 -0400
Subject: [PATCH 08/19] Removed url button link, tweaked typography and
 paddings

---
 Client/src/Components/BasicTable/index.css    |  16 +-
 Client/src/Components/BasicTable/index.jsx    |   6 +-
 Client/src/Components/Sidebar/index.css       |   3 +
 .../Pages/Monitors/CreateMonitor/index.jsx    |   2 +-
 Client/src/Pages/Monitors/index.css           |  14 +-
 Client/src/Pages/Monitors/index.jsx           | 143 +++++++++++++-----
 6 files changed, 141 insertions(+), 43 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index 47a47439d..208604021 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -5,8 +5,7 @@
   white-space: nowrap;
 }
 .MuiTable-root .host span {
-  font-size: var(--env-var-font-size-small);
-  margin-left: 8px;
+  font-size: 11px;
 }
 
 .MuiTable-root .label {
@@ -180,3 +179,16 @@ body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
 body:has(.pagination-dropdown) p:has(+ .MuiTablePagination-root) {
   font-size: var(--env-var-font-size-small-plus);
 }
+
+.monitors .MuiTable-root .MuiTableHead-root .MuiTableCell-root {
+  text-transform: uppercase;
+  color: var(--env-var-color-5);
+  opacity: 0.8;
+  font-size: var(--env-var-font-size-small-plus);
+  font-weight: 400;
+}
+.monitors .MuiTableCell-root:not(:first-of-type):not(:last-of-type),
+.monitors .MuiTableCell-root:not(:first-of-type):not(:last-of-type) {
+  padding-left: var(--env-var-spacing-1);
+  padding-right: var(--env-var-spacing-1);
+}
diff --git a/Client/src/Components/BasicTable/index.jsx b/Client/src/Components/BasicTable/index.jsx
index bef5bd651..c723d2bec 100644
--- a/Client/src/Components/BasicTable/index.jsx
+++ b/Client/src/Components/BasicTable/index.jsx
@@ -233,6 +233,7 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
           direction="row"
           alignItems="center"
           justifyContent="space-between"
+          px={theme.gap.small}
         >
           <Typography sx={{ opacity: 0.7 }}>
             Showing {getRange()} of {data.rows.length} monitor(s)
@@ -277,7 +278,10 @@ const BasicTable = ({ data, paginated, reversed, table }) => {
                 },
               },
             }}
-            sx={{ mt: theme.gap.medium }}
+            sx={{
+              mt: theme.gap.medium,
+              color: theme.palette.otherColors.bluishGray,
+            }}
           />
         </Stack>
       )}
diff --git a/Client/src/Components/Sidebar/index.css b/Client/src/Components/Sidebar/index.css
index 8ce0089bc..4c253c781 100644
--- a/Client/src/Components/Sidebar/index.css
+++ b/Client/src/Components/Sidebar/index.css
@@ -15,6 +15,9 @@ aside span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
   line-height: 1;
 }
+aside .MuiStack-root + span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium-plus);
+}
 aside .MuiListSubheader-root {
   font-size: var(--env-var-font-size-small);
   font-weight: 500;
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 28493080a..a637525ad 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -98,7 +98,7 @@ const CreateMonitor = () => {
         monitor.type === "http"
           ? `http${https ? "s" : ""}://` + monitor.url
           : monitor.url,
-      name: monitor.name === "" ? monitor.url : monitor.name,
+      name: monitor.name,
       type: monitor.type,
       interval: monitor.interval * MS_PER_MINUTE,
     };
diff --git a/Client/src/Pages/Monitors/index.css b/Client/src/Pages/Monitors/index.css
index 1f46b3517..43c43f3c8 100644
--- a/Client/src/Pages/Monitors/index.css
+++ b/Client/src/Pages/Monitors/index.css
@@ -1,7 +1,10 @@
-.monitors h1.MuiTypography-root,
-.monitors h2.MuiTypography-root {
+.monitors h1.MuiTypography-root {
   color: var(--env-var-color-1);
-  font-weight: 600;
+  font-weight: 500;
+}
+.monitors h2.MuiTypography-root {
+  color: var(--env-var-color-5);
+  font-weight: 500;
 }
 .monitors h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
@@ -13,6 +16,9 @@
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
 }
+.monitors h1.MuiTypography-root + p.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium-plus);
+}
 .monitors .MuiStack-root > button:not(.MuiIconButton-root) {
   font-size: var(--env-var-font-size-medium);
   height: var(--env-var-height-2);
@@ -31,7 +37,7 @@
   border-radius: 50%;
   font-size: var(--env-var-font-size-medium);
   font-weight: 500;
-  color: var(--env-var-color-5);
+  color: var(--env-var-color-1);
   margin-left: 10px;
   line-height: 0.8;
 }
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 9eef7ec3a..a91939e85 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -1,4 +1,3 @@
-import "./index.css";
 import { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import {
@@ -6,11 +5,7 @@ import {
   getUptimeMonitorsByUserId,
 } from "../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import { useNavigate } from "react-router-dom";
-import Button from "../../Components/Button";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import { useTheme } from "@emotion/react";
-import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
-import BasicTable from "../../Components/BasicTable";
 import { StatusLabel } from "../../Components/Label";
 import { createToast } from "../../Utils/toastUtils";
 import {
@@ -23,10 +18,15 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-
+import BasicTable from "../../Components/BasicTable";
+import Button from "../../Components/Button";
+import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import BarChart from "../../Components/Charts/BarChart";
+import Breadcrumbs from "../../Components/Breadcrumbs";
+import ArrowDownwardRoundedIcon from "@mui/icons-material/ArrowDownwardRounded";
+import "./index.css";
 
 const ActionsMenu = ({ monitor }) => {
   const [anchorEl, setAnchorEl] = useState(null);
@@ -177,7 +177,10 @@ const ActionsMenu = ({ monitor }) => {
             <Button
               level="tertiary"
               label="Cancel"
-              onClick={() => setIsOpen(false)}
+              onClick={(e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+              }}
             />
             <Button
               level="error"
@@ -212,12 +215,39 @@ ActionsMenu.propTypes = {
  */
 const Host = ({ params }) => {
   return (
-    <Stack direction="row" alignItems="baseline" className="host">
-      {params.title}
-      <Typography component="span" sx={{ color: params.percentageColor }}>
+    <Box className="host">
+      <Box
+        display="inline-block"
+        position="relative"
+        sx={{
+          fontWeight: 500,
+          "&:before": {
+            position: "absolute",
+            content: `""`,
+            width: "4px",
+            height: "4px",
+            borderRadius: "50%",
+            backgroundColor: "gray",
+            opacity: 0.8,
+            right: "-10px",
+            top: "42%",
+          },
+        }}
+      >
+        {params.title}
+      </Box>
+      <Typography
+        component="span"
+        sx={{
+          color: params.percentageColor,
+          fontWeight: 500,
+          ml: "15px",
+        }}
+      >
         {params.percentage}%
       </Typography>
-    </Stack>
+      <Box sx={{ opacity: 0.6 }}>{params.url}</Box>
+    </Box>
   );
 };
 
@@ -301,6 +331,7 @@ const Monitors = () => {
 
   data.rows = monitorState.monitors.map((monitor, idx) => {
     const params = {
+      url: monitor.url,
       title: monitor.name,
       percentage: 100,
       percentageColor:
@@ -348,34 +379,73 @@ const Monitors = () => {
 
   let loading = monitorState.isLoading && monitorState.monitors.length === 0;
 
+  const now = new Date();
+  const hour = now.getHours();
+
+  let greeting = "";
+  let emoji = "";
+  if (hour < 12) {
+    greeting = "morning";
+    emoji = "🌅";
+  } else if (hour < 18) {
+    greeting = "afternoon";
+    emoji = "🌞";
+  } else {
+    greeting = "evening";
+    emoji = "🌙";
+  }
+
   return (
     <Stack className="monitors" gap={theme.gap.large}>
       {loading ? (
         <SkeletonLayout />
       ) : (
         <>
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-          >
-            <Typography
-              component="h1"
-              sx={{ lineHeight: 1, alignSelf: "flex-end" }}
+          <Box>
+            <Breadcrumbs list={[{ name: `monitors`, path: "/monitors" }]} />
+            <Stack
+              direction="row"
+              justifyContent="space-between"
+              alignItems="center"
+              mt={theme.gap.medium}
             >
-              Hello, {authState.user.firstName}
-            </Typography>
-            {monitorState.monitors?.length !== 0 && (
-              <Button
-                level="primary"
-                label="Create monitor"
-                onClick={() => {
-                  navigate("/monitors/create");
-                }}
-                sx={{ fontWeight: 500 }}
-              />
-            )}
-          </Stack>
+              <Box>
+                <Typography component="h1" lineHeight={1}>
+                  <Typography
+                    component="span"
+                    fontSize="inherit"
+                    color={theme.palette.otherColors.bluishGray}
+                  >
+                    Good {greeting},{" "}
+                  </Typography>
+                  <Typography
+                    component="span"
+                    fontSize="inherit"
+                    fontWeight="inherit"
+                  >
+                    {authState.user.firstName} {emoji}
+                  </Typography>
+                </Typography>
+                <Typography
+                  sx={{ opacity: 0.8 }}
+                  lineHeight={1}
+                  fontWeight={300}
+                >
+                  Here’s an overview of your uptime monitors.
+                </Typography>
+              </Box>
+              {monitorState.monitors?.length !== 0 && (
+                <Button
+                  level="primary"
+                  label="Create monitor"
+                  onClick={() => {
+                    navigate("/monitors/create");
+                  }}
+                  sx={{ fontWeight: 500, alignSelf: "flex-end" }}
+                />
+              )}
+            </Stack>
+          </Box>
           {monitorState.monitors?.length === 0 ? (
             <Stack
               alignItems="center"
@@ -412,7 +482,8 @@ const Monitors = () => {
               </Stack>
               <Box
                 flex={1}
-                p={theme.gap.lgplus}
+                py={theme.gap.large}
+                px={theme.gap.lgplus}
                 border={1}
                 borderColor={theme.palette.otherColors.graishWhite}
                 backgroundColor={theme.palette.otherColors.white}
@@ -420,8 +491,10 @@ const Monitors = () => {
                   borderRadius: `${theme.shape.borderRadius}px`,
                 }}
               >
-                <Stack direction="row" alignItems="center" mb={theme.gap.large}>
-                  <Typography component="h2">Current monitors</Typography>
+                <Stack direction="row" alignItems="center" mb={theme.gap.ml}>
+                  <Typography component="h2" letterSpacing={-0.5}>
+                    Actively monitoring
+                  </Typography>
                   <Box className="current-monitors-counter">
                     {monitorState.monitors.length}
                   </Box>

From cfab18f0e8ffc35f3af327dadcf56a630401bfb9 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 14:40:08 -0400
Subject: [PATCH 09/19] Updated cards background, removed unused files

---
 .../Charts/Servers/ServerStatus.jsx           | 28 ------
 .../Charts/Servers/serverStatus.css           | 46 ---------
 Client/src/Components/Sidebar/index.jsx       |  2 +
 Client/src/Layouts/HomeLayout/index.css       |  2 +-
 Client/src/Pages/Monitors/index.jsx           | 97 ++++++++++++++++++-
 Client/src/assets/Images/background-grid.svg  | 67 +++++++++++++
 Client/src/assets/icons/top-right-arrow.svg   |  3 +
 7 files changed, 166 insertions(+), 79 deletions(-)
 delete mode 100644 Client/src/Components/Charts/Servers/ServerStatus.jsx
 delete mode 100644 Client/src/Components/Charts/Servers/serverStatus.css
 create mode 100644 Client/src/assets/Images/background-grid.svg
 create mode 100644 Client/src/assets/icons/top-right-arrow.svg

diff --git a/Client/src/Components/Charts/Servers/ServerStatus.jsx b/Client/src/Components/Charts/Servers/ServerStatus.jsx
deleted file mode 100644
index c06d0436b..000000000
--- a/Client/src/Components/Charts/Servers/ServerStatus.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import "./serverStatus.css";
-import PropTypes from "prop-types";
-
-/**
- * @component
- * @param {Object} props
- * @param {string} props.title - The title text for the server status (required)
- * @param {number} props.value - The value text to be displayed (required)
- * @param {string} props.state - The state of the server (e.g., "online", "offline", "warning") (required)
- * @returns {JSX.Element} - Renders the server status component
- */
-const ServerStatus = ({ title, value, state }) => {
-  return (
-    <div className="server-status-tile">
-      <div className="server-status-tile-title">{title}</div>
-      <div className={`server-status-tile-value ` + " " + state}>{value}</div>
-    </div>
-  );
-};
-
-ServerStatus.propTypes = {
-  title: PropTypes.string.isRequired,
-  value: PropTypes.number.isRequired,
-  state: PropTypes.string.isRequired,
-};
-
-export default ServerStatus;
diff --git a/Client/src/Components/Charts/Servers/serverStatus.css b/Client/src/Components/Charts/Servers/serverStatus.css
deleted file mode 100644
index fcbf470aa..000000000
--- a/Client/src/Components/Charts/Servers/serverStatus.css
+++ /dev/null
@@ -1,46 +0,0 @@
-:root {
-  --spacing-general-0: 12px 18px;
-  --spacing-general-1: 20px;
-  --color-border-0: #eaecf0;
-  --border-radius-0: 4px;
-  --font-size-0: 1rem;
-  --font-size-2: 36px;
-
-  --color-up: #17b26a;
-  --color-down: #f04438;
-  --color-pause: #fdb022;
-}
-
-.server-status-tile {
-  min-width: 100px;
-  width: calc(100% - 310px);
-  padding: var(--spacing-general-0);
-  border: 1px solid var(--color-border-0);
-  border-radius: var(--border-radius-0);
-  background-color: var(--env-var-color-8);
-}
-
-.server-status-tile-title {
-  font-size: var(--font-size-0);
-  font-weight: 500;
-  margin-bottom: calc(var(--spacing-general-1) / 2);
-  color: var(--env-var-color-5);
-  opacity: 0.6;
-}
-
-.server-status-tile-value {
-  font-size: var(--font-size-2);
-  font-weight: bolder;
-}
-
-.up {
-  color: var(--color-up);
-}
-
-.down {
-  color: var(--color-down);
-}
-
-.pause {
-  color: var(--color-pause);
-}
diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index ae6507b69..873ec8212 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -194,6 +194,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? theme.gap.xs : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Menu
@@ -394,6 +395,7 @@ function Sidebar() {
             sx={{
               pt: theme.gap.small,
               px: collapsed ? 0 : theme.gap.small,
+              backgroundColor: "transparent"
             }}
           >
             Other
diff --git a/Client/src/Layouts/HomeLayout/index.css b/Client/src/Layouts/HomeLayout/index.css
index dcdcf0535..e85a6362b 100644
--- a/Client/src/Layouts/HomeLayout/index.css
+++ b/Client/src/Layouts/HomeLayout/index.css
@@ -20,7 +20,7 @@
   height: calc(100vh - var(--env-var-spacing-2) * 2);
   max-width: var(--env-var-side-bar-width);
 
-  border: 1px solid var(--color-border-0);
+  border: 1px solid var(--env-var-color-6);
   border-radius: var(--env-var-radius-1);
   background-color: var(--env-var-color-8);
 
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index a91939e85..e8b24306c 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -20,12 +20,13 @@ import {
 } from "@mui/material";
 import BasicTable from "../../Components/BasicTable";
 import Button from "../../Components/Button";
-import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
 import Settings from "../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import BarChart from "../../Components/Charts/BarChart";
 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 "./index.css";
 
 const ActionsMenu = ({ monitor }) => {
@@ -259,6 +260,94 @@ Host.propTypes = {
   }).isRequired,
 };
 
+const StatusBox = ({ title, value }) => {
+  const theme = useTheme();
+
+  let sharedStyles = { position: "absolute", right: 8, opacity: 0.5 };
+
+  let color;
+  let icon;
+  if (title === "up") {
+    color = theme.pie.green.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, top: 8 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "down") {
+    color = theme.pie.red.stroke;
+    icon = (
+      <Box sx={{ ...sharedStyles, transform: "rotate(180deg)", top: 5 }}>
+        <Arrow />
+      </Box>
+    );
+  } else if (title === "paused") {
+    color = theme.pie.yellow.stroke;
+  }
+
+  return (
+    <Box
+      position="relative"
+      flex={1}
+      border={1}
+      borderColor={theme.palette.otherColors.graishWhite}
+      borderRadius={`${theme.shape.borderRadius}px`}
+      backgroundColor={theme.palette.otherColors.white}
+      px={theme.gap.large}
+      py={theme.gap.ml}
+      overflow="hidden"
+      sx={{
+        "&: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: `""`,
+          backgroundImage: `url(${background})`,
+          width: "400px",
+          height: "200px",
+          top: "-10%",
+          left: "5%",
+          zIndex: 10000,
+        },
+      }}
+    >
+      <Box
+        textTransform="uppercase"
+        fontSize={15}
+        letterSpacing={0.5}
+        color={theme.palette.otherColors.bluishGray}
+        mb={theme.gap.ml}
+        sx={{ opacity: 0.6 }}
+      >
+        {title}
+      </Box>
+      {icon}
+      <Stack
+        direction="row"
+        alignItems="flex-start"
+        fontSize={36}
+        fontWeight={600}
+        color={color}
+        gap="2px"
+      >
+        {value}
+        <Typography
+          component="span"
+          fontSize={20}
+          fontWeight={300}
+          color={theme.palette.otherColors.bluishGray}
+          sx={{ opacity: 0.3 }}
+        >
+          #
+        </Typography>
+      </Stack>
+    </Box>
+  );
+};
+
 /**
  * Renders a skeleton layout.
  *
@@ -476,9 +565,9 @@ const Monitors = () => {
                 direction="row"
                 justifyContent="space-between"
               >
-                <ServerStatus title="Up" value={up} state="up" />
-                <ServerStatus title="Down" value={down} state="down" />
-                <ServerStatus title="Paused" value={0} state="pause" />
+                <StatusBox title="up" value={up} />
+                <StatusBox title="down" value={down} />
+                <StatusBox title="paused" value={0} />
               </Stack>
               <Box
                 flex={1}
diff --git a/Client/src/assets/Images/background-grid.svg b/Client/src/assets/Images/background-grid.svg
new file mode 100644
index 000000000..988f1da77
--- /dev/null
+++ b/Client/src/assets/Images/background-grid.svg
@@ -0,0 +1,67 @@
+<svg width="768" height="768" viewBox="0 0 768 768" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_14_2)">
+<mask id="mask0_14_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="url(#paint0_radial_14_2)"/>
+</mask>
+<g mask="url(#mask0_14_2)">
+<mask id="mask1_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_14_2)">
+<mask id="mask2_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask2_14_2)">
+<path d="M0.5 0V768" stroke="#b8b9bd"/>
+<path d="M48.5 0V768" stroke="#b8b9bd"/>
+<path d="M96.5 0V768" stroke="#b8b9bd"/>
+<path d="M144.5 0V768" stroke="#b8b9bd"/>
+<path d="M192.5 0V768" stroke="#b8b9bd"/>
+<path d="M240.5 0V768" stroke="#b8b9bd"/>
+<path d="M288.5 0V768" stroke="#b8b9bd"/>
+<path d="M336.5 0V768" stroke="#b8b9bd"/>
+<path d="M384.5 0V768" stroke="#b8b9bd"/>
+<path d="M432.5 0V768" stroke="#b8b9bd"/>
+<path d="M480.5 0V768" stroke="#b8b9bd"/>
+<path d="M528.5 0V768" stroke="#b8b9bd"/>
+<path d="M576.5 0V768" stroke="#b8b9bd"/>
+<path d="M624.5 0V768" stroke="#b8b9bd"/>
+<path d="M672.5 0V768" stroke="#b8b9bd"/>
+<path d="M720.5 0V768" stroke="#b8b9bd"/>
+</g>
+<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
+<mask id="mask3_14_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="768" height="768">
+<path d="M768 0H0V768H768V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask3_14_2)">
+<path d="M0 47.5H768" stroke="#b8b9bd"/>
+<path d="M0 95.5H768" stroke="#b8b9bd"/>
+<path d="M0 143.5H768" stroke="#b8b9bd"/>
+<path d="M0 191.5H768" stroke="#b8b9bd"/>
+<path d="M0 239.5H768" stroke="#b8b9bd"/>
+<path d="M0 287.5H768" stroke="#b8b9bd"/>
+<path d="M0 335.5H768" stroke="#b8b9bd"/>
+<path d="M0 383.5H768" stroke="#b8b9bd"/>
+<path d="M0 431.5H768" stroke="#b8b9bd"/>
+<path d="M0 479.5H768" stroke="#b8b9bd"/>
+<path d="M0 527.5H768" stroke="#b8b9bd"/>
+<path d="M0 575.5H768" stroke="#b8b9bd"/>
+<path d="M0 623.5H768" stroke="#b8b9bd"/>
+<path d="M0 671.5H768" stroke="#b8b9bd"/>
+<path d="M0 719.5H768" stroke="#b8b9bd"/>
+<path d="M0 767.5H768" stroke="#b8b9bd"/>
+</g>
+<path d="M767.5 0.5H0.5V767.5H767.5V0.5Z" stroke="#b8b9bd"/>
+</g>
+</g>
+</g>
+<defs>
+<radialGradient id="paint0_radial_14_2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(384 384) rotate(90) scale(384)">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_14_2">
+<rect width="768" height="768" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Client/src/assets/icons/top-right-arrow.svg b/Client/src/assets/icons/top-right-arrow.svg
new file mode 100644
index 000000000..471b9454c
--- /dev/null
+++ b/Client/src/assets/icons/top-right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 17L17 7M17 7H7M17 7V17" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

From 49e60ed8f8650734231c399b178f2d2a3ba2f173 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 16:49:44 -0400
Subject: [PATCH 10/19] Added docs

---
 Client/src/Pages/Monitors/index.css      |  8 ++------
 Client/src/Pages/Monitors/index.jsx      | 24 ++++++++++++++++++++++--
 Client/src/assets/icons/clock-snooze.svg |  3 +++
 Client/src/index.css                     |  2 +-
 4 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 Client/src/assets/icons/clock-snooze.svg

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 = (
+      <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.
  *
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 @@
+<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>
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;

From 3c14feecd04e017f94076adfdd9357a665c009e1 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 16:54:37 -0400
Subject: [PATCH 11/19] Reverted monitor name variable change

---
 Client/src/Pages/Monitors/CreateMonitor/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index a637525ad..28493080a 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -98,7 +98,7 @@ const CreateMonitor = () => {
         monitor.type === "http"
           ? `http${https ? "s" : ""}://` + monitor.url
           : monitor.url,
-      name: monitor.name,
+      name: monitor.name === "" ? monitor.url : monitor.name,
       type: monitor.type,
       interval: monitor.interval * MS_PER_MINUTE,
     };

From 14d2bbd4a277bd799801f836b63e0f9435dcae88 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Sat, 24 Aug 2024 18:42:01 -0400
Subject: [PATCH 12/19] Stop event propagation

---
 .../Pages/Monitors/CreateMonitor/index.css    |  6 ++----
 .../Pages/Monitors/CreateMonitor/index.jsx    | 19 +++++++++++++++----
 Client/src/Pages/Monitors/index.jsx           |  5 ++++-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.css b/Client/src/Pages/Monitors/CreateMonitor/index.css
index ecb27969c..2a1b5a2a6 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.css
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.css
@@ -1,13 +1,11 @@
 .create-monitor h1.MuiTypography-root {
   font-size: var(--env-var-font-size-large-plus);
   color: var(--env-var-color-1);
-}
-.create-monitor h1.MuiTypography-root,
-.create-monitor h2.MuiTypography-root {
-  font-weight: 600;
+  font-weight: 500;
 }
 .create-monitor h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
+  font-weight: 600;
 }
 .create-monitor p.MuiTypography-root,
 .create-monitor button.MuiButtonBase-root {
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 28493080a..05e343e77 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -157,9 +157,20 @@ const CreateMonitor = () => {
         noValidate
         spellCheck="false"
         gap={theme.gap.large}
-        mt={theme.gap.mlplus}
+        mt={theme.gap.medium}
       >
-        <Typography component="h1">Create new monitor</Typography>
+        <Typography component="h1">
+          <Typography
+            component="span"
+            fontSize="inherit"
+            color={theme.palette.otherColors.bluishGray}
+          >
+            Create your{" "}
+          </Typography>
+          <Typography component="span" fontSize="inherit" fontWeight="inherit">
+            monitor
+          </Typography>
+        </Typography>
         <Stack className="config-box">
           <Box>
             <Typography component="h2">General settings</Typography>
@@ -389,9 +400,9 @@ const CreateMonitor = () => {
       /> */}
         <Stack direction="row" justifyContent="flex-end">
           <Button
-            id="create-new-monitor-btn"
+            id="create-monitor-btn"
             level="primary"
-            label="Create new monitor"
+            label="Create monitor"
             onClick={handleCreateMonitor}
             disabled={Object.keys(errors).length !== 0 && true}
           />
diff --git a/Client/src/Pages/Monitors/index.jsx b/Client/src/Pages/Monitors/index.jsx
index 373680640..b935231d6 100644
--- a/Client/src/Pages/Monitors/index.jsx
+++ b/Client/src/Pages/Monitors/index.jsx
@@ -143,7 +143,10 @@ const ActionsMenu = ({ monitor }) => {
         aria-labelledby="modal-delete-monitor"
         aria-describedby="delete-monitor-confirmation"
         open={isOpen}
-        onClose={() => setIsOpen(false)}
+        onClose={(e) => {
+          e.stopPropagation();
+          setIsOpen(false);
+        }}
         disablePortal
       >
         <Stack

From 32101b4c2f40f43bcf43dfeab8a3f179739305aa Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Mon, 26 Aug 2024 15:27:05 -0700
Subject: [PATCH 13/19] Initialize User model to creat index

---
 Server/models/user.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/Server/models/user.js b/Server/models/user.js
index 977cabc15..e05e74037 100644
--- a/Server/models/user.js
+++ b/Server/models/user.js
@@ -70,4 +70,10 @@ UserSchema.methods.comparePassword = async function (submittedPassword) {
   return res;
 };
 
+const User = mongoose.model("User", UserSchema);
+
+User.init().then(() => {
+  console.log("User model initialized");
+});
+
 module.exports = mongoose.model("User", UserSchema);

From 98f56248eb94e86b5290b42b6257e4dd9614352b Mon Sep 17 00:00:00 2001
From: M M <cosmicray23@hotmail.com>
Date: Mon, 26 Aug 2024 17:16:29 -0700
Subject: [PATCH 14/19] Update all areas where it says friendly name to display
 name.

---
 .../Maintenance/CreateMaintenanceWindow/index.jsx  | 14 +++++++-------
 Client/src/Pages/Monitors/Configure/index.jsx      |  2 +-
 Client/src/Pages/Monitors/CreateMonitor/index.jsx  |  2 +-
 Client/src/Pages/PageSpeed/Configure/index.jsx     |  2 +-
 .../src/Pages/PageSpeed/CreatePageSpeed/index.jsx  |  2 +-
 Client/src/Validation/validation.js                |  6 +++---
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
index 9110b7a96..f97578d5a 100644
--- a/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
+++ b/Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx
@@ -62,7 +62,7 @@ const CreateNewMaintenanceWindow = () => {
     startTime: dayjs(),
     duration: "60",
     unit: "minutes",
-    friendlyName: "",
+    displayName: "",
     AddMonitors: "",
   });
   const [errors, setErrors] = useState({});
@@ -82,7 +82,7 @@ const CreateNewMaintenanceWindow = () => {
       startTime: values.startTime.format("HH:mm"),
       duration: values.duration,
       unit: values.unit,
-      friendlyName: values.friendlyName,
+      displayName: values.displayName,
       addMonitors: values.AddMonitors,
     };
 
@@ -178,14 +178,14 @@ const CreateNewMaintenanceWindow = () => {
       ),
     },
     {
-      title: "Friendly name",
+      title: "Display name",
       component: (
         <Field
-          id="friendly-name"
+          id="display-name"
           placeholder="Maintanence at __ : __ for ___ minutes"
-          value={values.friendlyName}
-          onChange={(e) => handleChange(e, "friendlyName")}
-          error={errors.friendlyName}
+          value={values.displayName}
+          onChange={(e) => handleChange(e, "displayName")}
+          error={errors.displayName}
         />
       ),
     },
diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index bd2a26df0..ebf6e3279 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -314,7 +314,7 @@ const Configure = () => {
                 <Field
                   type="text"
                   id="monitor-name"
-                  label="Friendly name"
+                  label="display name"
                   isOptional={true}
                   placeholder="Google"
                   value={monitor?.name || ""}
diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 05e343e77..72dd8b207 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -193,7 +193,7 @@ const CreateMonitor = () => {
             <Field
               type="text"
               id="monitor-name"
-              label="Friendly name"
+              label="Display name"
               isOptional={true}
               placeholder="Google"
               value={monitor.name}
diff --git a/Client/src/Pages/PageSpeed/Configure/index.jsx b/Client/src/Pages/PageSpeed/Configure/index.jsx
index 83484de7e..2e79275ef 100644
--- a/Client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/Client/src/Pages/PageSpeed/Configure/index.jsx
@@ -223,7 +223,7 @@ const PageSpeedConfigure = () => {
             </Stack>
             <Stack gap={theme.gap.xl}>
               <Stack direction="row">
-                <Typography component="h3">Monitor friendly name</Typography>
+                <Typography component="h3">Monitor display name</Typography>
                 <Field
                   type="text"
                   id="monitor-name"
diff --git a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
index c707db319..f8735d446 100644
--- a/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
+++ b/Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx
@@ -116,7 +116,7 @@ const CreatePageSpeed = () => {
         <Typography component="h1">Create pagespeed monitor</Typography>
         <Stack gap={theme.gap.xl}>
           <Stack direction="row">
-            <Typography component="h3">Monitor friendly name</Typography>
+            <Typography component="h3">Monitor display name</Typography>
             <Field
               type="text"
               id="monitor-name"
diff --git a/Client/src/Validation/validation.js b/Client/src/Validation/validation.js
index 6aa7107b6..8f435c47b 100644
--- a/Client/src/Validation/validation.js
+++ b/Client/src/Validation/validation.js
@@ -135,9 +135,9 @@ const maintenanceWindowValidation = joi.object({
     "any.only": "Unit must be one of ['minutes', 'hours', 'days'].",
     "any.required": "Unit is required.",
   }),
-  friendlyName: joi.string().max(50).required().messages({
-    "string.empty": "Friendly name is required.",
-    "string.max": "Friendly name must be less than 50 characters long",
+  displayName: joi.string().max(50).required().messages({
+    "string.empty": "Display name is required.",
+    "string.max": "Display name must be less than 50 characters long",
   }),
   addMonitors: joi.string().max(50).required().messages({
     "string.empty": "Add monitors is required.",

From 3fbd986bbe060753880da4567710576858bdd17c Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 09:13:48 -0700
Subject: [PATCH 15/19] Update admin to superadmin in sidebar

---
 Client/src/Components/Sidebar/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Client/src/Components/Sidebar/index.jsx b/Client/src/Components/Sidebar/index.jsx
index ae6507b69..de35e400e 100644
--- a/Client/src/Components/Sidebar/index.jsx
+++ b/Client/src/Components/Sidebar/index.jsx
@@ -289,7 +289,7 @@ function Sidebar() {
                   if (
                     child.name === "Team" &&
                     authState.user?.role &&
-                    !authState.user.role.includes("admin")
+                    !authState.user.role.includes("superadmin")
                   ) {
                     return null;
                   }
@@ -349,7 +349,7 @@ function Sidebar() {
                     if (
                       child.name === "Team" &&
                       authState.user?.role &&
-                      !authState.user.role.includes("admin")
+                      !authState.user.role.includes("superadmin")
                     ) {
                       return null;
                     }

From efe508f93614ff0f3def503fe257ea3ad70c5c91 Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 10:48:30 -0700
Subject: [PATCH 16/19] Update index.jsx

---
 Client/src/Pages/Monitors/Configure/index.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/Configure/index.jsx b/Client/src/Pages/Monitors/Configure/index.jsx
index ebf6e3279..6df2f1be2 100644
--- a/Client/src/Pages/Monitors/Configure/index.jsx
+++ b/Client/src/Pages/Monitors/Configure/index.jsx
@@ -314,7 +314,7 @@ const Configure = () => {
                 <Field
                   type="text"
                   id="monitor-name"
-                  label="display name"
+                  label="Display name"
                   isOptional={true}
                   placeholder="Google"
                   value={monitor?.name || ""}

From 4317e1bc5bf2ebcf1d456e7b80070313b22764ec Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 15:32:45 -0700
Subject: [PATCH 17/19] Update index.jsx

---
 Client/src/Pages/Incidents/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Client/src/Pages/Incidents/index.jsx b/Client/src/Pages/Incidents/index.jsx
index 46c7d51cf..5e1cffcb0 100644
--- a/Client/src/Pages/Incidents/index.jsx
+++ b/Client/src/Pages/Incidents/index.jsx
@@ -57,7 +57,6 @@ const Incidents = () => {
         null,
         null
       );
-      console.log(res);
       // Reduce to a lookup object for 0(1) lookup
       if (res.data && res.data.data.length > 0) {
         const monitorLookup = res.data.data.reduce((acc, monitor) => {

From c3e95f73412168b9f1fba9b5481632f96ace3529 Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 15:33:16 -0700
Subject: [PATCH 18/19] Update index.jsx

---
 Client/src/Pages/Monitors/CreateMonitor/index.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Client/src/Pages/Monitors/CreateMonitor/index.jsx b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
index 21233a264..0826f3084 100644
--- a/Client/src/Pages/Monitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/Monitors/CreateMonitor/index.jsx
@@ -122,7 +122,6 @@ const CreateMonitor = () => {
         userId: user._id,
         notifications: monitor.notifications,
       };
-      console.log(form);
       const action = await dispatch(
         createUptimeMonitor({ authToken, monitor: form })
       );

From add77560959a30e37e94b739941053d26da55ab1 Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Tue, 27 Aug 2024 15:33:43 -0700
Subject: [PATCH 19/19] Update monitorModule.js

---
 Server/db/mongo/modules/monitorModule.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 6e3bba66c..9dda77007 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -364,7 +364,6 @@ const getMonitorsByTeamId = async (req, res) => {
  */
 const createMonitor = async (req, res) => {
   try {
-    console.log(req.body);
     const monitor = new Monitor({ ...req.body });
     // Remove notifications fom monitor as they aren't needed here
     monitor.notifications = undefined;