feat: add close button and data-testids to toast messages

pages/_app.tsx

@@ -5,7 +5,8 @@ import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import AuthRedirect from "@/layouts/AuthRedirect";
-import { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
+import { Toaster, ToastBar } from "react-hot-toast";
 import { Session } from "next-auth";
 import { isPWA } from "@/lib/client/utils";
 
@@ -61,7 +62,30 @@ export default function App({
             className:
               "border border-sky-100 dark:border-neutral-700 dark:bg-neutral-800 dark:text-white",
           }}
-        />
+        >
+          {(t) => (
+            <ToastBar toast={t}>
+              {({ icon, message }) => (
+                <div
+                  className="flex flex-row"
+                  data-testid="toast-message-container"
+                  data-type={t.type}
+                >
+                  {icon}
+                  <span data-testid="toast-message">{message}</span>
+                  {t.type !== "loading" && (
+                    <button
+                      data-testid="close-toast-button"
+                      onClick={() => toast.dismiss(t.id)}
+                    >
+                      <i className="bi bi-x"></i>
+                    </button>
+                  )}
+                </div>
+              )}
+            </ToastBar>
+          )}
+        </Toaster>
         <Component {...pageProps} />
       </AuthRedirect>
     </SessionProvider>