Banner content obfuscates close button

[1ec5]

The OpenStreetMap Funding Drive 2023 banner added in 242b73b includes a lot of gray lines against the black background, which make it difficult for the user to find the ✖️ button. I’ve seen these banners before, so I know where to click to dismiss the banner, but less experienced users may have trouble with that.

It might be too late to address this issue for this particular banner, but maybe to prepare for future ones, we could modify the stylesheet to stick a background color behind the ✖️, which would make it easier to spot.

[tomhughes]

I did what I could in the short time available to try and make it visible but if you have a better solution then please feel free to open a PR to improve things.

Obviously the main problem is creating something that is visible regardless of the underlying image and without affecting the underlying image too much - we do at least now have a way to distinguish light/dark images which gives us more options in terms of how we style things.

[1ec5]

I see that a generated rule .btn-close is getting opacity: 0.5. Removing that would keep the close button discernible in this case (as long as the lines in the image are off-white). However, I can’t tell where this property is being applied in SCSS.

[tomhughes]

It's from bootstrap.

[Zaczero]

Extract the icon (since it uses background:) to an element inside button and then set the button's background to something contrasting and remove opacity.

[JesseWeinstein]

For this banner, we could just modify it to have an appropriately sized white square in the upper corner, so the button shows up. Does anyone know where the original, non-jpeg version of the image is?

For now, here's a very quick version that shows what I mean:

[Zaczero]

For this banner, we could just modify it to have an appropriately sized white square in the upper corner, so the button shows up. Does anyone know where the original, non-jpeg version of the image is?

Modifying the image itself will break easily depending on the device resolution, dpi, and all this stuff. Proper fix is just to edit HTML and make it a proper white-black contrasting background.

[pnorman]

We have specifications for the banner that require sufficient visual contrast for the x to be seen. Surely the problem is that the graphic designer didn't follow them?

[Zaczero]

This should be reverted, this is not production ready clearly.

[stillhart]

The temporary "support the map" banner just made aware of the financial situation at OSM. I wasn't even a member until that. I think that I wouldn't mind a "become a member" (or similar) button for logged in users. Many apps offer some kind of pro features, of course we don't want that, but I feel like some kind of "upgrade your membership" is a fair statement to make.

Here is a rough example: