From f26871662e8afa13156950df1f85f37ecc607304 Mon Sep 17 00:00:00 2001 From: David Nguyen Date: Mon, 17 Nov 2025 16:47:33 +1100 Subject: [PATCH] fix: add field drag drop colors --- .../envelope-editor-fields-drag-drop.tsx | 26 ++++++--- .../envelope-editor-fields-page.tsx | 54 +++++++++++-------- packages/ui/lib/recipient-colors.ts | 12 ++--- 3 files changed, 57 insertions(+), 35 deletions(-) diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx index bca1db219..cccd94d29 100644 --- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-drag-drop.tsx +++ b/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', + }, )} >

diff --git a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx b/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx index e4b3bf82f..d2d90764d 100644 --- a/apps/remix/app/components/general/envelope-editor/envelope-editor-fields-page.tsx +++ b/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 (

@@ -175,32 +182,35 @@ export const EnvelopeEditorFieldsPage = () => { align="end" /> - {editorFields.selectedRecipient && - !canRecipientFieldsBeModified(editorFields.selectedRecipient, envelope.fields) && ( - - - - This recipient can no longer be modified as they have signed a field, or - completed the document. - - - - )} + {!canRecipientBeModified && ( + + + + This recipient can no longer be modified as they have signed a field, or + completed the document. + + + + )} - + {canRecipientBeModified && ( + <> + - {/* Add fields section. */} -
-

- Add Fields -

+ {/* Add fields section. */} +
+

+ Add Fields +

- -
+ +
+ + )} {/* Field details section. */} diff --git a/packages/ui/lib/recipient-colors.ts b/packages/ui/lib/recipient-colors.ts index 76fbfaf11..4ad4a7533 100644 --- a/packages/ui/lib/recipient-colors.ts +++ b/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: