From aafa6df189f4f0b188932e47db90825dc29a0c92 Mon Sep 17 00:00:00 2001 From: Konrad du Plessis Date: Fri, 24 Apr 2026 10:52:02 +0200 Subject: [PATCH] ux(colors): apply semantic palette to Loans tab + Active Loans card MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Konrad caught that /payroll/?status=loans was still using Bootstrap defaults (bg-primary for Loan, bg-info for Advance) while the other three tabs had moved to the semantic palette. The Preview-payslip modal's Active Loans card had the same inconsistency in its JS-built badge. - Added .advance-flag-badge as a sibling to .loan-flag-badge; both just reference the existing --badge-loan-* / --badge-advance-* tokens so no new colours introduced. - /payroll/?status=loans row badge: bg-primary/bg-info → loan-flag- badge/advance-flag-badge. - Worker-lookup / Preview-payslip modal JS: same swap on the badge className. Loan-family items now wear the same amber/blue colour pair on every tab + modal they appear on. Transactional status (Active/Paid Off) stays on Bootstrap greens/yellows — they're lifecycle, not type. docs/design-tokens.md updated to record the new class + every place the --badge-loan-* / --badge-advance-* tokens now appear. Tests: 69/69. Co-Authored-By: Claude Opus 4.7 (1M context) --- core/templates/core/payroll_dashboard.html | 14 +++++++++++--- docs/design-tokens.md | 4 ++-- static/css/custom.css | 12 ++++++++---- 3 files changed, 21 insertions(+), 9 deletions(-) diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html index 1240d9c..3cb797e 100644 --- a/core/templates/core/payroll_dashboard.html +++ b/core/templates/core/payroll_dashboard.html @@ -513,10 +513,14 @@ {{ loan.worker.name }} + {# Loan vs Advance: same semantic palette as the Adjustments tab #} + {# Loan-type rows wear amber (.loan-flag-badge), advances wear blue #} + {# (.advance-flag-badge). Transactional state ("Active" / "Paid Off") #} + {# is separate — see the next cell — and stays on Bootstrap colours. #} {% if loan.loan_type == 'advance' %} - Advance + Advance {% else %} - Loan + Loan {% endif %} R {{ loan.principal_amount|floatformat:2 }} @@ -2556,8 +2560,12 @@ document.addEventListener('DOMContentLoaded', function() { var topRow = document.createElement('div'); topRow.className = 'd-flex justify-content-between align-items-center mb-1'; + // Loan-type badge in the Preview-payslip / Worker-lookup modal's + // "Active Loans & Advances" card — mirrors the server-rendered + // /payroll/?status=loans colours so the same loan looks the same + // everywhere. See custom.css .loan-flag-badge / .advance-flag-badge. var badge = document.createElement('span'); - badge.className = 'badge ' + (loan.type === 'advance' ? 'bg-info text-dark' : 'bg-primary'); + badge.className = 'badge ' + (loan.type === 'advance' ? 'advance-flag-badge' : 'loan-flag-badge'); badge.textContent = loan.type_label; topRow.appendChild(badge); diff --git a/docs/design-tokens.md b/docs/design-tokens.md index 14d4177..93508f2 100644 --- a/docs/design-tokens.md +++ b/docs/design-tokens.md @@ -40,9 +40,9 @@ Token definitions live in `static/css/custom.css`: | `--badge-bonus-*` (green) | Adjustments tab type badge; By-Type group-header left-border accent | | `--badge-overtime-*` (mauve) | Adjustments tab type badge; By-Type group-header accent | | `--badge-deduction-*` (purple) | Adjustments tab type badge; By-Type group-header accent | -| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`) | +| `--badge-loan-*` (amber/yellow) | Adjustments tab type badge; By-Type group-header accent; Pending tab "Loan" worker flag (`.loan-flag-badge`); Loans-and-Advances tab row badge for Loan-type rows (`.loan-flag-badge`); Preview-payslip modal's Active Loans card | | `--badge-loan-rep-*` (deeper amber, +15% saturation) | Adjustments tab type badge for Loan Repayment; By-Type group-header accent | -| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent | +| `--badge-advance-*` (blue) | Adjustments tab type badge; By-Type group-header accent; Loans-and-Advances tab row badge for Advance-type rows (`.advance-flag-badge`); Preview-payslip modal's Active Loans card | | `--badge-advance-rep-*` (deeper blue, +15% saturation) | Adjustments tab type badge for Advance Repayment; By-Type group-header accent | ## Transactional-state colours (Bootstrap — unchanged) diff --git a/static/css/custom.css b/static/css/custom.css index 8b6af55..cd09f9c 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -1941,14 +1941,18 @@ body, .card, .modal-content, .form-control, .form-select, .badge-type-advance-repayment { background: var(--badge-advance-rep-bg); color: var(--badge-advance-rep-fg); } /* --- Status flags that borrow a type's colour for semantic consistency. - "Has an active loan or advance" -> Loan-type amber/yellow, so the - worker flag on the Pending tab visually matches the Adjustments - type badge for Loan. Keeps the Loan colour family unified across - the app regardless of which tab you're looking at. --- */ + The Pending tab's "Loan" worker flag (Has-an-active-loan-or-advance), + and the Loans-and-Advances tab's per-row type badge (Loan vs Advance), + should all look like the Adjustments tab's Loan + Advance type badges. + Same concept, same colour, every tab. --- */ .loan-flag-badge { background: var(--badge-loan-bg); color: var(--badge-loan-fg); } +.advance-flag-badge { + background: var(--badge-advance-bg); + color: var(--badge-advance-fg); +} /* --- Sticky filter bar (keeps filters visible as the table scrolls) --- */ .adjustments-filter-bar {