chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: replace hardcoded hex values with Tailwind semantic tokens

Browse Source 
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
frontend/src/components/session/AddSupportingDataModal.tsx
View File

@@ -130,8 +130,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
activeTab === 'text_snippet'
? 'bg-[#14161d] text-[#e2e5eb] shadow-sm'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
)}
>
<Code2 className="h-4 w-4" />
@@ -143,8 +143,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors',
activeTab === 'screenshot'
? 'bg-[#14161d] text-[#e2e5eb] shadow-sm'
: 'text-[#848b9b] hover:text-[#e2e5eb]'
? 'bg-card text-foreground shadow-sm'
: 'text-muted-foreground hover:text-foreground'
)}
>
<ImageIcon className="h-4 w-4" />
@@ -154,7 +154,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
{/* Label */}
<div className="mb-4">
<label htmlFor="sd-label" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
<label htmlFor="sd-label" className="mb-1 block text-sm font-medium text-foreground">
Label
</label>
<input
@@ -164,8 +164,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
onChange={(e) => setLabel(e.target.value)}
placeholder={activeTab === 'text_snippet' ? 'e.g. Error log output' : 'e.g. Blue screen photo'}
className={cn(
'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -174,7 +174,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
{/* Text Snippet Tab Content */}
{activeTab === 'text_snippet' && (
<div className="mb-4">
<label htmlFor="sd-content" className="mb-1 block text-sm font-medium text-[#e2e5eb]">
<label htmlFor="sd-content" className="mb-1 block text-sm font-medium text-foreground">
Content
</label>
<textarea
@@ -184,8 +184,8 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
placeholder="Paste log output, error messages, config snippets..."
rows={8}
className={cn(
'w-full resize-y rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'font-mono text-[#e2e5eb] placeholder:text-[#848b9b]',
'w-full resize-y rounded-md border border-border bg-card px-3 py-2 text-sm',
'font-mono text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)}
/>
@@ -195,17 +195,17 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
{/* Screenshot Tab Content */}
{activeTab === 'screenshot' && (
<div className="mb-4" onPaste={handlePaste}>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">
<label className="mb-1 block text-sm font-medium text-foreground">
Image
</label>
{imageBase64 ? (
<div className="relative rounded-md border border-[#1e2130] bg-[#14161d] p-2">
<div className="relative rounded-md border border-border bg-card p-2">
<img
src={`data:${imageContentType};base64,${imageBase64}`}
alt="Preview"
className="mx-auto max-h-48 rounded object-contain"
/>
<p className="mt-2 text-center text-xs text-[#848b9b]">{imageFileName}</p>
<p className="mt-2 text-center text-xs text-muted-foreground">{imageFileName}</p>
<button
type="button"
onClick={() => {
@@ -214,7 +214,7 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
setImageFileName(null)
if (fileInputRef.current) fileInputRef.current.value = ''
}}
className="mt-2 w-full text-center text-xs text-[#848b9b] hover:text-[#e2e5eb]"
className="mt-2 w-full text-center text-xs text-muted-foreground hover:text-foreground"
>
Remove and choose another
</button>
@@ -223,13 +223,13 @@ export function AddSupportingDataModal({ isOpen, onClose, sessionId, onAdded }:
<div
onClick={() => fileInputRef.current?.click()}
className={cn(
'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-[#1e2130]',
'bg-[#14161d]/50 py-10 transition-colors hover:border-muted-foreground'
'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-border',
'bg-card/50 py-10 transition-colors hover:border-muted-foreground'
)}
>
<Upload className="h-8 w-8 text-[#848b9b]" />
<p className="text-sm text-[#848b9b]">Click to upload or paste from clipboard</p>
<p className="text-xs text-[#848b9b]">PNG, JPEG, or SVG - max 2MB</p>
<Upload className="h-8 w-8 text-muted-foreground" />
<p className="text-sm text-muted-foreground">Click to upload or paste from clipboard</p>
<p className="text-xs text-muted-foreground">PNG, JPEG, or SVG - max 2MB</p>
</div>
)}
<input