Download button on Publication Page is off-brand

[mmmavis]

Describe the bug

Download button on Publication Page is off-brand. I didn't check Article Page but the button there might be off-brand as well.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://foundation.mozilla.org/en/insights/trustworthy-ai-whitepaper/
2. Inspect the "Download PDF" button (default state and hover state)
3. Button is in a different style than what we have in the style guide

Expected behavior

Button should follow style guide. Need to verify this with designers but I'm guessing the button should be in dark theme .btn-primary styling. e.g., we need to make sure on hover, the download icon is black instead of white.

Screenshots

Default state

Hover state

[danielfmiranda]

Hi @mmmavis I have a quick question

It appears that the download icon rendered in the button is doing so with a white SVG in the CSS: download-button::before { ... background-image: url(../_images/glyphs/download-file.svg); }

My first idea to resolve this, without needing a second SVG, is to use this in the CSS: .download-button:hover:before { filter: brightness(0); }

This then achieves the desired result on hover,

Does this sound like a good solution?

Thanks!

[mmmavis]

Yup, that sounds like an awesome solution. We implemented .btn-secondary (external link's version) in the same way as well :)

[mmmavis]

@danielfmiranda as noted in the ticket description - don't forget to check with designers to see if we indeed wanna make the icon go black on hover.

[danielfmiranda]

Awesome! Thank you @mmmavis

Hi @sabrinang I was wondering if you can confirm that the icon changing to black on hover is the desired, on-brand result? Thank you!

[sabrinang]

@mmmavis thanks for catching this!

@danielfmiranda Yes the icon should be black like the label too since it is using the dark theme primary button style 👍

[danielfmiranda]

@mmmavis @sabrinang Awesome! Just created a PR :) thank you