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

28
src/components/ImageGallery.tsx
View File

@ -49,7 +49,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{showWarning && ( {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" /> <AlertTriangle className="w-5 h-5 flex-shrink-0" />
<span className="text-sm"> <span className="text-sm">
⚠️ PII cannot be automatically redacted from images. Use at your own risk. ⚠️ 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)) && ( {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" /> <ExternalLink className="w-5 h-5 flex-shrink-0" />
<span className="text-sm"> <span className="text-sm">
⚠️ Some images appear to be from web sources. Ensure you have permission to share. ⚠️ 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"> <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
{images.map((image) => ( {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 <button
onClick={() => { onClick={() => {
setSelectedImage(image); setSelectedImage(image);
@ -84,10 +84,10 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
/> />
</button> </button>
<div className="p-2"> <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} {image.file_name}
</p> </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 {image.is_paste ? "Paste" : "Upload"} · {(image.file_size / 1024).toFixed(1)} KB
</p> </p>
</div> </div>
@ -97,7 +97,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
e.stopPropagation(); e.stopPropagation();
onDelete(image); 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" title="Delete image"
> >
<X className="w-4 h-4" /> <X className="w-4 h-4" />
@ -117,12 +117,12 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
> >
<div <div
ref={modalRef} 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()} 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"> <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> <h3 className="font-medium">{selectedImage.file_name}</h3>
</div> </div>
<button <button
@ -130,7 +130,7 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
setIsModalOpen(false); setIsModalOpen(false);
setSelectedImage(null); 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" /> <X className="w-5 h-5" />
</button> </button>
@ -142,16 +142,16 @@ export function ImageGallery({ images, onDelete, showWarning = true }: ImageGall
className="max-w-full max-h-[60vh] object-contain" className="max-w-full max-h-[60vh] object-contain"
/> />
</div> </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 className="flex gap-4">
<div> <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>
<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>
<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> </div>
</div> </div>

2
src/components/PiiDiffViewer.tsx
View File

@ -74,7 +74,7 @@ export function PiiDiffViewer({
}`} }`}
> >
<span <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" 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 */} {/* Tier Badge */}
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground">Safety Tier:</span> <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} Tier {request.tier}
</Badge> </Badge>
</div> </div>

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

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

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

@ -153,7 +153,7 @@ export default function Security() {
}`} }`}
> >
<span <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" 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, tier: 1,
label: 'Tier 1', label: 'Tier 1',
behavior: 'Auto-execute (Read-only)', behavior: 'Auto-execute (Read-only)',
colorBg: 'bg-green-50', colorBg: 'bg-green-50 dark:bg-green-950/30',
colorBorder: 'border-green-200', colorBorder: 'border-green-200 dark:border-green-800',
colorHeading: 'text-green-900', colorHeading: 'text-green-900 dark:text-green-300',
colorText: 'text-green-800', colorText: 'text-green-800 dark:text-green-400',
badgeClass: 'bg-green-100 text-green-700 border-green-300', 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, tier: 2,
label: 'Tier 2', label: 'Tier 2',
behavior: 'Require approval (Mutating)', behavior: 'Require approval (Mutating)',
colorBg: 'bg-yellow-50', colorBg: 'bg-yellow-50 dark:bg-yellow-950/30',
colorBorder: 'border-yellow-200', colorBorder: 'border-yellow-200 dark:border-yellow-800',
colorHeading: 'text-yellow-900', colorHeading: 'text-yellow-900 dark:text-yellow-300',
colorText: 'text-yellow-800', colorText: 'text-yellow-800 dark:text-yellow-400',
badgeClass: 'bg-yellow-100 text-yellow-700 border-yellow-300', 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, tier: 3,
label: 'Tier 3', label: 'Tier 3',
behavior: 'Always deny (Destructive)', behavior: 'Always deny (Destructive)',
colorBg: 'bg-red-50', colorBg: 'bg-red-50 dark:bg-red-950/30',
colorBorder: 'border-red-200', colorBorder: 'border-red-200 dark:border-red-800',
colorHeading: 'text-red-900', colorHeading: 'text-red-900 dark:text-red-300',
colorText: 'text-red-800', colorText: 'text-red-800 dark:text-red-400',
badgeClass: 'bg-red-100 text-red-700 border-red-300', badgeClass: 'bg-red-100 text-red-700 border-red-300 dark:bg-red-900/40 dark:text-red-300 dark:border-red-700',
}, },
]; ];