From bfe4e4d61682d384db32392599a0ff1cc0203abd Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Fri, 24 Apr 2026 11:07:37 +0200 Subject: [PATCH] docs(ui): design for payroll action-buttons pastel soft-fill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- ...026-04-24-payroll-action-buttons-design.md | 122 ++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 docs/plans/2026-04-24-payroll-action-buttons-design.md diff --git a/docs/plans/2026-04-24-payroll-action-buttons-design.md b/docs/plans/2026-04-24-payroll-action-buttons-design.md new file mode 100644 index 0000000..8eb02db --- /dev/null +++ b/docs/plans/2026-04-24-payroll-action-buttons-design.md @@ -0,0 +1,122 @@ +# 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 + +```css +--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 + +```css +--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 `. 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.