Edit and actions updates

packages/ui/components/Dialog.tsx

@@ -21,33 +21,49 @@ const DialogDetails: FC<DialogDetailsProps> = ({
   children,
   buttons,
 }) => {
-  const { h3 } = typography;
-  const { mediumGray, darkMediumGray } = colors;
+  const { h4 } = typography;
+  const { lightGray, mediumGray, darkMediumGray, white, almostBlack } = colors;
 
   return (
     <>
       <DialogTitle
         sx={{
           backgroundColor: mediumGray,
-          p: 3,
+          borderBottom: `1px solid ${darkMediumGray}`,
+          px: 3,
+          py: 2,
         }}
       >
         <Box
           sx={{
-            ...h3,
-            borderBottom: `1px solid ${darkMediumGray}`,
-            pb: 1.5,
+            ...h4,
+            color: almostBlack,
           }}
         >
           {title}
         </Box>
       </DialogTitle>
-      <DialogContent sx={{ backgroundColor: mediumGray, p: 3, pb: 4 }}>
-        {children}
+      <DialogContent
+        sx={{
+          backgroundColor: lightGray,
+          p: 3,
+          borderTop: `1px solid ${white}`,
+          borderBottom: `1px solid ${darkMediumGray}`,
+        }}
+      >
+        <Box sx={{ color: "white", py: 3 }}>{children}</Box>
       </DialogContent>
       {buttons && (
-        <DialogActions sx={{ backgroundColor: mediumGray, p: 3 }}>
-          {buttons}
+        <DialogActions sx={{ backgroundColor: mediumGray, p: 0 }}>
+          <Box
+            sx={{
+              p: 2,
+              borderTop: `1px solid ${white}`,
+              width: "100%",
+            }}
+          >
+            {buttons}
+          </Box>
         </DialogActions>
       )}
     </>
@@ -57,7 +73,8 @@ const DialogDetails: FC<DialogDetailsProps> = ({
 type DialogProps = {
   title: string;
   open: boolean;
-  onClose: Function;
+  onClose?: Function;
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   formAction?: any;
   buttons?: React.ReactNode;
   children?: any;
@@ -66,6 +83,7 @@ type DialogProps = {
 export const Dialog: FC<DialogProps> = ({
   title,
   open,
+  size = "md",
   onClose,
   formAction,
   buttons,
@@ -76,7 +94,7 @@ export const Dialog: FC<DialogProps> = ({
       open={open}
       onClose={onClose as any}
       fullWidth
-      maxWidth="md"
+      maxWidth={size}
     >
       {formAction ? (
         <form action={formAction}>