Skip to content

(feat) Notification bell doesn't show notifications#993

Open
coderatomy wants to merge 1 commit into
unstructuredstudio:masterfrom
coderatomy:notify
Open

(feat) Notification bell doesn't show notifications#993
coderatomy wants to merge 1 commit into
unstructuredstudio:masterfrom
coderatomy:notify

Conversation

@coderatomy

@coderatomy coderatomy commented Nov 8, 2023

Copy link
Copy Markdown
Collaborator

Summary

Implements notifiers in case of numbers.
Closes #992

Changes

  • Adds notifications number

Screenshots

image
Screenshot from 2023-11-09 02-02-02

@tuxology

Copy link
Copy Markdown
Member

@coderatomy Thanks for this. The current design does not match exactly the suggested UX in #992 (notification circle should be half outside the main bell circle). I also think we should experiment with increasing the font size of the notification count. In addition, have you tested the behavior when all notifications are read already? Does the icon work as expected (it should not show 0, but should just disappear).

@tuxology tuxology left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See comments

@coderatomy

Copy link
Copy Markdown
Collaborator Author

Everything works as expected. For the design @mehreeee updated it to this

@mehreeee

Copy link
Copy Markdown

Everything works as expected. For the design @mehreeee updated it to this

hi @tuxology I iterated and updated the design to this current one. Maybe we could try increasing the font for greater legibility.

@NdibeRaymond NdibeRaymond left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

test the functionality and it works @tuxology. Just a few comments and we can merge this @coderatomy . Nice work!

ref={buttonRef}
className={clsx(classes.notification, commonClasses.iconBox)}
style={{ cursor: 'pointer' }}
style={{ position: 'relative', cursor: 'pointer' }}

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you help move this to notificationButtonStyles.js?

</span>
)
}
<Notifications style={{ color: colors.primary, fontSize: 24 }} />

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this too. move to notification style file

@NdibeRaymond

Copy link
Copy Markdown
Collaborator

Something we should probably do in the future is to implement push notification. Right now users don't get notified unless they perform some kind of action that results in the frontend hitting the notification endpoint

@tuxology

Copy link
Copy Markdown
Member

@coderatomy Ok, I see that there was an update to the design 🤔 Its fine, we go with this design then. Note that the icon+notification bubble together is centered and has consistent padding along the sides so it looks balanced. In your implementation we see the notification bubble touching the outer circle edge. In addition, lets do changes requested by @NdibeRaymond as well Thanks @NdibeRaymond for testing. We'll merge this soon.

@NdibeRaymond NdibeRaymond added create-test-vm this issue needs a test vm to be auto created by github action and removed create-test-vm this issue needs a test vm to be auto created by github action labels Dec 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Notification bell doesn't show notifications

4 participants