Refactor dialog components and styles for improved UI consistency
Updated the dialog components to use a unified class name, replacing 'crt-panel' with 'crt-dialog' for better clarity and consistency across the application. Enhanced the dialog overlay with a denser background and blur effect to improve readability against underlying content. Additionally, modified the UploadSnackbar and ShowsPanel to reflect these changes, ensuring a cohesive user experience.
This commit is contained in:
@@ -12,7 +12,9 @@ const DialogOverlay = forwardRef<
|
||||
>(({ className, ...props }, ref) => (
|
||||
<DialogPrimitive.Overlay
|
||||
ref={ref}
|
||||
className={cn('fixed inset-0 z-50 bg-black/60', className)}
|
||||
// Затемнение плотнее и с размытием: под диалогом обычно сетка эфира, и её строки
|
||||
// просвечивали сквозь окно, мешая читать поля.
|
||||
className={cn('fixed inset-0 z-50 bg-black/80 backdrop-blur-sm', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
@@ -27,7 +29,7 @@ export const DialogContent = forwardRef<
|
||||
<DialogPrimitive.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'crt-panel fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6',
|
||||
'crt-dialog fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md p-6',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -47,7 +47,7 @@ function ToastItem({
|
||||
return (
|
||||
<output
|
||||
className={cn(
|
||||
'crt-panel pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm shadow-lg',
|
||||
'crt-dialog pointer-events-auto flex items-start gap-3 rounded-md px-4 py-3 text-sm',
|
||||
variant === 'success' && 'border-primary/60',
|
||||
variant === 'error' && 'border-red-700/60 text-red-400',
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user