feat: style Sonner toasts to match glassmorphic app theme
Drop richColors, apply dark glass background with subtle per-type border tints (primary/success, red/error, amber/warning, blue/info). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -25,7 +25,23 @@ export function Providers({ children }: { children: React.ReactNode }) {
|
|||||||
<SWRegistration />
|
<SWRegistration />
|
||||||
{children}
|
{children}
|
||||||
</TooltipProvider>
|
</TooltipProvider>
|
||||||
<Toaster position="top-right" richColors />
|
<Toaster
|
||||||
|
theme="dark"
|
||||||
|
position="bottom-right"
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast:
|
||||||
|
'!bg-[#13131f] !border !border-white/8 !text-white/85 !rounded-xl !shadow-2xl !font-sans',
|
||||||
|
title: '!text-sm !font-medium !text-white/85',
|
||||||
|
description: '!text-xs !text-white/45',
|
||||||
|
icon: '!mt-px',
|
||||||
|
success: '!border-primary/25',
|
||||||
|
error: '!border-red-500/25',
|
||||||
|
warning: '!border-amber-400/25',
|
||||||
|
info: '!border-blue-400/25',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user