style: improve current provider visual feedback and toast duration

- Add light blue ring border to active provider card instead of solid border
- Fix border flashing issue when switching providers
- Reduce toast notification duration from 4s to 2s for better UX
This commit is contained in:
Jason
2025-10-30 16:48:07 +08:00
parent 64f2220ad9
commit b3e14b3985
2 changed files with 3 additions and 2 deletions

View File

@@ -94,9 +94,9 @@ export function ProviderCard({
<div <div
className={cn( className={cn(
"rounded-lg bg-card p-4 shadow-sm", "rounded-lg bg-card p-4 shadow-sm",
"transition-[border-color,background-color,box-shadow] duration-200", "transition-[border-color,background-color,box-shadow,ring] duration-200",
isCurrent isCurrent
? "border-active border-border-active bg-primary/5" ? "border border-border-default bg-primary/5 ring-2 ring-blue-500/30 dark:ring-blue-400/30"
: "border border-border-default hover:border-border-hover", : "border border-border-default hover:border-border-hover",
dragHandleProps?.isDragging && dragHandleProps?.isDragging &&
"cursor-grabbing border-active border-border-dragging shadow-lg", "cursor-grabbing border-active border-border-dragging shadow-lg",

View File

@@ -7,6 +7,7 @@ export function Toaster() {
richColors richColors
theme="system" theme="system"
toastOptions={{ toastOptions={{
duration: 2000,
classNames: { classNames: {
toast: toast:
"group rounded-md border bg-background text-foreground shadow-lg", "group rounded-md border bg-background text-foreground shadow-lg",