From 4d754935a98aa9970f2d90db81c83f77be6ca654 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 22 Sep 2024 20:21:46 +0200
Subject: [PATCH] Replace new-style upstream CWs with old-style CWs for now

---
 .../glitch/components/content_warning.tsx     | 26 +++++++++++++------
 .../flavours/glitch/styles/components.scss    | 11 ++++++--
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/content_warning.tsx b/app/javascript/flavours/glitch/components/content_warning.tsx
index df8afca74d..a4c1e6e43f 100644
--- a/app/javascript/flavours/glitch/components/content_warning.tsx
+++ b/app/javascript/flavours/glitch/components/content_warning.tsx
@@ -1,15 +1,25 @@
-import { StatusBanner, BannerVariant } from './status_banner';
+/* Significantly rewritten from upstream to keep the old design for now */
+
+import { FormattedMessage } from 'react-intl';
 
 export const ContentWarning: React.FC<{
   text: string;
   expanded?: boolean;
   onClick?: () => void;
 }> = ({ text, expanded, onClick }) => (
-  <StatusBanner
-    expanded={expanded}
-    onClick={onClick}
-    variant={BannerVariant.Yellow}
-  >
-    <p dangerouslySetInnerHTML={{ __html: text }} />
-  </StatusBanner>
+  <p>
+    <span dangerouslySetInnerHTML={{ __html: text }} className='translate' />{' '}
+    <button
+      type='button'
+      className='status__content__spoiler-link'
+      onClick={onClick}
+      aria-expanded={expanded}
+    >
+      {expanded ? (
+        <FormattedMessage id='status.show_less' defaultMessage='Show less' />
+      ) : (
+        <FormattedMessage id='status.show_more' defaultMessage='Show more' />
+      )}
+    </button>
+  </p>
 );
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index fe8e85c69b..6ee86f5ee0 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1365,7 +1365,7 @@ body > [data-popper-placement] {
 .status__content__spoiler-link {
   display: inline-flex; // glitch: media icon in spoiler button
   border-radius: 2px;
-  background: transparent;
+  background: $action-button-color; // glitch: design used in more places
   border: 0;
   color: $inverted-text-color;
   font-weight: 700;
@@ -1378,7 +1378,8 @@ body > [data-popper-placement] {
   align-items: center; // glitch: content indicator
 
   &:hover {
-    background: lighten($ui-base-color, 33%);
+    // glitch: design used in more places
+    background: lighten($action-button-color, 7%);
     text-decoration: none;
   }
 
@@ -11219,6 +11220,12 @@ noscript {
       }
     }
 
+    /* glitch: used for CWs */
+    p {
+      font-size: 15px;
+      color: $darker-text-color;
+    }
+
     &__content {
       display: -webkit-box;
       font-size: 15px;