diff --git a/apps/twig/build/app-icon.png b/apps/twig/build/app-icon.png index eaac618d1..a20cb7c11 100644 Binary files a/apps/twig/build/app-icon.png and b/apps/twig/build/app-icon.png differ diff --git a/apps/twig/forge.config.ts b/apps/twig/forge.config.ts index 598d88120..3e262acdf 100644 --- a/apps/twig/forge.config.ts +++ b/apps/twig/forge.config.ts @@ -131,8 +131,8 @@ const config: ForgeConfig = { "{**/*.node,**/spawn-helper,**/.vite/build/claude-cli/**,**/.vite/build/plugins/posthog/**,**/.vite/build/codex-acp/**,**/node_modules/node-pty/**,**/node_modules/@parcel/**,**/node_modules/file-icon/**}", }, prune: false, - name: "Twig", - executableName: "Twig", + name: "PostHog Code", + executableName: "PostHog Code", icon: "./build/app-icon", // Forge adds .icns/.ico/.png based on platform appBundleId: "com.posthog.array", // TODO: Migrate to twig appCategoryType: "public.app-category.productivity", diff --git a/apps/twig/index.html b/apps/twig/index.html index 3647b283c..6b829c8c6 100644 --- a/apps/twig/index.html +++ b/apps/twig/index.html @@ -3,9 +3,9 @@ - + - Twig + PostHog Code diff --git a/apps/twig/src/main/bootstrap.ts b/apps/twig/src/main/bootstrap.ts index 7635fccef..e91a457ac 100644 --- a/apps/twig/src/main/bootstrap.ts +++ b/apps/twig/src/main/bootstrap.ts @@ -16,7 +16,7 @@ const isDev = !app.isPackaged; // Set app name for single-instance lock, crashReporter, etc const appName = isDev ? "twig-dev" : "Twig"; -app.setName(isDev ? "Twig (Development)" : "Twig"); +app.setName(isDev ? "PostHog Code (Development)" : "PostHog Code"); // Set userData path for @posthog/twig const appDataPath = app.getPath("appData"); diff --git a/apps/twig/src/main/menu.ts b/apps/twig/src/main/menu.ts index 23ab31531..975f713cf 100644 --- a/apps/twig/src/main/menu.ts +++ b/apps/twig/src/main/menu.ts @@ -48,18 +48,18 @@ export function buildApplicationMenu(): void { function buildAppMenu(): MenuItemConstructorOptions { return { - label: "Twig", + label: "PostHog Code", submenu: [ { - label: "About Twig", + label: "About PostHog Code", click: () => { const info = getSystemInfo(); dialog .showMessageBox({ type: "info", - title: "About Twig", - message: "Twig", + title: "About PostHog Code", + message: "PostHog Code", detail: info, buttons: ["Copy", "OK"], defaultId: 1, @@ -149,7 +149,7 @@ function buildFileMenu(): MenuItemConstructorOptions { const logContent = await readFile(logPath, "utf-8"); const header = [ "=".repeat(60), - " Twig Log Export", + " PostHog Code Log Export", "=".repeat(60), "", getSystemInfo(), diff --git a/apps/twig/src/main/services/oauth/service.ts b/apps/twig/src/main/services/oauth/service.ts index 44b6d4fde..08fffc7e5 100644 --- a/apps/twig/src/main/services/oauth/service.ts +++ b/apps/twig/src/main/services/oauth/service.ts @@ -365,9 +365,9 @@ export class OAuthService { error: "Authorization failed", }; const messages = { - success: "You can close this window and return to Twig.", - cancelled: "You can close this window and return to Twig.", - error: "You can close this window and return to Twig.", + success: "You can close this window and return to PostHog Code.", + cancelled: "You can close this window and return to PostHog Code.", + error: "You can close this window and return to PostHog Code.", }; return ` diff --git a/apps/twig/src/main/services/shell/service.test.ts b/apps/twig/src/main/services/shell/service.test.ts index 0e67d1acf..0038c21d7 100644 --- a/apps/twig/src/main/services/shell/service.test.ts +++ b/apps/twig/src/main/services/shell/service.test.ts @@ -222,7 +222,7 @@ describe("ShellService", () => { expect.any(Array), expect.objectContaining({ env: expect.objectContaining({ - TERM_PROGRAM: "Twig", + TERM_PROGRAM: "PostHog Code", COLORTERM: "truecolor", FORCE_COLOR: "3", }), diff --git a/apps/twig/src/main/services/shell/service.ts b/apps/twig/src/main/services/shell/service.ts index 2fee5e5cb..7265cb369 100644 --- a/apps/twig/src/main/services/shell/service.ts +++ b/apps/twig/src/main/services/shell/service.ts @@ -54,7 +54,7 @@ function buildShellEnv( } Object.assign(env, { - TERM_PROGRAM: "Twig", + TERM_PROGRAM: "PostHog Code", COLORTERM: "truecolor", FORCE_COLOR: "3", ...additionalEnv, diff --git a/apps/twig/src/main/trpc/routers/os.ts b/apps/twig/src/main/trpc/routers/os.ts index 137b0a279..3a62188f7 100644 --- a/apps/twig/src/main/trpc/routers/os.ts +++ b/apps/twig/src/main/trpc/routers/os.ts @@ -143,7 +143,7 @@ export const osRouter = router({ const options = input.options; const result = await dialog.showMessageBox(win, { type: options?.type || "info", - title: options?.title || "Twig", + title: options?.title || "PostHog Code", message: options?.message || "", detail: options?.detail, buttons: diff --git a/apps/twig/src/renderer/App.tsx b/apps/twig/src/renderer/App.tsx index e4f6f4a44..97bf2e2f4 100644 --- a/apps/twig/src/renderer/App.tsx +++ b/apps/twig/src/renderer/App.tsx @@ -145,14 +145,14 @@ function App() { initialize(); }, []); - // Handle transition into main app (from onboarding completion) + // Handle transition into main app — only show the dark overlay if dark mode is active useEffect(() => { const isInMainApp = isAuthenticated && hasCompletedOnboarding; - if (!wasInMainApp.current && isInMainApp) { + if (!wasInMainApp.current && isInMainApp && isDarkMode) { setShowTransition(true); } wasInMainApp.current = isInMainApp; - }, [isAuthenticated, hasCompletedOnboarding]); + }, [isAuthenticated, hasCompletedOnboarding, isDarkMode]); const handleTransitionComplete = () => { setShowTransition(false); @@ -173,12 +173,7 @@ function App() { const renderContent = () => { if (!isAuthenticated) { return ( - + ); @@ -187,13 +182,7 @@ function App() { // Access check loading state if (hasTwigAccess === null) { return ( - + @@ -207,13 +196,7 @@ function App() { // Access gate: show invite code screen if flag is not enabled if (!hasTwigAccess) { return ( - + ); @@ -221,13 +204,7 @@ function App() { if (!hasCompletedOnboarding) { return ( - + ); diff --git a/apps/twig/src/renderer/assets/images/bw-logo.png b/apps/twig/src/renderer/assets/images/bw-logo.png new file mode 100644 index 000000000..a20cb7c11 Binary files /dev/null and b/apps/twig/src/renderer/assets/images/bw-logo.png differ diff --git a/apps/twig/src/renderer/assets/images/color-logo.png b/apps/twig/src/renderer/assets/images/color-logo.png new file mode 100644 index 000000000..5c4f961d2 Binary files /dev/null and b/apps/twig/src/renderer/assets/images/color-logo.png differ diff --git a/apps/twig/src/renderer/assets/images/robo-zen.png b/apps/twig/src/renderer/assets/images/robo-zen.png new file mode 100644 index 000000000..fd2d5e461 Binary files /dev/null and b/apps/twig/src/renderer/assets/images/robo-zen.png differ diff --git a/apps/twig/src/renderer/assets/images/wordmark-alt.png b/apps/twig/src/renderer/assets/images/wordmark-alt.png new file mode 100644 index 000000000..938b60040 Binary files /dev/null and b/apps/twig/src/renderer/assets/images/wordmark-alt.png differ diff --git a/apps/twig/src/renderer/assets/images/wordmark.png b/apps/twig/src/renderer/assets/images/wordmark.png new file mode 100644 index 000000000..e568369c6 Binary files /dev/null and b/apps/twig/src/renderer/assets/images/wordmark.png differ diff --git a/apps/twig/src/renderer/assets/images/zen.png b/apps/twig/src/renderer/assets/images/zen.png new file mode 100644 index 000000000..babf0bc9e Binary files /dev/null and b/apps/twig/src/renderer/assets/images/zen.png differ diff --git a/apps/twig/src/renderer/components/ConnectivityPrompt.tsx b/apps/twig/src/renderer/components/ConnectivityPrompt.tsx index 376d8c77c..61a01ecd8 100644 --- a/apps/twig/src/renderer/components/ConnectivityPrompt.tsx +++ b/apps/twig/src/renderer/components/ConnectivityPrompt.tsx @@ -28,8 +28,8 @@ export function ConnectivityPrompt({ - Twig requires an internet connection to use AI features. Check - your connection and try again. + PostHog Code requires an internet connection to use AI features. + Check your connection and try again. diff --git a/apps/twig/src/renderer/components/LoginTransition.tsx b/apps/twig/src/renderer/components/LoginTransition.tsx index 6eec6494a..19414c7f6 100644 --- a/apps/twig/src/renderer/components/LoginTransition.tsx +++ b/apps/twig/src/renderer/components/LoginTransition.tsx @@ -19,7 +19,7 @@ export function LoginTransition({ position: "fixed", inset: 0, zIndex: 10000, - background: "var(--cave-charcoal)", + background: "var(--gray-12)", }} initial={{ opacity: 0 }} animate={{ opacity: 1 }} diff --git a/apps/twig/src/renderer/components/ScopeReauthPrompt.tsx b/apps/twig/src/renderer/components/ScopeReauthPrompt.tsx index c2180be09..4b95ce505 100644 --- a/apps/twig/src/renderer/components/ScopeReauthPrompt.tsx +++ b/apps/twig/src/renderer/components/ScopeReauthPrompt.tsx @@ -45,8 +45,8 @@ export function ScopeReauthPrompt() { - Twig has been updated with new features that require additional - permissions. Please sign in again to continue. + PostHog Code has been updated with new features that require + additional permissions. Please sign in again to continue. diff --git a/apps/twig/src/renderer/components/ThemeWrapper.tsx b/apps/twig/src/renderer/components/ThemeWrapper.tsx index 3e3c06fad..6fb794ecb 100644 --- a/apps/twig/src/renderer/components/ThemeWrapper.tsx +++ b/apps/twig/src/renderer/components/ThemeWrapper.tsx @@ -23,8 +23,8 @@ export function ThemeWrapper({ children }: { children: React.ReactNode }) { return ( {data.version ? `Version ${data.version} has been downloaded and is ready to install.` - : "A new version of Twig has been downloaded and is ready to install."} + : "A new version of PostHog Code has been downloaded and is ready to install."} @@ -170,7 +170,7 @@ export function UpdatePrompt() { - Twig is up to date{versionSuffix} + PostHog Code is up to date{versionSuffix} diff --git a/apps/twig/src/renderer/components/ZenHedgehog.tsx b/apps/twig/src/renderer/components/ZenHedgehog.tsx new file mode 100644 index 000000000..c8e22249e --- /dev/null +++ b/apps/twig/src/renderer/components/ZenHedgehog.tsx @@ -0,0 +1,75 @@ +import roboZen from "@renderer/assets/images/robo-zen.png"; +import zenHedgehog from "@renderer/assets/images/zen.png"; +import { useRef, useState } from "react"; + +const DELAY_MS = 400; // calm pause before shaking starts +const GROW_MS = 3500; // time to reach full intensity +const MAX_X = 15; // px +const MAX_ROTATE = 7; // deg +const MIN_FREQ = 8; // Hz at onset +const MAX_FREQ = 26; // Hz at peak + +export function ZenHedgehog() { + const [hovered, setHovered] = useState(false); + const imgRef = useRef(null); + const rafRef = useRef(null); + const enterTimeRef = useRef(null); + + const tick = (now: number) => { + if (!enterTimeRef.current) enterTimeRef.current = now; + const elapsed = now - enterTimeRef.current; + const t = Math.max(0, elapsed - DELAY_MS); + const progress = Math.min(t / GROW_MS, 1); + const amplitude = progress * progress; // quadratic ease-in + + if (amplitude > 0 && imgRef.current) { + const freq = MIN_FREQ + (MAX_FREQ - MIN_FREQ) * progress; + const phase = (now / 1000) * freq * 2 * Math.PI; + const x = Math.sin(phase) * MAX_X * amplitude; + const rotate = Math.sin(phase + 0.5) * MAX_ROTATE * amplitude; + const scale = 1 + Math.sin(phase * 1.7) * 0.03 * amplitude; + imgRef.current.style.transform = `translateX(${x}px) rotate(${rotate}deg) scale(${scale})`; + } + + rafRef.current = requestAnimationFrame(tick); + }; + + const handleMouseEnter = () => { + setHovered(true); + enterTimeRef.current = null; + rafRef.current = requestAnimationFrame(tick); + }; + + const handleMouseLeave = () => { + setHovered(false); + if (rafRef.current) { + cancelAnimationFrame(rafRef.current); + rafRef.current = null; + } + enterTimeRef.current = null; + if (imgRef.current) { + imgRef.current.style.transform = ""; + } + }; + + return ( + // biome-ignore lint/a11y/noStaticElementInteractions: decorative hover animation +
+ +
+ ); +} diff --git a/apps/twig/src/renderer/features/auth/components/AuthScreen.tsx b/apps/twig/src/renderer/features/auth/components/AuthScreen.tsx index bb3b0c6db..bef401dba 100644 --- a/apps/twig/src/renderer/features/auth/components/AuthScreen.tsx +++ b/apps/twig/src/renderer/features/auth/components/AuthScreen.tsx @@ -1,9 +1,9 @@ import { DraggableTitleBar } from "@components/DraggableTitleBar"; +import { ZenHedgehog } from "@components/ZenHedgehog"; import { useAuthStore } from "@features/auth/stores/authStore"; -import { Callout, Flex, Spinner, Text } from "@radix-ui/themes"; +import { Callout, Flex, Spinner, Text, Theme } from "@radix-ui/themes"; import posthogIcon from "@renderer/assets/images/posthog-icon.svg"; -import treeBg from "@renderer/assets/images/tree-bg.svg"; -import twigLogo from "@renderer/assets/images/twig-logo.svg"; +import phWordmark from "@renderer/assets/images/wordmark-alt.png"; import { trpcVanilla } from "@renderer/trpc/client"; import { REGION_LABELS } from "@shared/constants/oauth"; import type { CloudRegion } from "@shared/types/oauth"; @@ -85,211 +85,210 @@ export function AuthScreen() { const errorMessage = getErrorMessage(error); return ( - - + + + - {/* Background */} -
-
- - {/* Left side with card */} - - {/* Scrim behind card area */} + {/* Background */}
- {/* Auth card */} + {/* Right panel — zen hedgehog */} - {/* Logo */} - Twig + + + {/* Left side with card */} + + {/* Auth card */} + + > + {/* Logo */} + PostHog - {/* Error */} - {errorMessage && ( - - {errorMessage} - - )} + {/* Error */} + {errorMessage && ( + + {errorMessage} + + )} - {/* Pending state */} - {isPending && ( - - Waiting for authorization... - - )} + {/* Pending state */} + {isPending && ( + + Waiting for authorization... + + )} - {/* Primary CTA */} - - - - Redirects to PostHog.com - - + {/* Primary CTA */} + + + + Redirects to PostHog.com + + - {/* Region + secondary links */} - - + {/* Region + secondary links */} + + - - {authMode === "login" ? ( - <> - - Don't have an account?{" "} - - - - ) : ( - <> - - Already have an account?{" "} - - - - )} - + + {authMode === "login" ? ( + <> + + Don't have an account?{" "} + + + + ) : ( + <> + + Already have an account?{" "} + + + + )} + + - - {/* Right side - shows background */} -
- + {/* Right side - shows background */} +
+ + ); } diff --git a/apps/twig/src/renderer/features/auth/components/InviteCodeScreen.tsx b/apps/twig/src/renderer/features/auth/components/InviteCodeScreen.tsx index 47281a449..9a71bed91 100644 --- a/apps/twig/src/renderer/features/auth/components/InviteCodeScreen.tsx +++ b/apps/twig/src/renderer/features/auth/components/InviteCodeScreen.tsx @@ -1,8 +1,8 @@ import { DraggableTitleBar } from "@components/DraggableTitleBar"; import { useAuthStore } from "@features/auth/stores/authStore"; -import { Callout, Flex, Spinner, Text } from "@radix-ui/themes"; -import treeBg from "@renderer/assets/images/tree-bg.svg"; -import twigLogo from "@renderer/assets/images/twig-logo.svg"; +import { Callout, Flex, Spinner, Text, Theme } from "@radix-ui/themes"; +import phWordmark from "@renderer/assets/images/wordmark-alt.png"; +import zenHedgehog from "@renderer/assets/images/zen.png"; import { useMutation } from "@tanstack/react-query"; import { useState } from "react"; @@ -25,166 +25,164 @@ export function InviteCodeScreen() { const errorMessage = redeemMutation.error?.message ?? null; return ( - - + + + - {/* Background */} -
-
- - {/* Left side with card */} - - {/* Scrim behind card area */} + {/* Background */}
- {/* Invite code card */} + {/* Right panel — zen hedgehog */} - {/* Logo */} Twig + - + {/* Invite code card */} + - Enter your invite code to get started - + {/* Logo */} + PostHog - {/* Error */} - {errorMessage && ( - - {errorMessage} - - )} + + Enter your invite code to get started + - {/* Form */} -
- - setCode(e.target.value)} - placeholder="Invite code" - disabled={redeemMutation.isPending} - style={{ - width: "100%", - height: "44px", - padding: "0 12px", - border: "1px solid rgba(0, 0, 0, 0.15)", - borderRadius: "10px", - fontSize: "15px", - backgroundColor: "rgba(255, 255, 255, 0.5)", - color: "var(--cave-charcoal)", - outline: "none", - boxSizing: "border-box", - }} - /> + {/* Error */} + {errorMessage && ( + + {errorMessage} + + )} + + {/* Form */} + + + setCode(e.target.value)} + placeholder="Invite code" + disabled={redeemMutation.isPending} + style={{ + width: "100%", + height: "44px", + padding: "0 12px", + border: "1px solid var(--gray-6)", + borderRadius: "10px", + fontSize: "15px", + backgroundColor: "var(--gray-2)", + color: "var(--gray-12)", + outline: "none", + boxSizing: "border-box", + }} + /> + + + + + {/* Log out link */} + - - - {/* Log out link */} - -
- - {/* Right side - shows background */} -
- + {/* Right side - shows background */} +
+ + ); } diff --git a/apps/twig/src/renderer/features/auth/components/RegionSelect.tsx b/apps/twig/src/renderer/features/auth/components/RegionSelect.tsx index 904a4872b..4d8f3fc5e 100644 --- a/apps/twig/src/renderer/features/auth/components/RegionSelect.tsx +++ b/apps/twig/src/renderer/features/auth/components/RegionSelect.tsx @@ -21,7 +21,7 @@ export function RegionSelect({ if (!expanded) { return ( - + {regionLabel} {" \u00B7 "} @@ -52,11 +52,11 @@ export function RegionSelect({ PostHog region - + - @@ -139,23 +132,18 @@ function PlanCard({ p="5" onClick={onSelect} style={{ - backgroundColor: "rgba(255, 255, 255, 0.7)", + backgroundColor: "var(--color-panel-solid)", border: isSelected ? "2px solid var(--accent-9)" - : "2px solid rgba(0, 0, 0, 0.1)", + : "2px solid var(--gray-4)", cursor: "pointer", transition: "all 0.2s ease", - backdropFilter: "blur(8px)", }} > - + {name} {recommended && ( @@ -165,17 +153,10 @@ function PlanCard({ )} - + {price} - + {period} @@ -191,7 +172,7 @@ function PlanCard({ color: "white", } : { - color: "var(--cave-charcoal)", + color: "var(--gray-12)", } } > @@ -207,10 +188,7 @@ function PlanCard({ weight="bold" style={{ color: "var(--accent-9)", flexShrink: 0 }} /> - + {feature.text} diff --git a/apps/twig/src/renderer/features/onboarding/components/FeatureListItem.tsx b/apps/twig/src/renderer/features/onboarding/components/FeatureListItem.tsx index 2efedfac8..6620fe177 100644 --- a/apps/twig/src/renderer/features/onboarding/components/FeatureListItem.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/FeatureListItem.tsx @@ -13,12 +13,23 @@ export function FeatureListItem({ description, }: FeatureListItemProps) { return ( - + - + {title} diff --git a/apps/twig/src/renderer/features/onboarding/components/GitIntegrationStep.tsx b/apps/twig/src/renderer/features/onboarding/components/GitIntegrationStep.tsx index c16217adb..7ad74fad3 100644 --- a/apps/twig/src/renderer/features/onboarding/components/GitIntegrationStep.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/GitIntegrationStep.tsx @@ -7,7 +7,7 @@ import { GitBranch, } from "@phosphor-icons/react"; import { Box, Button, Flex, Skeleton, Text } from "@radix-ui/themes"; -import twigLogo from "@renderer/assets/images/twig-logo.svg"; +import phWordmark from "@renderer/assets/images/wordmark-alt.png"; import { getCloudUrlFromRegion } from "@shared/constants/oauth"; import { useQueryClient } from "@tanstack/react-query"; import { AnimatePresence, motion } from "framer-motion"; @@ -79,8 +79,8 @@ export function GitIntegrationStep({ Twig Connect your git repository - - Twig needs access to your GitHub repositories to create branches, - commits, and pull requests. + + PostHog Code needs access to your GitHub repositories to create + branches, commits, and pull requests. {selectedProject && ( - + {selectedProject.organization.name} @@ -173,10 +166,7 @@ export function GitIntegrationStep({ exit={{ opacity: 0, scale: 0.9 }} transition={{ duration: 0.2 }} > - + )} @@ -216,7 +206,7 @@ export function GitIntegrationStep({ GitHub connected @@ -224,7 +214,7 @@ export function GitIntegrationStep({ size="1" align="center" style={{ - color: "var(--cave-charcoal)", + color: "var(--gray-12)", opacity: 0.7, }} > @@ -248,7 +238,7 @@ export function GitIntegrationStep({ No git integration found @@ -256,7 +246,7 @@ export function GitIntegrationStep({ size="1" align="center" style={{ - color: "var(--cave-charcoal)", + color: "var(--gray-12)", opacity: 0.7, }} > @@ -298,21 +288,14 @@ export function GitIntegrationStep({ alignItems: "center", }} > - @@ -323,7 +306,7 @@ export function GitIntegrationStep({ variant="ghost" loading={isFetching} onClick={handleRefresh} - style={{ color: "var(--cave-charcoal)" }} + style={{ color: "var(--gray-12)" }} > Refresh status @@ -347,7 +330,7 @@ export function GitIntegrationStep({ variant="ghost" loading={isFetching} onClick={handleRefresh} - style={{ color: "var(--cave-charcoal)" }} + style={{ color: "var(--gray-12)" }} > Refresh status @@ -370,20 +353,13 @@ export function GitIntegrationStep({ size="3" variant="ghost" onClick={onBack} - style={{ color: "var(--cave-charcoal)" }} + style={{ color: "var(--gray-12)" }} > Back {hasGitIntegration ? ( - @@ -392,7 +368,7 @@ export function GitIntegrationStep({ size="3" variant="outline" onClick={handleContinue} - style={{ color: "var(--cave-charcoal)" }} + style={{ color: "var(--gray-12)" }} > Skip for now diff --git a/apps/twig/src/renderer/features/onboarding/components/OnboardingFlow.tsx b/apps/twig/src/renderer/features/onboarding/components/OnboardingFlow.tsx index 2a194451d..a57a964a3 100644 --- a/apps/twig/src/renderer/features/onboarding/components/OnboardingFlow.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/OnboardingFlow.tsx @@ -1,8 +1,8 @@ import { DraggableTitleBar } from "@components/DraggableTitleBar"; +import { ZenHedgehog } from "@components/ZenHedgehog"; import { useAuthStore } from "@features/auth/stores/authStore"; import { SignOut } from "@phosphor-icons/react"; -import { Button, Flex } from "@radix-ui/themes"; -import onboardingBg from "@renderer/assets/images/tree-bg.svg"; +import { Button, Flex, Theme } from "@radix-ui/themes"; import { AnimatePresence, motion } from "framer-motion"; import { useOnboardingFlow } from "../hooks/useOnboardingFlow"; @@ -21,120 +21,130 @@ export function OnboardingFlow() { }; return ( - - - - {/* Background */} -
-
- - {/* Content */} + + + + {/* Background */} +
+ + {/* Right panel — zen hedgehog */} + + + + + {/* Content */} - - {currentStep === "welcome" && ( - - - - )} + + + {currentStep === "welcome" && ( + + + + )} - {currentStep === "billing" && ( - - - - )} + {currentStep === "billing" && ( + + + + )} - {currentStep === "org-billing" && ( - - - - )} + {currentStep === "org-billing" && ( + + + + )} - {currentStep === "git-integration" && ( - - - - )} - - + {currentStep === "git-integration" && ( + + + + )} + + - - + + + - + ); } diff --git a/apps/twig/src/renderer/features/onboarding/components/OrgBillingStep.tsx b/apps/twig/src/renderer/features/onboarding/components/OrgBillingStep.tsx index a4126924f..4e0eb32d7 100644 --- a/apps/twig/src/renderer/features/onboarding/components/OrgBillingStep.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/OrgBillingStep.tsx @@ -10,7 +10,7 @@ import { Skeleton, Text, } from "@radix-ui/themes"; -import twigLogo from "@renderer/assets/images/twig-logo.svg"; +import phWordmark from "@renderer/assets/images/wordmark-alt.png"; import { logger } from "@renderer/lib/logger"; import { useQueryClient } from "@tanstack/react-query"; import { AnimatePresence, motion } from "framer-motion"; @@ -77,8 +77,8 @@ export function OrgBillingStep({ onNext, onBack }: OrgBillingStepProps) { > Twig Choose your organization - - Select which organization should be billed for your Twig usage. + + Select which organization should be billed for your PostHog Code + usage. @@ -137,9 +135,8 @@ export function OrgBillingStep({ onNext, onBack }: OrgBillingStepProps) { px="4" py="3" style={{ - backgroundColor: "rgba(255, 255, 255, 0.7)", - border: "2px solid rgba(0, 0, 0, 0.1)", - backdropFilter: "blur(8px)", + backgroundColor: "var(--color-panel-solid)", + border: "2px solid var(--gray-4)", }} > @@ -183,7 +180,7 @@ export function OrgBillingStep({ onNext, onBack }: OrgBillingStepProps) { size="3" variant="ghost" onClick={onBack} - style={{ color: "var(--cave-charcoal)" }} + style={{ color: "var(--gray-12)" }} > Back @@ -192,10 +189,6 @@ export function OrgBillingStep({ onNext, onBack }: OrgBillingStepProps) { size="3" onClick={handleContinue} disabled={!effectiveSelectedOrgId || isLoading || isSwitching} - style={{ - backgroundColor: "var(--cave-charcoal)", - color: "var(--cave-cream)", - }} > {isSwitching ? "Switching..." : "Continue"} {!isSwitching && } @@ -228,20 +221,19 @@ function OrgCard({ py="3" onClick={onSelect} style={{ - backgroundColor: "rgba(255, 255, 255, 0.7)", + backgroundColor: "var(--color-panel-solid)", border: isSelected ? "2px solid var(--accent-9)" - : "2px solid rgba(0, 0, 0, 0.1)", + : "2px solid var(--gray-4)", cursor: "pointer", transition: "all 0.2s ease", - backdropFilter: "blur(8px)", }} > {name} @@ -260,7 +252,7 @@ function OrgCard({ flexShrink="0" style={{ borderRadius: "50%", - border: isSelected ? "none" : "2px solid rgba(0, 0, 0, 0.2)", + border: isSelected ? "none" : "2px solid var(--gray-7)", backgroundColor: isSelected ? "var(--accent-9)" : "transparent", display: "flex", alignItems: "center", diff --git a/apps/twig/src/renderer/features/onboarding/components/ProjectSelect.tsx b/apps/twig/src/renderer/features/onboarding/components/ProjectSelect.tsx index 3d2c3a32e..82c4eb13a 100644 --- a/apps/twig/src/renderer/features/onboarding/components/ProjectSelect.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/ProjectSelect.tsx @@ -28,7 +28,7 @@ export function ProjectSelect({ if (projects.length <= 1) { return ( - + {projectName} ); @@ -36,7 +36,7 @@ export function ProjectSelect({ return ( - + {projectName} {" · "} diff --git a/apps/twig/src/renderer/features/onboarding/components/StepIndicator.tsx b/apps/twig/src/renderer/features/onboarding/components/StepIndicator.tsx index c5f613519..17d1d45ac 100644 --- a/apps/twig/src/renderer/features/onboarding/components/StepIndicator.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/StepIndicator.tsx @@ -22,9 +22,7 @@ export function StepIndicator({ height: 8, borderRadius: "50%", backgroundColor: - index <= currentIndex - ? "var(--accent-9)" - : "rgba(255, 255, 255, 0.3)", + index <= currentIndex ? "var(--accent-9)" : "var(--gray-5)", transition: "background-color 0.3s ease", }} /> diff --git a/apps/twig/src/renderer/features/onboarding/components/WelcomeStep.tsx b/apps/twig/src/renderer/features/onboarding/components/WelcomeStep.tsx index 1fffaeb81..d2c3cf63e 100644 --- a/apps/twig/src/renderer/features/onboarding/components/WelcomeStep.tsx +++ b/apps/twig/src/renderer/features/onboarding/components/WelcomeStep.tsx @@ -7,7 +7,7 @@ import { Stack, } from "@phosphor-icons/react"; import { Box, Button, Flex } from "@radix-ui/themes"; -import twigLogo from "@renderer/assets/images/twig-logo.svg"; +import phWordmark from "@renderer/assets/images/wordmark-alt.png"; import { FeatureListItem } from "./FeatureListItem"; interface WelcomeStepProps { @@ -49,18 +49,24 @@ const FEATURES = [ export function WelcomeStep({ onNext }: WelcomeStepProps) { return ( - + {/* Left side - features list */} Twig - + {FEATURES.map((feature) => ( - diff --git a/apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx b/apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx index 159cd9dc8..6e981f4d8 100644 --- a/apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx +++ b/apps/twig/src/renderer/features/sessions/components/GeneratingIndicator.tsx @@ -49,7 +49,7 @@ export function GeneratingIndicator({ startedAt }: GeneratingIndicatorProps) { className="select-none text-accent-11" style={{ userSelect: "none", WebkitUserSelect: "none" }} > - + {ACTIVITIES[activityIndex]}... (Esc to interrupt diff --git a/apps/twig/src/renderer/features/settings/components/FolderSettingsView.tsx b/apps/twig/src/renderer/features/settings/components/FolderSettingsView.tsx index 5c0e4bc3a..0ed1232e8 100644 --- a/apps/twig/src/renderer/features/settings/components/FolderSettingsView.tsx +++ b/apps/twig/src/renderer/features/settings/components/FolderSettingsView.tsx @@ -123,9 +123,9 @@ export function FolderSettingsView() { Option 2: Remove the repository - This will remove the repository from Twig, including all - associated tasks and their workspaces. This action cannot be - undone. + This will remove the repository from PostHog Code, including + all associated tasks and their workspaces. This action + cannot be undone.