Dev, Stage & Live tabs need to visually differentiate

[SOTFB]

Issue description

These tabs that are found here and there for a project in Cloud:

Please make both them, and the content they switch between differentiate somehow. And that vague pink indicator they have. My apologies on before hand but it's so bad. 🙏

I don't know how many times I've either made a mistake that's definitely mine for sure, or for any reason had more than one browser tab open and got confused, sometimes a browser tab can reload for variues reasons and then you're back on Dev - and more - there are so many things that can go wrong - where you add, edit, copy or whatever you do, you do it, I do it, on the wrong environment tab. But please make the UI help us make better descisions.

To avoid this phenomenon in Backoffice, we've written an extension ourselves that keep Backoffice's top menu bar blue when local, beige in Dev, green in Stage, and red in Live. It's amazing - you automatically know where you are and can pay the correct level of attention to the things you need. It's a major relief for the mental workload. However the Portal uses overly DOM stuff and shadow:ing etc so injecting JS or CSS to sort this out ourselves was too much of a pain, and not reliable as you guys could make one little change and we're back on square one.

Thanks for improving this and making cloud more effortless. 🙏

[c9mb]

Just a note of caution here... relying on colours to identify details such as this works until the user can't identify colours. I worked as a programmer on a govt project once, rolled it out to spec, only to find that a significant number of the staff required to use it were colour blind... doh!

[sajumb]

Hello @SOTFB and @c9mb,

Thank you for sharing your valuable insights on improving environment differentiation in our Portal. @SOTFB, your detailed account of the challenges and the potential for user error highlights a crucial area for improvement.

@c9mb, your point on accessibility is well-taken and underscores the importance of inclusive design. We are committed to ensuring that our platform is accessible to all users, regardless of their abilities.

In light of these discussions, we will soon be adopting the visual design of the Umbraco Cloud portal, introducing new colors and brand visuals. This transition presents a prime opportunity for us to revisit and enhance how different environments are displayed and interacted with.

I will be passing on your insights directly to the UX designer of the Portal and the Umbraco UI Library, as this issue may indeed be more general and applicable across different parts of our platform.

Thank you for the great insight!