chore: merged main

apps/remix/app/components/dialogs/template-bulk-send-dialog.tsx

@@ -114,7 +114,7 @@ export const TemplateBulkSendDialog = ({
     <Dialog>
       <DialogTrigger asChild>
         {trigger ?? (
-          <Button>
+          <Button variant="outline">
             <Upload className="mr-2 h-4 w-4" />
             <Trans>Bulk Send via CSV</Trans>
           </Button>

apps/remix/app/components/embed/authoring/configure-fields-view.tsx

@@ -16,7 +16,7 @@ import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/fi
 import { base64 } from '@documenso/lib/universal/base64';
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
-import { useSignerColors } from '@documenso/ui/lib/signer-colors';
+import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { FieldItem } from '@documenso/ui/primitives/document-flow/field-item';
@@ -162,7 +162,7 @@ export const ConfigureFieldsView = ({
   });
 
   const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
-  const selectedSignerStyles = useSignerColors(
+  const selectedRecipientStyles = useRecipientColors(
     selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
   );
 
@@ -505,7 +505,7 @@ export const ConfigureFieldsView = ({
               <div
                 className={cn(
                   'text-muted-foreground dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center bg-white transition duration-200 [container-type:size]',
-                  selectedSignerStyles.default.base,
+                  selectedRecipientStyles.base,
                   {
                     '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,
                     'dark:text-black/60': isFieldWithinBounds,

apps/remix/app/components/embed/embed-document-signing-page.tsx

@@ -20,6 +20,7 @@ import { isFieldUnsignedAndRequired } from '@documenso/lib/utils/advanced-fields
 import { validateFieldsInserted } from '@documenso/lib/utils/fields';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
 import { trpc } from '@documenso/trpc/react';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { FieldToolTip } from '@documenso/ui/components/field/field-tooltip';
 import { Button } from '@documenso/ui/primitives/button';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
@@ -37,7 +38,6 @@ import { ZSignDocumentEmbedDataSchema } from '../../types/embed-document-sign-sc
 import { useRequiredDocumentSigningContext } from '../general/document-signing/document-signing-provider';
 import { DocumentSigningRecipientProvider } from '../general/document-signing/document-signing-recipient-provider';
 import { DocumentSigningRejectDialog } from '../general/document-signing/document-signing-reject-dialog';
-import { DocumentReadOnlyFields } from '../general/document/document-read-only-fields';
 import { EmbedClientLoading } from './embed-client-loading';
 import { EmbedDocumentCompleted } from './embed-document-completed';
 import { EmbedDocumentFields } from './embed-document-fields';

apps/remix/app/components/general/direct-template/direct-template-configure-form.tsx

@@ -9,6 +9,10 @@ import { z } from 'zod';
 
 import { useOptionalSession } from '@documenso/lib/client-only/providers/session';
 import type { TTemplate } from '@documenso/lib/types/template';
+import {
+  DocumentReadOnlyFields,
+  mapFieldsWithRecipients,
+} from '@documenso/ui/components/document/document-read-only-fields';
 import {
   DocumentFlowFormContainerActions,
   DocumentFlowFormContainerContent,
@@ -16,7 +20,6 @@ import {
   DocumentFlowFormContainerHeader,
   DocumentFlowFormContainerStep,
 } from '@documenso/ui/primitives/document-flow/document-flow-root';
-import { ShowFieldItem } from '@documenso/ui/primitives/document-flow/show-field-item';
 import type { DocumentFlowStep } from '@documenso/ui/primitives/document-flow/types';
 import {
   Form,
@@ -97,14 +100,16 @@ export const DirectTemplateConfigureForm = ({
       <DocumentFlowFormContainerHeader title={flowStep.title} description={flowStep.description} />
 
       <DocumentFlowFormContainerContent>
-        {isDocumentPdfLoaded &&
-          directTemplateRecipient.fields.map((field, index) => (
-            <ShowFieldItem
-              key={index}
-              field={field}
-              recipients={recipientsWithBlankDirectRecipientEmail}
-            />
-          ))}
+        {isDocumentPdfLoaded && (
+          <DocumentReadOnlyFields
+            fields={mapFieldsWithRecipients(
+              directTemplateRecipient.fields,
+              recipientsWithBlankDirectRecipientEmail,
+            )}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+            showRecipientColors={true}
+          />
+        )}
 
         <Form {...form}>
           <fieldset

apps/remix/app/components/general/document-signing/document-signing-checkbox-field.tsx

@@ -97,6 +97,12 @@ export const DocumentSigningCheckboxField = ({
 
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
+      // Do nothing, this should only happen when the user clicks the field, but
+      // misses the checkbox which triggers this callback.
+      if (checkedValues.length === 0) {
+        return;
+      }
+
       if (!isLengthConditionMet) {
         return;
       }
@@ -270,21 +276,26 @@ export const DocumentSigningCheckboxField = ({
               {validationSign?.label} {checkboxValidationLength}
             </FieldToolTip>
           )}
-          <div className="z-50 flex flex-col gap-y-2">
+          <div className="z-50 my-0.5 flex flex-col gap-y-1">
             {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
               const itemValue = item.value || `empty-value-${item.id}`;
 
               return (
-                <div key={index} className="flex items-center gap-x-1.5">
+                <div key={index} className="flex items-center">
                   <Checkbox
-                    className="h-4 w-4"
-                    id={`checkbox-${index}`}
+                    className="h-3 w-3"
+                    id={`checkbox-${field.id}-${item.id}`}
                     checked={checkedValues.includes(itemValue)}
                     onCheckedChange={() => handleCheckboxChange(item.value, item.id)}
                   />
-                  <Label htmlFor={`checkbox-${index}`}>
-                    {item.value.includes('empty-value-') ? '' : item.value}
-                  </Label>
+                  {!item.value.includes('empty-value-') && item.value && (
+                    <Label
+                      htmlFor={`checkbox-${field.id}-${item.id}`}
+                      className="text-foreground ml-1.5 text-xs font-normal"
+                    >
+                      {item.value}
+                    </Label>
+                  )}
                 </div>
               );
             })}
@@ -293,22 +304,27 @@ export const DocumentSigningCheckboxField = ({
       )}
 
       {field.inserted && (
-        <div className="flex flex-col gap-y-1">
+        <div className="my-0.5 flex flex-col gap-y-1">
           {values?.map((item: { id: number; value: string; checked: boolean }, index: number) => {
             const itemValue = item.value || `empty-value-${item.id}`;
 
             return (
-              <div key={index} className="flex items-center gap-x-1.5">
+              <div key={index} className="flex items-center">
                 <Checkbox
                   className="h-3 w-3"
-                  id={`checkbox-${index}`}
+                  id={`checkbox-${field.id}-${item.id}`}
                   checked={parsedCheckedValues.includes(itemValue)}
                   disabled={isLoading}
                   onCheckedChange={() => void handleCheckboxOptionClick(item)}
                 />
-                <Label htmlFor={`checkbox-${index}`} className="text-xs">
-                  {item.value.includes('empty-value-') ? '' : item.value}
-                </Label>
+                {!item.value.includes('empty-value-') && item.value && (
+                  <Label
+                    htmlFor={`checkbox-${field.id}-${item.id}`}
+                    className="text-foreground ml-1.5 text-xs font-normal"
+                  >
+                    {item.value}
+                  </Label>
+                )}
               </div>
             );
           })}

apps/remix/app/components/general/document-signing/document-signing-complete-dialog.tsx

@@ -281,7 +281,7 @@ export const DocumentSigningCompleteDialog = ({
                 <div className="flex w-full flex-1 flex-nowrap gap-4">
                   <Button
                     type="button"
-                    className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                    className="flex-1"
                     variant="secondary"
                     onClick={() => setShowDialog(false)}
                     disabled={form.formState.isSubmitting}

apps/remix/app/components/general/document-signing/document-signing-date-field.tsx

@@ -142,7 +142,7 @@ export const DocumentSigningDateField = ({
       )}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
           <Trans>Date</Trans>
         </p>
       )}
@@ -151,12 +151,10 @@ export const DocumentSigningDateField = ({
         <div className="flex h-full w-full items-center">
           <p
             className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+              'text-foreground w-full whitespace-nowrap text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
               {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
+                '!text-center': parsedFieldMeta?.textAlign === 'center',
+                '!text-right': parsedFieldMeta?.textAlign === 'right',
               },
             )}
           >

apps/remix/app/components/general/document-signing/document-signing-dropdown-field.tsx

@@ -177,15 +177,11 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {!field.inserted && (
-          <p className="group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200">
+          <p className="group-hover:text-primary text-foreground flex flex-col items-center justify-center duration-200">
             <Select value={localChoice} onValueChange={handleSelectItem}>
               <SelectTrigger
                 className={cn(
-                  'text-muted-foreground z-10 h-full w-full border-none ring-0 focus:ring-0',
-                  {
-                    'hover:text-red-300': parsedFieldMeta.required,
-                    'hover:text-yellow-300': !parsedFieldMeta.required,
-                  },
+                  'text-foreground z-10 h-full w-full border-none ring-0 focus:border-none focus:ring-0',
                 )}
               >
                 <SelectValue
@@ -205,7 +201,7 @@ export const DocumentSigningDropdownField = ({
         )}
 
         {field.inserted && (
-          <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+          <p className="text-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
             {field.customText}
           </p>
         )}

apps/remix/app/components/general/document-signing/document-signing-email-field.tsx

@@ -1,7 +1,6 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -14,10 +13,14 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -120,34 +123,18 @@ export const DocumentSigningEmailField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Email">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Email</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );

apps/remix/app/components/general/document-signing/document-signing-field-container.tsx

@@ -2,12 +2,14 @@ import React from 'react';
 
 import { Trans } from '@lingui/react/macro';
 import { FieldType } from '@prisma/client';
+import { TooltipArrow } from '@radix-ui/react-tooltip';
 import { X } from 'lucide-react';
 
 import { type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
 import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { FieldRootContainer } from '@documenso/ui/components/field/field';
+import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -128,57 +130,51 @@ export const DocumentSigningFieldContainer = ({
   };
 
   return (
-    <div className={cn('[container-type:size]', { group: type === 'Checkbox' })}>
-      <FieldRootContainer field={field}>
+    <div className={cn('[container-type:size]')}>
+      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
-            className="absolute inset-0 z-10 h-full w-full rounded-md border"
+            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
             onClick={async () => handleInsertField()}
           />
         )}
 
         {readOnlyField && (
           <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 dark:bg-background/50 text-background dark:text-foreground rounded-xl p-2">
+            <span className="bg-foreground/50 text-background rounded-xl p-2">
               <Trans>Read only field</Trans>
             </span>
           </button>
         )}
 
-        {type === 'Date' && field.inserted && !loading && !readOnlyField && (
-          <Tooltip delayDuration={0}>
-            <TooltipTrigger asChild>
-              <button
-                className="text-destructive bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-                onClick={onRemoveSignedFieldClick}
-              >
-                <Trans>Remove</Trans>
-              </button>
-            </TooltipTrigger>
-
-            {tooltipText && <TooltipContent className="max-w-xs">{tooltipText}</TooltipContent>}
-          </Tooltip>
-        )}
-
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
-            className="dark:bg-background absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
+            className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
             onClick={() => void onClearCheckBoxValues(type)}
           >
-            <span className="dark:text-muted-foreground/50 dark:hover:text-muted-foreground dark:hover:bg-foreground/10 rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
+            <span className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white/10 hover:text-gray-100">
               <X className="h-4 w-4" />
             </span>
           </button>
         )}
 
-        {type !== 'Date' && type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
-          <button
-            className="text-destructive bg-background/50 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100"
-            onClick={onRemoveSignedFieldClick}
-          >
-            <Trans>Remove</Trans>
-          </button>
+        {type !== 'Checkbox' && field.inserted && !loading && !readOnlyField && (
+          <Tooltip delayDuration={0}>
+            <TooltipTrigger asChild>
+              <button className="absolute inset-0 z-10" onClick={onRemoveSignedFieldClick}></button>
+            </TooltipTrigger>
+
+            <TooltipContent
+              className="border-0 bg-orange-300 fill-orange-300 font-bold text-orange-900"
+              sideOffset={2}
+            >
+              {tooltipText && <p>{tooltipText}</p>}
+
+              <Trans>Remove</Trans>
+              <TooltipArrow />
+            </TooltipContent>
+          </Tooltip>
         )}
 
         {(field.type === FieldType.RADIO || field.type === FieldType.CHECKBOX) &&

apps/remix/app/components/general/document-signing/document-signing-fields.tsx

@@ -0,0 +1,51 @@
+import { Loader } from 'lucide-react';
+
+import { cn } from '@documenso/ui/lib/utils';
+
+export const DocumentSigningFieldsLoader = () => {
+  return (
+    <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
+      <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
+    </div>
+  );
+};
+
+export const DocumentSigningFieldsUninserted = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <p className="group-hover:text-primary text-foreground group-hover:text-recipient-green text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+      {children}
+    </p>
+  );
+};
+
+type DocumentSigningFieldsInsertedProps = {
+  children: React.ReactNode;
+
+  /**
+   * The text alignment of the field.
+   *
+   * Defaults to left.
+   */
+  textAlign?: 'left' | 'center' | 'right';
+};
+
+export const DocumentSigningFieldsInserted = ({
+  children,
+  textAlign = 'left',
+}: DocumentSigningFieldsInsertedProps) => {
+  return (
+    <div className="flex h-full w-full items-center">
+      <p
+        className={cn(
+          'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
+          {
+            '!text-center': textAlign === 'center',
+            '!text-right': textAlign === 'right',
+          },
+        )}
+      >
+        {children}
+      </p>
+    </div>
+  );
+};

apps/remix/app/components/general/document-signing/document-signing-initials-field.tsx

@@ -1,12 +1,12 @@
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
 import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
 import type { TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { ZInitialsFieldMeta } from '@documenso/lib/types/field-meta';
 import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { FieldWithSignature } from '@documenso/prisma/types/field-with-signature';
 import { trpc } from '@documenso/trpc/react';
@@ -17,6 +17,11 @@ import type {
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -50,6 +55,9 @@ export const DocumentSigningInitialsField = ({
 
   const isLoading = isSignFieldWithTokenLoading || isRemoveSignedFieldWithTokenLoading;
 
+  const safeFieldMeta = ZInitialsFieldMeta.safeParse(field.fieldMeta);
+  const parsedFieldMeta = safeFieldMeta.success ? safeFieldMeta.data : null;
+
   const onSign = async (authOptions?: TRecipientActionAuth) => {
     try {
       const value = initials ?? '';
@@ -122,22 +130,18 @@ export const DocumentSigningInitialsField = ({
       onRemove={onRemove}
       type="Initials"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground text-[clamp(0.425rem,25cqw,0.825rem)] duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Initials</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <p className="text-muted-foreground dark:text-background/80 text-[clamp(0.425rem,25cqw,0.825rem)] duration-200">
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
           {field.customText}
-        </p>
+        </DocumentSigningFieldsInserted>
       )}
     </DocumentSigningFieldContainer>
   );

apps/remix/app/components/general/document-signing/document-signing-name-field.tsx

@@ -3,7 +3,6 @@ import { useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -16,7 +15,6 @@ import type {
   TRemovedSignedFieldWithTokenMutationSchema,
   TSignFieldWithTokenMutationSchema,
 } from '@documenso/trpc/server/field-router/schema';
-import { cn } from '@documenso/ui/lib/utils';
 import { Button } from '@documenso/ui/primitives/button';
 import { Dialog, DialogContent, DialogFooter, DialogTitle } from '@documenso/ui/primitives/dialog';
 import { Input } from '@documenso/ui/primitives/input';
@@ -25,6 +23,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useRequiredDocumentSigningContext } from './document-signing-provider';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
@@ -166,34 +169,18 @@ export const DocumentSigningNameField = ({
       onRemove={onRemove}
       type="Name"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p className="group-hover:text-primary text-muted-foreground duration-200 group-hover:text-yellow-300">
+        <DocumentSigningFieldsUninserted>
           <Trans>Name</Trans>
-        </p>
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showFullNameModal} onOpenChange={setShowFullNameModal}>
@@ -202,7 +189,7 @@ export const DocumentSigningNameField = ({
             <Trans>
               Sign as
               <div>
-                {recipient.name} <div className="text-muted-foreground">({recipient.email})</div>
+                {recipient.name} <div className="text-foreground">({recipient.email})</div>
               </div>
             </Trans>
           </DialogTitle>
@@ -224,7 +211,7 @@ export const DocumentSigningNameField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowFullNameModal(false);

apps/remix/app/components/general/document-signing/document-signing-number-field.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Trans } from '@lingui/react/macro';
-import { Hash, Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateNumberField } from '@documenso/lib/advanced-fields-validation/validate-number';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 type ValidationErrors = {
@@ -245,45 +249,16 @@ export const DocumentSigningNumberField = ({
       onRemove={onRemove}
       type="Number"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Hash className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />{' '}
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">{fieldDisplayName}</span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>{fieldDisplayName}</DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showNumberModal} onOpenChange={setShowNumberModal}>
@@ -339,7 +314,7 @@ export const DocumentSigningNumberField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowNumberModal(false);

apps/remix/app/components/general/document-signing/document-signing-page-view.tsx

@@ -19,6 +19,7 @@ import {
 import type { CompletedField } from '@documenso/lib/types/fields';
 import type { FieldWithSignatureAndFieldMeta } from '@documenso/prisma/types/field-with-signature-and-fieldmeta';
 import type { RecipientWithFields } from '@documenso/prisma/types/recipient-with-fields';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { ElementVisible } from '@documenso/ui/primitives/element-visible';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -36,7 +37,6 @@ import { DocumentSigningRadioField } from '~/components/general/document-signing
 import { DocumentSigningRejectDialog } from '~/components/general/document-signing/document-signing-reject-dialog';
 import { DocumentSigningSignatureField } from '~/components/general/document-signing/document-signing-signature-field';
 import { DocumentSigningTextField } from '~/components/general/document-signing/document-signing-text-field';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 
 import { DocumentSigningRecipientProvider } from './document-signing-recipient-provider';
 
@@ -157,7 +157,11 @@ export const DocumentSigningPageView = ({
           </div>
         </div>
 
-        <DocumentReadOnlyFields documentMeta={documentMeta || undefined} fields={completedFields} />
+        <DocumentReadOnlyFields
+          documentMeta={documentMeta || undefined}
+          fields={completedFields}
+          showRecipientTooltip={true}
+        />
 
         {recipient.role !== RecipientRole.ASSISTANT && (
           <DocumentSigningAutoSign recipient={recipient} fields={fields} />

apps/remix/app/components/general/document-signing/document-signing-radio-field.tsx

@@ -2,7 +2,6 @@ import { useEffect, useState } from 'react';
 
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
-import { Loader } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { DO_NOT_INVALIDATE_QUERY_ON_MUTATION } from '@documenso/lib/constants/trpc';
@@ -21,6 +20,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import { DocumentSigningFieldsLoader } from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningRadioFieldProps = {
@@ -150,44 +150,52 @@ export const DocumentSigningRadioField = ({
 
   return (
     <DocumentSigningFieldContainer field={field} onSign={onSign} onRemove={onRemove} type="Radio">
-      {isLoading && (
-        <div className="bg-background absolute inset-0 z-20 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <RadioGroup onValueChange={(value) => handleSelectItem(value)} className="z-10">
+        <RadioGroup
+          onValueChange={(value) => handleSelectItem(value)}
+          className="z-10 my-0.5 gap-y-1"
+        >
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
-                className="h-4 w-4 shrink-0"
+                className="h-3 w-3 shrink-0"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.checked}
               />
-
-              <Label htmlFor={`option-${index}`}>
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>
       )}
 
       {field.inserted && (
-        <RadioGroup className="gap-y-1">
+        <RadioGroup className="my-0.5 gap-y-1">
           {values?.map((item, index) => (
-            <div key={index} className="flex items-center gap-x-1.5">
+            <div key={index} className="flex items-center">
               <RadioGroupItem
                 className="h-3 w-3"
                 value={item.value}
-                id={`option-${index}`}
+                id={`option-${field.id}-${item.id}`}
                 checked={item.value === field.customText}
               />
-              <Label htmlFor={`option-${index}`} className="text-xs">
-                {item.value.includes('empty-value-') ? '' : item.value}
-              </Label>
+              {!item.value.includes('empty-value-') && item.value && (
+                <Label
+                  htmlFor={`option-${field.id}-${item.id}`}
+                  className="text-foreground ml-1.5 text-xs font-normal"
+                >
+                  {item.value}
+                </Label>
+              )}
             </div>
           ))}
         </RadioGroup>

apps/remix/app/components/general/document-signing/document-signing-signature-field.tsx

@@ -242,7 +242,7 @@ export const DocumentSigningSignatureField = ({
       )}
 
       {state === 'empty' && (
-        <p className="group-hover:text-primary font-signature text-muted-foreground text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200 group-hover:text-yellow-300">
+        <p className="group-hover:text-primary font-signature text-muted-foreground group-hover:text-recipient-green text-[clamp(0.575rem,25cqw,1.2rem)] text-xl duration-200">
           <Trans>Signature</Trans>
         </p>
       )}
@@ -259,7 +259,7 @@ export const DocumentSigningSignatureField = ({
         <div ref={containerRef} className="flex h-full w-full items-center justify-center p-2">
           <p
             ref={signatureRef}
-            className="font-signature text-muted-foreground dark:text-background w-full overflow-hidden break-all text-center leading-tight duration-200"
+            className="font-signature text-muted-foreground w-full overflow-hidden break-all text-center leading-tight duration-200"
             style={{ fontSize: `${fontSize}rem` }}
           >
             {signature?.typedSignature}
@@ -291,7 +291,7 @@ export const DocumentSigningSignatureField = ({
             <div className="flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
+                className="flex-1"
                 variant="secondary"
                 onClick={() => {
                   setShowSignatureModal(false);

apps/remix/app/components/general/document-signing/document-signing-text-field.tsx

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { msg } from '@lingui/core/macro';
 import { useLingui } from '@lingui/react';
 import { Plural, Trans } from '@lingui/react/macro';
-import { Loader, Type } from 'lucide-react';
 import { useRevalidator } from 'react-router';
 
 import { validateTextField } from '@documenso/lib/advanced-fields-validation/validate-text';
@@ -25,6 +24,11 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useRequiredDocumentSigningAuthContext } from './document-signing-auth-provider';
 import { DocumentSigningFieldContainer } from './document-signing-field-container';
+import {
+  DocumentSigningFieldsInserted,
+  DocumentSigningFieldsLoader,
+  DocumentSigningFieldsUninserted,
+} from './document-signing-fields';
 import { useDocumentSigningRecipientContext } from './document-signing-recipient-provider';
 
 export type DocumentSigningTextFieldProps = {
@@ -248,49 +252,20 @@ export const DocumentSigningTextField = ({
       onRemove={onRemove}
       type="Text"
     >
-      {isLoading && (
-        <div className="bg-background absolute inset-0 flex items-center justify-center rounded-md">
-          <Loader className="text-primary h-5 w-5 animate-spin md:h-8 md:w-8" />
-        </div>
-      )}
+      {isLoading && <DocumentSigningFieldsLoader />}
 
       {!field.inserted && (
-        <p
-          className={cn(
-            'group-hover:text-primary text-muted-foreground flex flex-col items-center justify-center duration-200',
-            {
-              'group-hover:text-yellow-300': !field.inserted && !parsedFieldMeta?.required,
-              'group-hover:text-red-300': !field.inserted && parsedFieldMeta?.required,
-            },
-          )}
-        >
-          <span className="flex items-center justify-center gap-x-1">
-            <Type className="h-[clamp(0.625rem,20cqw,0.925rem)] w-[clamp(0.625rem,20cqw,0.925rem)]" />
-            <span className="text-[clamp(0.425rem,25cqw,0.825rem)]">
-              {fieldDisplayName || <Trans>Text</Trans>}
-            </span>
-          </span>
-        </p>
+        <DocumentSigningFieldsUninserted>
+          {fieldDisplayName || <Trans>Text</Trans>}
+        </DocumentSigningFieldsUninserted>
       )}
 
       {field.inserted && (
-        <div className="flex h-full w-full items-center">
-          <p
-            className={cn(
-              'text-muted-foreground dark:text-background/80 w-full text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
-              {
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
-                'text-right': parsedFieldMeta?.textAlign === 'right',
-              },
-            )}
-          >
-            {field.customText.length < 20
-              ? field.customText
-              : field.customText.substring(0, 20) + '...'}
-          </p>
-        </div>
+        <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
+          {field.customText.length < 20
+            ? field.customText
+            : field.customText.substring(0, 20) + '...'}
+        </DocumentSigningFieldsInserted>
       )}
 
       <Dialog open={showCustomTextModal} onOpenChange={setShowCustomTextModal}>
@@ -304,11 +279,9 @@ export const DocumentSigningTextField = ({
               id="custom-text"
               placeholder={parsedFieldMeta?.placeholder ?? _(msg`Enter your text here`)}
               className={cn('mt-2 w-full rounded-md', {
-                'border-2 border-red-300 ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
+                'border-2 border-red-300 text-left ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 focus-visible:border-red-400 focus-visible:ring-4 focus-visible:ring-red-200 focus-visible:ring-offset-2 focus-visible:ring-offset-red-200':
                   userInputHasErrors,
-                'text-left': parsedFieldMeta?.textAlign === 'left',
-                'text-center':
-                  !parsedFieldMeta?.textAlign || parsedFieldMeta?.textAlign === 'center',
+                'text-center': parsedFieldMeta?.textAlign === 'center',
                 'text-right': parsedFieldMeta?.textAlign === 'right',
               })}
               value={localText}
@@ -354,8 +327,8 @@ export const DocumentSigningTextField = ({
             <div className="mt-4 flex w-full flex-1 flex-nowrap gap-4">
               <Button
                 type="button"
-                className="dark:bg-muted dark:hover:bg-muted/80 flex-1 bg-black/5 hover:bg-black/10"
                 variant="secondary"
+                className="flex-1"
                 onClick={() => {
                   setShowCustomTextModal(false);
                   setLocalCustomText('');

apps/remix/app/components/general/document/document-read-only-fields.tsx

@@ -1,171 +0,0 @@
-import { useState } from 'react';
-
-import { useLingui } from '@lingui/react';
-import { Trans } from '@lingui/react/macro';
-import type { DocumentMeta, TemplateMeta } from '@prisma/client';
-import { FieldType, SigningStatus } from '@prisma/client';
-import { Clock, EyeOffIcon } from 'lucide-react';
-import { P, match } from 'ts-pattern';
-
-import {
-  DEFAULT_DOCUMENT_DATE_FORMAT,
-  convertToLocalSystemFormat,
-} from '@documenso/lib/constants/date-formats';
-import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
-import { DEFAULT_DOCUMENT_TIME_ZONE } from '@documenso/lib/constants/time-zones';
-import type { DocumentField } from '@documenso/lib/server-only/field/get-fields-for-document';
-import { parseMessageDescriptor } from '@documenso/lib/utils/i18n';
-import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
-import { FieldRootContainer } from '@documenso/ui/components/field/field';
-import { SignatureIcon } from '@documenso/ui/icons/signature';
-import { cn } from '@documenso/ui/lib/utils';
-import { Avatar, AvatarFallback } from '@documenso/ui/primitives/avatar';
-import { Badge } from '@documenso/ui/primitives/badge';
-import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
-import { ElementVisible } from '@documenso/ui/primitives/element-visible';
-import { PopoverHover } from '@documenso/ui/primitives/popover';
-
-export type DocumentReadOnlyFieldsProps = {
-  fields: DocumentField[];
-  documentMeta?: DocumentMeta | TemplateMeta;
-  showFieldStatus?: boolean;
-};
-
-export const DocumentReadOnlyFields = ({
-  documentMeta,
-  fields,
-  showFieldStatus = true,
-}: DocumentReadOnlyFieldsProps) => {
-  const { _ } = useLingui();
-
-  const [hiddenFieldIds, setHiddenFieldIds] = useState<Record<string, boolean>>({});
-
-  const handleHideField = (fieldId: string) => {
-    setHiddenFieldIds((prev) => ({ ...prev, [fieldId]: true }));
-  };
-
-  return (
-    <ElementVisible target={PDF_VIEWER_PAGE_SELECTOR}>
-      {fields.map(
-        (field) =>
-          !hiddenFieldIds[field.secondaryId] && (
-            <FieldRootContainer
-              field={field}
-              key={field.id}
-              cardClassName="border-gray-300/50 !shadow-none backdrop-blur-[1px] bg-gray-50 ring-0 ring-offset-0"
-            >
-              <div className="absolute -right-3 -top-3">
-                <PopoverHover
-                  trigger={
-                    <Avatar className="dark:border-foreground h-8 w-8 border-2 border-solid border-gray-200/50 transition-colors hover:border-gray-200">
-                      <AvatarFallback className="bg-neutral-50 text-xs text-gray-400">
-                        {extractInitials(field.recipient.name || field.recipient.email)}
-                      </AvatarFallback>
-                    </Avatar>
-                  }
-                  contentProps={{
-                    className: 'relative flex w-fit flex-col p-4 text-sm',
-                  }}
-                >
-                  {showFieldStatus && (
-                    <Badge
-                      className="mx-auto mb-1 py-0.5"
-                      variant={
-                        field.recipient.signingStatus === SigningStatus.SIGNED
-                          ? 'default'
-                          : 'secondary'
-                      }
-                    >
-                      {field.recipient.signingStatus === SigningStatus.SIGNED ? (
-                        <>
-                          <SignatureIcon className="mr-1 h-3 w-3" />
-                          <Trans>Signed</Trans>
-                        </>
-                      ) : (
-                        <>
-                          <Clock className="mr-1 h-3 w-3" />
-                          <Trans>Pending</Trans>
-                        </>
-                      )}
-                    </Badge>
-                  )}
-
-                  <p className="text-center font-semibold">
-                    <span>{parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])} field</span>
-                  </p>
-
-                  <p className="text-muted-foreground mt-1 text-center text-xs">
-                    {field.recipient.name
-                      ? `${field.recipient.name} (${field.recipient.email})`
-                      : field.recipient.email}{' '}
-                  </p>
-
-                  <button
-                    className="absolute right-0 top-0 my-1 p-2 focus:outline-none focus-visible:ring-0"
-                    onClick={() => handleHideField(field.secondaryId)}
-                    title="Hide field"
-                  >
-                    <EyeOffIcon className="h-3 w-3" />
-                  </button>
-                </PopoverHover>
-              </div>
-
-              <div className="text-muted-foreground dark:text-background/70 break-all text-sm">
-                {field.recipient.signingStatus === SigningStatus.SIGNED &&
-                  match(field)
-                    .with({ type: FieldType.SIGNATURE }, (field) =>
-                      field.signature?.signatureImageAsBase64 ? (
-                        <img
-                          src={field.signature.signatureImageAsBase64}
-                          alt="Signature"
-                          className="h-full w-full object-contain dark:invert"
-                        />
-                      ) : (
-                        <p className="font-signature text-muted-foreground text-lg duration-200 sm:text-xl md:text-2xl">
-                          {field.signature?.typedSignature}
-                        </p>
-                      ),
-                    )
-                    .with(
-                      {
-                        type: P.union(
-                          FieldType.NAME,
-                          FieldType.INITIALS,
-                          FieldType.EMAIL,
-                          FieldType.NUMBER,
-                          FieldType.RADIO,
-                          FieldType.CHECKBOX,
-                          FieldType.DROPDOWN,
-                        ),
-                      },
-                      () => field.customText,
-                    )
-                    .with({ type: FieldType.TEXT }, () => field.customText.substring(0, 20) + '...')
-                    .with({ type: FieldType.DATE }, () =>
-                      convertToLocalSystemFormat(
-                        field.customText,
-                        documentMeta?.dateFormat ?? DEFAULT_DOCUMENT_DATE_FORMAT,
-                        documentMeta?.timezone ?? DEFAULT_DOCUMENT_TIME_ZONE,
-                      ),
-                    )
-                    .with({ type: FieldType.FREE_SIGNATURE }, () => null)
-                    .exhaustive()}
-
-                {field.recipient.signingStatus === SigningStatus.NOT_SIGNED && (
-                  <p
-                    className={cn('text-muted-foreground text-lg duration-200', {
-                      'font-signature sm:text-xl md:text-2xl':
-                        field.type === FieldType.SIGNATURE ||
-                        field.type === FieldType.FREE_SIGNATURE,
-                    })}
-                  >
-                    {parseMessageDescriptor(_, FRIENDLY_FIELD_TYPE[field.type])}
-                  </p>
-                )}
-              </div>
-            </FieldRootContainer>
-          ),
-      )}
-    </ElementVisible>
-  );
-};

apps/remix/app/components/general/legacy-field-warning-popover.tsx

@@ -0,0 +1,112 @@
+import { msg } from '@lingui/core/macro';
+import { useLingui } from '@lingui/react';
+import { Trans } from '@lingui/react/macro';
+import { AlertCircle } from 'lucide-react';
+import { useRevalidator } from 'react-router';
+
+import { trpc } from '@documenso/trpc/react';
+import { Button } from '@documenso/ui/primitives/button';
+import { PopoverHover } from '@documenso/ui/primitives/popover';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+export type LegacyFieldWarningPopoverProps = {
+  type?: 'document' | 'template';
+  documentId?: number;
+  templateId?: number;
+};
+
+export const LegacyFieldWarningPopover = ({
+  type = 'document',
+  documentId,
+  templateId,
+}: LegacyFieldWarningPopoverProps) => {
+  const { _ } = useLingui();
+  const { toast } = useToast();
+
+  const revalidator = useRevalidator();
+
+  const { mutateAsync: updateTemplate, isPending: isUpdatingTemplate } =
+    trpc.template.updateTemplate.useMutation();
+  const { mutateAsync: updateDocument, isPending: isUpdatingDocument } =
+    trpc.document.updateDocument.useMutation();
+
+  const onUpdateFieldsClick = async () => {
+    if (type === 'document') {
+      if (!documentId) {
+        return;
+      }
+
+      await updateDocument({
+        documentId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    if (type === 'template') {
+      if (!templateId) {
+        return;
+      }
+
+      await updateTemplate({
+        templateId,
+        data: {
+          useLegacyFieldInsertion: false,
+        },
+      });
+    }
+
+    void revalidator.revalidate();
+
+    toast({
+      title: _(msg`Fields updated`),
+      description: _(
+        msg`The fields have been updated to the new field insertion method successfully`,
+      ),
+    });
+  };
+
+  return (
+    <PopoverHover
+      side="bottom"
+      trigger={
+        <Button variant="outline" className="h-9 w-9 p-0">
+          <span className="sr-only">
+            {type === 'document' ? (
+              <Trans>Document is using legacy field insertion</Trans>
+            ) : (
+              <Trans>Template is using legacy field insertion</Trans>
+            )}
+          </span>
+          <AlertCircle className="h-5 w-5" />
+        </Button>
+      }
+    >
+      <p className="text-muted-foreground text-sm">
+        {type === 'document' ? (
+          <Trans>
+            This document is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        ) : (
+          <Trans>
+            This template is using legacy field insertion, we recommend using the new field
+            insertion method for more accurate results.
+          </Trans>
+        )}
+      </p>
+
+      <div className="mt-2 flex w-full items-center justify-end">
+        <Button
+          type="button"
+          size="sm"
+          loading={isUpdatingDocument || isUpdatingTemplate}
+          onClick={onUpdateFieldsClick}
+        >
+          <Trans>Update Fields</Trans>
+        </Button>
+      </div>
+    </PopoverHover>
+  );
+};

apps/remix/app/components/tables/admin-leaderboard-table.tsx

@@ -14,9 +14,13 @@ import { Input } from '@documenso/ui/primitives/input';
 export type SigningVolume = {
   id: number;
   name: string;
+  email: string;
   signingVolume: number;
   createdAt: Date;
   planId: string;
+  userId?: number | null;
+  teamId?: number | null;
+  isTeam: boolean;
 };
 
 type LeaderboardTableProps = {

apps/remix/app/routes/_authenticated+/admin+/leaderboard.tsx

@@ -2,7 +2,10 @@ import { Trans } from '@lingui/react/macro';
 
 import { getSigningVolume } from '@documenso/lib/server-only/admin/get-signing-volume';
 
-import { AdminLeaderboardTable } from '~/components/tables/admin-leaderboard-table';
+import {
+  AdminLeaderboardTable,
+  type SigningVolume,
+} from '~/components/tables/admin-leaderboard-table';
 
 import type { Route } from './+types/leaderboard';
 
@@ -25,7 +28,7 @@ export async function loader({ request }: Route.LoaderArgs) {
   const perPage = Number(url.searchParams.get('perPage')) || 10;
   const search = url.searchParams.get('search') || '';
 
-  const { leaderboard: signingVolume, totalPages } = await getSigningVolume({
+  const { leaderboard, totalPages } = await getSigningVolume({
     search,
     page,
     perPage,
@@ -33,8 +36,14 @@ export async function loader({ request }: Route.LoaderArgs) {
     sortOrder,
   });
 
+  const typedSigningVolume: SigningVolume[] = leaderboard.map((item) => ({
+    ...item,
+    name: item.name || '',
+    createdAt: item.createdAt || new Date(),
+  }));
+
   return {
-    signingVolume,
+    signingVolume: typedSigningVolume,
     totalPages,
     page,
     perPage,
@@ -48,9 +57,11 @@ export default function Leaderboard({ loaderData }: Route.ComponentProps) {
 
   return (
     <div>
-      <h2 className="text-4xl font-semibold">
-        <Trans>Signing Volume</Trans>
-      </h2>
+      <div className="flex items-center">
+        <h2 className="text-4xl font-semibold">
+          <Trans>Signing Volume</Trans>
+        </h2>
+      </div>
       <div className="mt-8">
         <AdminLeaderboardTable
           signingVolume={signingVolume}

apps/remix/app/routes/_authenticated+/documents.$id._index.tsx

@@ -13,6 +13,7 @@ import { getRecipientsForDocument } from '@documenso/lib/server-only/recipient/g
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
 import { formatDocumentsPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Badge } from '@documenso/ui/primitives/badge';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
@@ -24,7 +25,6 @@ import { DocumentPageViewDropdown } from '~/components/general/document/document
 import { DocumentPageViewInformation } from '~/components/general/document/document-page-view-information';
 import { DocumentPageViewRecentActivity } from '~/components/general/document/document-page-view-recent-activity';
 import { DocumentPageViewRecipients } from '~/components/general/document/document-page-view-recipients';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { DocumentRecipientLinkCopyDialog } from '~/components/general/document/document-recipient-link-copy-dialog';
 import {
   DocumentStatus as DocumentStatusComponent,
@@ -200,8 +200,14 @@ export default function DocumentPage() {
           </CardContent>
         </Card>
 
-        {document.status === DocumentStatus.PENDING && (
-          <DocumentReadOnlyFields fields={fields} documentMeta={documentMeta || undefined} />
+        {document.status !== DocumentStatus.COMPLETED && (
+          <DocumentReadOnlyFields
+            fields={fields}
+            documentMeta={documentMeta || undefined}
+            showRecipientTooltip={true}
+            showRecipientColors={true}
+            recipientIds={recipients.map((recipient) => recipient.id)}
+          />
         )}
 
         <div className="col-span-12 lg:col-span-6 xl:col-span-5">

apps/remix/app/routes/_authenticated+/documents.$id.edit.tsx

@@ -14,6 +14,7 @@ import { formatDocumentsPath } from '@documenso/lib/utils/teams';
 
 import { DocumentEditForm } from '~/components/general/document/document-edit-form';
 import { DocumentStatus } from '~/components/general/document/document-status';
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { StackAvatarsWithTooltip } from '~/components/general/stack-avatars-with-tooltip';
 import { superLoaderJson, useSuperLoaderData } from '~/utils/super-json-loader';
 
@@ -100,29 +101,43 @@ export default function DocumentEditPage() {
         <Trans>Documents</Trans>
       </Link>
 
-      <h1
-        className="mt-4 block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
-        title={document.title}
-      >
-        {document.title}
-      </h1>
+      <div className="mt-4 flex w-full items-end justify-between">
+        <div className="flex-1">
+          <h1
+            className="block max-w-[20rem] truncate text-2xl font-semibold md:max-w-[30rem] md:text-3xl"
+            title={document.title}
+          >
+            {document.title}
+          </h1>
 
-      <div className="mt-2.5 flex items-center gap-x-6">
-        <DocumentStatus inheritColor status={document.status} className="text-muted-foreground" />
+          <div className="mt-2.5 flex items-center gap-x-6">
+            <DocumentStatus
+              inheritColor
+              status={document.status}
+              className="text-muted-foreground"
+            />
 
-        {recipients.length > 0 && (
-          <div className="text-muted-foreground flex items-center">
-            <Users2 className="mr-2 h-5 w-5" />
+            {recipients.length > 0 && (
+              <div className="text-muted-foreground flex items-center">
+                <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsWithTooltip
-              recipients={recipients}
-              documentStatus={document.status}
-              position="bottom"
-            >
-              <span>
-                <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
-              </span>
-            </StackAvatarsWithTooltip>
+                <StackAvatarsWithTooltip
+                  recipients={recipients}
+                  documentStatus={document.status}
+                  position="bottom"
+                >
+                  <span>
+                    <Plural one="1 Recipient" other="# Recipients" value={recipients.length} />
+                  </span>
+                </StackAvatarsWithTooltip>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {document.useLegacyFieldInsertion && (
+          <div>
+            <LegacyFieldWarningPopover type="document" documentId={document.id} />
           </div>
         )}
       </div>

apps/remix/app/routes/_authenticated+/templates.$id._index.tsx

@@ -7,6 +7,7 @@ import { getSession } from '@documenso/auth/server/lib/utils/get-session';
 import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-only/team/get-team';
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatDocumentsPath, formatTemplatesPath } from '@documenso/lib/utils/teams';
+import { DocumentReadOnlyFields } from '@documenso/ui/components/document/document-read-only-fields';
 import { Button } from '@documenso/ui/primitives/button';
 import { Card, CardContent } from '@documenso/ui/primitives/card';
 import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
@@ -14,7 +15,6 @@ import { PDFViewer } from '@documenso/ui/primitives/pdf-viewer';
 import { TemplateBulkSendDialog } from '~/components/dialogs/template-bulk-send-dialog';
 import { TemplateDirectLinkDialogWrapper } from '~/components/dialogs/template-direct-link-dialog-wrapper';
 import { TemplateUseDialog } from '~/components/dialogs/template-use-dialog';
-import { DocumentReadOnlyFields } from '~/components/general/document/document-read-only-fields';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplatePageViewDocumentsTable } from '~/components/general/template/template-page-view-documents-table';
 import { TemplatePageViewInformation } from '~/components/general/template/template-page-view-information';
@@ -151,6 +151,9 @@ export default function TemplatePage() {
         <DocumentReadOnlyFields
           fields={readOnlyFields}
           showFieldStatus={false}
+          showRecipientTooltip={true}
+          showRecipientColors={true}
+          recipientIds={recipients.map((recipient) => recipient.id)}
           documentMeta={mockedDocumentMeta}
         />
 

apps/remix/app/routes/_authenticated+/templates.$id.edit.tsx

@@ -8,6 +8,7 @@ import { type TGetTeamByUrlResponse, getTeamByUrl } from '@documenso/lib/server-
 import { getTemplateById } from '@documenso/lib/server-only/template/get-template-by-id';
 import { formatTemplatesPath } from '@documenso/lib/utils/teams';
 
+import { LegacyFieldWarningPopover } from '~/components/general/legacy-field-warning-popover';
 import { TemplateDirectLinkBadge } from '~/components/general/template/template-direct-link-badge';
 import { TemplateEditForm } from '~/components/general/template/template-edit-form';
 import { TemplateType } from '~/components/general/template/template-type';
@@ -91,8 +92,14 @@ export default function TemplateEditPage() {
           </div>
         </div>
 
-        <div className="mt-2 sm:mt-0 sm:self-end">
+        <div className="mt-2 flex items-center gap-2 sm:mt-0 sm:self-end">
           <TemplateDirectLinkDialogWrapper template={template} />
+
+          {template.useLegacyFieldInsertion && (
+            <div>
+              <LegacyFieldWarningPopover type="template" templateId={template.id} />
+            </div>
+          )}
         </div>
       </div>
 

apps/remix/app/routes/api+/branding.logo.team.$teamId.ts

@@ -1,6 +1,6 @@
 import sharp from 'sharp';
 
-import { getFile } from '@documenso/lib/universal/upload/get-file';
+import { getFileServerSide } from '@documenso/lib/universal/upload/get-file.server';
 import { prisma } from '@documenso/prisma';
 
 import type { Route } from './+types/branding.logo.team.$teamId';
@@ -24,27 +24,29 @@ export async function loader({ params }: Route.LoaderArgs) {
     },
   });
 
-  if (!settings || !settings.brandingEnabled) {
+  if (!settings || !settings.brandingLogo) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Logo not found',
       },
       { status: 404 },
     );
   }
 
-  if (!settings.brandingLogo) {
+  if (!settings.brandingEnabled) {
     return Response.json(
       {
         status: 'error',
-        message: 'Not found',
+        message: 'Branding is not enabled',
       },
-      { status: 404 },
+      { status: 400 },
     );
   }
 
-  const file = await getFile(JSON.parse(settings.brandingLogo)).catch(() => null);
+  const file = await getFileServerSide(JSON.parse(settings.brandingLogo)).catch((e) => {
+    console.error(e);
+  });
 
   if (!file) {
     return Response.json(