Skip to content

Commit

Permalink
fix dialog styling
Browse files Browse the repository at this point in the history
  • Loading branch information
vidvidvid committed Nov 22, 2024
1 parent 4d2430f commit 04595c3
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 37 deletions.
6 changes: 5 additions & 1 deletion packages/ui/app/_components/dialogs/loop/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 5 additions & 1 deletion packages/ui/app/_components/dialogs/manage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
137 changes: 102 additions & 35 deletions packages/ui/components/ui/dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,108 @@
import * as React from 'react';

import * as DialogPrimitive from '@radix-ui/react-dialog';
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;
Expand All @@ -24,38 +122,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
Expand Down Expand Up @@ -85,7 +152,6 @@ const DialogTitle = React.forwardRef<
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;

// Rest of the components remain unchanged
const DialogFooter = ({
className,
...props
Expand Down Expand Up @@ -113,6 +179,7 @@ const DialogDescription = React.forwardRef<
DialogDescription.displayName = DialogPrimitive.Description.displayName;

export {
type DialogSize,
Dialog,
DialogPortal,
DialogOverlay,
Expand Down

0 comments on commit 04595c3

Please sign in to comment.