From 106f796fea5dff42d80cbc70e07ed159ceb03cf8 Mon Sep 17 00:00:00 2001
From: David Nguyen <davidngu28@gmail.com>
Date: Thu, 10 Jul 2025 12:35:18 +1000
Subject: [PATCH] fix: readonly field styling (#1887)

Changes:
- Updating styling of read only fields
- Removed truncation for fields and used overflow hidden instead
---
 .../document-signing-field-container.tsx          | 15 ++++++---------
 .../document-signing/document-signing-fields.tsx  |  2 +-
 .../document-signing-text-field.tsx               |  4 +---
 packages/ui/lib/recipient-colors.ts               |  9 +++++++++
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
index c7ec821c1..7c67ae559 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-field-container.tsx
@@ -131,7 +131,12 @@ export const DocumentSigningFieldContainer = ({
 
   return (
     <div className={cn('[container-type:size]')}>
-      <FieldRootContainer color={RECIPIENT_COLOR_STYLES.green} field={field}>
+      <FieldRootContainer
+        color={
+          field.fieldMeta?.readOnly ? RECIPIENT_COLOR_STYLES.readOnly : RECIPIENT_COLOR_STYLES.green
+        }
+        field={field}
+      >
         {!field.inserted && !loading && !readOnlyField && (
           <button
             type="submit"
@@ -140,14 +145,6 @@ export const DocumentSigningFieldContainer = ({
           />
         )}
 
-        {readOnlyField && (
-          <button className="bg-background/40 absolute inset-0 z-10 flex h-full w-full items-center justify-center rounded-md text-sm opacity-0 duration-200 group-hover:opacity-100">
-            <span className="bg-foreground/50 text-background rounded-xl p-2">
-              <Trans>Read only field</Trans>
-            </span>
-          </button>
-        )}
-
         {type === 'Checkbox' && field.inserted && !loading && !readOnlyField && (
           <button
             className="absolute -bottom-10 flex items-center justify-evenly rounded-md border bg-gray-900 opacity-0 group-hover:opacity-100"
diff --git a/apps/remix/app/components/general/document-signing/document-signing-fields.tsx b/apps/remix/app/components/general/document-signing/document-signing-fields.tsx
index 99e1bc8e1..8899836ba 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-fields.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-fields.tsx
@@ -34,7 +34,7 @@ export const DocumentSigningFieldsInserted = ({
   textAlign = 'left',
 }: DocumentSigningFieldsInsertedProps) => {
   return (
-    <div className="flex h-full w-full items-center">
+    <div className="flex h-full w-full items-center overflow-hidden">
       <p
         className={cn(
           'text-foreground w-full text-left text-[clamp(0.425rem,25cqw,0.825rem)] duration-200',
diff --git a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
index 3cfa87ab9..9fcf9c6f3 100644
--- a/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
+++ b/apps/remix/app/components/general/document-signing/document-signing-text-field.tsx
@@ -262,9 +262,7 @@ export const DocumentSigningTextField = ({
 
       {field.inserted && (
         <DocumentSigningFieldsInserted textAlign={parsedFieldMeta?.textAlign}>
-          {field.customText.length < 20
-            ? field.customText
-            : field.customText.substring(0, 20) + '...'}
+          {field.customText}
         </DocumentSigningFieldsInserted>
       )}
 
diff --git a/packages/ui/lib/recipient-colors.ts b/packages/ui/lib/recipient-colors.ts
index 6a9c30227..39d24f4b5 100644
--- a/packages/ui/lib/recipient-colors.ts
+++ b/packages/ui/lib/recipient-colors.ts
@@ -15,6 +15,15 @@ export type RecipientColorStyles = {
 
 // !: values of the declared variable to do all the background, border and shadow styles.
 export const RECIPIENT_COLOR_STYLES = {
+  readOnly: {
+    base: 'ring-neutral-400',
+    fieldItem: 'group/field-item rounded-[2px]',
+    fieldItemInitials: '',
+    comboxBoxTrigger:
+      'ring-2 ring-recipient-green shadow-[0_0_0_5px_hsl(var(--recipient-green)/10%),0_0_0_2px_hsl(var(--recipient-green)/60%),0_0_0_0.5px_hsl(var(--recipient-green))]',
+    comboxBoxItem: '',
+  },
+
   green: {
     base: 'ring-recipient-green hover:bg-recipient-green/30',
     fieldItem: 'group/field-item rounded-[2px]',