Fix missing action label on sensitive videos and embeds in web UI (ma…

…stodon#26135)
glitch-soc · Jul 24, 2023 · 714a206 · 714a206
1 parent d1a9f60
commit 714a206
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 4 deletions.
diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx
@@ -470,6 +470,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 {
@@ -515,7 +516,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/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
@@ -184,7 +184,10 @@ export default class Card extends PureComponent {
 
     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>
     );
 

diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx
@@ -567,7 +567,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/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -4186,14 +4186,14 @@ a.status-card {
     margin: 0;
     border: 0;
     border-radius: 4px;
+    color: $white;
 
     &__label {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 8px;
       flex-direction: column;
-      color: $primary-text-color;
       font-weight: 500;
       font-size: 14px;
     }