search

WordPress / wp-feature-notifications

WP Feature Notifications - a proposal to modernise the way in which WordPress handles emails, admin notices and user notifications
https://wordpress.github.io/wp-feature-notifications/
GNU General Public License v2.0
189 stars 19 forks source link

Admin Bar Notification Icon #280

Open johnhooks opened 1 year ago

johnhooks commented 1 year ago

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.

paaljoachim commented 1 year ago

The update bubble in WordPress is red like so: Screenshot 2023-04-18 at 23 04 24

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

IMHO the #0071a1 blue color that is used is a bit low-contrast compared to the background and is really not very visible. the #72aee6 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). https://github.com/WordPress/wp-feature-notifications/blob/4d46e31c3c8ac973995795dc7b9dd9ab0b66ddfc/src/styles/vars.scss#L7-L9

johnhooks commented 1 year ago

@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 commented 1 year ago

This issue is linked to the new design tracked in https://github.com/WordPress/wp-feature-notifications/issues/357