Unify button style

[dominik-zeglen]

This PR unifies button style in dashboard. Changes flat button's background to gray (when focused), so it doesn't look like primary button when hovered over. Also applies minor hotfixes to UI.

[codecov-io]

Codecov Report

Merging #1419 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1419   +/-   ##
=======================================
  Coverage   83.41%   83.41%           
=======================================
  Files         128      128           
  Lines        5795     5795           
  Branches      665      665           
=======================================
  Hits         4834     4834           
  Misses        803      803           
  Partials      158      158

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8ee14e1...8f0434a. Read the comment docs.

[patrys]

This is not consistent with how Google uses material design. IMHO we should not be giving flat buttons a background at all (that's why they are flat). Why not increase the contrast of the text color instead?

[dominik-zeglen]

Background appears only when button is focused - in its "idle" state it's really flat. Like 100% Material Design specification flat. Also, I followed guide lines from here:
https://material.io/guidelines/components/buttons.html#buttons-flat-buttons

[patrys]

Sorry, I thought you made the background grey on hover, not on focus.

[patrys]

Wait, you do set background color on hover. This should be :focus, :active below is correct.

[patrys]

You've now changed :active and :focus to be identical but they're not supposed to be per spec.

Is there a color change on :hover for flat buttons?

[dominik-zeglen]

No, reverted that. Also you are right, we should set in css only :focus, press effect is done by JS.