Update appearance of sensitive image thumbnails

[dhruvkb]

Fixes

Fixes #4777 by @fcoveram

Description

This PR

• adds a new background token "blur" that corresponds to white-88 or black-72 depending on the theme
  • removes an incorrect, and redundant, use of bg-blur
• updates the image cell to show the text "Sensitive content" and an icon indicating that the image has been blurred because of sensitivity

Testing Instructions

0. Check out the PR and run the Nuxt server.
1. Go to /preferences and check the "fake_sensitive" preference.
2. Perform a search for something.
3. Verify that a number of results have been blurred and show the "hide" icon.
4. Hover or focus over these results to reveal the bottom-centered "Sensitive content" note instead of the license info.
5. Switch to a mobile view.
6. Verify that the results have the "hide" icon and show the "Sensitive content" note in place of the license info.

Checklist

• My pull request has a descriptive title (not a vague title likeUpdate index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.
• I ran the DAG documentation generator (ov just catalog/generate-docs for catalog
  PRs) or the media properties generator (ov just catalog/generate-docs media-props
  for the catalog or ov just api/generate-docs for the API) where applicable.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[github-actions]

Full-stack documentation: https://docs.openverse.org/_preview/4831

Please note that GitHub pages takes a little time to deploy newly pushed code, if the links above don't work or you see old versions, wait 5 minutes and try again.

You can check the GitHub pages deployment action list to see the current status of the deployments.

[zackkrida]

• I don't think we can nest <div> in an <a>, so perhaps it would be better to wrap the icons and label in <span>s
• The text on hover is inheriting an underline from the parent <a> tag
• The icon is the wrong color in dark mode (looks like there is a fill hardcoded on the svg path)

The updated blurs look gorgeous!

[obulat]

Nice! ✨
Two problems I found:

1. There is a 1px non-blurred stripe at the bottom of the image:

2. The eye icon in the dark theme is not visible, should be of a different color.

[dhruvkb]

I don't think we can nest <div> in an <a>

@zackkrida, I thought so too, but I just learned that in HTML5 <a> now allows <div>s. Nonetheless, switched to <span> in 3e057ba.

There is a 1px non-blurred stripe at the bottom of the image

@obulat I tried both Firefox and Chrome but I am not able to reproduce the 1px line at the bottom, can you share your browser info?

[zackkrida]

Just two more small pieces of feedback, one we likely have to ask @fcoveram about.

1. I think we should remove the title attribute from the anchor tag, as the tooltip feels redundant:
   

2. The light mode overlay color is very overpowering, and removes much of the blurred quality and the underlying image:

With

Without:

To the point that it almost looks like a plain grey background. I wonder if it's possible to adjust that?

[fcoveram]

To your points:

1. Agree. It is redundant.
2. You are right. I lean on keeping the blur layer in a light tone to then shift it to dark in dark mode. We could try #ffffff at 80%, 72%, and 64%, and see which one feels better. Once we decided the % value, I update the Figma variable.

How does that sound?

[obulat]

@obulat I tried both Firefox and Chrome but I am not able to reproduce the 1px line at the bottom, can you share your browser info?

This must have something to do with the size calculations in the image grid. It only happens on the image grid where the sizes are variable. I could reproduce it in Chrome and Safari. Here's a Safari screenshot. Lines at the bottom are not so common, but the corners often have a different-color dot. I don't want to block on this because I think it won't be that noticeable.

Safari screenshot, see the first image in the row:

Chrome screenshot, look at the bottom row:

[dhruvkb]

Dropped the tooltip in 92031f9.

@fcoveram would you like to see some screenshots at the different opacity levels?

@obulat I am still not able to see the lines. I'll keep trying to get them to show up, and will fix them in post.

[dhruvkb]

Update: I got the line to show up! It seems like a strange rendering issue because the dimensions and position of both elements is exactly the same upto 5 decimal places.

[fcoveram]

@fcoveram would you like to see some screenshots at the different opacity levels?

That sounds great. Thanks @dhruvkb

[dhruvkb]

@fcoveram these are 88% (current), 80%, 72%, 64% and no overlay respectively. As @zackkrida mentioned the current version shows almost no features of the underlying image, which only start to appear at much lower opacity (even 64% might be too much).

[obulat]

The icon color was fixed, and the lines appear very rarely, and can be fixed when we find the reason for them. Nice improvement ✨

[dhruvkb]

I will merge this PR once @fcoveram's preferred opacity level is implemented.

[zackkrida]

@dhruvkb I think 72% might be the best option, while we await Francisco's opinion 😆 Thank you for showing the different options.

[fcoveram]

I agree that 72% looks good.

I simulated having an image with pure black area beneath the sensitive content text to see if it meet a11y requirements, and it seems safe to use. Here is a screenshot

So +1 to go with 72%

Implemented feedback