From f28e19c53e011ae9ac49835962973d408327de92 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 22 Jul 2024 16:45:22 -0400
Subject: [PATCH] Added fallback component to maintenance page

---
 Client/src/Components/Fallback/index.css |  9 +++--
 Client/src/Components/Fallback/index.jsx |  1 +
 Client/src/Pages/Maintenance/index.jsx   | 46 +++++++++---------------
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css
index 31c706241..226c7bc47 100644
--- a/Client/src/Components/Fallback/index.css
+++ b/Client/src/Components/Fallback/index.css
@@ -1,5 +1,5 @@
 [class*="fallback__"] {
-  width: 255px;
+  width: fit-content;
   margin: auto;
   margin-top: 100px;
 }
@@ -18,6 +18,11 @@
 [class*="fallback__"] button.MuiButtonBase-root {
   height: 34px;
 }
-[class*="fallback__"] .check span.MuiTypography-root {
+[class*="fallback__"] .check span.MuiTypography-root,
+[class*="fallback__"] button.MuiButtonBase-root {
   font-size: var(--env-var-font-size-medium);
 }
+
+.fallback__status > .MuiStack-root {
+  margin-left: var(--env-var-spacing-2);
+}
diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
index e975c445a..943c3aa5e 100644
--- a/Client/src/Components/Fallback/index.jsx
+++ b/Client/src/Components/Fallback/index.jsx
@@ -25,6 +25,7 @@ const Fallback = ({ title, checks, link = "/" }) => {
   return (
     <Stack
       className={`fallback__${title.trim().split(" ")[0]}`}
+      alignItems="center"
       gap={theme.gap.xl}
     >
       <Skeleton />
diff --git a/Client/src/Pages/Maintenance/index.jsx b/Client/src/Pages/Maintenance/index.jsx
index 4cf77b025..3ca0c949d 100644
--- a/Client/src/Pages/Maintenance/index.jsx
+++ b/Client/src/Pages/Maintenance/index.jsx
@@ -1,37 +1,25 @@
-import React from "react";
+import { useTheme } from "@emotion/react";
+import Fallback from "../../Components/Fallback";
 import "./index.css";
-import WindowFrame from "./../../assets/Images/maintenance_window_frame.svg";
-import { Button } from "@mui/material";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
 const Maintenance = () => {
-  const maintenanceItems = [
-    { id: 1, text: "Mark your maintenance periods" },
-    { id: 2, text: "Eliminate any misunderstandings" },
-    { id: 3, text: "Stop sending alerts in maintenance windows" },
-  ];
+  const theme = useTheme();
 
   return (
-    <div className="maintenance-checklist-main">
-      <img className="maintenance-image" src={WindowFrame} alt="WindowFrame" />
-      <div className="maintenance-title">Create a maintenance window to</div>
-      <div>
-        {maintenanceItems.map((item) => (
-          <div key={item.id} className="checklist-item">
-            <CheckCircleOutlineIcon color="primary" />
-            <div className="checklist-item-text">{item.text}</div>
-          </div>
-        ))}
-      </div>
-
-      <Button
-        variant="contained"
-        color="primary"
-        className="maintenance-checklist-button"
-        sx={{ textTransform: "none" }}
-      >
-        Let&apos;s create your maintenance window
-      </Button>
+    <div
+      className="maintenance"
+      style={{
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
+      <Fallback
+        title="maintenance window"
+        checks={[
+          "Mark your maintenance periods",
+          "Eliminate any misunderstandings",
+          "Stop sending alerts in maintenance windows",
+        ]}
+      />
     </div>
   );
 };