Closed mmmavis closed 3 years ago
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!
Yup, that sounds like an awesome solution. We implemented .btn-secondary
(external link's version) in the same way as well :)
@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.
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!
@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 👍
@mmmavis @sabrinang Awesome! Just created a PR :) thank you
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:
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