From 71f8c45c18b0acad04a5abcc344c89a4fbd8f001 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Sat, 8 Jul 2023 20:05:33 +0200
Subject: [PATCH] [Glitch] Change label and design of sensitive and unavailable
 media in web UI

Port 338a0e70ccd2d5526e54fd67f99819e80643b45a to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/media_gallery.jsx       | 10 ++++--
 .../glitch/styles/components/misc.scss        | 33 +++++++++----------
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx
index 4d8f785320..21fdc47416 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@@ -354,7 +354,10 @@ class MediaGallery extends PureComponent {
     if (uncached) {
       spoilerButton = (
         <button type='button' disabled className='spoiler-button__overlay'>
-          <span className='spoiler-button__overlay__label'><FormattedMessage id='status.uncached_media_warning' defaultMessage='Not available' /></span>
+          <span className='spoiler-button__overlay__label'>
+            <FormattedMessage id='status.uncached_media_warning' defaultMessage='Preview not available' />
+            <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.open' defaultMessage='Click to open' /></span>
+          </span>
         </button>
       );
     } else if (visible) {
@@ -362,7 +365,10 @@ class MediaGallery extends PureComponent {
     } else {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
-          <span className='spoiler-button__overlay__label'>{sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}</span>
+          <span className='spoiler-button__overlay__label'>
+            {sensitive ? <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /> : <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />}
+            <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+          </span>
         </button>
       );
     }
diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss
index ef9044050d..c7bc969022 100644
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@@ -1343,34 +1343,31 @@ button.icon-button.active i.fa-retweet {
   }
 
   &__overlay {
-    display: block;
-    background: transparent;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba($black, 0.5);
     width: 100%;
     height: 100%;
+    padding: 0;
+    margin: 0;
     border: 0;
+    border-radius: 4px;
 
     &__label {
-      display: inline-block;
-      background: rgba($base-overlay-background, 0.5);
-      border-radius: 8px;
-      padding: 8px 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      flex-direction: column;
       color: $primary-text-color;
       font-weight: 500;
       font-size: 14px;
     }
 
-    &:hover,
-    &:focus,
-    &:active {
-      .spoiler-button__overlay__label {
-        background: rgba($base-overlay-background, 0.8);
-      }
-    }
-
-    &:disabled {
-      .spoiler-button__overlay__label {
-        background: rgba($base-overlay-background, 0.5);
-      }
+    &__action {
+      font-weight: 400;
+      font-size: 13px;
     }
   }
 }