fix: style the settings sign-in prompt as a visible banner
commit
f47e96dfix: style the settings sign-in prompt as a visible banner
settings_auth_banner rendered as plain muted shell-note text, easy to miss beside the rest of the settings page copy. It now renders in a bordered, backgrounded banner, with a distinct accent treatment when the visitor can actually edit.
Assisted-by: Claude:claude-sonnet-5
Reviews
No reviews of this commit yet — record a verdict below.
Start a review
crates/git-ents-server/src/web/pages.rs
@@ -1348,17 +1348,17 @@
fn settings_auth_banner(auth: Option<&super::Auth>, editing: bool) -> Markup {
html! {
@match auth {
- None => p.shell-note {
+ None => p.auth-banner {
a href="/login" { "Sign in" } " with a member web key to edit these settings."
}
- Some(auth) if auth.username.is_some() && editing => p.shell-note.can-edit {
+ Some(auth) if auth.username.is_some() && editing => p.auth-banner.auth-banner-active {
"Signed in as " strong { (auth.label) } " — you can edit this repository."
}
- Some(auth) if auth.username.is_some() => p.shell-note {
+ Some(auth) if auth.username.is_some() => p.auth-banner {
"Signed in as " strong { (auth.label) } ", but this server has browser editing "
"disabled, so settings are read-only."
}
- Some(auth) => p.shell-note {
+ Some(auth) => p.auth-banner {
"Signed in as " strong { (auth.label) } ", but this key is not a member of this "
"repository, so settings are read-only."
}
crates/git-ents-server/src/web/style.css
@@ -380,7 +380,8 @@
.account-strip form { margin: 0; }
.btn-quiet { margin-top: 0; padding: .3rem .75rem; font-size: .82rem; font-weight: 600; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; }
.btn-quiet:hover { border-color: var(--color-accent); color: var(--color-accent); }
-.shell-note.can-edit { color: var(--color-accent); }
+.auth-banner { font-size: .9rem; max-width: 44rem; margin-bottom: 1.5rem; padding: .7rem 1.1rem; border-radius: var(--radius-sm); background: var(--color-code-bg); border: 1px solid var(--color-border); }
+.auth-banner-active { color: var(--color-accent); background: var(--color-accent-subtle); border-color: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.edit-form { display: flex; flex-direction: column; gap: .4rem; max-width: 40rem; }
.edit-form label { font-family: var(--font-sans); font-size: .82rem; font-weight: 600; color: var(--color-text-muted); }
.edit-form input, .edit-form textarea, .inline-edit input { font-family: var(--font-mono); font-size: .85rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: .42rem .7rem; }