Approved UI Change - Make The Teambuilder Colors Darker in Light Mode

[Big Pharma]

So we've switched from our 3D renders to HOME sprites on Teambuilder! Whether or not you like this change (I don't like it but I get why the change happened), there's one thing that needs to be addressed - how the bright HOME sprites clash with the bright bluish gray background.

Without the outline of the renders, some HOME sprites blend into the current background, most notable on white mons, mons with frills, and mons with translucent elements - heck, you can barely make out Pheromosa at all anymore! If the background were a darker or more distinctive color (#666666 would work like a charm but might not classify as "bright mode"), I assure you these bright renders would look much less blurry.

 

[Felucia]

something like AAB5D0 ends up looking pretty decent, though people are still going to resist the change. A drop-shadow filter on the image to create an outline would probably be a more elegant solution but can look a bit messy on mons like Xurkitree that have a lot of detail around the edges.

#AAB5D0

Drop shadow

I did the drop shadow on preact because on main client the pokemon image isn't a standalone element. This does require a small change to preact because on default preact it also adds a drop shadow to the gradient and pokemon text, which I've conveniently removed from the image container for demonstrative purposes

Edit: After a bit of tinkering I found a gray drop shadow accomplishes the same thing and looks a lot less intrusive on both light and dark mode

More images

css

Don't copy paste this and expect it to be fine, the selector is most likely too broad

.sprite {
    -webkit-filter: drop-shadow(1px 1px 0 #7a7a7a)
                    drop-shadow(-1px 1px 0 #7a7a7a)
                    drop-shadow(1px -1px 0 #7a7a7a)
                    drop-shadow(-1px -1px 0 #7a7a7a);

    filter: drop-shadow(1px 1px 0 #7a7a7a)
            drop-shadow(-1px 1px 0 #7a7a7a)
            drop-shadow(1px -1px 0 #7a7a7a)
            drop-shadow(-1px -1px 0 #7a7a7a);
}