Merge branch 'wmwragg/mention-state-indicator-round-3' into wmwragg/mention-state-menu

# resolved Conflicts:
#	src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css

@@ -27,6 +27,7 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     padding-left: 18px;
+    padding-right: 6px;
     width: 24px;
     height: 24px;
     vertical-align: middle;
@@ -34,15 +35,30 @@ limitations under the License.
 
 .mx_RoomTile_name {
     display: inline-block;
+    position: relative;
     width: 100px;
     vertical-align: middle;
     overflow: hidden;
-    word-break: break-word;
+    /* word-break: break-word; */
-    padding-left: 11px;
+    white-space: nowrap;
+    padding-left: 5px;
     padding-right: 15px;
+    padding-top: 2px;
+    padding-bottom: 2px;
     color: rgba(69, 69, 69, 0.8);
 }
 
+.mx_RoomTile_name:before {
+    content:'';
+    width:100px;
+    height:22px;
+    top: 0px;
+    left: 0px;
+    position:absolute;
+    padding-left: 20px;
+    background:linear-gradient(to right, rgba(234,245,240,0) 80%, #eaf5f0 99%);
+}
+
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
     font-style: italic;
     color: #454545;
@@ -53,14 +69,14 @@ limitations under the License.
 */
 }
 
-.collapsed .mx_RoomTile_name {
-    display: none;
-}
-
 .collapsed .mx_RoomTile {
     height: 36px;
 }
 
+.collapsed .mx_RoomTile_name {
+    display: none;
+}
+
 .collapsed .mx_RoomTile_badge {
     top: -40px;
     left: 30px;
@@ -71,6 +87,11 @@ limitations under the License.
     z-index: 200;
 }
 
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
+    display: none;
+}
+
 /* This is the bottom of the speech bubble */
 .mx_RoomTile_highlight .mx_RoomTile_badge:after {
     content: "";
@@ -83,30 +104,24 @@ limitations under the License.
     border-right: 10px solid transparent;
 }
 
-/* Because the specificity of this and the above ".mx_RoomTile_highlight .mx_RoomTile_badge:after"
-style are the same, this style needs to be AFTER it to take effect when matched */
-.collapsed .mx_RoomTile_badge:after {
-    display: none;
-}
-
 .mx_RoomTile_badge {
     display: inline-block;
     min-width: 14px;
-    height: 18px;
+    height: 17px;
     position: relative;
     left: 8px;
     top: 2px;
-    border-radius: 18px;
+    border-radius: 14px;
     color: #fff;
-    font-weight: bold;
+    font-weight: 600;
     font-size: 11px;
     text-align: center;
-    padding-top: 2px;
+    padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
 }
 
-.mx_RoomTile_badge:hover {
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton {
     letter-spacing: 0.1em;
     opacity: 1;
 }
@@ -119,7 +134,7 @@ style are the same, this style needs to be AFTER it to take effect when matched
     background-color: #ff0064;
 }
 
-.mx_RoomTile_badge_no_unread {
+.mx_RoomTile_read .mx_RoomTile_badge {
     background-color: rgb(214, 214, 214);
     opacity: 0;
 }
@@ -128,14 +143,7 @@ style are the same, this style needs to be AFTER it to take effect when matched
     font-weight: bold;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name span {
+.mx_RoomTile_selected .mx_RoomTile_name {
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    padding: 4px;
-    margin-top: -4px;
-    margin-bottom: -4px;
-    border-radius: 2px;
     background-color: rgba(118,207,166,0.2);
 }
 

src/skins/vector/css/vector-web/structures/LeftPanel.css

@@ -63,6 +63,7 @@ limitations under the License.
     margin-right: 18px;
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
+    z-index: 1;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu_options {

src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css

@@ -27,6 +27,6 @@ limitations under the License.
     border-radius: 8px;
     background-color: #fff;
     z-index: 2000;
-    left: 64px;
+    left: 52px;
     padding: 6px;
 }