Animate the Progress Connector Line in the Onboarding Stepper

[Vedant1703]

📋 Description

The ProgressStepper component in the onboarding flow shows step circles connected by a thin horizontal line. When a step is completed, the circle turns green — but the connector line between steps stays a static gray (bg-[#30363d]) regardless of progress.

A more polished UX would show the connector line fill with green as each step is completed, giving users a clear visual sense of how far along the onboarding flow they are.

---

📍 File to Change

frontend/app/onboarding/components/progress.tsx

---

🔍 Current Code (line ~40)

{idx !== steps.length - 1 && (
  <div className="flex-1 mx-4 h-[1px] bg-[#30363d] hidden sm:block" />
)}

The connector line is always the same gray color.

---

✅ What To Do

Conditionally apply a green color to the connector line when the step to the left of it is completed:

{idx !== steps.length - 1 && (
  <div
    className={`flex-1 mx-4 h-[1px] hidden sm:block transition-colors duration-500 ${
      isCompleted ? 'bg-[#238636]' : 'bg-[#30363d]'
    }`}
  />
)}

Optional enhancement: Use a gradient that transitions from green to gray exactly at the step boundary:

className={`flex-1 mx-4 h-[1px] hidden sm:block ${
  isCompleted
    ? 'bg-[#238636]'
    : isCurrent
    ? 'bg-gradient-to-r from-[#238636] to-[#30363d]'
    : 'bg-[#30363d]'
}`}

---

🏁 Acceptance Criteria

• The connector line between completed steps is green (#238636)
• The connector line between pending steps remains gray (#30363d)
• (Optional) The connector line for the current step shows a gradient from green to gray
• A transition-colors class is added for a smooth animation when steps change
• No existing stepper functionality is broken

---

💡 Technical Hints

• The isCompleted variable is already computed for each step in the .map() — just use it on the connector <div>
• The connector <div> is the hidden sm:block div right after the step circle
• transition-colors duration-500 gives a smooth fill animation

---

🚀 Getting Started

1. Fork the repository
2. Create a branch: git checkout -b fix/issue-12-stepper-connector-animation
3. Edit frontend/app/onboarding/components/progress.tsx
4. Run: cd frontend && npm run dev → go to /onboarding to preview
5. Open a Pull Request!