Fix interface fidelity: invalid Tailwind classes + restore lost HomeScreen
Side-by-side comparison surfaced that several restyle classes silently generated NO CSS (confirmed against the compiled .next CSS) — invisible to tests because unit tests assert class strings, not computed styles, and visual baselines were captured from the broken build. Root causes fixed: - rounded-radius-button (51) / rounded-radius-squircle (3) generated nothing → every pill/button/chip was border-radius:0. Tailwind v4 maps --radius-button to 'rounded-button', not 'rounded-radius-button'. Replaced with rounded-full / rounded-[17px]. - duration-normal/fast/slow (58) generated nothing → transitions had easing but 0 duration (snapped). Replaced with the token-arbitrary form duration-(--duration-normal). (Also fixed an over-replace that double-wrapped var(--duration-normal) inside animate-[…] values.) - HomeScreen.tsx was the OLD emoji version — the R3 rewrite was never committed. Restored: brand Chrome/Slack squircle tiles, coral GradientGlyph icons, 56px tiles with press-scale, and the frosted glass dock (bg-white/[0.07] backdrop-blur-[40px] saturate-150). Targeted gaps from the feedback: - raised surface --color-surface-warm-muted #1f1f1f → #1a1a1a (composer, chips, tabs) - welcome chips: max-w-[422px] gap-3 → centered 2×2 grid - composer input + rail nav labels → 14px - DeviceSizeToggle: Full/Tablet/Phone text → lucide monitor/tablet/ smartphone icons (aria-label keeps the radio names) - SW cache bumped v1→v2 so redeployed clients purge the stale bundle - LeftRail drawer: ref-during-render → prev-state pattern (lint) Compiled CSS now emits .rounded-full, transition-duration:var(--duration- normal), border-radius:17px, and shadow-dock-capsule. Button/Avatar unit tests updated to the real class names. 83 unit tests green. Co-Authored-By: Claude Fable 5 <[email protected]>
This commit is contained in:
co-authored by
Claude Fable 5
parent
889c65685e
commit
0383d8fd77
@@ -82,7 +82,7 @@ export default async function CreditsPage() {
|
||||
</div>
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className="rounded-radius-button border border-border px-4 py-2 text-sm text-foreground transition-colors duration-normal ease-app hover:bg-hover-bg"
|
||||
className="rounded-full border border-border px-4 py-2 text-sm text-foreground transition-colors duration-(--duration-normal) ease-app hover:bg-hover-bg"
|
||||
>
|
||||
Talk to sales
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user