Admin Bar Notification Icon

[johnhooks]

paaljoachim on WordPress Slack left the following suggestions after testing out the plugin.

Bell icon top right corner shows a red color dot. To me it gives a signal that there are notifications to check. I would assume that no dot will signal that all notifications are read. Hovering the bell icon the cursor should change to a hand with a finger showing that it can be clicked.

• Add the functionality to remove the red dot when there are no new notifications (maybe make it a blue dot).
• Add { cursor: pointer; } to the bell icon.

[paaljoachim]

The update bubble in WordPress is red like so:

When the plugins are updated the red bubble is gone.
So perhaps the blue color #2271b1 used in general in WordPress could replace the red dot.

[johnhooks]

@paaljoachim I just prefer blue, I find it a less obnoxious color to indicate new notifications. GitHubs notifications are flagged as new with blue.

[paaljoachim]

I see that Outlook/hotmail and Slack uses a red dot in the tab.
I will keep my eyes open and see what colors various online sites use.

[erikyo]

I had actually already thought about this a little bit, and the NotificationHubIcon component accepts a className argument that can also be used to color the dot.

In my mind the dot color is animated (in runtime) and at the time it is illustrated in the demo (2 new notifications) it should actually be red and the default state should be blue (as the rest of the Wordpress UI interface).

[erikyo]

tried to change the color of the notice doc, but tell me what are your throughs...

IMHO the blue color that is used is a bit low-contrast compared to the background and is really not very visible.
the lighter blue color is the color that is used for the hover link

The color used are what I found here some times ago but it seems changed a bit and probably we need to update (although I don't think it will improve the contrast much).

wp-feature-notifications/src/styles/vars.scss

Lines 7 to 9 in 4d46e31

	$color-red: #d94f4f; // Alert Red
	$color-blue: #0071a1; // Blue Dark 900
	$color-blue-light: #72aee6; // Blue 20

[johnhooks]

@erikyo The more important issues are to remove the dot when there are no new messages and also change the cursor type on hover to pointer. The color blue was just a suggestion, I agree with concerns about contrast.

[EdithAllison]

This issue is linked to the new design tracked in #357