From 12cdeba54cccf18d36e75ed968547a79fb9afb52 Mon Sep 17 00:00:00 2001
From: Ivan Vasilov <vasilov.ivan@gmail.com>
Date: Wed, 24 Jul 2024 16:40:26 +0200
Subject: [PATCH] Try to add a close button to the sonner toasts.

---
 packages/ui/src/components/shadcn/ui/sonner.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/shadcn/ui/sonner.tsx b/packages/ui/src/components/shadcn/ui/sonner.tsx
index e3089f6e8b2..aefe301a2e5 100644
--- a/packages/ui/src/components/shadcn/ui/sonner.tsx
+++ b/packages/ui/src/components/shadcn/ui/sonner.tsx
@@ -8,7 +8,7 @@ import { StatusIcon } from './../../StatusIcon'
 
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
-const SonnerToaster = ({ ...props }: ToasterProps) => {
+const SonnerToaster = ({ toastOptions, ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme()
 
   return (
@@ -48,8 +48,23 @@ const SonnerToaster = ({ ...props }: ToasterProps) => {
             'group toast group-[.toaster]:!bg-warning-200 group-[.toaster]:!border-warning-500',
           error:
             'group toast group-[.toaster]:!bg-destructive-200 group-[.toaster]:!border-destructive-500',
+          closeButton: cn(
+            // unset all styles set from sonner
+            'relative order-last transform-none',
+            // make it similar to the existing react toast
+            'text-foreground/50 opacity-0 transition-opacity -mr-4 bg-transparent border-0 hover:!bg-transparent hover:border-transparent',
+            'hover:text-foreground group-hover:opacity-100',
+            'focus:outline-none focus:ring-2 focus:opacity-100'
+            // 'group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400',
+            // 'group-[.destructive]:focus:ring-offset-red-600',
+          ),
+          content: 'grow',
         },
+        closeButton: true,
+        duration: Infinity,
+        ...toastOptions,
       }}
+      cn={cn}
       {...props}
     />
   )