From cf1f27101c5e21d1cb0c8ed0698a935914121806 Mon Sep 17 00:00:00 2001
From: Algis Dumbris <a.dumbris@gmail.com>
Date: Sun, 1 Feb 2026 12:54:45 +0200
Subject: [PATCH] fix(ui): use theme-aware colors in sensitive data detection
 panel

The sensitive data detection section in the Activity drawer was using
dark-themed text colors that were unreadable on alert backgrounds in
dark mode. Updated to use theme-inherit classes for proper contrast.

Changes:
- Use text-inherit on container to inherit alert text color
- Use bg-base-100/20 for semi-transparent backgrounds
- Use border-current for badge borders
- Use text-inherit/70 for secondary text with opacity

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/views/Activity.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/views/Activity.vue b/frontend/src/views/Activity.vue
index 15e2c81c..61559332 100644
--- a/frontend/src/views/Activity.vue
+++ b/frontend/src/views/Activity.vue
@@ -504,7 +504,7 @@
                 Sensitive Data Detected
               </h4>
               <div class="alert" :class="selectedActivity.max_severity === 'critical' ? 'alert-error' : 'alert-warning'">
-                <div class="flex flex-col gap-2 w-full">
+                <div class="flex flex-col gap-2 w-full text-inherit">
                   <div class="flex items-center gap-2">
                     <span class="font-semibold">Severity:</span>
                     <span class="badge" :class="getSeverityBadgeClass(selectedActivity.max_severity)">
@@ -517,7 +517,7 @@
                       <span
                         v-for="dtype in selectedActivity.detection_types"
                         :key="dtype"
-                        class="badge badge-sm badge-outline"
+                        class="badge badge-sm bg-base-100/20 border-current text-inherit"
                       >
                         {{ dtype }}
                       </span>
@@ -529,13 +529,13 @@
                       <div
                         v-for="(detection, idx) in (selectedActivity.metadata.sensitive_data_detection.detections || [])"
                         :key="idx"
-                        class="flex items-center gap-2 bg-base-200 rounded px-2 py-1"
+                        class="flex items-center gap-2 bg-base-100/20 rounded px-2 py-1"
                       >
                         <span class="badge badge-xs" :class="getSeverityBadgeClass(detection.severity)">
                           {{ detection.severity }}
                         </span>
-                        <span class="font-mono text-xs">{{ detection.type }}</span>
-                        <span class="text-base-content/60 text-xs">in {{ detection.location }}</span>
+                        <span class="font-mono text-xs text-inherit">{{ detection.type }}</span>
+                        <span class="text-inherit/70 text-xs">in {{ detection.location }}</span>
                         <span v-if="detection.is_likely_example" class="badge badge-xs badge-ghost">example</span>
                       </div>
                     </div>