Merge pull request #2228 from matrix-org/bwindels/addroomfromsublistheader

Redesign: Add (+) button in room section header to add rooms

res/css/structures/_RoomSubList.scss

@@ -32,17 +32,17 @@ limitations under the License.
 }
 
 .mx_RoomSubList_labelContainer {
-    height: 31px; /* mx_RoomSubList_label height including border */
-    position: relative;
+    display: flex;
+    flex-direction: row;
 }
 
 .mx_RoomSubList_label {
+    flex: 1;
     position: relative;
     text-transform: uppercase;
     color: $roomsublist-label-fg-color;
     font-weight: 700;
-    font-size: 12px;
-    height: 19px; /* height + padding = 31px = mx_RoomSubList_label height */
+    font-size: 14px;
     margin-left: 16px;
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
@@ -59,15 +59,6 @@ limitations under the License.
     /* pointer-events: none; */
 }
 
-.mx_RoomSubList_roomCount {
-    display: inline-block;
-    font-size: 12px;
-    font-weight: normal;
-    color: $accent-color;
-    padding-left: 5px;
-    text-transform: none;
-}
-
 .mx_RoomSubList_badge {
     display: inline-block;
     min-width: 15px;
@@ -90,6 +81,20 @@ limitations under the License.
     filter: brightness($focus-brightness);
 }
 
+.mx_RoomSubList_addRoom {
+    background-color: $roomheader-addroom-color;
+    color: $roomsublist-background;
+    margin: 5px 10px;
+    border-radius: 9px;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 18px;
+    font-weight: bold;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+}
+
 .mx_RoomSubList_badgeHighlight {
     background-color: $warning-color;
 }
@@ -146,10 +151,6 @@ limitations under the License.
         width: 28px; /* collapsed LHS Panel width */
     }
 
-    .mx_RoomSubList_roomCount {
-        display: none;
-    }
-
     /* Hide the bottom of speech bubble */
     .mx_RoomSubList_badgeHighlight:after {
         display: none;