feat(game): unify softcore and progress styles with other pages

[wescopeland]

This PR adjusts some of the styles on the game page so softcore progress matches how it's displayed elsewhere on the site (eg: user profiles and the completion progress page). Right now on prod there is a discrepancy in how softcore progress is represented, which is fixed by this PR.

This is done by adjusting the colors on progress bars and the achievement distribution chart.

Before

---

After

[Jamiras]

While I understand the desire for the changes, I find it harder to see small sections of softcore bars. There's a lot less contrast between grey and yellow than blue and yellow.

Before:

After:

Also, there's still other places that need to be updated - Completion Progress on the profile page being the most obvious.

The Recent Progress/History graphs seem to be using blue for hardcore and grey for softcore, which aligns with the points shown in the upper right corner of the screen.

[wescopeland]

I find it harder to see small sections of softcore bars. There's a lot less contrast between grey and yellow than blue and yellow.

I agree it is harder to see when the bars are this tiny. I've made a slight tweak on these bars to change the softcore color from neutral-500 to neutral-400/80. This raises the brightness ever so slightly.

Also, there's still other places that need to be updated - Completion Progress on the profile page being the most obvious.

Agreed. I wanted to tackle this in a separate PR as that component is complex enough that it needs a Blade rewrite.

[Jamiras]

I've made a slight tweak on these bars to change the softcore color from neutral-500 to neutral-400/80. This raises the brightness ever so slightly.

Raising the brightness actually lowers the contrast and makes it harder to separate the two colors.

neutral-500 is #737373.

neutral-400/80 is #848484:

At #606060, the bars are distinct:

Could also add a gap (which seems to be present in the Achievement Distribution graph). This is #848484 with a margin-left:1px gap:

Here's the "sliver" bar in each of the above styles:

What do you think about going back to neutral-500 and adding the gap?

[wescopeland]

What do you think about going back to neutral-500 and adding the gap?

I like that idea. Done in latest.