From 7336287a9cd1ccd4805ad4549eda14bdd9842ba8 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 13 Aug 2024 12:36:19 -0700
Subject: [PATCH 1/7] implement 60 min history chart

---
 .../Charts/MonitorDetails60MinChart/index.jsx | 62 +++++++++++++++++++
 Client/src/Pages/Monitors/Details/index.jsx   | 10 ++-
 Server/db/mongo/modules/monitorModule.js      | 12 +++-
 3 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx

diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
new file mode 100644
index 000000000..2c181eaec
--- /dev/null
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -0,0 +1,62 @@
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  Cell,
+  ResponsiveContainer,
+  ReferenceLine,
+  Label,
+} from "recharts";
+
+import PropTypes from "prop-types";
+
+const MonitorDetails60MinChart = ({ data }) => {
+  const labelStyle = {
+    fontSize: "8px",
+    fill: "black",
+  };
+  return (
+    <ResponsiveContainer width="100%" height={50}>
+      <BarChart
+        height={20}
+        data={data}
+        margin={{ top: 15, left: 15, right: 15, bottom: 0 }}
+      >
+        <XAxis hide={true} />
+        <YAxis hide={true} domain={[0, 100]} />
+        <Bar dataKey="value" barSize={15}>
+          {data.map((check, index) => (
+            <Cell
+              key={`cell-${index}`}
+              fill={
+                check.status === true
+                  ? "var(--env-var-color-23)"
+                  : "var(--env-var-color-24)"
+              }
+            />
+          ))}
+        </Bar>
+        <ReferenceLine x={0} stroke="black" strokeDasharray="3 3">
+          <Label value="60 mins" position="top" style={labelStyle} />
+        </ReferenceLine>
+        <ReferenceLine
+          x={Math.floor(data.length * (2 / 3))}
+          stroke="black"
+          strokeDasharray="3 3"
+        >
+          <Label value="20 mins" position="top" style={labelStyle} />
+        </ReferenceLine>
+        <ReferenceLine x={data.length - 1} stroke="black" strokeDasharray="3 3">
+          <Label value="Now" position="top" style={labelStyle} />
+        </ReferenceLine>
+      </BarChart>
+    </ResponsiveContainer>
+  );
+};
+
+MonitorDetails60MinChart.propTypes = {
+  data: PropTypes.array.isRequired,
+};
+
+export default MonitorDetails60MinChart;
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 5f3ddf9fc..a8b75e6cc 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -17,6 +17,7 @@ import {
   formatDurationRounded,
 } from "../../../Utils/timeUtils";
 import "./index.css";
+import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails60MinChart";
 
 const StatBox = ({ title, value }) => {
   return (
@@ -178,10 +179,13 @@ const DetailsPage = () => {
           <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
             <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
+              <Typography component="h1" sx={{ lineHeight: 1 }}>
+                {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+              </Typography>
+              <MonitorDetails60MinChart data={monitor.statusBar} />
+            </Stack>
+            <Stack direction="row" gap={theme.gap.small}>
               <Box>
-                <Typography component="h1" sx={{ lineHeight: 1 }}>
-                  {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-                </Typography>
                 <Typography mt={theme.gap.small}>
                   <Typography
                     component="span"
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 1d53db978..44a1d6132 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -127,9 +127,15 @@ const getIncidents = (checks) => {
  * @returns {Array<Boolean>}  Array of booleans representing up/down.
  */
 const getStatusBarValues = (checks) => {
-  return checks.map((check) => {
-    return check.status;
-  });
+  return checks
+    .map((check) => {
+      return {
+        status: check.status,
+        responseTime: check.responseTime,
+        value: 75,
+      };
+    })
+    .reverse();
 };
 /**
  * Get stats by monitor ID

From 801f962af94c737cca9c7a5b2714e30a90146c95 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 13 Aug 2024 15:33:07 -0700
Subject: [PATCH 2/7] Add empty checks if there are less than 60 mins worth of
 cehcks

---
 Server/db/mongo/modules/monitorModule.js | 28 ++++++++++++++----------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 44a1d6132..689521acd 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -126,16 +126,22 @@ const getIncidents = (checks) => {
  * @param {Array} checks Array of check objects.
  * @returns {Array<Boolean>}  Array of booleans representing up/down.
  */
-const getStatusBarValues = (checks) => {
-  return checks
-    .map((check) => {
-      return {
-        status: check.status,
-        responseTime: check.responseTime,
-        value: 75,
-      };
-    })
-    .reverse();
+const getStatusBarValues = (monitor, checks) => {
+  const checksIn60Mins = Math.floor((60 * 60 * 1000) / monitor.interval);
+  const noBlankChecks = checksIn60Mins - checks.length;
+
+  const statusBarValues = checks.map((check) => {
+    return {
+      status: check.status,
+      responseTime: check.responseTime,
+      value: 75,
+    };
+  });
+
+  for (let i = 0; i < noBlankChecks; i++) {
+    statusBarValues.push({ status: false, responseTime: 0, value: 0 });
+  }
+  return statusBarValues.reverse();
 };
 /**
  * Get stats by monitor ID
@@ -211,7 +217,7 @@ const getMonitorStatsById = async (req) => {
         getAverageResponseTime24Hours(checks24Hours);
       monitorStats.uptime24Hours = getUptimePercentage(checks24Hours);
       monitorStats.uptime30Days = getUptimePercentage(checks30Days);
-      monitorStats.statusBar = getStatusBarValues(checks60Mins);
+      monitorStats.statusBar = getStatusBarValues(monitor, checks60Mins);
     }
 
     //Get checks for dateRange

From ac5385746a5d67ebacfb61f404d3442210869bd0 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 13 Aug 2024 15:54:23 -0700
Subject: [PATCH 3/7] Justified URL, added placeholders

---
 .../Charts/MonitorDetails60MinChart/index.jsx   | 17 ++++++++---------
 Client/src/Pages/Monitors/Details/index.jsx     |  7 ++++++-
 Client/src/index.css                            |  1 +
 Server/db/mongo/modules/monitorModule.js        |  2 +-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
index 2c181eaec..719f711b7 100644
--- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -16,8 +16,14 @@ const MonitorDetails60MinChart = ({ data }) => {
     fontSize: "8px",
     fill: "black",
   };
+
+  const color = {
+    true: "var(--env-var-color-23)",
+    false: "var(--env-var-color-24)",
+    undefined: "var(--env-var-color-33)",
+  };
   return (
-    <ResponsiveContainer width="100%" height={50}>
+    <ResponsiveContainer width="100%" height={35}>
       <BarChart
         height={20}
         data={data}
@@ -27,14 +33,7 @@ const MonitorDetails60MinChart = ({ data }) => {
         <YAxis hide={true} domain={[0, 100]} />
         <Bar dataKey="value" barSize={15}>
           {data.map((check, index) => (
-            <Cell
-              key={`cell-${index}`}
-              fill={
-                check.status === true
-                  ? "var(--env-var-color-23)"
-                  : "var(--env-var-color-24)"
-              }
-            />
+            <Cell key={`cell-${index}`} fill={color[check.status]} />
           ))}
         </Bar>
         <ReferenceLine x={0} stroke="black" strokeDasharray="3 3">
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index a8b75e6cc..5a670a4fd 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -177,7 +177,12 @@ const DetailsPage = () => {
             }}
           />
           <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
-            <Stack direction="row" gap={theme.gap.small} mt={theme.gap.small}>
+            <Stack
+              direction="row"
+              gap={theme.gap.small}
+              mt={theme.gap.small}
+              alignItems={"end"}
+            >
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
               <Typography component="h1" sx={{ lineHeight: 1 }}>
                 {monitor.url?.replace(/^https?:\/\//, "") || "..."}
diff --git a/Client/src/index.css b/Client/src/index.css
index 9e404d61c..58e26ed71 100644
--- a/Client/src/index.css
+++ b/Client/src/index.css
@@ -58,6 +58,7 @@
   --env-var-color-30: #fcfcfd;
   --env-var-color-31: #1a1919;
   --env-var-color-32: #f5f5f5;
+  --env-var-color-33: rgba(83, 83, 83, 0.1);
 
   --env-var-radius-1: 4px;
   --env-var-radius-2: 8px;
diff --git a/Server/db/mongo/modules/monitorModule.js b/Server/db/mongo/modules/monitorModule.js
index 689521acd..65b20d471 100644
--- a/Server/db/mongo/modules/monitorModule.js
+++ b/Server/db/mongo/modules/monitorModule.js
@@ -139,7 +139,7 @@ const getStatusBarValues = (monitor, checks) => {
   });
 
   for (let i = 0; i < noBlankChecks; i++) {
-    statusBarValues.push({ status: false, responseTime: 0, value: 0 });
+    statusBarValues.push({ status: undefined, responseTime: 0, value: 75 });
   }
   return statusBarValues.reverse();
 };

From b72fbc459901978e97c9bf22344a8c035d5d9305 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 14 Aug 2024 14:54:43 -0400
Subject: [PATCH 4/7] Implement styling to match Figma designs

---
 Client/src/Components/BasicTable/index.css    |  2 +-
 .../Charts/MonitorDetails60MinChart/index.jsx | 63 ++++++++-----------
 Client/src/Pages/Monitors/Details/index.css   |  2 +-
 Client/src/Pages/Monitors/Details/index.jsx   | 48 +++++++-------
 4 files changed, 54 insertions(+), 61 deletions(-)

diff --git a/Client/src/Components/BasicTable/index.css b/Client/src/Components/BasicTable/index.css
index fd1f75b53..14adc440c 100644
--- a/Client/src/Components/BasicTable/index.css
+++ b/Client/src/Components/BasicTable/index.css
@@ -72,7 +72,7 @@
 }
 
 .MuiPaper-root + .MuiPagination-root {
-  margin-top: 35px;
+  margin-top: 24px;
   border: solid 1px var(--env-var-color-16);
   border-radius: var(--env-var-radius-1);
   padding: var(--env-var-spacing-1-plus) var(--env-var-spacing-2);
diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
index 719f711b7..ac7d1ee3b 100644
--- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -1,13 +1,4 @@
-import {
-  BarChart,
-  Bar,
-  XAxis,
-  YAxis,
-  Cell,
-  ResponsiveContainer,
-  ReferenceLine,
-  Label,
-} from "recharts";
+import { BarChart, Bar, Cell, ReferenceLine, Label } from "recharts";
 
 import PropTypes from "prop-types";
 
@@ -23,34 +14,32 @@ const MonitorDetails60MinChart = ({ data }) => {
     undefined: "var(--env-var-color-33)",
   };
   return (
-    <ResponsiveContainer width="100%" height={35}>
-      <BarChart
-        height={20}
-        data={data}
-        margin={{ top: 15, left: 15, right: 15, bottom: 0 }}
+    <BarChart
+      width={data.length * 10 + 30}
+      height={35}
+      data={data}
+      margin={{ top: 14, left: 15, right: 15, bottom: 2 }}
+      style={{ alignSelf: "baseline" }}
+    >
+      <Bar dataKey="value" barSize={10}>
+        {data.map((check, index) => (
+          <Cell key={`cell-${index}`} fill={color[check.status]} />
+        ))}
+      </Bar>
+      <ReferenceLine x={0} stroke="black" strokeDasharray="3 3">
+        <Label value="60 mins" position="top" style={labelStyle} />
+      </ReferenceLine>
+      <ReferenceLine
+        x={Math.floor(data.length * (2 / 3))}
+        stroke="black"
+        strokeDasharray="3 3"
       >
-        <XAxis hide={true} />
-        <YAxis hide={true} domain={[0, 100]} />
-        <Bar dataKey="value" barSize={15}>
-          {data.map((check, index) => (
-            <Cell key={`cell-${index}`} fill={color[check.status]} />
-          ))}
-        </Bar>
-        <ReferenceLine x={0} stroke="black" strokeDasharray="3 3">
-          <Label value="60 mins" position="top" style={labelStyle} />
-        </ReferenceLine>
-        <ReferenceLine
-          x={Math.floor(data.length * (2 / 3))}
-          stroke="black"
-          strokeDasharray="3 3"
-        >
-          <Label value="20 mins" position="top" style={labelStyle} />
-        </ReferenceLine>
-        <ReferenceLine x={data.length - 1} stroke="black" strokeDasharray="3 3">
-          <Label value="Now" position="top" style={labelStyle} />
-        </ReferenceLine>
-      </BarChart>
-    </ResponsiveContainer>
+        <Label value="20 mins" position="top" style={labelStyle} />
+      </ReferenceLine>
+      <ReferenceLine x={data.length - 1} stroke="black" strokeDasharray="3 3">
+        <Label value="now" position="top" style={labelStyle} />
+      </ReferenceLine>
+    </BarChart>
   );
 };
 
diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 359a002bc..e2bd28d77 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -35,7 +35,7 @@
 }
 
 .monitor-details .stat-box {
-  flex: 1;
+  flex: 1 20%;
   min-width: 100px;
   border: solid 1px;
   border-radius: var(--env-var-radius-1);
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 5a670a4fd..3a20273b9 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -163,12 +163,12 @@ const DetailsPage = () => {
         <>
           <Button
             level="tertiary"
-            label="Back to Monitors"
+            label="Back"
             animate="slideLeft"
             img={<WestRoundedIcon />}
             onClick={() => navigate("/monitors")}
             sx={{
-              backgroundColor: "#f4f4f4",
+              backgroundColor: theme.palette.otherColors.fillGray,
               px: theme.gap.ml,
               "& svg.MuiSvgIcon-root": {
                 mr: theme.gap.small,
@@ -176,21 +176,24 @@ const DetailsPage = () => {
               },
             }}
           />
-          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
+          <Stack gap={theme.gap.large}>
             <Stack
               direction="row"
               gap={theme.gap.small}
               mt={theme.gap.small}
-              alignItems={"end"}
+              alignItems="baseline"
             >
               {monitor?.status ? <GreenCheck /> : <RedCheck />}
-              <Typography component="h1" sx={{ lineHeight: 1 }}>
-                {monitor.url?.replace(/^https?:\/\//, "") || "..."}
-              </Typography>
-              <MonitorDetails60MinChart data={monitor.statusBar} />
-            </Stack>
-            <Stack direction="row" gap={theme.gap.small}>
               <Box>
+                <Stack direction="row">
+                  <Typography
+                    component="h1"
+                    sx={{ lineHeight: 1, alignSelf: "flex-end" }}
+                  >
+                    {monitor.url?.replace(/^https?:\/\//, "") || "..."}
+                  </Typography>
+                  <MonitorDetails60MinChart data={monitor.statusBar} />
+                </Stack>
                 <Typography mt={theme.gap.small}>
                   <Typography
                     component="span"
@@ -203,8 +206,6 @@ const DetailsPage = () => {
                     Your site is {monitor?.status ? "up" : "down"}.
                   </Typography>{" "}
                   Checking every {formatDurationRounded(monitor?.interval)}.
-                  Last time checked{" "}
-                  {formatDurationRounded(monitor?.lastChecked)} ago.
                 </Typography>
               </Box>
               <Button
@@ -235,23 +236,18 @@ const DetailsPage = () => {
               direction="row"
               justifyContent="space-between"
               gap={theme.gap.large}
+              flexWrap="wrap"
             >
               <StatBox
                 title="Currently up for"
                 value={formatDuration(monitor?.uptimeDuration)}
               />
               <StatBox
-                title="Last checked"
+                title="Last check"
                 value={`${formatDuration(monitor?.lastChecked)} ago`}
               />
               <StatBox title="Incidents" value={monitor?.incidents} />
               <StatBox title="Certificate Expiry" value={certificateExpiry} />
-            </Stack>
-            <Stack
-              direction="row"
-              justifyContent="space-between"
-              gap={theme.gap.large}
-            >
               <StatBox
                 title="Latest response time"
                 value={monitor?.latestResponseTime}
@@ -269,7 +265,7 @@ const DetailsPage = () => {
                   .replace(/\.?0+$/, "")}%`}
               />
               <StatBox
-                title="Uptime(30 days)"
+                title="Uptime (30 days)"
                 value={`${parseFloat(monitor?.uptime30Days)
                   .toFixed(2)
                   .replace(/\.?0+$/, "")}%`}
@@ -281,7 +277,7 @@ const DetailsPage = () => {
                 justifyContent="space-between"
                 mb={theme.gap.ml}
               >
-                <Typography component="h2" mb={theme.gap.small}>
+                <Typography component="h2" alignSelf="flex-end">
                   Response Times
                 </Typography>
                 <ButtonGroup>
@@ -317,7 +313,15 @@ const DetailsPage = () => {
                   />
                 </ButtonGroup>
               </Stack>
-              <Box sx={{ height: "200px" }}>
+              <Box
+                p={theme.gap.mlplus}
+                pb={theme.gap.xs}
+                backgroundColor={theme.palette.otherColors.white}
+                border={1}
+                borderColor={theme.palette.otherColors.graishWhite}
+                borderRadius={`${theme.shape.borderRadius}px`}
+                sx={{ height: "250px" }}
+              >
                 <MonitorDetailsAreaChart
                   checks={[...monitor.checks].reverse()}
                 />

From 02708cdd378cc829bf4d9aa81f554cf15429c3a1 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 14 Aug 2024 15:17:23 -0400
Subject: [PATCH 5/7] Implement minor UI adjustments to align with the updated
 layout

---
 Client/src/Pages/Monitors/Details/index.css | 16 +++++++----
 Client/src/Pages/Monitors/Details/index.jsx | 31 ++++++++++++++++-----
 2 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index e2bd28d77..4bf797293 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -3,8 +3,7 @@
   color: var(--env-var-color-1);
   font-weight: 600;
 }
-.monitor-details h2.MuiTypography-root,
-.monitor-details h6.MuiTypography-root {
+.monitor-details h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
 .monitor-details h2.MuiTypography-root,
@@ -39,11 +38,18 @@
   min-width: 100px;
   border: solid 1px;
   border-radius: var(--env-var-radius-1);
-  padding: var(--env-var-spacing-1) 18px;
+  padding: var(--env-var-spacing-1) 16px;
   background-color: var(--env-var-color-8);
 }
-.monitor-details .stat-box h6.MuiTypography-root {
-  margin-bottom: var(--env-var-spacing-1);
+.monitor-details h6.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium-plus);
+}
+.monitor-details h6.MuiTypography-root span.MuiTypography-root {
+  text-transform: none;
+  font-style: italic;
+  font-size: var(--env-var-font-size-medium);
+  color: var(--env-var-color-5);
+  opacity: 0.8;
 }
 .monitor-details button.MuiButtonBase-root,
 .monitor-details .stat-box {
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 3a20273b9..6dd75f42f 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -22,7 +22,11 @@ import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails6
 const StatBox = ({ title, value }) => {
   return (
     <Box className="stat-box">
-      <Typography variant="h6" sx={{ fontWeight: 400 }}>
+      <Typography
+        variant="h6"
+        mb="5px"
+        sx={{ fontWeight: 500, textTransform: "uppercase" }}
+      >
         {title}
       </Typography>
       <Typography variant="h4">{value}</Typography>
@@ -31,7 +35,7 @@ const StatBox = ({ title, value }) => {
 };
 
 StatBox.propTypes = {
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 };
 
@@ -176,7 +180,7 @@ const DetailsPage = () => {
               },
             }}
           />
-          <Stack gap={theme.gap.large}>
+          <Stack gap={theme.gap.xl}>
             <Stack
               direction="row"
               gap={theme.gap.small}
@@ -244,7 +248,7 @@ const DetailsPage = () => {
               />
               <StatBox
                 title="Last check"
-                value={`${formatDuration(monitor?.lastChecked)} ago`}
+                value={`${formatDurationRounded(monitor?.lastChecked)} ago`}
               />
               <StatBox title="Incidents" value={monitor?.incidents} />
               <StatBox title="Certificate Expiry" value={certificateExpiry} />
@@ -253,19 +257,32 @@ const DetailsPage = () => {
                 value={monitor?.latestResponseTime}
               />
               <StatBox
-                title="Average Repsonse Time (24 hours)"
+                title={
+                  <>
+                    Avg Response Time{" "}
+                    <Typography component="span">(24-hr)</Typography>
+                  </>
+                }
                 value={parseFloat(monitor?.avgResponseTime24hours)
                   .toFixed(2)
                   .replace(/\.?0+$/, "")}
               />
               <StatBox
-                title="Uptime (24 hours)"
+                title={
+                  <>
+                    Uptime <Typography component="span">(24-hr)</Typography>
+                  </>
+                }
                 value={`${parseFloat(monitor?.uptime24Hours)
                   .toFixed(2)
                   .replace(/\.?0+$/, "")}%`}
               />
               <StatBox
-                title="Uptime (30 days)"
+                title={
+                  <>
+                    Uptime <Typography component="span">(30-day)</Typography>
+                  </>
+                }
                 value={`${parseFloat(monitor?.uptime30Days)
                   .toFixed(2)
                   .replace(/\.?0+$/, "")}%`}

From 008161e701598ee45446589a65387c8426d227aa Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 14 Aug 2024 15:34:15 -0400
Subject: [PATCH 6/7] Increased label font size and updated color

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

diff --git a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
index ac7d1ee3b..f7fc0d3d8 100644
--- a/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
+++ b/Client/src/Components/Charts/MonitorDetails60MinChart/index.jsx
@@ -4,8 +4,8 @@ import PropTypes from "prop-types";
 
 const MonitorDetails60MinChart = ({ data }) => {
   const labelStyle = {
-    fontSize: "8px",
-    fill: "black",
+    fontSize: "10px",
+    fill: "#475467",
   };
 
   const color = {

From f65a9ba097c8010af380d4222f2407c061130aab Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Wed, 14 Aug 2024 15:53:46 -0400
Subject: [PATCH 7/7] Small font change

---
 Client/src/Pages/Monitors/Details/index.css |  6 ++----
 Client/src/Pages/Monitors/Details/index.jsx | 14 ++++++--------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/Client/src/Pages/Monitors/Details/index.css b/Client/src/Pages/Monitors/Details/index.css
index 4bf797293..127b7377a 100644
--- a/Client/src/Pages/Monitors/Details/index.css
+++ b/Client/src/Pages/Monitors/Details/index.css
@@ -6,8 +6,7 @@
 .monitor-details h2.MuiTypography-root {
   font-size: var(--env-var-font-size-large);
 }
-.monitor-details h2.MuiTypography-root,
-.monitor-details h4.MuiTypography-root {
+.monitor-details h2.MuiTypography-root{
   font-weight: 600;
 }
 .monitor-details h2.MuiTypography-root,
@@ -45,11 +44,10 @@
   font-size: var(--env-var-font-size-medium-plus);
 }
 .monitor-details h6.MuiTypography-root span.MuiTypography-root {
-  text-transform: none;
   font-style: italic;
   font-size: var(--env-var-font-size-medium);
   color: var(--env-var-color-5);
-  opacity: 0.8;
+  opacity: 0.7;
 }
 .monitor-details button.MuiButtonBase-root,
 .monitor-details .stat-box {
diff --git a/Client/src/Pages/Monitors/Details/index.jsx b/Client/src/Pages/Monitors/Details/index.jsx
index 6dd75f42f..15cfd2c82 100644
--- a/Client/src/Pages/Monitors/Details/index.jsx
+++ b/Client/src/Pages/Monitors/Details/index.jsx
@@ -22,14 +22,12 @@ import MonitorDetails60MinChart from "../../../Components/Charts/MonitorDetails6
 const StatBox = ({ title, value }) => {
   return (
     <Box className="stat-box">
-      <Typography
-        variant="h6"
-        mb="5px"
-        sx={{ fontWeight: 500, textTransform: "uppercase" }}
-      >
+      <Typography variant="h6" mb={1} fontWeight={500}>
         {title}
       </Typography>
-      <Typography variant="h4">{value}</Typography>
+      <Typography variant="h4" fontWeight={500}>
+        {value}
+      </Typography>
     </Box>
   );
 };
@@ -180,7 +178,7 @@ const DetailsPage = () => {
               },
             }}
           />
-          <Stack gap={theme.gap.xl}>
+          <Stack gap={theme.gap.xl} mt={theme.gap.medium}>
             <Stack
               direction="row"
               gap={theme.gap.small}
@@ -259,7 +257,7 @@ const DetailsPage = () => {
               <StatBox
                 title={
                   <>
-                    Avg Response Time{" "}
+                    Avg. Response Time{" "}
                     <Typography component="span">(24-hr)</Typography>
                   </>
                 }