Refactor authentication and account management with modular UI components (#242)

web/frontend/app/components/ui/toast/ToastProvider.tsx

@@ -0,0 +1,28 @@
+import { Toaster } from 'react-hot-toast';
+
+const ToastProvider = () => {
+    return (
+        <Toaster
+            position="top-right"
+            toastOptions={{
+                duration: 3500,
+                className:
+                    'rounded-box border border-base-300 bg-base-100 text-base-content shadow-lg',
+                success: {
+                    iconTheme: {
+                        primary: 'var(--color-success)',
+                        secondary: 'var(--color-success-content)',
+                    },
+                },
+                error: {
+                    iconTheme: {
+                        primary: 'var(--color-error)',
+                        secondary: 'var(--color-error-content)',
+                    },
+                },
+            }}
+        />
+    );
+};
+
+export default ToastProvider;

web/frontend/app/components/ui/toast/toast.ts

@@ -0,0 +1,6 @@
+import toast from 'react-hot-toast';
+
+export const showSuccessToast = (message: string) => toast.success(message);
+export const showErrorToast = (message: string) => toast.error(message);
+export const showInfoToast = (message: string) => toast(message);
+export const dismissToasts = () => toast.dismiss();