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) <noreply@anthropic.com>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 02:30:00 +02:00
parent 350068706c
commit dabdd2b417
3 changed files with 4 additions and 4 deletions

View File

@@ -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':

View File

@@ -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'
}

View File

@@ -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':