panel: clearer nav labels and card headings, danger-style Sign out

Rename technical labels (postqueue -p, mail.log tail, Send log/Queue/Log
in nav) to plain descriptions, and style Sign out as a deliberate danger
action consistent with other destructive buttons.
This commit is contained in:
2026-08-03 21:19:46 +03:00
parent 66fab00807
commit a55dbaeec0
6 changed files with 14 additions and 13 deletions
+6 -5
View File
@@ -124,7 +124,8 @@ details form { margin-top: 0.6rem; }
.code-row .code { flex: 1; min-width: 0; } .code-row .code { flex: 1; min-width: 0; }
/* Compact outlined button: same affordance as the filled one but quiet enough /* Compact outlined button: same affordance as the filled one but quiet enough
that several can sit together without shouting — the Copy buttons beside a that several can sit together without shouting — the Copy buttons beside a
value, the per-application actions in a table row, Sign out in the nav. */ value, the per-application actions in a table row. Sign out overrides this
with .danger below since signing out is a deliberate, singular action. */
button.copy, td.actions button, td.actions summary, td.actions a.danger, .nav button { button.copy, td.actions button, td.actions summary, td.actions a.danger, .nav button {
margin: 0; padding: 0.45rem 0.7rem; font-size: 0.8rem; font-weight: 600; margin: 0; padding: 0.45rem 0.7rem; font-size: 0.8rem; font-weight: 600;
border-radius: 6px; white-space: nowrap; border-radius: 6px; white-space: nowrap;
@@ -134,10 +135,10 @@ button.copy:hover, td.actions button:hover, td.actions summary:hover,
td.actions a.danger:hover, .nav button:hover { background: #e2e7ee; } td.actions a.danger:hover, .nav button:hover { background: #e2e7ee; }
button.copy { flex: none; margin-top: 0.3rem; } button.copy { flex: none; margin-top: 0.3rem; }
td.actions details[open] > summary { background: #dde3ec; } td.actions details[open] > summary { background: #dde3ec; }
td.actions button.danger, td.actions a.danger { td.actions button.danger, td.actions a.danger, .nav button.danger {
color: #b42318; background: #fef3f2; border-color: #fecdca; color: #b42318; background: #fef3f2; border-color: #fecdca;
} }
td.actions button.danger:hover, td.actions a.danger:hover { background: #fee4e2; } td.actions button.danger:hover, td.actions a.danger:hover, .nav button.danger:hover { background: #fee4e2; }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
button.copy, td.actions button, td.actions summary, td.actions a.danger, .nav button { button.copy, td.actions button, td.actions summary, td.actions a.danger, .nav button {
background: #22262b !important; border-color: #2b3138 !important; background: #22262b !important; border-color: #2b3138 !important;
@@ -145,8 +146,8 @@ td.actions button.danger:hover, td.actions a.danger:hover { background: #fee4e2;
button.copy:hover, td.actions button:hover, td.actions summary:hover, button.copy:hover, td.actions button:hover, td.actions summary:hover,
td.actions a.danger:hover, .nav button:hover { background: #2b3138 !important; } td.actions a.danger:hover, .nav button:hover { background: #2b3138 !important; }
td.actions details[open] > summary { background: #313841 !important; } td.actions details[open] > summary { background: #313841 !important; }
td.actions button.danger, td.actions a.danger { td.actions button.danger, td.actions a.danger, .nav button.danger {
color: #f5a29b !important; background: #2d1211 !important; border-color: #6b201a !important; color: #f5a29b !important; background: #2d1211 !important; border-color: #6b201a !important;
} }
td.actions button.danger:hover, td.actions a.danger:hover { background: #3d1a18 !important; } td.actions button.danger:hover, td.actions a.danger:hover, .nav button.danger:hover { background: #3d1a18 !important; }
} }
+4 -4
View File
@@ -38,16 +38,16 @@
<div class="links"> <div class="links">
{{if eq .Active "status"}}<span aria-current="page">Status</span>{{else}}<a href="/status">Status</a>{{end}} {{if eq .Active "status"}}<span aria-current="page">Status</span>{{else}}<a href="/status">Status</a>{{end}}
{{if eq .Active "domains"}}<span aria-current="page">Domains</span>{{else}}<a href="/domains">Domains</a>{{end}} {{if eq .Active "domains"}}<span aria-current="page">Domains</span>{{else}}<a href="/domains">Domains</a>{{end}}
{{if eq .Active "sendlog"}}<span aria-current="page">Send log</span>{{else}}<a href="/sendlog">Send log</a>{{end}} {{if eq .Active "sendlog"}}<span aria-current="page">Deliveries</span>{{else}}<a href="/sendlog">Deliveries</a>{{end}}
{{if eq .Active "queue"}}<span aria-current="page">Queue</span>{{else}}<a href="/queue">Queue</a>{{end}} {{if eq .Active "queue"}}<span aria-current="page">Mail queue</span>{{else}}<a href="/queue">Mail queue</a>{{end}}
{{if eq .Active "logtail"}}<span aria-current="page">Log</span>{{else}}<a href="/logtail">Log</a>{{end}} {{if eq .Active "logtail"}}<span aria-current="page">System log</span>{{else}}<a href="/logtail">System log</a>{{end}}
{{if eq .Active "backup"}}<span aria-current="page">Backup</span>{{else}}<a href="/backup">Backup</a>{{end}} {{if eq .Active "backup"}}<span aria-current="page">Backup</span>{{else}}<a href="/backup">Backup</a>{{end}}
</div> </div>
<div class="session"> <div class="session">
<span class="muted">{{.User}}</span> <span class="muted">{{.User}}</span>
{{if eq .Active "account"}}<span aria-current="page">Account</span>{{else}}<a href="/account">Account</a>{{end}} {{if eq .Active "account"}}<span aria-current="page">Account</span>{{else}}<a href="/account">Account</a>{{end}}
<form class="inline" method="post" action="/logout"> <form class="inline" method="post" action="/logout">
<button type="submit">Sign out</button> <button type="submit" class="danger">Sign out</button>
</form> </form>
</div> </div>
</nav> </nav>
+1 -1
View File
@@ -2,7 +2,7 @@
<h1>Mail log</h1> <h1>Mail log</h1>
<div class="card"> <div class="card">
<h2>mail.log tail</h2> <h2>Recent log entries</h2>
{{template "logtail_body" .}} {{template "logtail_body" .}}
</div> </div>
{{end}} {{end}}
+1 -1
View File
@@ -2,7 +2,7 @@
<h1>Mail queue</h1> <h1>Mail queue</h1>
<div class="card"> <div class="card">
<h2>postqueue -p</h2> <h2>Pending messages</h2>
{{template "queue_body" .}} {{template "queue_body" .}}
</div> </div>
{{end}} {{end}}
+1 -1
View File
@@ -1,5 +1,5 @@
{{define "content"}} {{define "content"}}
<h1>Send log</h1> <h1>Deliveries</h1>
<div class="card"> <div class="card">
<h2>Filter</h2> <h2>Filter</h2>
+1 -1
View File
@@ -105,7 +105,7 @@ func TestNavMarksActivePage(t *testing.T) {
t.Fatalf("execute nav: %v", err) t.Fatalf("execute nav: %v", err)
} }
out := buf.String() out := buf.String()
if !strings.Contains(out, `<span aria-current="page">Queue</span>`) { if !strings.Contains(out, `<span aria-current="page">Mail queue</span>`) {
t.Errorf("active page is not marked:\n%s", out) t.Errorf("active page is not marked:\n%s", out)
} }
if strings.Contains(out, `href="/queue"`) { if strings.Contains(out, `href="/queue"`) {