Btcpayserver: Redesign of the notification's dropdown

Created on 12 Dec 2020 · 2Comments · Source: btcpayserver/btcpayserver

Follow up from https://github.com/btcpayserver/btcpayserver/pull/2101

I decided to merge @bolatovumar PR as it is a needed feature in the short term.
That said, I agree that the design is less than ideal and should be improved.

FROM @dstrukt

In my true fashion, I'm presenting a few options :)

My personal favorite is Option B, the right (with more padding), all based on the 4px base (4, 8, 16, 24, etc...).

I realize this would be a bit more work, but this notification overlay was an area I wanted to address, so I thought I'd go ahead and share something a bit more ambitious with this addition, it's all cosmetic, but if it's out of scope, I understand.

Option A, extending the current version with a similar pattern.

Option C, a modified version with everything on the bottom, which I suppose I could make an option D using the current text + date with everything on the bottom, but I'm not particularly a fan of this direction, so I didn't

As for the "eye" icon, I'm ambivalent, I could take it or leave it, with the addition of (potential) future icons however, it's cleaner not to have it, but for the current state .. shrug.

As usual, open to any and all feedback!

Design

Source

NicolasDorier

👍3

Most helpful comment

Starting on this.

bolatovumar on 22 Dec 2020

🚀2

All 2 comments

Adding the resolution of where we landed as well, top right and bottom right (for multi-line), we decided to remove the "eye" icon, so disregard, but for the sake of comparison, I left.