feat(desktop): custom update toast

3 files changed, 16 insertions, 6 deletions

diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 94d9544d6..8642be0f8 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -53,6 +53,7 @@ const icons = {
   check: `<path d="M5 11.9657L8.37838 14.7529L15 5.83398" stroke="currentColor" stroke-linecap="square"/>`,
   photo: `<path d="M16.6665 16.6666L11.6665 11.6666L9.99984 13.3333L6.6665 9.99996L3.08317 13.5833M2.9165 2.91663H17.0832V17.0833H2.9165V2.91663ZM13.3332 7.49996C13.3332 8.30537 12.6803 8.95829 11.8748 8.95829C11.0694 8.95829 10.4165 8.30537 10.4165 7.49996C10.4165 6.69454 11.0694 6.04163 11.8748 6.04163C12.6803 6.04163 13.3332 6.69454 13.3332 7.49996Z" stroke="currentColor" stroke-linecap="square"/>`,
   share: `<path d="M10.0013 12.0846L10.0013 3.33464M13.7513 6.66797L10.0013 2.91797L6.2513 6.66797M17.0846 10.418V17.0846H2.91797V10.418" stroke="currentColor" stroke-linecap="square"/>`,
+  download: `<path d="M13.9583 10.6257L10 14.584L6.04167 10.6257M10 2.08398V13.959M16.25 17.9173H3.75" stroke="currentColor" stroke-linecap="square"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {
diff --git a/packages/ui/src/components/toast.css b/packages/ui/src/components/toast.css
index 374dd6523..8f6cf1941 100644
--- a/packages/ui/src/components/toast.css
+++ b/packages/ui/src/components/toast.css
@@ -134,7 +134,7 @@
     padding: 0;
     cursor: pointer;
 
-    color: var(--text-invert-strong);
+    color: var(--text-invert-weak);
     font-family: var(--font-family-sans);
     font-size: var(--font-size-base);
     font-weight: var(--font-weight-medium);
@@ -145,8 +145,8 @@
       text-decoration: underline;
     }
 
-    &:last-child {
-      color: var(--text-invert-weak);
+    &:first-child {
+      color: var(--text-invert-strong);
     }
   }
 
diff --git a/packages/ui/src/components/toast.tsx b/packages/ui/src/components/toast.tsx
index 5869f8a6b..c1a29cd04 100644
--- a/packages/ui/src/components/toast.tsx
+++ b/packages/ui/src/components/toast.tsx
@@ -91,7 +91,7 @@ export type ToastVariant = "default" | "success" | "error" | "loading"
 
 export interface ToastAction {
   label: string
-  onClick: () => void
+  onClick: "dismiss" | (() => void)
 }
 
 export interface ToastOptions {
@@ -100,13 +100,19 @@ export interface ToastOptions {
   icon?: IconProps["name"]
   variant?: ToastVariant
   duration?: number
+  persistent?: boolean
   actions?: ToastAction[]
 }
 
 export function showToast(options: ToastOptions | string) {
   const opts = typeof options === "string" ? { description: options } : options
   return toaster.show((props) => (
-    <Toast toastId={props.toastId} duration={opts.duration} data-variant={opts.variant ?? "default"}>
+    <Toast
+      toastId={props.toastId}
+      duration={opts.duration}
+      persistent={opts.persistent}
+      data-variant={opts.variant ?? "default"}
+    >
       <Show when={opts.icon}>
         <Toast.Icon name={opts.icon!} />
       </Show>
@@ -120,7 +126,10 @@ export function showToast(options: ToastOptions | string) {
         <Show when={opts.actions?.length}>
           <Toast.Actions>
             {opts.actions!.map((action) => (
-              <button data-slot="toast-action" onClick={action.onClick}>
+              <button
+                data-slot="toast-action"
+                onClick={typeof action.onClick === "function" ? action.onClick : () => toaster.dismiss(props.toastId)}
+              >
                 {action.label}
               </button>
             ))}