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

style(account): normalize button styles, labels, and widths

Browse source 
- Replace icon-only delete/revoke buttons with outlined text buttons
- Rename: Add Passkey → New Passkey, Create Token → New Token,
  Download Backup → New Backup, Restore from Backup → Restore,
  Reset Database → Reset
- Add w-full sm:w-auto sm:min-w-44 to all action buttons for
  consistent sizing on mobile and desktop
- Align Cancel buttons to font-medium text-text (Outlined style)
This commit is contained in:
Jon Seager 2026-02-08 09:35:04 +00:00
parent 743362c1d2
commit 4da9c65f56
No known key found for this signature in database
1 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
templates/pages/account.html
View file

@ -33,11 +33,11 @@
{% if passkeys.len() > 1 %} {% if passkeys.len() > 1 %}
<button <button
type="button" type="button"
class="shrink-0 inline-flex h-8 w-8 items-center justify-center rounded-md p-1 text-text-muted transition hover:text-red-600" class="shrink-0 inline-flex items-center justify-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="deletePasskey({{ passkey.id }}, '{{ passkey.name }}')" onclick="deletePasskey({{ passkey.id }}, '{{ passkey.name }}')"
aria-label="Delete passkey"
> >
{{ icons::delete("h-4 w-4") }} {{ icons::delete("h-4 w-4") }}
Delete
</button> </button>
{% endif %} {% endif %}
</div> </div>
@ -74,7 +74,7 @@
<button <button
type="button" type="button"
data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''" data-on:click="$_showPasskeyForm = false; document.getElementById('add-passkey-error').classList.add('hidden'); document.getElementById('passkey-name').value = ''"
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" class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt"
> >
{{ icons::x_mark("h-4 w-4") }} Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
@ -90,10 +90,10 @@
type="button" type="button"
data-show="!$_showPasskeyForm" data-show="!$_showPasskeyForm"
data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)" data-on:click="$_showPasskeyForm = true; setTimeout(() => document.getElementById('passkey-name').focus(), 50)"
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" 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 sm:w-auto sm:min-w-44"
> >
{{ icons::key("h-4 w-4") }} {{ icons::key("h-4 w-4") }}
Add Passkey New Passkey
</button> </button>
</div> </div>
</div> </div>
@ -132,11 +132,11 @@
</div> </div>
<button <button
type="button" type="button"
class="shrink-0 inline-flex h-8 w-8 items-center justify-center rounded-md p-1 text-text-muted transition hover:text-red-600" class="shrink-0 inline-flex items-center justify-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="revokeToken({{ token.id }}, '{{ token.name }}')" onclick="revokeToken({{ token.id }}, '{{ token.name }}')"
aria-label="Revoke token"
> >
{{ icons::delete("h-4 w-4") }} {{ icons::delete("h-4 w-4") }}
Revoke
</button> </button>
</div> </div>
{% endfor %} {% endfor %}
@ -176,7 +176,7 @@
<button <button
type="button" type="button"
data-on:click="$_showTokenForm = false; $_tokenError = ''" data-on:click="$_showTokenForm = false; $_tokenError = ''"
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" class="shrink-0 inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text transition hover:bg-surface-alt"
> >
{{ icons::x_mark("h-4 w-4") }} Cancel {{ icons::x_mark("h-4 w-4") }} Cancel
</button> </button>
@ -214,10 +214,10 @@
type="button" type="button"
data-show="!$_showTokenForm && !$_tokenCreated" data-show="!$_showTokenForm && !$_tokenCreated"
data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)" data-on:click="$_showTokenForm = true; setTimeout(() => document.getElementById('token-name').focus(), 50)"
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" 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 sm:w-auto sm:min-w-44"
> >
{{ icons::terminal("h-4 w-4") }} {{ icons::terminal("h-4 w-4") }}
Create Token New Token
</button> </button>
</div> </div>
</div> </div>
@ -235,26 +235,26 @@
<a <a
href="/api/v1/backup" href="/api/v1/backup"
download download
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" 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 sm:w-auto sm:min-w-44"
> >
{{ icons::arrow_down_tray("h-4 w-4") }} {{ icons::arrow_down_tray("h-4 w-4") }}
Download Backup New Backup
</a> </a>
<button <button
type="button" type="button"
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" class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt sm:w-auto sm:min-w-44"
onclick="document.getElementById('restore-file-input').click()" onclick="document.getElementById('restore-file-input').click()"
> >
{{ icons::arrow_up_tray("h-4 w-4") }} {{ icons::arrow_up_tray("h-4 w-4") }}
Restore from Backup Restore
</button> </button>
<button <button
type="button" type="button"
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" class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt sm:w-auto sm:min-w-44"
onclick="resetDatabase()" onclick="resetDatabase()"
> >
{{ icons::delete("h-4 w-4") }} {{ icons::delete("h-4 w-4") }}
Reset Database Reset
</button> </button>
</div> </div>
@ -299,7 +299,7 @@
</div> </div>
<div> <div>
<form method="post" action="/logout"> <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-medium text-accent transition hover:text-text hover:bg-surface-alt"> <button type="submit" class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:text-text hover:bg-surface-alt sm:w-auto sm:min-w-44">
{{ icons::logout("h-4 w-4") }} {{ icons::logout("h-4 w-4") }}
Sign Out Sign Out
</button> </button>