icon-holder white background

[yblock]

The icon-holder has a white background set which results in an awkward drop shadow. On the blog/webinars page, looking at the icons used here and lower on the page for the subjects I notice that there are varying formats and transparencies used. Some are webp, some png, some have transparency and some do not. I believe this background should be removed and the images should be exported correctly (example for how this looks once fixed on the right)

https://github.com/openstax/os-webview/blame/4ad6767a93d70698a7dec778cfa14904f62fc8b8/src/app/components/explore-by-subject/explore-by-subject.scss#L19

[erikayvonne]

Colby was able to modify by changing CSS - will be a FE change.

[RoyEJohnson]

If I change the background to transparent, it's differently not ideal (seeing the border through the icon). Is this what we want to go with? (It looks good with the business icon because it has a horizontal line in just the right place.) I guess SVGs could have a white mask layer or something.

[yblock]

I think this is correct, the art would just need some white fill added.

[erikayvonne]

Let’s pause on making this change. @andymuddimer should take a look - and I think we’ll need to be mindful about what we request from Micah due to capacity.

[yblock]

Just for context it takes about 10 seconds to use white bucket fill and save the image, of which there are only a few. (which is what I did when testing this and demoing this change, without any training in design even! haha)

[erikayvonne]

The issue is not the size of this individual request - I know this is very small - but when we're sending many small things folks' way, that ends up adding up. It's a bummer we're not able to work at full capacity, but that's where we're at. We'll be able to get to this eventually - I'd like to keep this in the backlog.

[micah-howard]

Hi! I'm happy to update these icons to include a white fill. I should be able to have all of these over by Friday. Is the below list everything? Are PNGs okay?

Webinar (64x64px)

• Business
• College Success
• Computer Science
• Humanities
• Math
• Nursing
• Science
• Social Sciences

Blog (52x52px)

• Business
• College Success
• Computer Science
• Humanities
• Math
• Nursing
• Science
• Social Sciences

[andymuddimer]

@micah-howard

The files are stored in the Snippets for the Subjects, Blog Collections, and Webinar Collections
File types are any of AVIF, GIF, JPG, JPEG, PNG, WEBP. Maximum filesize: 2.0 MB.
PNG would give us the transparency - Yes
For sizes I believe the system converts the files to the correct size for each space
Please just work at your normal size and I will resize if needed

Subjects are all we need - just once - I can then upload to the Snippets

Please fill the "center" with white and leave the outside transparent
(let me know if you have questions)

[micah-howard]

Thanks @andymuddimer! I'll work with the current subject size (612x612px) for updates.

[micah-howard]

@yblock @andymuddimer @erikayvonne Here are updated icons with a white fill: https://drive.google.com/drive/folders/1HQ_ZQFGZupzP1AB0kO0P5VQJuT9p46Gp?usp=sharing

[andymuddimer]

@yblock @RoyEJohnson I have added all the new icons to the Subject Snippets on staging.. Can you try the change again to see if the box line looks correct now? Or do I need to do this on Dev?

[erikayvonne]

thanks so much @micah-howard !

[yblock]

Yes the images look good for this half of the work (and the images can be placed on prod without issue. The other half is whatever route @RoyEJohnson would like to take so there is not a white background added to the container.

Screen.Recording.2024-03-15.at.12.31.46.PM.mov