diff --git a/src/components/ui/Toaster.tsx b/src/components/ui/Toaster.tsx index fbf02781a8..4667967da7 100644 --- a/src/components/ui/Toaster.tsx +++ b/src/components/ui/Toaster.tsx @@ -15,9 +15,9 @@ const Toaster = ({ ...props }: ToasterProps) => { toastOptions={{ classNames: { toast: - "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg data-[button]:bg-button-primary-background gap-2 focus-visible:ring-2", + "flex items-start group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg data-[button]:bg-button-primary-background gap-2 focus-visible:ring-2", title: "font-bold", - description: "group-[.toast]:text-foreground-secondary", + description: "group-[.toast]:text-foreground-dimmed", actionButton: "group-[.toast]:!bg-button-primary-background group-[.toast]:!text-button-primary-foreground", closeButton: diff --git a/src/stories/Toast.stories.tsx b/src/stories/Toast.stories.tsx index b8b567602d..d73f828910 100644 --- a/src/stories/Toast.stories.tsx +++ b/src/stories/Toast.stories.tsx @@ -1,5 +1,6 @@ import { Button } from "@/components/ui/Button"; import { Toaster } from "@/components/ui/Toaster"; +import { BookOpen } from "@phosphor-icons/react"; import type { Meta, StoryObj } from "@storybook/react"; import { toast } from "sonner"; @@ -8,18 +9,24 @@ type ToastExampleProps = { description?: string; action?: boolean; closeButton?: boolean; + withIcon?: boolean; + durationMs?: number; }; const ToastExample = ({ title = "Toast example", description, action, closeButton, + withIcon, + durationMs: duration, }: ToastExampleProps) => { return ( <>