Initial design mocks for Notifications

[jglovier]

These mocks can serve as a guide for implementors at the Lisbon hackathon working on the Notification work.

Notification icon in sidebar

This comp shows where the notification icon will go, and how it should be styled. Notice it replaces the Gear dropdown, which I've moved to a sidebar nav item at the bottom called "Settings".

Notification icon with unread notifications

This comp shows the styling for the notification icon when there are unread notifications for the user to view.

Notification alert

This comp shows the notification alert that should appear if the user has turned on live notification updates. It should animate in from it's left edge. Clicking the alert will take you to the alert destination, and clicking the notification icon will still take you to the Notification view.

Notification index view

This comp shows the Notification view. In this comp, the light yellow items are new unread notifications, and should immediately begin slowly fading to white once the user arrives at the screen to indicate that they are now in a read state (since the user has viewed them). For context on styling, refer to the live updated comments on a GitHub thread, and how comments appear in a light yellow state, but slowly fade to white once shown on screen.

cc @jkleinsc @tangollama

[tangollama]

Awesome stuff @jglovier. Thank you.

[jkleinsc]

Well done @jglovier ! Well done!