[WIP] Native feel of Browser Action popups

[lidel]

The goal of this PR is to make the little triangle at the top of the popup feel "native" (where possible).
I am not sure if we can make it work across all browsers, so this is kind of an "exploratory PR".

Rationale:

• Better UX with dark themes
• Native look-and-feel increases trust ^(tm)
• Future features (eg. Expose IPFS API as window.ipfs #330) will require us to display permission dialogs. Lost likely via browser action popup. We want it to look real, not like a phishing attack. (well, we could just use white background, but still..)

Remaining work

• Firefox
• Chrome (if possible)
• Brave (if possible)

[lidel]

Firefox

Before

After

[olizilla]

I think we only added the border to try and make it look consistent across browsers, and to partially re-create the firefox specific styling that used to be there. I'm in favour of tailoring the styles so blends in nicely to each browser, if possible. They each, as always, seem to have their own unique quirks.

[alanshaw]

I did it like this in Firefox originally (since Firefox is my main browser), but Chrome/Brave have a 1px white border and doesn't allow you to style the arrow like that. It was simplest to keep them all consistent when I originally did the work but if this looks ok in Chrome/Brave and doesn't complicate things too much then I'm ok with it...I mean I'd prefer it if all the browsers looked like what you're proposing!

[alanshaw]

Note that in macOS Firefox the borders have radius. I think this is one of the things that made it complicated because you'd have to remove it from Chrome, and FF Linux...

[lidel]

Thanks for the feedback! I noticed the issue under Chrome too -- no matter what I do the white arrow is not styled. Unfortunate. We should avoid browser-specific CSS, so let's park this PR for now.

I feel we will either:

• abandon the idea and leave it as-is
• move icon with dark background to the bottom: that way all browsers have seamless arrow in white color

[alanshaw]

IMHO I think we should leave it as is for now

[lidel]

Yeah, I think we can revisit this when style guide lands, but that will be a different PR. Closing this one.