Improve the "Show images" message and styling

[nimishavijay]

Is your feature request related to a problem? Please describe.

If an email contains images, there is a message saying "The images have been blocked to protect your privacy" with a "Show" button. However, the styling of this with the full sized button makes it even more present than the content of the email sometimes.

Describe the solution you'd like

Just a couple of small changes could make the message look better

Before: After:

• text color is changed to --color-text-maxcontrast
• instead of a button, "Show images" has normal weight, no icon, and an underline to indicate that it is clickable.

Describe alternatives you've considered

No response

Additional context

No response

[miaulalala]

I'd like an underline tbh, just to accentuate that there is an action possible.

[nimishavijay]

You're right! It was there in the specs, but not the mockup, fixed it!

[marcoambrosini]

@nimishavijay @jancborchardt this uses the actions component which is about to be overhauled by @raimund-schluessler. Can we wait till then, look at all the patterns that we want to introduce and decide if this is one of them? Also, should a dropdown menu open when clicking on something that's styled like a link? Could we use a tertyary or tertiary-no-background button instead?

[marcoambrosini]

I hacked the vue docs a bit to preview how this would look

https://user-images.githubusercontent.com/26852655/182381149-80438c43-4d99-4c04-9031-651ac687d626.mov

.

[GretaD]

I hacked the vue docs a bit to preview how this would look

using actions? so we need to change the action on vue repo, thats what you're saying, right?