feat: darker dark theme

apps/web/src/app/(dashboard)/documents/[id]/edit-document.tsx

@@ -169,6 +169,7 @@ export const EditDocumentForm = ({
 
           {step === 'signers' && (
             <AddSignersFormPartial
+              key={recipients.length}
               documentFlow={documentFlow.signers}
               recipients={recipients}
               fields={fields}
@@ -179,6 +180,7 @@ export const EditDocumentForm = ({
 
           {step === 'fields' && (
             <AddFieldsFormPartial
+              key={fields.length}
               documentFlow={documentFlow.fields}
               recipients={recipients}
               fields={fields}

apps/web/src/app/(dashboard)/documents/data-table-action-dropdown.tsx

@@ -112,7 +112,7 @@ export const DataTableActionDropdown = ({ row }: DataTableActionDropdownProps) =
   return (
     <DropdownMenu>
       <DropdownMenuTrigger>
-        <MoreHorizontal className="h-5 w-5 text-gray-500" />
+        <MoreHorizontal className="text-muted-foreground h-5 w-5" />
       </DropdownMenuTrigger>
 
       <DropdownMenuContent className="w-52" align="start" forceMount>

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -92,8 +92,8 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
       </DataTable>
 
       {isPending && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
-          <Loader className="h-8 w-8 animate-spin text-gray-500" />
+        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
+          <Loader className="text-muted-foreground h-8 w-8 animate-spin" />
         </div>
       )}
     </div>

apps/web/src/app/(dashboard)/documents/page.tsx

@@ -63,29 +63,38 @@ export default async function DocumentsPage({ searchParams = {} }: DocumentsPage
     <div className="mx-auto w-full max-w-screen-xl px-4 md:px-8">
       <UploadDocument />
 
-      <h1 className="mt-12 text-4xl font-semibold">Documents</h1>
+      <div className="mt-12 flex flex-wrap items-center justify-between gap-x-4 gap-y-8">
+        <h1 className="text-4xl font-semibold">Documents</h1>
 
-      <div className="mt-8 flex flex-wrap gap-x-4 gap-y-6">
-        <Tabs defaultValue={status} className="overflow-x-auto">
-          <TabsList>
-            <TabsTrigger className="min-w-[60px]" value={InternalDocumentStatus.PENDING} asChild>
-              <Link href={getTabHref(InternalDocumentStatus.PENDING)}>
-                <DocumentStatus status={InternalDocumentStatus.PENDING} />
+        <div className="flex flex-wrap gap-x-4 gap-y-6 overflow-hidden">
+          <Tabs defaultValue={status} className="overflow-x-auto">
+            <TabsList>
+              {[
+                ExtendedDocumentStatus.INBOX,
+                ExtendedDocumentStatus.PENDING,
+                ExtendedDocumentStatus.COMPLETED,
+                ExtendedDocumentStatus.DRAFT,
+                ExtendedDocumentStatus.ALL,
+              ].map((value) => (
+                <TabsTrigger key={value} className="min-w-[60px]" value={value} asChild>
+                  <Link href={getTabHref(value)} scroll={false}>
+                    <DocumentStatus status={value} />
 
-                  {value !== ExtendedDocumentStatus.ALL && (
-                    <span className="ml-1 hidden opacity-50 md:inline-block">
-                      {Math.min(stats[value], 99)}
-                      {stats[value] > 99 && '+'}
-                    </span>
-                  )}
-                </Link>
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
+                    {value !== ExtendedDocumentStatus.ALL && (
+                      <span className="ml-1 hidden opacity-50 md:inline-block">
+                        {Math.min(stats[value], 99)}
+                        {stats[value] > 99 && '+'}
+                      </span>
+                    )}
+                  </Link>
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
 
-        <div className="flex flex-1 flex-wrap items-center justify-between gap-x-2 gap-y-4">
-          <PeriodSelector />
+          <div className="flex w-48 flex-wrap items-center justify-between gap-x-2 gap-y-4">
+            <PeriodSelector />
+          </div>
         </div>
       </div>
 

apps/web/src/app/(dashboard)/documents/upload-document.tsx

@@ -67,7 +67,7 @@ export const UploadDocument = ({ className }: UploadDocumentProps) => {
       <DocumentDropzone className="min-h-[40vh]" onDrop={onFileDrop} />
 
       {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center bg-white/50">
+        <div className="bg-background/50 absolute inset-0 flex items-center justify-center">
           <Loader className="text-muted-foreground h-12 w-12 animate-spin" />
         </div>
       )}

apps/web/src/app/(signing)/sign/[token]/signature-field.tsx

@@ -130,7 +130,7 @@ export const SignatureField = ({ field, recipient }: SignatureFieldProps) => {
         <img
           src={signature.signatureImageAsBase64}
           alt={`Signature for ${recipient.name}`}
-          className="h-full w-full object-contain"
+          className="h-full w-full object-contain dark:invert"
         />
       )}
 

apps/web/src/app/layout.tsx

@@ -76,6 +76,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
                 </TooltipProvider>
               </ThemeProvider>
             </PlausibleProvider>
+
             <Toaster />
           </FeatureFlagProvider>
         </LocaleProvider>

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -58,7 +58,7 @@ export const StackAvatarsWithTooltip = ({
                       type={getRecipientType(recipient)}
                       fallbackText={recipientAbbreviation(recipient)}
                     />
-                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
                   </div>
                 ))}
               </div>
@@ -75,7 +75,7 @@ export const StackAvatarsWithTooltip = ({
                       type={getRecipientType(recipient)}
                       fallbackText={recipientAbbreviation(recipient)}
                     />
-                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
                   </div>
                 ))}
               </div>
@@ -92,7 +92,7 @@ export const StackAvatarsWithTooltip = ({
                       type={getRecipientType(recipient)}
                       fallbackText={recipientAbbreviation(recipient)}
                     />
-                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
                   </div>
                 ))}
               </div>
@@ -109,7 +109,7 @@ export const StackAvatarsWithTooltip = ({
                       type={getRecipientType(recipient)}
                       fallbackText={recipientAbbreviation(recipient)}
                     />
-                    <span className="text-sm text-gray-500">{recipient.email}</span>
+                    <span className="text-muted-foreground text-sm">{recipient.email}</span>
                   </div>
                 ))}
               </div>

apps/web/src/components/formatter/document-status.tsx

@@ -17,17 +17,17 @@ const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
   PENDING: {
     label: 'Pending',
     icon: Clock,
-    color: 'text-blue-600',
+    color: 'text-blue-600 dark:text-blue-300',
   },
   COMPLETED: {
     label: 'Completed',
     icon: CheckCircle2,
-    color: 'text-green-500',
+    color: 'text-green-500 dark:text-green-300',
   },
   DRAFT: {
     label: 'Draft',
     icon: File,
-    color: 'text-yellow-500',
+    color: 'text-yellow-500 dark:text-yellow-200',
   },
   INBOX: {
     label: 'Inbox',