Improve rainbow badge icon

replayio / design

Tasks for the Replay design team

1 stars 0 forks source link

Improve rainbow badge icon #56

Closed jasonLaster closed 2 years ago

jasonLaster commented 2 years ago

It seems like we'd be more consistent if the button did not have a border

jonbell-lot23 commented 2 years ago

Agree, that and a better icon are on my list

jonbell-lot23 commented 2 years ago

This is a more general item around making a better icon so I changed the issue title. These are four items to address at once:

[ ] Better background
[ ] Better visuals
[ ] Figure out the border
[ ] Make it play nicely with the filter icon

It's actually best practice for filter to use the fill to represent state (see below). Which means using a border. Which might mean the badge itself might end up with a border too. To be designed.

Here's the standard way it's used:

jonbell-lot23 commented 2 years ago

Figma page: https://www.figma.com/file/mAotNZRv6M5X0zHIFKPzFY/?node-id=12395%3A100714

jasonLaster commented 2 years ago

Moving this to @souporserious and intentionally broadening the scope so that the button animates on hover, the picker animates out, and the picker badges pop on hover.