mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): apply Justine ink & parchment design system

Browse Source 
- Map Justine tokens to shadcn CSS variables (--vibn-* aliases)
- Switch fonts to Inter + Lora via next/font (IBM Plex Mono for code)
- Base typography: body Inter, h1–h3 Lora; marketing hero + wordmark serif
- Project shell and global chrome use semantic colors
- Replace Outfit/Newsreader references across TSX inline styles

Made-with: Cursor
This commit is contained in:
Mark Henderson
2026-04-01 21:03:40 -07:00
parent 06238f958a
commit bada63452f
33 changed files with 300 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
components/AtlasChat.tsx
View File

@@ -140,7 +140,7 @@ function MessageRow({
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "0.68rem", fontWeight: 700,
color: isAtlas ? "#fff" : "#8a8478",
fontFamily: isAtlas ? "Newsreader, serif" : "Outfit, sans-serif",
fontFamily: isAtlas ? "var(--font-lora), ui-serif, serif" : "var(--font-inter), ui-sans-serif, sans-serif",
}}>
{isAtlas ? "A" : userInitial}
</div>
@@ -149,14 +149,14 @@ function MessageRow({
<div style={{
fontSize: "0.68rem", fontWeight: 600, color: "#a09a90",
marginBottom: 5, textTransform: "uppercase", letterSpacing: "0.04em",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
{isAtlas ? "Vibn" : "You"}
</div>
{/* Content */}
<div style={{
fontSize: "0.88rem", color: "#2a2824", lineHeight: 1.72,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
whiteSpace: isAtlas ? "normal" : "pre-wrap",
}}>
{renderContent(clean)}
@@ -175,7 +175,7 @@ function MessageRow({
color: saved ? "#2e7d32" : "#fff",
border: saved ? "1px solid #a5d6a7" : "none",
fontSize: "0.78rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: saved || saving ? "default" : "pointer",
transition: "all 0.15s",
opacity: saving ? 0.7 : 1,
@@ -186,7 +186,7 @@ function MessageRow({
{!saved && (
<div style={{
marginTop: 6, fontSize: "0.72rem", color: "#a09a90",
fontFamily: "Outfit, sans-serif", lineHeight: 1.4,
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", lineHeight: 1.4,
}}>
{phase.summary}
</div>
@@ -218,7 +218,7 @@ function MessageRow({
display: "inline-block", padding: "8px 16px", borderRadius: 7,
background: "#1a1a1a", color: "#fff",
fontSize: "0.76rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif", textDecoration: "none",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", textDecoration: "none",
}}
>
Review architecture →
@@ -234,7 +234,7 @@ function MessageRow({
style={{
padding: "7px 14px", borderRadius: 6, border: "1px solid #e0dcd4",
background: "none", fontSize: "0.74rem", color: "#6b6560",
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
>
Try again
@@ -256,7 +256,7 @@ function MessageRow({
padding: "9px 18px", borderRadius: 8, border: "none",
background: archState === "loading" ? "#8a8478" : "#1a1a1a",
color: "#fff", fontSize: "0.78rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: archState === "loading" ? "default" : "pointer",
transition: "background 0.15s",
}}
@@ -288,7 +288,7 @@ function TypingIndicator() {
<div style={{
width: 28, height: 28, borderRadius: 7, flexShrink: 0, marginTop: 2,
background: "#1a1a1a", display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "0.68rem", fontWeight: 700, color: "#fff", fontFamily: "Newsreader, serif",
fontSize: "0.68rem", fontWeight: 700, color: "#fff", fontFamily: "var(--font-lora), ui-serif, serif",
}}>A</div>
<div style={{ display: "flex", gap: 5, paddingTop: 10 }}>
{[0, 1, 2].map(d => (
@@ -425,7 +425,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
return (
<div style={{
display: "flex", flexDirection: "column", height: "100%",
background: "#f6f4f0", fontFamily: "Outfit, sans-serif",
background: "#f6f4f0", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
<style>{`
@keyframes blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
@@ -443,7 +443,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
<div style={{
width: 44, height: 44, borderRadius: 11, background: "#1a1a1a",
display: "flex", alignItems: "center", justifyContent: "center",
fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 500, color: "#fff",
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 500, color: "#fff",
animation: "breathe 2.5s ease infinite",
}}>A</div>
<style>{`@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }`}</style>
@@ -466,7 +466,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
style={{
position: "absolute", top: 12, right: 16,
background: "none", border: "none", cursor: "pointer",
fontSize: "0.68rem", color: "#d0ccc4", fontFamily: "Outfit, sans-serif",
fontSize: "0.68rem", color: "#d0ccc4", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
padding: "3px 7px", borderRadius: 4, transition: "color 0.12s",
}}
onMouseEnter={e => (e.currentTarget.style.color = "#8a8478")}
@@ -504,7 +504,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
padding: "5px 12px", borderRadius: 20,
border: "1px solid #e0dcd4",
background: "#fff", color: "#6b6560",
fontSize: "0.73rem", fontFamily: "Outfit, sans-serif",
fontSize: "0.73rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: "pointer", transition: "all 0.1s",
whiteSpace: "nowrap",
}}
@@ -541,7 +541,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
disabled={isStreaming}
style={{
flex: 1, border: "none", background: "none",
fontSize: "0.86rem", fontFamily: "Outfit, sans-serif",
fontSize: "0.86rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
color: "#1a1a1a", padding: "8px 0",
resize: "none", outline: "none",
minHeight: 24, maxHeight: 120,
@@ -553,7 +553,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
style={{
padding: "9px 16px", borderRadius: 7, border: "none",
background: "#eae6de", color: "#8a8478",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: "pointer", flexShrink: 0,
display: "flex", alignItems: "center", gap: 6,
}}
@@ -569,7 +569,7 @@ export function AtlasChat({ projectId }: AtlasChatProps) {
padding: "9px 16px", borderRadius: 7, border: "none",
background: input.trim() ? "#1a1a1a" : "#eae6de",
color: input.trim() ? "#fff" : "#b5b0a6",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.78rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: input.trim() ? "pointer" : "default",
flexShrink: 0, transition: "all 0.15s",
}}

10
components/layout/coo-chat.tsx
View File

@@ -162,7 +162,7 @@ export function CooChat({ projectId }: { projectId: string }) {
margin: "8px 0 4px", opacity: 0.5,
}}>
<div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
<span style={{ fontSize: "0.58rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", whiteSpace: "nowrap" }}>
<span style={{ fontSize: "0.58rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", whiteSpace: "nowrap" }}>
Discovery · COO
</span>
<div style={{ flex: 1, height: 1, background: "#e8e4dc" }} />
@@ -183,7 +183,7 @@ export function CooChat({ projectId }: { projectId: string }) {
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: isAtlas ? "0.48rem" : "0.48rem",
color: "#fff", flexShrink: 0,
fontFamily: isAtlas ? "Newsreader, serif" : "inherit",
fontFamily: isAtlas ? "var(--font-lora), ui-serif, serif" : "inherit",
fontWeight: isAtlas ? 700 : 400,
}}>
{isAtlas ? "A" : "◈"}
@@ -197,7 +197,7 @@ export function CooChat({ projectId }: { projectId: string }) {
borderRadius: isUser ? 10 : 0,
fontSize: isAtlas ? "0.75rem" : "0.79rem",
color: isAtlas ? "#4a4540" : "#1a1a1a",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
lineHeight: 1.6,
whiteSpace: "pre-wrap",
wordBreak: "break-word",
@@ -248,7 +248,7 @@ export function CooChat({ projectId }: { projectId: string }) {
flex: 1, resize: "none",
border: "1px solid #e8e4dc", borderRadius: 10,
padding: "8px 10px", fontSize: "0.79rem",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
color: "#1a1a1a", outline: "none",
background: "#faf8f5", lineHeight: 1.5,
}}
@@ -267,7 +267,7 @@ export function CooChat({ projectId }: { projectId: string }) {
}}
>↑</button>
</div>
<div style={{ fontSize: "0.6rem", color: "#c5c0b8", marginTop: 5, fontFamily: "Outfit, sans-serif" }}>
<div style={{ fontSize: "0.6rem", color: "#c5c0b8", marginTop: 5, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
↵ send · Shift+↵ newline
</div>
</div>

20
components/layout/project-shell.tsx
View File

@@ -59,15 +59,15 @@ function ProjectShellInner({
<div style={{
display: "flex", flexDirection: "column",
height: "100dvh", overflow: "hidden",
fontFamily: "Outfit, sans-serif",
background: "#f6f4f0",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
background: "var(--background)",
}}>
{/* ── Top bar ── */}
<header style={{
height: 48, flexShrink: 0,
display: "flex", alignItems: "stretch",
background: "#fff", borderBottom: "1px solid #e8e4dc",
background: "var(--card)", borderBottom: "1px solid var(--border)",
zIndex: 10,
}}>
@@ -75,7 +75,7 @@ function ProjectShellInner({
<div style={{
display: "flex", alignItems: "center",
padding: "0 16px", gap: 9, flexShrink: 0,
borderRight: "1px solid #e8e4dc",
borderRight: "1px solid var(--border)",
}}>
<Link
href={`/${workspace}/projects`}
@@ -86,7 +86,7 @@ function ProjectShellInner({
</div>
</Link>
<span style={{
fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a",
fontSize: "0.82rem", fontWeight: 600, color: "var(--foreground)",
maxWidth: 160, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
}}>
{projectName}
@@ -105,13 +105,13 @@ function ProjectShellInner({
padding: "5px 12px", borderRadius: 8,
fontSize: "0.8rem",
fontWeight: isActive ? 600 : 440,
color: isActive ? "#1a1a1a" : "#8a8478",
background: isActive ? "#f0ece4" : "transparent",
color: isActive ? "var(--foreground)" : "var(--muted-foreground)",
background: isActive ? "var(--secondary)" : "transparent",
textDecoration: "none",
transition: "background 0.1s, color 0.1s",
whiteSpace: "nowrap",
}}
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "var(--muted)"; }}
onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
>
{s.label}
@@ -128,9 +128,9 @@ function ProjectShellInner({
title={`${session?.user?.name ?? session?.user?.email ?? "Account"} — Sign out`}
style={{
width: 28, height: 28, borderRadius: "50%",
background: "#f0ece4", border: "none", cursor: "pointer",
background: "var(--secondary)", border: "none", cursor: "pointer",
display: "flex", alignItems: "center", justifyContent: "center",
fontSize: "0.65rem", fontWeight: 700, color: "#6b6560", flexShrink: 0,
fontSize: "0.65rem", fontWeight: 700, color: "var(--muted-foreground)", flexShrink: 0,
}}
>
{userInitial}

6
components/layout/vibn-sidebar.tsx
View File

@@ -103,7 +103,7 @@ export function VIBNSidebar({ workspace, tabs, activeTab }: VIBNSidebarProps) {
width: w, height: "100vh",
background: "#fff", borderRight: "1px solid #e8e4dc",
display: "flex", flexDirection: "column",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
flexShrink: 0, overflow: "hidden",
transition, position: "relative",
}}>
@@ -136,7 +136,7 @@ export function VIBNSidebar({ workspace, tabs, activeTab }: VIBNSidebarProps) {
<div style={{ width: 26, height: 26, borderRadius: 7, overflow: "hidden", flexShrink: 0 }}>
<img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
</div>
<span style={{ fontSize: "0.92rem", fontWeight: 600, color: "#1a1a1a", letterSpacing: "-0.03em", fontFamily: "Newsreader, serif", whiteSpace: "nowrap" }}>
<span style={{ fontSize: "0.92rem", fontWeight: 600, color: "#1a1a1a", letterSpacing: "-0.03em", fontFamily: "var(--font-lora), ui-serif, serif", whiteSpace: "nowrap" }}>
vibn
</span>
</Link>
@@ -334,7 +334,7 @@ export function VIBNSidebar({ workspace, tabs, activeTab }: VIBNSidebarProps) {
<button onClick={() => signOut({ callbackUrl: "/auth" })} style={{
background: "none", border: "none", padding: 0,
fontSize: "0.62rem", color: "#a09a90", cursor: "pointer",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
}}>
Sign out
</button>

2
components/project-creation/ChatImportSetup.tsx
View File

@@ -69,7 +69,7 @@ export function ChatImportSetup({ workspace, onClose, onBack }: SetupProps) {
width: "100%", padding: "12px 14px", marginBottom: 20,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.85rem", lineHeight: 1.55,
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", resize: "vertical", boxSizing: "border-box",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}

2
components/project-creation/CodeImportSetup.tsx
View File

@@ -81,7 +81,7 @@ export function CodeImportSetup({ workspace, onClose, onBack }: SetupProps) {
width: "100%", padding: "11px 14px", marginBottom: 20,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.9rem",
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", boxSizing: "border-box",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}

2
components/project-creation/CreateProjectFlow.tsx
View File

@@ -81,7 +81,7 @@ export function CreateProjectFlow({ open, onOpenChange, workspace }: CreateProje
boxShadow: "0 12px 48px rgba(26,26,26,0.16)",
width: "100%",
maxWidth: 520,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
pointerEvents: "all",
animation: "vibn-slideUp 0.18s cubic-bezier(0.4,0,0.2,1)",
transition: "max-width 0.2s ease",

2
components/project-creation/FreshIdeaSetup.tsx
View File

@@ -47,7 +47,7 @@ export function FreshIdeaSetup({ workspace, onClose }: SetupProps) {
return (
<div style={{ padding: "32px 36px 36px" }}>
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28 }}>
<div style={{ fontSize: "1.15rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Newsreader, serif" }}>
<div style={{ fontSize: "1.15rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "var(--font-lora), ui-serif, serif" }}>
New project
</div>
<button

4
components/project-creation/MigrateSetup.tsx
View File

@@ -114,7 +114,7 @@ export function MigrateSetup({ workspace, onClose, onBack }: SetupProps) {
width: "100%", padding: "11px 14px", marginBottom: 16,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.88rem",
fontFamily: "Outfit, sans-serif", color: hosting ? "#1a1a1a" : "#a09a90",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: hosting ? "#1a1a1a" : "#a09a90",
outline: "none", boxSizing: "border-box", appearance: "none",
backgroundImage: `url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23a09a90' strokeWidth='1.5' strokeLinecap='round' strokeLinejoin='round'/%3E%3C/svg%3E")`,
backgroundRepeat: "no-repeat", backgroundPosition: "right 12px center",
@@ -138,7 +138,7 @@ export function MigrateSetup({ workspace, onClose, onBack }: SetupProps) {
width: "100%", padding: "11px 14px", marginBottom: 16,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.9rem",
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", boxSizing: "border-box",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}

4
components/project-creation/TypeSelector.tsx
View File

@@ -61,7 +61,7 @@ export function TypeSelector({ onSelect, onClose }: TypeSelectorProps) {
<div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 28 }}>
<div>
<h2 style={{
fontFamily: "Newsreader, serif", fontSize: "1.4rem", fontWeight: 400,
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.4rem", fontWeight: 400,
color: "#1a1a1a", margin: 0, marginBottom: 4,
}}>
Start a new project
@@ -97,7 +97,7 @@ export function TypeSelector({ onSelect, onClose }: TypeSelectorProps) {
background: "#faf8f5",
cursor: "pointer",
transition: "all 0.14s",
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
position: "relative",
overflow: "hidden",
}}

6
components/project-creation/setup-shared.tsx
View File

@@ -41,7 +41,7 @@ export function SetupHeader({
</button>
<div>
<h2 style={{
fontFamily: "Newsreader, serif", fontSize: "1.3rem", fontWeight: 400,
fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.3rem", fontWeight: 400,
color: "#1a1a1a", margin: 0, marginBottom: 3,
}}>
{label}
@@ -94,7 +94,7 @@ export function TextInput({
width: "100%", padding: "11px 14px", marginBottom: 16,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.9rem",
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", boxSizing: "border-box",
};
return (
@@ -135,7 +135,7 @@ export function PrimaryButton({
background: active ? "#1a1a1a" : "#e0dcd4",
color: active ? "#fff" : "#b5b0a6",
fontSize: "0.88rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: active ? "pointer" : "not-allowed",
display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
}}

24
components/project-main/ChatImportMain.tsx
View File

@@ -49,7 +49,7 @@ function EditableList({
{label}
</div>
{items.length === 0 && (
<p style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", margin: "0 0 6px" }}>
<p style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", margin: "0 0 6px" }}>
Nothing captured.
</p>
)}
@@ -62,7 +62,7 @@ function EditableList({
style={{
flex: 1, padding: "7px 10px", borderRadius: 6,
border: "1px solid #e0dcd4", background: "#faf8f5",
fontSize: "0.81rem", fontFamily: "Outfit, sans-serif",
fontSize: "0.81rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
color: "#1a1a1a", outline: "none",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
@@ -83,7 +83,7 @@ function EditableList({
style={{
background: "none", border: "1px dashed #e0dcd4", cursor: "pointer",
borderRadius: 6, padding: "5px 10px", fontSize: "0.72rem", color: "#a09a90",
fontFamily: "Outfit, sans-serif", width: "100%",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", width: "100%",
}}
onMouseEnter={e => (e.currentTarget.style.borderColor = "#b5b0a6")}
onMouseLeave={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
@@ -147,9 +147,9 @@ export function ChatImportMain({
if (stage === "intake") {
return (
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
<div style={{ width: "100%", maxWidth: 640, fontFamily: "Outfit, sans-serif" }}>
<div style={{ width: "100%", maxWidth: 640, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
Paste your chat history
</h2>
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
@@ -172,7 +172,7 @@ export function ChatImportMain({
width: "100%", padding: "14px 16px", marginBottom: 16,
borderRadius: 10, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.85rem", lineHeight: 1.6,
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", resize: "vertical", boxSizing: "border-box",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
@@ -192,7 +192,7 @@ export function ChatImportMain({
background: chatText.trim().length > 20 ? "#1a1a1a" : "#e0dcd4",
color: chatText.trim().length > 20 ? "#fff" : "#b5b0a6",
fontSize: "0.9rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: chatText.trim().length > 20 ? "pointer" : "not-allowed",
}}
>
@@ -206,7 +206,7 @@ export function ChatImportMain({
// ── Stage: extracting ─────────────────────────────────────────────────────
if (stage === "extracting") {
return (
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ textAlign: "center" }}>
<div style={{
width: 48, height: 48, borderRadius: "50%",
@@ -228,10 +228,10 @@ export function ChatImportMain({
// ── Stage: review ─────────────────────────────────────────────────────────
return (
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ maxWidth: 760, margin: "0 auto" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
What Atlas found
</h2>
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: 0 }}>
@@ -303,7 +303,7 @@ export function ChatImportMain({
style={{
padding: "11px 22px", borderRadius: 8, border: "none",
background: "#fff", color: "#1a1a1a",
fontSize: "0.85rem", fontWeight: 700, fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontSize: "0.85rem", fontWeight: 700, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
@@ -315,7 +315,7 @@ export function ChatImportMain({
style={{
padding: "11px 22px", borderRadius: 8,
border: "1px solid rgba(255,255,255,0.2)", background: "transparent", color: "#fff",
fontSize: "0.85rem", fontWeight: 600, fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontSize: "0.85rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
onMouseEnter={e => (e.currentTarget.style.background = "rgba(255,255,255,0.08)")}
onMouseLeave={e => (e.currentTarget.style.background = "transparent")}

24
components/project-main/CodeImportMain.tsx
View File

@@ -135,9 +135,9 @@ export function CodeImportMain({
const isValid = repoUrl.trim().startsWith("http");
return (
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "Outfit, sans-serif" }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
Import your repository
</h2>
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
@@ -161,7 +161,7 @@ export function CodeImportMain({
width: "100%", padding: "12px 14px", marginBottom: 16,
borderRadius: 8, border: "1px solid #e0dcd4",
background: "#faf8f5", fontSize: "0.9rem",
fontFamily: "Outfit, sans-serif", color: "#1a1a1a",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a",
outline: "none", boxSizing: "border-box",
}}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
@@ -179,7 +179,7 @@ export function CodeImportMain({
width: "100%", padding: "13px", borderRadius: 8, border: "none",
background: isValid ? "#1a1a1a" : "#e0dcd4",
color: isValid ? "#fff" : "#b5b0a6",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: isValid ? "pointer" : "not-allowed",
}}
>
@@ -194,7 +194,7 @@ export function CodeImportMain({
if (stage === "cloning") {
const currentIdx = PROGRESS_STEPS.findIndex(s => s.key === progressStep);
return (
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ textAlign: "center", maxWidth: 400 }}>
<div style={{
width: 52, height: 52, borderRadius: "50%",
@@ -250,10 +250,10 @@ export function CodeImportMain({
];
return (
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ maxWidth: 800, margin: "0 auto" }}>
<div style={{ marginBottom: 24 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
Architecture map
</h2>
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: "0 0 4px" }}>
@@ -289,7 +289,7 @@ export function CodeImportMain({
style={{
width: "100%", padding: "13px", borderRadius: 8, border: "none",
background: "#1a1a1a", color: "#fff",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
@@ -311,9 +311,9 @@ export function CodeImportMain({
return (
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "Outfit, sans-serif" }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
What should Atlas build?
</h2>
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
@@ -331,7 +331,7 @@ export function CodeImportMain({
padding: "18px", borderRadius: 10, textAlign: "left",
border: `2px solid ${selected ? "#1a1a1a" : "#e8e4dc"}`,
background: selected ? "#1a1a1a08" : "#fff",
cursor: "pointer", fontFamily: "Outfit, sans-serif",
cursor: "pointer", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
transition: "all 0.12s",
}}
onMouseEnter={e => { if (!selected) e.currentTarget.style.borderColor = "#d0ccc4"; }}
@@ -351,7 +351,7 @@ export function CodeImportMain({
width: "100%", padding: "13px", borderRadius: 8, border: "none",
background: confirmedSurfaces.length > 0 ? "#1a1a1a" : "#e0dcd4",
color: confirmedSurfaces.length > 0 ? "#fff" : "#b5b0a6",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "Outfit, sans-serif",
fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
cursor: confirmedSurfaces.length > 0 ? "pointer" : "not-allowed",
}}
>

10
components/project-main/FreshIdeaMain.tsx
View File

@@ -103,7 +103,7 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
display: "flex", alignItems: "center", justifyContent: "space-between",
gap: 16, flexShrink: 0, borderBottom: "1px solid #333",
}}>
<div style={{ fontSize: "0.8rem", color: "#e8e4dc", fontFamily: "Outfit, sans-serif" }}>
<div style={{ fontSize: "0.8rem", color: "#e8e4dc", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
✦ PRD saved — you can keep refining here or view the full document.
</div>
<Link
@@ -130,10 +130,10 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
borderBottom: "1px solid #333",
}}>
<div>
<div style={{ fontSize: "0.84rem", fontWeight: 700, color: "#fff", fontFamily: "Outfit, sans-serif", marginBottom: 2 }}>
<div style={{ fontSize: "0.84rem", fontWeight: 700, color: "#fff", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", marginBottom: 2 }}>
✦ Discovery complete — what&apos;s next?
</div>
<div style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "Outfit, sans-serif" }}>
<div style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
All 6 phases captured. Generate your PRD or jump into Build.
</div>
</div>
@@ -145,7 +145,7 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
padding: "8px 16px", borderRadius: 7, border: "none",
background: "#fff", color: "#1a1a1a",
fontSize: "0.8rem", fontWeight: 700,
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
transition: "opacity 0.12s",
}}
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
@@ -160,7 +160,7 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
border: "1px solid rgba(255,255,255,0.2)",
background: "transparent", color: "#fff",
fontSize: "0.8rem", fontWeight: 600,
fontFamily: "Outfit, sans-serif", cursor: "pointer",
fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
}}
>
Plan MVP →

36
components/project-main/MigrateMain.tsx
View File

@@ -32,11 +32,11 @@ const HOSTING_OPTIONS = [
function MarkdownRenderer({ md }: { md: string }) {
const lines = md.split('\n');
return (
<div style={{ fontFamily: "Outfit, sans-serif", fontSize: "0.85rem", color: "#1a1a1a", lineHeight: 1.7 }}>
<div style={{ fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", fontSize: "0.85rem", color: "#1a1a1a", lineHeight: 1.7 }}>
{lines.map((line, i) => {
if (line.startsWith('## ')) return <h2 key={i} style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 500, margin: "24px 0 10px", color: "#1a1a1a" }}>{line.slice(3)}</h2>;
if (line.startsWith('## ')) return <h2 key={i} style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 500, margin: "24px 0 10px", color: "#1a1a1a" }}>{line.slice(3)}</h2>;
if (line.startsWith('### ')) return <h3 key={i} style={{ fontSize: "0.88rem", fontWeight: 700, margin: "18px 0 6px", color: "#1a1a1a" }}>{line.slice(4)}</h3>;
if (line.startsWith('# ')) return <h1 key={i} style={{ fontFamily: "Newsreader, serif", fontSize: "1.5rem", fontWeight: 400, margin: "0 0 16px", color: "#1a1a1a" }}>{line.slice(2)}</h1>;
if (line.startsWith('# ')) return <h1 key={i} style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.5rem", fontWeight: 400, margin: "0 0 16px", color: "#1a1a1a" }}>{line.slice(2)}</h1>;
if (line.match(/^- \[ \] /)) return (
<div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 8, marginBottom: 5 }}>
<input type="checkbox" style={{ marginTop: 3, accentColor: "#1a1a1a" }} />
@@ -157,9 +157,9 @@ export function MigrateMain({
const canProceed = repoUrl.trim().startsWith("http") || liveUrl.trim().startsWith("http");
return (
<div style={{ height: "100%", overflow: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: 32 }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "Outfit, sans-serif" }}>
<div style={{ width: "100%", maxWidth: 540, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>
Tell us about your product
</h2>
<p style={{ fontSize: "0.82rem", color: "#a09a90", margin: 0 }}>
@@ -176,7 +176,7 @@ export function MigrateMain({
</label>
<input type="text" value={repoUrl} onChange={e => setRepoUrl(e.target.value)}
placeholder="https://github.com/yourorg/your-repo"
style={{ width: "100%", padding: "11px 14px", marginBottom: 16, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.9rem", fontFamily: "Outfit, sans-serif", color: "#1a1a1a", outline: "none", boxSizing: "border-box" }}
style={{ width: "100%", padding: "11px 14px", marginBottom: 16, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.9rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a", outline: "none", boxSizing: "border-box" }}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
onBlur={e => (e.currentTarget.style.borderColor = "#e0dcd4")} autoFocus
/>
@@ -185,7 +185,7 @@ export function MigrateMain({
</label>
<input type="text" value={liveUrl} onChange={e => setLiveUrl(e.target.value)}
placeholder="https://yourproduct.com"
style={{ width: "100%", padding: "11px 14px", marginBottom: 16, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.9rem", fontFamily: "Outfit, sans-serif", color: "#1a1a1a", outline: "none", boxSizing: "border-box" }}
style={{ width: "100%", padding: "11px 14px", marginBottom: 16, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.9rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#1a1a1a", outline: "none", boxSizing: "border-box" }}
onFocus={e => (e.currentTarget.style.borderColor = "#1a1a1a")}
onBlur={e => (e.currentTarget.style.borderColor = "#e0dcd4")}
/>
@@ -193,7 +193,7 @@ export function MigrateMain({
Current hosting provider
</label>
<select value={hosting} onChange={e => setHosting(e.target.value)}
style={{ width: "100%", padding: "11px 14px", marginBottom: 20, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.88rem", fontFamily: "Outfit, sans-serif", color: hosting ? "#1a1a1a" : "#a09a90", outline: "none", boxSizing: "border-box", appearance: "none" }}
style={{ width: "100%", padding: "11px 14px", marginBottom: 20, borderRadius: 8, border: "1px solid #e0dcd4", background: "#faf8f5", fontSize: "0.88rem", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: hosting ? "#1a1a1a" : "#a09a90", outline: "none", boxSizing: "border-box", appearance: "none" }}
>
{HOSTING_OPTIONS.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
</select>
@@ -201,7 +201,7 @@ export function MigrateMain({
<strong style={{ color: "#4a2a5a" }}>Non-destructive.</strong> Your existing product stays live throughout. Atlas duplicates, never deletes.
</div>
<button onClick={startAudit} disabled={!canProceed}
style={{ width: "100%", padding: "13px", borderRadius: 8, border: "none", background: canProceed ? "#1a1a1a" : "#e0dcd4", color: canProceed ? "#fff" : "#b5b0a6", fontSize: "0.9rem", fontWeight: 600, fontFamily: "Outfit, sans-serif", cursor: canProceed ? "pointer" : "not-allowed" }}
style={{ width: "100%", padding: "13px", borderRadius: 8, border: "none", background: canProceed ? "#1a1a1a" : "#e0dcd4", color: canProceed ? "#fff" : "#b5b0a6", fontSize: "0.9rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: canProceed ? "pointer" : "not-allowed" }}
>
Start audit →
</button>
@@ -220,7 +220,7 @@ export function MigrateMain({
];
const currentIdx = steps.findIndex(s => s.key === progressStep);
return (
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ textAlign: "center", maxWidth: 400 }}>
<div style={{ width: 52, height: 52, borderRadius: "50%", border: "3px solid #e0dcd4", borderTopColor: "#4a2a5a", animation: "vibn-mig-spin 0.85s linear infinite", margin: "0 auto 24px" }} />
<style>{`@keyframes vibn-mig-spin { to { transform:rotate(360deg); } }`}</style>
@@ -250,10 +250,10 @@ export function MigrateMain({
const rows = (analysisResult?.rows as Array<{ category: string; item: string; status: string; detail?: string }>) ?? [];
const summary = (analysisResult?.summary as string) ?? '';
return (
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", overflow: "auto", padding: "32px 40px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ maxWidth: 760, margin: "0 auto" }}>
<div style={{ marginBottom: 24 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>Audit complete</h2>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>Audit complete</h2>
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: 0 }}>{summary || `${projectName} — review your current infrastructure below.`}</p>
</div>
@@ -286,7 +286,7 @@ export function MigrateMain({
<div style={{ fontSize: "0.75rem", color: "#8a8478" }}>Atlas will generate a phased migration doc with Mirror, Validate, Cutover, and Decommission phases.</div>
</div>
<button onClick={startPlanning}
style={{ padding: "11px 22px", borderRadius: 8, border: "none", background: "#fff", color: "#1a1a1a", fontSize: "0.85rem", fontWeight: 700, fontFamily: "Outfit, sans-serif", cursor: "pointer", flexShrink: 0 }}
style={{ padding: "11px 22px", borderRadius: 8, border: "none", background: "#fff", color: "#1a1a1a", fontSize: "0.85rem", fontWeight: 700, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer", flexShrink: 0 }}
onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
>
@@ -301,7 +301,7 @@ export function MigrateMain({
// ── Stage: planning ───────────────────────────────────────────────────────
if (stage === "planning") {
return (
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
<div style={{ textAlign: "center" }}>
<div style={{ width: 52, height: 52, borderRadius: "50%", border: "3px solid #e0dcd4", borderTopColor: "#4a2a5a", animation: "vibn-mig-spin 0.85s linear infinite", margin: "0 auto 20px" }} />
<h3 style={{ fontSize: "1.05rem", fontWeight: 600, color: "#1a1a1a", margin: "0 0 6px" }}>Generating migration plan…</h3>
@@ -313,7 +313,7 @@ export function MigrateMain({
// ── Stage: plan ───────────────────────────────────────────────────────────
return (
<div style={{ height: "100%", overflow: "auto", fontFamily: "Outfit, sans-serif" }}>
<div style={{ height: "100%", overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
{/* Non-destructive banner */}
<div style={{ background: "#4a2a5a12", borderBottom: "1px solid #4a2a5a30", padding: "12px 32px", display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
<span style={{ fontSize: "1rem" }}>🛡️</span>
@@ -326,7 +326,7 @@ export function MigrateMain({
<div style={{ padding: "32px 40px" }}>
<div style={{ maxWidth: 760, margin: "0 auto" }}>
<div style={{ marginBottom: 28 }}>
<h2 style={{ fontFamily: "Newsreader, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>Migration Plan</h2>
<h2 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.7rem", fontWeight: 400, color: "#1a1a1a", margin: 0, marginBottom: 6 }}>Migration Plan</h2>
<p style={{ fontSize: "0.8rem", color: "#a09a90", margin: 0 }}>{projectName} — four phased migration with rollback plan</p>
</div>
<div style={{ background: "#fff", borderRadius: 12, border: "1px solid #e8e4dc", padding: "28px 32px" }}>
@@ -335,13 +335,13 @@ export function MigrateMain({
<div style={{ marginTop: 20, display: "flex", gap: 10 }}>
<button
onClick={() => router.push(`/${workspace}/project/${projectId}/design`)}
style={{ padding: "11px 22px", borderRadius: 8, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.85rem", fontWeight: 600, fontFamily: "Outfit, sans-serif", cursor: "pointer" }}
style={{ padding: "11px 22px", borderRadius: 8, border: "none", background: "#1a1a1a", color: "#fff", fontSize: "0.85rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer" }}
>
Go to Design →
</button>
<button
onClick={() => window.print()}
style={{ padding: "11px 22px", borderRadius: 8, border: "1px solid #e0dcd4", background: "#fff", color: "#6b6560", fontSize: "0.85rem", fontWeight: 500, fontFamily: "Outfit, sans-serif", cursor: "pointer" }}
style={{ padding: "11px 22px", borderRadius: 8, border: "1px solid #e0dcd4", background: "#fff", color: "#6b6560", fontSize: "0.85rem", fontWeight: 500, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer" }}
>
Print / Export
</button>