bfe4e4d616
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>
123 lines
4.9 KiB
Markdown
123 lines
4.9 KiB
Markdown
# 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 <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.
|