Skip to content

Added Light and Dark Mode Feature #441

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
parikhvedant2003 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added Light and Dark Mode Feature #441

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
27f0a8d
Added Light and Dark Mode Feature
parikhvedant2003 Feb 23, 2026
2d72b02
Type Check Fixed
parikhvedant2003 Feb 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions sdk/e2e/utils/e2e-mocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -344,7 +344,7 @@ async function* promptAiSdkStreamMock(
await params.onCostCalculated(0)
}

return `mock-message-${Math.random().toString(36).slice(2, 10)}`
return promptSuccess(`mock-message-${Math.random().toString(36).slice(2, 10)}`)
}

async function promptAiSdkMock(
Expand Down Expand Up @@ -393,7 +393,7 @@ export function setupE2eMocks(): void {
async ({ fields }) =>
Object.fromEntries(
fields.map((field) => [field, MOCK_USER[field]]),
) as Awaited<ReturnType<typeof databaseModule.getUserInfoFromApiKey>>,
) as unknown as Awaited<ReturnType<typeof databaseModule.getUserInfoFromApiKey>>,
)
spyOn(databaseModule, 'fetchAgentFromDatabase').mockImplementation(
async ({ parsedAgentId }) => buildMockAgentTemplate(parsedAgentId),
Expand Down
8 changes: 4 additions & 4 deletions web/src/app/admin/traces/components/timeline-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ export function TimelineChart({
spawned_agent: 'bg-purple-500',
}

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

if (isSelected) {
return `${color} ring-2 ring-offset-2 ring-offset-background ring-blue-600`
Expand Down Expand Up @@ -306,14 +306,14 @@ export function TimelineChart({
{/* Connection line to parent */}
{event.parentId && depth > 0 && (
<div
className="absolute h-0.5 bg-gray-400 opacity-50"
className="absolute h-0.5 bg-border opacity-70"
style={{
left: `${left - 20}px`,
width: '20px',
top: '16px',
}}
>
<ArrowRight className="absolute -right-1 -top-2 h-4 w-4 text-gray-400" />
<ArrowRight className="absolute -right-1 -top-2 h-4 w-4 text-muted-foreground" />
</div>
)}
</div>
Expand Down Expand Up @@ -404,7 +404,7 @@ export function TimelineChart({
transform: 'translateY(-50%)',
}}
>
<div className="h-4 w-px bg-gray-300" />
<div className="h-4 w-px bg-border" />
<span className="text-xs text-muted-foreground ml-1">
{seconds}s
</span>
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/evals/evals-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,7 @@ export function EvalsTable({ results, isAdmin }: EvalsTableProps) {
}}
/>
<div className="absolute left-1 top-0 h-full flex items-center">
<span className="text-sm font-medium bg-black bg-opacity-10 px-1 rounded text-gray-900">
<span className="text-sm font-medium bg-foreground/10 px-1 rounded text-foreground">
{formatScore(result.avgScore)}
</span>
</div>
Expand Down
32 changes: 16 additions & 16 deletions web/src/app/home-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -146,10 +146,10 @@ export default function HomeClient() {
BENCHMARK RESULTS
</motion.div>
</div>
<h2 className="text-4xl md:text-5xl font-bold text-white">
<h2 className="text-4xl md:text-5xl font-bold text-foreground dark:text-white">
BuffBench Results
</h2>
<p className="text-xl text-white/70 max-w-2xl mx-auto">
<p className="text-xl max-w-2xl mx-auto text-muted-foreground dark:text-white/70">
State of the art coding agent evaluation using generated
workflows and judging from open source repositories
</p>
Expand All @@ -162,7 +162,7 @@ export default function HomeClient() {
transition={{ duration: 0.7, delay: 0.2 }}
className="relative"
>
<div className="bg-zinc-900/50 border-2 border-green-500/30 rounded-xl p-8 shadow-2xl shadow-green-500/10">
<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">
<Image
src="/codebuff-vs-claude-code.png"
alt="Codebuff vs Claude Code Performance Comparison"
Expand All @@ -180,15 +180,15 @@ export default function HomeClient() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.4 }}
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
>
<div className="text-3xl font-bold text-green-400 mb-2">
<div className="text-3xl font-bold text-green-500 mb-2">
175+
</div>
<div className="text-white font-semibold mb-1">
<div className="font-semibold mb-1 text-foreground dark:text-white">
Real Tasks
</div>
<div className="text-white/60 text-sm">
<div className="text-sm text-muted-foreground dark:text-white/60">
Git commit reconstruction from open source projects
</div>
</motion.div>
Expand All @@ -198,15 +198,15 @@ export default function HomeClient() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.6 }}
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
>
<div className="text-3xl font-bold text-green-400 mb-2">
<div className="text-3xl font-bold text-green-500 mb-2">
5
</div>
<div className="text-white font-semibold mb-1">
<div className="font-semibold mb-1 text-foreground dark:text-white">
Turn Conversations
</div>
<div className="text-white/60 text-sm">
<div className="text-sm text-muted-foreground dark:text-white/60">
Prompting agent simulates human for multiple turns
</div>
</motion.div>
Expand All @@ -216,15 +216,15 @@ export default function HomeClient() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 0.8 }}
className="bg-zinc-800/50 border border-zinc-700/50 rounded-lg p-6"
className="border rounded-lg p-6 bg-white border-border shadow-sm dark:bg-zinc-800/50 dark:border-zinc-700/50"
>
<div className="text-3xl font-bold text-green-400 mb-2">
<div className="text-3xl font-bold text-green-500 mb-2">
4D
</div>
<div className="text-white font-semibold mb-1">
<div className="font-semibold mb-1 text-foreground dark:text-white">
Scoring System
</div>
<div className="text-white/60 text-sm">
<div className="text-sm text-muted-foreground dark:text-white/60">
Completion, efficiency, code quality, and overall scores
</div>
</motion.div>
Expand All @@ -239,7 +239,7 @@ export default function HomeClient() {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.5, delay: 1.0 }}
className="inline-flex items-center gap-2 text-green-400 hover:text-green-300 transition-colors"
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"
>
<span>View evaluation methodology</span>
<span className="text-xs">↗</span>
Expand Down
70 changes: 35 additions & 35 deletions web/src/app/invites/[token]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,14 +92,14 @@ export default function InvitationPage() {

if (loading) {
return (
<div className="flex items-center justify-center bg-black text-white">
<Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl">
<div className="flex items-center justify-center">
<Card className="w-full max-w-md shadow-xl">
<CardHeader>
<Skeleton className="h-6 w-3/4 bg-gray-700" />
<Skeleton className="h-4 w-full bg-gray-700" />
<Skeleton className="h-6 w-3/4" />
<Skeleton className="h-4 w-full" />
</CardHeader>
<CardContent>
<Skeleton className="h-10 w-full bg-gray-700" />
<Skeleton className="h-10 w-full" />
</CardContent>
</Card>
</div>
Expand All @@ -108,20 +108,20 @@ export default function InvitationPage() {

if (error) {
return (
<div className="flex items-center justify-center bg-black text-white">
<Card className="w-full max-w-md bg-gray-900 border border-red-500 shadow-xl">
<div className="flex items-center justify-center">
<Card className="w-full max-w-md border-destructive shadow-xl">
<CardHeader>
<div className="flex items-center gap-2">
<XCircle className="h-5 w-5 text-red-400" />
<CardTitle className="text-red-400">Invalid Invitation</CardTitle>
<XCircle className="h-5 w-5 text-destructive" />
<CardTitle className="text-destructive">Invalid Invitation</CardTitle>
</div>
<CardDescription className="text-gray-400">{error}</CardDescription>
<CardDescription>{error}</CardDescription>
</CardHeader>
<CardContent>
<Button
onClick={() => router.push('/')}
variant="outline"
className="w-full border-gray-600 hover:bg-gray-700 text-white"
className="w-full"
>
Go to Homepage
</Button>
Expand All @@ -133,16 +133,16 @@ export default function InvitationPage() {

if (success) {
return (
<div className="flex items-center justify-center bg-black text-white">
<Card className="w-full max-w-md bg-gray-900 border border-green-500 shadow-xl">
<div className="flex items-center justify-center">
<Card className="w-full max-w-md border-green-500 shadow-xl">
<CardHeader>
<div className="flex items-center gap-2">
<CheckCircle className="h-5 w-5 text-green-400" />
<CardTitle className="text-green-400">
<CheckCircle className="h-5 w-5 text-green-500" />
<CardTitle className="text-green-500">
Welcome to {invitation?.organization_name}!
</CardTitle>
</div>
<CardDescription className="text-gray-400">
<CardDescription>
You've successfully joined the organization. Redirecting...
</CardDescription>
</CardHeader>
Expand All @@ -158,30 +158,30 @@ export default function InvitationPage() {
const isExpired = new Date(invitation.expires_at) < new Date()

return (
<div className="flex items-center justify-center bg-black text-white relative overflow-hidden py-12">
<Card className="w-full max-w-md bg-gray-900 border border-gray-700 shadow-xl z-10">
<div className="flex items-center justify-center py-12">
<Card className="w-full max-w-md shadow-xl">
<CardHeader>
<div className="flex items-center gap-2">
<Users className="h-5 w-5 text-blue-400" />
<Users className="h-5 w-5 text-blue-500" />
<CardTitle>Organization Invitation</CardTitle>
</div>
<CardDescription className="text-gray-400">
<CardDescription>
{invitation.inviter_name} has invited you to join{' '}
{invitation.organization_name}
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<div className="text-sm text-gray-300">
<strong>Organization:</strong> {invitation.organization_name}
<div className="text-sm text-muted-foreground">
<strong className="text-foreground">Organization:</strong> {invitation.organization_name}
</div>
<div className="text-sm text-gray-300">
<strong>Role:</strong> {invitation.role}
<div className="text-sm text-muted-foreground">
<strong className="text-foreground">Role:</strong> {invitation.role}
</div>
<div className="text-sm text-gray-300">
<strong>Email:</strong> {invitation.email}
<div className="text-sm text-muted-foreground">
<strong className="text-foreground">Email:</strong> {invitation.email}
</div>
<div className="flex items-center gap-2 text-sm text-gray-300">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Clock className="h-4 w-4" />
<span>
Expires: {new Date(invitation.expires_at).toLocaleDateString()}
Expand All @@ -191,22 +191,22 @@ export default function InvitationPage() {

{isExpired ? (
<div className="text-center">
<p className="text-red-400 mb-4">This invitation has expired.</p>
<p className="text-destructive mb-4">This invitation has expired.</p>
<Button
onClick={() => router.push('/')}
variant="outline"
className="w-full border-gray-600 hover:bg-gray-700 text-white"
className="w-full"
>
Go to Homepage
</Button>
</div>
) : (
<div className="space-y-3">
{status === 'loading' ? (
<Skeleton className="h-10 w-full bg-gray-700" />
<Skeleton className="h-10 w-full" />
) : !session ? (
<div className="text-center">
<p className="text-gray-400 mb-4">
<p className="text-muted-foreground mb-4">
Please sign in to accept this invitation.
</p>
<Button
Expand All @@ -215,21 +215,21 @@ export default function InvitationPage() {
`/login?callbackUrl=${encodeURIComponent(window.location.href)}`,
)
}
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
className="w-full"
>
Sign In to Accept
</Button>
</div>
) : session.user?.email !== invitation.email ? (
<div className="text-left">
<p className="text-red-400 mb-4">
<p className="text-destructive mb-4">
This invitation is for {invitation.email}, but you're signed
in as {session.user?.email}.
</p>
<Button
onClick={() => router.push('/login')}
variant="outline"
className="w-full border-gray-600 hover:bg-gray-700 text-white"
className="w-full"
>
Sign in with correct account
</Button>
Expand All @@ -238,7 +238,7 @@ export default function InvitationPage() {
<Button
onClick={acceptInvitation}
disabled={accepting}
className="w-full bg-green-600 hover:bg-green-700 text-white"
className="w-full bg-green-600 hover:bg-green-700 text-white dark:bg-green-600 dark:hover:bg-green-700"
>
{accepting ? 'Accepting...' : 'Accept Invitation'}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion web/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function RootLayout({
<html lang={'en'} suppressHydrationWarning>
<body
className={cn(
'flex flex-col min-h-screen font-sans bg-white text-black dark:bg-black dark:text-white',
'flex flex-col min-h-screen font-sans bg-background text-foreground',
fonts,
)}
>
Expand Down
4 changes: 2 additions & 2 deletions web/src/app/orgs/[slug]/repositories/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,9 @@ export default function RepositoriesPage() {
<div className="container mx-auto py-6 px-4">
<div className="max-w-6xl mx-auto">
<div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-64 mb-6"></div>
<div className="h-8 bg-muted rounded w-64 mb-6"></div>
<div className="space-y-6">
<div className="h-48 bg-gray-200 rounded"></div>
<div className="h-48 bg-muted rounded"></div>
</div>
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions web/src/app/orgs/[slug]/team/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export default function TeamPage() {
<div className="container mx-auto py-6 px-4">
<div className="max-w-6xl mx-auto">
<div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-64 mb-6"></div>
<div className="h-8 bg-muted rounded w-64 mb-6"></div>
<div className="space-y-6">
<div className="h-48 bg-gray-200 rounded"></div>
<div className="h-48 bg-gray-200 rounded"></div>
<div className="h-48 bg-muted rounded"></div>
<div className="h-48 bg-muted rounded"></div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions web/src/app/orgs/new/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,8 +121,8 @@ const CreateOrganizationPage = () => {
<div className="container mx-auto py-6 px-4">
<div className="max-w-2xl mx-auto">
<div className="animate-pulse">
<div className="h-8 bg-gray-200 rounded w-1/3 mb-6"></div>
<div className="h-96 bg-gray-200 rounded"></div>
<div className="h-8 bg-muted rounded w-1/3 mb-6"></div>
<div className="h-96 bg-muted rounded"></div>
</div>
</div>
</div>
Expand Down
Loading
Loading