better checbox in mail list

apps/mail/components/icons/icons.tsx

@@ -1641,6 +1641,7 @@ export const Check = ({ className }: { className?: string }) => (
     <path
       id="Union"
       d="M6.40907 0.569119C6.58341 0.30762 6.93661 0.236654 7.19813 0.410916C7.45962 0.585241 7.53057 0.938456 7.35634 1.19998L3.56239 6.89138C3.46781 7.03326 3.31411 7.12556 3.14442 7.14236C2.97475 7.15915 2.806 7.09886 2.68544 6.9783L0.409072 4.70193C0.18694 4.47978 0.187156 4.11953 0.409072 3.89724C0.63133 3.67499 0.991493 3.675 1.21376 3.89724L2.99989 5.6824L6.40907 0.569119Z"
+      fill="currentColor"
     />
   </svg>
 );

apps/mail/components/mail/mail.tsx

@@ -486,9 +486,9 @@ export function MailLayout() {
                 )}
               >
                 <div className="flex w-full items-center justify-between gap-2">
-                  <div>
+                  <div className="flex items-center gap-2">
                     <SidebarToggle className="h-fit px-2" />
-                    <SelectAllCheckbox className="ml-2" />
+                    <SelectAllCheckbox />
                   </div>
 
                   <div className="flex items-center gap-2">

apps/mail/components/mail/select-all-checkbox.tsx

@@ -1,12 +1,13 @@
-import { Checkbox } from '@/components/ui/checkbox';
-import { useMail } from '@/components/mail/use-mail';
-import { useThreads } from '@/hooks/use-threads';
+import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 import { useSearchValue } from '@/hooks/use-search-value';
 import { trpcClient } from '@/providers/query-provider';
-import { cn } from '@/lib/utils';
+import { useMail } from '@/components/mail/use-mail';
+import { Checkbox } from '@/components/ui/checkbox';
+import { useThreads } from '@/hooks/use-threads';
 import { useParams } from 'react-router';
+import { Check } from '../icons/icons';
+import { cn } from '@/lib/utils';
 import { toast } from 'sonner';
-import React, { useCallback, useMemo, useRef, useState, useEffect } from 'react';
 
 export default function SelectAllCheckbox({ className }: { className?: string }) {
   const [mail, setMail] = useMail();
@@ -97,12 +98,38 @@ export default function SelectAllCheckbox({ className }: { className?: string })
   }, [folder, query]);
 
   return (
-    <Checkbox
-      ref={checkboxRef}
-      disabled={isFetchingIds}
-      checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
-      onCheckedChange={handleToggle}
-      className={cn('h-4 w-4', className)}
-    />
+    <div className="flex items-center gap-2">
+      <Checkbox
+        ref={checkboxRef}
+        disabled={isFetchingIds}
+        checked={isIndeterminate ? 'indeterminate' : isAllLoadedSelected}
+        onCheckedChange={handleToggle}
+        className={cn('hidden', className)}
+        id="select-all"
+      />
+      <label
+        htmlFor="select-all"
+        className={cn(
+          'text-muted-foreground flex items-center gap-1 text-xs font-medium transition-colors',
+          isIndeterminate && 'text-primary',
+        )}
+      >
+        <span
+          className={cn(
+            'border-muted-foreground flex items-center justify-center rounded border p-0.5 transition-colors',
+            {
+              'border-primary bg-primary': isAllLoadedSelected,
+            },
+          )}
+        >
+          <Check
+            className={cn('text-muted-foreground/30 h-2 w-2 transition-colors', {
+              'text-black': isAllLoadedSelected,
+            })}
+          />
+        </span>
+        Select all
+      </label>
+    </div>
   );
-}
+}