Skip to content

Commit 27f0a8d

Browse files
parikhvedant2003parikhvedant2003
committed
Added Light and Dark Mode Feature
1 parent 5ecf1f0 commit 27f0a8d

File tree

31 files changed

+351
-241
lines changed

31 files changed

+351
-241
lines changed

‎web/src/app/admin/traces/components/timeline-chart.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ export function TimelineChart({
216216
spawned_agent: 'bg-purple-500',
217217
}
218218

219-
const color = baseColors[type as keyof typeof baseColors] || 'bg-gray-500'
219+
const color = baseColors[type as keyof typeof baseColors] || 'bg-muted-foreground'
220220

221221
if (isSelected) {
222222
return `${color} ring-2 ring-offset-2 ring-offset-background ring-blue-600`
@@ -306,14 +306,14 @@ export function TimelineChart({
306306
{/* Connection line to parent */}
307307
{event.parentId && depth > 0 && (
308308
<div
309-
className="absolute h-0.5 bg-gray-400 opacity-50"
309+
className="absolute h-0.5 bg-border opacity-70"
310310
style={{
311311
left: `${left - 20}px`,
312312
width: '20px',
313313
top: '16px',
314314
}}
315315
>
316-
<ArrowRight className="absolute -right-1 -top-2 h-4 w-4 text-gray-400" />
316+
<ArrowRight className="absolute -right-1 -top-2 h-4 w-4 text-muted-foreground" />
317317
</div>
318318
)}
319319
</div>
@@ -404,7 +404,7 @@ export function TimelineChart({
404404
transform: 'translateY(-50%)',
405405
}}
406406
>
407-
<div className="h-4 w-px bg-gray-300" />
407+
<div className="h-4 w-px bg-border" />
408408
<span className="text-xs text-muted-foreground ml-1">
409409
{seconds}s
410410
</span>

‎web/src/app/evals/evals-table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -301,7 +301,7 @@ export function EvalsTable({ results, isAdmin }: EvalsTableProps) {
301301
}}
302302
/>
303303
<div className="absolute left-1 top-0 h-full flex items-center">
304-
<span className="text-sm font-medium bg-black bg-opacity-10 px-1 rounded text-gray-900">
304+
<span className="text-sm font-medium bg-foreground/10 px-1 rounded text-foreground">
305305
{formatScore(result.avgScore)}
306306
</span>
307307
</div>

‎web/src/app/home-client.tsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -146,10 +146,10 @@ export default function HomeClient() {
146146
BENCHMARK RESULTS
147147
</motion.div>
148148
</div>
149-
<h2 className="text-4xl md:text-5xl font-bold text-white">
149+
<h2 className="text-4xl md:text-5xl font-bold text-foreground dark:text-white">
150150
BuffBench Results
151151
</h2>
152-
<p className="text-xl text-white/70 max-w-2xl mx-auto">
152+
<p className="text-xl max-w-2xl mx-auto text-muted-foreground dark:text-white/70">
153153
State of the art coding agent evaluation using generated
154154
workflows and judging from open source repositories
155155
</p>
@@ -162,7 +162,7 @@ export default function HomeClient() {
162162
transition={{ duration: 0.7, delay: 0.2 }}
163163
className="relative"
164164
>
165-
<div className="bg-zinc-900/50 border-2 border-green-500/30 rounded-xl p-8 shadow-2xl shadow-green-500/10">
165+
<div className="border-2 border-green-500/30 rounded-xl p-8 shadow-2xl shadow-green-500/10 bg-white/80 dark:bg-zinc-900/50">
166166
<Image
167167
src="/codebuff-vs-claude-code.png"
168168
alt="Codebuff vs Claude Code Performance Comparison"
@@ -180,15 +180,15 @@ export default function HomeClient() {
180180
whileInView={{ opacity: 1, y: 0 }}
181181
viewport={{ once: true }}
182182
transition={{ duration: 0.5, delay: 0.4 }}
183-
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
183+
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
184184
>
185-
<div className="text-3xl font-bold text-green-400 mb-2">
185+
<div className="text-3xl font-bold text-green-500 mb-2">
186186
175+
187187
</div>
188-
<div className="text-white font-semibold mb-1">
188+
<div className="font-semibold mb-1 text-foreground dark:text-white">
189189
Real Tasks
190190
</div>
191-
<div className="text-white/60 text-sm">
191+
<div className="text-sm text-muted-foreground dark:text-white/60">
192192
Git commit reconstruction from open source projects
193193
</div>
194194
</motion.div>
@@ -198,15 +198,15 @@ export default function HomeClient() {
198198
whileInView={{ opacity: 1, y: 0 }}
199199
viewport={{ once: true }}
200200
transition={{ duration: 0.5, delay: 0.6 }}
201-
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
201+
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
202202
>
203-
<div className="text-3xl font-bold text-green-400 mb-2">
203+
<div className="text-3xl font-bold text-green-500 mb-2">
204204
5
205205
</div>
206-
<div className="text-white font-semibold mb-1">
206+
<div className="font-semibold mb-1 text-foreground dark:text-white">
207207
Turn Conversations
208208
</div>
209-
<div className="text-white/60 text-sm">
209+
<div className="text-sm text-muted-foreground dark:text-white/60">
210210
Prompting agent simulates human for multiple turns
211211
</div>
212212
</motion.div>
@@ -216,15 +216,15 @@ export default function HomeClient() {
216216
whileInView={{ opacity: 1, y: 0 }}
217217
viewport={{ once: true }}
218218
transition={{ duration: 0.5, delay: 0.8 }}
219-
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
219+
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
220220
>
221-
<div className="text-3xl font-bold text-green-400 mb-2">
221+
<div className="text-3xl font-bold text-green-500 mb-2">
222222
4D
223223
</div>
224-
<div className="text-white font-semibold mb-1">
224+
<div className="font-semibold mb-1 text-foreground dark:text-white">
225225
Scoring System
226226
</div>
227-
<div className="text-white/60 text-sm">
227+
<div className="text-sm text-muted-foreground dark:text-white/60">
228228
Completion, efficiency, code quality, and overall scores
229229
</div>
230230
</motion.div>
@@ -239,7 +239,7 @@ export default function HomeClient() {
239239
whileInView={{ opacity: 1, y: 0 }}
240240
viewport={{ once: true }}
241241
transition={{ duration: 0.5, delay: 1.0 }}
242-
className="inline-flex items-center gap-2 text-green-400 hover:text-green-300 transition-colors"
242+
className="inline-flex items-center gap-2 text-green-600 hover:text-green-500 dark:text-green-400 dark:hover:text-green-300 transition-colors"
243243
>
244244
<span>View evaluation methodology</span>
245245
<span className="text-xs">↗</span>

‎web/src/app/invites/[token]/page.tsx‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,14 @@ export default function InvitationPage() {
9292

9393
if (loading) {
9494
return (
95-
<div className="flex items-center justify-center bg-black text-white">
96-
<Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl">
95+
<div className="flex items-center justify-center">
96+
<Card className="w-full max-w-md shadow-xl">
9797
<CardHeader>
98-
<Skeleton className="h-6 w-3/4 bg-gray-700" />
99-
<Skeleton className="h-4 w-full bg-gray-700" />
98+
<Skeleton className="h-6 w-3/4" />
99+
<Skeleton className="h-4 w-full" />
100100
</CardHeader>
101101
<CardContent>
102-
<Skeleton className="h-10 w-full bg-gray-700" />
102+
<Skeleton className="h-10 w-full" />
103103
</CardContent>
104104
</Card>
105105
</div>
@@ -108,20 +108,20 @@ export default function InvitationPage() {
108108

109109
if (error) {
110110
return (
111-
<div className="flex items-center justify-center bg-black text-white">
112-
<Card className="w-full max-w-md bg-gray-900 border border-red-500 shadow-xl">
111+
<div className="flex items-center justify-center">
112+
<Card className="w-full max-w-md border-destructive shadow-xl">
113113
<CardHeader>
114114
<div className="flex items-center gap-2">
115-
<XCircle className="h-5 w-5 text-red-400" />
116-
<CardTitle className="text-red-400">Invalid Invitation</CardTitle>
115+
<XCircle className="h-5 w-5 text-destructive" />
116+
<CardTitle className="text-destructive">Invalid Invitation</CardTitle>
117117
</div>
118-
<CardDescription className="text-gray-400">{error}</CardDescription>
118+
<CardDescription>{error}</CardDescription>
119119
</CardHeader>
120120
<CardContent>
121121
<Button
122122
onClick={() => router.push('/')}
123123
variant="outline"
124-
className="w-full border-gray-600 hover:bg-gray-700 text-white"
124+
className="w-full"
125125
>
126126
Go to Homepage
127127
</Button>
@@ -133,16 +133,16 @@ export default function InvitationPage() {
133133

134134
if (success) {
135135
return (
136-
<div className="flex items-center justify-center bg-black text-white">
137-
<Card className="w-full max-w-md bg-gray-900 border border-green-500 shadow-xl">
136+
<div className="flex items-center justify-center">
137+
<Card className="w-full max-w-md border-green-500 shadow-xl">
138138
<CardHeader>
139139
<div className="flex items-center gap-2">
140-
<CheckCircle className="h-5 w-5 text-green-400" />
141-
<CardTitle className="text-green-400">
140+
<CheckCircle className="h-5 w-5 text-green-500" />
141+
<CardTitle className="text-green-500">
142142
Welcome to {invitation?.organization_name}!
143143
</CardTitle>
144144
</div>
145-
<CardDescription className="text-gray-400">
145+
<CardDescription>
146146
You've successfully joined the organization. Redirecting...
147147
</CardDescription>
148148
</CardHeader>
@@ -158,30 +158,30 @@ export default function InvitationPage() {
158158
const isExpired = new Date(invitation.expires_at) < new Date()
159159

160160
return (
161-
<div className="flex items-center justify-center bg-black text-white relative overflow-hidden py-12">
162-
<Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl z-10">
161+
<div className="flex items-center justify-center py-12">
162+
<Card className="w-full max-w-md shadow-xl">
163163
<CardHeader>
164164
<div className="flex items-center gap-2">
165-
<Users className="h-5 w-5 text-blue-400" />
165+
<Users className="h-5 w-5 text-blue-500" />
166166
<CardTitle>Organization Invitation</CardTitle>
167167
</div>
168-
<CardDescription className="text-gray-400">
168+
<CardDescription>
169169
{invitation.inviter_name} has invited you to join{' '}
170170
{invitation.organization_name}
171171
</CardDescription>
172172
</CardHeader>
173173
<CardContent className="space-y-4">
174174
<div className="space-y-2">
175-
<div className="text-sm text-gray-300">
176-
<strong>Organization:</strong> {invitation.organization_name}
175+
<div className="text-sm text-muted-foreground">
176+
<strong className="text-foreground">Organization:</strong> {invitation.organization_name}
177177
</div>
178-
<div className="text-sm text-gray-300">
179-
<strong>Role:</strong> {invitation.role}
178+
<div className="text-sm text-muted-foreground">
179+
<strong className="text-foreground">Role:</strong> {invitation.role}
180180
</div>
181-
<div className="text-sm text-gray-300">
182-
<strong>Email:</strong> {invitation.email}
181+
<div className="text-sm text-muted-foreground">
182+
<strong className="text-foreground">Email:</strong> {invitation.email}
183183
</div>
184-
<div className="flex items-center gap-2 text-sm text-gray-300">
184+
<div className="flex items-center gap-2 text-sm text-muted-foreground">
185185
<Clock className="h-4 w-4" />
186186
<span>
187187
Expires: {new Date(invitation.expires_at).toLocaleDateString()}
@@ -191,22 +191,22 @@ export default function InvitationPage() {
191191

192192
{isExpired ? (
193193
<div className="text-center">
194-
<p className="text-red-400 mb-4">This invitation has expired.</p>
194+
<p className="text-destructive mb-4">This invitation has expired.</p>
195195
<Button
196196
onClick={() => router.push('/')}
197197
variant="outline"
198-
className="w-full border-gray-600 hover:bg-gray-700 text-white"
198+
className="w-full"
199199
>
200200
Go to Homepage
201201
</Button>
202202
</div>
203203
) : (
204204
<div className="space-y-3">
205205
{status === 'loading' ? (
206-
<Skeleton className="h-10 w-full bg-gray-700" />
206+
<Skeleton className="h-10 w-full" />
207207
) : !session ? (
208208
<div className="text-center">
209-
<p className="text-gray-400 mb-4">
209+
<p className="text-muted-foreground mb-4">
210210
Please sign in to accept this invitation.
211211
</p>
212212
<Button
@@ -215,21 +215,21 @@ export default function InvitationPage() {
215215
`/login?callbackUrl=${encodeURIComponent(window.location.href)}`,
216216
)
217217
}
218-
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
218+
className="w-full"
219219
>
220220
Sign In to Accept
221221
</Button>
222222
</div>
223223
) : session.user?.email !== invitation.email ? (
224224
<div className="text-left">
225-
<p className="text-red-400 mb-4">
225+
<p className="text-destructive mb-4">
226226
This invitation is for {invitation.email}, but you're signed
227227
in as {session.user?.email}.
228228
</p>
229229
<Button
230230
onClick={() => router.push('/login')}
231231
variant="outline"
232-
className="w-full border-gray-600 hover:bg-gray-700 text-white"
232+
className="w-full"
233233
>
234234
Sign in with correct account
235235
</Button>
@@ -238,7 +238,7 @@ export default function InvitationPage() {
238238
<Button
239239
onClick={acceptInvitation}
240240
disabled={accepting}
241-
className="w-full bg-green-600 hover:bg-green-700 text-white"
241+
className="w-full bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-700"
242242
>
243243
{accepting ? 'Accepting...' : 'Accept Invitation'}
244244
</Button>

‎web/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export default function RootLayout({
5959
<html lang={'en'} suppressHydrationWarning>
6060
<body
6161
className={cn(
62-
'flex flex-col min-h-screen font-sans bg-white text-black dark:bg-black dark:text-white',
62+
'flex flex-col min-h-screen font-sans bg-background text-foreground',
6363
fonts,
6464
)}
6565
>

‎web/src/app/orgs/[slug]/repositories/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ export default function RepositoriesPage() {
2323
<div className="container mx-auto py-6 px-4">
2424
<div className="max-w-6xl mx-auto">
2525
<div className="animate-pulse">
26-
<div className="h-8 bg-gray-200 rounded w-64 mb-6"></div>
26+
<div className="h-8 bg-muted rounded w-64 mb-6"></div>
2727
<div className="space-y-6">
28-
<div className="h-48 bg-gray-200 rounded"></div>
28+
<div className="h-48 bg-muted rounded"></div>
2929
</div>
3030
</div>
3131
</div>

‎web/src/app/orgs/[slug]/team/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ export default function TeamPage() {
2323
<div className="container mx-auto py-6 px-4">
2424
<div className="max-w-6xl mx-auto">
2525
<div className="animate-pulse">
26-
<div className="h-8 bg-gray-200 rounded w-64 mb-6"></div>
26+
<div className="h-8 bg-muted rounded w-64 mb-6"></div>
2727
<div className="space-y-6">
28-
<div className="h-48 bg-gray-200 rounded"></div>
29-
<div className="h-48 bg-gray-200 rounded"></div>
28+
<div className="h-48 bg-muted rounded"></div>
29+
<div className="h-48 bg-muted rounded"></div>
3030
</div>
3131
</div>
3232
</div>

‎web/src/app/orgs/new/page.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -121,8 +121,8 @@ const CreateOrganizationPage = () => {
121121
<div className="container mx-auto py-6 px-4">
122122
<div className="max-w-2xl mx-auto">
123123
<div className="animate-pulse">
124-
<div className="h-8 bg-gray-200 rounded w-1/3 mb-6"></div>
125-
<div className="h-96 bg-gray-200 rounded"></div>
124+
<div className="h-8 bg-muted rounded w-1/3 mb-6"></div>
125+
<div className="h-96 bg-muted rounded"></div>
126126
</div>
127127
</div>
128128
</div>

‎web/src/app/orgs/page.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ const OrganizationsPage = () => {
4949
<div className="container mx-auto py-6 px-4">
5050
<div className="max-w-4xl mx-auto">
5151
<div className="animate-pulse">
52-
<div className="h-8 bg-gray-200 rounded w-1/3 mb-6"></div>
52+
<div className="h-8 bg-muted rounded w-1/3 mb-6"></div>
5353
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
5454
{[1, 2, 3].map((i) => (
55-
<div key={i} className="h-48 bg-gray-200 rounded"></div>
55+
<div key={i} className="h-48 bg-muted rounded"></div>
5656
))}
5757
</div>
5858
</div>
@@ -110,13 +110,13 @@ const OrganizationsPage = () => {
110110
Array.from({ length: 3 }).map((_, i) => (
111111
<Card key={i} className="animate-pulse">
112112
<CardHeader className="px-4 py-3 sm:px-6 sm:py-4">
113-
<div className="h-5 sm:h-6 bg-gray-200 rounded w-3/4 mb-2"></div>
114-
<div className="h-3 sm:h-4 bg-gray-200 rounded w-1/2"></div>
113+
<div className="h-5 sm:h-6 bg-muted rounded w-3/4 mb-2"></div>
114+
<div className="h-3 sm:h-4 bg-muted rounded w-1/2"></div>
115115
</CardHeader>
116116
<CardContent className="px-4 pb-3 sm:px-6 sm:pb-4">
117117
<div className="space-y-2">
118-
<div className="h-3 sm:h-4 bg-gray-200 rounded w-full"></div>
119-
<div className="h-3 sm:h-4 bg-gray-200 rounded w-2/3"></div>
118+
<div className="h-3 sm:h-4 bg-muted rounded w-full"></div>
119+
<div className="h-3 sm:h-4 bg-muted rounded w-2/3"></div>
120120
</div>
121121
</CardContent>
122122
</Card>
@@ -159,9 +159,9 @@ const OrganizationsPage = () => {
159159
))
160160
) : (
161161
// Empty state with integrated features
162-
<Card className="border-dashed border-2 border-gray-300 hover:border-gray-400 transition-colors col-span-full">
162+
<Card className="border-dashed border-2 border-border hover:border-muted-foreground/40 transition-colors col-span-full">
163163
<CardContent className="flex flex-col items-center justify-center py-8 sm:py-12 px-4 sm:px-6">
164-
<Users className="h-8 w-8 sm:h-12 sm:w-12 text-gray-400 mb-4" />
164+
<Users className="h-8 w-8 sm:h-12 sm:w-12 text-muted-foreground mb-4" />
165165
<h3 className="text-base sm:text-lg font-semibold mb-2">
166166
No Organization Yet
167167
</h3>

0 commit comments

Comments
 (0)