From a771280fa932560c25e5404e1acfc040205a5ca7 Mon Sep 17 00:00:00 2001 From: ciregenz Date: Wed, 15 Jul 2026 13:07:45 -0700 Subject: [PATCH] [eric] onboarding: small-detail pass (themed checkbox, chunky torn edge, themed stage, real traffic lights, crossfade transitions) --- .../components/OnboardingV3/OnboardingV3Root.tsx | 12 ++++++------ .../components/OnboardingV3/beats/BeatApps.tsx | 4 ++-- .../components/OnboardingV3/beats/BeatConnect.tsx | 15 +++++++++++++-- .../components/OnboardingV3/beats/BeatShell.tsx | 9 ++++++++- .../pages/Dashboard/canvas/DashboardCanvas.tsx | 2 +- 5 files changed, 30 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx index 8ac12fed..476cf582 100644 --- a/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx +++ b/frontend/src/app/components/OnboardingV3/OnboardingV3Root.tsx @@ -55,7 +55,7 @@ const IntroBeat: React.FC<{ c: ClaudeTokens; line: string; sub?: string; onNext:
{ background: c.bg.page, }} > - + {beat === 'welcome' && setBeat('newos')} />} {beat === 'newos' && setBeat('connect')} />} @@ -206,8 +206,8 @@ const OnboardingV3Root: React.FC = () => { transition={{ duration: 0.3 }} style={{ position: 'absolute', top: 13, left: 14, display: 'flex', gap: 7, pointerEvents: 'none' }} > - {[0, 1, 2].map((i) => ( - + {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => ( + ))} {finishing && ( diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx index 079d6d7c..408f085f 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatApps.tsx @@ -43,8 +43,8 @@ const BeatApps: React.FC<{ }} >
- {[0, 1, 2].map((i) => ( - + {['#FF5F57', '#FEBC2E', '#28C840'].map((dot) => ( + ))} OpenSwarm
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx index 6efa91e5..8027a924 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatConnect.tsx @@ -1,5 +1,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'; import { motion } from 'framer-motion'; +import { Check } from 'lucide-react'; import { useAppDispatch, useAppSelector } from '@/shared/hooks'; import { API_BASE } from '@/shared/config'; import { fetchModels } from '@/shared/state/modelsSlice'; @@ -101,7 +102,6 @@ const BeatConnect: React.FC<{ display: 'flex', alignItems: 'center', gap: 14, padding: '13px 14px 13px 16px', textAlign: 'left', borderRadius: c.radius.md, border: `1px solid ${filled ? c.accent.primary : c.border.medium}`, background: c.bg.surface, cursor: connected ? 'default' : 'pointer', fontFamily: 'inherit', - boxShadow: c.shadow.sm, }} > )}
diff --git a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx index 1d78e611..5895ad45 100644 --- a/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx +++ b/frontend/src/app/components/OnboardingV3/beats/BeatShell.tsx @@ -1,13 +1,14 @@ import React, { useEffect, useState } from 'react'; import { motion } from 'framer-motion'; import { ArrowLeft } from 'lucide-react'; +import { useThemeAccent } from '@/shared/styles/ThemeContext'; import type { ClaudeTokens } from '@/shared/styles/claudeTokens'; // Film grain as a data URI so the CSP never phones out; opacity keeps it a texture, not noise. export const GRAIN_URL = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E\")"; // Arc's torn seam: the dark copy panel ends in a zigzag bite instead of a straight border. -const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 50 }, (unused, i) => `calc(100% - 6px) ${i * 2 + 1}%, 100% ${i * 2 + 2}%`).join(', ')}, 0 100%)`; +const ZIGZAG_CLIP = `polygon(0 0, 100% 0, ${Array.from({ length: 30 }, (unused, i) => `calc(100% - 12px) ${i * 3.33 + 1.66}%, 100% ${i * 3.33 + 3.33}%`).join(', ')}, 0 100%)`; const SPRING = { type: 'spring' as const, stiffness: 260, damping: 26 }; @@ -22,6 +23,10 @@ const BeatShell: React.FC<{ onBack?: () => void; children: React.ReactNode; }> = ({ c, title, body, nextLabel, nextDisabled, onNext, onBack, children }) => { + // Arc's post-theme screens wear the user's color everywhere; the stage drinks the picked stops (or accent) instead of staying flat paper. + const { accent, gradient } = useThemeAccent(); + const stops = gradient ?? (accent ? [accent] : [c.accent.primary]); + const stageWash = `linear-gradient(115deg, ${stops.map((hex, i) => `${hex}2e ${stops.length > 1 ? (i / (stops.length - 1)) * 100 : 100}%`).join(', ')}), ${c.bg.secondary}`; // Zen steal: controls stay inert until the entrance lands so a double-click from the prior beat can't fire them. const [armed, setArmed] = useState(false); useEffect(() => { @@ -87,8 +92,10 @@ const BeatShell: React.FC<{ style={{ position: 'relative', flex: 1, minWidth: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 36, boxSizing: 'border-box', overflow: 'auto', + background: stageWash, }} > +
{children}
diff --git a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx index 36f0f1ab..fe02b730 100644 --- a/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx +++ b/frontend/src/app/pages/Dashboard/canvas/DashboardCanvas.tsx @@ -224,7 +224,7 @@ const DashboardCanvas: React.FC = ({ position: 'absolute', inset: 0, pointerEvents: 'none', - background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}24 ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`, + background: `linear-gradient(115deg, ${gradient.map((hex, i) => `${hex}2b ${(i / (gradient.length - 1)) * 100}%`).join(', ')})`, }} /> )}