Add DialogWithCloseButton component and Dialog styling

Change-type: minor

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

src/Material/index.ts

@@ -0,0 +1,3 @@
+import { DialogWithCloseButton } from './DialogWithCloseButton';
+
+export { DialogWithCloseButton };

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';

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: {