YALB-1164 - OPAC: Update admin toolbar icons | 1461 - OPAC: Implement new admin colors and fonts

[joetower]

YALB-1164 - OPAC: Update admin toolbar icons | YALB-1461 - OPAC: Implement new admin colors and fonts

Description of work

• Adds new icons for the admin toolbar
• Implements new colors and fonts throughout the admin theme and frontend layout-builder

Functional testing steps:

Testing: YALB-1164 - OPAC: Update admin toolbar icons

• Visit a page such as: https://pr-358-yalesites-platform.pantheonsite.io/components
• Verify you see the new icons
• Interact with the unpublish and publish button - note the icons change color. I used very slightly tinted green and red color values as more saturated colors would cause contrast issues.

yalb-1164-icons.mp4

---

Testing: YALB-1461 - OPAC: Implement new admin colors and fonts

• Visit a page such as: https://pr-358-yalesites-platform.pantheonsite.io/components
• Edit the layout and interact with the layout-builder editing interface
• Move a block like this:

yalb-1461-admin2.mp4

• Verify things are themed and that nothing is illegible due to color contrast
• Browse through various admin pages and make sure the theme doesn't cause color contrast issues
• Some examples:
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/yalesites/dashboard
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/reports/views-plugins
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/config/media
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/yalesites/footer
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/yalesites/settings
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/reports/status
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/content
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/people
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/modules/update
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/config
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/appearance
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/config/content/layout-builder-browser
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/reports/editoria11y
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/reports/editoria11y/issues
  • https://pr-358-yalesites-platform.pantheonsite.io/admin/admin/reports/editoria11y/pages

yalb-1461.mp4

[github-actions]

Created multidev environment pr-358 for yalesites-platform.

[miketullo95]

Hello! This is look great! I noticed in alert settings there seems to be some text color issues going on. Screenshot below.

Will keep looking through to find more things

[joetower]

@miketullo95 I pushed a fix up for the text issue on blocks, as you pointed out, and some additional fixes for the content creation pages.

I'm going to keep testing and fixing things locally, but please continue outlining anything else you notice. Thank you!

[dblanken-yale]

It looks good. I'll let the others weigh in on contrast and the like, but I am not noticing any major issues.

[miketullo95]

Morning! Here are a few small things:
On the media library, the toggle between grid and table may have some contrast issues

Media modal pagination

Not sure if this falls under this effort, but when selecting from the linkit module there is some funky color stuff here

button icon hover color in taxonomy manager

last one, again, might not be this effort specifically, but the yale icon seems to be cut-off now

[miketullo95]

this looks great! last thing i noticed. In /layout we are getting the wool background on content areas which i think we just want white

[joetower]

@miketullo95 Thank you!

This should be ready for a retest. Each item you referenced should be fixed (including the wool background change in layout-builder).

https://pr-358-yalesites-platform.pantheonsite.io

👍

[joetower]

@miketullo95 Apologies, please hold off testing. I just saw one more item. I'll keep you posted. Thanks!

[joetower]

@miketullo95 Okay, this should be ready to test again.

Please make sure to add/edit layout-builder content and make sure text renders as it should.

[miketullo95]

Accordion items heading contrast:

same issue, different area, on button link component:

component item hover icon color contrast

on smaller screen size, toolbar has odd color contrast

I went through and added/edited all blocks in layout builder and there seems to be no rendering issues on my end

[joetower]

@miketullo95 Awesome, thank you so much!

I pushed up fixes for each item. Could you please give this another look?

Thank you!

[miketullo95]

text highlight color should have more contrast:

One small suggestion - could we change gin-bg-app: to something lighter like #707070? (this passes a11y). In page setup and admin pages the dark color could be jarring to some, so hopefully making it lighter would be easier on the eyes and give some more distinction between the background and the admin bars.

[joetower]

@miketullo95 Are you saying that you'd like it to look something like this?

instead of this?

If this looks good I can double-check anywhere else (in our overrides) that may be using gin-bg-app and make that change.

[miketullo95]

@joetower yeah, that looks great! And I think that is the last of my findings. After this change, this is approved from me 👍

[joetower]

@miketullo95 Okay, this should be ready for another look. Thank you for all your testing on this. It's a big change. 👍

[miketullo95]

It seems like on nodes im getting the wool color again :(

on /edit I'm not tho

[joetower]

@miketullo95 Whoops! Looks like some overrides got removed. I added them back and things should be looking correct again. Apologies for that.

[miketullo95]

no worries, this looks great! amazing work