toast design (#1314)

# Enhanced Toast Component UI and Functionality

## Description

This PR enhances the toast component's UI and functionality by:

1. Renaming `CustomToaster` to `Toaster` for better semantic clarity
2. Adding a loading icon using Lucide's `Loader2` component with animation
3. Improving toast styling with better padding, rounded corners, and proper dark mode support
5. Refining the action button styling with proper flex layout and gap spacing

## Type of Change

- [x] 🎨 UI/UX improvement

## Areas Affected

- [x] User Interface/Experience

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **New Features**
  - Added a loading icon to the loading toast notification for improved user feedback.
  - Updated the "Undo" action in persistent toast notifications to include an icon for better visual clarity.

- **Style**
  - Refreshed toast notification styles, including updated colors, padding, and button layouts for a more polished appearance and improved dark mode support.

- **Refactor**
  - Renamed the toast component for consistency across the app.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/mail/app/(routes)/toast-test.tsx

@@ -1,3 +1,4 @@
+import { Reply } from '@/components/icons/icons';
 import { Button } from '@/components/ui/button';
 import { toast } from 'sonner';
 import React from 'react';
@@ -82,7 +83,12 @@ const ToastTest = (props: Props) => {
             toast('Persistent Toast', {
               duration: 99999999999999, // 10 seconds
               action: {
-                label: 'Undo',
+                label: (
+                  <span className="flex items-center gap-1">
+                    <Reply className="fill-muted-foreground dark:fill-[#9B9B9B]" />
+                    Undo
+                  </span>
+                ),
                 onClick: () => console.log('Undo action clicked'),
               },
             });

apps/mail/components/ui/toast.tsx

@@ -4,39 +4,41 @@ import {
   ExclamationTriangle,
   InfoCircle,
 } from '@/components/icons/icons';
-import { Toaster } from 'sonner';
-import React from 'react';
+import { Toaster as SonnerToaster } from 'sonner';
+import { Loader2 } from 'lucide-react';
 
-type Props = {};
-
-const CustomToaster = (props: Props) => {
+const Toaster = () => {
   return (
-    <Toaster
+    <SonnerToaster
       position="bottom-center"
       icons={{
         success: <CircleCheck className="h-4.5 w-4.5 border-none fill-[#36B981]" />,
         error: <ExclamationCircle2 className="h-4.5 w-4.5 fill-[#FF0000]" />,
         warning: <ExclamationTriangle className="h-4.5 w-4.5 fill-[#FFC107]" />,
         info: <InfoCircle className="h-4.5 w-4.5 fill-[#5767fb]" />,
+        loading: <Loader2 className="stroke-muted-foreground h-[17px] w-[17px] animate-spin" />,
       }}
       toastOptions={{
         classNames: {
-          title: 'title flex-1 justify-center text-black dark:text-white text-sm leading-none',
-          description: 'text-black dark:text-white text-xs',
-          toast: 'px-3',
-          actionButton: 'bg-[#DBDBDB] text-lg',
-          cancelButton: 'bg-[#DBDBDB] text-lg',
-          closeButton: 'bg-[#DBDBDB] text-lg',
-          loading: 'pl-3 pr-2',
-          loader: 'pl-3 pr-2',
-          icon: 'pl-3 pr-2',
-          content: 'pl-2',
+          title: 'title flex-1 justify-center !text-black dark:!text-white text-sm leading-none',
+          description: '!text-black dark:!text-white text-xs',
+          toast: 'p-1',
+          actionButton:
+            'inline-flex h-7 items-center justify-center gap-1 overflow-hidden !rounded-md border px-1.5 dark:border-none !bg-[#E0E0E0] dark:!bg-[#424242]',
+          cancelButton:
+            'inline-flex h-7 items-center justify-center gap-1 overflow-hidden !rounded-md border px-1.5 dark:border-none !bg-[#E0E0E0] dark:!bg-[#424242]',
+          closeButton:
+            'inline-flex h-7 items-center justify-center gap-1 overflow-hidden !rounded-md border px-1.5 dark:border-none !bg-[#E0E0E0] dark:!bg-[#424242]',
+          loading: 'pl-3 -mr-3 loading',
+          loader: 'pl-3 loader -mr-3',
+          icon: 'pl-3 icon mr-2',
+          content: 'p-1.5 pl-2',
           default:
-            'w-96 px-1.5 bg-white dark:bg-[#2C2C2C] rounded-xl inline-flex items-center gap-2 overflow-visible border dark:border-none',
+            'w-96 p-1.5 bg-white dark:bg-[#2C2C2C] rounded-xl inline-flex items-center gap-2 overflow-visible border dark:border-none',
         },
       }}
     />
   );
 };
 
-export default CustomToaster;
+export default Toaster;

apps/mail/providers/client-providers.tsx

@@ -2,9 +2,9 @@ import { NuqsAdapter } from 'nuqs/adapters/react-router/v7';
 import { SidebarProvider } from '@/components/ui/sidebar';
 import { PostHogProvider } from '@/lib/posthog-provider';
 import { useSettings } from '@/hooks/use-settings';
-import CustomToaster from '@/components/ui/toast';
 import { Provider as JotaiProvider } from 'jotai';
 import type { PropsWithChildren } from 'react';
+import Toaster from '@/components/ui/toast';
 import { ThemeProvider } from 'next-themes';
 
 export function ClientProviders({ children }: PropsWithChildren) {
@@ -24,7 +24,7 @@ export function ClientProviders({ children }: PropsWithChildren) {
           <SidebarProvider>
             <PostHogProvider>
               {children}
-              <CustomToaster />
+              <Toaster />
             </PostHogProvider>
           </SidebarProvider>
         </ThemeProvider>