Fix visibility of the close button in status card

[lovery]

The close button is not visible when there is an image for the device and the theme of the phone is dark, but it is there and you can click on it if you know where exactly it is:

I've added a line with the device name and the close button like it is when there is no image.

This behavior is happening on Pixel 7 and Pixel 8 with Chrome and Firefox.

[tananaev]

What does it look like after the change?

[lovery]

[tananaev]

That's definitely not what we want. We already have a close button over the image. Seems like it's not visible for some reason though. If you want, we can also add the name the same way. But it definitely shouldn't be a black bar above the image.

[lovery]

I notice that there are 2 style modes one light and a dark one.
I don't know when the dark one activates (like on my phones) but then everything is with black background and white color for the text and icons.
The light one is active on my pc's chrome, even if I change the theme of the chrome to dark it doesn't affects the style of the website, also when I simulate phone in the chrome it is still light and with my change it looks like this:

I removed the invisible button from the image, so in my PR there is no double buttons.

[tananaev]

We don't want any bars above the image, if it wasn't clear from my previous comment.

[lovery]

Sorry, I was thinking that the black is the problem, not the bar itself. I don't insist on my fix, just tried to be helpful.

Do you have any other ideas how this could be fixed?

I already know there is a close button and I just clicked in the top right corner but it is not very user-friendly to be invisible.

[tananaev]

We have this style on the icon:

  mediaButton: {
    color: theme.palette.primary.contrastText,
    mixBlendMode: 'difference',
  },

Which should make it visible, but I guess it doesn't work for some reason. So that part needs fixing.

[lovery]

Here is a few screenshots of how the fix looks like:

[tananaev]

Changing background doesn't look good.

[lovery]

When icon is displaying over and image you don't have control of, could lead to invisible button - example if you make the icon's color black it will be ok on all the picture except the one with black in the top right part, if you make it white then you will have the same problem with images that are white. So I am not sure how to solve this issue without using some background color. Do you have any suggestions?

[tananaev]

I already pointed it out earlier. mix-blend-mode: difference; should inverse the color, so it should be always visible, no matter what the background is.

[lovery]

mix-blend-mode: difference; can't work when the background is image. You can't detect the color of an image with css.

There are some options for js, but trying do fix it that way is unreasonable.

[tananaev]

Why is it unreasonable?