ui cleanup
This commit is contained in:
@@ -12,8 +12,8 @@ interface CrmContactEntryFormProps {
|
||||
|
||||
export function CrmContactEntryForm({ form, isSaving, status, onChange, onSubmit }: CrmContactEntryFormProps) {
|
||||
return (
|
||||
<form className="space-y-5" onSubmit={onSubmit}>
|
||||
<div className="grid gap-5 md:grid-cols-[0.9fr_1.1fr]">
|
||||
<form className="space-y-4" onSubmit={onSubmit}>
|
||||
<div className="grid gap-4 xl:grid-cols-[minmax(0,0.9fr)_minmax(220px,1.1fr)]">
|
||||
<label className="block">
|
||||
<span className="mb-2 block text-sm font-semibold text-text">Interaction type</span>
|
||||
<select
|
||||
@@ -57,8 +57,8 @@ export function CrmContactEntryForm({ form, isSaving, status, onChange, onSubmit
|
||||
placeholder="Capture what happened, follow-ups, and commitments."
|
||||
/>
|
||||
</label>
|
||||
<div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/70 px-4 py-4">
|
||||
<span className="text-sm text-muted">{status}</span>
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<span className="min-w-0 text-sm text-muted">{status}</span>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
|
||||
@@ -93,8 +93,8 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="space-y-6">
|
||||
<div className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<section className="space-y-4">
|
||||
<div className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">CRM Detail</p>
|
||||
@@ -124,10 +124,10 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
|
||||
<article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<div className="grid gap-4 2xl:grid-cols-[minmax(0,1.2fr)_minmax(320px,0.8fr)]">
|
||||
<article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact</p>
|
||||
<dl className="mt-6 grid gap-5 md:grid-cols-2">
|
||||
<dl className="mt-5 grid gap-4 xl:grid-cols-2">
|
||||
<div>
|
||||
<dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt>
|
||||
<dd className="mt-2 text-base text-text">{record.email}</dd>
|
||||
@@ -146,7 +146,7 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
|
||||
</div>
|
||||
</dl>
|
||||
</article>
|
||||
<article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Internal Notes</p>
|
||||
<p className="mt-4 whitespace-pre-line text-sm leading-7 text-text">
|
||||
{record.notes || "No internal notes recorded for this account yet."}
|
||||
@@ -156,9 +156,9 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<section className="grid gap-6 xl:grid-cols-[0.85fr_1.15fr]">
|
||||
<section className="grid gap-4 2xl:grid-cols-[minmax(360px,0.88fr)_minmax(0,1.12fr)]">
|
||||
{canManage ? (
|
||||
<article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Contact History</p>
|
||||
<h4 className="mt-3 text-xl font-bold text-text">Add timeline entry</h4>
|
||||
<p className="mt-2 text-sm text-muted">
|
||||
@@ -175,7 +175,7 @@ export function CrmDetailPage({ entity }: CrmDetailPageProps) {
|
||||
</div>
|
||||
</article>
|
||||
) : null}
|
||||
<article className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<article className="min-w-0 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Timeline</p>
|
||||
<h4 className="mt-3 text-xl font-bold text-text">Recent interactions</h4>
|
||||
{record.contactHistory.length === 0 ? (
|
||||
|
||||
@@ -87,7 +87,7 @@ export function CrmFormPage({ entity, mode }: CrmFormPageProps) {
|
||||
|
||||
return (
|
||||
<form className="space-y-6" onSubmit={handleSubmit}>
|
||||
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">CRM Editor</p>
|
||||
@@ -106,10 +106,10 @@ export function CrmFormPage({ entity, mode }: CrmFormPageProps) {
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
<section className="space-y-6 rounded-[28px] border border-line/70 bg-surface/90 p-8 shadow-panel">
|
||||
<section className="space-y-5 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
|
||||
<CrmRecordForm form={form} onChange={updateField} />
|
||||
<div className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/70 px-4 py-4">
|
||||
<span className="text-sm text-muted">{status}</span>
|
||||
<div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<span className="min-w-0 text-sm text-muted">{status}</span>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
|
||||
@@ -36,7 +36,7 @@ export function CrmRecordForm({ form, onChange }: CrmRecordFormProps) {
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
<div className="grid gap-5 md:grid-cols-2">
|
||||
<div className="grid gap-4 xl:grid-cols-2 2xl:grid-cols-3">
|
||||
{fields.map((field) => (
|
||||
<label key={String(field.key)} className="block">
|
||||
<span className="mb-2 block text-sm font-semibold text-text">{field.label}</span>
|
||||
|
||||
Reference in New Issue
Block a user