CE-294 Make the love and favorite icons colorblind friendly

[DNin01]

The problem

Currently, colorblind people can have a hard time telling if they have loved/favorited a project because there isn't a major or consistent brightness difference between the inactive and active love/favorite buttons. See this comparison of the buttons when you haven't clicked them and when you have:

I grayscaled this image and the loved icon was ever so slightly darker than the unloved icon and the favorited icon was a bit brighter than the unfavorited icon.

The solution

Make the inactive love/favorite icons an outline and fill them in when active.

[edelfino11]

Hi @DNin01 @benjiwheeler I'm a computer science student, and we are currently working towards contributing to an open source GitHub for one of our classes. I would love to take this issue and work towards solving it! Is it ok if I take this issue to work on it? I'm not sure if anyone else is already assigned to this issue, so asking just in case.

[DNin01]

Is it ok if I take this issue to work on it? I'm not sure if anyone else is already assigned to this issue, so asking just in case.

@edelfino11 Don't mind if you do 🙂

[benjiwheeler]

@edelfino11 Thanks so much for offering to do this change! We're checking internally with some folks working on accessibility design, and we'll get back to you!

[edelfino11]

No problem! @benjiwheeler I figure it might be fixed by simply not filling the svg graphic with the gray color. Also, do you happen to know how to make the main page load properly when I run it locally? When I npm start the repo locally, it looks like this:

So I can't check if the change I made fixes the problem. If there's a slack, I can also ask there instead! Sorry for the inconvenience!

[DNin01]

Fixed by #7264.