Polish quiz completion UX, room PNG backgrounds, and habits list order

Polish quiz completion UX, rooms, and app layout.
This commit is contained in:
pricewowen
2026-05-24 07:09:40 -06:00
parent 33ba52def1
commit 5ebcf33bca
25 changed files with 219 additions and 476 deletions

View File

@@ -10,7 +10,7 @@ export function AppPageHeader({
eyebrow,
}: AppPageHeaderProps) {
return (
<header className="mb-6 border-b-2 border-border bg-card/60 px-1 pb-5 shadow-[var(--retro-shadow-sm)]">
<header className="mb-6 border-b-2 border-border pb-5">
{eyebrow ? (
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
{eyebrow}

View File

@@ -9,7 +9,7 @@ type AppShellProps = {
wide?: boolean;
/** Use remaining viewport height between top bar and bottom nav. */
fillViewport?: boolean;
/** Center page content horizontally (pairs well with fillViewport). */
/** Center page body horizontally (header stays left-aligned in the content column). */
centered?: boolean;
};
@@ -27,7 +27,7 @@ export function AppShell({
centered = false,
}: AppShellProps) {
return (
<div className="relative flex min-h-dvh flex-col bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)] pt-topbar">
<div className="relative flex min-h-dvh flex-col bg-background pt-topbar">
<AppTopBar />
<main
className={cn(
@@ -35,9 +35,7 @@ export function AppShell({
fillViewport
? "min-h-[calc(100dvh-var(--app-topbar-height)-var(--app-nav-offset)-env(safe-area-inset-top,0px))]"
: null,
centered ? "items-center" : null,
wide ? contentWidthClass.wide : contentWidthClass.default,
fillViewport && "max-w-none lg:max-w-none",
)}
>
{title ? (
@@ -46,6 +44,7 @@ export function AppShell({
<div
className={cn(
fillViewport ? "pet-viewport-stage flex w-full flex-1 flex-col" : "contents",
centered ? "items-center" : null,
)}
>
{children}