Hyper: Update update notification

[timothyis]

As requested by @rauchg:

So I was initially asked to increase the contrast between the text and the background of the update notification, but then I started posting things to the Zeit Community slack and we came up with some cool things.

Feedback from the community concluded that the update notification was intrusive and hid important pieces of the terminal when open. So we came up with a remedy.

Icon, Hover to see details and Contrast update

An icon to notify the user of the update and hovering to see the update information and to restart:

Co-existing with other notifications:

On hover of the icon:

For Linux:

And then I went a little bit further as to save more space and updated the icon via @leo. (thanks!)

More space, more beauty?

Icon:

Hover:

Linux:

Co-existing:

Please share your thoughts!

[leo]

More space, more beauty?

I'm not able to express how beautiful this part looks. Combined with the max-width of calc(100vw - 14px) for each of these notifications, they also won't overflow out of the viewport. This second concept is just perfect, IMO!

@CodeTheory and I tried to evaluate it on slack. Bought the icon from TheNounProject.

[rauchg]

I like thinner icons personally

[leo]

Let's replace it then! :blush: After looking at it again after some time, it really looks a little thick.

@CodeTheory Send me the link on Slack if you want another NounProject icon, I'll get it!

[rauchg]

My only concern with the bottom right notification approach is that it doesn't lend itself well to a cohesive cross-platform experience.

I think it looks particularly good because of the border-radius but that's not gonna be there in linux and windows, where the separation will look better.

[timothyis]

@rauchg I agree, though I do share my thoughts with others such as @leo who say that the floating notification take up a lot of, what could be, important space.

It's not a big deal if it doesn't get used. It's exactly why I created both versions, so we had options. 😄

[rauchg]

Yep that's why i definitely love the evolution we've made with regards to the "collapsed" state of the update notification. And I think an icon that indicates "update" is better suited for that collapsed state than the checkmark, so double win.

What I would like to see is the actual animation in action to make sure it actually works, specially when other notifications are transiently present. The next step I think is to codepen it up.

[timothyis]

I was actually going to prototype is in framerjs since we then don't need to recreate the entire app styling etc. I'll post it here when I've done it.

[timothyis]

I'm going to have the prototype started/possibly done by tonight.

[timothyis]

Okay, here's an update!

• The point of this task in the first place was to improve contract. Even though I achieved better contrast, it still wasn't great for everyone.
• I decided to a custom icon rather than purchasing them or using free ones since it's easier to cater to the collaborators needs if an update is necessary.

New text colour, new icons

Notification on it's own:

Expanded notification (Auto-update):

Expanded Notification (Linux):

Co-existing with other notifications:

And finally, we have a prototype made in framer showing off an animation when the notification appears, is mouse-overed, and restart is clicked:

EDIT: Prototype for usage with other notifications comes tonight.

[timothyis]

Update #2:

Gif featuring a co-existing notification.