UI polish: custom URL placeholder, styled buttons/selects, admin link spacing #125

Merged
fen merged 1 commits from fix-ui-polish into dev 2026-09-10 02:49:36 +00:00
Collaborator

Fixes #123

Changes

  1. Custom URL placeholder: new.html example now reads my-snippet (was /my-snippet). It was a plain placeholder attribute, so only the text changed.

  2. Styled buttons and selection controls (CSS-only, end of app.css):

    • Selects: appearance: none, house border/background/radius matching the custom URL box, inline SVG chevron, hover + accent focus-visible states.
    • Checkboxes/radios: appearance: none, custom drawn boxes (4px radius) and circles, accent fill with white check / inner dot when checked, hover and focus-visible states.
    • Buttons: bare button[type="submit"] (admin/unlock pages) now get the .btn treatment; .btn gains an accent border and shared focus-visible ring.
    • All controls use the house palette vars (--surface, --border, --fg, --accent) and radius tokens; behavior unchanged.
  3. Admin link spacing: .admin-link-row now has margin-top: 32px, padding-top: 20px, and a top divider line, so the Admin link reads as its own footer section on the settings page.

Verification

  • go vet and go test ./... pass.
  • Rendered screenshots with headless chromium: /new shows slash-free placeholder, custom selects/checkboxes/radios (no default HTML controls), styled buttons; /settings shows the Admin link clearly separated below a divider.
  • Screenshots: /tmp/shots123/new.png, /tmp/shots123/settings.png (attached to this PR).
Fixes #123 ## Changes 1. **Custom URL placeholder**: `new.html` example now reads `my-snippet` (was `/my-snippet`). It was a plain placeholder attribute, so only the text changed. 2. **Styled buttons and selection controls** (CSS-only, end of `app.css`): - **Selects**: `appearance: none`, house border/background/radius matching the custom URL box, inline SVG chevron, hover + accent focus-visible states. - **Checkboxes/radios**: `appearance: none`, custom drawn boxes (4px radius) and circles, accent fill with white check / inner dot when checked, hover and focus-visible states. - **Buttons**: bare `button[type="submit"]` (admin/unlock pages) now get the `.btn` treatment; `.btn` gains an accent border and shared focus-visible ring. - All controls use the house palette vars (--surface, --border, --fg, --accent) and radius tokens; behavior unchanged. 3. **Admin link spacing**: `.admin-link-row` now has `margin-top: 32px`, `padding-top: 20px`, and a top divider line, so the Admin link reads as its own footer section on the settings page. ## Verification - `go vet` and `go test ./...` pass. - Rendered screenshots with headless chromium: `/new` shows slash-free placeholder, custom selects/checkboxes/radios (no default HTML controls), styled buttons; `/settings` shows the Admin link clearly separated below a divider. - Screenshots: /tmp/shots123/new.png, /tmp/shots123/settings.png (attached to this PR).
fen added 1 commit 2026-09-10 02:45:22 +00:00
UI polish: placeholder slash, styled controls, admin link spacing (#123)
CI / docker (pull_request) Skipped
CI / test (pull_request) Successful in 24s
1e317d11da
fen merged commit 7ed50087a6 into dev 2026-09-10 02:49:36 +00:00
Sign in to join this conversation.