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?

[theochawla]

Also: here are the type sizes in rems. Sorry for the confusion, that was totally my bad.

[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?

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?

Your idea sounds good and is much more manageable in terms of scope. Let's go with it. In the meantime, we can think if these broad categories are even identifiable.

[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?

Your idea sounds good and is much more manageable in terms of scope. Let's go with it. In the meantime, we can think if these broad categories are even identifiable.

Definitely. I'll start with the new user, Jupyter & extension updates, comments, and catch-all. If we think of others, I can add them.

[andrii-i]

Looks like this with provided rem values:

[theochawla]

It's looking better! Ok. If you are up for making these changes now, I think the timestamp could be the same size as the body type. Can we increase the "more notifications" text size to .575 rems? I also think the headings in the interface could be scaled proportionally could you make their size, maybe 1 rem. The line spacing is still looser than expected. Could you try decreasing them each by .25 rems? If you have other things to finish now, feel free to push these to next week.

[andrii-i]

It's looking better! Ok. If you are up for making these changes now, I think the timestamp could be the same size as the body type. Can we increase the "more notifications" text size to .575 rems? I also think the headings in the interface could be scaled proportionally could you make their size, maybe 1 rem. The line spacing is still looser than expected. Could you try decreasing them each by .25 rems? If you have other things to finish now, feel free to push these to next week.

Ok, I'll get back to tweaking it next week. If it's not too much to ask, updated hierarchy would really help as I'm afraid to get lost in adjustments.

[theochawla]

It's looking better! Ok. If you are up for making these changes now, I think the timestamp could be the same size as the body type. Can we increase the "more notifications" text size to .575 rems? I also think the headings in the interface could be scaled proportionally could you make their size, maybe 1 rem. The line spacing is still looser than expected. Could you try decreasing them each by .25 rems? If you have other things to finish now, feel free to push these to next week.

Ok, I'll get back to tweaking it next week. If it's not too much to ask, updated hierarchy would really help as I'm afraid to get lost in adjustments.

Definitely! No problem at all. I'll get that to you today :)

[theochawla]

It's looking better! Ok. If you are up for making these changes now, I think the timestamp could be the same size as the body type. Can we increase the "more notifications" text size to .575 rems? I also think the headings in the interface could be scaled proportionally could you make their size, maybe 1 rem. The line spacing is still looser than expected. Could you try decreasing them each by .25 rems? If you have other things to finish now, feel free to push these to next week.

Ok, I'll get back to tweaking it next week. If it's not too much to ask, updated hierarchy would really help as I'm afraid to get lost in adjustments.

Definitely! No problem at all. I'll get that to you today :)

[andrii-i]

Thank you!

[andrii-i]

Latest updated from @angelachawla:

[andrii-i]

Implemented update on font sizes: