refactor actions menu

Client/src/Pages/Maintenance/MaintenanceTable/ActionsMenu/index.jsx

@@ -2,23 +2,16 @@ import { useState } from "react";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
-import {
-	Button,
-	IconButton,
-	Menu,
-	MenuItem,
-	Modal,
-	Stack,
-	Typography,
-} from "@mui/material";
+import { Button, IconButton, Menu, MenuItem, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { logger } from "../../../../Utils/Logger";
 import Settings from "../../../../assets/icons/settings-bold.svg?react";
 import PropTypes from "prop-types";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
+import { GenericDialog } from "../../../../Components/Dialog/genericDialog";
 
-const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
+const ActionsMenu = ({ /* isAdmin, */ maintenanceWindow, updateCallback }) => {
 	maintenanceWindow;
 	const { authToken } = useSelector((state) => state.auth);
 	const [anchorEl, setAnchorEl] = useState(null);
@@ -155,71 +148,52 @@ const ActionsMenu = ({ isAdmin, maintenanceWindow, updateCallback }) => {
 					Remove
 				</MenuItem>
 			</Menu>
-			<Modal
-				aria-labelledby="modal-delete-monitor"
-				aria-describedby="delete-monitor-confirmation"
+			<GenericDialog
+				title={"modal-delete-monitor"}
+				description={"delete-monitor-confirmation"}
 				open={isOpen}
-				onClose={(e) => {
+				close={(e) => {
 					e.stopPropagation();
 					setIsOpen(false);
 				}}
+				theme={theme}
 			>
-				<Stack
-					gap={theme.spacing(2)}
-					sx={{
-						position: "absolute",
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-						width: 400,
-						bgcolor: theme.palette.background.main,
-						border: 1,
-						borderColor: theme.palette.border.light,
-						borderRadius: theme.shape.borderRadius,
-						boxShadow: 24,
-						p: theme.spacing(15),
-						"&:focus": {
-							outline: "none",
-						},
-					}}
+				<Typography
+					id="modal-delete-maintenance"
+					component="h2"
+					variant="h2"
 				>
-					<Typography
-						id="modal-delete-maintenance"
-						component="h2"
-						variant="h2"
+					Do you really want to remove this maintenance window?
+				</Typography>
+				<Stack
+					direction="row"
+					gap={theme.spacing(4)}
+					mt={theme.spacing(12)}
+					justifyContent="flex-end"
+				>
+					<Button
+						variant="text"
+						color="info"
+						onClick={(e) => {
+							e.stopPropagation();
+							setIsOpen(false);
+						}}
 					>
-						Do you really want to remove this maintenance window?
-					</Typography>
-					<Stack
-						direction="row"
-						gap={theme.spacing(4)}
-						mt={theme.spacing(12)}
-						justifyContent="flex-end"
+						Cancel
+					</Button>
+					<LoadingButton
+						loading={isLoading}
+						variant="contained"
+						color="error"
+						onClick={(e) => {
+							e.stopPropagation(e);
+							handleRemove(e);
+						}}
 					>
-						<Button
-							variant="text"
-							color="info"
-							onClick={(e) => {
-								e.stopPropagation();
-								setIsOpen(false);
-							}}
-						>
-							Cancel
-						</Button>
-						<LoadingButton
-							loading={isLoading}
-							variant="contained"
-							color="error"
-							onClick={(e) => {
-								e.stopPropagation(e);
-								handleRemove(e);
-							}}
-						>
-							Delete
-						</LoadingButton>
-					</Stack>
+						Delete
+					</LoadingButton>
 				</Stack>
-			</Modal>
+			</GenericDialog>
 		</>
 	);
 };