client/plans/button-standardization.md

Button Behavior Standardization Plan

Desired Standard Behavior

Default:    border: primary-color, background: secondary-color, text: primary-color
Hover:      border: accent-color, background: secondary-color, text: primary-color
Click:      border: primary-color, background: accent-color, text: secondary-color

In summary:

• Hover → border turns accent-color (everything else stays)
• Click/Active → fill turns accent-color, border returns to primary-color, text inverts to secondary-color

---

Current client.css Button Variables (lines 122–129)

--button-color: var(--primary-color);
--button-background-color: var(--secondary-color);
--button-hover-color: var(--accent-color);
--button-click-color: var(--muted-color);        /* WRONG — should be accent-color */
--button-border-color: var(--primary-color);
--button-border-radius: var(--border-radius);
--button-border-width: var(--border-width);

Problems in client.css

1. --button-click-color is var(--muted-color) — should be var(--accent-color) for the fill on click
2. No global button rule — there is no button { ... } or .btn { ... } base class in client.css that applies the standard hover/active behavior. Each page defines its own button styles independently.
3. No :active pseudo-class defined globally — the click state is never standardized.
4. Hover behavior varies — some pages change background-color on hover (wrong), some change border-color (correct), some change color (text color — inconsistent).

What client.css SHOULD add

A base button class (e.g., .btn) with:

.btn {
  font-family: var(--font-family);
  color: var(--button-color);
  background-color: var(--button-background-color);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--button-border-radius);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn:hover {
  border-color: var(--accent-color);
}

.btn:active {
  background-color: var(--accent-color);
  color: var(--secondary-color);
  border-color: var(--primary-color);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

---

Per-Page Audit

index.html

Class/ID	Hover	Active/Click	Issue
.divAppButtons	background-color: var(--button-hover-color)	none	Hover fills background instead of changing border
.inpKeyButton	background-color: var(--button-hover-color)	background-color: var(--button-click-color)	Hover fills bg; click uses muted-color
.inpCheckBox	background-color: var(--button-hover-color)	none	Hover fills bg
.svgBtn	cursor only	none	No visual feedback

Fix needed: .divAppButtons hover should change border only. .inpKeyButton active should use accent fill.

ai.html

Class/ID	Hover	Active/Click	Issue
#btnAiNewChat	background: var(--accent-color); color: var(--secondary-color)	none	Hover does fill+text change — should be border only
#btnAiSend	background: var(--accent-color); color: var(--secondary-color)	none	Same — hover does fill
.aiButton	background: var(--accent-color); color: var(--secondary-color)	none	Same
.aiDeleteConvBtn	color: var(--accent-color); border-color: var(--accent-color)	none	Hover changes border+icon color — close to correct but no active state
.aiConversationItem	border-color: var(--accent-color)	none	Correct hover behavior

Fix needed: #btnAiNewChat, #btnAiSend, .aiButton hover should only change border. Add :active with accent fill.

cashu.html

Class/ID	Hover	Active/Click	Issue
.cashuBtn	background: var(--accent-color); color: var(--secondary-color)	none	Hover fills — should be border only
.cashuBtn.active	background: var(--primary-color); color: var(--secondary-color)	—	Toggle state, not click — acceptable for tab buttons
.mintDiscoveryAdd:hover	background: var(--accent-color)	none	Hover fills

Fix needed: .cashuBtn hover should change border only. Add :active with accent fill. The .active toggle class for tabs is a separate concern and can stay.

tools.html

Class/ID	Hover	Active/Click	Issue
.divButton	background-color: var(--accent-color)	background-color: var(--muted-color)	Hover fills bg; active uses muted
.clsClipboard	opacity: 0.8	background-color: var(--muted-color)	Hover dims; active uses muted

Fix needed: .divButton hover should change border. Active should use accent fill. .clsClipboard active should use accent.

event.html

Class/ID	Hover	Active/Click	Issue
.btnKind	background-color: var(--accent-color)	none	Hover fills
.btnKindActive	background-color: var(--primary-color); color: var(--secondary-color)	—	Toggle state — acceptable
.btnAction	background-color: var(--accent-color)	none	Hover fills

Fix needed: .btnKind and .btnAction hover should change border only. Add :active.

blobs.html

Class/ID	Hover	Active/Click	Issue
.btnServer	background-color: var(--button-hover-color)	none	Hover fills bg
.btnAction	background-color: var(--accent-color)	none	Hover fills
.btnDelete	background-color: var(--accent-color)	none	Hover fills
.btnDeleteBlob	border-color: var(--accent-color)	none	Correct hover

Fix needed: .btnServer, .btnAction, .btnDelete hover should change border only.

post.html

Class/ID	Hover	Active/Click	Issue
#btnSeeMore	color: var(--button-hover-color)	none	Changes text color on hover — should change border
#btnMarkRead	color: var(--button-hover-color)	none	Same
.viewed-sidenav-control	color: var(--button-hover-color)	none	Same

Fix needed: All should change border-color on hover, not text color.

msg.html

Class/ID	Hover	Active/Click	Issue
#btnSendMessage	color: var(--button-hover-color)	none	Changes text color
.msgConversationItem	border-color: var(--accent-color)	none	Correct

Fix needed: #btnSendMessage hover should change border.

note.html

Class/ID	Hover	Active/Click	Issue
.divNoteTitle	background-color: var(--button-hover-color)	none	Hover fills bg
.divNewNote	background-color: var(--button-hover-color)	none	Same
#tblNotes tr	background: var(--button-hover-color)	none	Table row — acceptable
#btnSaveNote	inline style background-color: var(--button-hover-color)	none	Inline style — needs refactor

Fix needed: Button hovers should change border. Table row hover is acceptable.

todo.html

Class/ID	Hover	Active/Click	Issue
.divTodo	border-color: var(--accent-color)	none	Correct
.btnReorder	border-color: var(--accent-color) on hover	background-color: var(--muted-color) on active	Hover correct; active uses muted instead of accent

Fix needed: .btnReorder:active should use accent fill.

db.html

Class/ID	Hover	Active/Click	Issue
.btnRefresh	background: var(--accent-color)	none	Hover fills
#tblDB th	background: var(--accent-color)	none	Table header — acceptable

Fix needed: .btnRefresh hover should change border only.

didactyl.html

Class/ID	Hover	Active/Click	Issue
.btn	background-color: var(--accent-color); color: var(--secondary-color)	none	Hover fills

Fix needed: Hover should change border only. Add :active.

profile.html

Class/ID	Hover	Active/Click	Issue
.divButton	cursor: pointer only	none	No visual hover feedback at all

Fix needed: Add border-color change on hover and accent fill on active.

relays.html

Class/ID	Hover	Active/Click	Issue
.divSvg	stroke: var(--button-hover-color)	none	SVG icon — acceptable
.tblRelayRow	cursor: pointer	none	Table row — minimal

Fix needed: Minor — relay rows could use border highlight.

cal.html

Class/ID	Hover	Active/Click	Issue
.divQuickButton	background-color: red	none	Hardcoded red — should use var
.divFood	background-color: var(--button-hover-color)	none	Hover fills
.divServingButton	background-color: red	none	Hardcoded red
.divButton	background-color: var(--button-hover-color)	none	Hover fills
.AddFood, .EditFood	background-color: green	none	Hardcoded green
.DelFood	background-color: red	none	Hardcoded red

Fix needed: Replace hardcoded colors with CSS variables. Change hover to border-only.

links.html

Class/ID	Hover	Active/Click	Issue
#btnAddLink	inline style, no hover	none	No visual feedback
#btnDownloadBookmarks	inline style, no hover	none	No visual feedback

Fix needed: Add proper button classes.

npub.html

Class/ID	Hover	Active/Click	Issue
#divQRContainer	none	background-color: var(--button-hover-color)	Active uses hover color for bg

Fix needed: Active should use accent-color.

test42.html

Class/ID	Hover	Active/Click	Issue
.button	background: #ff6b6b	none	Hardcoded colors — test page, low priority

tab.html

Class/ID	Hover	Active/Click	Issue
button	background: #5568d3	none	Hardcoded colors — test page, low priority

---

Implementation Plan

Step 1: Fix client.css button variables

• Change --button-click-color from var(--muted-color) to var(--accent-color)
• Add --button-click-text-color: var(--secondary-color) variable

Step 2: Add global .btn base class to client.css

• Standard default/hover/active/disabled states
• All pages can opt in by adding class="btn" to their buttons

Step 3: Fix pages in priority order

High priority — main user-facing pages:

1. ai.html — #btnAiNewChat, #btnAiSend, .aiButton
2. cashu.html — .cashuBtn
3. index.html — .divAppButtons
4. post.html — #btnSeeMore, #btnMarkRead
5. msg.html — #btnSendMessage

Medium priority: 6. tools.html — .divButton, .clsClipboard 7. event.html — .btnKind, .btnAction 8. blobs.html — .btnServer, .btnAction, .btnDelete 9. todo.html — .btnReorder active state 10. db.html — .btnRefresh 11. didactyl.html — .btn 12. note.html — .divNoteTitle, .divNewNote, #btnSaveNote

Low priority: 13. cal.html — replace hardcoded colors 14. links.html — add button classes 15. profile.html — add hover/active 16. relays.html — minor row highlights 17. npub.html — fix active color 18. test42.html, tab.html — test pages, optional

Step 4: Verify dark mode

• Ensure all changes work in both light and dark mode since CSS variables auto-adapt.