From e622484ae2a7cbd05ebf46c4c141a8eedec3e2bb Mon Sep 17 00:00:00 2001 From: Danil Kostromin Date: Mon, 15 Jan 2024 06:00:01 +0200 Subject: [PATCH] style(ui): [toaster] add colors for different states Added different icon colors for different toast types e.g. success|warning|info|error, so it's easier to distinguish if something failed, or it's some general information or tip message Signed-off-by: Danil Kostromin --- .../tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/libs/shared/tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx b/libs/shared/tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx index 4b2809ab..274610d3 100644 --- a/libs/shared/tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx +++ b/libs/shared/tailwind-ui/src/lib/sonner-toaster/sonner-toaster.tsx @@ -19,7 +19,11 @@ const Toaster = ({ ...props }: ToasterProps) => { actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-white group-[.toast]:rounded-md', cancelButton: - 'group-[.toast]:bg-bg-error group-[.toast]:text-white group-[.toast]:rounded-md' + 'group-[.toast]:bg-bg-error group-[.toast]:text-white group-[.toast]:rounded-md', + success: 'group-[.toaster_[data-icon]]:text-bg-ok', + error: 'group-[.toaster_[data-icon]]:text-bg-error', + warning: 'group-[.toaster_[data-icon]]:text-bg-warning', + info: 'group-[.toaster_[data-icon]]:text-primary' } }} {...props}