fix: add field drag drop colors

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

@@ -278,8 +278,20 @@ export const EnvelopeEditorFieldDragDrop = ({
             onMouseDown={() => setSelectedField(field.type)}
             data-selected={selectedField === field.type ? true : undefined}
             className={cn(
-              'border-border group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
+              'group flex h-12 cursor-pointer items-center justify-center rounded-lg border px-4 transition-colors',
               RECIPIENT_COLOR_STYLES[selectedRecipientColor].fieldButton,
+              {
+                'text-recipient-green border-recipient-green/30':
+                  selectedRecipientColor === 'green',
+                'text-recipient-blue border-recipient-blue/30': selectedRecipientColor === 'blue',
+                'text-recipient-purple border-recipient-purple/30':
+                  selectedRecipientColor === 'purple',
+                'text-recipient-orange border-recipient-orange/30':
+                  selectedRecipientColor === 'orange',
+                'text-recipient-yellow border-recipient-yellow/30':
+                  selectedRecipientColor === 'yellow',
+                'text-recipient-pink border-recipient-pink/30': selectedRecipientColor === 'pink',
+              },
             )}
           >
             <p
@@ -287,12 +299,12 @@ export const EnvelopeEditorFieldDragDrop = ({
                 'text-muted-foreground font-noto group-data-[selected]:text-foreground flex items-center justify-center gap-x-1.5 text-sm font-normal',
                 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',
+                  'text-recipient-green': selectedRecipientColor === 'green',
+                  'text-recipient-blue': selectedRecipientColor === 'blue',
+                  'text-recipient-purple': selectedRecipientColor === 'purple',
+                  'text-recipient-orange': selectedRecipientColor === 'orange',
+                  'text-recipient-yellow': selectedRecipientColor === 'yellow',
+                  'text-recipient-pink': selectedRecipientColor === 'pink',
                 },
               )}
             >

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

@@ -106,6 +106,13 @@ export const EnvelopeEditorFieldsPage = () => {
     editorFields.setSelectedRecipient(firstSelectableRecipient?.id ?? null);
   }, []);
 
+  const canRecipientBeModified = useMemo(
+    () =>
+      editorFields.selectedRecipient !== null &&
+      canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields),
+    [editorFields.selectedRecipient, envelope.fields],
+  );
+
   return (
     <div className="relative flex h-full">
       <div className="flex w-full flex-col overflow-y-auto">
@@ -175,32 +182,35 @@ export const EnvelopeEditorFieldsPage = () => {
               align="end"
             />
 
-            {editorFields.selectedRecipient &&
-              !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && (
-                <Alert className="mt-4" variant="warning">
-                  <AlertDescription>
-                    <Trans>
-                      This recipient can no longer be modified as they have signed a field, or
-                      completed the document.
-                    </Trans>
-                  </AlertDescription>
-                </Alert>
-              )}
+            {!canRecipientBeModified && (
+              <Alert className="mt-4" variant="warning">
+                <AlertDescription>
+                  <Trans>
+                    This recipient can no longer be modified as they have signed a field, or
+                    completed the document.
+                  </Trans>
+                </AlertDescription>
+              </Alert>
+            )}
           </section>
 
-          <Separator className="my-4" />
+          {canRecipientBeModified && (
+            <>
+              <Separator className="my-4" />
 
-          {/* Add fields section. */}
-          <section className="px-4">
-            <h3 className="text-foreground mb-2 text-sm font-semibold">
-              <Trans>Add Fields</Trans>
-            </h3>
+              {/* Add fields section. */}
+              <section className="px-4">
+                <h3 className="text-foreground mb-2 text-sm font-semibold">
+                  <Trans>Add Fields</Trans>
+                </h3>
 
-            <EnvelopeEditorFieldDragDrop
-              selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
-              selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
-            />
-          </section>
+                <EnvelopeEditorFieldDragDrop
+                  selectedRecipientId={editorFields.selectedRecipient?.id ?? null}
+                  selectedEnvelopeItemId={currentEnvelopeItem?.id ?? null}
+                />
+              </section>
+            </>
+          )}
 
           {/* Field details section. */}
           <AnimateGenericFadeInOut key={editorFields.selectedField?.formId}>

apps/remix/app/components/general/envelope-editor/envelope-editor-header.tsx

@@ -44,7 +44,7 @@ export default function EnvelopeEditorHeader() {
     <nav className="bg-background border-border w-full border-b px-4 py-3 md:px-6">
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-4">
-          <Link to={relativePath.basePath}>
+          <Link to="/">
             <BrandingLogo className="h-6 w-auto" />
           </Link>
           <Separator orientation="vertical" className="h-6" />

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

@@ -22,14 +22,12 @@ import { useDebouncedValue } from '@documenso/lib/client-only/hooks/use-debounce
 import { useCurrentEnvelopeEditor } from '@documenso/lib/client-only/providers/envelope-editor-provider';
 import { useCurrentOrganisation } from '@documenso/lib/client-only/providers/organisation';
 import { useSession } from '@documenso/lib/client-only/providers/session';
-import { isTemplateRecipientEmailPlaceholder } from '@documenso/lib/constants/template';
 import {
   ZRecipientActionAuthTypesSchema,
   ZRecipientAuthOptionsSchema,
 } from '@documenso/lib/types/document-auth';
 import { nanoid } from '@documenso/lib/universal/id';
 import { canRecipientBeModified as utilCanRecipientBeModified } from '@documenso/lib/utils/recipients';
-import { generateRecipientPlaceholder } from '@documenso/lib/utils/templates';
 import { trpc } from '@documenso/trpc/react';
 import { AnimateGenericFadeInOut } from '@documenso/ui/components/animate/animate-generic-fade-in-out';
 import { RecipientActionAuthSelect } from '@documenso/ui/components/recipient/recipient-action-auth-select';
@@ -84,8 +82,7 @@ const ZEnvelopeRecipientsForm = z.object({
 type TEnvelopeRecipientsForm = z.infer<typeof ZEnvelopeRecipientsForm>;
 
 export const EnvelopeEditorRecipientForm = () => {
-  const { envelope, setRecipientsDebounced, updateEnvelope, isTemplate } =
-    useCurrentEnvelopeEditor();
+  const { envelope, setRecipientsDebounced, updateEnvelope } = useCurrentEnvelopeEditor();
 
   const organisation = useCurrentOrganisation();
 
@@ -122,7 +119,6 @@ export const EnvelopeEditorRecipientForm = () => {
       role: RecipientRole.SIGNER,
       signingOrder: 1,
       actionAuth: [],
-      ...(isTemplate ? generateRecipientPlaceholder(1) : {}),
     },
   ];
 
@@ -238,8 +234,6 @@ export const EnvelopeEditorRecipientForm = () => {
   };
 
   const onAddSigner = () => {
-    const placeholderRecipientCount = signers.length > 1 ? signers.length + 1 : 2;
-
     appendSigner({
       formId: nanoid(12),
       name: '',
@@ -247,10 +241,7 @@ export const EnvelopeEditorRecipientForm = () => {
       role: RecipientRole.SIGNER,
       actionAuth: [],
       signingOrder: signers.length > 0 ? (signers[signers.length - 1]?.signingOrder ?? 0) + 1 : 1,
-      ...(isTemplate ? generateRecipientPlaceholder(placeholderRecipientCount) : {}),
     });
-
-    void form.trigger('signers');
   };
 
   const onRemoveSigner = (index: number) => {
@@ -815,7 +806,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                       })}
                                     >
                                       {!showAdvancedSettings && index === 0 && (
-                                        <FormLabel required={!isTemplate}>
+                                        <FormLabel required>
                                           <Trans>Email</Trans>
                                         </FormLabel>
                                       )}
@@ -824,12 +815,7 @@ export const EnvelopeEditorRecipientForm = () => {
                                         <RecipientAutoCompleteInput
                                           type="email"
                                           placeholder={t`Email`}
-                                          value={
-                                            isTemplate &&
-                                            isTemplateRecipientEmailPlaceholder(field.value)
-                                              ? ''
-                                              : field.value
-                                          }
+                                          value={field.value}
                                           disabled={
                                             snapshot.isDragging ||
                                             isSubmitting ||

packages/ui/lib/recipient-colors.ts

@@ -39,7 +39,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(122, 195, 85, 1)',
     baseRingHover: 'rgba(122, 195, 85, 0.3)',
     baseTextHover: 'rgba(122, 195, 85, 1)',
-    fieldButton: 'hover:border-recipient-green hover:bg-recipient-green/30 ',
+    fieldButton: 'hover:border-recipient-green bg-recipient-green/5 hover:bg-recipient-green/30 ',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-green',
     comboxBoxTrigger:
@@ -52,7 +52,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(56, 123, 199, 1)',
     baseRingHover: 'rgba(56, 123, 199, 0.3)',
     baseTextHover: 'rgba(56, 123, 199, 1)',
-    fieldButton: 'hover:border-recipient-blue hover:bg-recipient-blue/30',
+    fieldButton: 'hover:border-recipient-blue bg-recipient-blue/5 hover:bg-recipient-blue/30',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-blue',
     comboxBoxTrigger:
@@ -65,7 +65,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(151, 71, 255, 1)',
     baseRingHover: 'rgba(151, 71, 255, 0.3)',
     baseTextHover: 'rgba(151, 71, 255, 1)',
-    fieldButton: 'hover:border-recipient-purple hover:bg-recipient-purple/30',
+    fieldButton: 'hover:border-recipient-purple bg-recipient-purple/5 hover:bg-recipient-purple/30',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-purple',
     comboxBoxTrigger:
@@ -78,7 +78,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(246, 159, 30, 1)',
     baseRingHover: 'rgba(246, 159, 30, 0.3)',
     baseTextHover: 'rgba(246, 159, 30, 1)',
-    fieldButton: 'hover:border-recipient-orange hover:bg-recipient-orange/30',
+    fieldButton: 'hover:border-recipient-orange bg-recipient-orange/5 hover:bg-recipient-orange/30',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-orange',
     comboxBoxTrigger:
@@ -91,7 +91,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(219, 186, 0, 1)',
     baseRingHover: 'rgba(219, 186, 0, 0.3)',
     baseTextHover: 'rgba(219, 186, 0, 1)',
-    fieldButton: 'hover:border-recipient-yellow hover:bg-recipient-yellow/30',
+    fieldButton: 'hover:border-recipient-yellow bg-recipient-yellow/5 hover:bg-recipient-yellow/30',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-yellow',
     comboxBoxTrigger:
@@ -104,7 +104,7 @@ export const RECIPIENT_COLOR_STYLES = {
     baseRing: 'rgba(217, 74, 186, 1)',
     baseRingHover: 'rgba(217, 74, 186, 0.3)',
     baseTextHover: 'rgba(217, 74, 186, 1)',
-    fieldButton: 'hover:border-recipient-pink hover:bg-recipient-pink/30',
+    fieldButton: 'hover:border-recipient-pink bg-recipient-pink/5 hover:bg-recipient-pink/30',
     fieldItem: 'group/field-item rounded-[2px]',
     fieldItemInitials: 'group-hover/field-item:bg-recipient-pink',
     comboxBoxTrigger: