From dabdd2b4177ade55bf85b38ce8e0b22bbaa47da8 Mon Sep 17 00:00:00 2001 From: Darko Gjorgjijoski Date: Sat, 4 Apr 2026 02:30:00 +0200 Subject: [PATCH] Fix status badge colors: SENT to green, PAID more visible Change SENT status from yellow to green in both invoice and estimate badges. Make PAID badge more noticeable with stronger green background (40% opacity) and semibold text. Use consistent text-status-green token for PAID across all badge components. Co-Authored-By: Claude Opus 4.6 (1M context) --- resources/scripts/components/base/BaseEstimateStatusBadge.vue | 2 +- resources/scripts/components/base/BaseInvoiceStatusBadge.vue | 4 ++-- resources/scripts/components/base/BasePaidStatusBadge.vue | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/resources/scripts/components/base/BaseEstimateStatusBadge.vue b/resources/scripts/components/base/BaseEstimateStatusBadge.vue index c9ac54a7..9efc9883 100644 --- a/resources/scripts/components/base/BaseEstimateStatusBadge.vue +++ b/resources/scripts/components/base/BaseEstimateStatusBadge.vue @@ -20,7 +20,7 @@ const badgeColorClasses = computed(() => { case 'DRAFT': return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center ' case 'SENT': - return ' bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center ' + return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center' case 'VIEWED': return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center' case 'EXPIRED': diff --git a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue index 08b6d32b..41c4aa99 100644 --- a/resources/scripts/components/base/BaseInvoiceStatusBadge.vue +++ b/resources/scripts/components/base/BaseInvoiceStatusBadge.vue @@ -22,7 +22,7 @@ export default { case 'DRAFT': return 'bg-yellow-300/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center' case 'SENT': - return ' bg-yellow-500/25 px-2 py-1 text-sm text-status-yellow uppercase font-normal text-center ' + return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center' case 'VIEWED': return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center' case 'COMPLETED': @@ -36,7 +36,7 @@ export default { case 'PARTIALLY_PAID': return 'bg-blue-400/25 px-2 py-1 text-sm text-status-blue uppercase font-normal text-center' case 'PAID': - return 'bg-green-500/25 px-2 py-1 text-sm text-status-green uppercase font-normal text-center' + return 'bg-green-500/40 px-2 py-1 text-sm text-status-green uppercase font-semibold text-center' default: return 'bg-surface-secondary0/25 px-2 py-1 text-sm text-heading uppercase font-normal text-center' } diff --git a/resources/scripts/components/base/BasePaidStatusBadge.vue b/resources/scripts/components/base/BasePaidStatusBadge.vue index c70ca34a..9b776ed5 100644 --- a/resources/scripts/components/base/BasePaidStatusBadge.vue +++ b/resources/scripts/components/base/BasePaidStatusBadge.vue @@ -24,7 +24,7 @@ export default { const badgeColorClasses = computed(() => { switch (props.status) { case 'PAID': - return 'bg-primary-300/25 text-primary-800 uppercase font-normal text-center' + return 'bg-green-500/40 text-status-green uppercase font-semibold text-center' case 'UNPAID': return ' bg-yellow-500/25 text-status-yellow uppercase font-normal text-center ' case 'PARTIALLY_PAID':