Create/detail updates

packages/ui/components/Dialog.tsx

@@ -2,66 +2,93 @@
 
 import { FC } from "react";
 import {
-  Grid,
-  Button,
-  Dialog as MUIDialog,
+  Box,
+  Dialog as InternalDialog,
   DialogActions,
   DialogContent,
-  TextField,
-  Autocomplete,
+  DialogTitle,
 } from "@mui/material";
-import { typography } from "../styles/theme";
+import { typography, colors } from "../styles/theme";
 
-interface DialogProps {
+type DialogDetailsProps = {
+  title: string;
+  children: React.ReactNode;
+  buttons?: React.ReactNode;
+};
+
+const DialogDetails: FC<DialogDetailsProps> = ({
+  title,
+  children,
+  buttons,
+}) => {
+  const { h3 } = typography;
+  const { mediumGray, darkMediumGray } = colors;
+
+  return (
+    <>
+      <DialogTitle
+        sx={{
+          backgroundColor: mediumGray,
+          p: 3,
+        }}
+      >
+        <Box
+          sx={{
+            ...h3,
+            borderBottom: `1px solid ${darkMediumGray}`,
+            pb: 1.5,
+          }}
+        >
+          {title}
+        </Box>
+      </DialogTitle>
+      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
+        {children}
+      </DialogContent>
+      {buttons && (
+        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
+          {buttons}
+        </DialogActions>
+      )}
+    </>
+  );
+};
+
+type DialogProps = {
   title: string;
   open: boolean;
-  closeDialog: () => void;
+  onClose: Function;
+  formAction?: any;
+  buttons?: React.ReactNode;
   children?: any;
-}
+};
 
 export const Dialog: FC<DialogProps> = ({
   title,
   open,
-  closeDialog,
+  onClose,
+  formAction,
+  buttons,
   children,
 }) => {
   return (
-    <MUIDialog open={open} maxWidth="md" fullWidth>
-      <DialogContent>{children}</DialogContent>
-      <DialogActions sx={{ px: 3, pt: 0, pb: 3 }}>
-        <Grid container justifyContent="space-between">
-          <Grid item>
-            <Button
-              sx={{
-                backgroundColor: "white",
-                color: "#666",
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-              }}
-              onClick={() => {
-                closeDialog();
-              }}
-            >
-              Cancel
-            </Button>
-          </Grid>
-          <Grid item>
-            <Button
-              sx={{
-                fontFamily: "Poppins, sans-serif",
-                fontWeight: 700,
-                borderRadius: 2,
-                textTransform: "none",
-                px: 3,
-              }}
-            >
-              Create Ticket
-            </Button>
-          </Grid>
-        </Grid>
-      </DialogActions>
-    </MUIDialog>
+    <InternalDialog
+      open={open}
+      onClose={onClose as any}
+      fullWidth
+      maxWidth="md"
+    >
+      {formAction ? (
+        <form action={formAction}>
+          <DialogDetails title={title} buttons={buttons}>
+            {children}
+          </DialogDetails>
+        </form>
+      ) : (
+        <DialogDetails title={title} buttons={buttons}>
+          {children}
+        </DialogDetails>
+      )}
+    </InternalDialog>
   );
 };