Adjust sizing and color of new paella icons

[owi92]

This makes the new play and spinner icons slightly smaller and thinner, and uses a darker grey.

[LukasKalbertodt]

• I like that the icon is smaller, but now it's also smaller for small screens. What about keeping the width: 20%, but add max-width: 150px? I like the sizes on all screen sizes then.

• I like the thinner stroke width of the icon.

• Regarding color and shadow: I think the previous version was better. Generally, we do need the shadow as otherwise, regardless of what color we chose, there will be a preview image that ruins everything. The blurred shadow is not quite the prettiest, but I think it looks alright. We can also reduce the blur radius to 1.5px or 1px and instead make the shadow color darker, e.g. black. Then it's sharper.

[oas777]

Just a reminder we wanted to test the new design with different videos: "I would suggest you take a look at a couple of videos with different backgrounds. I still think the lighter version works better for a variety of backgrounds, but if as you said the majority of videos will have a white background anyway, the darker version should be ok to use." (Ole)

[owi92]

Ok so with sizing and stroke-width aka thickness out of the way, this comes down to dark vs light icons. While I said that dark icons should be ok to use, comparing both side by side with dark and light backgrounds, I do still think the light version works better.

Also keep in mind that light preview images tend to have dark/black text which doesn't work great in combination with a dark icon. Though I realize the same could be said vice versa for the light icon.
Unfortunately it's hard to find a one-size-fits-all solution, but I'd still advocate for the lighter icon, which also works works better with the spinner icon (that is always on a dark background).

As Lukas said, there will always be some preview image that won't look too good with either version. See the following for a comparison:

As a footnote: These icons also need an outline so they'll be visible on backgrounds with the exact same color, and here a light icon with dark outline works better than a dark icon with a light outline. The latter tends to look like it's glowing on dark backgrounds. This effect can be seen in the dark icon/dark background combination of the above table.

[LukasKalbertodt]

Thanks Ole for the comparison. My position remains the same as yours: I prefer the white icon.

[oas777]

Yes, white is the colour to work with.

[LukasKalbertodt]

👍