Handle highlight notifications in timeline card button (#7762)

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);

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" />