fix dialog styling

lint fix
ionicprotocol · Nov 22, 2024 · cd26183 · cd26183
1 parent 4d2430f
commit cd26183
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 35 deletions.
diff --git a/packages/ui/app/_components/dialogs/loop/index.tsx b/packages/ui/app/_components/dialogs/loop/index.tsx
@@ -586,7 +586,11 @@ export default function Loop({
         open={isOpen}
         onOpenChange={setIsOpen}
       >
-        <DialogContent>
+        <DialogContent
+          maxWidth="800px"
+          className="bg-grayUnselect"
+          fullWidth
+        >
           <DialogHeader>
             <DialogTitle>
               <div className="flex items-center text-lg font-bold">

diff --git a/packages/ui/app/_components/dialogs/manage/index.tsx b/packages/ui/app/_components/dialogs/manage/index.tsx
@@ -176,7 +176,11 @@ const ManageDialog = ({
         open={isOpen}
         onOpenChange={setIsOpen}
       >
-        <DialogContent className="w-[85%] sm:w-[55%] md:w-[45%] bg-grayUnselect">
+        <DialogContent
+          maxWidth="800px"
+          className="bg-grayUnselect"
+          fullWidth
+        >
           <div className="flex w-20 mx-auto relative text-center">
             <Image
               alt="modlogo"

diff --git a/packages/ui/components/ui/dialog.tsx b/packages/ui/components/ui/dialog.tsx
@@ -5,6 +5,106 @@ import { X } from 'lucide-react';
 
 import { cn } from '@ui/lib/utils';
 
+const dialogSizeVariants = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  full: 'max-w-full',
+  fitContent: 'max-w-fit',
+  percentage: {
+    80: 'w-[80%]',
+    90: 'w-[90%]',
+    95: 'w-[95%]'
+  }
+} as const;
+
+type DialogSize =
+  | keyof typeof dialogSizeVariants
+  | keyof typeof dialogSizeVariants.percentage;
+
+interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  hideCloseButton?: boolean;
+  size?: DialogSize;
+  minWidth?: string;
+  maxWidth?: string;
+  fullWidth?: boolean;
+}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(
+  (
+    {
+      className,
+      children,
+      hideCloseButton = false,
+      size = '2xl',
+      minWidth,
+      maxWidth,
+      fullWidth = false,
+      style,
+      ...props
+    },
+    ref
+  ) => {
+    // Build the style object with min and max width
+    const combinedStyle = React.useMemo(
+      () => ({
+        ...style,
+        ...(minWidth && { minWidth }),
+        ...(maxWidth && { maxWidth }),
+        width: fullWidth ? '100%' : undefined
+      }),
+      [style, minWidth, maxWidth, fullWidth]
+    );
+
+    // Get the base size class
+    const getSizeClass = () => {
+      if (size in dialogSizeVariants) {
+        return dialogSizeVariants[size as keyof typeof dialogSizeVariants];
+      }
+      if (size in dialogSizeVariants.percentage) {
+        return dialogSizeVariants.percentage[
+          size as keyof typeof dialogSizeVariants.percentage
+        ];
+      }
+      return dialogSizeVariants['2xl'];
+    };
+
+    return (
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <DialogPrimitive.Content
+          ref={ref}
+          style={combinedStyle}
+          className={cn(
+            'fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background px-6 py-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-3xl',
+            getSizeClass(),
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {!hideCloseButton && (
+            <DialogPrimitive.Close className="absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+              <X className="h-6 w-6" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Content>
+      </DialogPrimitive.Portal>
+    );
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
@@ -24,38 +124,7 @@ const DialogOverlay = React.forwardRef<
   />
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-interface DialogContentProps
-  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-  hideCloseButton?: boolean;
-}
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ className, children, hideCloseButton = false, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background px-6 py-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-3xl',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      {!hideCloseButton && (
-        <DialogPrimitive.Close className="absolute right-6 top-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-          <X className="h-6 w-6" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
+// Rest of the components remain unchanged
 const DialogHeader = ({
   className,
   ...props
@@ -85,7 +154,6 @@ const DialogTitle = React.forwardRef<
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
-// Rest of the components remain unchanged
 const DialogFooter = ({
   className,
   ...props
@@ -113,6 +181,7 @@ const DialogDescription = React.forwardRef<
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
+  type DialogSize,
   Dialog,
   DialogPortal,
   DialogOverlay,