From d237d02c03d8b7a29240acabade733693aeec96e Mon Sep 17 00:00:00 2001
From: Mike Pennisi <mike@mikepennisi.com>
Date: Fri, 3 Jul 2020 14:27:55 -0400
Subject: [PATCH] Highlight "Jump to Bottom" badge when appropriate

This resolves https://github.com/vector-im/riot-web/issues/13135

Signed-off-by: Mike Pennisi <mike@mikepennisi.com>
---
 res/css/views/rooms/_JumpToBottomButton.scss     | 5 +++++
 src/components/structures/RoomView.js            | 1 +
 src/components/views/rooms/JumpToBottomButton.js | 7 ++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/res/css/views/rooms/_JumpToBottomButton.scss b/res/css/views/rooms/_JumpToBottomButton.scss
index 63cf574596..23018df8da 100644
--- a/res/css/views/rooms/_JumpToBottomButton.scss
+++ b/res/css/views/rooms/_JumpToBottomButton.scss
@@ -41,6 +41,11 @@ limitations under the License.
     // with text-align in parent
     display: inline-block;
     padding: 0 4px;
+    color: $roomtile-badge-fg-color;
+    background-color: $roomtile-name-color;
+}
+
+.mx_JumpToBottomButton_highlight .mx_JumpToBottomButton_badge {
     color: $secondary-accent-color;
     background-color: $warning-color;
 }
diff --git a/src/components/structures/RoomView.js b/src/components/structures/RoomView.js
index 519c4c1f8e..a9f75ce632 100644
--- a/src/components/structures/RoomView.js
+++ b/src/components/structures/RoomView.js
@@ -2044,6 +2044,7 @@ export default createReactClass({
         if (!this.state.atEndOfLiveTimeline && !this.state.searchResults) {
             const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
             jumpToBottom = (<JumpToBottomButton
+                highlight={this.state.room.getUnreadNotificationCount('highlight') > 0}
                 numUnreadMessages={this.state.numUnreadMessages}
                 onScrollToBottomClick={this.jumpToLiveTimeline}
             />);
diff --git a/src/components/views/rooms/JumpToBottomButton.js b/src/components/views/rooms/JumpToBottomButton.js
index d3305f498a..b6cefc1231 100644
--- a/src/components/views/rooms/JumpToBottomButton.js
+++ b/src/components/views/rooms/JumpToBottomButton.js
@@ -16,13 +16,18 @@ limitations under the License.
 
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import classNames from 'classnames';
 
 export default (props) => {
+    const className = classNames({
+        'mx_JumpToBottomButton': true,
+        'mx_JumpToBottomButton_highlight': props.highlight,
+    });
     let badge;
     if (props.numUnreadMessages) {
         badge = (<div className="mx_JumpToBottomButton_badge">{props.numUnreadMessages}</div>);
     }
-    return (<div className="mx_JumpToBottomButton">
+    return (<div className={className}>
         <AccessibleButton className="mx_JumpToBottomButton_scrollDown"
             title={_t("Scroll to most recent messages")}
             onClick={props.onScrollToBottomClick}>