[Feature]: Roadmap Step Progress Styling

[smrithipiedy]

What problem does this solve?

Currently, the roadmap timeline on the project detail page (/project/<id>) uses identical styling for all steps. When a user marks a step as completed:

• The text gets struck through and faded.
• The dot changes to a solid green color.
• However, the vertical connector line connecting the steps remains a static solid gray (var(--border)).
• The future/uncompleted steps use a solid purple/indigo dot, which makes them look active, creating a lack of clear visual hierarchy and progress flow between completed, active, and future steps.

Proposed solution

Update the roadmap styles in static/style.css to dynamically change the timeline indicators and line states:

1. Future/Uncompleted Steps: Show them with hollow circles (using the page surface background and a purple border) and a dashed gray vertical connector line.
2. Completed Steps: Keep the solid green dot, and change the vertical connector line below it to a solid green line.
3. Keep the completed text fading and strikethrough logic.
   This CSS-only change will instantly create a high-fidelity visual progress tracker without needing any modifications to the JavaScript state management.

Alternatives considered

We considered dynamically injecting an .active class to the current step via JavaScript. However, since the timeline checkbox state is already fully tracked via the .completed class (toggled on the .roadmap-step parent), a pure CSS sibling and selector approach is cleaner, faster, and avoids modifying core JS code.

Which part of the app does this affect?

Project detail page

Estimated complexity

Medium (one function and one template change)

Before submitting

• I searched existing issues and this has not been requested before.
• This change would benefit contributors beyond my own use case.