#49

frontend/src/components/ui/toaster.tsx

@@ -1,34 +1,30 @@
-"use client"
+'use client'
 
-import { useToast } from "@/components/ui/use-toast"
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from "@/components/ui/toast"
+import { useToast } from '@/components/ui/use-toast'
+import { Toast,
+	 ToastClose,
+	 ToastDescription,
+	 ToastProvider,
+	 ToastTitle,
+	 ToastViewport } from '@/components/ui/toast'
 
-export function Toaster() {
-  const { toasts } = useToast()
+
+export const Toaster = () => {
+  const { toasts } = useToast ()
 
   return (
     <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && (
-                <ToastDescription>{description}</ToastDescription>
-              )}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        )
-      })}
+      {toasts.map (({ id, title, description, action, ...props }) => (
+	  <Toast key={id}
+		 className="bg-gray-300/80 dark:bg-gray-700/80"
+		 {...props}>
+	    <div className="grid gap-1">
+	      {title && <ToastTitle>{title}</ToastTitle>}
+	      {description && <ToastDescription>{description}</ToastDescription>}
+	    </div>
+	    {action}
+	    <ToastClose />
+	  </Toast>))}
       <ToastViewport />
     </ToastProvider>
   )