From 393f0a0159f8c12316e903979f6a506e44ea2b50 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 23 Oct 2024 11:47:23 +0200
Subject: [PATCH] Redesign Content Warning and filters (#32543)

---
 .../mastodon/components/content_warning.tsx   |  2 +-
 .../mastodon/components/filter_warning.tsx    |  9 ++--
 .../mastodon/components/status_banner.tsx     | 15 ++++---
 app/javascript/mastodon/locales/en.json       |  3 +-
 .../styles/mastodon/components.scss           | 41 +++++++------------
 5 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/app/javascript/mastodon/components/content_warning.tsx b/app/javascript/mastodon/components/content_warning.tsx
index df8afca74d..c1c879b55d 100644
--- a/app/javascript/mastodon/components/content_warning.tsx
+++ b/app/javascript/mastodon/components/content_warning.tsx
@@ -8,7 +8,7 @@ export const ContentWarning: React.FC<{
   <StatusBanner
     expanded={expanded}
     onClick={onClick}
-    variant={BannerVariant.Yellow}
+    variant={BannerVariant.Warning}
   >
     <p dangerouslySetInnerHTML={{ __html: text }} />
   </StatusBanner>
diff --git a/app/javascript/mastodon/components/filter_warning.tsx b/app/javascript/mastodon/components/filter_warning.tsx
index 4305e43038..5eaaac4ba3 100644
--- a/app/javascript/mastodon/components/filter_warning.tsx
+++ b/app/javascript/mastodon/components/filter_warning.tsx
@@ -10,13 +10,16 @@ export const FilterWarning: React.FC<{
   <StatusBanner
     expanded={expanded}
     onClick={onClick}
-    variant={BannerVariant.Blue}
+    variant={BannerVariant.Filter}
   >
     <p>
       <FormattedMessage
         id='filter_warning.matches_filter'
-        defaultMessage='Matches filter “{title}”'
-        values={{ title }}
+        defaultMessage='Matches filter “<span>{title}</span>”'
+        values={{
+          title,
+          span: (chunks) => <span className='filter-name'>{chunks}</span>,
+        }}
       />
     </p>
   </StatusBanner>
diff --git a/app/javascript/mastodon/components/status_banner.tsx b/app/javascript/mastodon/components/status_banner.tsx
index 8ff17a9b2e..d25c05d6db 100644
--- a/app/javascript/mastodon/components/status_banner.tsx
+++ b/app/javascript/mastodon/components/status_banner.tsx
@@ -1,8 +1,8 @@
 import { FormattedMessage } from 'react-intl';
 
 export enum BannerVariant {
-  Yellow = 'yellow',
-  Blue = 'blue',
+  Warning = 'warning',
+  Filter = 'filter',
 }
 
 export const StatusBanner: React.FC<{
@@ -11,9 +11,9 @@ export const StatusBanner: React.FC<{
   expanded?: boolean;
   onClick?: () => void;
 }> = ({ children, variant, expanded, onClick }) => (
-  <div
+  <label
     className={
-      variant === BannerVariant.Yellow
+      variant === BannerVariant.Warning
         ? 'content-warning'
         : 'content-warning content-warning--filter'
     }
@@ -26,6 +26,11 @@ export const StatusBanner: React.FC<{
           id='content_warning.hide'
           defaultMessage='Hide post'
         />
+      ) : variant === BannerVariant.Warning ? (
+        <FormattedMessage
+          id='content_warning.show_more'
+          defaultMessage='Show more'
+        />
       ) : (
         <FormattedMessage
           id='content_warning.show'
@@ -33,5 +38,5 @@ export const StatusBanner: React.FC<{
         />
       )}
     </button>
-  </div>
+  </label>
 );
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 46b7d90dba..f2d37e67a6 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -197,6 +197,7 @@
   "confirmations.unfollow.title": "Unfollow user?",
   "content_warning.hide": "Hide post",
   "content_warning.show": "Show anyway",
+  "content_warning.show_more": "Show more",
   "conversation.delete": "Delete conversation",
   "conversation.mark_as_read": "Mark as read",
   "conversation.open": "View conversation",
@@ -305,7 +306,7 @@
   "filter_modal.select_filter.subtitle": "Use an existing category or create a new one",
   "filter_modal.select_filter.title": "Filter this post",
   "filter_modal.title.status": "Filter a post",
-  "filter_warning.matches_filter": "Matches filter “{title}”",
+  "filter_warning.matches_filter": "Matches filter “<span>{title}</span>”",
   "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
   "filtered_notifications_banner.title": "Filtered notifications",
   "firehose.all": "All",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a20e84ce75..673e47f429 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -11109,19 +11109,21 @@ noscript {
 }
 
 .content-warning {
+  display: block;
   box-sizing: border-box;
   background: rgba($ui-highlight-color, 0.05);
   color: $secondary-text-color;
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-  border-color: rgba($ui-highlight-color, 0.15);
+  border: 1px solid rgba($ui-highlight-color, 0.15);
+  border-radius: 8px;
   padding: 8px (5px + 8px);
   position: relative;
   font-size: 15px;
   line-height: 22px;
+  cursor: pointer;
 
   p {
     margin-bottom: 8px;
+    font-weight: 500;
   }
 
   .link-button {
@@ -11130,31 +11132,16 @@ noscript {
     font-weight: 500;
   }
 
-  &::before,
-  &::after {
-    content: '';
-    display: block;
-    position: absolute;
-    height: 100%;
-    background: url('../images/warning-stripes.svg') repeat-y;
-    width: 5px;
-    top: 0;
-  }
+  &--filter {
+    color: $darker-text-color;
 
-  &::before {
-    border-start-start-radius: 4px;
-    border-end-start-radius: 4px;
-    inset-inline-start: 0;
-  }
+    p {
+      font-weight: normal;
+    }
 
-  &::after {
-    border-start-end-radius: 4px;
-    border-end-end-radius: 4px;
-    inset-inline-end: 0;
-  }
-
-  &--filter::before,
-  &--filter::after {
-    background-image: url('../images/filter-stripes.svg');
+    .filter-name {
+      font-weight: 500;
+      color: $secondary-text-color;
+    }
   }
 }