fix up the look & feel for unread messages warning to make it more visible

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;

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">
+                        <div className="mx_RoomView_unreadMessagesBar" onClick={ this.scrollToBottom }>
-                            <img src="img/typing.png" width="40" height="40" alt=""/>
+                            <img src="img/newmessages.png" width="10" height="12" alt=""/>
                             {unreadMsgs}
                         </div>
                     );