Make the "Masquerade as" link more visible

Problem/Motivation

Currently, it's very easy to miss the "Masquerade as this user" link, since it easily blends in with all the other content.

Steps to reproduce

Install the module, and easily miss that Masquerade is now available.

Proposed resolution

Make it pop!

Also, the link gets inserted at the bottom of the page. Perhaps placing the link at the top of the page, under "Status messages" or at the very top of "Main page content" could be worth considering?

Currently

Better?

CSS

a.masquerade-button {
  background-color: #0876c0;
  color: white;
  display: inline-block;
  font-size: 18px;
  padding-right: 10px;
}

.masquerade-button img {
  height: 25px;
  width: 25px;
}

HTML

<a href="#" class="masquerade-button">
  <img src="https://git.drupalcode.org/project/masquerade/-/avatar.png">
  Masquerade as This User
</a>

Remaining tasks

• Update the mark up
• Add the CSS (inline, or as a file?)

User interface changes

API changes

Data model changes