From e48a6a5f2c878e0deecddbd92ba4d823bebd7f9e Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 24 Jul 2023 22:04:38 +0200
Subject: [PATCH] [Glitch] Fix missing action label on sensitive videos and
 embeds in web UI

Port 714a20697f5e2f7994df012a5a8bbb49bc56f2e7 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 app/javascript/flavours/glitch/features/audio/index.jsx     | 6 +++++-
 .../flavours/glitch/features/status/components/card.jsx     | 5 ++++-
 app/javascript/flavours/glitch/features/video/index.jsx     | 5 ++++-
 app/javascript/flavours/glitch/styles/components/misc.scss  | 3 ++-
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx
index 1c4130666..ceb9775b5 100644
--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@@ -477,6 +477,7 @@ class Audio extends PureComponent {
     const progress = Math.min((currentTime / duration) * 100, 100);
 
     let warning;
+
     if (sensitive) {
       warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
     } else {
@@ -522,7 +523,10 @@ class Audio extends PureComponent {
 
         <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
           <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
+            <span className='spoiler-button__overlay__label'>
+              {warning}
+              <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+            </span>
           </button>
         </div>
 
diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx
index 632d84ed3..ff34b525a 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@@ -181,7 +181,10 @@ export default class Card extends PureComponent {
     let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
     let spoilerButton = (
       <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
-        <span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
+        <span className='spoiler-button__overlay__label'>
+          <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
+          <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+        </span>
       </button>
     );
     spoilerButton = (
diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx
index 8727cd76a..f5318689f 100644
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@@ -577,7 +577,10 @@ class Video extends PureComponent {
 
         <div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>
           <button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
-            <span className='spoiler-button__overlay__label'>{warning}</span>
+            <span className='spoiler-button__overlay__label'>
+              {warning}
+              <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+            </span>
           </button>
         </div>
 
diff --git a/app/javascript/flavours/glitch/styles/components/misc.scss b/app/javascript/flavours/glitch/styles/components/misc.scss
index bcddfdcd3..f99248da2 100644
--- a/app/javascript/flavours/glitch/styles/components/misc.scss
+++ b/app/javascript/flavours/glitch/styles/components/misc.scss
@@ -1351,6 +1351,8 @@ button.icon-button.active i.fa-retweet {
     padding: 0;
     margin: 0;
     border: 0;
+    border-radius: 4px;
+    color: $white;
 
     &__label {
       display: flex;
@@ -1358,7 +1360,6 @@ button.icon-button.active i.fa-retweet {
       justify-content: center;
       gap: 8px;
       flex-direction: column;
-      color: $primary-text-color;
       font-weight: 500;
       font-size: 14px;
     }