Skip to content

Implement Dark mode #10

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implement Dark mode #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 5 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,8 @@ certificates
post_migrator.py

# Server
firecrawl-responses-api/.env
server/node_modules
firecrawl-responses-api/.env

# clerk configuration (can include secrets)
/.clerk/
22 changes: 15 additions & 7 deletions app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { ConvexReactClient } from "convex/react";
import ColorStyles from "@/components/shared/color-styles/color-styles";
import Scrollbar from "@/components/ui/scrollbar";
import { BigIntProvider } from "@/components/providers/BigIntProvider";
import { getThemeBlockingScript } from "@/lib/theme";

import "styles/main.css";

const convex = new ConvexReactClient(process.env.NEXT_PUBLIC_CONVEX_URL!);
Expand All @@ -30,21 +32,27 @@ export default function RootLayout({
return (
<ClerkProvider>
<ConvexProviderWithClerk client={convex} useAuth={useAuth}>
<html lang="en">
<html lang="en" suppressHydrationWarning>
<head>
{/* Block rendering until theme is loaded to prevent flash */}
<script
dangerouslySetInnerHTML={{
__html: getThemeBlockingScript(),
}}
/>
<title>Open Agent Builder</title>
<meta name="description" content="Build AI agents and workflows with visual programming" />
<link rel="icon" href="/favicon.png" />
<ColorStyles />
</head>
<body
className={`${GeistMono.variable} ${robotoMono.variable} font-sans text-accent-black bg-background-base overflow-x-clip`}
className={`${GeistMono.variable} ${robotoMono.variable} font-sans text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-900 overflow-x-clip`}
>
<BigIntProvider>
<main className="overflow-x-clip">{children}</main>
<Scrollbar />
<Toaster position="bottom-right" />
</BigIntProvider>
<BigIntProvider>
<main className="overflow-x-clip">{children}</main>
<Scrollbar />
<Toaster position="bottom-right" />
</BigIntProvider>
</body>
</html>
</ConvexProviderWithClerk>
Expand Down
24 changes: 15 additions & 9 deletions app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import { useRouter, useSearchParams } from "next/navigation";
import { motion, AnimatePresence } from "framer-motion";
import { SignedIn, SignedOut, SignInButton, UserButton } from '@clerk/nextjs';



// Import shared components
import Button from "@/components/shared/button/Button";
import { Connector } from "@/components/shared/layout/curvy-rect";
Expand All @@ -29,6 +31,7 @@ import WorkflowBuilder from "@/components/app/(home)/sections/workflow-builder/W
// Import header components
import HeaderBrandKit from "@/components/shared/header/BrandKit/BrandKit";
import HeaderWrapper from "@/components/shared/header/Wrapper/Wrapper";
import { ThemeToggle } from "@/components/ui/theme-toggle";
import HeaderDropdownWrapper from "@/components/shared/header/Dropdown/Wrapper/Wrapper";
import GithubIcon from "@/components/shared/header/Github/_svg/GithubIcon";
import ButtonUI from "@/components/ui/shadcn/button";
Expand Down Expand Up @@ -98,15 +101,15 @@ function StyleGuidePageContent() {
/>
</SignedIn>
) : (
<div className="min-h-screen bg-background-base">
<div className="min-h-screen bg-background">
{/* Header/Navigation Section */}
<HeaderDropdownWrapper />

<div className="sticky top-0 left-0 w-full z-[101] bg-background-base header">
<div className="absolute top-0 cmw-container border-x border-border-faint h-full pointer-events-none" />
<div className="h-1 bg-border-faint w-full left-0 -bottom-1 absolute" />
<div className="sticky top-0 left-0 w-full z-[101] bg-background header">
<div className="absolute top-0 cmw-container border-x border-gray-200 dark:border-[#2a2a2a] h-full pointer-events-none" />

<div className="h-1 bg-gray-200 dark:bg-[#2a2a2a] w-full left-0 -bottom-1 absolute" />

<div className="cmw-container absolute h-full pointer-events-none top-0">
<Connector className="absolute -left-[10.5px] -bottom-11" />
<Connector className="absolute -right-[10.5px] -bottom-11" />
Expand Down Expand Up @@ -150,6 +153,9 @@ function StyleGuidePageContent() {
afterSignOutUrl="/"
/>
</SignedIn>

{/* Theme Toggle */}
<ThemeToggle size="xl" />
</div>
</div>
</HeaderWrapper>
Expand Down Expand Up @@ -189,7 +195,7 @@ function StyleGuidePageContent() {
</p>
</motion.div>
) : (
<SignedIn>
<SignedIn>
<motion.div
key="step2"
initial={{ opacity: 0 }}
Expand All @@ -214,8 +220,8 @@ function StyleGuidePageContent() {
}}
/>
</motion.div>
</SignedIn>
)}
</SignedIn>
)}
</AnimatePresence>
</div>

Expand Down
34 changes: 17 additions & 17 deletions components/app/(home)/sections/hero/Background/Background.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import CenterStar from "./_svg/CenterStar";
export default function HomeHeroBackground() {
return (
<div className="overlay contain-layout pointer-events-none lg-max:hidden">
<div className="top-100 h-[calc(100%-99px)] border-border-faint border-y w-full left-0 absolute" />
<div className="top-100 h-[calc(100%-99px)] border-gray-200 dark:border-[#2a2a2a] border-y w-full left-0 absolute" />

<div className="cw-[1314px] z-[105] absolute top-0 border-x border-border-faint h-full">
<div className="text-mono-x-small font-mono text-black-alpha-12 select-none">
<div className="cw-[1314px] z-[105] absolute top-0 border-x border-gray-200 dark:border-[#2a2a2a] h-full">
<div className="text-mono-x-small font-mono text-black-alpha-12 dark:text-gray-800 select-none">
<div className="absolute top-111 -left-1 w-102 text-center">
{" "}
[ 200 OK ]{" "}
Expand All @@ -32,13 +32,13 @@ export default function HomeHeroBackground() {
</div>
</div>

<div className="top-302 h-1 left-0 bg-border-faint w-303 absolute" />
<div className="top-403 h-1 left-0 bg-border-faint w-303 absolute" />
<div className="top-504 h-1 left-100 bg-border-faint w-203 absolute" />
<div className="top-302 h-1 left-0 bg-gray-200 dark:bg-[#2a2a2a] w-303 absolute" />
<div className="top-403 h-1 left-0 bg-gray-200 dark:bg-[#2a2a2a] w-303 absolute" />
<div className="top-504 h-1 left-100 bg-gray-200 dark:bg-[#2a2a2a] w-203 absolute" />

<div className="top-302 h-1 right-0 bg-border-faint w-303 absolute" />
<div className="top-403 h-1 right-0 bg-border-faint w-303 absolute" />
<div className="top-504 h-1 right-100 bg-border-faint w-203 absolute" />
<div className="top-302 h-1 right-0 bg-gray-200 dark:bg-[#2a2a2a] w-303 absolute" />
<div className="top-403 h-1 right-0 bg-gray-200 dark:bg-[#2a2a2a] w-303 absolute" />
<div className="top-504 h-1 right-100 bg-gray-200 dark:bg-[#2a2a2a] w-203 absolute" />

{Array.from({ length: 2 }, (_, i) => (
<Fragment key={i}>
Expand Down Expand Up @@ -68,22 +68,22 @@ export default function HomeHeroBackground() {
))}
</div>

<div className="cw-[910px] absolute top-100 border-x border-border-faint h-[calc(100%-99px)]" />
<div className="cw-[708px] absolute top-100 border-x border-border-faint h-[calc(100%-99px)]">
<CenterStar className="absolute top-77 -right-24 z-[1]" />
<CenterStar className="absolute top-77 -left-24 z-[1]" />
<div className="cw-[910px] absolute top-100 border-x border-gray-200 dark:border-[#2a2a2a] h-[calc(100%-99px)]" />
<div className="cw-[708px] absolute top-100 border-x border-gray-200 dark:border-[#2a2a2a] h-[calc(100%-99px)]">
<CenterStar className="absolute top-77 -right-24 z-[1] dark:opacity-10" />
<CenterStar className="absolute top-77 -left-24 z-[1] dark:opacity-10" />
</div>

<CurvyRect
className="cw-[708px] absolute top-100 h-[calc(100%-99px)]"
bottom
/>

<div className="cw-[506px] absolute top-100 border-x border-border-faint h-102" />
<div className="cw-[304px] absolute top-100 border-x border-border-faint h-102" />
<div className="cw-[102px] absolute top-100 border-x border-border-faint h-102" />
<div className="cw-[506px] absolute top-100 border-x border-gray-200 dark:border-[#2a2a2a] h-102" />
<div className="cw-[304px] absolute top-100 border-x border-gray-200 dark:border-[#2a2a2a] h-102" />
<div className="cw-[102px] absolute top-100 border-x border-gray-200 dark:border-[#2a2a2a] h-102" />

<div className="top-201 h-1 bg-border-faint cw-[1112px] absolute" />
<div className="top-201 h-1 bg-gray-200 dark:bg-[#2a2a2a] cw-[1112px] absolute" />

<div className="cw-[1112px] absolute top-0 h-full">
<CurvyRect className="w-full absolute top-full h-100 left-0" top />
Expand Down
26 changes: 14 additions & 12 deletions components/app/(home)/sections/hero/Pixi/Pixi.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,17 @@ import features from "./tickers/features";

function PixiContent() {
return (
<Pixi
canvasAttrs={{
className: "cw-[1314px] h-506 absolute top-100 lg-max:hidden",
}}
fps={Infinity}
initOptions={{ backgroundAlpha: 0 }}
smartStop={false}
tickers={[features]}
/>
<div className="dark:opacity-15">
<Pixi
canvasAttrs={{
className: "cw-[1314px] h-506 absolute top-100 lg-max:hidden",
}}
fps={Infinity}
initOptions={{ backgroundAlpha: 0 }}
smartStop={false}
tickers={[features]}
/>
</div>
);
}

Expand All @@ -35,11 +37,11 @@ export default function HomeHeroPixi() {

if (hasError) {
// Return empty div as fallback if Pixi fails to load
return <div className="cw-[1314px] h-506 absolute top-100 lg-max:hidden" />;
return <div className="cw-[1314px] h-506 absolute top-100 lg-max:hidden dark:opacity-15" />;
}

return (
<Suspense fallback={<div className="cw-[1314px] h-506 absolute top-100 lg-max:hidden" />}>
<Suspense fallback={<div className="cw-[1314px] h-506 absolute top-100 lg-max:hidden dark:opacity-15" />}>
<PixiContent />
</Suspense>
);
Expand Down
5 changes: 4 additions & 1 deletion components/app/(home)/sections/hero/Pixi/tickers/features/cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ type Props = Parameters<Ticker>[0] & {

export const CELL_SIZE = 80;

export const MAIN_COLOR = 0xe6e6e6;
// Theme-aware color for decorative elements
export const MAIN_COLOR = typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
? 0x1a1a1a // Very dim in dark mode
: 0xe6e6e6; // Light in light mode

const animations = [scrape, mapping, search, crawl];

Expand Down
36 changes: 18 additions & 18 deletions components/app/(home)/sections/step2/Step2Placeholder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,8 +55,8 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
transition={{ duration: 0.5 }}
className="text-center mb-24"
>
<h2 className="text-title-h2 text-accent-black mb-8">Get Started</h2>
<p className="text-body-large text-black-alpha-48">
<h2 className="text-title-h2 text-foreground mb-8">Get Started</h2>
<p className="text-body-large text-muted-foreground">
Create a new workflow, use a template, or continue where you left off
</p>
</motion.div>
Expand All @@ -68,7 +68,7 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
className={`px-20 py-10 rounded-8 text-body-medium transition-all ${
activeTab === "workflows"
? "bg-heat-100 text-white"
: "bg-background-base text-accent-black hover:bg-black-alpha-4 border border-border-faint"
: "bg-card text-foreground hover:bg-muted border border-gray-200 dark:border-gray-900"
}`}
>
Your Workflows ({workflows.length})
Expand All @@ -78,7 +78,7 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
className={`px-20 py-10 rounded-8 text-body-medium transition-all ${
activeTab === "templates"
? "bg-heat-100 text-white"
: "bg-background-base text-accent-black hover:bg-black-alpha-4 border border-border-faint"
: "bg-card text-foreground hover:bg-muted border border-gray-200 dark:border-gray-900"
}`}
>
Templates ({templates.length})
Expand All @@ -99,14 +99,14 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
className="relative cursor-pointer"
onClick={onCreateWorkflow}
>
<div className="bg-accent-white rounded-12 p-24 border-2 border-dashed border-border-light hover:border-heat-100 transition-all h-full flex items-center justify-center min-h-[160px]">
<div className="bg-card rounded-12 p-24 border-2 border-dashed border-gray-300 dark:border-gray-800 hover:border-heat-100 transition-all h-full flex items-center justify-center min-h-[160px]">
<div className="text-center">
<div className="w-48 h-48 rounded-full bg-heat-4 flex items-center justify-center mx-auto mb-12">
<svg className="w-24 h-24 text-heat-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
</div>
<h3 className="text-label-large text-accent-black font-medium">Create Workflow</h3>
<h3 className="text-label-large text-foreground font-medium">Create Workflow</h3>
</div>
</div>
</motion.div>
Expand All @@ -127,21 +127,21 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
className="relative cursor-pointer"
onClick={() => onLoadWorkflow?.(workflow.id)}
>
<div className="bg-accent-white rounded-12 p-24 border border-border-faint hover:border-heat-100 hover:shadow-sm transition-all h-full min-h-[160px] group">
<div className="absolute inset-0 rounded-12 bg-gradient-to-br from-heat-4 to-transparent opacity-0 group-hover:opacity-10 transition-opacity" />
<div className="bg-card rounded-12 p-24 border border-border-faint dark:border-black-alpha-12 hover:border-heat-100 hover:shadow-sm transition-all h-full min-h-[160px] group">
<div className="absolute inset-0 rounded-12 bg-gradient-to-br from-heat-4 to-transparent opacity-0 group-hover:opacity-5 transition-opacity" />
<div className="relative">
<h3 className="text-label-large text-accent-black font-medium mb-8">{workflow.title}</h3>
<h3 className="text-label-large text-foreground font-medium mb-8">{workflow.title}</h3>
{workflow.description && (
<p className="text-body-small text-black-alpha-48 mb-12 line-clamp-2">{workflow.description}</p>
<p className="text-body-small text-muted-foreground mb-12 line-clamp-2">{workflow.description}</p>
)}
<p className="text-body-small text-black-alpha-32">Updated {workflow.createdAt}</p>
<p className="text-body-small text-muted-foreground opacity-80">Updated {workflow.createdAt}</p>
</div>
</div>
</motion.div>
))
) : (
<div className="col-span-1 lg:col-span-3 flex items-center justify-center min-h-[160px]">
<p className="text-body-medium text-black-alpha-48">No saved workflows yet</p>
<p className="text-body-medium text-black-alpha-48 dark:text-gray-400">No saved workflows yet</p>
</div>
)
) : (
Expand All @@ -158,11 +158,11 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
className="relative cursor-pointer"
onClick={() => onLoadTemplate?.(template.id)}
>
<div className="bg-accent-white rounded-12 p-24 border border-border-faint hover:border-gray-700 hover:shadow-md transition-all h-full min-h-[160px] relative overflow-hidden group">
<div className="bg-card rounded-12 p-24 border border-border-faint dark:border-black-alpha-12 hover:border-heat-100 hover:shadow-md transition-all h-full min-h-[160px] relative overflow-hidden group">
<div className="relative">
<h3 className="text-label-large text-accent-black font-medium mb-8">{template.name}</h3>
<p className="text-body-small text-black-alpha-48">{template.description}</p>
<div className="mt-12 inline-flex items-center gap-6 text-body-small text-accent-black group-hover:text-gray-700">
<h3 className="text-label-large text-foreground font-medium mb-8">{template.name}</h3>
<p className="text-body-small text-muted-foreground">{template.description}</p>
<div className="mt-12 inline-flex items-center gap-6 text-body-small text-foreground group-hover:text-foreground">
<span>Use template</span>
<svg className="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
Expand All @@ -184,11 +184,11 @@ export default function Step2Placeholder({ onReset, onCreateWorkflow, onLoadWork
>
<button
onClick={onReset}
className="px-24 py-12 text-label-large text-black-alpha-48 hover:text-accent-black transition-colors"
className="px-24 py-12 text-label-large text-muted-foreground hover:text-foreground transition-colors"
>
Back
</button>
</motion.div>
</div>
);
}
}
6 changes: 3 additions & 3 deletions components/app/(home)/sections/workflow-builder/ConfirmDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export default function ConfirmDialog({
exit={{ scale: 0.95, opacity: 0 }}
transition={{ duration: 0.2 }}
onClick={(e) => e.stopPropagation()}
className="bg-accent-white rounded-16 shadow-2xl max-w-400 w-full"
className="bg-card rounded-16 shadow-2xl max-w-400 w-full"
>
{/* Content */}
<div className="p-24">
Expand All @@ -83,14 +83,14 @@ export default function ConfirmDialog({
</svg>
</div>

<h2 className="text-title-h5 text-accent-black mb-8">{title}</h2>
<h2 className="text-title-h5 text-foreground mb-8">{title}</h2>
<p className="text-body-small text-black-alpha-48 mb-24">{description}</p>

{/* Actions */}
<div className="flex gap-12">
<button
onClick={onCancel}
className="flex-1 px-16 py-10 bg-background-base hover:bg-black-alpha-4 border border-border-faint rounded-8 text-body-medium text-accent-black transition-colors"
className="flex-1 px-16 py-10 bg-background-base dark:bg-[#1c1d24] hover:bg-black-alpha-4 border border-border-faint rounded-8 text-body-medium text-foreground transition-colors"
>
{cancelText}
</button>
Expand Down
Loading