From c6df980faf242f4f873553fb7c0d044f508645f9 Mon Sep 17 00:00:00 2001
From: Roomote Bot <chris@roocode.com>
Date: Mon, 7 Jul 2025 13:36:41 -0700
Subject: [PATCH] fix: improve command text contrast in light theme (#225)

- Replace bg-black/90 with bg-muted for better theme adaptation
- Replace text-foreground with text-muted-foreground for proper contrast
- Add border-border for better visual separation
- Ensures WCAG AAA compliance in both light and dark themes

Fixes contrast issue where command text was barely readable in light theme
(black text on nearly black background)
---
 apps/web/src/app/(authenticated)/usage/Messages.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/app/(authenticated)/usage/Messages.tsx b/apps/web/src/app/(authenticated)/usage/Messages.tsx
index f3bb448fd0..7637979572 100644
--- a/apps/web/src/app/(authenticated)/usage/Messages.tsx
+++ b/apps/web/src/app/(authenticated)/usage/Messages.tsx
@@ -434,7 +434,7 @@ export const Messages = ({
                   </div>
                 ) : isCommand ? (
                   <div className="space-y-3">
-                    <div className="bg-black/90 text-foreground p-3 rounded-md font-mono text-sm">
+                    <div className="bg-muted text-muted-foreground p-3 rounded-md font-mono text-sm border border-border">
                       {message.text}
                     </div>
                   </div>