From 70d1df7fb7b8ff6a4345a64b52125c098740a5a8 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <git@tilmanvatteroth.de>
Date: Tue, 7 Mar 2023 17:57:08 +0100
Subject: [PATCH] fix(frontend): increase visibility of text in click shield

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>
---
 .../click-shield/click-shield.module.scss        | 16 ++++------------
 .../click-shield/click-shield.tsx                |  2 +-
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
index 4183ebf4f..fc79aad30 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.module.scss
@@ -13,9 +13,8 @@
 
   .preview-hover {
     color: white;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-    text-shadow: #000000 0 0 5px;
+    transition: text-shadow 0.2s;
+    text-shadow: #000000 0 0 5px, #000000 0 0 20px;
 
     display: flex;
     flex-direction: column;
@@ -23,17 +22,9 @@
     justify-content: center;
   }
 
-  .preview-hover-text {
-    opacity: 0;
-  }
-
   &:hover {
-    .preview-hover-text {
-      opacity: 1;
-    }
     .preview-hover {
-      opacity: 1;
-      text-shadow: #000000 0 0 5px, #000000 0 0 10px;
+      text-shadow: #000000 0 0 20px, #000000 0 0 40px;
     }
   }
 
@@ -43,6 +34,7 @@
     object-fit: cover;
     min-height: 300px;
     width: 100%;
+    opacity: 0.75;
 
     box-shadow: inset rgba(var(--bs-dark), 0.5) 0 0 20px;
   }
diff --git a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
index 7e8990524..92bddd98a 100644
--- a/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
+++ b/frontend/src/components/markdown-renderer/replace-components/click-shield/click-shield.tsx
@@ -120,7 +120,7 @@ export const ClickShield: React.FC<ClickShieldProps> = ({
         <span className={`${styles['click-shield']} d-inline-block ratio ratio-16x9`} onClick={doShowChildren}>
           {previewBackground}
           <span className={`${styles['preview-hover']}`}>
-            <span className={`${styles['preview-hover-text']}`}>
+            <span>
               <Trans i18nKey={'renderer.clickShield.previewHoverText'} values={hoverTextTranslationValues} />
             </span>
             {icon}