Improve notices style

[javierarce]

Description

While working on this issue I noticed that we have a problem with the, well, notices. The current implementation differs noticeably (pun intended) from the original design.

Here's a comparison between the implementation (left) and the ideal version (right)

Here are the things I think we should fix:

• The line height and text color
• The color and position of the X
• Internal paddings (review)

The color differences are especially important because they have lower contrast than the designed version.

Step-by-step reproduction instructions

You can show an error notice enabling the Navigation experiment and creating a menu with an empty or a duplicate name:

1. Go to Gutenberg > Experiments.
2. Enable the Navigation screen experiment.
3. Create a menu with the name "Hello"
4. Repeat step 3 to create a duplicated menu.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[javierarce]

The notice that appears when there is a backup post looks better, by the way, ad I see why the X is not really black: that color is reserved for the hover version.

I now wonder if the problem with the notice error is only related to that specific location I mentioned in the original issue.

[javierarce]

Here's another problematic notice that appears when you try to upload an unsupported file to the Media Block (the actual text should also be improved, by the way)

[Mamaduka]

The "X" button position is my fault in Navigation Screen. I will fix it in follow-up PR. 🙇

[javierarce]

Thanks, @Mamaduka!… I wasn't sure if that was a localized problem or something more general, I should have looked for more examples before creating this issue :/

[Mamaduka]

@javierarce fixed the button position issue in this PR #34903.

[javierarce]

@Mamaduka thanks! I reviewed it and saw that the fix works.

I'll leave this issue open to address the other problems I described.

[karmatosed]

@javierarce just to clarify I think there might be some confusion of the wp-admin notices and editor ones - there are different ones. For example, the border to the side is one used in certain cases there. Overall in WP notices need some unification, so I am trying though to work out what after the fixes is left to work on here, could you perhaps pull out a list of what remains to help?

[javierarce]

Overall in WP notices need some unification, so I am trying though to work out what after the fixes is left to work on here, could you perhaps pull out a list of what remains to help?

I hadn't planned anything beyond fixing the issues I described in the first message.

[talldan]

related - #33853

There's actually no implementation of a blue info notice at the moment, so that might be something to address alongside the styling fixes.

[Mamaduka]

Closing in favor of #67662.