Revamp notification dot for better readibility (#8197)

res/css/structures/_RightPanel.scss

@@ -93,7 +93,8 @@ limitations under the License.
     mask-position: center;
 }
 
-$dot-size: 7px;
+$dot-size: 8px;
+$dot-offset: -3px;
 $pulse-color: $alert;
 
 .mx_RightPanel_pinnedMessagesButton {
@@ -104,8 +105,8 @@ $pulse-color: $alert;
 }
 .mx_RightPanel_headerButton_unreadIndicator_bg {
     position: absolute;
-    right: 0;
+    right: $dot-offset;
-    top: 0;
+    top: $dot-offset;
     margin: 4px;
     width: $dot-size;
     height: $dot-size;
@@ -117,8 +118,8 @@ $pulse-color: $alert;
 
 .mx_RightPanel_headerButton_unreadIndicator {
     position: absolute;
-    right: 0;
+    right: $dot-offset;
-    top: 0;
+    top: $dot-offset;
     margin: 4px;
     width: $dot-size;
     height: $dot-size;
@@ -135,13 +136,13 @@ $pulse-color: $alert;
     }
 
     &.mx_Indicator_gray {
-        background: rgba($roomtile-default-badge-bg-color, 1);
+        background: rgba($room-icon-unread-color, 1);
-        box-shadow: rgba($roomtile-default-badge-bg-color, 1);
+        box-shadow: rgba($room-icon-unread-color, 1);
     }
 
     &.mx_Indicator_bold {
-        background: rgba($input-darker-fg-color, 1);
+        background: rgba($primary-content, 1);
-        box-shadow: rgba($input-darker-fg-color, 1);
+        box-shadow: rgba($primary-content, 1);
     }
 
     &::after {
@@ -197,7 +198,14 @@ $pulse-color: $alert;
     }
 }
 
-.mx_RightPanel_headerButton_highlight {
+.mx_RightPanel_headerButton_unread {
+    &::before {
+        background-color: $room-icon-unread-color !important;
+    }
+}
+
+.mx_RightPanel_headerButton_highlight,
+.mx_RightPanel_headerButton:hover {
     &::before {
         background-color: $accent !important;
     }

res/css/views/rooms/_EventTile.scss

@@ -70,7 +70,7 @@ $left-gutter: 64px;
     }
 
     &[data-shape=ThreadsList][data-notification=total]::before {
-        background-color: $roomtile-default-badge-bg-color;
+        background-color: $room-icon-unread-color;
     }
 
     &[data-shape=ThreadsList][data-notification=highlight]::before {

res/themes/dark/css/_dark.scss

@@ -79,6 +79,11 @@ $settings-profile-button-bg-color: #e7e7e7;
 $settings-subsection-fg-color: $text-secondary-color;
 // ********************
 
+// Room
+// ********************
+$room-icon-unread-color: #fff;
+// ********************
+
 // RoomHeader
 // ********************
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.3);

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -85,6 +85,7 @@ $roomheader-addroom-bg-color: #3c4556;
 $roomheader-addroom-fg-color: $text-primary-color;
 $icon-button-color: $header-panel-text-primary-color;
 $roomtopic-color: $text-secondary-color;
+$room-icon-unread-color: #fff;
 
 // Legacy theme backports
 $accent: #0DBD8B;

res/themes/legacy-light/css/_legacy-light.scss

@@ -127,6 +127,7 @@ $roomheader-addroom-bg-color: #91a1c0;
 $roomheader-addroom-fg-color: $accent-fg-color;
 $icon-button-color: #91a1c0;
 $roomtopic-color: #9e9e9e;
+$room-icon-unread-color: #737D8C;
 
 // ********************
 

res/themes/light/css/_light.scss

@@ -118,6 +118,11 @@ $settings-profile-button-bg-color: $menu-border-color;
 $settings-subsection-fg-color: $muted-fg-color;
 // ********************
 
+// Room
+// ********************
+$room-icon-unread-color: $secondary-content;
+// ********************
+
 // RoomHeader
 // ********************
 $roomheader-addroom-bg-color: rgba(92, 100, 112, 0.2);

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>