Change design of hide media button in web UI (#31807)

app/javascript/mastodon/components/media_gallery.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
@@ -10,17 +10,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { debounce } from 'lodash';
 
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'mastodon/components/blurhash';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
-import { IconButton } from './icon_button';
-
-const messages = defineMessages({
-  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
-});
-
 class Item extends PureComponent {
 
   static propTypes = {
@@ -215,7 +208,6 @@ class MediaGallery extends PureComponent {
     size: PropTypes.object,
     height: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
     defaultWidth: PropTypes.number,
     cacheWidth: PropTypes.func,
     visible: PropTypes.bool,
@@ -291,7 +283,7 @@ class MediaGallery extends PureComponent {
   }
 
   render () {
-    const { media, lang, intl, sensitive, defaultWidth, autoplay } = this.props;
+    const { media, lang, sensitive, defaultWidth, autoplay } = this.props;
     const { visible } = this.state;
     const width = this.state.width || defaultWidth;
 
@@ -323,9 +315,7 @@ class MediaGallery extends PureComponent {
           </span>
         </button>
       );
-    } else if (visible) {
+    } else if (!visible) {
-      spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible, { number: size })} icon='eye-slash' iconComponent={VisibilityOffIcon} overlay onClick={this.handleOpen} ariaHidden />;
-    } else {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
           <span className='spoiler-button__overlay__label'>
@@ -338,15 +328,23 @@ class MediaGallery extends PureComponent {
 
     return (
       <div className='media-gallery' style={style} ref={this.handleRef}>
-        <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
+        {(!visible || uncached) && (
+          <div className={classNames('spoiler-button', { 'spoiler-button--click-thru': uncached })}>
             {spoilerButton}
           </div>
+        )}
 
         {children}
+
+        {(visible && !uncached) && (
+          <div className='media-gallery__actions'>
+            <button className='media-gallery__actions__pill' onClick={this.handleOpen}><FormattedMessage id='media_gallery.hide' defaultMessage='Hide' /></button>
+          </div>
+        )}
       </div>
     );
   }
 
 }
 
-export default injectIntl(MediaGallery);
+export default MediaGallery;

app/javascript/mastodon/locales/en.json

@@ -457,7 +457,7 @@
   "lists.subheading": "Your lists",
   "load_pending": "{count, plural, one {# new item} other {# new items}}",
   "loading_indicator.label": "Loading…",
-  "media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}",
+  "media_gallery.hide": "Hide",
   "moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.",
   "mute_modal.hide_from_notifications": "Hide from notifications",
   "mute_modal.hide_options": "Hide options",

app/javascript/styles/mastodon/components.scss

@@ -4718,22 +4718,14 @@ a.status-card {
   position: absolute;
   z-index: 100;
 
-  &--minified {
+  &--hidden {
-    display: block;
+    display: none;
-    inset-inline-start: 4px;
-    top: 4px;
-    width: auto;
-    height: auto;
   }
 
   &--click-thru {
     pointer-events: none;
   }
 
-  &--hidden {
-    display: none;
-  }
-
   &__overlay {
     display: flex;
     align-items: center;
@@ -4745,19 +4737,20 @@ a.status-card {
     margin: 0;
     border: 0;
     color: $white;
+    line-height: 20px;
+    font-size: 14px;
 
     &__label {
       background-color: rgba($black, 0.45);
       backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-      border-radius: 6px;
+      border-radius: 8px;
-      padding: 10px 15px;
+      padding: 12px 16px;
       display: flex;
       align-items: center;
       justify-content: center;
-      gap: 8px;
+      gap: 4px;
       flex-direction: column;
-      font-weight: 500;
+      font-weight: 600;
-      font-size: 14px;
     }
 
     &__action {
@@ -6838,10 +6831,32 @@ a.status-card {
   z-index: 9999;
 }
 
-.media-gallery__item__badges {
+.media-gallery__actions {
   position: absolute;
   bottom: 6px;
-  inset-inline-start: 6px;
+  inset-inline-end: 6px;
+  display: flex;
+  gap: 2px;
+  z-index: 2;
+
+  &__pill {
+    display: block;
+    color: $white;
+    border: 0;
+    background: rgba($black, 0.65);
+    backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
+    padding: 3px 12px;
+    border-radius: 99px;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 20px;
+  }
+}
+
+.media-gallery__item__badges {
+  position: absolute;
+  bottom: 8px;
+  inset-inline-start: 8px;
   display: flex;
   gap: 2px;
 }
@@ -6854,18 +6869,13 @@ a.status-card {
   color: $white;
   background: rgba($black, 0.65);
   backdrop-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  padding: 2px 6px;
+  padding: 3px 8px;
   border-radius: 4px;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 700;
   z-index: 1;
   pointer-events: none;
-  line-height: 18px;
+  line-height: 20px;
-
-  .icon {
-    width: 15px;
-    height: 15px;
-  }
 }
 
 .attachment-list {