From cf5eeb63c488f9978f12659af59286315b768eea Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 9 Dec 2024 20:50:10 +0800
Subject: [PATCH] feat: update toast style

Signed-off-by: Innei <tukon479@gmail.com>
---
 apps/renderer/src/styles/additional.css    | 48 ++++++++++++++++++++++
 packages/components/src/ui/toast/index.tsx |  1 +
 2 files changed, 49 insertions(+)

diff --git a/apps/renderer/src/styles/additional.css b/apps/renderer/src/styles/additional.css
index d3a06e6025..28f35d2c30 100644
--- a/apps/renderer/src/styles/additional.css
+++ b/apps/renderer/src/styles/additional.css
@@ -40,3 +40,51 @@
     rgba(255, 255, 255, 0) 100%
   );
 }
+
+/* Sonner customize */
+
+@media (max-width: 600px) {
+  #root [data-sonner-toaster][data-y-position="bottom"] {
+    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
+  }
+
+  #root [data-sonner-toaster][data-y-position="top"] {
+    top: calc(env(safe-area-inset-top, 0px) + 20px);
+  }
+
+  #root [data-sonner-toast] {
+    --border-radius: 16px;
+  }
+
+  #root [data-button="true"][data-action="true"] {
+    @apply bg-transparent font-bold font-sans text-foreground relative -mr-[16px] px-4 before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-foreground/30;
+  }
+}
+
+#root [data-sonner-toast] {
+  &[data-type="success"]::before,
+  &[data-type="error"]::before,
+  &[data-type="info"]::before,
+  &[data-type="warning"]::before {
+    content: "";
+    border-radius: var(--border-radius);
+
+    @apply absolute inset-0 pointer-events-none z-[-1] opacity-20 !transform-none;
+  }
+
+  &[data-type="success"]::before {
+    background: linear-gradient(to left, #56b4d3, #348f50);
+  }
+
+  &[data-type="error"]::before {
+    background: linear-gradient(to right, #ee9ca7, #ffdde1);
+  }
+
+  &[data-type="info"]::before {
+    background: linear-gradient(to right, #64a7d5, #6dd5fa, #c5eef4);
+  }
+
+  &[data-type="warning"]::before {
+    background: linear-gradient(to right, #f2994a, #f2c94c);
+  }
+}
diff --git a/packages/components/src/ui/toast/index.tsx b/packages/components/src/ui/toast/index.tsx
index 8afecc4c95..946016ab7a 100644
--- a/packages/components/src/ui/toast/index.tsx
+++ b/packages/components/src/ui/toast/index.tsx
@@ -14,6 +14,7 @@ export const Toaster = ({ ...props }: ToasterProps) => (
         classNames: {
           content: "min-w-0",
           icon: tw`self-start translate-y-[2px]`,
+          actionButton: tw`font-sans font-medium`,
           closeButton: tw`!border-border !bg-background transition-opacity will-change-opacity duration-200 opacity-0 group-hover:opacity-100`,
         },
       }}