Improve button contrast

[lidel]

@ericronne mentioned this problem in WebUI and now I cannot unsee it everywhere 👀 💦

Problem

Buttons have low contrast and look "disabled" and literally look the same when "disabled" and "enabled":

• Disabled

  • 

• Enabled + hover

  • 
  • 

Proposed change

It would be useful to change background of "enabled" buttons to something like bg-navy from ipfs-css:

[terichadbourne]

@lidel Do you remember where you were / what you were doing when you got a disabled button that looks like this? We do have at least one case where we disable it (when you haven't yet uploaded files, but that case contains a hover state with a message that makes it abundantly clear why you can't click.

(I'm open to color changes also, just want to make sure we also know when/why it's happening in case there's other stuff to address.

[ericronne]

Fyi disabled buttons don't have to meet the 4.5:1 guideline mark.
https://www.w3.org/TR/WCAG21/#contrast-minimum

[lidel]

@terichadbourne it was /#/regular-files-api/05 (i cropped the screenshot, below is full version of disabled button):

What I meant is that disabled button looks kinda ok, the problem is contrast of active ones :)

[ericronne]

I'd recommend that the inactive button color be a tint of the active button, rather than a different color altogether. So if the submit button will be blue when active, it could look something like this when inactive (alphaed back blue for the fill, alphaed back white text):

[terichadbourne]

Thanks for the suggestions @lidel & @ericronne. @dominguesgm could you take a stab at this one this week?

[terichadbourne]

closed via #342