Updated DialogContent

Author: fgatti675

packages/ui/README.md

@@ -89,7 +89,7 @@ navigating through **subcollections** and accessing custom views (such as custom
 forms or blog previews). This functionality can also be accessed
 programmatically using the `useSideEntityController` hook.
 
-FireCMS includes **over 15 built-in fields** with numerous customization and
+FireCMS includes **over 20 built-in fields** with numerous customization and
 validation options. The components have been carefully designed for an
 outstanding user experience, including advanced features like **references** to
 other collections, **markdown**, and **array reordering**.

packages/ui/src/components/DialogContent.tsx

@@ -17,7 +17,7 @@ export function DialogContent({
         </div>;
 
     return <div
-        className={cls("py-6 px-6 h-full flex-grow", className)}>
+        className={cls("my-6 mx-6 h-full flex-grow", className)}>
         {children}
     </div>;
 }

packages/ui/src/components/DialogTitle.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { Typography, TypographyProps, TypographyVariant } from "./Typography";
+import { cls } from "../util";
 
 export type DialogContentProps = TypographyProps & {
     children: React.ReactNode,
@@ -14,13 +15,13 @@ export function DialogTitle({
                                 children,
                                 hidden,
                                 className,
-                                variant = "h4",
+                                variant = "subtitle2",
                                 ...props
                             }: DialogContentProps) {
 
     const title = <DialogPrimitive.Title asChild>
         <Typography variant={variant}
-                    className={className}
+                    className={cls("mt-8 mb-6 mx-6", className)}
                     {...props}>
             {children}
         </Typography>