diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 758afff..887c883 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -2,7 +2,7 @@
import * as React from "react"
import { Toaster as Sonner, type ToasterProps } from "sonner"
-import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon, XIcon } from "lucide-react"
const Toaster = ({ ...props }: ToasterProps) => {
const theme = "light"
@@ -10,7 +10,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
return (
@@ -27,6 +29,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
loading: (
),
+ close: ,
}}
style={
{
diff --git a/index.html b/index.html
index 19d94e9..45b68c4 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,12 @@
+
+
+
Dify Batch Tester
diff --git a/src/App.tsx b/src/App.tsx
index 91e473d..98841cb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,7 +18,9 @@ import {
} from 'lucide-react';
import yaml from 'js-yaml';
import * as XLSX from 'xlsx';
-import { toast, Toaster } from 'sonner';
+import { toast } from 'sonner';
+
+import { Toaster } from '@/components/ui/sonner';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/src/index.css b/src/index.css
index a47ee6a..e9ed823 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,7 +1,6 @@
@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
@custom-variant dark (&:is(.dark *));
@@ -115,4 +114,25 @@
html {
@apply font-sans;
}
+}
+
+/* Sonner: pin close control to top-right (LTR); red hover feedback */
+[data-sonner-toaster].toast-close-tr[dir='ltr'] {
+ --toast-close-button-start: unset;
+ --toast-close-button-end: 0;
+ --toast-close-button-transform: translate(35%, -35%);
+}
+
+[data-sonner-toaster].toast-close-tr [data-sonner-toast][data-styled='true'] [data-close-button] {
+ transition:
+ opacity 100ms,
+ background 200ms,
+ border-color 200ms,
+ color 200ms;
+}
+
+[data-sonner-toaster].toast-close-tr [data-sonner-toast][data-styled='true'] [data-close-button]:hover:not([data-disabled='true']) {
+ background: hsl(0 93% 97%);
+ border-color: hsl(0 72% 51%);
+ color: hsl(0 72% 38%);
}
\ No newline at end of file