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

Enhance theme selection UI with mood descriptors and improved styling

Browse Source
This commit is contained in:
Aaron Po
2026-10-04 20:02:55 -04:00
parent cc52ad3d5c
commit bd01f47df5
3 changed files with 51 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
web/frontend/app/features/theme/components/ThemeSegmentedControl.tsx
View File

@@ -19,7 +19,7 @@ interface ThemeSegmentedControlProps {
const ThemeSegmentedControl = ({
labels = 'full',
className = 'join join-vertical sm:join-horizontal',
className = 'grid grid-cols-2 gap-2',
onChange,
}: ThemeSegmentedControlProps) => {
const rootTheme = useRouteLoaderData<typeof rootLoader>('root')?.theme ?? defaultThemeName;
@@ -33,7 +33,11 @@ const ThemeSegmentedControl = ({
return (
<label
key={theme.value}
className={`btn join-item ${checked ? 'btn-primary' : 'btn-outline'}`}
className={`group flex min-h-20 cursor-pointer items-center gap-3 rounded-box border p-3 text-left transition-all duration-200 ${
checked
? 'border-primary bg-primary text-primary-content shadow-md'
: 'border-base-content/15 bg-base-200/45 hover:-translate-y-0.5 hover:border-primary/50 hover:bg-base-200'
}`}
>
<input
type="radio"
@@ -47,7 +51,34 @@ const ThemeSegmentedControl = ({
onChange?.(theme.value);
}}
/>
{labels === 'short' ? theme.shortLabel : theme.label}
<span
aria-hidden="true"
className={`size-9 shrink-0 rounded-full border-4 shadow-inner transition-transform duration-200 group-hover:scale-105 ${
checked ? 'border-primary-content/70' : 'border-base-100'
}`}
style={{
background:
theme.value === 'biergarten-lager'
? 'linear-gradient(135deg, #f5c451 0%, #a96728 100%)'
: theme.value === 'biergarten-stout'
? 'linear-gradient(135deg, #d69b45 0%, #382116 100%)'
: theme.value === 'biergarten-cassis'
? 'linear-gradient(135deg, #c777b9 0%, #4c214e 100%)'
: 'linear-gradient(135deg, #f7e6a5 0%, #82a85d 100%)',
}}
/>
<span className="min-w-0">
<span className="block truncate text-sm font-bold">
{labels === 'short' ? theme.shortLabel : theme.label}
</span>
<span
className={`mt-0.5 block truncate text-xs ${
checked ? 'text-primary-content/75' : 'text-base-content/60'
}`}
>
{theme.shortVibe}
</span>
</span>
</label>
);
})}