search

codesandbox / codesandbox-client

An online IDE for rapid web development
https://codesandbox.io
Other
12.97k stars 2.26k forks source link

feat: cleanup notifications UI #8346

Closed alexnm closed 5 months ago

alexnm commented 5 months ago

Current state of notifications image

This PR adjusts the UI to be more in line with the updated design tokens and similar components in the product. There's a lot of refactor around the previous components because all notifications were very similar, so I consolidated around a reusable item. Also it simplifies a lot of unnecessary features like filtering the notifications or the extra dropdown menu for each notification item.

This also means that each notification can be read, but cannot be unread (something I don't feel it's worth keeping just for cluttering the UI for now). Let's see what feedback we get from our users.

On stream, we have the PR related notifications which would be great to flip in production, once this is there

No new messages image

The presence of new messages is highlighted with an on-brand dot, without showing the number, because of the small space and potential for big numbers to start pilling up image

New styling for text, better contrast, highlighting the important parts by font-weight, not color. Similar on-brand dots used to show unread notifications (we can try using purple as well if lime doesn't work) New style for hover effects and single cross button to dismiss each message one by one image

codesandbox[bot] commented 5 months ago

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview