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 (
|
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>
|
||||||
|
|||||||
@@ -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"
|
||||||
|
>×</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"
|
|
||||||
>×</button>
|
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
{rows.length < 10 && (
|
{rows.length < 10 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user