apply redesign to topunreadmessagebar

with placeholder for message count

src/components/structures/RoomView.js

@@ -1794,14 +1794,10 @@ module.exports = React.createClass({
         let topUnreadMessagesBar = null;
         if (this.state.showTopUnreadMessagesBar) {
             const TopUnreadMessagesBar = sdk.getComponent('rooms.TopUnreadMessagesBar');
-            topUnreadMessagesBar = (
-                <div className="mx_RoomView_topUnreadMessagesBar">
-                    <TopUnreadMessagesBar
-                       onScrollUpClick={this.jumpToReadMarker}
-                       onCloseClick={this.forgetReadMarker}
-                    />
-                </div>
-            );
+            topUnreadMessagesBar = (<TopUnreadMessagesBar
+                                       onScrollUpClick={this.jumpToReadMarker}
+                                       onCloseClick={this.forgetReadMarker}
+                                    />);
         }
         const statusBarAreaClass = classNames(
             "mx_RoomView_statusArea",
@@ -1838,9 +1834,11 @@ module.exports = React.createClass({
                 <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs}>
                     <div className={fadableSectionClasses}>
                         { auxPanel }
-                        { topUnreadMessagesBar }
-                        { messagePanel }
-                        { searchResultsPanel }
+                        <div className="mx_RoomView_timeline">
+                            { topUnreadMessagesBar }
+                            { messagePanel }
+                            { searchResultsPanel }
+                        </div>
                         <div className={statusBarAreaClass}>
                             <div className="mx_RoomView_statusAreaBox">
                                 <div className="mx_RoomView_statusAreaBox_line"></div>

src/components/structures/TimelinePanel.js

@@ -749,7 +749,6 @@ var TimelinePanel = React.createClass({
         this._loadTimeline(this.state.readMarkerEventId, 0, 1/3);
     },
 
-
     /* update the read-up-to marker to match the read receipt
      */
     forgetReadMarker: function() {

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -21,6 +21,8 @@ const React = require('react');
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import AccessibleButton from '../elements/AccessibleButton';
+import {formatCount} from '../../../utils/FormattingUtils';
+
 const sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -28,28 +30,15 @@ module.exports = React.createClass({
 
     propTypes: {
         onScrollUpClick: PropTypes.func,
-        onCloseClick: PropTypes.func,
     },
 
     render: function() {
         return (
             <div className="mx_TopUnreadMessagesBar">
                 <AccessibleButton className="mx_TopUnreadMessagesBar_scrollUp"
-                        onClick={this.props.onScrollUpClick}>
-                    <img src="img/scrollto.svg" width="24" height="24"
-                        // No point on setting up non empty alt on this image
-                        // as it only complements the text which follows it.
-                        alt=""
-                        title={_t('Scroll to unread messages')}
-                        // In order not to use this title attribute for accessible name
-                        // calculation of the parent button set the role presentation
-                        role="presentation" />
-                    { _t("Jump to first unread message.") }
+                    title={_t('Jump to first unread message.')}
+                    onClick={this.props.onScrollUpClick}>
                 </AccessibleButton>
-                <AccessibleButton element='img' className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
-                    src="img/cancel.svg" width="18" height="18"
-                    alt={_t("Close")} title={_t("Close")}
-                    onClick={this.props.onCloseClick} />
             </div>
         );
     },

src/i18n/strings/en_EN.json

@@ -604,7 +604,6 @@
     "Stickerpack": "Stickerpack",
     "Hide Stickers": "Hide Stickers",
     "Show Stickers": "Show Stickers",
-    "Scroll to unread messages": "Scroll to unread messages",
     "Jump to first unread message.": "Jump to first unread message.",
     "Invalid alias format": "Invalid alias format",
     "'%(alias)s' is not a valid format for an alias": "'%(alias)s' is not a valid format for an alias",