From 5415d7701adab3958b84bfb39dcd7ebd33013398 Mon Sep 17 00:00:00 2001
From: myarmolinsky <yarmolinskymatthew@gmail.com>
Date: Tue, 22 Aug 2023 11:02:39 -0400
Subject: [PATCH] Add DialogWithCloseButton component and Dialog styling

Change-type: minor
---
 src/Material/DialogWithCloseButton.tsx | 51 ++++++++++++++++++++++++++
 src/Material/index.ts                  |  3 ++
 src/index.ts                           |  1 +
 src/theme.ts                           | 23 ++++++++++++
 4 files changed, 78 insertions(+)
 create mode 100644 src/Material/DialogWithCloseButton.tsx
 create mode 100644 src/Material/index.ts

diff --git a/src/Material/DialogWithCloseButton.tsx b/src/Material/DialogWithCloseButton.tsx
new file mode 100644
index 00000000..b7dff1bf
--- /dev/null
+++ b/src/Material/DialogWithCloseButton.tsx
@@ -0,0 +1,51 @@
+import {
+	Dialog,
+	DialogProps,
+	IconButton,
+	DialogTitle,
+	Typography,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+export const DialogWithCloseButton = ({
+	children,
+	onClose,
+	title,
+	...other
+}: Omit<DialogProps, 'title'> & {
+	title: DialogProps['title'] | JSX.Element;
+}) => {
+	return (
+		<Dialog onClose={onClose} {...other}>
+			{title != null && (
+				<DialogTitle
+					sx={{
+						display: 'flex',
+						justifyContent: 'space-between',
+						alignItems: 'flex-start',
+					}}
+					onClick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+					}}
+				>
+					{title}
+					{onClose ? (
+						<IconButton
+							aria-label="close"
+							onClick={(e) => {
+								onClose(e, 'backdropClick');
+							}}
+							sx={{
+								color: (theme) => theme.palette.grey[500],
+							}}
+						>
+							<CloseIcon />
+						</IconButton>
+					) : null}
+				</DialogTitle>
+			)}
+			{children}
+		</Dialog>
+	);
+};
diff --git a/src/Material/index.ts b/src/Material/index.ts
new file mode 100644
index 00000000..d3589732
--- /dev/null
+++ b/src/Material/index.ts
@@ -0,0 +1,3 @@
+import { DialogWithCloseButton } from './DialogWithCloseButton';
+
+export { DialogWithCloseButton };
diff --git a/src/index.ts b/src/index.ts
index 5fb09afa..1cc49e6f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -24,4 +24,5 @@ export {
 	useAnalyticsContext,
 } from './contexts/AnalyticsContext';
 export * as Material from '@mui/material';
+export * as CustomMaterial from './Material';
 export * as IconsMaterial from '@mui/icons-material';
diff --git a/src/theme.ts b/src/theme.ts
index 460fac5a..05299631 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -256,6 +256,29 @@ export const theme = createTheme({
 				},
 			},
 		},
+		MuiDialogTitle: {
+			styleOverrides: {
+				root: {
+					padding: '24px',
+					fontSize: '24px',
+				},
+			},
+		},
+		MuiDialogContent: {
+			styleOverrides: {
+				root: {
+					padding: '0px 24px',
+					margin: '24px 0px',
+				},
+			},
+		},
+		MuiDialogActions: {
+			styleOverrides: {
+				root: {
+					padding: '0px 24px 24px',
+				},
+			},
+		},
 		MuiCard: {
 			styleOverrides: {
 				root: {