From d331e9c7c760ccf6a07964858be53121111f1e9e Mon Sep 17 00:00:00 2001 From: Shaun Arman Date: Sun, 7 Jun 2026 21:30:50 -0500 Subject: [PATCH] fix(ui): correct font contrast and background colors in dark mode Replace hardcoded light-mode Tailwind colors with dark: variants across six components. Issues that broke readability: - PiiDiffViewer / Security: toggle knob was bg-white (invisible on bg-muted in dark mode) -> bg-background - ImageGallery: thumbnail container, filename labels, alert banners, and modal chrome all used hardcoded gray/white backgrounds with dark text; added full dark: variants throughout - ShellExecution TIER_CONFIG: tier cards used bg-green/yellow/red-50 (near-white) with dark text; added dark:bg-*-950/30 backgrounds and light text for all three tiers - ShellApprovalModal: tier 2 badge hardcoded bg-yellow-50/text-yellow-700; added dark: variants - LogUpload: PII warning alert used bg-amber-50/text-amber-800; added dark:bg-amber-900/20 and lighter text for dark mode --- src/components/ImageGallery.tsx | 28 ++++++++++++------------- src/components/PiiDiffViewer.tsx | 2 +- src/components/ShellApprovalModal.tsx | 2 +- src/pages/LogUpload/index.tsx | 6 +++--- src/pages/Settings/Security.tsx | 2 +- src/pages/Settings/ShellExecution.tsx | 30 +++++++++++++-------------- 6 files changed, 35 insertions(+), 35 deletions(-) diff --git a/src/components/ImageGallery.tsx b/src/components/ImageGallery.tsx index 2ccadffe..a8e638ea 100644 --- a/src/components/ImageGallery.tsx +++ b/src/components/ImageGallery.tsx @@ -49,7 +49,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall return (
{showWarning && ( -
+
⚠️ PII cannot be automatically redacted from images. Use at your own risk. @@ -58,7 +58,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall )} {images.some(img => isWebSource(img)) && ( -
+
⚠️ Some images appear to be from web sources. Ensure you have permission to share. @@ -68,7 +68,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
{images.map((image) => ( -
+
-

+

{image.file_name}

-

+

{image.is_paste ? "Paste" : "Upload"} · {(image.file_size / 1024).toFixed(1)} KB

@@ -97,7 +97,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall e.stopPropagation(); onDelete(image); }} - className="absolute top-1 right-1 p-1 bg-white/80 hover:bg-white rounded-md text-gray-600 hover:text-red-600 transition-colors opacity-0 group-hover:opacity-100" + className="absolute top-1 right-1 p-1 bg-white/80 hover:bg-white dark:bg-background/80 dark:hover:bg-background rounded-md text-gray-600 dark:text-gray-400 hover:text-red-600 dark:hover:text-red-400 transition-colors opacity-0 group-hover:opacity-100" title="Delete image" > @@ -117,12 +117,12 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall >
e.stopPropagation()} > -
+
- +

{selectedImage.file_name}

@@ -142,16 +142,16 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall className="max-w-full max-h-[60vh] object-contain" />
-
+
- Type: {selectedImage.mime_type} + Type: {selectedImage.mime_type}
- Size: {(selectedImage.file_size / 1024).toFixed(2)} KB + Size: {(selectedImage.file_size / 1024).toFixed(2)} KB
- Source: {selectedImage.is_paste ? "Paste" : "File"} + Source: {selectedImage.is_paste ? "Paste" : "File"}
diff --git a/src/components/PiiDiffViewer.tsx b/src/components/PiiDiffViewer.tsx index 99cf02b1..8dc8b52a 100644 --- a/src/components/PiiDiffViewer.tsx +++ b/src/components/PiiDiffViewer.tsx @@ -74,7 +74,7 @@ export function PiiDiffViewer({ }`} > diff --git a/src/components/ShellApprovalModal.tsx b/src/components/ShellApprovalModal.tsx index 074b5d29..d5e6c7b8 100644 --- a/src/components/ShellApprovalModal.tsx +++ b/src/components/ShellApprovalModal.tsx @@ -94,7 +94,7 @@ export function ShellApprovalModal() { {/* Tier Badge */}
Safety Tier: - + Tier {request.tier}
diff --git a/src/pages/LogUpload/index.tsx b/src/pages/LogUpload/index.tsx index c785acfc..e7fb56e1 100644 --- a/src/pages/LogUpload/index.tsx +++ b/src/pages/LogUpload/index.tsx @@ -360,9 +360,9 @@ export default function LogUpload() {
{/* PII warning for images */} -
- - +
+ + ⚠️ PII cannot be automatically redacted from images. Use at your own risk.
diff --git a/src/pages/Settings/Security.tsx b/src/pages/Settings/Security.tsx index 66dc249d..d88061df 100644 --- a/src/pages/Settings/Security.tsx +++ b/src/pages/Settings/Security.tsx @@ -153,7 +153,7 @@ export default function Security() { }`} > diff --git a/src/pages/Settings/ShellExecution.tsx b/src/pages/Settings/ShellExecution.tsx index 998dc11b..180f4730 100644 --- a/src/pages/Settings/ShellExecution.tsx +++ b/src/pages/Settings/ShellExecution.tsx @@ -29,31 +29,31 @@ const TIER_CONFIG: TierConfig[] = [ tier: 1, label: 'Tier 1', behavior: 'Auto-execute (Read-only)', - colorBg: 'bg-green-50', - colorBorder: 'border-green-200', - colorHeading: 'text-green-900', - colorText: 'text-green-800', - badgeClass: 'bg-green-100 text-green-700 border-green-300', + colorBg: 'bg-green-50 dark:bg-green-950/30', + colorBorder: 'border-green-200 dark:border-green-800', + colorHeading: 'text-green-900 dark:text-green-300', + colorText: 'text-green-800 dark:text-green-400', + badgeClass: 'bg-green-100 text-green-700 border-green-300 dark:bg-green-900/40 dark:text-green-300 dark:border-green-700', }, { tier: 2, label: 'Tier 2', behavior: 'Require approval (Mutating)', - colorBg: 'bg-yellow-50', - colorBorder: 'border-yellow-200', - colorHeading: 'text-yellow-900', - colorText: 'text-yellow-800', - badgeClass: 'bg-yellow-100 text-yellow-700 border-yellow-300', + colorBg: 'bg-yellow-50 dark:bg-yellow-950/30', + colorBorder: 'border-yellow-200 dark:border-yellow-800', + colorHeading: 'text-yellow-900 dark:text-yellow-300', + colorText: 'text-yellow-800 dark:text-yellow-400', + badgeClass: 'bg-yellow-100 text-yellow-700 border-yellow-300 dark:bg-yellow-900/40 dark:text-yellow-300 dark:border-yellow-700', }, { tier: 3, label: 'Tier 3', behavior: 'Always deny (Destructive)', - colorBg: 'bg-red-50', - colorBorder: 'border-red-200', - colorHeading: 'text-red-900', - colorText: 'text-red-800', - badgeClass: 'bg-red-100 text-red-700 border-red-300', + colorBg: 'bg-red-50 dark:bg-red-950/30', + colorBorder: 'border-red-200 dark:border-red-800', + colorHeading: 'text-red-900 dark:text-red-300', + colorText: 'text-red-800 dark:text-red-400', + badgeClass: 'bg-red-100 text-red-700 border-red-300 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700', }, ]; -- 2.45.2