From f152f490e30a0358eb05357dffa836dce488cafb Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 12 Aug 2024 12:27:51 -0400
Subject: [PATCH 1/2] Added fallback UI when there are no incidents recorded

---
 Client/src/Pages/Auth/Register/Register.jsx   | 48 +++++------
 Client/src/Pages/Auth/index.css               |  3 +
 .../Pages/Incidents/IncidentTable/index.jsx   | 84 +++++++++++--------
 Client/src/Pages/Incidents/index.css          |  6 ++
 4 files changed, 81 insertions(+), 60 deletions(-)

diff --git a/Client/src/Pages/Auth/Register/Register.jsx b/Client/src/Pages/Auth/Register/Register.jsx
index 77b3dd2fc..855cc3c54 100644
--- a/Client/src/Pages/Auth/Register/Register.jsx
+++ b/Client/src/Pages/Auth/Register/Register.jsx
@@ -107,18 +107,16 @@ const StepOne = ({ form, errors, onSubmit, onChange, onBack }) => {
             />
           </form>
           <form noValidate spellCheck={false} onSubmit={onSubmit}>
-            <Box my={theme.gap.ml}>
-              <Field
-                id="register-lastname-input"
-                label="Surname"
-                isRequired={true}
-                placeholder="Ellis"
-                autoComplete="family-name"
-                value={form.lastName}
-                onChange={onChange}
-                error={errors.lastName}
-              />
-            </Box>
+            <Field
+              id="register-lastname-input"
+              label="Surname"
+              isRequired={true}
+              placeholder="Ellis"
+              autoComplete="family-name"
+              value={form.lastName}
+              onChange={onChange}
+              error={errors.lastName}
+            />
           </form>
         </Box>
         <Stack direction="row" justifyContent="space-between">
@@ -267,21 +265,19 @@ const StepThree = ({ form, errors, onSubmit, onChange, onBack }) => {
             />
           </form>
           <form noValidate spellCheck={false} onSubmit={onSubmit}>
-            <Box mt={theme.gap.ml}>
-              <Field
-                type="password"
-                id="register-confirm-input"
-                label="Confirm password"
-                isRequired={true}
-                placeholder="Confirm your password"
-                autoComplete="current-password"
-                value={form.confirm}
-                onChange={onChange}
-                error={errors.confirm}
-              />
-            </Box>
+            <Field
+              type="password"
+              id="register-confirm-input"
+              label="Confirm password"
+              isRequired={true}
+              placeholder="Confirm your password"
+              autoComplete="current-password"
+              value={form.confirm}
+              onChange={onChange}
+              error={errors.confirm}
+            />
           </form>
-          <Stack gap={theme.gap.small} my={theme.gap.large}>
+          <Stack gap={theme.gap.small} mb={theme.gap.large}>
             <Check
               text="Must be at least 8 characters long"
               variant={
diff --git a/Client/src/Pages/Auth/index.css b/Client/src/Pages/Auth/index.css
index 577f27799..6814bdd6e 100644
--- a/Client/src/Pages/Auth/index.css
+++ b/Client/src/Pages/Auth/index.css
@@ -135,6 +135,9 @@
 .auth .check span.MuiTypography-root {
   font-size: var(--env-var-font-size-medium);
 }
+.auth form + form {
+  margin: var(--env-var-spacing-1-plus) 0;
+}
 
 .auth > .MuiStack-root:nth-of-type(1) {
   height: var(--env-var-nav-bar-height);
diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index 95230bb72..afc1d4ef6 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -9,6 +9,8 @@ import {
   Pagination,
   PaginationItem,
   Paper,
+  Typography,
+  Box,
 } from "@mui/material";
 
 import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
@@ -105,41 +107,55 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
 
   return (
     <>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell>Monitor Name</TableCell>
-              <TableCell>Status</TableCell>
-              <TableCell>Date & Time</TableCell>
-              <TableCell>Message</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {checks.map((check) => {
-              const status = check.status === true ? "up" : "down";
-
-              return (
-                <TableRow key={check._id}>
-                  <TableCell>{monitors[check.monitorId]?.name}</TableCell>
-                  <TableCell>
-                    <StatusLabel
-                      status={status}
-                      text={status}
-                      customStyles={{ textTransform: "capitalize" }}
-                    />
-                  </TableCell>
-                  <TableCell>
-                    {new Date(check.createdAt).toLocaleString()}
-                  </TableCell>
-                  <TableCell>{check.statusCode}</TableCell>
+      {checks?.length === 0 && selectedMonitor === "0" ? (
+        <Box>
+          <Typography textAlign="center">No incidents recorded yet.</Typography>
+        </Box>
+      ) : checks?.length === 0 ? (
+        <Box>
+          <Typography textAlign="center">
+            The monitor you have selected, has no recorded incidents yet.
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          <TableContainer component={Paper}>
+            <Table>
+              <TableHead>
+                <TableRow>
+                  <TableCell>Monitor Name</TableCell>
+                  <TableCell>Status</TableCell>
+                  <TableCell>Date & Time</TableCell>
+                  <TableCell>Message</TableCell>
                 </TableRow>
-              );
-            })}
-          </TableBody>
-        </Table>
-      </TableContainer>
-      {paginationComponent}
+              </TableHead>
+              <TableBody>
+                {checks.map((check) => {
+                  const status = check.status === true ? "up" : "down";
+
+                  return (
+                    <TableRow key={check._id}>
+                      <TableCell>{monitors[check.monitorId]?.name}</TableCell>
+                      <TableCell>
+                        <StatusLabel
+                          status={status}
+                          text={status}
+                          customStyles={{ textTransform: "capitalize" }}
+                        />
+                      </TableCell>
+                      <TableCell>
+                        {new Date(check.createdAt).toLocaleString()}
+                      </TableCell>
+                      <TableCell>{check.statusCode}</TableCell>
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          {paginationComponent}
+        </>
+      )}
     </>
   );
 };
diff --git a/Client/src/Pages/Incidents/index.css b/Client/src/Pages/Incidents/index.css
index 1f176d470..286552d22 100644
--- a/Client/src/Pages/Incidents/index.css
+++ b/Client/src/Pages/Incidents/index.css
@@ -17,6 +17,12 @@
 .incidents .MuiPagination-root {
   background-color: var(--env-var-color-8);
 }
+.incidents > .MuiBox-root {
+  background-color: var(--env-var-color-8);
+  border: solid 1px var(--env-var-color-6);
+  border-radius: var(--env-var-radius-1);
+  padding: 60px;
+}
 
 /* remove later */
 .incidents .MuiSelect-select {

From 1d767454e219b9c22c70c844c88e76b89c882c9f Mon Sep 17 00:00:00 2001
From: Alexander Holliday <ajhollid@gmail.com>
Date: Mon, 12 Aug 2024 10:02:54 -0700
Subject: [PATCH 2/2] Removed comma

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

diff --git a/Client/src/Pages/Incidents/IncidentTable/index.jsx b/Client/src/Pages/Incidents/IncidentTable/index.jsx
index afc1d4ef6..44a30decc 100644
--- a/Client/src/Pages/Incidents/IncidentTable/index.jsx
+++ b/Client/src/Pages/Incidents/IncidentTable/index.jsx
@@ -114,7 +114,7 @@ const IncidentTable = ({ monitors, selectedMonitor, filter }) => {
       ) : checks?.length === 0 ? (
         <Box>
           <Typography textAlign="center">
-            The monitor you have selected, has no recorded incidents yet.
+            The monitor you have selected has no recorded incidents yet.
           </Typography>
         </Box>
       ) : (