[openstreetmap/openstreetmap-website] Change the way notifications about messages appear (PR #4070)

[Andy Allan]

> When it comes to UX, using red for notification badges is a standard approach in popular design systems such as Android, iOS, and [Material.io](https://m3.material.io/components/badges/overview)

Sure, I understand that other design systems use red for notifications, but that doesn't mean that we have to. There's a balance to be struck between making the badge useful, without going down the "attention economy" UX (anti-)patterns found elsewhere. And as @pnorman points out, there's other examples of using a distinct-but-not-red notification colour too.

But in particular, the code in this PR is using `bg-danger`. It's a deliberate approach to use meaningful (i.e. not colour) names in our styles. This is particularly important when considering themes e.g. dark themes. So `danger` is an incorrect way to describe notification badges, even if they both happen to be red.

> @gravitystorm suggested using `bg-info` which is more cyan than blue.

If the bg-info colour doesn't really work for our colour scheme, then I'm happy to have suggestions for changing it. We haven't fully resolved our custom colours and the bootstrap defaults, so I know some combinations jar with each other. That might be better discussed separately though.

> `bg-primary` would work better since it's actually blue and should stand out more. I will add a screenshot with that variant tommorow.

Happy to see more suggestions. I still think that this is a "info" kind of thing rather than "primary", and if we use "info" and it looks wrong we should consider why that might be.






-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/4070#issuecomment-1651861551
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/4070/c1651861551 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230726/7b565e77/attachment-0001.htm>