admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38686-vm/docs/plans/2026-04-24-payroll-action-buttons-design.md
Konrad du Plessis bfe4e4d616 docs(ui): design for payroll action-buttons pastel soft-fill 
Four buttons at top of /payroll/ currently mix 3 treatments (outline
+ solid btn-primary one-off). Design swaps all 4 to a unified
.btn-action-soft base class with per-button colour modifiers
(Lookup=blue, Pay=amber, Add=green, Price=mauve). Reuses existing
--badge-*-bg tokens for the Add + Price buttons; adds 2 new token
pairs for Lookup + Pay. Removes the shadow-sm / btn-sm / fw-bold
one-offs — the new class handles sizing + weight.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-24 11:07:37 +02:00

4.9 KiB
Raw Blame History

Payroll Action Buttons — Pastel Soft-Fill (24 Apr 2026)

Origin

Konrad on the 4 action buttons at the top of /payroll/:

"Can you use your top notch design skills and make this look better and more uniform with also some pastel colors"

Current state: Worker Lookup (btn-outline-info), Batch Pay (btn-primary — the odd one out, solid dark blue), Add Adjustment (btn-outline-success), Price Overtime (btn-outline-warning). Three treatments, four colour families, visually inconsistent.

Scope chosen: A — pastel soft-fill. All 4 become solid pastel fill, no border, with darker text in the same colour family. Each retains a colour hint for its role; all look like siblings.

Design

Base class

.btn-action-soft — shared shape for all 4 buttons:

  • display: inline-flex; align-items: center; gap: 0.4rem
  • padding: 0.4rem 0.9rem
  • font-size: 0.875rem; font-weight: 500
  • border: none; border-radius: 0.5rem
  • transition: filter 150ms, transform 80ms
  • Hover: filter: brightness(1.08)
  • Active: transform: translateY(1px)
  • Focus-visible: outline: 2px solid var(--accent); outline-offset: 2px

Removes both btn-outline-* and btn-primary from the template — the new class is self-sufficient, doesn't layer on top of Bootstrap's .btn family.

Per-button colour — reuses existing --badge-* tokens where possible

Button Modifier class Tokens used (reused)
Worker Lookup .btn-action-lookup new --btn-action-lookup-bg/fg (soft blue, similar to advance family)
Batch Pay .btn-action-pay new --btn-action-pay-bg/fg (soft amber — brand-adjacent, marks it as primary)
Add Adjustment .btn-action-add reuses --badge-bonus-bg/fg (green — "adding money" matches Bonus semantic)
Price Overtime .btn-action-price reuses --badge-overtime-bg/fg (mauve — matches the Overtime adjustment badge)

Four new CSS variables per theme (--btn-action-lookup-bg/fg, --btn-action-pay-bg/fg) plus two reuses of existing badge tokens. Net

  • 8 CSS vars (4 × 2 themes), + 5 CSS classes, – 4 Bootstrap class applications in the template.

Dark theme palette

--btn-action-lookup-bg: #3e5c7b; --btn-action-lookup-fg: #d7e5f2;
--btn-action-pay-bg:    #7a4d1a; --btn-action-pay-fg:    #fae0c3;
/* add: reuses --badge-bonus-bg (#5b8260) / --badge-bonus-fg (#e8f3ea) */
/* price: reuses --badge-overtime-bg (#a16881) / --badge-overtime-fg (#fce4ec) */

Light theme palette

--btn-action-lookup-bg: #c7d9e8; --btn-action-lookup-fg: #243b56;
--btn-action-pay-bg:    #f5d6a8; --btn-action-pay-fg:    #633e0e;
/* add: reuses --badge-bonus-bg (#d7e8d9) / --badge-bonus-fg (#385640) */
/* price: reuses --badge-overtime-bg (#f3d1dd) / --badge-overtime-fg (#703347) */

Template change

core/templates/core/payroll_dashboard.html — find the 4-button group with class payroll-actions (near the top). Replace each button's class list:

Before After
btn btn-outline-info shadow-sm btn-sm btn-md-normal btn-action-soft btn-action-lookup
btn btn-primary shadow-sm btn-sm btn-md-normal btn-action-soft btn-action-pay
btn btn-outline-success shadow-sm btn-sm btn-md-normal fw-bold btn-action-soft btn-action-add
btn btn-outline-warning shadow-sm btn-sm btn-md-normal btn-action-soft btn-action-price

Shadow and size modifiers come from .btn-action-soft itself — no need for shadow-sm / btn-sm. The fw-bold on Add Adjustment was a workaround for the faint outline treatment; the new class has sufficient presence without it.

Out of scope

  • Extending this treatment to buttons elsewhere in the app — defer to a future "app-wide button pass" if this looks right
  • Changing the icons or labels
  • Moving or reorganising the button row
  • Button ordering (it stays: Lookup / Batch Pay / Add Adjustment / Price Overtime)

Risks

  • Contrast on the soft-fill pastels might be borderline in light mode. Implementation will spot-check each with WebAIM contrast-check logic (target: WCAG AA for UI elements — 3:1 minimum for icon/text against background).
  • One-off fw-bold on Add Adjustment — the current template has it to compensate for the faint outline. Removing it with the new class is intentional; if the new .btn-action-add reads too lightly, re-apply fw-bold or bump the text weight in .btn-action-soft base.
  • Batch Pay "is this still the primary?" — it now wears soft amber instead of solid dark blue. The amber is slightly more saturated than the other three, which preserves a visual hierarchy. If Konrad wants stronger emphasis, we can deepen --btn-action-pay-bg further or add a subtle 1px --accent ring.

Rollback

Single commit, git revert <sha>. No data, schema, behavioural change.

Next step

Generate a brief implementation plan via writing-plans → execute via subagent-driven-development. Auto mode active, no checkpoints — this is a 1-2 task implementation.