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

style(ui): add icons to buttons and normalize button styles

Browse source 
- Add icons to all submit/action buttons (plus, beaker, key, check, etc.)
- Add pencil icons to "Change" buttons in multi-step flows
- Add icons to account page actions (passkeys, tokens, backup, reset)
- Add key icons to login/register passkey buttons
- Normalize primary button weight to font-semibold on account page
- Standardize secondary button hover to hover:bg-surface-alt
This commit is contained in:
Jon Seager 2026-02-07 22:37:07 +00:00
parent ce4f32c63f
commit 487ff75f48
No known key found for this signature in database
6 changed files with 66 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
templates/pages/account.html
View file

@ -67,16 +67,16 @@
id="add-passkey-btn"
type="button"
onclick="registerPasskey()"
class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
>
Register
{{ icons::key("h-4 w-4") }} Register
</button>
<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 border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
<div id="add-passkey-loading" class="mt-3 hidden flex items-center gap-3 text-sm text-accent">
@ -90,8 +90,9 @@
type="button"
data-show="!$_showPasskeyForm"
data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)"
class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover"
class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
>
{{ icons::key("h-4 w-4") }}
Add Passkey
</button>
</div>
@ -167,17 +168,17 @@
</label>
<button
type="submit"
class="shrink-0 rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50 disabled:cursor-not-allowed"
data-attr:disabled="$_creatingToken"
>
Create
{{ icons::plus("h-4 w-4") }} Create
</button>
<button
type="button"
data-on:click="$_showTokenForm = false; $_tokenError = ''"
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"
class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-muted transition hover:text-text hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
</div>
</form>
@ -201,9 +202,9 @@
<button
type="button"
onclick="copyToken(this)"
class="shrink-0 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500"
class="shrink-0 inline-flex items-center gap-2 rounded-md bg-green-600 px-3 py-1.5 text-sm font-medium text-green-50 transition hover:bg-green-500"
>
Copy
{{ icons::clipboard("h-4 w-4") }} Copy
</button>
</div>
</div>
@ -213,8 +214,9 @@
type="button"
data-show="!$_showTokenForm && !$_tokenCreated"
data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)"
class="rounded-md bg-accent px-4 py-2 text-sm font-medium text-accent-text transition hover:bg-accent-hover"
class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
>
{{ icons::terminal("h-4 w-4") }}
Create Token
</button>
</div>
@ -233,22 +235,25 @@
<a
href="/api/v1/backup"
download
class="rounded-md bg-accent px-4 py-2 text-center text-sm font-medium text-accent-text transition hover:bg-accent-hover"
class="inline-flex items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
>
{{ icons::arrow_down_tray("h-4 w-4") }}
Download Backup
</a>
<button
type="button"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
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"
onclick="document.getElementById('restore-file-input').click()"
>
{{ icons::arrow_up_tray("h-4 w-4") }}
Restore from Backup
</button>
<button
type="button"
class="rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-red-600 transition hover:text-red-700 hover:bg-surface-alt"
onclick="resetDatabase()"
>
{{ icons::delete("h-4 w-4") }}
Reset Database
</button>
</div>

40
templates/pages/add.html
View file

@ -118,8 +118,8 @@
</label>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Roaster
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Roaster
</button>
</div>
</form>
@ -204,8 +204,8 @@
</label>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Roast
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Roast
</button>
</div>
</form>
@ -249,8 +249,8 @@
</label>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Bag
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Bag
</button>
</div>
</form>
@ -312,8 +312,8 @@
<span class="text-text-muted shrink-0">&middot;</span>
<span class="shrink-0" data-text="$_brewGrind"></span>
</div>
<button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text"
data-on:click="$_editGrinder = true">Change</button>
<button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_editGrinder = true">{{ icons::pencil("h-3 w-3") }} Change</button>
</div>
<!-- Full grinder fields (expanded) -->
<div data-show="$_editGrinder" style="display:none">
@ -349,8 +349,8 @@
<span data-show="$_filterDisplay" class="text-text-muted shrink-0" style="display:none">&middot;</span>
<span data-show="$_filterDisplay" class="truncate" data-text="$_filterDisplay" style="display:none"></span>
</div>
<button type="button" class="shrink-0 ml-3 text-xs text-text-muted hover:text-text"
data-on:click="$_editBrewer = true">Change</button>
<button type="button" class="shrink-0 ml-3 inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_editBrewer = true">{{ icons::pencil("h-3 w-3") }} Change</button>
</div>
<!-- Full brewer fields (expanded) -->
<div data-show="$_editBrewer" style="display:none">
@ -437,8 +437,8 @@
data-attr:value="[$_qnGood && 'good', $_qnTooFast && 'too-fast', $_qnTooSlow && 'too-slow', $_qnTooHot && 'too-hot', $_qnUnderExtracted && 'under-extracted', $_qnOverExtracted && 'over-extracted'].filter(Boolean).join(',')" />
</div>
<div class="sticky-submit flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Log Brew
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::beaker("h-4 w-4") }} Log Brew
</button>
</div>
</form>
@ -472,8 +472,8 @@
</label>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Gear
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Gear
</button>
</div>
</form>
@ -500,9 +500,9 @@
<span class="text-xs text-text-muted" data-show="$_cafeCity" data-text="$_cafeCity" style="display:none"></span>
</div>
<button type="button"
class="text-xs text-text-muted hover:text-text"
class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = ''; $_cafeLng = ''; $_cafeWebsite = ''"
>Back</button>
>{{ icons::x_mark("h-3 w-3") }} Back</button>
</div>
<form id="cafe-form" method="post" action="/api/v1/cafes" class="mt-4 flex flex-col gap-4">
@ -533,8 +533,8 @@
</label>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Cafe
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Cafe
</button>
</div>
</form>
@ -580,8 +580,8 @@
</div>
</div>
<div class="flex items-center justify-end">
<button type="submit" class="w-full rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
Save Cup
<button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover">
{{ icons::plus("h-4 w-4") }} Save Cup
</button>
</div>
</form>

14
templates/pages/checkin.html
View file

@ -110,9 +110,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<button
type="button"
data-on:click="$_cafeId = ''; $_cafeName = ''; $_step = 1"
class="text-xs text-text-muted hover:text-text"
class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
>
Change
{{ icons::pencil("h-3 w-3") }} Change
</button>
</div>
@ -136,9 +136,9 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<button
type="button"
data-on:click="$_roastId = ''; $_roastName = ''; $_roasterName = ''; $_scanSuccess = ''; $_step = 2"
class="text-xs text-text-muted hover:text-text"
class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
>
Change
{{ icons::pencil("h-3 w-3") }} Change
</button>
</div>
@ -185,7 +185,7 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<div class="mt-4 flex items-center justify-end gap-2">
<button
type="button"
class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:border-accent hover:text-text"
class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
data-on:click="$_reviewingCafe = false; $_cafeName = ''; $_cafeCity = ''; $_cafeCountry = ''; $_cafeLat = 0; $_cafeLng = 0; $_cafeWebsite = ''"
>
Back
@ -316,10 +316,10 @@ block title %}Brewlog · Check In{% endblock %} {% block head %}
<input type="hidden" name="roast_id" data-attr:value="$_roastId" />
<button
type="submit"
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"
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-3 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
data-attr:disabled="$_submitting"
>
Check In
{{ icons::check("h-4 w-4") }} Check In
</button>
</form>
</div>

6
templates/pages/login.html
View file

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "base.html" %} {% import "partials/icons.html" as icons %}
{% block title %}Brewlog · Login{% endblock %}
{% block head %}
<script src="/webauthn.js"></script>
@ -21,8 +21,8 @@
<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" >
Sign in with Passkey
class="inline-flex w-full items-center justify-center gap-2 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" >
{{ icons::key("h-4 w-4") }} Sign in with Passkey
</button>
<div id="login-loading" class="mt-4 hidden text-center text-sm text-text-muted">

6
templates/pages/register.html
View file

@ -1,4 +1,4 @@
{% extends "base.html" %}
{% extends "base.html" %} {% import "partials/icons.html" as icons %}
{% block title %}Brewlog · Register{% endblock %}
{% block head %}
<script src="/webauthn.js"></script>
@ -44,8 +44,8 @@
<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" >
Register Passkey
class="mt-2 inline-flex w-full items-center justify-center gap-2 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" >
{{ icons::key("h-4 w-4") }} Register Passkey
</button>
<div id="register-loading" class="mt-2 hidden text-center text-sm text-text-muted">

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

@ -20,8 +20,8 @@
<span class="font-medium text-text" data-text="$_roasterName"></span>
<span class="text-xs text-text-muted" data-show="$_roasterCountry" data-text="$_roasterCountry" style="display:none"></span>
</div>
<button type="button" class="text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">Change</button>
<button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoasterId = ''; $_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
</div>
</div>
<!-- Roaster: form (not matched) -->
@ -53,12 +53,12 @@
<h3 class="text-base font-semibold text-text">Roast</h3>
<div class="mt-2 rounded-lg border bg-surface px-4 py-3 flex items-center justify-between cursor-pointer" data-on:click="$_matchedRoastId = ''">
<div class="flex items-center gap-2">
{{ icons::bag("h-4 w-4 text-accent shrink-0") }}
{{ icons::coffee_bean("h-4 w-4 text-accent shrink-0") }}
<span class="font-medium text-text" data-text="$_roastName"></span>
<span class="text-xs text-text-muted" data-show="$_origin" data-text="$_origin" style="display:none"></span>
</div>
<button type="button" class="text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoastId = ''">Change</button>
<button type="button" class="inline-flex items-center gap-1 text-xs text-text-muted hover:text-text"
data-on:click="$_matchedRoastId = ''">{{ icons::pencil("h-3 w-3") }} Change</button>
</div>
</div>
<!-- Roast: form (not matched) -->
@ -114,33 +114,33 @@
<button
type="button"
data-on:click="$_scanExtracted = false; $_matchedRoasterId = ''; $_matchedRoastId = ''"
class="rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-semibold text-text transition hover:bg-surface-alt"
>
Cancel
{{ icons::x_mark("h-4 w-4") }} Cancel
</button>
<!-- Neither matched: full create -->
<button
type="submit"
data-show="!$_matchedRoasterId"
class="rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
class="inline-flex items-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover"
>
Save Roaster &amp; Roast
{{ icons::plus("h-4 w-4") }} Save Roaster &amp; Roast
</button>
<!-- Roaster matched, roast not: create roast only -->
<button
type="submit"
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"
class="inline-flex items-center gap-2 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
{{ icons::plus("h-4 w-4") }} Save Roast
</button>
<!-- Both matched + open bag: create bag only -->
<button
type="submit"
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"
class="inline-flex items-center gap-2 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
{{ icons::bag("h-4 w-4") }} Open Bag
</button>
<!-- Both matched + no bag: nothing to do -->
<p data-show="$_matchedRoastId && !$_openBag" style="display:none"