refactor: update generic dialog to have title and maybe description

Client/src/Components/Dialog/genericDialog.jsx

@@ -1,10 +1,15 @@
-import { Modal, Stack } from "@mui/material";
+import { useId } from "react";
 import PropTypes from "prop-types";
+import { Modal, Stack, Typography } from "@mui/material";
+
 const GenericDialog = ({ title, description, open, onClose, theme, children }) => {
+	const titleId = useId();
+	const descriptionId = useId();
+	const ariaDescribedBy = description?.length > 0 ? descriptionId : "";
 	return (
 		<Modal
-			aria-labelledby={title}
-			aria-describedby={description}
+			aria-labelledby={titleId}
+			aria-describedby={ariaDescribedBy}
 			open={open}
 			onClose={onClose}
 		>
@@ -27,6 +32,23 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 					},
 				}}
 			>
+				<Typography
+					id={titleId}
+					component="h2"
+					fontSize={16}
+					color={theme.palette.text.primary}
+					fontWeight={600}
+				>
+					{title}
+				</Typography>
+				{description && (
+					<Typography
+						id={descriptionId}
+						color={theme.palette.text.tertiary}
+					>
+						{description}
+					</Typography>
+				)}
 				{children}
 			</Stack>
 		</Modal>
@@ -35,7 +57,7 @@ const GenericDialog = ({ title, description, open, onClose, theme, children }) =
 
 GenericDialog.propTypes = {
 	title: PropTypes.string.isRequired,
-	description: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,

Client/src/Components/Dialog/index.jsx

@@ -1,46 +1,27 @@
-import LoadingButton from "@mui/lab/LoadingButton";
-import { Button, Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
+import LoadingButton from "@mui/lab/LoadingButton";
+import { Button, Stack } from "@mui/material";
 import { GenericDialog } from "./genericDialog";
-import { useId } from "react";
+
 const Dialog = ({
+	title,
+	description,
 	open,
 	onClose,
 	theme,
-	title,
-	description,
 	onCancel,
 	confirmationButtonLabel,
 	onConfirm,
 	isLoading,
 }) => {
-	const titleId = useId();
-	const descriptionId = useId();
 	return (
 		<GenericDialog
-			title={titleId}
-			description={descriptionId}
+			title={title}
+			description={description}
 			open={open}
 			onClose={onClose}
 			theme={theme}
 		>
-			<Typography
-				id={titleId}
-				component="h2"
-				fontSize={16}
-				color={theme.palette.text.primary}
-				fontWeight={600}
-			>
-				{title}
-			</Typography>
-			{description && (
-				<Typography
-					id={descriptionId}
-					color={theme.palette.text.tertiary}
-				>
-					{description}
-				</Typography>
-			)}
 			<Stack
 				direction="row"
 				gap={theme.spacing(4)}
@@ -68,11 +49,11 @@ const Dialog = ({
 };
 
 Dialog.propTypes = {
+	title: PropTypes.string.isRequired,
+	description: PropTypes.string,
 	open: PropTypes.bool.isRequired,
 	onClose: PropTypes.func.isRequired,
 	theme: PropTypes.object.isRequired,
-	title: PropTypes.string.isRequired,
-	description: PropTypes.string,
 	onCancel: PropTypes.func.isRequired,
 	confirmationButtonLabel: PropTypes.string.isRequired,
 	onConfirm: PropTypes.func.isRequired,

Client/src/Components/TabPanels/Account/ProfilePanel.jsx

@@ -387,19 +387,11 @@ const ProfilePanel = () => {
 			/>
 
 			<GenericDialog
-				title={"modal-update-picture"}
-				description={"update-profile-picture"}
+				title={"Upload Image"}
 				open={isModalOpen("picture")}
 				onClose={closePictureModal}
 				theme={theme}
 			>
-				<Typography
-					id="modal-update-picture"
-					component="h1"
-					color={theme.palette.text.secondary}
-				>
-					Upload Image
-				</Typography>
 				<ImageField
 					id="update-profile-picture"
 					src={

Client/src/Components/TabPanels/Account/TeamPanel.jsx

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
-import { Box, Button, ButtonGroup, Stack, Typography } from "@mui/material";
+import { Button, ButtonGroup, Stack, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import Field from "../../Inputs/Field";
 import { credentials } from "../../../Validation/validation";
@@ -330,31 +330,14 @@ const TeamPanel = () => {
 			</Stack>
 
 			<GenericDialog
-				title={"modal-invite-member"}
-				description={"invite-member-to-team"}
+				title={"Invite new team member"}
+				description={
+					"When you add a new team member, they will get access to all monitors."
+				}
 				open={isOpen}
 				onClose={closeInviteModal}
 				theme={theme}
 			>
-				<Box>
-					<Typography
-						id="modal-invite-member"
-						component="h1"
-						fontWeight={600}
-						fontColor={theme.palette.text.secondary}
-					>
-						Invite new team member
-					</Typography>
-					<Typography
-						id="invite-member-to-team"
-						component="p"
-						fontSize={13}
-						color={theme.palette.text.accent}
-						sx={{ mt: theme.spacing(1), mb: theme.spacing(4) }}
-					>
-						When you add a new team member, they will get access to all monitors.
-					</Typography>
-				</Box>
 				<Field
 					type="email"
 					id="input-team-member"

Client/src/Pages/PageSpeed/Configure/index.jsx

@@ -445,26 +445,13 @@ const PageSpeedConfigure = () => {
 				isLoading={buttonLoading}
 			/>
 			<GenericDialog
-				title={"modal-delete-pagespeed-monitor"}
-				description={"delete-pagespeed-monitor-confirmation"}
+				title={"Do you really want to delete this monitor?"}
+				description={"Once deleted, this monitor cannot be retrieved."}
 				open={isOpen}
 				onClose={() => setIsOpen(false)}
 				theme={theme}
 			>
-				<Typography
-					id="modal-delete-pagespeed-monitor"
-					component="h2"
-					variant="h2"
-					fontWeight={500}
-				>
-					Do you really want to delete this monitor?
-				</Typography>
-				<Typography
-					id="delete-pagespeed-monitor-confirmation"
-					variant="body1"
-				>
-					Once deleted, this monitor cannot be retrieved.
-				</Typography>
+				{/* Make it dialog? */}
 				<Stack
 					direction="row"
 					gap={theme.spacing(4)}