From fd269f97ea710ac2dbb319b3371ada6c547815fe Mon Sep 17 00:00:00 2001 From: Padreug Date: Sat, 6 Jun 2026 22:43:48 +0200 Subject: [PATCH] fix(libra): drop colored status border to remove color collision MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The status border (green/yellow/red) and the type-tinted amount (green income, red expense) both used the same palette, so cleared expenses showed a green border with a red amount and pending income showed a yellow border with a green amount — same colors carrying two different meanings on the same row. Concentrate the encoding so each meaning has one home: - Status lives in the icon (small, single glyph at the title) - Type lives in the amount (sign + red/green tint) - Voided still wins via strike-through + muted amount + Voided badge Per Wise / Mint / YNAB convention. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/modules/expenses/views/TransactionsPage.vue | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/modules/expenses/views/TransactionsPage.vue b/src/modules/expenses/views/TransactionsPage.vue index 6c20afe..6803aa0 100644 --- a/src/modules/expenses/views/TransactionsPage.vue +++ b/src/modules/expenses/views/TransactionsPage.vue @@ -131,15 +131,6 @@ function getStatusInfo(transaction: Transaction) { } } -// Left-border color encodes status (accepted / pending / rejected). -// Entry-type is communicated separately via the signed/colored amount. -function getStatusBorderClass(t: Transaction): string { - if (isVoided(t)) return 'border-l-red-600' - if (t.flag === '*') return 'border-l-green-600' - if (t.flag === '!') return 'border-l-yellow-500' - return 'border-l-transparent' -} - // Income gets a leading '+', expense a leading '-'. function getAmountSign(t: Transaction): string { if (isIncome(t)) return '+' @@ -356,10 +347,7 @@ onMounted(() => {