From aa347c90476aef3deabd5f5fe9730a3a1e09f839 Mon Sep 17 00:00:00 2001
From: gagan <gaganp000999@gmail.com>
Date: Wed, 24 Jun 2026 15:35:22 +0530
Subject: [PATCH] fix(onboarding): center step connector line & refresh welcome
 layout (#640)

* fix(onboarding): center step connector line with circles

The connector line was vertically centered against the circle+label
column, landing below the circle's center. Absolutely position the
label below the circle so the row height equals just the circle and
items-center aligns the line to the circle's center.

* feat(onboarding): refresh welcome layout & indicator spacing

- Place logo inline to the right of the Welcome heading
- Move the tagline badge below the heading with more breathing room
- Add space between the step indicator and step content
---
 .../components/onboarding/step-indicator.tsx  |  6 ++--
 .../onboarding/steps/welcome-step.tsx         | 32 ++++++++-----------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx b/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx
index 6fae6dbb..8aa4e9e9 100644
--- a/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx
+++ b/apps/x/apps/renderer/src/components/onboarding/step-indicator.tsx
@@ -26,7 +26,7 @@ export function StepIndicator({ currentStep, path }: StepIndicatorProps) {
   const currentIndex = steps.findIndex(s => s.step === currentStep)
 
   return (
-    <div className="flex items-center gap-2 mb-8 px-4">
+    <div className="flex items-center gap-2 mb-14 px-4">
       {steps.map((s, i) => (
         <React.Fragment key={s.step}>
           {i > 0 && (
@@ -37,7 +37,7 @@ export function StepIndicator({ currentStep, path }: StepIndicatorProps) {
               )}
             />
           )}
-          <div className="flex flex-col items-center gap-1.5">
+          <div className="relative flex flex-col items-center">
             <div
               className={cn(
                 "size-8 rounded-full flex items-center justify-center text-xs font-medium transition-all duration-300",
@@ -54,7 +54,7 @@ export function StepIndicator({ currentStep, path }: StepIndicatorProps) {
             </div>
             <span
               className={cn(
-                "text-[11px] font-medium transition-colors duration-300",
+                "absolute top-full mt-1.5 whitespace-nowrap text-[11px] font-medium transition-colors duration-300",
                 i <= currentIndex ? "text-foreground" : "text-muted-foreground"
               )}
             >
diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx
index 9a660507..18dc7307 100644
--- a/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx
+++ b/apps/x/apps/renderer/src/components/onboarding/steps/welcome-step.tsx
@@ -12,15 +12,21 @@ export function WelcomeStep({ state }: WelcomeStepProps) {
 
   return (
     <div className="flex flex-col items-center justify-center text-center flex-1">
-      {/* Logo with ambient glow */}
+      {/* Logo + main heading on the same level */}
       <motion.div
-        initial={{ opacity: 0, scale: 0.8 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 0.5, ease: [0.16, 1, 0.3, 1] }}
-        className="relative mb-8"
+        initial={{ opacity: 0, y: 8 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.2 }}
+        className="flex items-center gap-4 mb-4"
       >
-        <div className="absolute inset-0 size-16 rounded-2xl bg-primary/10 blur-xl scale-[2.5]" />
-        <img src="/logo-only.png" alt="Rowboat" className="relative size-16" />
+        <h1 className="text-3xl font-bold tracking-tight">
+          Welcome to Rowboat
+        </h1>
+        {/* Logo with ambient glow */}
+        <div className="relative shrink-0">
+          <div className="absolute inset-0 size-12 rounded-2xl bg-primary/10 blur-xl scale-[2.5]" />
+          <img src="/logo-only.png" alt="Rowboat" className="relative size-12" />
+        </div>
       </motion.div>
 
       {/* Tagline badge */}
@@ -28,21 +34,11 @@ export function WelcomeStep({ state }: WelcomeStepProps) {
         initial={{ opacity: 0, y: 6 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.15 }}
-        className="inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3.5 py-1.5 text-xs font-medium text-muted-foreground mb-6"
+        className="inline-flex items-center gap-2 rounded-full border bg-muted/50 px-3.5 py-1.5 text-xs font-medium text-muted-foreground mb-10"
       >
         <span className="size-1.5 rounded-full bg-green-500 animate-pulse" />
         Your AI coworker, with memory
       </motion.div>
-
-      {/* Main heading */}
-      <motion.h1
-        initial={{ opacity: 0, y: 8 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2 }}
-        className="text-3xl font-bold tracking-tight mb-3"
-      >
-        Welcome to Rowboat
-      </motion.h1>
       <motion.p
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}