Style ledger notifications like update notifications

[ayumi]

• Submitted a ticket for my issue if one did not already exist.
• Used Github auto-closing keywords in the commit message.
• Added/updated tests for this change (for new code or code which already has tests).
• Ran git rebase -i to squash commits (if needed).

Partially implements #3257

• Extract/refactor updateBar HTML and CSS for use in notificationBar
• Add custom styling of notification bar and buttons

Auditors: @bradleyrichter @diracdeltas

Test Plan:

1. Change conditional in https://github.com/brave/browser-laptop/blob/feature/ledger-notifications-update-style/app/ledger.js#L1220 to true
2. Observe the funding notification is styled like the update bar

Preview:

[bradleyrichter]

sweet! thanks!

[diracdeltas]

i haven't looked into why, but this appears to be applying the style of the first notification bar to all the notification bars below it, regardless of whether they are ledger notifications.

to repro:

1. go to https://www.browserleaks.com/geo, see the geolocation notification bar appear
2. close browser, edit https://github.com/brave/browser-laptop/blob/feature/ledger-notifications-update-style/app/ledger.js#L1220 to true
3. re-open browser
4. observe that geolocation notification is styled like ledger notifications now
   

if you close the first notification so that the geolocation notification is on top, then the ledger notification loses its style

otherwise i feel it

[ayumi]

I initially tried to style each notification separately, but that looked really ugly due to variations in margin/padding.
So I decided it'd be an adequate fallback to style them all like the first notification.

Alternatively we could sort and group notifications by style, and separate them with borders on top/bottom.

[ayumi]

I removed the style override based on the 0-th notification, and added borders. What do you think?

[diracdeltas]

i feel it even more now

[bradleyrichter]

We need to sync up the style on the yellow alert. Can we use 3 buttons instead?

No / yes / always

Or similar....?

On Sep 9, 2016, at 8:16 PM, yan zhu (@bcrypt) notifications@github.com wrote:

i feel it even more now

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[diracdeltas]

We need to sync up the style on the yellow alert. Can we use 3 buttons instead?

It would have to be four buttons (No, Yes, Always No, Always Yes)

[ayumi]

@diracdeltas Notifications are now sorted by style and prioritize styled notifications over the defaults:

@bradleyrichter Besides restyling the 2 ledger notifications, this doesn't affect other notifications so I think it's out of scope for this PR.

[bsclifton]

for checking against immutable, you might check for the presence of toJS instead; I know a lot of other code does that (just a consistency nitpick)

[bsclifton]

Comments left on the last commit 👍

[diracdeltas]

for future reference, you can just do thing.getIn(['options', 'style']) to avoid it throwing an error if thing.get('options') is falsy

[diracdeltas]

this seems to cause some of the notification bar tests to fail. https://travis-ci.org/brave/browser-laptop/builds/159031606

otherwise lgtm, feel free to merge!

[ayumi]

@diracdeltas thx, i've updated navigationBar test to use the new css selector