style: change toast notifcation styling to match company design guidelines

This commit is contained in:
Usman Baig
2026-01-18 23:20:13 +01:00
parent 743d35b802
commit 037318b5bf

View File

@@ -42,7 +42,24 @@ export default function RootLayout({
<ThemeProviders>
<AuthProvider>
<LayoutContent>{children}</LayoutContent>
<Toaster position="top-center" richColors closeButton />
<Toaster
position="top-center"
closeButton
theme="system"
className="toaster group"
toastOptions={{
classNames: {
toast: 'group toast group-[.toaster]:bg-white group-[.toaster]:dark:bg-neutral-900 group-[.toaster]:text-neutral-950 group-[.toaster]:dark:text-neutral-50 group-[.toaster]:border-neutral-200 group-[.toaster]:dark:border-neutral-800 group-[.toaster]:shadow-lg group-[.toaster]:rounded-xl font-medium',
description: 'group-[.toast]:text-neutral-500 group-[.toast]:dark:text-neutral-400',
actionButton: 'group-[.toast]:bg-neutral-900 group-[.toast]:dark:bg-neutral-50 group-[.toast]:text-neutral-50 group-[.toast]:dark:text-neutral-900',
cancelButton: 'group-[.toast]:bg-neutral-100 group-[.toast]:dark:bg-neutral-800 group-[.toast]:text-neutral-500 group-[.toast]:dark:text-neutral-400',
success: 'group-[.toast]:!text-green-600 group-[.toast]:dark:!text-green-400',
error: 'group-[.toast]:!text-red-600 group-[.toast]:dark:!text-red-400',
warning: 'group-[.toast]:!text-amber-600 group-[.toast]:dark:!text-amber-400',
info: 'group-[.toast]:!text-blue-600 group-[.toast]:dark:!text-blue-400',
},
}}
/>
</AuthProvider>
</ThemeProviders>
</body>