fix(client): map progress ui

[ahmaxed]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)
• My pull request targets the main branch of freeCodeCamp.
• I have tested these changes either locally on my machine, or GitPod.

[moT01]

Thanks for jumping on this @ahmaxed. I gave it a quick look - here's what I see:

Firefox:

Safari:

Looks good in Chrome. I played with it a bit - couldn't quite get it right, but have some ideas. Let me know if you want to pair up on it for a bit. Since deployments are sort of blocked until we get this looking a little better, maybe it's okay to just have it look good in Chrome temporarily if we need to.

I also kind of feel like only the core curriculum needs the numbers. Not sure if we should just omit the icons for the rest - I think I would be fine with that - or we could maybe use some neutral icons, like just a circle without the number, and the ribbons if isCert

[ahmaxed]

We can definitely pair on it. I agree, the items outside of the curriculum set should not have numbers or arrows.

[ahmaxed]

[Sembauke]

The arrows seem no longer centred.

[moT01]

I added some logic to see if the user has completed all the challenges in a superblock - if so, the icon with the double circle shows up:

^
1: none
2: isCert
3: isCert & allChallengesCompleted
4: same as 2
5: allChallengesCompleted

[moT01]

Not sure if we want this, but I made the arrows a little thicker too:

Let me know if I should revert

[ahmaxed]

Tom's changes are LGMT.

[ShaunSHamilton]

LGTM 👍

Though, the arrows do not look like arrows: