lekss361/gendesign
1
0
Fork 0
Code Issues 57 Pull requests Projects Releases Packages Wiki Activity Actions

fix(tradein-ui): replace Tailwind with OKLCH tokens + a11y on disclaimer

Browse source 
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:
lekss361 2026-05-24 15:47:40 +03:00
parent 765b172cd6
commit 81dd103cb4
2 changed files with 79 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
tradein-mvp/frontend/src/app/page.tsx
View file

@ -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 (

124
tradein-mvp/frontend/src/components/trade-in/HeroSummary.tsx
View file

@ -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,55 +336,64 @@ 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,
</p> border: "1px solid var(--border, #e5e7eb)",
<form onSubmit={handleEnrichSubmit}> background: "var(--surface-2, #f8fafc)",
<div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 12 }}> borderRadius: "var(--radius, 8px)",
{needsHouseType && ( display: "flex",
<select flexDirection: "column",
className="control" gap: 12,
value={enrichHouseType} }}
onChange={(e) => setEnrichHouseType(e.target.value)} >
aria-label="Тип дома" <p style={{ fontSize: 13, fontWeight: 500, margin: 0 }}>
style={{ flex: "1 1 160px", minWidth: 140 }} Уточните для повышения точности оценки:
> </p>
<option value="">Тип дома…</option> <form onSubmit={handleEnrichSubmit}>
<option value="panel">Панельный</option> <div style={{ display: "flex", flexWrap: "wrap", gap: 10, marginBottom: 12 }}>
<option value="brick">Кирпичный</option> {needsHouseType && (
<option value="monolith">Монолит</option> <select
<option value="monolith_brick">Монолит-кирпич</option> className="control"
<option value="other">Другое</option> value={enrichHouseType}
</select> onChange={(e) => setEnrichHouseType(e.target.value)}
)} aria-label="Тип дома"
{needsRepairState && ( style={{ flex: "1 1 160px", minWidth: 140 }}
<select >
className="control" <option value="">Тип дома…</option>
value={enrichRepairState} <option value="panel">Панельный</option>
onChange={(e) => setEnrichRepairState(e.target.value)} <option value="brick">Кирпичный</option>
aria-label="Состояние ремонта" <option value="monolith">Монолит</option>
style={{ flex: "1 1 160px", minWidth: 140 }} <option value="monolith_brick">Монолит-кирпич</option>
> <option value="other">Другое</option>
<option value="">Состояние…</option> </select>
<option value="needs_repair">Требует ремонта</option> )}
<option value="standard">Стандартный</option> {needsRepairState && (
<option value="good">Хороший</option> <select
<option value="excellent">Евроремонт</option> className="control"
</select> value={enrichRepairState}
)} onChange={(e) => setEnrichRepairState(e.target.value)}
</div> aria-label="Состояние ремонта"
<button style={{ flex: "1 1 160px", minWidth: 140 }}
type="submit" >
className="btn btn-primary" <option value="">Состояние…</option>
disabled={isResubmitting || (!enrichHouseType && !enrichRepairState)} <option value="needs_repair">Требует ремонта</option>
style={{ opacity: isResubmitting || (!enrichHouseType && !enrichRepairState) ? 0.55 : 1 }} <option value="standard">Стандартный</option>
> <option value="good">Хороший</option>
{isResubmitting ? "Пересчитываем…" : "Пересчитать"} <option value="excellent">Евроремонт</option>
</button> </select>
</form> )}
</div> </div>
<button
type="submit"
className="btn btn-primary"
disabled={isResubmitting || (!enrichHouseType && !enrichRepairState)}
style={{ opacity: isResubmitting || (!enrichHouseType && !enrichRepairState) ? 0.55 : 1 }}
>
{isResubmitting ? "Пересчитываем…" : "Пересчитать"}
</button>
</form>
</div> </div>
)} )}
</article> </article>