junte/assessment-model
1
0
Fork 0
mirror of https://github.com/Hestia-Homes/assessment-model.git synced 2026-07-22 08:48:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style(scenarios): make the fabric-first toggle distinctive

Browse source 
The plain bordered checkbox blended into the Measures step. Give it the
emerald "Fabric first" identity used by the list/detail indicators — a
layers icon, an "Optimisation order" eyebrow, and a state-reactive tint
so the same green signals fabric-first across create, list and detail.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Khalim Conn-Kowlessar 2026-07-09 14:18:05 +00:00
parent 2f3e4b4c8d
commit 48bfac490f
1 changed files with 39 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/app/portfolio/[slug]/(portfolio)/scenarios/new/NewScenarioJourney.tsx
View file

@ -460,20 +460,50 @@ export function NewScenarioJourney({
</div>
</div>
))}
<label className="mt-2 flex cursor-pointer items-start gap-3 rounded-xl border border-gray-200 bg-white p-4">
<input
type="checkbox"
checked={fabricFirst}
onChange={(e) => setFabricFirst(e.target.checked)}
className="mt-0.5 h-4 w-4 flex-none accent-brandmidblue"
/>
<span className="flex flex-col">
<label
className={`mt-2 flex cursor-pointer items-start gap-3.5 rounded-xl border p-4 transition ${
fabricFirst
? "border-emerald-300 bg-emerald-50/70 shadow-[0_0_0_3px_rgba(16,185,129,.12)]"
: "border-gray-200 bg-white hover:border-emerald-200 hover:bg-emerald-50/30"
}`}
>
<span
aria-hidden
className={`mt-0.5 inline-flex h-9 w-9 flex-none items-center justify-center rounded-lg transition ${
fabricFirst ? "bg-emerald-500 text-white" : "bg-emerald-50 text-emerald-500"
}`}
>
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M12 2 2 7l10 5 10-5-10-5Z" />
<path d="m2 17 10 5 10-5" />
<path d="m2 12 10 5 10-5" />
</svg>
</span>
<span className="flex min-w-0 flex-col">
<span className="font-manrope text-[10px] font-extrabold uppercase tracking-[.12em] text-emerald-600">
Optimisation order
</span>
<span className="text-sm font-semibold text-brandblue">Fabric first</span>
<span className="text-[13px] text-gray-500">
<span className="mt-0.5 text-[13px] text-gray-500">
Insulation, glazing and ventilation are applied first; heating and
renewables are only considered if the target isn&apos;t met.
</span>
</span>
<input
type="checkbox"
checked={fabricFirst}
onChange={(e) => setFabricFirst(e.target.checked)}
className="mt-1 h-4 w-4 flex-none accent-emerald-600"
/>
</label>
{errors.excl && <div className="text-[13px] text-red-800">{errors.excl}</div>}
</div>