fix(09-01): bg-gray-100 on prepare panel, stack field name/value rows to fit narrow panel
This commit is contained in:
@@ -130,7 +130,7 @@ export function PreparePanel({ docId, defaultEmail, clientName, currentStatus, a
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<div>
|
||||
|
||||
@@ -48,31 +48,30 @@ export function TextFillForm({ onChange, initialData }: TextFillFormProps) {
|
||||
<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.
|
||||
</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) => (
|
||||
<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"
|
||||
>×</button>
|
||||
</div>
|
||||
<input
|
||||
placeholder="e.g. PropertyAddress"
|
||||
value={row.label}
|
||||
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
|
||||
placeholder="Value to fill in"
|
||||
value={row.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"
|
||||
>×</button>
|
||||
</div>
|
||||
))}
|
||||
{rows.length < 10 && (
|
||||
|
||||
Reference in New Issue
Block a user