Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

icon-holder white background #2480

Open
yblock opened this issue Sep 26, 2023 · 14 comments
Open

icon-holder white background #2480

yblock opened this issue Sep 26, 2023 · 14 comments
Assignees

Comments

@yblock
Copy link
Contributor

yblock commented Sep 26, 2023

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

Screenshot 2023-09-26 at 12 46 46 PM Screenshot 2023-09-26 at 12 46 40 PM
@erikayvonne
Copy link

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

@RoyEJohnson
Copy link
Contributor

RoyEJohnson commented Oct 5, 2023

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.

Image

@yblock
Copy link
Contributor Author

yblock commented Oct 6, 2023

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

@erikayvonne
Copy link

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
Copy link
Contributor Author

yblock commented Oct 6, 2023

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
Copy link

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
Copy link

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
Copy link

@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
Copy link

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

@micah-howard
Copy link

@andymuddimer
Copy link

@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
Copy link

thanks so much @micah-howard !

@yblock
Copy link
Contributor Author

yblock commented Mar 15, 2024

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

@erikayvonne
Copy link

i'll make an issue on our new jira board for the remaining code-dependent work on this card - so once the images are uploaded this card can be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants