From eacc495c024393b25cbf2025c968fb56b4ba51d7 Mon Sep 17 00:00:00 2001 From: Ahmet Kilinc Date: Tue, 17 Jun 2025 02:54:29 +0100 Subject: [PATCH] toast design (#1314) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # 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 ## 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. --- apps/mail/app/(routes)/toast-test.tsx | 8 ++++- apps/mail/components/ui/toast.tsx | 38 +++++++++++++----------- apps/mail/providers/client-providers.tsx | 4 +-- 3 files changed, 29 insertions(+), 21 deletions(-) diff --git a/apps/mail/app/(routes)/toast-test.tsx b/apps/mail/app/(routes)/toast-test.tsx index afe61e290..9d7ffce69 100644 --- a/apps/mail/app/(routes)/toast-test.tsx +++ b/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: ( + + + Undo + + ), onClick: () => console.log('Undo action clicked'), }, }); diff --git a/apps/mail/components/ui/toast.tsx b/apps/mail/components/ui/toast.tsx index d8277f4c8..70e231e12 100644 --- a/apps/mail/components/ui/toast.tsx +++ b/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 ( - , error: , warning: , info: , + loading: , }} 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; diff --git a/apps/mail/providers/client-providers.tsx b/apps/mail/providers/client-providers.tsx index 000a6e8c2..78368fb31 100644 --- a/apps/mail/providers/client-providers.tsx +++ b/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) { {children} - +