Addons-frontend: Implement yellow stars for user's add-on rating

[kumar303]

Per UX, the add-on rating stars should be yellow whenever they indicate the site user's personal rating. They should be gray in all other cases (for example: cumulative ratings in add-on listings).

Consult the UX specs before implementing. The spec currently looks like:

[bobsilverberg]

The current ratings use svg files for display, specifically:

• dim-star.svg
• full-star.svg
• half-star.svg

All of which are found in /src/ui/components/Rating/img

I assume we'll need some new images for the gold stars? Who might be able to produce those?

[bobsilverberg]

So @kumar303 was kind enough to show me how to extract the gold outlined star from the sketch file, but I think we also need a full gold star. I assume we don't need a gold half-star, as gold is only used for the UI when a user can set a rating, and users cannot set half-star ratings. But I imagine that the UI would show all outlined stars if a user has not provided a rating, and then once they have rated an add-on we would show filled in gold stars to indicate their rating.

Are those assumptions correct @pwalm?

[AlexandraMoga]

Verified as fixed on AMO-dev, FF58 (Win10, Android 7.0)

Interactive stars are now yellow:

[dessant]

Please consider using a different tone of yellow. My gut reaction is to not touch the rating widget 😋, it pierces your eyes on the white background.

Here's a yellow that is more pleasant in my opinion.

[pwalm]

@dessant Thanks for your feedback, but we have a design system in place that unifies things like colour, so we are unable to change that.

[wesinator]

there is still confusing implementation of the star colour

9077