moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): restyle cards, buttons, and icons for consistency

Browse source 
- Redesign brew cards: replace pill badges with text notes, add
  full-width Brew Again button with cup icon, adjust card height
- Redesign bag cards: move Brew/Close buttons below progress bar,
  add Close button label, reduce card height
- Restyle account page buttons (Sign Out, Restore, Reset, Cancel)
  to use consistent bordered-accent pattern
- Replace thin logout icon with Font Awesome person-running SVG
- Update homepage stats labels and quick action buttons to text-sm
- Add empty state placeholders for brews, bags, and activity sections
- Enlarge logo click target, swap theme toggle icons, add font-medium
  to mobile tab selector
- Remove small-caps from scan input "or" labels
This commit is contained in:
Jon Seager 2026-02-07 21:42:38 +00:00
parent 66dd9d6c1d
commit 81308fdef2
No known key found for this signature in database
13 changed files with 97 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/css/input.css
View file

@ -344,6 +344,7 @@ input.input-field[type="number"] {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
font-weight: 500;
text-align: left;
cursor: pointer;
border: none;

10
templates/pages/account.html
View file

@ -74,7 +74,7 @@
<button
type="button"
data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
class="shrink-0 rounded-md px-3 py-2 text-sm font-medium text-text-muted transition hover:text-text"
class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
>
Cancel
</button>
@ -175,7 +175,7 @@
<button
type="button"
data-on:click="$_showTokenForm = false; $_tokenError = ''"
class="shrink-0 rounded-md px-3 py-2 text-sm font-medium text-text-muted transition hover:text-text"
class="shrink-0 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
>
Cancel
</button>
@ -239,14 +239,14 @@
</a>
<button
type="button"
class="rounded-md border bg-surface-alt px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt hover:text-text"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
onclick="document.getElementById('restore-file-input').click()"
>
Restore from Backup
</button>
<button
type="button"
class="rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:bg-red-50 hover:border-red-300 dark:text-red-400 dark:hover:bg-red-950/30 dark:hover:border-red-800"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
onclick="resetDatabase()"
>
Reset Database
@ -294,7 +294,7 @@
</div>
<div>
<form method="post" action="/logout">
<button type="submit" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text">
<button type="submit" class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt">
{{ icons::logout("h-4 w-4") }}
Sign Out
</button>

4
templates/pages/add.html
View file

@ -86,7 +86,7 @@
>
{{ icons::camera("h-5 w-5") }}
</brew-photo-capture>
<span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
<span class="text-xs text-text-muted" >or</span>
<input type="text" name="prompt" form="roaster-extract-form" class="input-field w-full" placeholder="Describe a roaster&hellip;" />
</div>
<div data-show="$_roasterExtracting" style="display:none" class="flex items-center gap-3 text-sm text-accent">
@ -153,7 +153,7 @@
>
{{ icons::camera("h-5 w-5") }}
</brew-photo-capture>
<span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
<span class="text-xs text-text-muted" >or</span>
<input type="text" name="prompt" form="roast-extract-form" class="input-field w-full" placeholder="Describe a coffee bag&hellip;" />
</div>
<div data-show="$_roastExtracting" style="display:none" class="flex items-center gap-3 text-sm text-accent">

72
templates/pages/home.html
View file

@ -60,7 +60,7 @@ is_authenticated %}
aria-label="Scan Bag"
>
{{ icons::camera("h-5 w-5") }}
<span class="text-xs font-bold" style="font-variant: small-caps">Scan</span>
<span class="text-sm font-medium">Scan</span>
</brew-photo-capture>
<a href="/check-in"
class="inline-flex flex-col items-center justify-center gap-1.5 rounded-md border px-4 py-3 text-accent transition hover:bg-surface-alt"
@ -68,7 +68,7 @@ is_authenticated %}
aria-label="Check in at a cafe"
>
{{ icons::location("h-5 w-5") }}
<span class="text-xs font-bold" style="font-variant: small-caps">Check In</span>
<span class="text-sm font-medium">Check In</span>
</a>
<a href="/add"
class="inline-flex flex-col items-center justify-center gap-1.5 rounded-md border px-4 py-3 text-accent transition hover:bg-surface-alt"
@ -76,7 +76,7 @@ is_authenticated %}
aria-label="Add manually"
>
{{ icons::plus("h-5 w-5") }}
<span class="text-xs font-bold" style="font-variant: small-caps">Add</span>
<span class="text-sm font-medium">Add</span>
</a>
</div>
<div data-show="$_extracting" style="display:none" class="flex items-center justify-center gap-3 text-sm text-accent">
@ -100,7 +100,6 @@ is_authenticated %}
{% endif %}
<!-- Recent Brews -->
{% if !recent_brews.is_empty() %}
<section data-signals:_brewing="false">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold text-text">Recent Brews</h2>
@ -108,14 +107,18 @@ is_authenticated %}
>View all brews &rarr;</a
>
</div>
{% if !recent_brews.is_empty() %}
<div class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide">
{% for brew in recent_brews %} {{ brew_card::card(brew, is_authenticated) }} {% endfor %}
</div>
{% else %}
<div class="flex h-[280px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
No brews yet.
</div>
{% endif %}
</section>
{% endif %}
<!-- Open Bags -->
{% if !open_bags.is_empty() %}
<section id="open-bags-section">
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold text-text">Open Bags</h2>
@ -123,17 +126,21 @@ is_authenticated %}
>View all bags &rarr;</a
>
</div>
{% if !open_bags.is_empty() %}
<div
id="open-bags-grid"
class="flex gap-4 overflow-x-auto scroll-smooth snap-x snap-mandatory scrollbar-hide"
>
{% for bag in open_bags %} {{ bag_card::card(bag, is_authenticated) }} {% endfor %}
</div>
{% else %}
<div class="flex h-[222px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
No open bags.
</div>
{% endif %}
</section>
{% endif %}
<!-- Recent Activity -->
{% if !recent_events.is_empty() %}
<section>
<div class="flex items-center justify-between mb-3">
<h2 class="text-lg font-semibold text-text">Recent Activity</h2>
@ -141,6 +148,7 @@ is_authenticated %}
>View full timeline &rarr;</a
>
</div>
{% if !recent_events.is_empty() %}
<div class="space-y-2">
{% for event in recent_events %}
<div class="rounded-lg border bg-surface px-4 py-3 flex items-center justify-between gap-3">
@ -161,8 +169,12 @@ is_authenticated %}
</div>
{% endfor %}
</div>
{% else %}
<div class="flex h-[180px] items-center justify-center rounded-lg border border-dashed text-sm text-text-muted">
No activity yet.
</div>
{% endif %}
</section>
{% endif %}
<!-- Stats -->
<section>
@ -172,59 +184,59 @@ is_authenticated %}
<div class="grid grid-cols-3 gap-3 sm:grid-cols-4 md:grid-cols-7">
<a
href="/data?type=brews"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::beaker("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.brews }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Brews</span>
<span class="text-lg font-bold text-text">{{ stats.brews }}</span>
<span class="text-sm font-medium text-accent">Brews</span>
</a>
<a
href="/data?type=roasts"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::fire("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.roasts }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Roasts</span>
<span class="text-lg font-bold text-text">{{ stats.roasts }}</span>
<span class="text-sm font-medium text-accent">Roasts</span>
</a>
<a
href="/data?type=roasters"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::building("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.roasters }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Roasters</span>
<span class="text-lg font-bold text-text">{{ stats.roasters }}</span>
<span class="text-sm font-medium text-accent">Roasters</span>
</a>
<a
href="/data?type=bags"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::bag("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.bags }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Bags</span>
<span class="text-lg font-bold text-text">{{ stats.bags }}</span>
<span class="text-sm font-medium text-accent">Bags</span>
</a>
<a
href="/data?type=cups"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::cup("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.cups }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Cups</span>
<span class="text-lg font-bold text-text">{{ stats.cups }}</span>
<span class="text-sm font-medium text-accent">Cups</span>
</a>
<a
href="/data?type=cafes"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::location("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.cafes }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Cafes</span>
<span class="text-lg font-bold text-text">{{ stats.cafes }}</span>
<span class="text-sm font-medium text-accent">Cafes</span>
</a>
<a
href="/data?type=gear"
class="group flex flex-col items-center gap-1 rounded-lg border bg-surface p-4 transition hover:bg-surface-alt"
class="group flex flex-col items-center gap-1 rounded-lg border p-4 transition hover:bg-surface-alt"
>
{{ icons::wrench("h-6 w-6 text-accent") }}
<span class="text-lg font-bold text-text group-hover:text-accent">{{ stats.gear }}</span>
<span class="text-xs text-text-muted" style="font-variant: small-caps">Gear</span>
<span class="text-lg font-bold text-text">{{ stats.gear }}</span>
<span class="text-sm font-medium text-accent">Gear</span>
</a>
</div>
</section>

3
templates/pages/login.html
View file

@ -21,8 +21,7 @@
<button
id="login-button"
type="button"
class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
>
class="w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" >
Sign in with Passkey
</button>

6
templates/pages/register.html
View file

@ -44,8 +44,7 @@
<button
id="register-button"
type="button"
class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
>
class="mt-2 w-full rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed" >
Register Passkey
</button>
@ -61,8 +60,7 @@
</div>
<a
href="/"
class="mt-4 block w-full rounded-md bg-accent px-4 py-3 text-center text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
>
class="mt-4 block w-full rounded-md bg-accent px-4 py-3 text-center text-sm font-semibold text-accent-text transition hover:bg-accent-hover" >
Go to Brewlog
</a>
</div>

43
templates/partials/bag_card.html
View file

@ -1,36 +1,35 @@
{% import "partials/icons.html" as icons %}
{% macro card(bag, is_authenticated) %}
<div id="bag-card-{{ bag.id }}" class="relative w-[45vw] md:w-[200px] h-[222px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
{% if is_authenticated %}
<button
type="button"
class="absolute top-4 right-3 inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition hover:text-red-600 hover:bg-surface-alt"
title="Close Bag"
onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
>
{{ icons::x_mark("h-4.5 w-4.5") }}
</button>
{% endif %}
<div class="flex-1 pr-5">
<div id="bag-card-{{ bag.id }}" class="relative w-[45vw] md:w-[200px] h-[200px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
<div class="flex-1">
<span class="block font-semibold text-text truncate">{{ bag.roast_name }}</span>
<p class="mt-1 text-sm text-text-muted truncate">{{ bag.roaster_name }}</p>
</div>
{% if is_authenticated %}
<div class="mb-4 flex items-center">
<a href="/add?type=brew&bag_id={{ bag.id }}"
class="inline-flex h-8 items-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
{{ icons::cup("h-4 w-4") }}
Brew
</a>
</div>
{% endif %}
<div class="flex flex-col items-center">
<div class="w-full">
<div class="h-2 rounded-full bg-surface-alt overflow-hidden">
<div class="h-full rounded-full bg-accent" style="width: {{ bag.used_percent }}%"></div>
</div>
<p class="mt-1 text-text-muted" style="font-variant: small-caps; font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
<p class="mt-1 text-text-muted" style="font-size: 0.7rem">{{ bag.remaining }} / {{ bag.amount }}g</p>
</div>
</div>
{% if is_authenticated %}
<div class="mt-3 flex items-center gap-2">
<a href="/add?type=brew&bag_id={{ bag.id }}"
class="flex-1 inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
{{ icons::cup("h-4 w-4") }}
Brew
</a>
<button
type="button"
class="flex-1 inline-flex h-8 items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
title="Close Bag"
onclick="closeBag('{{ bag.id }}', document.getElementById('bag-card-{{ bag.id }}'))"
>
{{ icons::x_mark("h-4 w-4") }}
Close
</button>
</div>
{% endif %}
</div>
{% endmacro %}

32
templates/partials/brew_card.html
View file

@ -1,33 +1,25 @@
{% import "partials/icons.html" as icons %}
{% macro card(brew, is_authenticated) %}
<div class="relative w-[45vw] md:w-[200px] h-[280px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
{% if is_authenticated %}
<a
href="{{ brew.brew_again_url() }}"
class="absolute top-4 right-3 inline-flex h-6 w-6 items-center justify-center rounded-md text-text-muted transition hover:text-accent hover:bg-surface-alt"
title="Brew Again"
>
{{ icons::refresh("h-4.5 w-4.5") }}
</a>
{% endif %}
<div class="h-[4.5rem] overflow-hidden pr-5">
<div class="relative w-[45vw] md:w-[200px] h-[279px] shrink-0 snap-start rounded-lg border bg-surface p-4 flex flex-col">
<div class="h-[4.5rem] overflow-hidden">
<span class="block font-semibold text-text truncate">{{ brew.roast_name }}</span>
<p class="mt-0.5 text-sm text-text-muted truncate">{{ brew.roaster_name }}</p>
</div>
<div class="mt-2 flex-1 space-y-1 text-text-secondary" style="font-size: 0.8125rem">
<div class="mt-1 flex-1 space-y-1 text-text-secondary" style="font-size: 0.8125rem">
<p>{{ brew.coffee_weight }} &middot; {{ brew.water_volume }}{% if let Some(bt) = brew.brew_time %} &middot; {{ bt }}{% endif %}</p>
<p>{{ brew.grinder_model }} &middot; {{ brew.grind_setting }}</p>
<p>{{ brew.brewer_name }}</p>
{% if let Some(fp) = brew.filter_paper_name %}<p>{{ fp }}</p>{% endif %}
{% if !brew.quick_notes.is_empty() %}<p class="truncate">{{ brew.quick_notes_label }}</p>{% endif %}
</div>
<div class="flex flex-wrap gap-1">
{% if !brew.quick_notes.is_empty() %}
{% for qn in brew.quick_notes %}
<span class="{{ qn.pill_class }}" style="font-size: 0.65rem">{{ qn.label }}</span>
{% endfor %}
{% else %}
<span class="pill pill-muted" style="font-size: 0.65rem">No Notes</span>
{% endif %}
{% if is_authenticated %}
<div class="mt-3">
<a href="{{ brew.brew_again_url() }}"
class="inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md border px-2 text-sm font-medium text-accent transition hover:text-accent-hover hover:bg-surface-alt">
{{ icons::cup("h-4 w-4") }}
Brew Again
</a>
</div>
{% endif %}
</div>
{% endmacro %}

8
templates/partials/forms/scan_result_form.html
View file

@ -129,16 +129,16 @@
<!-- Roaster matched, roast not: create roast only -->
<button
type="submit"
data-show="$_matchedRoasterId && !$_matchedRoastId" style="display:none"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
data-show="$_matchedRoasterId && !$_matchedRoastId"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
>
Save Roast
</button>
<!-- Both matched + open bag: create bag only -->
<button
type="submit"
data-show="$_matchedRoastId && $_openBag" style="display:none"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
data-show="$_matchedRoastId && $_openBag"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover" style="display:none"
>
Open Bag
</button>

5
templates/partials/icons.html
View file

@ -73,9 +73,8 @@
{% endmacro %}
{% macro logout(class) %}
<svg class="{{ class }}" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
<svg class="{{ class }}" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true">
<path d="M320 48a48 48 0 1 0-96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5 1.9 0 3.8.1 5.6.3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288h21.3c17.7 0 32-14.3 32-32s-14.3-32-32-32h-21.3c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z"/>
</svg>
{% endmacro %}

6
templates/partials/nav.html
View file

@ -1,7 +1,7 @@
{% import "partials/icons.html" as icons %}
<nav class="border-b pb-4 text-sm">
<div class="flex items-center justify-between">
<div class="font-semibold uppercase tracking-[0.25em] text-accent"><a href="/">B{rew}log</a></div>
<div class="font-semibold uppercase tracking-[0.25em] text-accent"><a href="/" class="-m-2 inline-block p-2">B{rew}log</a></div>
<div class="flex items-center gap-1">
{% if is_authenticated %}
<a class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" href="/add" title="Add" aria-label="Add">
@ -9,8 +9,8 @@
</a>
{% endif %}
<button type="button" class="rounded-md p-1.5 text-text-muted transition hover:text-text-secondary" title="Toggle theme" aria-label="Toggle theme" onclick="toggleTheme()">
<span class="theme-icon-light">{{ icons::sun("h-5 w-5") }}</span>
<span class="theme-icon-dark hidden">{{ icons::moon("h-5 w-5") }}</span>
<span class="theme-icon-light">{{ icons::moon("h-5 w-5") }}</span>
<span class="theme-icon-dark hidden">{{ icons::sun("h-5 w-5") }}</span>
</button>
{% if is_authenticated %}
<a class="rounded-md p-1.5 transition {% if nav_active == "account" %}text-accent{% else %}text-text-muted hover:text-text-secondary{% endif %}" href="/account" title="Account" aria-label="Account">

2
templates/partials/scan_input.html
View file

@ -9,7 +9,7 @@
>
{{ icons::camera("h-5 w-5") }}
</brew-photo-capture>
<span class="text-xs text-text-muted" style="font-variant: small-caps">or</span>
<span class="text-xs text-text-muted">or</span>
<input
type="text"
name="prompt"

2
templates/partials/tab_bar.html
View file

@ -17,7 +17,7 @@
<div class="md:hidden">
<button
type="button"
class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm font-medium text-accent"
data-on:click="$_tabsOpen = !$_tabsOpen"
>
<span>