Toast notification styling

web/src/layouts/NavbarLayout/NavbarLayout.tsx

@@ -2,8 +2,10 @@ import { mdiMenu } from '@mdi/js'
 import Icon from '@mdi/react'
 
 import { Link, routes } from '@redwoodjs/router'
+import { Toaster } from '@redwoodjs/web/toast'
 
 import ThemeToggle from 'src/components/ThemeToggle/ThemeToggle'
+import ToastNotification from 'src/components/ToastNotification/ToastNotification'
 
 interface NavbarRoute {
   name: string
@@ -32,6 +34,22 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
 
   return (
     <>
+      <Toaster
+        position="top-right"
+        containerClassName="-mr-2 mt-16"
+        containerStyle={{
+          zIndex: 50, // "z-50" does not work
+        }}
+        gutter={8}
+      >
+        {(t) => (
+          <ToastNotification
+            t={t}
+            type={t.type}
+            message={t.message.toString()}
+          />
+        )}
+      </Toaster>
       <div className="sticky top-0 z-50 p-2">
         <div className="navbar rounded-xl bg-base-300 shadow-xl">
           <div className="navbar-start space-x-2 lg:first:space-x-0">