apply redesign to topunreadmessagebar

with placeholder for message count

res/css/structures/_RoomView.scss

@@ -87,8 +87,12 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_RoomView_body .mx_RoomView_topUnreadMessagesBar {
-    order: 1;
+.mx_RoomView_body .mx_RoomView_timeline {
+    /* offset parent for mx_RoomView_topUnreadMessagesBar  */
+    position: relative;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
 }
 
 .mx_RoomView_body .mx_RoomView_messagePanel {

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -15,39 +15,29 @@ limitations under the License.
 */
 
 .mx_TopUnreadMessagesBar {
-    margin: auto;  /* centre horizontally */
-    max-width: 960px;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    border-bottom: 1px solid $primary-hairline-color;
+    z-index: 1000;
+    position: absolute;
+    top: 24px;
+    right: 24px;
+    width: 38px;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
-    display: inline;
-    cursor: pointer;
-    text-decoration: underline;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp img {
-    padding-left: 10px;
-    padding-right: 31px;
-    vertical-align: middle;
-}
-
-.mx_TopUnreadMessagesBar_scrollUp span {
-    opacity: 0.5;
-}
-
-.mx_TopUnreadMessagesBar_close {
-    float: right;
-    padding-right: 14px;
-    padding-top: 3px;
+    height: 38px;
+    border-radius: 19px;
+    box-sizing: border-box;
+    background: $primary-bg-color;
+    border: 1.3px solid $roomtile-name-color;
     cursor: pointer;
 }
 
-.mx_MatrixChat_useCompactLayout {
-    .mx_TopUnreadMessagesBar {
-        padding-top: 4px;
-        padding-bottom: 4px;
-    }
+.mx_TopUnreadMessagesBar_scrollUp:before {
+    content: "";
+    position: absolute;
+    width: 38px;
+    height: 38px;
+    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask-repeat: no-repeat;
+    mask-position: 9px 13px;
+    background: $roomtile-name-color;
 }

res/img/icon-jump-to-first-unread.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   style="fill:none"
+   version="1.1"
+   viewBox="0 0 18.666187 8.7375818"
+   height="8.7375822"
+   width="18.666187">
+  <defs
+     id="defs8" />
+  <path
+     d="M 17.909095,7.981591 9.3330939,0.74997995 0.75709259,7.981591"
+     style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     id="path2-8-3" />
+</svg>