chore: align toast to start (#1565)

guildxyz · Nov 26, 2024 · d5efb98 · d5efb98
1 parent aed3507
commit d5efb98
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git 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
@@ -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 (
     <>
       <Button
         onClick={() =>
           toast(title, {
+            duration,
+            icon: withIcon && <BookOpen weight="fill" />,
             description,
             action: action ? (
               <Button size="xs" className="ml-auto min-w-max">
@@ -52,5 +59,7 @@ export const Default: Story = {
     description: "",
     action: false,
     closeButton: false,
+    withIcon: false,
+    durationMs: 4000,
   },
 };