v2.53 - Renew Onboarding

imjustinliao · imjustinliao · commit daa799b11e3f · 2026-03-08T14:40:46.000-07:00
diff --git a/frontend/src/components/app/AppShell.tsx b/frontend/src/components/app/AppShell.tsx
@@ -13,7 +13,6 @@ import { fetchUserMemory, fetchUserStatus, updateUserMemory, type UpdateUserMemo
 import { trackFrontendEvent } from "@/lib/frontendAnalytics"
 import { setSettingsCache } from "@/lib/settingsCache"
 
-const GoldenGuideModal = lazy(() => import("@/components/app/GoldenGuideModal")) as React.LazyExoticComponent<React.ComponentType<{ COLORS: ThemeColors }>>
 const SearchModal = lazy(() => import("@/components/app/SearchModal")) as React.LazyExoticComponent<React.ComponentType<{ COLORS: ThemeColors }>>
 const DeleteConfirmModal = lazy(() => import("@/components/app/DeleteConfirmModal").then((m) => ({ default: m.DeleteConfirmModal }))) as React.LazyExoticComponent<React.ComponentType<{ COLORS: ThemeColors }>>
 
@@ -45,7 +44,7 @@ function ShellInner({ children }: { children: React.ReactNode }) {
   const COLORS = useThemeColors()
   const { resolved } = useTheme()
   const exp1 = useExp1()
-  const { state } = useChat()
+  const { state, closeGuide } = useChat()
   const { user, loading } = useAuth()
   const pathname = usePathname()
   const router = useRouter()
@@ -144,7 +143,7 @@ function ShellInner({ children }: { children: React.ReactNode }) {
         }}
       >
         <Suspense fallback={null}>
-          {guideOpen && <GoldenGuideModal COLORS={COLORS} />}
+          {guideOpen && <OnboardingModal mode="tutorial" open onClose={closeGuide} />}
           {searchOpen && <SearchModal COLORS={COLORS} />}
           <DeleteConfirmModal COLORS={COLORS} />
         </Suspense>
diff --git a/frontend/src/components/app/OnboardingModal.tsx b/frontend/src/components/app/OnboardingModal.tsx
@@ -196,13 +196,13 @@ export default function OnboardingModal({
 
   const chipStyle = (active: boolean): React.CSSProperties => ({
     borderRadius: "999px",
-    border: active ? `1.5px solid ${accent}` : `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.1)"}`,
+    border: active ? `1.5px solid ${accent}` : `1px solid ${isDark ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.1)"}`,
     background: active ? accentBg : "transparent",
     color: active ? (isDark ? "#fff" : "#000") : COLORS.textSecondary,
     fontFamily: FONTS.sans,
-    fontSize: "13px",
+    fontSize: "14px",
     fontWeight: active ? 600 : 400,
-    padding: "8px 16px",
+    padding: "10px 18px",
     cursor: submitting ? "not-allowed" : "pointer",
     transition: "all 250ms cubic-bezier(0.4, 0, 0.2, 1)",
     outline: "none",
@@ -213,35 +213,35 @@ export default function OnboardingModal({
   /* ── Step renderers ── */
 
   const renderStep0 = () => (
-    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "36px", maxWidth: "420px", margin: "0 auto" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "48px", maxWidth: "440px", margin: "0 auto" }}>
       {/* Logo / brand mark */}
       <div style={{
-        width: "64px", height: "64px", borderRadius: "18px",
+        width: "72px", height: "72px", borderRadius: "20px",
         background: `linear-gradient(135deg, ${accent}, #E8A020)`,
         display: "flex", alignItems: "center", justifyContent: "center",
         boxShadow: `0 8px 32px ${accent}40`,
       }}>
-        <span style={{ fontSize: "28px", fontWeight: 800, color: "#fff", fontFamily: FONTS.mono }}>FP</span>
+        <span style={{ fontSize: "30px", fontWeight: 800, color: "#fff", fontFamily: FONTS.mono }}>FP</span>
       </div>
 
       <div style={{ textAlign: "center" }}>
         <h1 style={{
-          margin: "0 0 12px", fontFamily: FONTS.sans, fontSize: "32px", fontWeight: 700,
-          color: COLORS.textPrimary, lineHeight: 1.15, letterSpacing: "-0.02em",
+          margin: "0 0 16px", fontFamily: FONTS.sans, fontSize: "34px", fontWeight: 700,
+          color: COLORS.textPrimary, lineHeight: 1.2, letterSpacing: "-0.02em",
         }}>
           Welcome to First Principle
         </h1>
         <p style={{
-          margin: 0, fontFamily: FONTS.sans, fontSize: "16px", fontWeight: 400,
-          color: COLORS.textSecondary, lineHeight: 1.6, maxWidth: "38ch", marginInline: "auto",
+          margin: 0, fontFamily: FONTS.sans, fontSize: "17px", fontWeight: 400,
+          color: COLORS.textSecondary, lineHeight: 1.65, maxWidth: "40ch", marginInline: "auto",
         }}>
           Learn anything from the ground up. We just need a few details to personalize your experience.
         </p>
       </div>
 
       {/* Name fields */}
-      <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "14px" }}>
-        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+      <div style={{ width: "100%", display: "flex", flexDirection: "column", gap: "20px" }}>
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
           <input
             value={firstName}
             onChange={(e) => { setFirstName(e.target.value); clearError() }}
@@ -269,23 +269,23 @@ export default function OnboardingModal({
   )
 
   const renderStep1 = () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: "28px", maxWidth: "520px", margin: "0 auto" }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "40px", maxWidth: "560px", margin: "0 auto" }}>
       <div style={{ textAlign: "center" }}>
         <h2 style={{
-          margin: "0 0 8px", fontFamily: FONTS.sans, fontSize: "26px", fontWeight: 700,
+          margin: "0 0 12px", fontFamily: FONTS.sans, fontSize: "28px", fontWeight: 700,
           color: COLORS.textPrimary, letterSpacing: "-0.01em",
         }}>
           Make it yours
         </h2>
-        <p style={{ margin: 0, fontFamily: FONTS.sans, fontSize: "15px", color: COLORS.textSecondary, lineHeight: 1.6 }}>
+        <p style={{ margin: 0, fontFamily: FONTS.sans, fontSize: "16px", color: COLORS.textSecondary, lineHeight: 1.65 }}>
           This helps us tailor explanations to your world. The model will keep learning from your chats over time.
         </p>
       </div>
 
       {/* Role */}
-      <div>
+      <div style={{ paddingBottom: "8px" }}>
         <p style={sectionLabel(COLORS)}>I am a...</p>
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", justifyContent: "center" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", justifyContent: "center", marginTop: "14px" }}>
           {ONBOARDING_ROLES.map((r) => (
             <button key={r} type="button" onClick={() => { if (!submitting) { setRole(r); clearError() } }} style={chipStyle(role === r)}>
               {ONBOARDING_ROLE_LABELS[r]}
@@ -295,9 +295,9 @@ export default function OnboardingModal({
       </div>
 
       {/* Goals */}
-      <div>
+      <div style={{ paddingBottom: "8px" }}>
         <p style={sectionLabel(COLORS)}>I want to...</p>
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", justifyContent: "center" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", justifyContent: "center", marginTop: "14px" }}>
           {ONBOARDING_GOALS.map((g) => (
             <button key={g} type="button" onClick={() => {
               if (submitting) return
@@ -311,9 +311,9 @@ export default function OnboardingModal({
       </div>
 
       {/* How did you find us */}
-      <div>
+      <div style={{ paddingBottom: "8px" }}>
         <p style={sectionLabel(COLORS)}>How did you find us?</p>
-        <div style={{ display: "flex", flexWrap: "wrap", gap: "8px", justifyContent: "center" }}>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: "10px", justifyContent: "center", marginTop: "14px" }}>
           {ONBOARDING_SOURCES.map((s) => (
             <button key={s} type="button" onClick={() => {
               if (submitting) return
@@ -330,38 +330,39 @@ export default function OnboardingModal({
             value={sourceOther}
             onChange={(e) => { setSourceOther(e.target.value); clearError() }}
             placeholder="Please specify..."
-            style={{ ...inputStyle(COLORS, isDark), marginTop: "10px", maxWidth: "320px", marginInline: "auto", display: "block" }}
+            style={{ ...inputStyle(COLORS, isDark), marginTop: "14px", maxWidth: "320px", marginInline: "auto", display: "block" }}
           />
         )}
       </div>
 
       {/* Background */}
-      <div style={{ textAlign: "center" }}>
+      <div style={{ textAlign: "center", paddingBottom: "8px" }}>
         <p style={sectionLabel(COLORS)}>Background (optional)</p>
         <textarea
           value={background}
           onChange={(e) => { setBackground(e.target.value); clearError() }}
           placeholder="Optional: share your experience level. The model will also learn from your chats."
           style={{
             ...inputStyle(COLORS, isDark),
-            minHeight: "80px",
+            minHeight: "88px",
             resize: "vertical" as const,
             maxWidth: "100%",
+            marginTop: "14px",
           }}
         />
       </div>
     </div>
   )
 
   const renderStep2 = () => (
-    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "24px", maxWidth: "600px", margin: "0 auto", width: "100%" }}>
+    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "32px", maxWidth: "620px", margin: "0 auto", width: "100%" }}>
       {/* Video area */}
       <div style={{
         width: "100%",
-        borderRadius: "16px",
+        borderRadius: "18px",
         overflow: "hidden",
         background: isDark ? "rgba(255,255,255,0.03)" : "rgba(0,0,0,0.03)",
-        border: `1px solid ${isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"}`,
+        border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)"}`,
         aspectRatio: "16 / 9",
         position: "relative",
       }}>
@@ -401,30 +402,30 @@ export default function OnboardingModal({
       {/* Text */}
       <div key={currentSlide.id} style={{ textAlign: "center", animation: "fpOnboardFadeUp 400ms ease-out" }}>
         <h2 style={{
-          margin: "0 0 8px", fontFamily: FONTS.sans, fontSize: "22px", fontWeight: 700,
+          margin: "0 0 10px", fontFamily: FONTS.sans, fontSize: "24px", fontWeight: 700,
           color: COLORS.textPrimary, letterSpacing: "-0.01em",
         }}>
           {currentSlide.title}
         </h2>
         <p style={{
-          margin: 0, fontFamily: FONTS.sans, fontSize: "15px", color: COLORS.textSecondary,
-          lineHeight: 1.6, maxWidth: "44ch", marginInline: "auto",
+          margin: 0, fontFamily: FONTS.sans, fontSize: "16px", color: COLORS.textSecondary,
+          lineHeight: 1.65, maxWidth: "46ch", marginInline: "auto",
         }}>
           {currentSlide.description}
         </p>
       </div>
 
       {/* Slide dots */}
-      <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+      <div style={{ display: "flex", gap: "10px", alignItems: "center" }}>
         {ONBOARDING_TUTORIAL_SLIDES.map((s, i) => (
           <button
             key={s.id}
             type="button"
             onClick={() => setSlide(i)}
             aria-label={`Tutorial ${i + 1}`}
             style={{
-              width: i === slide ? "24px" : "8px",
-              height: "8px",
+              width: i === slide ? "28px" : "10px",
+              height: "10px",
               borderRadius: "999px",
               border: "none",
               background: i === slide ? accent : (isDark ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.12)"),
@@ -438,13 +439,13 @@ export default function OnboardingModal({
     </div>
   )
 
-  /* ── Tutorial-only mode (reopened from Profile) ── */
+  /* ── Tutorial-only mode (Golden Guide button or Profile) ── */
   const renderTutorialOnly = () => (
     <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
-      <div style={{ flex: 1, minHeight: 0, overflowY: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: "32px 24px" }}>
+      <div style={{ flex: 1, minHeight: 0, overflowY: "auto", display: "flex", alignItems: "center", justifyContent: "center", padding: "40px 32px" }}>
         {renderStep2()}
       </div>
-      <div style={{ padding: "16px 28px", display: "flex", justifyContent: "flex-end" }}>
+      <div style={{ padding: "20px 36px 24px", display: "flex", justifyContent: "flex-end" }}>
         <button type="button" onClick={() => onClose?.()} style={primaryBtnStyle(accent)}>
           {slide >= TOTAL_SLIDES - 1 ? "Done" : "Close"}
         </button>
@@ -495,9 +496,9 @@ export default function OnboardingModal({
           aria-modal="true"
           aria-label={isOnboarding ? "Onboarding" : "Tutorial"}
           style={{
-            width: "min(680px, 94vw)",
-            maxHeight: "min(92vh, 780px)",
-            borderRadius: "24px",
+            width: "min(720px, 94vw)",
+            maxHeight: "min(92vh, 840px)",
+            borderRadius: "28px",
             border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
             background: isDark ? "rgba(14,14,14,0.98)" : "rgba(255,255,255,0.98)",
             boxShadow: isDark
@@ -520,7 +521,7 @@ export default function OnboardingModal({
                   flex: 1,
                   minHeight: 0,
                   overflowY: "auto",
-                  padding: step === 2 ? "32px 28px 20px" : "48px 36px 24px",
+                  padding: step === 2 ? "40px 36px 28px" : "56px 44px 32px",
                   display: "flex",
                   alignItems: step === 2 ? "flex-start" : "center",
                   justifyContent: "center",
@@ -536,12 +537,12 @@ export default function OnboardingModal({
 
               {/* Footer */}
               <div style={{
-                padding: "16px 28px",
+                padding: "20px 36px 24px",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "space-between",
-                gap: "12px",
-                borderTop: `1px solid ${isDark ? "rgba(255,255,255,0.05)" : "rgba(0,0,0,0.05)"}`,
+                gap: "16px",
+                borderTop: `1px solid ${isDark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)"}`,
               }}>
                 {/* Left: dots */}
                 <div style={{ display: "flex", gap: "6px", alignItems: "center" }}>
@@ -617,13 +618,13 @@ function inputStyle(COLORS: any, isDark: boolean): React.CSSProperties {
   return {
     width: "100%",
     boxSizing: "border-box",
-    borderRadius: "12px",
-    border: `1px solid ${isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`,
+    borderRadius: "14px",
+    border: `1px solid ${isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"}`,
     background: isDark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)",
     color: COLORS.textPrimary,
-    fontSize: "15px",
+    fontSize: "16px",
     fontFamily: FONTS.sans,
-    padding: "12px 16px",
+    padding: "14px 18px",
     outline: "none",
     transition: "border-color 200ms ease",
   }
@@ -632,13 +633,13 @@ function inputStyle(COLORS: any, isDark: boolean): React.CSSProperties {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function sectionLabel(COLORS: any): React.CSSProperties {
   return {
-    margin: "0 0 10px",
+    margin: 0,
     fontFamily: FONTS.sans,
-    fontSize: "13px",
+    fontSize: "12px",
     fontWeight: 600,
     color: COLORS.textTertiary,
     textTransform: "uppercase" as const,
-    letterSpacing: "0.06em",
+    letterSpacing: "0.08em",
     textAlign: "center" as const,
   }
 }
