Skip to content

UI: Style Roadmap Dashboard Progress Bars with Active Theme Palette #26

Description

@Rowrow620

First Timers Only

This issue is reserved for developers who are new to AlgoBuddy or open-source contributing. The goal of this issue is to guide you step-by-step through making your first UI contribution to AlgoBuddy!

Description of the Issue

In the NeetCode 150 Mastery Dashboard view, the category progress bars under Category Completion Breakdown render as solid pitch-black (#000000) bars regardless of which theme is active.

In Clean Light mode especially, these solid black progress bars contrast harshly with the light background and look unstyled.

Proposed Solution

Update egui::ProgressBar in render_fullscreen_roadmap_dashboard to use theme-aware fill colors (p.cyan or p.emerald from ThemePalette) so progress bars dynamically adapt to dark and light themes.

Implementation Steps

  1. Open src/app.rs and navigate to render_fullscreen_roadmap_dashboard.
  2. Locate the egui::ProgressBar::new(...) instantiation around line 1415.
  3. Add theme-aware fill styling using .fill(if solved_in_cat == total_in_cat { p.emerald } else { p.cyan }) (or matching palette colors).
  4. Run cargo run locally to test the progress bar appearance across VS Code Dark, Cyber Navy, and Clean Light themes.
  5. Run cargo test --all and cargo fmt --all -- --check to ensure build health.

Acceptance Criteria

  • Category progress bars dynamically match active theme colors.
  • Progress bars look clean and readable in both dark and light modes.
  • cargo test --all passes 100%.
  • Pull request targets the dev branch.

Step-by-Step Contribution Guide

  1. Claim this issue: Comment below to let us know you'd like to work on this!
  2. Fork and Branch: Create a branch off dev named issue-ui-progressbar-theme.
  3. Make and Test Changes: Test locally with cargo run.
  4. Submit PR: Open a Pull Request targeting dev.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions