From fc533cfad3a6801503d3e8b0ead337f9805fe1c4 Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Mon, 25 Mar 2024 14:39:06 +0100
Subject: [PATCH] [Glitch] Fix background and icon on notification requests in
 web UI

Port 0cea7a623be470c51d7a162265f44f5a3e149275 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../filtered_notifications_banner.jsx         |  3 +-
 .../components/notification_request.jsx       |  4 +--
 .../flavours/glitch/styles/components.scss    | 36 +++++++++++--------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx
index 5949662828..4239d3d3e5 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx
@@ -41,7 +41,8 @@ export const FilteredNotificationsBanner = () => {
       </div>
 
       <div className='filtered-notifications-banner__badge'>
-        {toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}
+        <div className='filtered-notifications-banner__badge__badge'>{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}</div>
+        <FormattedMessage id='filtered_notifications_banner.private_mentions' defaultMessage='{count, plural, one {private mention} other {private mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
       </div>
     </Link>
   );
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx
index 6ba97066ce..6c9e2980de 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx
@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 
 import { useSelector, useDispatch } from 'react-redux';
 
+import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import DoneIcon from '@/material-icons/400-24px/done.svg?react';
-import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 import { acceptNotificationRequest, dismissNotificationRequest } from 'flavours/glitch/actions/notifications';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -51,7 +51,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
       </Link>
 
       <div className='notification-request__actions'>
-        <IconButton iconComponent={VolumeOffIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
+        <IconButton iconComponent={DeleteIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
         <IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} />
       </div>
     </div>
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 5399bace34..4496179d6d 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -10593,10 +10593,10 @@ noscript {
 .filtered-notifications-banner {
   display: flex;
   align-items: center;
-  background: $ui-base-color;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  padding: 15px;
-  gap: 15px;
+  border: 1px solid var(--background-border-color);
+  border-top: 0;
+  padding: 24px 32px;
+  gap: 16px;
   color: $darker-text-color;
   text-decoration: none;
 
@@ -10604,15 +10604,12 @@ noscript {
   &:active,
   &:focus {
     color: $secondary-text-color;
-
-    .filtered-notifications-banner__badge {
-      background: $secondary-text-color;
-    }
   }
 
   .icon {
     width: 24px;
     height: 24px;
+    padding: 2px;
   }
 
   &__text {
@@ -10628,13 +10625,24 @@ noscript {
   }
 
   &__badge {
-    background: $darker-text-color;
-    color: $ui-base-color;
-    border-radius: 100px;
-    padding: 2px 8px;
+    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;
+
+    &__badge {
+      background: $ui-button-background-color;
+      color: $white;
+      border-radius: 100px;
+      padding: 2px 8px;
+    }
   }
 }
 
@@ -10643,7 +10651,7 @@ noscript {
   align-items: center;
   gap: 16px;
   padding: 15px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid var(--background-border-color);
 
   &__link {
     display: flex;
@@ -10691,7 +10699,7 @@ noscript {
 
     .icon-button {
       border-radius: 4px;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid var(--background-border-color);
       padding: 5px;
     }
   }