refactor: avoid recipient color duplication (#2355)

packages/ui/primitives/document-flow/add-fields.tsx

@@ -39,7 +39,7 @@ import {
 } from '@documenso/lib/utils/recipients';
 
 import { FieldToolTip } from '../../components/field/field-tooltip';
-import { useRecipientColors } from '../../lib/recipient-colors';
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
 import { Alert, AlertDescription } from '../alert';
 import { Card, CardContent } from '../card';
@@ -180,9 +180,7 @@ export const AddFieldsFormPartial = ({
     null,
   );
   const selectedSignerIndex = recipients.findIndex((r) => r.id === selectedSigner?.id);
-  const selectedSignerStyles = useRecipientColors(
-    selectedSignerIndex === -1 ? 0 : selectedSignerIndex,
-  );
+  const selectedSignerStyles = getRecipientColorStyles(selectedSignerIndex);
 
   const [validateUninsertedFields, setValidateUninsertedFields] = useState(false);
 

packages/ui/primitives/document-flow/field-item.tsx

@@ -15,7 +15,7 @@ import { PDF_VIEWER_PAGE_SELECTOR } from '@documenso/lib/constants/pdf-viewer';
 import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
 import { ZCheckboxFieldMeta, ZRadioFieldMeta } from '@documenso/lib/types/field-meta';
 
-import { useRecipientColors } from '../../lib/recipient-colors';
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
 import { cn } from '../../lib/utils';
 import { FieldContent } from './field-content';
 import type { TDocumentFlowFormSchema } from './types';
@@ -100,7 +100,7 @@ const FieldItemInner = ({
     `${PDF_VIEWER_PAGE_SELECTOR}[data-page-number="${field.pageNumber}"]`,
   );
 
-  const signerStyles = useRecipientColors(recipientIndex);
+  const signerStyles = getRecipientColorStyles(recipientIndex);
 
   const isDevMode = searchParams.get('devmode') === 'true';
 

packages/ui/primitives/recipient-selector.tsx

@@ -102,12 +102,8 @@ export const RecipientSelector = ({
           role="combobox"
           className={cn(
             'bg-background text-muted-foreground hover:text-foreground justify-between font-normal',
-            getRecipientColorStyles(
-              Math.max(
-                recipients.findIndex((r) => r.id === selectedRecipient?.id),
-                0,
-              ),
-            ).comboxBoxTrigger,
+            getRecipientColorStyles(recipients.findIndex((r) => r.id === selectedRecipient?.id))
+              .comboBoxTrigger,
             className,
           )}
         >
@@ -151,12 +147,8 @@ export const RecipientSelector = ({
                   key={recipient.id}
                   className={cn(
                     'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
-                    getRecipientColorStyles(
-                      Math.max(
-                        recipients.findIndex((r) => r.id === recipient.id),
-                        0,
-                      ),
-                    ).comboxBoxItem,
+                    getRecipientColorStyles(recipients.findIndex((r) => r.id === recipient.id))
+                      .comboBoxItem,
                     {
                       'text-muted-foreground': recipient.sendStatus === SendStatus.SENT,
                     },

packages/ui/primitives/template-flow/add-template-fields.tsx

@@ -57,7 +57,7 @@ import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/type
 import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
-import { getRecipientColorStyles, useRecipientColors } from '../../lib/recipient-colors';
+import { getRecipientColorStyles } from '../../lib/recipient-colors';
 import type { FieldFormType } from '../document-flow/add-fields';
 import { FieldAdvancedSettings } from '../document-flow/field-item-advanced-settings';
 import { Form } from '../form/form';
@@ -158,9 +158,7 @@ export const AddTemplateFieldsFormPartial = ({
   const [showRecipientsSelector, setShowRecipientsSelector] = useState(false);
 
   const selectedSignerIndex = recipients.findIndex((r) => r.id === selectedSigner?.id);
-  const selectedSignerStyles = useRecipientColors(
-    selectedSignerIndex === -1 ? 0 : selectedSignerIndex,
-  );
+  const selectedSignerStyles = getRecipientColorStyles(selectedSignerIndex);
 
   const onFieldCopy = useCallback(
     (event?: KeyboardEvent | null, options?: { duplicate?: boolean; duplicateAll?: boolean }) => {
@@ -653,7 +651,7 @@ export const AddTemplateFieldsFormPartial = ({
                     role="combobox"
                     className={cn(
                       'mb-12 mt-2 justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
-                      selectedSignerStyles?.comboxBoxTrigger,
+                      selectedSignerStyles?.comboBoxTrigger,
                     )}
                   >
                     {selectedSigner?.email &&
@@ -710,11 +708,8 @@ export const AddTemplateFieldsFormPartial = ({
                             className={cn(
                               'px-2 last:mb-1 [&:not(:first-child)]:mt-1',
                               getRecipientColorStyles(
-                                Math.max(
-                                  recipients.findIndex((r) => r.id === recipient.id),
-                                  0,
-                                ),
-                              )?.comboxBoxItem,
+                                recipients.findIndex((r) => r.id === recipient.id),
+                              )?.comboBoxItem,
                             )}
                             onSelect={() => {
                               setSelectedSigner(recipient);