From caa80f7c075e25e8d2343a8be8babe80c51bb66f Mon Sep 17 00:00:00 2001
From: gagan <gaganp000999@gmail.com>
Date: Wed, 24 Jun 2026 15:42:31 +0530
Subject: [PATCH] fix(onboarding): inline completion checkmark & widen
 indicator gap (#641)

- Remove the circular background and pulsing ring behind the completion
  checkmark; place the tick inline to the right of the "You're All Set!"
  heading
- Increase spacing between the step indicator and step content
---
 .../components/onboarding/step-indicator.tsx  |  2 +-
 .../onboarding/steps/completion-step.tsx      | 37 +++++++------------
 2 files changed, 15 insertions(+), 24 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 8aa4e9e9..d0b41991 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-14 px-4">
+    <div className="flex items-center gap-2 mb-20 px-4">
       {steps.map((s, i) => (
         <React.Fragment key={s.step}>
           {i > 0 && (
diff --git a/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx b/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx
index 2b32309a..2f5d550c 100644
--- a/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx
+++ b/apps/x/apps/renderer/src/components/onboarding/steps/completion-step.tsx
@@ -13,34 +13,25 @@ export function CompletionStep({ state }: CompletionStepProps) {
 
   return (
     <div className="flex flex-col items-center justify-center text-center flex-1">
-      {/* Animated checkmark */}
+      {/* Title with checkmark on the right */}
       <motion.div
-        initial={{ scale: 0 }}
-        animate={{ scale: 1 }}
-        transition={{ type: "spring", stiffness: 260, damping: 20, delay: 0.1 }}
-        className="relative mb-8"
-      >
-        {/* Pulsing ring */}
-        <motion.div
-          initial={{ scale: 0.8, opacity: 0.6 }}
-          animate={{ scale: 1.5, opacity: 0 }}
-          transition={{ duration: 1.2, repeat: 2, ease: "easeOut" }}
-          className="absolute inset-0 rounded-full bg-green-500/20"
-        />
-        <div className="relative size-20 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
-          <CheckCircle2 className="size-10 text-green-600 dark:text-green-400" />
-        </div>
-      </motion.div>
-
-      {/* Title */}
-      <motion.h2
         initial={{ opacity: 0, y: 8 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 0.25 }}
-        className="text-3xl font-bold tracking-tight mb-3"
+        className="flex items-center gap-3 mb-3"
       >
-        You're All Set!
-      </motion.h2>
+        <h2 className="text-3xl font-bold tracking-tight">
+          You're All Set!
+        </h2>
+        <motion.span
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ type: "spring", stiffness: 260, damping: 20, delay: 0.35 }}
+          className="shrink-0"
+        >
+          <CheckCircle2 className="size-9 text-green-600 dark:text-green-400" />
+        </motion.span>
+      </motion.div>
 
       <motion.p
         initial={{ opacity: 0 }}