Added fallback component to maintenance page

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

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 />

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