Starting a reusable Dialog component

Author: francisli

src/components/design_system/dialog/Dialog.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Dialog from "./Dialog";
+
+const meta: Meta<typeof Dialog> = {
+  title: "Components/Design System/Dialog",
+  component: Dialog,
+  decorators: [
+    (Story) => (
+      <>
+        <div id="anchor">
+          <Story />
+        </div>
+        <div style={{ height: "8rem" }}></div>
+      </>
+    ),
+  ],
+};
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {
+  args: {
+    open: true,
+    size: "sm",
+    title: "Dialog Test",
+    children: <p style={{ width: "100%" }}>Testing, testing testing</p>,
+    cancelLabel: "Cancel",
+    confirmLabel: "Save",
+  },
+};

src/components/design_system/dialog/Dialog.tsx

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import {
+  Dialog as MuiDialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from "@mui/material";
+import Button from "@/components/design_system/button/Button";
+
+interface DialogProps {
+  cancelLabel?: string;
+  children: ReactNode;
+  confirmLabel?: string;
+  open: boolean;
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+  title: ReactNode;
+}
+
+function Dialog({
+  cancelLabel,
+  children,
+  confirmLabel,
+  open,
+  size = "sm",
+  title,
+}: DialogProps) {
+  return (
+    <MuiDialog open={open} fullWidth maxWidth={size}>
+      <DialogTitle align="center" variant="h3">
+        {title}
+      </DialogTitle>
+      <DialogContent>{children}</DialogContent>
+      <DialogActions>
+        {cancelLabel && <Button variant="secondary">{cancelLabel}</Button>}
+        {confirmLabel && <Button variant="primary">{confirmLabel}</Button>}
+      </DialogActions>
+    </MuiDialog>
+  );
+}
+
+export default Dialog;

src/theme.ts

@@ -156,6 +156,28 @@ export const compassTheme = createTheme({
         disableRipple: true,
       },
     },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: ".5rem 1.5rem 1.5rem 1.5rem",
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          paddingTop: "1.5rem",
+          paddingBottom: "2rem",
+        },
+      },
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: "0 1.5rem 1.5rem 1.5rem",
+        },
+      },
+    },
     MuiInputLabel: {
       styleOverrides: {
         root: {