From 3ddeaca863999270719752aff49d55d73ae5f412 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 30 Aug 2024 11:42:48 +0200
Subject: [PATCH] Change background color of notifications on private messages
 (#31657)

---
 .../components/notification_group_with_status.tsx     | 11 +++++++++--
 app/javascript/styles/mastodon/components.scss        |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
index 343a9bc4c1..91f8ae2d40 100644
--- a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx
@@ -9,7 +9,7 @@ import { navigateToStatus } from 'mastodon/actions/statuses';
 import type { IconProp } from 'mastodon/components/icon';
 import { Icon } from 'mastodon/components/icon';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
-import { useAppDispatch } from 'mastodon/store';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 import { AvatarGroup } from './avatar_group';
 import { DisplayedName } from './displayed_name';
@@ -60,6 +60,10 @@ export const NotificationGroupWithStatus: React.FC<{
     [labelRenderer, accountIds, count, labelSeeMoreHref],
   );
 
+  const isPrivateMention = useAppSelector(
+    (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
+  );
+
   const handlers = useMemo(
     () => ({
       open: () => {
@@ -79,7 +83,10 @@ export const NotificationGroupWithStatus: React.FC<{
         role='button'
         className={classNames(
           `notification-group focusable notification-group--${type}`,
-          { 'notification-group--unread': unread },
+          {
+            'notification-group--unread': unread,
+            'notification-group--direct': isPrivateMention,
+          },
         )}
         tabIndex={0}
       >
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 0b0cbbfa84..208cdd6768 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -1626,7 +1626,8 @@ body > [data-popper-placement] {
 }
 
 .status__wrapper-direct,
-.notification-ungrouped--direct {
+.notification-ungrouped--direct,
+.notification-group--direct {
   background: rgba($ui-highlight-color, 0.05);
 
   &:focus {