implement the correct design for memberlist

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

@@ -25,10 +25,7 @@ limitations under the License.
     display: table-cell;
     vertical-align: middle;
     margin-left: 10px;
-}
-
-.mx_EntityTile:hover .mx_MessageTimestamp {
-    display: block;
+    width: 26px;
 }
 
 .mx_EntityTile_avatar {
@@ -91,4 +88,11 @@ limitations under the License.
     opacity: 0.25;
 }
 
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_name_hover
+{
+    opacity: 0.25;
+}
+
 

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

@@ -44,6 +44,43 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
+.mx_MemberList .mx_SearchableEntityList {
+    order: 1;
+    flex: 0;
+    -webkit-flex: 0;
+}
+
+.mx_MemberList .mx_SearchableEntityList_expanded {
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0;
+}
+
+.mx_MemberList_joined {
+    order: 2;
+    flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+
+    overflow-y: auto;
+}
+
+/*
+.mx_MemberList_invited {
+    order: 3;
+    flex: 0 0 100px;
+    -webkit-flex: 0 0 100px;
+    overflow-y: auto;
+}
+*/
+
+.mx_MemberList_bottom {
+    order: 4;
+    flex: 0 0 72px;
+    -webkit-flex: 0 0 72px;
+
+    border-top: 2px solid #e1dddd;
+    margin-right: 15px;
+}
+
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
     color: #3d3b39;
@@ -55,8 +92,13 @@ limitations under the License.
     margin-bottom: 4px;    
 }
 
+/* we have to have display: table in order for the horizontal wrapping to work */
 .mx_MemberList_wrapper {
     display: table; 
     table-layout: fixed;
     width: 100%;
 }
+
+.mx_MemberList_outerWrapper {
+    height: 0px;
+}

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

@@ -14,6 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_SearchableEntityList {
+    flex: 1;
+    -webkit-flex: 1;
+
+    display: flex;
+    display: -webkit-flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
 .mx_SearchableEntityList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
@@ -30,18 +41,41 @@ limitations under the License.
     color: #454545;
     opacity: 0.5;
 }
+
 .mx_SearchableEntityList_query::-webkit-input-placeholder {
     color: #454545;
     opacity: 0.5;
 }
 
+.mx_SearchableEntityList_listWrapper {
+    flex: 1;
+    -webkit-flex: 1;
+
+    overflow-y: auto;    
+}
+
 .mx_SearchableEntityList_list {
     display: table;
     table-layout: fixed;
     width: 100%;    
-    border-bottom: 1px solid #e1dddd;
 }
 
-.mx_SearchableEntityList_list:empty {
-    border-bottom: 0px;
+.mx_SearchableEntityList_list .mx_EntityTile_chevron {
+    display: none;
+}
+
+.mx_SearchableEntityList_hrWrapper {
+    width: 100%;
+    flex: 0px;
+    -webkit-flex: 0;    
+}
+
+.mx_SearchableEntityList hr {
+    height: 1px;
+    border: 0px;
+    color: #e1dddd;
+    background-color: #e1dddd;
+    margin-right: 15px;
+    margin-top: 11px;
+    margin-bottom: 11px;
 }