fix(09-01): bg-gray-100 on prepare panel, stack field name/value rows to fit narrow panel

This commit is contained in:
Chandler Copeland
2026-03-21 12:31:20 -06:00
parent 28a460e9cc
commit 27003af70f
2 changed files with 14 additions and 15 deletions

View File

@@ -130,7 +130,7 @@ export function PreparePanel({ docId, defaultEmail, clientName, currentStatus, a
} }
return ( return (
<div className="rounded-lg border border-gray-200 bg-gray-50 p-4 space-y-4"> <div className="rounded-lg border border-gray-200 bg-gray-100 p-4 space-y-4">
<h2 className="font-semibold text-gray-900">Prepare Document</h2> <h2 className="font-semibold text-gray-900">Prepare Document</h2>
<div> <div>

View File

@@ -48,31 +48,30 @@ export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
<p className="text-xs text-gray-400 mt-0.5"> <p className="text-xs text-gray-400 mt-0.5">
Pre-fill text fields in the PDF before sending. Leave blank to skip a field. Pre-fill text fields in the PDF before sending. Leave blank to skip a field.
</p> </p>
<div className="flex gap-2 items-center px-1">
<span className="flex-1 text-xs font-medium text-gray-500 uppercase tracking-wide">Field name</span>
<span className="flex-1 text-xs font-medium text-gray-500 uppercase tracking-wide">Value</span>
<span className="w-6" />
</div>
{rows.map((row, i) => ( {rows.map((row, i) => (
<div key={i} className="flex gap-2 items-center"> <div key={i} className="rounded border border-gray-200 bg-white p-2 space-y-1">
<div className="flex items-center gap-1">
<span className="text-xs font-medium text-gray-400 uppercase tracking-wide flex-1">Field name</span>
<button
onClick={() => removeRow(i)}
className="text-gray-300 hover:text-red-500 text-base leading-none"
aria-label="Remove row"
type="button"
>&times;</button>
</div>
<input <input
placeholder="e.g. PropertyAddress" placeholder="e.g. PropertyAddress"
value={row.label} value={row.label}
onChange={e => updateRow(i, 'label', e.target.value)} onChange={e => updateRow(i, 'label', e.target.value)}
className="flex-1 border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]" className="w-full border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]"
/> />
<span className="text-xs font-medium text-gray-400 uppercase tracking-wide block pt-0.5">Value</span>
<input <input
placeholder="Value to fill in" placeholder="Value to fill in"
value={row.value} value={row.value}
onChange={e => updateRow(i, 'value', e.target.value)} onChange={e => updateRow(i, 'value', e.target.value)}
className="flex-1 border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]" className="w-full border rounded px-2 py-1.5 text-sm focus:border-[var(--gold)] focus:ring-[var(--gold)]"
/> />
<button
onClick={() => removeRow(i)}
className="w-6 text-gray-300 hover:text-red-500 text-base leading-none flex items-center justify-center"
aria-label="Remove row"
type="button"
>&times;</button>
</div> </div>
))} ))}
{rows.length < 10 && ( {rows.length < 10 && (