From 721b1860517fcd4e5c233fccfda9bc3724fc7b74 Mon Sep 17 00:00:00 2001 From: Xin Wang Date: Sat, 18 Apr 2026 13:29:39 +0800 Subject: [PATCH] Improve toasts and font loading Made-with: Cursor --- components/ui/sonner.tsx | 7 +++++-- index.html | 6 ++++++ src/App.tsx | 4 +++- src/index.css | 22 +++++++++++++++++++++- 4 files changed, 35 insertions(+), 4 deletions(-) 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