Improve star highlighting behavior

[AdrianaCeric]

Previously, hovered stars were a lighter yellow. This could be misinterpreted as a half-star. So, I am making the highlight on hover a darker yellow
Inspired by this tutorial's hovering behaviour.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
atlrides-survey	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2023 3:26pm
qa-survey	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2023 3:26pm
st-survey	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 23, 2023 3:26pm

[AdrianaCeric]

Making this a CSS-only change (e.g., setting :hover to fill the star with yellow) was difficult for some reason. Also, instead of the boxed outline, would an underline make sense and maybe look cleaner re: #18

[amy-corson-ibigroup]

If you set the fill in the star svg to currentColor, you can set the color of the svg from the css, and use the :hover pseudo-class!

Could we look at some ways to accomplish what you're doing here (or something similar) with pure css? I don't mind the effect it creates, but I'd love to avoid a lot of states and props being introduced if we can avoid it!

[AdrianaCeric]

I'm not sure how to achieve the same effect where previous stars are highlighted with purely css, but I think this solution is cleaner. Let me know!

[amy-corson-ibigroup]

This is getting there! I think the issue with this functionality is that there's no visible :hover on the yellow stars! I'd love to see a hover on both the selected and deselected stars. I've added some comments on a way to approach this, but let me know if you want to hop on a call and I can better explain!

[AdrianaCeric]

Thanks for the feedback and help Amy! Right now I think the simplest way to go about this is to just highlight the hovered star a darker yellow. Let me know

[amy-corson-ibigroup]

Looking really good! I have a nitpicky suggestion for the colors on the stars/hover states, but happy to leave that up to you and the second reviewer! This works as-is

[miles-grant-ibigroup]

Great cleanup! Code looks much cleaner. Not sure how I feel about the dimmed star color, but it's a good start

[amy-corson-ibigroup]

I'd just use hex codes here rather than using a brightness filter twice. Also, right now the selected stars get darker, and the unselected stars get brighter, which is looking a little messy. Can we just do like:

.star {
color: #8C8C8C;
}

.star:hover {
color: #666666
}

.selected {
color: #ffda1f
}

.selected:hover {
color: #ffb300;
}

[amy-corson-ibigroup]

I'd also add a transition on these just to make it a little smoother!

[miles-grant-ibigroup]

Good enough for now!

[amy-corson-ibigroup]

Thank you!