Update appearance of sensitive image thumbnails

frontend/src/components/VAudioThumbnail/VAudioThumbnail.vue

@@ -93,7 +93,7 @@ const radius = (i: number, j: number) => {
     <!-- The element that blurs the programmatic thumbnail -->
     <div
       v-show="shouldBlur && !audio.thumbnail"
-      class="bg-blur absolute bg-complementary"
+      class="absolute bg-complementary"
     />
 
     <div v-show="audio.thumbnail && isOk" class="thumbnail absolute inset-0">

frontend/src/components/VImageCell/VImageCell.vue

@@ -12,6 +12,7 @@ import { IMAGE } from "~/constants/media"
 
 import { useSearchStore } from "~/stores/search"
 
+import VIcon from "~/components/VIcon/VIcon.vue"
 import VLicense from "~/components/VLicense/VLicense.vue"
 import VLink from "~/components/VLink.vue"
 
@@ -143,7 +144,7 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
       itemprop="contentUrl"
       :title="contextSensitiveTitle"
       :href="imageLink"
-      class="group relative block w-full overflow-hidden rounded-sm text-gray-2 focus-visible:outline-3 focus-visible:outline-offset-4"
+      class="group relative block w-full overflow-hidden rounded-sm text-gray-2 hover:no-underline focus-visible:outline-3 focus-visible:outline-offset-4"
       :aria-label="contextSensitiveTitle"
       @mousedown="sendSelectSearchResultEvent"
     >
@@ -156,11 +157,8 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
       >
         <img
           loading="lazy"
-          class="image col-span-full row-span-full block w-full overflow-hidden rounded-sm object-cover duration-200 motion-safe:transition-[filter,transform]"
-          :class="[
-            isSquare ? 'h-full' : 'margin-auto',
-            { 'scale-150 blur-image': shouldBlur },
-          ]"
+          class="image col-span-full row-span-full block w-full overflow-hidden rounded-sm object-cover"
+          :class="[isSquare ? 'h-full' : 'margin-auto']"
           :alt="
             shouldBlur ? `${$t('sensitiveContent.title.image')}` : image.title
           "
@@ -171,24 +169,37 @@ const { isHidden: shouldBlur } = useSensitiveMedia(props.image)
           @load="getImgDimension"
           @error="onImageLoadError($event)"
         />
+        <span
+          class="col-span-full row-span-full flex items-center justify-center bg-blur text-default backdrop-blur-xl duration-200 motion-safe:transition-opacity"
+          :class="shouldBlur ? 'opacity-100' : 'opacity-0'"
+          data-testid="blur-overlay"
+          aria-hidden="true"
+        >
+          <VIcon name="eye-closed" />
+        </span>
         <figcaption
-          class="col-span-full self-end justify-self-start rounded-sm bg-default text-default group-hover:visible group-focus-visible:visible"
-          :class="
+          class="z-10 col-span-full my-2 self-end justify-self-start rounded-sm text-default group-hover:visible group-focus-visible:visible"
+          :class="[
             isSquare
-              ? 'invisible row-span-full m-2 p-2'
-              : 'my-2 sm:invisible sm:row-span-full sm:m-2 sm:p-2'
-          "
+              ? 'invisible row-span-full p-2'
+              : 'sm:invisible sm:row-span-full sm:p-2',
+            shouldBlur ? 'sm:w-full sm:text-center' : 'bg-default',
+            !shouldBlur && (isSquare ? 'mx-2' : 'sm:mx-2'),
+          ]"
         >
           <h2 class="sr-only">
             {{
               shouldBlur ? `${$t("sensitiveContent.title.image")}` : image.title
             }}
           </h2>
-          <VLicense
-            :license="image.license"
-            :hide-name="true"
-            class="text-secondary group-hover:text-default group-focus-visible:text-default sm:text-default"
-          />
+          <div
+            class="label-regular leading-none text-secondary group-hover:text-default group-focus-visible:text-default sm:text-default"
+          >
+            <template v-if="shouldBlur">
+              {{ $t("sensitiveContent.singleResult.title") }}
+            </template>
+            <VLicense v-else :license="image.license" :hide-name="true" />
+          </div>
         </figcaption>
       </figure>
     </VLink>

frontend/src/styles/tailwind.css

@@ -9,6 +9,7 @@
 
   :root {
     --color-black: #000;
+    --color-black-72: #000000b8;
     --color-white: #fff;
     --color-yellow-3: #fde034;
     --color-pink-8: #ad1f85;
@@ -69,6 +70,7 @@
     --color-gray-12-80: #232323cc;
     --color-gray-12-90: #232323e5;
     --color-gray-13-0: #0d0d0d00;
+    --color-white-88: #ffffffe0;
     --color-white-0: #fff0;
     --color-info-1: #f5f7fb;
     --color-info-2: #e6edfc;
@@ -144,6 +146,7 @@
     --color-bg-error: var(--color-error-2);
     --color-bg-disabled: var(--color-gray-5);
     --color-bg-zero: var(--color-white-0);
+    --color-bg-blur: var(--color-white-88);
     --color-border: var(--color-gray-3);
     --color-border-hover: var(--color-gray-12);
     --color-border-secondary: var(--color-gray-12-20);
@@ -187,6 +190,7 @@
     --color-bg-error: var(--color-error-11);
     --color-bg-disabled: var(--color-gray-8);
     --color-bg-zero: var(--color-gray-13-0);
+    --color-bg-blur: var(--color-black-72);
     --color-border: var(--color-gray-11);
     --color-border-hover: var(--color-gray-1);
     --color-border-secondary: var(--color-gray-1-20);

frontend/tailwind.config.ts

@@ -340,6 +340,7 @@ export default {
         error: "var(--color-bg-error)",
         disabled: "var(--color-bg-disabled)",
         zero: "var(--color-bg-zero)",
+        blur: "var(--color-bg-blur)",
       },
       borderColor: {
         default: "var(--color-border)",

frontend/test/unit/specs/components/v-image-cell.spec.js

@@ -36,9 +36,9 @@ describe("VImageCell", () => {
 
   it("is blurred when the image is sensitive", async () => {
     options.props.image.isSensitive = true
-    const { getByAltText } = await render(VImageCell, options)
-    const img = getByAltText("This image may contain sensitive content.")
-    expect(img).toHaveClass("blur-image")
+    const { getByTestId } = await render(VImageCell, options)
+    const overlay = getByTestId("blur-overlay")
+    expect(overlay).toBeVisible()
   })
 
   it("is does not contain title anywhere when the image is sensitive", async () => {