Open Nic-Sevic opened 1 year ago
This is fixed in #78221 - Thanks @dognose24! and shipped with D113773-code.
@kangzj Thanks for shipping with the Odyssey Stats build! 🚢
Hey @dognose24 It looks like this partially fixed things but the color of the notice on the lefthand side is still getting overwritten. Currently it seems that regardless of the color it's supposed to show up as it's showing as grey
Hi, @Nic-Sevic! Could you give me more clues (e.g., screenshots) to demonstrate the remaining styling issue? The notice styling on my Atomic site seems reasonable.
Hi @dognose24, when I check my sites I'm still seeing the notice like
when it should be like
Are you maybe looking on a self-hosted site rather than a WoA site? Or maybe something in your dev site isn't fully matching?
I confirmed the issue was caused by the .notice__icon-wrapper
styles of wpcomsh
overridden by Calypso Notice component styles imported via Odyssey Stats.
Since the notice component would be used spreadly inside Calypso, changing the component styles to CSS modules might break specific existing styling. I would prefer to increase the specificity of the wpcomsh
notice from the source, and the changes look reasonable as well.
I've run into some styling issues coming from the odyssey-stats
styles too, this time that the wp-calypso styles for .notice:not(.wpcomsh-notice)
is too broad, applying to wp-admin core notices too.
For example, it's visible in the Events widget on self-hosted sites using Jetpack Stats:
Ideally, the component imported from Calypso which styles .notice
probably needs to be scoped to body.calypso .notice
or similar.
https://github.com/Automattic/wp-calypso/blob/trunk/apps/odyssey-stats/src/styles/wp-admin.scss
I've run into some styling issues coming from the odyssey-stats styles too, this time that the wp-calypso styles for .notice:not(.wpcomsh-notice) is too broad, applying to wp-admin core notices too.
Yes, we are conscious that specific resolutions for reported conflict styles might still cause similar issues in the future.
Ideally, the component imported from Calypso which styles .notice probably needs to be scoped to body.calypso .notice or similar.
Scoping the Calypso Notice
component styles could be a fundamental solution. However, I am still determining the impact of refactoring the Calypso Notice
component usage with customized overriding styles, which could also cause potential issues.
This issue has been marked as stale. This happened because:
No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.
Impacted plugin
None / Other
Quick summary
The styling of admin notices seems to be getting overwritten by the styling here: dde63222
Notices initially load correctly and then the odyssey stats styling is applied. This is happening only on site.com/wp-admin and not the /wp-admin/something pages seems to be happening with all admin notices
Steps to reproduce
A clear and concise description of what you expected to happen.
admin notice styling should be the same on all wp-admin pages, not overwritten
Expect it to look something like this (left sidebar color would vary)![2023-06-14 at 14 57](https://github.com/Automattic/jetpack/assets/47717887/e1669926-7356-4a8f-934d-4a1db0b91f60)
What actually happened
the notice is instead styled like![2023-06-14 at 14 58](https://github.com/Automattic/jetpack/assets/47717887/0439bca3-64af-4fb7-b0b1-d641755d9aca)
Impact
All
Available workarounds?
No but the platform is still usable
Platform (Simple and/or Atomic)
Atomic
Logs or notes
No response