marcel/mealprep
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(settings): align hub page with V2 spec — padding, H1, card radius/padding/sizes

Browse Source 
- Content area: p-[16px_20px] md:p-[40px_56px], max-w-[820px] grid
- H1: display font, 28px, weight 500, tracking -0.02em
- Cards: --radius-xl, p-[28px], shadow-card
- Card title: 16px (was 14px)
- Stat number: 28px font-light tracking-[-0.02em] (was 36px)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel Raddatz
2026-04-10 16:49:56 +02:00
parent 824bb9445f
commit ef39a97f57
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/components/SettingsCard.svelte
View File

@@ -13,10 +13,10 @@
<a <a
{href} {href}
data-accent={accent ? 'true' : undefined} data-accent={accent ? 'true' : undefined}
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2" class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
style={accent ? 'border-left: 3px solid var(--green-dark);' : undefined} style={accent ? 'border-left: 3px solid var(--green-dark);' : undefined}
> >
<span class="font-[var(--font-sans)] text-[14px] font-medium text-[var(--color-text)]"> <span class="font-[var(--font-sans)] text-[16px] font-medium text-[var(--color-text)]">
{title} {title}
</span> </span>

16
frontend/src/routes/(app)/settings/+page.svelte
View File

@@ -12,21 +12,22 @@
let { data }: Props = $props(); let { data }: Props = $props();
</script> </script>
<h1>Einstellungen</h1> <div class="p-[16px_20px] md:p-[40px_56px]">
<h1 class="font-[var(--font-display)] text-[28px] font-medium tracking-[-0.02em] mb-8 text-[var(--color-text)]">Einstellungen</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 max-w-[820px]">
<!-- Card 1: Vorräte (inline, conditional content) --> <!-- Card 1: Vorräte (inline, conditional content) -->
<a <a
href="/household/staples?ctx=settings" href="/household/staples?ctx=settings"
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]" class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2 border-l-[3px] border-l-[var(--green-dark)]"
> >
<span class="font-[var(--font-sans)] text-[14px] font-medium">Vorräte</span> <span class="font-[var(--font-sans)] text-[16px] font-medium">Vorräte</span>
{#if data.stapleCount > 0} {#if data.stapleCount > 0}
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0"> <p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
<span <span
data-testid="staple-count" data-testid="staple-count"
class="font-[var(--font-display)] text-[36px] leading-[1] text-[var(--green-dark)]" class="font-[var(--font-display)] text-[28px] font-light leading-[1] tracking-[-0.02em] text-[var(--green-dark)]"
>{data.stapleCount}</span> >{data.stapleCount}</span>
</p> </p>
{:else} {:else}
@@ -47,9 +48,9 @@
<!-- Card 2: Haushalt (inline, needs data-testid on member count) --> <!-- Card 2: Haushalt (inline, needs data-testid on member count) -->
<a <a
href="/members" href="/members"
class="flex flex-col gap-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] p-4 no-underline text-[var(--color-text)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2" class="flex flex-col gap-3 rounded-[var(--radius-xl)] border border-[var(--color-border)] bg-[var(--color-surface)] p-[28px] no-underline text-[var(--color-text)] shadow-[var(--shadow-card)] hover:shadow-[var(--shadow-raised)] hover:border-[#C0BFB8] transition-[box-shadow,border-color] duration-150 ease focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--green-dark)] focus-visible:outline-offset-2"
> >
<span class="font-[var(--font-sans)] text-[14px] font-medium">Haushalt</span> <span class="font-[var(--font-sans)] text-[16px] font-medium">Haushalt</span>
<p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0"> <p class="font-[var(--font-sans)] text-[13px] text-[var(--color-text-muted)] m-0">
<span data-testid="member-count">{data.memberCount}</span> Mitglieder <span data-testid="member-count">{data.memberCount}</span> Mitglieder
@@ -68,3 +69,4 @@
meta={data.userName} meta={data.userName}
/> />
</div> </div>
</div>