fix(tradein-ui): replace Tailwind with OKLCH tokens + a11y on disclaimer
Review-bot feedback on #517: - tradein-mvp/frontend doesn't use Tailwind — classes (rounded-lg, bg-amber-50, …) rendered as plain unstyled text. Replace with inline styles using project's OKLCH design tokens (--accent-2, --accent-2-soft, --surface-2, --radius, --fg). - Add role=status aria-live=polite on disclaimer for screen readers - Move handleResubmit below resultData declaration (ESLint no-use-before-define)
This commit is contained in:
parent
765b172cd6
commit
81dd103cb4
2 changed files with 79 additions and 57 deletions
|
|
@ -59,12 +59,6 @@ export default function TradeInPage() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleResubmit(patch: { house_type?: HouseType; repair_state?: RepairState }) {
|
|
||||||
if (!resultData) return;
|
|
||||||
const enrichedInput: TradeInEstimateInput = { ...resultData.input, ...patch };
|
|
||||||
handleSubmit(enrichedInput);
|
|
||||||
}
|
|
||||||
|
|
||||||
const apiError = mutation.error?.message ?? null;
|
const apiError = mutation.error?.message ?? null;
|
||||||
const resultData =
|
const resultData =
|
||||||
freshResult ??
|
freshResult ??
|
||||||
|
|
@ -81,6 +75,12 @@ export default function TradeInPage() {
|
||||||
}
|
}
|
||||||
: null);
|
: null);
|
||||||
|
|
||||||
|
function handleResubmit(patch: { house_type?: HouseType; repair_state?: RepairState }) {
|
||||||
|
if (!resultData) return;
|
||||||
|
const enrichedInput: TradeInEstimateInput = { ...resultData.input, ...patch };
|
||||||
|
handleSubmit(enrichedInput);
|
||||||
|
}
|
||||||
|
|
||||||
const isPending = mutation.isPending;
|
const isPending = mutation.isPending;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
|
|
@ -102,8 +102,21 @@ export function HeroSummary({ estimate, input, onResubmit, isResubmitting = fals
|
||||||
return (
|
return (
|
||||||
<article className="card hero-card">
|
<article className="card hero-card">
|
||||||
{showMockDisclaimer && (
|
{showMockDisclaimer && (
|
||||||
<div className="rounded-lg border border-amber-500/40 bg-amber-50 px-4 py-3 text-sm text-amber-900" style={{ margin: "16px 16px 0" }}>
|
<div
|
||||||
Адрес распознан неточно — оценка может быть приближённой.
|
role="status"
|
||||||
|
aria-live="polite"
|
||||||
|
style={{
|
||||||
|
margin: "16px 16px 0",
|
||||||
|
padding: "12px 16px",
|
||||||
|
border: "1px solid var(--accent-2)",
|
||||||
|
background: "var(--accent-2-soft)",
|
||||||
|
color: "var(--fg)",
|
||||||
|
borderRadius: "var(--radius)",
|
||||||
|
fontSize: 13,
|
||||||
|
lineHeight: 1.4,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
⚠️ Адрес распознан неточно — оценка может быть приближённой.
|
||||||
Уточните адрес и пересчитайте для более точного результата.
|
Уточните адрес и пересчитайте для более точного результата.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
@ -323,9 +336,19 @@ export function HeroSummary({ estimate, input, onResubmit, isResubmitting = fals
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showEnrichment && (
|
{showEnrichment && (
|
||||||
<div style={{ margin: "0 16px 16px" }}>
|
<div
|
||||||
<div className="rounded-lg border border-slate-200 bg-slate-50 p-4 space-y-3">
|
style={{
|
||||||
<p className="text-sm font-medium" style={{ fontSize: 13, fontWeight: 600, marginBottom: 10 }}>
|
margin: "16px 16px 0",
|
||||||
|
padding: 16,
|
||||||
|
border: "1px solid var(--border, #e5e7eb)",
|
||||||
|
background: "var(--surface-2, #f8fafc)",
|
||||||
|
borderRadius: "var(--radius, 8px)",
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
gap: 12,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p style={{ fontSize: 13, fontWeight: 500, margin: 0 }}>
|
||||||
Уточните для повышения точности оценки:
|
Уточните для повышения точности оценки:
|
||||||
</p>
|
</p>
|
||||||
<form onSubmit={handleEnrichSubmit}>
|
<form onSubmit={handleEnrichSubmit}>
|
||||||
|
|
@ -372,7 +395,6 @@ export function HeroSummary({ estimate, input, onResubmit, isResubmitting = fals
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue