From 23aa35791773de34ba2d582ee010469dbb763365 Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Sat, 20 Jun 2026 22:06:03 +0700
Subject: [PATCH] style: update toaster component styles for improved visual
 consistency and clarity

---
 resources/css/app.css | 61 ++++++++++++++++++++++++++++---------------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 7b8d210..cdf1506 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -175,31 +175,50 @@ @layer utilities {
     }
 }
 
-/* sonner */
-[data-sonner-toast][data-type="success"] {
-    border-left: 4px solid rgb(34 197 94);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
+/* Base */
+.toaster [data-sonner-toast] {
+    background: hsl(var(--background)) !important;
+    color: hsl(var(--foreground)) !important;
+    border: 1px solid hsl(var(--border)) !important;
 }
 
-[data-sonner-toast][data-type="error"] {
-    border-left: 4px solid rgb(239 68 68);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
+/* Description */
+.toaster [data-description] {
+    color: hsl(var(--muted-foreground)) !important;
 }
 
-[data-sonner-toast][data-type="warning"] {
-    border-left: 4px solid rgb(245 158 11);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
+/* Success */
+.toaster [data-sonner-toast][data-type="success"] {
+    border-left: 4px solid rgb(34 197 94) !important;
 }
 
-[data-sonner-toast][data-type="info"] {
-    border-left: 4px solid rgb(59 130 246);
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 0;
+.toaster [data-sonner-toast][data-type="success"] [data-icon] {
+    color: rgb(34 197 94) !important;
+}
+
+/* Error */
+.toaster [data-sonner-toast][data-type="error"] {
+    border-left: 4px solid rgb(239 68 68) !important;
+}
+
+.toaster [data-sonner-toast][data-type="error"] [data-icon] {
+    color: rgb(239 68 68) !important;
+}
+
+/* Warning */
+.toaster [data-sonner-toast][data-type="warning"] {
+    border-left: 4px solid rgb(245 158 11) !important;
+}
+
+.toaster [data-sonner-toast][data-type="warning"] [data-icon] {
+    color: rgb(245 158 11) !important;
+}
+
+/* Info */
+.toaster [data-sonner-toast][data-type="info"] {
+    border-left: 4px solid rgb(59 130 246) !important;
+}
+
+.toaster [data-sonner-toast][data-type="info"] [data-icon] {
+    color: rgb(59 130 246) !important;
 }