Server: audio-white and audio-off-white lost their shadows

[nickvergessen]

Regression from https://github.com/nextcloud/server/pull/7130

This "breaks" the spreed/talk app, because the mute button is not visible anymore when your video is off:

@jancborchardt @pixelipo can you please fix before 13
@MorrisJobke "blocker" please 😢

[nickvergessen]

cc @pixelipo for the breaking PR

[pixelipo]

I'm on it

[pixelipo]

Ok, here's the status report:

While cleaning up icons, I kept their SVG-based shadows so as not to make too huge PR. Plan was (and still is) to move shadows to CSS.
Somehow I accidentally removed shadows from these two icons (video icon still has it...)

So, no that the damage is done, I can go ahead and implement the CSS shadow to this icon, but I need some input from @nextcloud/designers
Using the "default" drop-shadow filter introduced by @jancborchardt recently (filter: drop-shadow(0 1px 3px $color-box-shadow);), we get this kind of result:

Compare that to the unmodified video icon - it's clearly not as visible. But is that OK? Should I make a more prominent shadow for this use-case?

Second problem: IMO shadow is clearly something that should not be part of an icon itself, because it can be displayed on a dark background in which case it shouldn't have a shadow. So, should I create a new class .icon-shaded for shadows or only add it to specific cases, like .videoContainer .icon-audio-white?

[skjnldsv]

IMO shadow is clearly something that should not be part of an icon itself

Seconded

[jancborchardt]

I'd say simplest solution is to revert to the icon version with shadow, especially as the video icon still has it, and we are well past feature freeze for any CSS experimentation.

And imo the shadow-on-dark-background thing is not really an issue, no? As then we need code to always check the background (which can change a lot in the Talk app), whereas simply always having the shadow doesn't do any bad on a dark background as you simply don't see the shadow there.

[skjnldsv]

We already use filter drop shadow, so I don't think this is an experimentation :)

[pixelipo]

@jancborchardt I think it is an issue - say you want to add those icons to the header:

If it is OK for white icons to always have shadows, then we should add the shadow to all of them...

[jancborchardt]

@pixelipo ok good point :) go for it then.

[pixelipo]

Thanks @jancborchardt , but I'm afraid I need few more pointers :)

1. is filter: drop-shadow(0 1px 3px $color-box-shadow); strong enough shadow for this use-case (see my first screenshot)?
2. should I only add shadow to specific use-case: .videoContainer .icon-audio-white { }?
   OR
3. should I add shadow globally to this icon: .icon-audio-white { }?

[nickvergessen]

I'd go with a icon-shadow I think

[jancborchardt]

1. Yeah I'd say it's good. We can always adjust.
2. Yep, for now only in this case. There's only a few cases where icons need shadow, like a) Gallery detail view b) sidebar preview image for x button c) video calls app any icon over video d) future grid view for icons on a preview.

[jancborchardt]

(And yes, agree it's probably best to do it by using .icon-shadow :)