From 831acc3b062115404a856b742d0b7bcb29e677ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?= Date: Fri, 27 Mar 2026 22:36:35 -0400 Subject: [PATCH] fix: use tinted backgrounds for message priority badges Priority badges had identical bg and text colors (both solid destructive red for urgent), creating oversized solid-color blocks. Use 15% tinted backgrounds so text remains readable and badges appear as subtle pills. --- src/renderer/components/communication/MessageItem.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/renderer/components/communication/MessageItem.tsx b/src/renderer/components/communication/MessageItem.tsx index da3cf4e5..cc398931 100644 --- a/src/renderer/components/communication/MessageItem.tsx +++ b/src/renderer/components/communication/MessageItem.tsx @@ -14,9 +14,9 @@ import { DEPARTMENT_COLORS } from "@shared/constants" const priorityConfig: Record = { - urgent: { label: "Urgent", color: "var(--destructive)", bg: "var(--destructive)" }, - normal: { label: "Normal", color: "var(--muted-foreground)", bg: "var(--muted-foreground)" }, - low: { label: "Low", color: "var(--muted-foreground)", bg: "var(--muted-foreground)" }, + urgent: { label: "Urgent", color: "var(--destructive)", bg: "color-mix(in oklch, var(--destructive) 15%, transparent)" }, + normal: { label: "Normal", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" }, + low: { label: "Low", color: "var(--muted-foreground)", bg: "color-mix(in oklch, var(--muted-foreground) 15%, transparent)" }, } function getDepartmentColor(department: DepartmentId | null | undefined): string {