From 2c1e75727dbf84cc0c3590a0a8e53d28640b37d0 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Wed, 31 Jul 2024 14:36:08 +0200
Subject: [PATCH] Change filtered notification banner design to take up less
 space (#31222)

---
 .../filtered_notifications_banner.tsx         | 11 ++-------
 app/javascript/mastodon/locales/en.json       |  3 +--
 .../styles/mastodon/components.scss           | 23 ++++---------------
 3 files changed, 7 insertions(+), 30 deletions(-)

diff --git a/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx b/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx
index be1ea2c556..9f93d25c56 100644
--- a/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx
+++ b/app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx
@@ -49,21 +49,14 @@ export const FilteredNotificationsBanner: React.FC = () => {
         <span>
           <FormattedMessage
             id='filtered_notifications_banner.pending_requests'
-            defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know'
+            defaultMessage='From {count, plural, =0 {no one} one {one person} other {# people}} you may know'
             values={{ count: policy.summary.pending_requests_count }}
           />
         </span>
       </div>
 
       <div className='filtered-notifications-banner__badge'>
-        <div className='filtered-notifications-banner__badge__badge'>
-          {toCappedNumber(policy.summary.pending_notifications_count)}
-        </div>
-        <FormattedMessage
-          id='filtered_notifications_banner.mentions'
-          defaultMessage='{count, plural, one {mention} other {mentions}}'
-          values={{ count: policy.summary.pending_notifications_count }}
-        />
+        {toCappedNumber(policy.summary.pending_notifications_count)}
       </div>
     </Link>
   );
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index de8f2ebfcf..c9484a1432 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -300,8 +300,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",
-  "filtered_notifications_banner.mentions": "{count, plural, one {mention} other {mentions}}",
-  "filtered_notifications_banner.pending_requests": "Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know",
+  "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",
   "firehose.local": "This server",
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c575a033b7..e64ebbad4b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -10171,25 +10171,10 @@ noscript {
   }
 
   &__badge {
-    display: flex;
-    align-items: center;
-    border-radius: 999px;
-    background: var(--background-border-color);
-    color: $darker-text-color;
-    padding: 4px;
-    padding-inline-end: 8px;
-    gap: 6px;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 16px;
-    word-break: keep-all;
-
-    &__badge {
-      background: $ui-button-background-color;
-      color: $white;
-      border-radius: 100px;
-      padding: 2px 8px;
-    }
+    background: $ui-button-background-color;
+    color: $white;
+    border-radius: 100px;
+    padding: 2px 8px;
   }
 }