Make every clickable control look clickable, in two shared styles (closes #375)
check / check (push) Successful in 3m23s

Buttons keep btn-primary, btn-secondary and btn-danger and gain a
pointer cursor; the navigation links become btn-secondary buttons.
Every control that was plain coloured text (Copy, both Add, the row
actions, Resubmit, Replay, the back, footer and download links) now
uses btn-small, bordered at rest with hover and focus states. Both
styles are in static/css/style.css, which the layout now loads.

The event log's clickable rows become buttons, so they work by
keyboard; Replay moves beside its delivery's row. Rows on the webhook
page and in the event log wrap at phone width. The browser test now
checks that Copy reads "Copied".

Model: opus-5-5
This commit is contained in:
2026-10-02 14:39:53 +00:00
parent debe588bba
commit d1e32515ee
13 changed files with 160 additions and 76 deletions
+9 -9
View File
@@ -7,7 +7,7 @@
<!-- Mobile menu button -->
{{if .User}}
<button @click="toggle" class="md:hidden p-2 rounded-md text-gray-500 hover:bg-gray-100">
<button type="button" @click="toggle" class="btn-secondary md:hidden p-2">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path x-show="closed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
<path x-show="open" x-cloak stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
@@ -18,9 +18,9 @@
<!-- Desktop navigation -->
<div class="hidden md:flex items-center gap-4">
{{if .User}}
<a href="/hooks" class="btn-text">Webhooks</a>
<a href="/settings" class="btn-text">Settings</a>
<a href="/user/{{.User.Username}}" class="btn-text">
<a href="/hooks" class="btn-secondary">Webhooks</a>
<a href="/settings" class="btn-secondary">Settings</a>
<a href="/user/{{.User.Username}}" class="btn-secondary">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
@@ -32,7 +32,7 @@
{{if .CSRFToken}}
<form method="POST" action="/pages/logout" class="inline">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
<button type="submit" class="btn-text">Logout</button>
<button type="submit" class="btn-secondary">Logout</button>
</form>
{{end}}
{{end}}
@@ -43,13 +43,13 @@
<div x-show="open" x-cloak x-transition class="md:hidden mt-4 pt-4 border-t border-gray-200">
<div class="flex flex-col gap-2">
{{if .User}}
<a href="/hooks" class="btn-text w-full text-left">Webhooks</a>
<a href="/settings" class="btn-text w-full text-left">Settings</a>
<a href="/user/{{.User.Username}}" class="btn-text w-full text-left">Profile</a>
<a href="/hooks" class="btn-secondary w-full">Webhooks</a>
<a href="/settings" class="btn-secondary w-full">Settings</a>
<a href="/user/{{.User.Username}}" class="btn-secondary w-full">Profile</a>
{{if .CSRFToken}}
<form method="POST" action="/pages/logout">
<input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
<button type="submit" class="btn-text w-full text-left">Logout</button>
<button type="submit" class="btn-secondary w-full">Logout</button>
</form>
{{end}}
{{end}}