From cbd9ad03fc8ad9dfb97f82bd917bbaa36814ea39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Mon, 17 Nov 2025 17:15:20 +0100
Subject: [PATCH] fix: improve toast notification readability
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Enhanced toast notifications with better contrast and visibility:
- Increased background opacity from /10 to /90 for all variants
- Changed to thicker border (border-2) for better definition
- Added backdrop-blur-sm for depth and clarity
- Improved text contrast:
  * Success/Error/Info: White text on colored backgrounds
  * Warning: Black text on yellow background
  * Default: Uses theme foreground color
- Enhanced shadow (shadow-2xl) for better separation
- Added aria-label to close button for accessibility

Toast notifications are now clearly readable in both light and dark modes.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/ui/Toast.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
index 690fdc5..040fb04 100644
--- a/components/ui/Toast.tsx
+++ b/components/ui/Toast.tsx
@@ -100,17 +100,17 @@ function ToastItem({
   return (
     <div
       className={cn(
-        'flex items-start gap-3 rounded-lg border p-4 shadow-lg pointer-events-auto',
-        'animate-slideInFromRight',
+        'flex items-start gap-3 rounded-lg border-2 p-4 shadow-2xl pointer-events-auto',
+        'animate-slideInFromRight backdrop-blur-sm',
         {
-          'bg-card border-border': variant === 'default',
-          'bg-success/10 border-success text-success-foreground':
+          'bg-card/95 border-border text-foreground': variant === 'default',
+          'bg-success/90 border-success text-white dark:text-white':
             variant === 'success',
-          'bg-destructive/10 border-destructive text-destructive-foreground':
+          'bg-destructive/90 border-destructive text-white dark:text-white':
             variant === 'error',
-          'bg-warning/10 border-warning text-warning-foreground':
+          'bg-warning/90 border-warning text-black dark:text-black':
             variant === 'warning',
-          'bg-info/10 border-info text-info-foreground': variant === 'info',
+          'bg-info/90 border-info text-white dark:text-white': variant === 'info',
         }
       )}
     >
@@ -125,7 +125,8 @@ function ToastItem({
       </div>
       <button
         onClick={() => onRemove(toast.id)}
-        className="flex-shrink-0 rounded-md p-1 hover:bg-black/10 dark:hover:bg-white/10 transition-colors"
+        className="flex-shrink-0 rounded-md p-1 hover:bg-black/20 dark:hover:bg-white/20 transition-colors"
+        aria-label="Close"
       >
         <X className="h-4 w-4" />
       </button>