[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.
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
- For space between icons see: https://echarts.apache.org/en/option.html#toolbox.itemGap
- For color see: https://echarts.apache.org/en/option.html#toolbox.feature.saveAsImage.iconStyle.color
- For positioning see: https://echarts.apache.org/en/option.html#toolbox.top (and other properties such as left, right etc...)
It should look like this after implementing these changes:
Edited by Amelia Bauerly