Customize toast design

src/components/ToasterClient.tsx

@@ -6,6 +6,9 @@ import { Toaster } from 'sonner';
 export default function ToasterClient() {
   const { theme } = useTheme();
   return (
-    <Toaster theme={theme as 'system' | 'light' | 'dark'} />
+    <Toaster
+      theme={theme as 'system' | 'light' | 'dark'}
+      className="!font-mono"
+    />
   );
 }

src/photo/PhotoModal.tsx

@@ -8,6 +8,7 @@ import { cc } from '@/utility/css';
 import { BiCopy } from 'react-icons/bi';
 import { Photo } from '.';
 import { toast } from 'sonner';
+import { FiCheckSquare } from 'react-icons/fi';
 
 export default function PhotoModal({ photo }: { photo: Photo }) {
   const shareUrl = absoluteRouteForPhoto(photo);
@@ -44,7 +45,10 @@ export default function PhotoModal({ photo }: { photo: Photo }) {
             )}
             onClick={() => {
               navigator.clipboard.writeText(shareUrl);
-              toast.success('Link to photo copied');
+              toast(
+                'Link to photo copied',
+                { icon: <FiCheckSquare size={16} /> },
+              );
             }}
           >
             <BiCopy size={18} />

src/site/SiteChecklistClient.tsx

@@ -4,7 +4,7 @@ import { useTransition } from 'react';
 import { useRouter } from 'next/navigation';
 import { cc } from '@/utility/css';
 import SiteChecklistRow from './SiteChecklistRow';
-import { FiExternalLink } from 'react-icons/fi';
+import { FiCheckSquare, FiExternalLink } from 'react-icons/fi';
 import { BiCopy, BiRefresh } from 'react-icons/bi';
 import IconButton from '@/components/LoaderIcon';
 import { toast } from 'sonner';
@@ -139,9 +139,12 @@ export default function SiteChecklistClient({
                 <IconButton
                   onClick={() => {
                     navigator.clipboard.writeText(secret);
-                    toast.success('Secret copied to clipboard', {
-                      duration: 4000,
-                    });
+                    toast(
+                      'Secret copied to clipboard', {
+                        icon: <FiCheckSquare size={16} />,
+                        duration: 4000,
+                      },
+                    );
                   }}
                 >
                   <BiCopy size={16} />