Fix action bar design

Created by: felixfbecker

Part of #9462 (closed)

We set a custom padding that made the buttons hard to distinguish, assymmetric and inconsistent with the rest of the UI. I simply removed the custom padding so it's consistent with all other buttons. We definitely have the space to do that.

I added a 1px gap between buttons so that they are distinct even in "pressed" state. Not fully sure about this one but I settled on it looking better than without.

I also fixed a tiny 1px gap at the bottom of each item by making them stretch.

This also fixes the font color differences between buttons that did not have an href, and the different cursor. In the process I converted the component to a function component.

Action items that are too wide are now clipped with ellipsis.

I modified the "pressed" background color to be a tad lighter. The problem before was that it was the same color as the frame of the action bar, so they didn't appear "pressed", but actually a layer above the bar. With this slight modification I find the state is much better communicated.

On hover action items receive a background lighter than the pressed state. This made a huge difference imo in making them feel like interactive UI elements.

Please note that the gifs are not fully representative because the color resolution is small.