fix: wip

packages/ui/components/field/field.tsx

@@ -1,14 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import type { Field } from '@prisma/client';
 import { createPortal } from 'react-dom';
 
 import { useFieldPageCoords } from '@documenso/lib/client-only/hooks/use-field-page-coords';
-import type { TFieldMetaSchema } from '@documenso/lib/types/field-meta';
-import { ZFieldMetaSchema } from '@documenso/lib/types/field-meta';
 
+import { useSignerColors } from '../../lib/signer-colors';
 import { cn } from '../../lib/utils';
-import { Card, CardContent } from '../../primitives/card';
 
 export type FieldRootContainerProps = {
   field: Field;
@@ -19,53 +17,6 @@ export type FieldContainerPortalProps = {
   field: Field;
   className?: string;
   children: React.ReactNode;
-  cardClassName?: string;
-};
-
-const getCardClassNames = (
-  field: Field,
-  parsedField: TFieldMetaSchema | null,
-  isValidating: boolean,
-  checkBoxOrRadio: boolean,
-  cardClassName?: string,
-) => {
-  const baseClasses =
-    'field--FieldRootContainer field-card-container relative z-20 h-full w-full transition-all';
-
-  const insertedClasses =
-    'bg-primary/20 border-primary ring-primary/20 ring-offset-primary/20 ring-2 ring-offset-2 dark:shadow-none';
-  const nonRequiredClasses =
-    'border-yellow-300 shadow-none ring-2 ring-yellow-100 ring-offset-2 ring-offset-yellow-100 dark:border-2';
-  const validatingClasses = 'border-orange-300 ring-1 ring-orange-300';
-  const requiredClasses =
-    'border-red-500 shadow-none ring-2 ring-red-200 ring-offset-2 ring-offset-red-200 hover:text-red-500';
-  const requiredCheckboxRadioClasses = 'border-dashed border-red-500';
-
-  if (checkBoxOrRadio) {
-    return cn(
-      {
-        [insertedClasses]: field.inserted,
-        'ring-offset-yellow-200 border-dashed border-yellow-300 ring-2 ring-yellow-200 ring-offset-2 dark:shadow-none':
-          !field.inserted && !parsedField?.required,
-        'shadow-none': !field.inserted,
-        [validatingClasses]: !field.inserted && isValidating,
-        [requiredCheckboxRadioClasses]: !field.inserted && parsedField?.required,
-      },
-      cardClassName,
-    );
-  }
-
-  return cn(
-    baseClasses,
-    {
-      [insertedClasses]: field.inserted,
-      [nonRequiredClasses]: !field.inserted && !parsedField?.required,
-      'shadow-none': !field.inserted && checkBoxOrRadio,
-      [validatingClasses]: !field.inserted && isValidating,
-      [requiredClasses]: !field.inserted && parsedField?.required && !checkBoxOrRadio,
-    },
-    cardClassName,
-  );
 };
 
 export function FieldContainerPortal({
@@ -76,13 +27,10 @@ export function FieldContainerPortal({
   const coords = useFieldPageCoords(field);
 
   const isCheckboxOrRadioField = field.type === 'CHECKBOX' || field.type === 'RADIO';
-  const isFieldSigned = field.inserted;
 
   const style = {
     top: `${coords.y}px`,
     left: `${coords.x}px`,
-    // height: `${coords.height}px`,
-    // width: `${coords.width}px`,
     ...(!isCheckboxOrRadioField && {
       height: `${coords.height}px`,
       width: `${coords.width}px`,
@@ -97,10 +45,12 @@ export function FieldContainerPortal({
   );
 }
 
-export function FieldRootContainer({ field, children, cardClassName }: FieldContainerPortalProps) {
+export function FieldRootContainer({ field, children }: FieldContainerPortalProps) {
   const [isValidating, setIsValidating] = useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
 
+  const signerStyles = useSignerColors(field.recipientId);
+
   useEffect(() => {
     if (!ref.current) {
       return;
@@ -121,33 +71,36 @@ export function FieldRootContainer({ field, children, cardClassName }: FieldCont
     };
   }, []);
 
-  const parsedField = useMemo(
-    () => (field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : null),
-    [field.fieldMeta],
-  );
-  const isCheckboxOrRadio = useMemo(
-    () => parsedField?.type === 'checkbox' || parsedField?.type === 'radio',
-    [parsedField],
-  );
+  // // todo: remove
+  // const parsedField = useMemo(
+  //   () => (field.fieldMeta ? ZFieldMetaSchema.parse(field.fieldMeta) : null),
+  //   [field.fieldMeta],
+  // );
 
-  const cardClassNames = useMemo(
-    () => getCardClassNames(field, parsedField, isValidating, isCheckboxOrRadio, cardClassName),
-    [field, parsedField, isValidating, isCheckboxOrRadio, cardClassName],
-  );
+  // // todo: remove
+  // const isCheckboxOrRadio = useMemo(
+  //   () => parsedField?.type === 'checkbox' || parsedField?.type === 'radio',
+  //   [parsedField],
+  // );
 
   return (
     <FieldContainerPortal field={field}>
-      <Card
+      <div
         id={`field-${field.id}`}
         ref={ref}
         data-field-type={field.type}
         data-inserted={field.inserted ? 'true' : 'false'}
-        className={cardClassNames}
+        className={cn(
+          'field--FieldRootContainer field-card-container relative z-20 h-full w-full rounded-sm ring-2 transition-all',
+          'ring-signer-green bg-white/90',
+          'px-2', // This is specific to try sync with field insertion. See insert-field-in-pdf before changing this.
+          {
+            'flex items-center justify-center': !field.inserted,
+          },
+        )}
       >
-        <CardContent className="text-foreground hover:shadow-primary-foreground group flex h-full w-full flex-col items-center justify-center p-2">
-          {children}
-        </CardContent>
-      </Card>
+        {children}
+      </div>
     </FieldContainerPortal>
   );
 }