From 4851adf3b0da86cc72bcb23a2c01243ff4852171 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 14 Aug 2015 13:53:32 +0100
Subject: [PATCH] fix up the look & feel for unread messages warning to make it
 more visible

---
 skins/base/css/organisms/RoomView.css  | 16 ++++++++++++++++
 skins/base/views/organisms/RoomView.js | 12 +++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/skins/base/css/organisms/RoomView.css b/skins/base/css/organisms/RoomView.css
index bdcf8ac7..fb58b204 100644
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@@ -165,6 +165,22 @@ limitations under the License.
     border-top: 1px solid #a8dbf3;
 }
 
+.mx_RoomView_unreadMessagesBar {
+    margin-top: 13px;
+    color: #fff;
+    font-weight: bold;
+    background-color: #ff0064;
+    border-radius: 30px;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+}
+
+.mx_RoomView_unreadMessagesBar img {
+    padding-left: 22px;
+    padding-right: 22px;
+}
+
 .mx_RoomView_typingBar {
     margin-top: 17px;
     margin-left: 56px;
diff --git a/skins/base/views/organisms/RoomView.js b/skins/base/views/organisms/RoomView.js
index 430f751f..b6bfedf1 100644
--- a/skins/base/views/organisms/RoomView.js
+++ b/skins/base/views/organisms/RoomView.js
@@ -72,7 +72,13 @@ module.exports = React.createClass({
         if (!this.state.numUnreadMessages) {
             return "";
         }
-        return this.state.numUnreadMessages + " unread messages";
+        return this.state.numUnreadMessages + " new messages";
+    },
+
+    scrollToBottom: function() {
+        if (!this.refs.messageWrapper) return;
+        var messageWrapper = this.refs.messageWrapper.getDOMNode();
+        messageWrapper.scrollTop = messageWrapper.scrollHeight;
     },
 
     render: function() {
@@ -138,8 +144,8 @@ module.exports = React.createClass({
                 // set when you've scrolled up
                 if (unreadMsgs) {
                     statusBar = (
-                        <div className="mx_RoomView_typingBar">
-                            <img src="img/typing.png" width="40" height="40" alt=""/>
+                        <div className="mx_RoomView_unreadMessagesBar" onClick={ this.scrollToBottom }>
+                            <img src="img/newmessages.png" width="10" height="12" alt=""/>
                             {unreadMsgs}
                         </div>
                     );