Proposed UI Update

[theochawla]

I’ve included a new block icon (the notif bell with a stroke through it). I also think the notifications could be condensed by reducing the line spacing and removing the third line of text. I’ve included a text hierarchy with type size and spacing. They are in px right now, would having them in ems or something similar be more helpful? I also think the drop shadow could be a little softer and more centered under the notification to better show its upper boundary.

Screen.Recording.2022-02-04.at.3.21.51.PM.mov

[andrii-i]

Thanks for the images, they are very helpful.
Having all font sizes in relative units like ems would be super helpful and would make the fonts look better on screens/windows of non-standard size.

[theochawla]

Here are the type sizes in ems!

[andrii-i]

Angela, let's schedule a UI implementation review for when possible. Key question: Material UI that is used in Notifications UI uses "rem", not "ems" and that's what I used in the implementation. Does it works or recommended sizes should be adjusted?

Current look:

[andrii-i]

Wasn't able to update the design of the notification popup (bottom right corner) because we use a 3rd-party extension for it. Created issue #71 to solve down the road.

[theochawla]

These look great! The line spacing looks a little looser than in the mockup: maybe we could tighten them up? I wonder if I gave you the wrong em/rem values?

[andrii-i]

Thank you!
Here "rem" is used while you gave "ems" so the discrepancy is probably due to that.

[theochawla]

Ok, I will get you updated rem values! Right now, do you know what the root size is (the value the rems are being based on)?

[theochawla]

If it is not specified, I think the default is 16px

[andrii-i]

I also haven't implemented small icons in notifications (on the left of the title) because to do it I'll have to change/update notification API providing some mechanism for extensions to send their logo with every message or somehow register/cache it on the server.
It's a good-looking functionality tho so I'll think about how to implement it, would create a new issue.

[theochawla]

Ok, no worries! I want to create a few different kinds of icons for different notifications, so no rush on implementing that. I will update the issue with the icons when I finish them.

[andrii-i]

If it is not specified, I think the default is 16px

Yes, as far as I understand it's always a 16px base and then each user/browser modifies this base size based on its needs (https://mui.com/customization/typography/#font-size)

[theochawla]

That makes sense! Thank you :)

[andrii-i]

Ok, no worries! I want to create a few different kinds of icons for different notifications, so no rush on implementing that. I will update the issue with the icons when I finish them.

It's a very interesting idea that can make a life for extension devs much easier. The problem here is that API would accommodate all kinds of extensions (and therefore message types) so it might be hard to pre-plan for icons. If we could do it though, it would be nice to have a small default library that extension devs could use.

Were you thinking about like creating icons for broad categories?

[theochawla]

Ok, no worries! I want to create a few different kinds of icons for different notifications, so no rush on implementing that. I will update the issue with the icons when I finish them.

It's a very interesting idea that can make a life for extension devs much easier. The problem here is that API would accommodate all kinds of extensions (and therefore message types) so it might be hard to pre-plan for icons. If we could do it though, it would be nice to have a small default library that extension devs could use.

Were you thinking about like creating icons for broad categories?

Yes! I was thinking maybe one icon for cell execution, one for new user login, and one for any custom notification. I like the idea of a default library, though. Maybe splitting up potential notifs into categories (system updates, comments, etc.) and having at least one catch-all icon?