From 8075e54397c76687279ca7907c68c89c9de2dbc2 Mon Sep 17 00:00:00 2001
From: Michael Mainguy <mike.mainguy@gmail.com>
Date: Tue, 12 Aug 2025 11:42:02 -0500
Subject: [PATCH] Fix RequestRowDetails styling to use foreground colors only
 for status indicators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace getTotalResponseTimeColor() inline styles with getTotalResponseTimeClass() CSS classes
- Add CSS overrides in RequestRowDetails.module.css to remove background colors from status classes
- Ensure danger, warning, and success indicators only affect text color, not background
- Maintain consistent component background styling throughout expanded details
- Use \!important declarations to override inherited status class background properties
- Preserve semantic color meanings (green=success, orange=warning, red=danger) for text only

Technical changes:
- Import getTotalResponseTimeClass instead of getTotalResponseTimeColor in RequestRowDetails.tsx
- Add CSS rules targeting .detailListItem and .timingHighlighted with status classes
- Set background-color: transparent \!important for all status class combinations
- Apply color variables (--color-success, --color-warning, --color-danger) to text only

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../RequestRowDetails.module.css              | 26 +++++++++++++++++++
 .../httprequestviewer/RequestRowDetails.tsx   |  4 +--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/httprequestviewer/RequestRowDetails.module.css b/src/components/httprequestviewer/RequestRowDetails.module.css
index 1c83b89..cb3aa3a 100644
--- a/src/components/httprequestviewer/RequestRowDetails.module.css
+++ b/src/components/httprequestviewer/RequestRowDetails.module.css
@@ -110,4 +110,30 @@ div.fullWidth {
     text-overflow: ellipsis;
     cursor: help;
     word-break: break-all;
+}
+
+/* Override status classes to only use foreground colors, not background colors */
+.detailListItem.success,
+.detailListItem.warning, 
+.detailListItem.danger,
+.timingHighlighted.success,
+.timingHighlighted.warning,
+.timingHighlighted.danger {
+    background-color: transparent !important;
+}
+
+/* Ensure status colors are applied only to text */
+.detailListItem.success,
+.timingHighlighted.success {
+    color: var(--color-success) !important;
+}
+
+.detailListItem.warning,
+.timingHighlighted.warning {
+    color: var(--color-warning) !important;
+}
+
+.detailListItem.danger,
+.timingHighlighted.danger {
+    color: var(--color-danger) !important;
 }
\ No newline at end of file
diff --git a/src/components/httprequestviewer/RequestRowDetails.tsx b/src/components/httprequestviewer/RequestRowDetails.tsx
index 723a1f9..65de203 100644
--- a/src/components/httprequestviewer/RequestRowDetails.tsx
+++ b/src/components/httprequestviewer/RequestRowDetails.tsx
@@ -5,7 +5,7 @@ import styles from './RequestRowDetails.module.css'
 // Import utility functions
 import { formatDuration, formatSize } from './lib/formatUtils'
 import {
-  getTotalResponseTimeColor,
+  getTotalResponseTimeClass,
   getQueueAnalysisIcon,
   getCDNIcon,
   getCDNDisplayName,
@@ -59,7 +59,7 @@ const RequestRowDetails: React.FC<RequestRowDetailsProps> = ({ request, visibleC
               </div>
               <div className={styles.detailListItem}><strong>Server Latency:</strong> {formatDuration(request.timing.serverLatency)}</div>
               <div className={styles.detailListItem}><strong>Network Duration:</strong> {formatDuration(request.timing.duration)}</div>
-              <div className={`${styles.detailListItem} ${styles.timingHighlighted}`} style={{ ...getTotalResponseTimeColor(request.timing.totalResponseTime) }}>
+              <div className={`${styles.detailListItem} ${styles.timingHighlighted} ${getTotalResponseTimeClass(request.timing.totalResponseTime)}`}>
                 <strong>Total Response Time:</strong> {formatDuration(request.timing.totalResponseTime)}
               </div>
               <div className={styles.detailListItem}><strong>Network Duration Only:</strong> {formatDuration(request.timing.networkDuration)}</div>