Issue 225: update maintenance checklist component structure

Client/src/Pages/Incidents/index.css

@@ -1,13 +1,33 @@
-.maintenance-checklist-card {
-  max-width: 314;
+.maintenance-checklist-main {
+  max-width: 350px;
+  min-height: 390px;
   margin: auto;
-  padding: 2;
-  box-shadow: 3;
+  padding: 5px;
 }
 
-.maintenance-checklist-box {
-  height: 100;
-  background-color: grey;
-  border-radius: 1px;
-  margin-bottom: 2px;
+.maintenance-image {
+  width: 280px;
+  height: 150px;
+  background-color: whitesmoke;
+  border-radius: 10px;
+}
+
+.maintenance-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin-top: 40px;
+  margin-bottom: 30px;
+}
+
+.checklist-item {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.checklist-item-text {
+  margin-left: 10px;
+}
+
+.maintenance-checklist-main .maintenance-checklist-button {
+  margin-top: 30px;
 }

Client/src/Pages/Incidents/index.jsx

@@ -1,51 +1,37 @@
 import React from "react";
 import "./index.css";
-import {
-  Card,
-  CardContent,
-  Box,
-  Typography,
-  Button,
-  List,
-  ListItem,
-  ListItemIcon,
-  ListItemText,
-} from "@mui/material";
+import { Button } from "@mui/material";
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
 
 const Incidents = () => {
   const maintenanceItems = [
-    "Mark your maintenance periods",
-    "Eliminate any misunderstandings",
-    "Stop sending alerts in maintenance windows",
+    { id: 1, text: "Mark your maintenance periods" },
+    { id: 2, text: "Eliminate any misunderstandings" },
+    { id: 3, text: "Stop sending alerts in maintenance windows" },
   ];
 
   return (
-    <Card>
-      <CardContent>
-        <Box />
-        <Typography>Create a maintenance window to</Typography>
-        <List>
-          {maintenanceItems.map((item, index) => {
-            <ListItem key={index}>
-              <ListItemIcon>
-                <CheckCircleOutlineIcon color="primary" />
-              </ListItemIcon>
-              <ListItemText primary={item} />
-            </ListItem>;
-          })}
-        </List>
-      </CardContent>
-      <Box>
-        <Button
-          variant="contained"
-          color="primary"
-          sx={{ textTransform: "none" }}
-        >
-          Let&apos;s create your maintenance window
-        </Button>
-      </Box>
-    </Card>
+    <div className="maintenance-checklist-main">
+      <div className="maintenance-image"></div>
+      <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>
   );
 };