AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Raise frontend contrast, unify the page frame, and add browser identity (#328)

Browse Source
This commit is contained in:
Aaron Po
2026-10-08 00:16:50 -04:00
parent 0e51630439
commit ff775e3b8a
46 changed files with 492 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/frontend/app/features/home/components/ClosingCta.tsx
View File

@@ -3,7 +3,7 @@ import { Link } from 'react-router';
const ClosingCta = () => (
<section className="mx-auto flex max-w-3xl flex-col items-center gap-5 px-5 py-20 text-center">
<h2 className="m-0 font-serif text-[clamp(2rem,4vw,2.75rem)] leading-tight text-balance">
🍺 Your next favourite brewery is on the list.
Your next favourite brewery is on the list.
</h2>
<p className="m-0 text-lg leading-[1.55] text-[var(--color-muted)]">

10
web/frontend/app/features/home/components/ThemeTryOut.stories.tsx
View File

@@ -5,7 +5,7 @@ import { expect, within } from 'storybook/test';
import { biergartenThemes, defaultThemeName } from '../../theme/themes';
import ThemeTryOut from './ThemeTryOut';
const themeTryOutDescription = `Landing page theme band. Hosts the shared \`ThemeSegmentedControl\` with short labels, so a visitor can switch the whole document theme from the marketing page. The control seeds its selection from the root route's loader data, so this story runs behind a memory data router whose \`root\` route supplies a theme.`;
const themeTryOutDescription = `Landing page theme band. Frames the shared \`ThemeSegmentedControl\` in an elevated card with a "Set the mood" eyebrow and a pour count, and renders it with short labels so the four options fit the marketing page's narrower column. Each option carries its \`shortVibe\` mood line, and picking one switches the whole document theme. The control seeds its selection from the root route's loader data, so this story runs behind a memory data router whose \`root\` route supplies a theme. \`Themes/ThemeSegmentedControl\` covers the control itself.`;
const ThemeTryOutHarness = () => {
const [router] = useState(() =>
@@ -48,9 +48,15 @@ export const Default: Story = {
canvas.getByRole('heading', { name: 'Pick a pour that suits you' }),
).toBeInTheDocument();
await expect(canvas.getByText('Set the mood')).toBeVisible();
await expect(canvas.getByText(`${biergartenThemes.length} pours`)).toBeVisible();
const group = canvas.getByRole('radiogroup', { name: 'Theme selector' });
await expect(within(group).getAllByRole('radio')).toHaveLength(biergartenThemes.length);
for (const theme of biergartenThemes) {
await expect(within(group).getByText(theme.shortLabel)).toBeInTheDocument();
await expect(within(group).getByText(theme.shortLabel)).toBeVisible();
await expect(within(group).getByText(theme.shortVibe)).toBeVisible();
}
},
};

16
web/frontend/app/features/home/components/ThemeTryOut.tsx
View File

@@ -13,11 +13,17 @@ const ThemeTryOut = () => (
</p>
</div>
<div className="rounded-box bg-base-100 p-3 text-base-content">
<ThemeSegmentedControl
labels="short"
className="join join-vertical w-full sm:join-horizontal"
/>
<div className="rounded-box border border-neutral-content/15 bg-base-100 p-4 text-base-content shadow-xl sm:p-5">
<div className="mb-4 flex items-center justify-between gap-4">
<div>
<p className="m-0 text-xs font-bold uppercase tracking-[0.18em] opacity-60">
Set the mood
</p>
<p className="m-0 mt-1 text-sm opacity-75">Your theme follows your pour.</p>
</div>
<span className="badge badge-outline shrink-0">4 pours</span>
</div>
<ThemeSegmentedControl labels="short" />
</div>
</div>
</section>