sarman/tftsr-devops_investigation
1
1
Fork 0
Code Issues 4 Pull Requests Actions 34 Packages Projects 3 Releases 6 Wiki Activity

fix(ui): correct font contrast and background colors in dark mode #84

Merged
sarman merged 2 commits from fix/dark-mode-font-contrast into master 2026-06-08 14:47:59 +00:00
Conversation 0 Commits 2 Files Changed 6 +35 -35
6 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d331e9c7c7 - Show all commits

28
src/components/ImageGallery.tsx
View File

@ -49,7 +49,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
return (
<div className="space-y-4">
{showWarning && (
<div className="bg-amber-100 border border-amber-300 text-amber-800 p-3 rounded-md flex items-center gap-2">
<div className="bg-amber-100 border border-amber-300 text-amber-800 dark:bg-amber-900/20 dark:border-amber-700 dark:text-amber-300 p-3 rounded-md flex items-center gap-2">
<AlertTriangle className="w-5 h-5 flex-shrink-0" />
<span className="text-sm">
⚠️ 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)) && (
<div className="bg-red-100 border border-red-300 text-red-800 p-3 rounded-md flex items-center gap-2">
<div className="bg-red-100 border border-red-300 text-red-800 dark:bg-red-900/20 dark:border-red-700 dark:text-red-300 p-3 rounded-md flex items-center gap-2">
<ExternalLink className="w-5 h-5 flex-shrink-0" />
<span className="text-sm">
⚠️ 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
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{images.map((image) => (
<div key={image.id} className="group relative rounded-lg overflow-hidden bg-gray-100 border border-gray-200">
<div key={image.id} className="group relative rounded-lg overflow-hidden bg-gray-100 border border-gray-200 dark:bg-muted dark:border-border">
<button
onClick={() => {
setSelectedImage(image);
@ -84,10 +84,10 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
/>
</button>
<div className="p-2">
<p className="text-xs text-gray-700 truncate" title={image.file_name}>
<p className="text-xs text-gray-700 dark:text-gray-300 truncate" title={image.file_name}>
{image.file_name}
</p>
<p className="text-xs text-gray-500">
<p className="text-xs text-gray-500 dark:text-gray-400">
{image.is_paste ? "Paste" : "Upload"} · {(image.file_size / 1024).toFixed(1)} KB
</p>
</div>
@ -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"
>
<X className="w-4 h-4" />
@ -117,12 +117,12 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
>
<div
ref={modalRef}
className="bg-white rounded-lg overflow-hidden max-w-4xl max-h-[90vh] flex flex-col"
className="bg-white dark:bg-card rounded-lg overflow-hidden max-w-4xl max-h-[90vh] flex flex-col"
onClick={(e) => e.stopPropagation()}
>
<div className="bg-gray-100 p-4 flex items-center justify-between border-b">
<div className="bg-gray-100 dark:bg-muted p-4 flex items-center justify-between border-b">
<div className="flex items-center gap-2">
<ImageIcon className="w-5 h-5 text-gray-600" />
<ImageIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
<h3 className="font-medium">{selectedImage.file_name}</h3>
</div>
<button
@ -130,7 +130,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
setIsModalOpen(false);
setSelectedImage(null);
}}
className="p-2 hover:bg-gray-200 rounded-lg transition-colors"
className="p-2 hover:bg-gray-200 dark:hover:bg-muted/80 rounded-lg transition-colors"
>
<X className="w-5 h-5" />
</button>
@ -142,16 +142,16 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
className="max-w-full max-h-[60vh] object-contain"
/>
</div>
<div className="bg-gray-50 p-4 border-t text-sm space-y-2">
<div className="bg-gray-50 dark:bg-card p-4 border-t text-sm space-y-2">
<div className="flex gap-4">
<div>
<span className="text-gray-500">Type:</span> {selectedImage.mime_type}
<span className="text-gray-500 dark:text-gray-400">Type:</span> {selectedImage.mime_type}
</div>
<div>
<span className="text-gray-500">Size:</span> {(selectedImage.file_size / 1024).toFixed(2)} KB
<span className="text-gray-500 dark:text-gray-400">Size:</span> {(selectedImage.file_size / 1024).toFixed(2)} KB
</div>
<div>
<span className="text-gray-500">Source:</span> {selectedImage.is_paste ? "Paste" : "File"}
<span className="text-gray-500 dark:text-gray-400">Source:</span> {selectedImage.is_paste ? "Paste" : "File"}
</div>
</div>
</div>

2
src/components/PiiDiffViewer.tsx
View File

@ -74,7 +74,7 @@ export function PiiDiffViewer({
}`}
>
<span
className={`inline-block h-4 w-4 rounded-full bg-white transition-transform ${
className={`inline-block h-4 w-4 rounded-full bg-background transition-transform ${
isApproved(span) ? "translate-x-4" : "translate-x-0.5"
}`}
/>

2
src/components/ShellApprovalModal.tsx
View File

@ -94,7 +94,7 @@ export function ShellApprovalModal() {
{/* Tier Badge */}
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Safety Tier:</span>
<Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300">
<Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300 dark:bg-yellow-900/40 dark:text-yellow-300 dark:border-yellow-700">
Tier {request.tier}
</Badge>
</div>

6
src/pages/LogUpload/index.tsx
View File

@ -360,9 +360,9 @@ export default function LogUpload() {
</div>
{/* PII warning for images */}
<div className="bg-amber-50 border border-amber-200 rounded-md p-3">
<AlertTriangle className="w-5 h-5 text-amber-600 inline mr-2" />
<span className="text-sm text-amber-800">
<div className="bg-amber-50 border border-amber-200 rounded-md p-3 dark:bg-amber-900/20 dark:border-amber-700">
<AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 inline mr-2" />
<span className="text-sm text-amber-800 dark:text-amber-300">
⚠️ PII cannot be automatically redacted from images. Use at your own risk.
</span>
</div>

2
src/pages/Settings/Security.tsx
View File

@ -153,7 +153,7 @@ export default function Security() {
}`}
>
<span
className={`inline-block h-5 w-5 rounded-full bg-white transition-transform ${
className={`inline-block h-5 w-5 rounded-full bg-background transition-transform ${
pii_enabled_patterns[pattern.id] ? "translate-x-5" : "translate-x-0.5"
}`}
/>

30
src/pages/Settings/ShellExecution.tsx
View File

@ -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',
},
];