Further reduce differences with upstream (#2631)

* Further reduce CSS diffs with upstream

* Remove superfluous “Sensitive content” label in media galleries and clean up dead code

app/javascript/flavours/glitch/components/media_gallery.jsx

@@ -18,26 +18,7 @@ import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 import { IconButton } from './icon_button';
 
 const messages = defineMessages({
-  hidden: {
+  toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
-    defaultMessage: 'Media hidden',
-    id: 'status.media_hidden',
-  },
-  sensitive: {
-    defaultMessage: 'Sensitive',
-    id: 'media_gallery.sensitive',
-  },
-  toggle: {
-    defaultMessage: 'Click to view',
-    id: 'status.sensitive_toggle',
-  },
-  toggle_visible: {
-    defaultMessage: '{number, plural, one {Hide image} other {Hide images}}',
-    id: 'media_gallery.toggle_visible',
-  },
-  warning: {
-    defaultMessage: 'Sensitive content',
-    id: 'status.sensitive_warning',
-  },
 });
 
 class Item extends PureComponent {
@@ -299,8 +280,8 @@ class MediaGallery extends PureComponent {
     this.props.onOpenMedia(this.props.media, index, this.props.lang);
   };
 
-  handleRef = (node) => {
+  handleRef = c => {
-    this.node = node;
+    this.node = c;
 
     if (this.node) {
       this._setDimensions();
@@ -379,11 +360,6 @@ class MediaGallery extends PureComponent {
       <div className={computedClass} style={style} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
           {spoilerButton}
-          {visible && sensitive && (
-            <span className='sensitive-marker'>
-              <FormattedMessage {...messages.sensitive} />
-            </span>
-          )}
         </div>
 
         {children}

app/javascript/flavours/glitch/locales/en.json

@@ -52,7 +52,6 @@
   "keyboard_shortcuts.bookmark": "to bookmark",
   "keyboard_shortcuts.secondary_toot": "to send toot using secondary privacy setting",
   "keyboard_shortcuts.toggle_collapse": "to collapse/uncollapse toots",
-  "media_gallery.sensitive": "Sensitive",
   "moved_to_warning": "This account is marked as moved to {moved_to_link}, and may thus not accept new follows.",
   "navigation_bar.app_settings": "App settings",
   "navigation_bar.featured_users": "Featured users",
@@ -153,7 +152,6 @@
   "status.in_reply_to": "This toot is a reply",
   "status.is_poll": "This toot is a poll",
   "status.local_only": "Only visible from your instance",
-  "status.sensitive_toggle": "Click to view",
   "status.uncollapse": "Uncollapse",
   "suggestions.dismiss": "Dismiss suggestion"
 }

app/javascript/flavours/glitch/styles/components.scss

@@ -602,7 +602,7 @@ body > [data-popper-placement] {
     height: 16px;
   }
 
-  .autosuggest-account .display-name > span {
+  .autosuggest-account .display-name__account {
     color: $lighter-text-color;
   }
 
@@ -837,11 +837,6 @@ body > [data-popper-placement] {
   line-height: 24px;
   overflow: hidden;
   text-decoration: none;
-
-  & > .display-name {
-    line-height: unset;
-    height: unset;
-  }
 }
 
 .reply-indicator__display-avatar {
@@ -1043,12 +1038,6 @@ body > [data-popper-placement] {
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: auto;
 
-  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
-    // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
-    // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
-    padding-inline-end: 28px; // 12px + 16px
-  }
-
   @keyframes fade {
     0% {
       opacity: 0;
@@ -2178,6 +2167,7 @@ $ui-header-height: 55px;
 .columns-area--mobile {
   flex-direction: column;
   width: 100%;
+  height: 100%;
   margin: 0 auto;
 
   .column,
@@ -7444,8 +7434,11 @@ img.modal-warning {
 
 .notification__filter-bar,
 .account__section-headline {
-  // deliberate glitch-soc choice for now
+  background: darken(
-  background: darken($ui-base-color, 4%);
+    $ui-base-color,
+    4%
+  ); // deliberate glitch-soc choice for now
+
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
   display: flex;
@@ -7584,24 +7577,6 @@ noscript {
   }
 }
 
-// glitch-specific “sensitive” label on displayed images; TODO: remove it?
-.sensitive-marker {
-  margin: 0 3px;
-  border-radius: 2px;
-  padding: 2px 6px;
-  color: rgba($primary-text-color, 0.8);
-  background: rgba($base-overlay-background, 0.5);
-  font-size: 12px;
-  line-height: 18px;
-  text-transform: uppercase;
-  opacity: 0.9;
-  transition: opacity 0.1s ease;
-
-  .media-gallery:hover & {
-    opacity: 1;
-  }
-}
-
 .embed-modal {
   width: auto;
   max-width: 80vw;
@@ -8457,11 +8432,6 @@ noscript {
         color: $primary-text-color;
         text-decoration: none;
 
-        .icon {
-          width: 15px;
-          height: 15px;
-        }
-
         &:hover,
         &:focus,
         &:active {