Display that new user notification are available

jodator commented 2 years ago

⚠️ Blocked by

https://github.com/Joystream/hydra/issues/438

Context

Annotate new notifications (activities) that appeared since the last opening of the notification in the panel:

Scope

Functionality

[ ] Expose memberId on the qn events
[ ] Filter out notifications based on memberId for actively selected memebers
[ ] When membership not selected, ~display content for all accounts connected in guest user mode~ display a version with "select membership to view relevant notifications"
[ ] Notifications should work both on Firefox and Chrome :) ⚠️ to be done together with #2660

Design and UX treatment

We talked about adding a blue background, but it is already used in the neutral notification icons. This also applies to the other shades, so I propose to leave the black shade + enhance the message with the red dot identifier. After closing the notification window, the notifications are faded out (marked as read)

[ ] If the user opened the notification window and then got another notification we should add: • an indicator (red circle) on the bell icon • an indicator on each new notification message icon • a background underneath each new notification message

Additionally:

[ ] Please leave the light black background for the notification icon only for the hover action, for the active one leave the blue bell as you have prepared. I have prepared all the states that will occur for this icon, next to the above screen
[ ] Clicking on the notification icon again should close it

Design

👉 Figma File

MattAugustynowicz commented 2 years ago

If the user opened the notification window and then got another notification we should add: • an indicator (red circle) on the bell icon • an indicator on each new notification message icon • a background underneath each new notification message

We talked about adding a blue background, but it is already used in the neutral notification icons. This also applies to the other shades, so I propose to leave the black shade + enhance the message with the red dot identifier. After closing the notification window, the notifications are faded out (marked as read)

👉 Figma File

Additionally: • Please leave the light black background for the notification icon only for the hover action, for the active one leave the blue bell as you have prepared. I have prepared all the states that will occur for this icon, next to the above screen • Clicking on the notification icon again should close it

dmtrjsg commented 2 years ago

@MattAugustynowicz after Bedeho's feedback on a related ticket; and taking a second thought on Members <> Accounts, suggesting to show only member-specific notifications here and create a version for logged out users, line of copy on the empty state? Or do we just hide the bell? :)

Moving back to design BL to think about it sometime this week.

MattAugustynowicz commented 2 years ago

👉Figma Link

dmtrjsg commented 2 years ago

@thesan pls scope out QN tickets to support this one..

thesan commented 2 years ago

This task require the notification to be filterable by membership. Here's a proposed solution to achieve this: https://github.com/joystream/pioneer/issues/3023

Joystream / pioneer