tweak: Removes connect button overlay transparency

[dhedey]

(Replaces #303 which was against my fork before I had write permissions)

Overview

There were a few issues with the connect button theming:

• The transparency was causing nasty contrast issues when overlaying dark/light mode on different backgrounds.
• Some of the UI controls and text had low contrast against the background

This PR attempts to fix this by:

• Removing transparency of the the background, and choosing a suitable static colour to make all the UI and text have acceptable contrast
• Tweaked some of the internal colours very slightly, so that all UI elements are visible and have contrast, and distinguishable hover states

Screenshots below...

Other thoughts / outstanding questions

• Should the light mode background be lighter?
  • But if you do this, you get contrast issues with the buttons (which current tint to white on hover)
  • A workaround would be to have the buttons start white (like the RadMatt card) and tint darker on hover. But this seemed like too big of a change to make without input from design.
• Why is the Sharing tab shorter than the Requests tab?
  • Perhaps we should make these the same size?
  • Will raise a separate PR for this => tweak: Margins and dapp names #307
• If a dApp doesn't configure a dApp name, then we say Sharing with which looks ... weird?
  • Perhaps we should say Sharing with dApp?
  • Will raise a separate PR for this => tweak: Margins and dapp names #307

Light Mode

Before on black/white background

• The buttons looked washed out / hard to distinguish on a white background (the designs only covered slightly grey backgrounds)
• It is unusable on a black background

After (background independent)

Dark Mode

Before on black/white background

• The buttons are hard to distinguish on a black background (the designs only covered slightly grey backgrounds)
• It looks fine on a white background

After (background independent)

[github-actions]

🎉 This PR is included in version 2.2.1-dev.1 🎉

The release is available on:

• npm package (@dev dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀