Template vs content editing UX: notification hard to see against dark background

[annezazu]

While doing some early testing of #49980, I noticed that the notification around editing a template is hard to see when using a darker background. This obviously applies for any notification in the Site Editor but feels important to consider if we're relying on it to indicate a path for a user to take for editing purposes.

hard.to.see.black.background.mov

[noisysocks]

Technically this is an issue with all notifications. Should we add a border or shadow to our toast notifications? cc. @SaxonF

[annezazu]

Talking with @joedolson about this today at WCEU -- he brought up a great point around how the notifications have no proximity to the action you're taking. Worth considering from a design perspective and with these sorts of section based editing.

[noisysocks]

@SaxonF @jameskoster: How should we address this?

[SaxonF]

I think we should address this more globally as a notification issue with content vs template editing as an example. I'm not really sure how we'd get around the colour issue. Switching to white background (matching modals, dropdowns) might help as shadow helps with contrast against white background. We could also tinker with animation or position (e.g. bottom centred) to make it more visible on appear and look at introducing icons in different scenarios.

@annezazu could we reframe this as a notification/toast improvement focusing on increasing visibility?

[annezazu]

That totally works!

[beckej13820]

I just want to leave a +1 comment about what @annezazu and @joedolson said.

Please remember that for first time users of Site Editor experience, the first template they may try to edit is the header template.

I was completely unaware of the notification in the lower left hand corner of the screen, because I was trying to edit near the top of my screen. I think the location of the alert is the most important thing.