Merge remote-tracking branch 'upstream/develop' into feat/incidents

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

Client/src/Pages/Status/index.jsx

@@ -1,7 +1,26 @@
-import React from "react";
+import Fallback from "../../Components/Fallback";
+import { useTheme } from "@emotion/react";
 
 const Status = () => {
-  return <div>Status</div>;
+  const theme = useTheme();
+
+  return (
+    <div
+      className="status"
+      style={{
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
+      <Fallback
+        title="status page"
+        checks={[
+          "Share your uptime publicly",
+          "Keep your users informed about incidents",
+          "Build trust with your customers",
+        ]}
+      />
+    </div>
+  );
 };
 
 export default Status;