admin/38686-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(ui): pastel soft-fill payroll action buttons

Browse Source 
The 4 action buttons at the top of /payroll/ were previously a mix
of btn-outline-info / btn-primary / btn-outline-success /
btn-outline-warning — three different treatments, with a lone solid
btn-primary (Batch Pay) pulling the eye disproportionately. Konrad
asked for a more uniform + pastel look.

New .btn-action-soft base class with per-button colour modifiers:
  - Worker Lookup → soft blue (new --btn-action-lookup tokens)
  - Batch Pay    → soft amber (new --btn-action-pay tokens;
                   slightly deeper saturation to preserve its
                   "primary" role without breaking the uniform look)
  - Add Adjustment → reuses --badge-bonus-* (green, "adding money"
                     semantic matches Bonus)
  - Price Overtime → reuses --badge-overtime-* (mauve, same colour
                     as the Overtime badge on the Adjustments tab —
                     so the button matches the data it acts on)

All 4 now share:
  - No border, solid pastel fill, contrasting text
  - Same height, padding, border-radius (0.5rem)
  - Subtle box-shadow lift on hover (filter: brightness)
  - 1px press-down on active
  - Accessible focus-visible outline in --accent
  - Icons inherit text colour

Net CSS change: 4 new tokens (2 per theme × 2 themes) + 5 new
classes. Removes shadow-sm, btn-sm, btn-md-normal, fw-bold
one-offs — all handled by the base class.

docs/design-tokens.md updated to record the new token pairs.

Tests: 69/69.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-24 11:10:14 +02:00
parent bfe4e4d616
commit 6c6ade9a45
3 changed files with 85 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
core/templates/core/payroll_dashboard.html
View File

@ -29,17 +29,20 @@
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
<h1 class="page-title mb-0"><i class="fas fa-wallet me-2" style="color: var(--accent);"></i>Payroll Dashboard</h1>
<div class="d-flex flex-wrap gap-2 payroll-actions">
<button type="button" class="btn btn-outline-info shadow-sm btn-sm btn-md-normal" id="workerLookupBtn">
<i class="fas fa-id-card fa-sm me-1"></i> Worker Lookup
{# Pastel soft-fill action buttons — unified treatment via .btn-action-soft #}
{# + per-button colour modifier. Shadow, sizing, padding all live on the #}
{# base class so the template stays lean. See docs/design-tokens.md. #}
<button type="button" class="btn-action-soft btn-action-lookup" id="workerLookupBtn">
<i class="fas fa-id-card"></i> Worker Lookup
</button>
<button type="button" class="btn btn-primary shadow-sm btn-sm btn-md-normal" id="batchPayBtn" title="Pay all workers with a configured pay schedule for their current pay period">
<i class="fas fa-users fa-sm me-1"></i> Batch Pay
<button type="button" class="btn-action-soft btn-action-pay" id="batchPayBtn" title="Pay all workers with a configured pay schedule for their current pay period">
<i class="fas fa-users"></i> Batch Pay
</button>
<button type="button" class="btn btn-outline-success shadow-sm btn-sm btn-md-normal fw-bold" data-bs-toggle="modal" data-bs-target="#addAdjustmentModal">
<i class="fas fa-plus fa-sm me-1"></i> Add Adjustment
<button type="button" class="btn-action-soft btn-action-add" data-bs-toggle="modal" data-bs-target="#addAdjustmentModal">
<i class="fas fa-plus"></i> Add Adjustment
</button>
<button type="button" class="btn btn-outline-warning shadow-sm btn-sm btn-md-normal" data-bs-toggle="modal" data-bs-target="#priceOvertimeModal">
<i class="fas fa-clock fa-sm me-1"></i> Price Overtime
<button type="button" class="btn-action-soft btn-action-price" data-bs-toggle="modal" data-bs-target="#priceOvertimeModal">
<i class="fas fa-clock"></i> Price Overtime
</button>
</div>
</div>

19
docs/design-tokens.md
View File

@ -33,6 +33,25 @@ Token definitions live in `static/css/custom.css`:
- Dark theme: `:root { ... }` block around lines 85-91
- Light theme: `[data-theme="light"] { ... }` block around lines 149-155
## Button-action tokens (payroll dashboard)
Pastel soft-fill palette for the 4 action buttons at the top of
`/payroll/` (Worker Lookup / Batch Pay / Add Adjustment / Price
Overtime). Defined alongside the badge tokens in the same `:root` /
`[data-theme="light"]` blocks.
| Token pair | Button | Dark BG | Dark FG | Light BG | Light FG |
|---|---|---|---|---|---|
| `--btn-action-lookup-bg/fg` | Worker Lookup | `#3e5c7b` | `#d7e5f2` | `#c7d9e8` | `#243b56` |
| `--btn-action-pay-bg/fg` | Batch Pay | `#7a4d1a` | `#fae0c3` | `#f5d6a8` | `#633e0e` |
| _reuses `--badge-bonus-*`_ | Add Adjustment | (see Bonus row above) | | | |
| _reuses `--badge-overtime-*`_ | Price Overtime | (see Overtime row above) | | | |
The CSS classes are `.btn-action-soft` (shared shape) + one of
`.btn-action-lookup` / `.btn-action-pay` / `.btn-action-add` /
`.btn-action-price` (colour modifier). See the `.btn-action-soft`
block in `custom.css` for hover/active/focus behaviour.
## Where each colour appears
| Semantic | Used by |

55
static/css/custom.css
View File

@ -89,6 +89,15 @@
--badge-loan-rep-bg: #b48a1a; --badge-loan-rep-fg: #fef4d1;
--badge-advance-bg: #3e5c7b; --badge-advance-fg: #d7e5f2;
--badge-advance-rep-bg: #2f679a; --badge-advance-rep-fg: #d7e5f2;
/* === PAYROLL DASHBOARD action-button tokens (dark theme) ===
Soft-fill pastels for the 4 action buttons at the top of /payroll/
(Worker Lookup / Batch Pay / Add Adjustment / Price Overtime).
Lookup + Pay introduce new tokens; Add + Price reuse the bonus
+ overtime adjustment-badge tokens so the payroll page's action
row visually echoes the badges below it. */
--btn-action-lookup-bg: #3e5c7b; --btn-action-lookup-fg: #d7e5f2;
--btn-action-pay-bg: #7a4d1a; --btn-action-pay-fg: #fae0c3;
}
/* === LIGHT MODE === */
@ -153,6 +162,10 @@
--badge-loan-rep-bg: #f7d873; --badge-loan-rep-fg: #5a4418;
--badge-advance-bg: #bccee0; --badge-advance-fg: #243b56;
--badge-advance-rep-bg: #9ec1dd; --badge-advance-rep-fg: #1d3550;
/* === PAYROLL DASHBOARD action-button tokens (light theme) === */
--btn-action-lookup-bg: #c7d9e8; --btn-action-lookup-fg: #243b56;
--btn-action-pay-bg: #f5d6a8; --btn-action-pay-fg: #633e0e;
}
/* ===================================================================
@ -1954,6 +1967,48 @@ body, .card, .modal-content, .form-control, .form-select,
color: var(--badge-advance-fg);
}
/* ===================================================================
Payroll dashboard action buttons — pastel soft-fill (24 Apr 2026)
---------------------------------------------------------------
Replaces the earlier mix of `btn-outline-info` / `btn-primary` /
`btn-outline-success` / `btn-outline-warning` at the top of /payroll/
with a single uniform treatment: solid pastel fill, no border,
contrasting text in the same colour family. All four buttons now
look like siblings while each retains a colour hint of its role.
================================================================= */
.btn-action-soft {
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;
line-height: 1.25;
cursor: pointer;
/* `filter: brightness(...)` on hover is GPU-cheap and gives a
subtle lift without having to define 4×2 = 8 hover colours. */
transition: filter 150ms ease, transform 80ms ease, box-shadow 150ms ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-action-soft:hover { filter: brightness(1.08); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); }
.btn-action-soft:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.btn-action-soft:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-action-soft:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
/* Icon sits inline with text; inherit colour so it always matches. */
.btn-action-soft .fas { font-size: 0.85em; }
/* --- Per-button colour modifiers.
Lookup + Pay use dedicated --btn-action-*-bg/fg tokens (new).
Add reuses --badge-bonus-* (green, "adding money" semantic).
Price reuses --badge-overtime-* (mauve, matches Overtime badge
on the Adjustments tab). --- */
.btn-action-lookup { background: var(--btn-action-lookup-bg); color: var(--btn-action-lookup-fg); }
.btn-action-pay { background: var(--btn-action-pay-bg); color: var(--btn-action-pay-fg); }
.btn-action-add { background: var(--badge-bonus-bg); color: var(--badge-bonus-fg); }
.btn-action-price { background: var(--badge-overtime-bg); color: var(--badge-overtime-fg); }
/* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */
.adjustments-filter-bar {
position: sticky;