From f13329213df91cc3a56e10b56a7949ae7536f5e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0imon=20Brandner?= <simon.bra.ag@gmail.com>
Date: Tue, 8 Feb 2022 20:03:15 +0100
Subject: [PATCH] Handle highlight notifications in timeline card button
 (#7762)

---
 res/css/structures/_RightPanel.scss                    | 5 +++++
 src/components/views/right_panel/RoomHeaderButtons.tsx | 1 +
 2 files changed, 6 insertions(+)

diff --git a/res/css/structures/_RightPanel.scss b/res/css/structures/_RightPanel.scss
index 7a9d6d226c..5fb57d1999 100644
--- a/res/css/structures/_RightPanel.scss
+++ b/res/css/structures/_RightPanel.scss
@@ -139,6 +139,11 @@ $pulse-color: $alert;
     animation: mx_RightPanel_indicator_pulse 2s infinite;
     animation-iteration-count: 1;
 
+    &.mx_Indicator_red {
+        background: rgba($alert, 1);
+        box-shadow: rgba($alert, 1);
+    }
+
     &.mx_Indicator_gray {
         background: rgba($roomtile-default-badge-bg-color, 1);
         box-shadow: rgba($roomtile-default-badge-bg-color, 1);
diff --git a/src/components/views/right_panel/RoomHeaderButtons.tsx b/src/components/views/right_panel/RoomHeaderButtons.tsx
index 9393d04559..6d4ddb7b58 100644
--- a/src/components/views/right_panel/RoomHeaderButtons.tsx
+++ b/src/components/views/right_panel/RoomHeaderButtons.tsx
@@ -62,6 +62,7 @@ const UnreadIndicator = ({ color }: IUnreadIndicatorProps) => {
         "mx_RightPanel_headerButton_unreadIndicator": true,
         "mx_Indicator_bold": color === NotificationColor.Bold,
         "mx_Indicator_gray": color === NotificationColor.Grey,
+        "mx_Indicator_red": color === NotificationColor.Red,
     });
     return <>
         <div className="mx_RightPanel_headerButton_unreadIndicator_bg" />