Revamp notification dot for better readibility (#8197)

src/components/views/right_panel/HeaderButton.tsx

@@ -29,6 +29,7 @@ import { ButtonEvent } from "../elements/AccessibleButton";
 interface IProps {
     // Whether this button is highlighted
     isHighlighted: boolean;
+    isUnread?: boolean;
     // click handler
     onClick: (ev: ButtonEvent) => void;
     // The parameters to track the click event
@@ -50,11 +51,12 @@ export default class HeaderButton extends React.Component<IProps> {
 
     public render() {
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const { isHighlighted, onClick, analytics, name, title, ...props } = this.props;
+        const { isHighlighted, isUnread = false, onClick, analytics, name, title, ...props } = this.props;
 
         const classes = classNames({
             mx_RightPanel_headerButton: true,
             mx_RightPanel_headerButton_highlight: isHighlighted,
+            mx_RightPanel_headerButton_unread: isUnread,
             [`mx_RightPanel_${name}`]: true,
         });
 

src/components/views/right_panel/RoomHeaderButtons.tsx

@@ -93,6 +93,7 @@ const PinnedMessagesHeaderButton = ({ room, isHighlighted, onClick }: IHeaderBut
         name="pinnedMessagesButton"
         title={_t("Pinned messages")}
         isHighlighted={isHighlighted}
+        isUnread={!!unreadIndicator}
         onClick={onClick}
         analytics={["Right Panel", "Pinned Messages Button", "click"]}
     >
@@ -243,6 +244,7 @@ export default class RoomHeaderButtons extends HeaderButtons<IProps> {
                     title={_t("Threads")}
                     onClick={this.onThreadsPanelClicked}
                     isHighlighted={this.isPhase(RoomHeaderButtons.THREAD_PHASES)}
+                    isUnread={this.threadNotificationState.color > 0}
                     analytics={['Right Panel', 'Threads List Button', 'click']}>
                     <UnreadIndicator color={this.threadNotificationState.color} />
                 </HeaderButton>