Addons-frontend: Disco Pane - light colored or translucent themes problematic in display

[devaneymoz]

Proposed fix:

Ok, let's add a 1px stroke #F5F5F5 in between the theme image and the info block below:

---

Original issue

Because of the frame-less way themes are displayed in Disco Pane, light-colored, translucent, or border-less themes are avoided because they appear to just float in space.

For example, consider the awkwardness of a theme like this in Disco:

https://addons.mozilla.org/firefox/addon/cat-glasses/

... should we consider addressing in some way? Apply some type of border?

@pwalm, @designakt

[pwalm]

We're in Taipei this week, but will look at it when we get back home.

[pwalm]

I'm not sure if adding a border saves this particular theme. The theme looks great when applied, but that big white block under the cat is going to look weird, no matter what:

I'm ok with this theme looking a bit "off" in relation to the other themes (since it looks awesome in action).

[devaneymoz]

This particular theme was just meant as an example. The issue crops up pretty regularly with other white-ish or translucent themes. If interested try experimenting with other light-colored themes and see what you think.

I filed this in response to @designakt requesting we select more Disco themes that do NOT invert the color of the Firefox UI buttons. But because I tend to select darker colored themes for Disco (due to aforementioned issue) nearly all of them invert the buttons for contrast.

[designakt]

@devaneymoz Talking with @pwalm I think he sees no problem with bright themes as there is a shadow around the themes card that serves as a border. @pwalm correct me if I got that wrong.

[pwalm]

Ok, let's add a 1px stroke @ #F5F5F5 in between the theme image and the info block below:

[pwalm]

@tofumatt or @mstriemer: Can I ask one of you guys to please add this to your (very long) to-do list? 😅 Thanks!

[eviljeff]

If this is your first contribution, please refer to https://wiki.mozilla.org/Add-ons/Contribute/Code on how to get started.

Mentor: @tofumatt

[ValentinaPC]

Is there a way for us to check this? Because, in -dev, Disco Pane, we do not have "white" themes available so...need help. Thanks!

[muffinresearch]

@ValentinaPC easiest way is to delete the src attribute with dev tools. This will break the image and it should just show alt text.

[ValentinaPC]

Verified this on AMO-dev FF55(Win 7).
Postfix screenshot: