From 40b3c206e4ca69f415960cc7a1617a6aae012749 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 27 Oct 2024 16:08:01 +0100
Subject: [PATCH] Change Content Warning design to match upstream's (#2890)

---
 .../glitch/components/content_warning.tsx     | 34 +++++--------------
 .../glitch/components/status_content.jsx      |  2 +-
 .../flavours/glitch/styles/components.scss    | 27 +++++----------
 3 files changed, 18 insertions(+), 45 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/content_warning.tsx b/app/javascript/flavours/glitch/components/content_warning.tsx
index e7e01ee14c2de3..982365b0392308 100644
--- a/app/javascript/flavours/glitch/components/content_warning.tsx
+++ b/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>
 );
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index a15a4df25a85ee..9ee2e683a582e1 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/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,
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 07d225e4eb9389..418a4311b4c85e 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/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;
+  }
 }