Finalize Overview Graphs visual design

[ta-lind]

Specs: https://xd.adobe.com/spec/37a39e55-d94b-43ab-a73e-d405f6b502b3/#screen/2e5abb57-0a08-4cb9-924e-f66b08ed3512/Overview%20–%20Graphs%20-%20Specs

A few more details to finalise the graphs in Overview.

1 Color of the border strokes changed to #F3F6F6 2 The smaller strokes next to each date and value can be removed. 3 Bg color of the hover changed to #E9F8FE 4 All of the bars need rounded edges at both top and bottom ends, currently some under Tickets do not have. 5 Overall the graph should be slightly more condensed in width, currently seems to be a fair bit wider than in the visual design example. 6 Balance Graph data: This should only display Available and Locked funds. Immature belongs to Tickets category. 7 Tickets Graph: This should only display ticket statuses, Immature, Live, Voted and perhaps also Revoked (which can be with color #FD704A) @alexlyp can perhaps comment on the graphs data, whether another reason for showing those like that.

[alexlyp]

So I was able to complete a few of these issues,

Lingering issues that will require extra work:

1) Stacked graphs in recharts don't play well with have rounded tops and bottoms. Instead of overlayed, they are purely stacked on top so the bottom of one value is seperated from the top of another. 2) Unable to have a different axis stroke color while having a different axis label color.

[ta-lind]

Optics wise that out-of-ordinary grey (2.) is the definitely the biggest grind on the eyes. Any way it could perhaps be masked out then or drawn over with another element?

[alexlyp]

That would be a huge undertaking. Let me try to hotwire things to make it work.