[HOLD for payment 2023-01-13] Uploading all-black PNG avatar makes it impossible to see the image

[Beamanator]

Only recently (after fixing this issue) we starting being able to upload png images as avatars.

Problem

We have a solid black background in the Avatar image crop modal, so when all-black PNGs (that have transparent parts) are uploaded, we can't see where the edge of the image is vs the black background (see vid here). Also, having an all black background is confusing when uploading PNG images, because it like we converted the transparent background to black, though that was fixed in the issue linked ^

Solution

TBD. My idea is to use some kind of checkboard background pattern (I believe this is used in most websites that show pngs) so there's no issue where a solid colored PNG gets completely hidden among the background.

[melvin-bot]

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

[Beamanator]

Here's my first attempt, which has solid black & transparent checkboard pattern. This is a big dark in "dark mode" but still works pretty well.

Screen.Recording.2022-12-02.at.11.30.24.AM.mov

[Beamanator]

@shawnborton asking for your thoughts on this, I was thinking we could brighten up the "light" squares (which are dark gray in this instance) but I'd like to get your opinion first before I sink a lot of time into this

[shawnborton]

Hmm what if we just didn't use pure black for the BG and used the dark green we use for the app BG? I think I would prefer to avoid adding the checkerboard pattern, especially since this is likely a very uncommon occurrence.

[Beamanator]

Hmm well to be clear we could make the checkerboard only be visible on the background of PNG images, otherwise the avatar image selected would fill the entire window (no checkerboard). I think it's uncommon that the entire PNG being uploaded is the same as the background (black or even dark green) but I do think it's more common that a part of PNG could match the full background

Also I think it's a bit confusing that the background is solid black or even dark green, but once the PNG loads, the background we show everywhere is gray... So At least those should be consistent, right?

[shawnborton]

but once the PNG loads, the background we show everywhere is gray...

Can you show me what that looks like?

[Beamanator]

Sure thing! Here's what it looks like currently: (only the little pixel character has colors, the rest is transparent)

Screen.Recording.2022-12-06.at.10.19.23.AM.mov