refactor: avoid recipient color duplication (#2355)

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

@@ -16,7 +16,7 @@ import { type TFieldMetaSchema, ZFieldMetaSchema } from '@documenso/lib/types/fi
 import { nanoid } from '@documenso/lib/universal/id';
 import { ADVANCED_FIELD_TYPES_WITH_OPTIONAL_SETTING } from '@documenso/lib/utils/advanced-fields-helpers';
 import { getDocumentDataUrlForPdfViewer } from '@documenso/lib/utils/envelope-download';
-import { useRecipientColors } from '@documenso/ui/lib/recipient-colors';
+import { getRecipientColorStyles } 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';
@@ -155,9 +155,7 @@ export const ConfigureFieldsView = ({
   });
 
   const selectedRecipientIndex = recipients.findIndex((r) => r.id === selectedRecipient?.id);
-  const selectedRecipientStyles = useRecipientColors(
-    selectedRecipientIndex === -1 ? 0 : selectedRecipientIndex,
-  );
+  const selectedRecipientStyles = getRecipientColorStyles(selectedRecipientIndex);
 
   const form = useForm<TConfigureFieldsFormSchema>({
     defaultValues: {

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

@@ -9,7 +9,7 @@ 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 { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
 
@@ -131,18 +131,16 @@ export const DocumentSigningFieldContainer = ({
 
   return (
     <FieldRootContainer
-      color={
-        field.fieldMeta?.readOnly ? RECIPIENT_COLOR_STYLES.readOnly : RECIPIENT_COLOR_STYLES.green
-      }
-      field={field}
-    >
-      {!field.inserted && !loading && !readOnlyField && (
-        <button
-          type="submit"
-          className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
-          onClick={async () => handleInsertField()}
-        />
-      )}
+        color={getRecipientColorStyles(field.fieldMeta?.readOnly ? 'readOnly' : 0)}
+        field={field}
+      >
+        {!field.inserted && !loading && !readOnlyField && (
+          <button
+            type="submit"
+            className="absolute inset-0 z-10 h-full w-full rounded-[2px]"
+            onClick={async () => handleInsertField()}
+          />
+        )}
 
       {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
         <button

apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx

@@ -23,7 +23,7 @@ import { FIELD_META_DEFAULT_VALUES } from '@documenso/lib/types/field-meta';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientFieldsBeModified } from '@documenso/lib/utils/recipients';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
-import { RECIPIENT_COLOR_STYLES } from '@documenso/ui/lib/recipient-colors';
+import { getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import { cn } from '@documenso/ui/lib/utils';
 import { FRIENDLY_FIELD_TYPE } from '@documenso/ui/primitives/document-flow/types';
 
@@ -253,9 +253,10 @@ export const EnvelopeEditorFieldDragDrop = ({
     };
   }, [onMouseClick, onMouseMove, selectedField]);
 
-  const selectedRecipientColor = useMemo(() => {
-    return selectedRecipientId ? getRecipientColorKey(selectedRecipientId) : 'green';
-  }, [selectedRecipientId, getRecipientColorKey]);
+  const selectedRecipientStyles = useMemo(
+    () => getRecipientColorStyles(getRecipientColorKey(selectedRecipientId ?? -1)),
+    [selectedRecipientId, getRecipientColorKey],
+  );
 
   return (
     <>
@@ -270,21 +271,14 @@ export const EnvelopeEditorFieldDragDrop = ({
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
               'group flex h-12 cursor-pointer items-center justify-center rounded-lg border border-border px-4 transition-colors',
-              RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
+              selectedRecipientStyles.fieldButton,
             )}
           >
             <p
               className={cn(
                 'flex items-center justify-center gap-x-1.5 font-noto text-sm font-normal text-muted-foreground group-data-[selected]:text-foreground',
                 field.className,
-                {
-                  'group-hover:text-recipient-green': selectedRecipientColor === 'green',
-                  'group-hover:text-recipient-blue': selectedRecipientColor === 'blue',
-                  'group-hover:text-recipient-purple': selectedRecipientColor === 'purple',
-                  'group-hover:text-recipient-orange': selectedRecipientColor === 'orange',
-                  'group-hover:text-recipient-yellow': selectedRecipientColor === 'yellow',
-                  'group-hover:text-recipient-pink': selectedRecipientColor === 'pink',
-                },
+                selectedRecipientStyles.fieldButtonText,
               )}
             >
               {field.type !== FieldType.SIGNATURE && <field.icon className="h-4 w-4" />}
@@ -298,7 +292,7 @@ export const EnvelopeEditorFieldDragDrop = ({
         <div
           className={cn(
             'dark:text-muted-background pointer-events-none fixed z-50 flex cursor-pointer flex-col items-center justify-center rounded-[2px] bg-white font-noto text-muted-foreground ring-2 transition duration-200 [container-type:size]',
-            RECIPIENT_COLOR_STYLES[selectedRecipientColor].base,
+            selectedRecipientStyles.base,
             selectedField === FieldType.SIGNATURE && 'font-signature',
             {
               '-rotate-6 scale-90 opacity-50 dark:bg-black/20': !isFieldWithinBounds,

apps/remix/app/components/general/envelope-editor/envelope-recipient-selector.tsx

@@ -59,12 +59,8 @@ export const EnvelopeRecipientSelector = ({
           role="combobox"
           className={cn(
             'justify-between bg-background font-normal text-muted-foreground hover:text-foreground',
-            getRecipientColorStyles(
-              Math.max(
-                recipients.findIndex((r) => r.id === selectedRecipient?.id),
-                0,
-              ),
-            ).comboxBoxTrigger,
+            getRecipientColorStyles(recipients.findIndex((r) => r.id === selectedRecipient?.id))
+              .comboBoxTrigger,
             className,
           )}
         >
@@ -197,12 +193,8 @@ export const EnvelopeRecipientSelectorCommand = ({
               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,
                   'cursor-not-allowed': isRecipientDisabled(recipient.id),

apps/remix/app/components/general/envelope-signing/envelope-signer-page-renderer.tsx

@@ -32,7 +32,6 @@ import { extractInitials } from '@documenso/lib/utils/recipient-formatter';
 import type { TSignEnvelopeFieldValue } from '@documenso/trpc/server/envelope-router/sign-envelope-field.types';
 import { EnvelopeRecipientFieldTooltip } from '@documenso/ui/components/document/envelope-recipient-field-tooltip';
 import { EnvelopeFieldToolTip } from '@documenso/ui/components/field/envelope-field-tooltip';
-import type { TRecipientColor } from '@documenso/ui/lib/recipient-colors';
 import { useToast } from '@documenso/ui/primitives/use-toast';
 
 import { useEmbedSigningContext } from '~/components/embed/embed-signing-context';
@@ -139,13 +138,11 @@ export const EnvelopeSignerPageRenderer = ({ pageData }: { pageData: PageRenderD
 
     const fieldToRender = ZFullFieldSchema.parse(unparsedField);
 
-    let color: TRecipientColor = 'green';
-
-    if (fieldToRender.fieldMeta?.readOnly) {
-      color = 'readOnly';
-    } else if (showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender)) {
-      color = 'orange';
-    }
+    const color = fieldToRender.fieldMeta?.readOnly
+      ? 'readOnly'
+      : showPendingFieldTooltip && isFieldUnsignedAndRequired(fieldToRender)
+        ? 'orange'
+        : 'green';
 
     const { fieldGroup } = renderField({
       scale,

apps/remix/tailwind.config.ts

@@ -1,11 +1,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const baseConfig = require('@documenso/tailwind-config');
+const baseConfig = require('@documenso/ui/tailwind.config.cjs');
 const path = require('path');
 
 module.exports = {
-  ...baseConfig,
+  presets: [baseConfig],
   content: [
-    ...baseConfig.content,
     './app/**/*.{ts,tsx}',
     `${path.join(require.resolve('@documenso/ui'), '..')}/components/**/*.{ts,tsx}`,
     `${path.join(require.resolve('@documenso/ui'), '..')}/icons/**/*.{ts,tsx}`,