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

[Dimitar]

I see from where you are coming from but I'm not sure if agree with you for this specific case.

It is generally agreed that red is used for notifications (see the [old facebook design](https://img.freepik.com/free-vector/facebook-notification-icons_23-2147675572.jpg), [iOS](https://i.stack.imgur.com/hx1fz.png) and [Android](https://i.stack.imgur.com/i3SS9.jpg)). `bg-info` could work but it seems like it may be less visible. See also the two comments from the referenced issue:

> LinkedIn does a reasonable job of showing counts attached to top nav, we could imitate this.

> <img border="1" width="531" alt="Screen Shot 2021-04-23 at 4 07 20 PM" src="https://user-images.githubusercontent.com/58730/115937941-fda7c600-a44d-11eb-80a5-9dd67b34100d.png">

_Originally posted by @migurski in https://github.com/openstreetmap/openstreetmap-website/issues/3182#issuecomment-825986025_

> At bare minimum I think at least making the little "unread" notification on the upper right corner more obvious would be a big improvement, similar to migurski 's comment above with the Linkedin example. Making it red or blink or flash or something that signals "hey you, look here!" 

_Originally posted by @aawiseman in https://github.com/openstreetmap/openstreetmap-website/issues/3182#issuecomment-825990205_
            

Just for reference, here is how it would look using `bg-info`. In my opnion it looks a bit odd. It's also not "eye catching" like the red colour.
![image](https://github.com/openstreetmap/openstreetmap-website/assets/19364673/5e2abcfc-7875-4d3d-859c-55414570a1ee)

And near water features:
![image](https://github.com/openstreetmap/openstreetmap-website/assets/19364673/6650ad75-7f7c-47b7-abc4-4deed18b3201)


> As an aside, I'd be happy to see colour consistency between the number shown on the collapsed and expanded menus

It's the same colour. I assume that the different vertical sizes play some game with the perception of the red colour. You can check it with a colour picker.

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

Message ID: <openstreetmap/openstreetmap-website/pull/4070/c1625265850 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20230707/93547cc0/attachment.htm>