Skip to content

Commit ffc5025

Browse files
DevanshuNEUDevanshuNEU
committed
fix(theme): migrate all components to semantic theme tokens for light mode support
Components migrated: - RepoOverview: bg-muted, text-foreground, text-muted-foreground, border-border - StyleInsights: all cards and text now use theme tokens - ImpactAnalyzer: form inputs, cards, risk badges migrated - DependencyGraph: cards, controls, legend use theme tokens - SearchBox: input styling, focus states, badges - ResultCard: code blocks adapt to light/dark, all text themed - SearchPanel: cards, badges, empty state Replaced hardcoded colors: - bg-[#0a0a0c] → bg-muted/bg-card - border-white/5 → border-border - text-zinc-500/text-gray-400 → text-muted-foreground - text-white → text-foreground - text-blue-400 → text-primary All repo detail tabs now properly support light and dark modes.
1 parent b989c58 commit ffc5025

9 files changed

Lines changed: 307 additions & 670 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
1414

1515
if (loading) {
1616
return (
17-
<div className="min-h-screen flex items-center justify-center bg-[#0a0a0b]">
18-
<div className="text-lg text-white">Loading...</div>
17+
<div className="min-h-screen flex items-center justify-center bg-background">
18+
<div className="text-lg text-foreground">Loading...</div>
1919
</div>
2020
);
2121
}

‎frontend/src/components/DependencyGraph.tsx‎

Lines changed: 71 additions & 138 deletions
Large diffs are not rendered by default.

‎frontend/src/components/ImpactAnalyzer.tsx‎

Lines changed: 48 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { useState } from 'react'
2+
import { Button } from '@/components/ui/button'
3+
import { Input } from '@/components/ui/input'
4+
import { Label } from '@/components/ui/label'
25

36
interface ImpactAnalyzerProps {
47
repoId: string
@@ -60,47 +63,45 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
6063

6164
const getRiskColor = (risk: string) => {
6265
switch (risk) {
63-
case 'high': return 'text-red-400 bg-red-500/10 border-red-500/20'
64-
case 'medium': return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/20'
65-
case 'low': return 'text-green-400 bg-green-500/10 border-green-500/20'
66-
default: return 'text-gray-400 bg-white/5 border-white/10'
66+
case 'high': return 'text-destructive bg-destructive/10 border-destructive/20'
67+
case 'medium': return 'text-yellow-500 dark:text-yellow-400 bg-yellow-500/10 border-yellow-500/20'
68+
case 'low': return 'text-green-500 dark:text-green-400 bg-green-500/10 border-green-500/20'
69+
default: return 'text-muted-foreground bg-muted border-border'
6770
}
6871
}
6972

7073
return (
7174
<div className="p-6 space-y-6">
7275
{/* Input Form */}
73-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
74-
<h3 className="text-base font-semibold mb-4 text-white">Analyze Change Impact</h3>
76+
<div className="bg-muted border border-border rounded-xl p-5">
77+
<h3 className="text-base font-semibold mb-4 text-foreground">Analyze Change Impact</h3>
7578
<form onSubmit={analyzeImpact} className="space-y-4">
76-
<div>
77-
<label className="block text-sm font-medium mb-2 text-gray-300">
78-
File Path (relative to repository root)
79-
</label>
80-
<input
79+
<div className="space-y-2">
80+
<Label htmlFor="filePath">File Path (relative to repository root)</Label>
81+
<Input
82+
id="filePath"
8183
type="text"
8284
value={filePath}
8385
onChange={(e) => setFilePath(e.target.value)}
8486
placeholder="e.g., src/auth/middleware.py or components/Button.tsx"
85-
className="w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white placeholder:text-gray-500 focus:outline-none focus:border-blue-500/50 focus:ring-1 focus:ring-blue-500/20 transition-all"
8687
disabled={loading}
8788
/>
88-
<p className="mt-2 text-xs text-gray-500">
89+
<p className="text-xs text-muted-foreground">
8990
Enter the path of the file you want to modify to see its impact
9091
</p>
9192
</div>
9293

93-
<button
94+
<Button
9495
type="submit"
95-
className="px-4 py-2.5 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white font-medium rounded-lg transition-all disabled:opacity-50"
9696
disabled={loading}
97+
className="bg-primary hover:bg-primary/90 text-primary-foreground"
9798
>
9899
{loading ? 'Analyzing...' : 'Analyze Impact'}
99-
</button>
100+
</Button>
100101
</form>
101102

102103
{error && (
103-
<div className="mt-4 p-4 bg-red-500/10 border border-red-500/20 rounded-lg text-sm text-red-400">
104+
<div className="mt-4 p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-sm text-destructive">
104105
{error}
105106
</div>
106107
)}
@@ -110,85 +111,85 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
110111
{result && (
111112
<div className="space-y-6">
112113
{/* Risk Assessment */}
113-
<div className={`bg-[#0a0a0c] rounded-xl p-5 border-2 ${getRiskColor(result.risk_level)}`}>
114+
<div className={`bg-muted rounded-xl p-5 border-2 ${getRiskColor(result.risk_level)}`}>
114115
<div className="flex items-center justify-between mb-3">
115-
<h3 className="text-lg font-semibold text-white">Risk Assessment</h3>
116+
<h3 className="text-lg font-semibold text-foreground">Risk Assessment</h3>
116117
<span className={`px-4 py-1.5 rounded-lg font-semibold uppercase text-sm border ${getRiskColor(result.risk_level)}`}>
117118
{result.risk_level} Risk
118119
</span>
119120
</div>
120-
<p className="text-sm font-mono text-gray-300 mb-4">
121+
<p className="text-sm font-mono text-foreground mb-4">
121122
{result.file}
122123
</p>
123-
<p className="text-sm text-gray-400">
124+
<p className="text-sm text-muted-foreground">
124125
{result.impact_summary}
125126
</p>
126127
</div>
127128

128129
{/* Impact Overview */}
129130
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
130-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
131-
<div className="text-sm text-gray-400 mb-1">Direct Dependencies</div>
132-
<div className="text-3xl font-bold text-blue-500">
131+
<div className="bg-muted border border-border rounded-xl p-5">
132+
<div className="text-sm text-muted-foreground mb-1">Direct Dependencies</div>
133+
<div className="text-3xl font-bold text-primary">
133134
{result.dependency_count}
134135
</div>
135-
<div className="text-xs text-gray-500 mt-1">
136+
<div className="text-xs text-muted-foreground mt-1">
136137
Files this imports
137138
</div>
138139
</div>
139140

140-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
141-
<div className="text-sm text-gray-400 mb-1">Total Impact</div>
142-
<div className="text-3xl font-bold text-blue-500">
141+
<div className="bg-muted border border-border rounded-xl p-5">
142+
<div className="text-sm text-muted-foreground mb-1">Total Impact</div>
143+
<div className="text-3xl font-bold text-primary">
143144
{result.dependent_count}
144145
</div>
145-
<div className="text-xs text-gray-500 mt-1">
146+
<div className="text-xs text-muted-foreground mt-1">
146147
Files affected by changes
147148
</div>
148149
</div>
149150

150-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
151-
<div className="text-sm text-gray-400 mb-1">Test Files</div>
152-
<div className="text-3xl font-bold text-blue-500">
151+
<div className="bg-muted border border-border rounded-xl p-5">
152+
<div className="text-sm text-muted-foreground mb-1">Test Files</div>
153+
<div className="text-3xl font-bold text-primary">
153154
{result.test_files?.length || 0}
154155
</div>
155-
<div className="text-xs text-gray-500 mt-1">
156+
<div className="text-xs text-muted-foreground mt-1">
156157
Related test coverage
157158
</div>
158159
</div>
159160
</div>
160161

161-
{/* Dependencies (What This File Needs) */}
162+
{/* Dependencies */}
162163
{result.direct_dependencies && result.direct_dependencies.length > 0 && (
163-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
164-
<h3 className="text-base font-semibold mb-4 text-white">
164+
<div className="bg-muted border border-border rounded-xl p-5">
165+
<h3 className="text-base font-semibold mb-4 text-foreground">
165166
Dependencies ({result.direct_dependencies.length})
166167
</h3>
167-
<p className="text-sm text-gray-400 mb-3">
168+
<p className="text-sm text-muted-foreground mb-3">
168169
Files this file imports (upstream)
169170
</p>
170171
<div className="space-y-1.5">
171172
{result.direct_dependencies.map((dep, idx) => (
172-
<div key={idx} className="text-sm font-mono text-gray-300 bg-blue-500/10 border border-blue-500/20 px-3 py-2 rounded-lg">
173+
<div key={idx} className="text-sm font-mono text-foreground bg-primary/10 border border-primary/20 px-3 py-2 rounded-lg">
173174
{dep}
174175
</div>
175176
))}
176177
</div>
177178
</div>
178179
)}
179180

180-
{/* Dependents (What Breaks If Changed) */}
181+
{/* Dependents */}
181182
{result.all_dependents && result.all_dependents.length > 0 && (
182-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
183-
<h3 className="text-base font-semibold mb-4 text-white">
183+
<div className="bg-muted border border-border rounded-xl p-5">
184+
<h3 className="text-base font-semibold mb-4 text-foreground">
184185
Affected Files ({result.all_dependents.length})
185186
</h3>
186-
<p className="text-sm text-gray-400 mb-3">
187+
<p className="text-sm text-muted-foreground mb-3">
187188
Files that would be impacted by changes to this file (downstream)
188189
</p>
189190
<div className="space-y-1.5 max-h-96 overflow-y-auto">
190191
{result.all_dependents.map((dep, idx) => (
191-
<div key={idx} className="text-sm font-mono text-gray-300 bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 rounded-lg">
192+
<div key={idx} className="text-sm font-mono text-foreground bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 rounded-lg">
192193
{dep}
193194
</div>
194195
))}
@@ -198,16 +199,16 @@ export function ImpactAnalyzer({ repoId, apiUrl, apiKey }: ImpactAnalyzerProps)
198199

199200
{/* Test Files */}
200201
{result.test_files && result.test_files.length > 0 && (
201-
<div className="bg-[#0a0a0c] border border-white/5 rounded-xl p-5">
202-
<h3 className="text-base font-semibold mb-4 text-white">
202+
<div className="bg-muted border border-border rounded-xl p-5">
203+
<h3 className="text-base font-semibold mb-4 text-foreground">
203204
Related Tests ({result.test_files.length})
204205
</h3>
205-
<p className="text-sm text-gray-400 mb-3">
206+
<p className="text-sm text-muted-foreground mb-3">
206207
Test files that may need updates
207208
</p>
208209
<div className="space-y-1.5">
209210
{result.test_files.map((test, idx) => (
210-
<div key={idx} className="text-sm font-mono text-gray-300 bg-green-500/10 border border-green-500/20 px-3 py-2 rounded-lg">
211+
<div key={idx} className="text-sm font-mono text-foreground bg-green-500/10 border border-green-500/20 px-3 py-2 rounded-lg">
211212
{test}
212213
</div>
213214
))}

‎frontend/src/components/RepoOverview.tsx‎

Lines changed: 34 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
22
import { motion } from 'framer-motion'
33
import { toast } from 'sonner'
44
import { Progress } from '@/components/ui/progress'
5+
import { Button } from '@/components/ui/button'
56
import type { Repository } from '../types'
67
import { WS_URL } from '../config/api'
78
import { useInvalidateRepoCache } from '../hooks/useCachedQuery'
@@ -89,16 +90,16 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
8990
<motion.div
9091
initial={{ opacity: 0, y: 12 }}
9192
animate={{ opacity: 1, y: 0 }}
92-
className="bg-[#0a0a0c] border border-white/[0.06] rounded-xl p-5"
93+
className="bg-muted border border-border rounded-xl p-5"
9394
>
94-
<p className="text-sm text-zinc-500 mb-2">Status</p>
95+
<p className="text-sm text-muted-foreground mb-2">Status</p>
9596
<div className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-sm font-medium
9697
${repo.status === 'indexed'
97-
? 'bg-blue-500/10 text-blue-400 border border-blue-500/20'
98-
: 'bg-zinc-500/10 text-zinc-400 border border-zinc-500/20'
98+
? 'bg-primary/10 text-primary border border-primary/20'
99+
: 'bg-muted text-muted-foreground border border-border'
99100
}`}
100101
>
101-
<span className={`w-2 h-2 rounded-full ${repo.status === 'indexed' ? 'bg-blue-400' : 'bg-zinc-400'}`} />
102+
<span className={`w-2 h-2 rounded-full ${repo.status === 'indexed' ? 'bg-primary' : 'bg-muted-foreground'}`} />
102103
{repo.status === 'indexed' ? 'Indexed' : 'Pending'}
103104
</div>
104105
</motion.div>
@@ -108,10 +109,10 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
108109
initial={{ opacity: 0, y: 12 }}
109110
animate={{ opacity: 1, y: 0 }}
110111
transition={{ delay: 0.1 }}
111-
className="bg-[#0a0a0c] border border-white/[0.06] rounded-xl p-5"
112+
className="bg-muted border border-border rounded-xl p-5"
112113
>
113-
<p className="text-sm text-zinc-500 mb-2">Functions Indexed</p>
114-
<p className="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-violet-400">
114+
<p className="text-sm text-muted-foreground mb-2">Functions Indexed</p>
115+
<p className="text-3xl font-bold text-primary">
115116
{(repo.file_count || 0).toLocaleString()}
116117
</p>
117118
</motion.div>
@@ -121,10 +122,10 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
121122
initial={{ opacity: 0, y: 12 }}
122123
animate={{ opacity: 1, y: 0 }}
123124
transition={{ delay: 0.2 }}
124-
className="bg-[#0a0a0c] border border-white/[0.06] rounded-xl p-5"
125+
className="bg-muted border border-border rounded-xl p-5"
125126
>
126-
<p className="text-sm text-zinc-500 mb-2">Branch</p>
127-
<p className="text-lg font-mono text-white">{repo.branch}</p>
127+
<p className="text-sm text-muted-foreground mb-2">Branch</p>
128+
<p className="text-lg font-mono text-foreground">{repo.branch}</p>
128129
</motion.div>
129130
</div>
130131

@@ -133,17 +134,17 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
133134
<motion.div
134135
initial={{ opacity: 0, height: 0 }}
135136
animate={{ opacity: 1, height: 'auto' }}
136-
className="bg-blue-500/5 border border-blue-500/20 rounded-xl p-5"
137+
className="bg-primary/5 border border-primary/20 rounded-xl p-5"
137138
>
138139
<div className="flex items-center justify-between mb-3">
139140
<div className="flex items-center gap-2">
140-
<span className="w-2 h-2 rounded-full bg-blue-400 animate-pulse" />
141-
<span className="font-medium text-white">Indexing in Progress</span>
141+
<span className="w-2 h-2 rounded-full bg-primary animate-pulse" />
142+
<span className="font-medium text-foreground">Indexing in Progress</span>
142143
</div>
143-
<span className="text-sm font-mono text-blue-400">{progress.progress_pct}%</span>
144+
<span className="text-sm font-mono text-primary">{progress.progress_pct}%</span>
144145
</div>
145146
<Progress value={progress.progress_pct} className="h-1.5 mb-3" />
146-
<div className="flex justify-between text-xs text-zinc-500">
147+
<div className="flex justify-between text-xs text-muted-foreground">
147148
<span>Files: {progress.files_processed}/{progress.total_files || '?'}</span>
148149
<span>Functions: {progress.functions_indexed}</span>
149150
</div>
@@ -155,23 +156,23 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
155156
initial={{ opacity: 0, y: 12 }}
156157
animate={{ opacity: 1, y: 0 }}
157158
transition={{ delay: 0.3 }}
158-
className="bg-[#0a0a0c] border border-white/[0.06] rounded-xl p-5"
159+
className="bg-muted border border-border rounded-xl p-5"
159160
>
160-
<h3 className="text-sm font-medium text-white mb-4">Repository Details</h3>
161+
<h3 className="text-sm font-medium text-foreground mb-4">Repository Details</h3>
161162
<div className="space-y-3 text-sm">
162163
<div className="flex items-start gap-3">
163-
<span className="text-zinc-500 w-20">Name</span>
164-
<span className="text-white">{repo.name}</span>
164+
<span className="text-muted-foreground w-20">Name</span>
165+
<span className="text-foreground">{repo.name}</span>
165166
</div>
166167
<div className="flex items-start gap-3">
167-
<span className="text-zinc-500 w-20">Git URL</span>
168-
<a href={repo.git_url} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 font-mono text-xs truncate transition-colors">
168+
<span className="text-muted-foreground w-20">Git URL</span>
169+
<a href={repo.git_url} target="_blank" rel="noopener noreferrer" className="text-primary hover:text-primary/80 font-mono text-xs truncate transition-colors">
169170
{repo.git_url}
170171
</a>
171172
</div>
172173
<div className="flex items-start gap-3">
173-
<span className="text-zinc-500 w-20">Local Path</span>
174-
<span className="text-zinc-400 font-mono text-xs truncate">{repo.local_path}</span>
174+
<span className="text-muted-foreground w-20">Local Path</span>
175+
<span className="text-muted-foreground font-mono text-xs truncate">{repo.local_path}</span>
175176
</div>
176177
</div>
177178
</motion.div>
@@ -181,26 +182,26 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
181182
initial={{ opacity: 0, y: 12 }}
182183
animate={{ opacity: 1, y: 0 }}
183184
transition={{ delay: 0.4 }}
184-
className="bg-[#0a0a0c] border border-white/[0.06] rounded-xl p-5"
185+
className="bg-muted border border-border rounded-xl p-5"
185186
>
186-
<h3 className="text-sm font-medium text-white mb-2">Actions</h3>
187-
<p className="text-sm text-zinc-500 mb-4">
187+
<h3 className="text-sm font-medium text-foreground mb-2">Actions</h3>
188+
<p className="text-sm text-muted-foreground mb-4">
188189
Re-indexing uses incremental mode — only processes changed files.
189190
</p>
190191
<div className="flex gap-3">
191-
<button
192+
<Button
192193
onClick={handleReindex}
193194
disabled={indexing}
194-
className="px-4 py-2 bg-gradient-to-r from-blue-500 to-violet-500 hover:from-blue-600 hover:to-violet-600 text-white text-sm font-medium rounded-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed"
195+
className="bg-primary hover:bg-primary/90 text-primary-foreground"
195196
>
196197
{indexing ? 'Indexing...' : 'Re-index Repository'}
197-
</button>
198-
<button
199-
className="px-4 py-2 bg-white/5 border border-white/[0.08] text-zinc-300 text-sm font-medium rounded-lg hover:bg-white/10 transition-colors"
198+
</Button>
199+
<Button
200+
variant="outline"
200201
onClick={() => toast.info('Delete functionality coming soon')}
201202
>
202203
Remove
203-
</button>
204+
</Button>
204205
</div>
205206
</motion.div>
206207
</div>

0 commit comments

Comments
 (0)