Skip to content

[Chart UX] Icons appear inactive in the default state

Summary

When the graph is in default state, all icons are gray. That suggests they're all inactive. In fact the zoom icon can be selected. The icons' display seems intermittent, with the icons "flashing" between active and inactive as you hover over them.

Screenshot_2022-08-04_at_09.53.23

The idea of this issue is to understand whether this is the desired state or not. If not, a frontend implementation plan will follow.

Implementation requirements

  • Increase the spacing between the icons (making it 8px)
  • Darken the color of the default state of each icon to gray-500
  • Remove the "suggested" state after zoom (all icons should stay din the default gray-500 unless hovered)
  • Use a gray-900 for a hover state
  • Increase the spacing between the top line of the chart and the icons to 16px

It should look like this after implementing these changes:

image

Edited by Amelia Bauerly