Change Content Warning design to match upstream's (#2890)

app/javascript/flavours/glitch/components/content_warning.tsx

@@ -1,6 +1,4 @@
-/* Significantly rewritten from upstream to keep the old design for now */
-
-import { FormattedMessage } from 'react-intl';
+import { StatusBanner, BannerVariant } from './status_banner';
 
 export const ContentWarning: React.FC<{
   text: string;
@@ -8,26 +6,12 @@ export const ContentWarning: React.FC<{
   onClick?: () => void;
   icons?: React.ReactNode[];
 }> = ({ text, expanded, onClick, icons }) => (
-  <p>
-    <span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
-    <button
-      type='button'
-      className='status__content__spoiler-link'
-      onClick={onClick}
-      aria-expanded={expanded}
-    >
-      {expanded ? (
-        <FormattedMessage
-          id='content_warning.hide'
-          defaultMessage='Hide post'
-        />
-      ) : (
-        <FormattedMessage
-          id='content_warning.show_more'
-          defaultMessage='Show more'
-        />
-      )}
-      {icons}
-    </button>
-  </p>
+  <StatusBanner
+    expanded={expanded}
+    onClick={onClick}
+    variant={BannerVariant.Warning}
+  >
+    {icons}
+    <p dangerouslySetInnerHTML={{ __html: text }} />
+  </StatusBanner>
 );

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

@@ -378,7 +378,7 @@ class StatusContent extends PureComponent {
       )).reduce((aggregate, item) => [...aggregate, item, ' '], []);
 
       let spoilerIcons = [];
-      if (hidden && mediaIcons) {
+      if (mediaIcons) {
         const mediaComponents = {
           'link': LinkIcon,
           'picture-o': ImageIcon,

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

@@ -1399,9 +1399,9 @@ body > [data-popper-placement] {
 }
 
 .status__content__spoiler-link {
-  display: inline-flex; // glitch: media icon in spoiler button
+  display: inline-block;
   border-radius: 2px;
-  background: $action-button-color; // glitch: design used in more places
+  background: transparent;
   border: 0;
   color: $inverted-text-color;
   font-weight: 700;
@@ -1411,23 +1411,6 @@ body > [data-popper-placement] {
   line-height: 20px;
   cursor: pointer;
   vertical-align: top;
-  align-items: center; // glitch: content indicator
-
-  &:hover {
-    // glitch: design used in more places
-    background: lighten($action-button-color, 7%);
-    text-decoration: none;
-  }
-
-  .status__content__spoiler-icon {
-    display: inline-block;
-    margin-inline-start: 5px;
-    border-inline-start: 1px solid currentColor;
-    padding: 0;
-    padding-inline-start: 4px;
-    width: 16px;
-    height: 16px;
-  }
 }
 
 .status__wrapper--filtered {
@@ -11683,4 +11666,10 @@ noscript {
       color: $secondary-text-color;
     }
   }
+
+  .status__content__spoiler-icon {
+    float: inline-end;
+    width: 20px;
+    height: 20px;
+  }
 }