sort out the membership list

src/skins/vector/css/molecules/EventTile.css

@@ -91,7 +91,7 @@ limitations under the License.
 }
 
 .mx_EventTile_editButton {
-    clear: both;
+    clear: right;
     float: right;
     display: inline-block;
     visibility: hidden;

src/skins/vector/css/molecules/MemberTile.css

@@ -16,48 +16,22 @@ limitations under the License.
 
 .mx_MemberTile {
     display: table-row;
-    height: 49px;
     position: relative;
+    color: #454545;
 }
 
 .mx_MemberTile_avatar {
     display: table-cell;
-    padding-left: 14px;
+    padding-left: 3px;
     padding-right: 12px;
-    padding-top: 3px;
-    padding-bottom: 3px;
+    padding-top: 2px;
+    padding-bottom: 0px;
     vertical-align: middle;
     width: 36px;
     height: 36px;
     position: relative;
 }
 
-.mx_MemberTile_inviteTile {
-    cursor: pointer;
-}
-
-.mx_MemberTile_inviteEditing {
-    display: initial ! important;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_avatar {
-    display: none;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_name {
-    width: 200px;
-}
-
-.mx_MemberTile_inviteEditing .mx_MemberTile_name input {
-    border-radius: 3px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 14px;
-    padding: 9px;
-    margin-top: 6px;
-    margin-left: 14px;
-}
-
 .mx_MemberTile_power {
     position: absolute;
     width: 44px;
@@ -79,20 +53,18 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_MemberTile_hover {
-    background-color: #f0f0f0;
-    font-size: 12px;
-    color: #747474;    
-}
-
 .mx_MemberTile_userId {
-    font-weight: bold;
+    font-size: 14px;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.mx_MemberTile_leave {
-    cursor: pointer;
+.mx_MemberTile_presence {
+    font-size: 12px;
+    opacity: 0.5;
+}
+
+.mx_MemberTile_chevron {
     margin-top: 8px;
     margin-right: -4px;
     margin-left: 6px;
@@ -113,14 +85,14 @@ limitations under the License.
 
 .mx_MemberTile_unavailable .mx_MemberTile_avatar,
 .mx_MemberTile_unavailable .mx_MemberTile_name,
-.mx_MemberTile_unavailable .mx_MemberTile_nameSpan
+.mx_MemberTile_unavailable .mx_MemberTile_userId
 {
     opacity: 0.66;
 }
 
 .mx_MemberTile_offline .mx_MemberTile_avatar,
 .mx_MemberTile_offline .mx_MemberTile_name,
-.mx_MemberTile_offline .mx_MemberTile_nameSpan
+.mx_MemberTile_offline .mx_MemberTile_userId
 {
     opacity: 0.25;
 }

src/skins/vector/css/molecules/RoomHeader.css

@@ -20,7 +20,7 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 960px;
     margin: auto;
-    height: 88px;
+    height: 83px;
     border-bottom: 1px solid #eeeeee;
 
     display: -webkit-box;
@@ -89,7 +89,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 88px;
+    line-height: 83px;
     color: #76cfa6;
     font-weight: 400;
     font-size: 20px;

src/skins/vector/css/organisms/MemberList.css

@@ -44,12 +44,40 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
+.mx_MemberList_invite {
+    font-family: 'Myriad Pro', Helvetica, Arial, Sans-Serif;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    padding: 9px;
+    color: #454545;
+    margin-left: 3px;
+    font-size: 16px;
+    margin-bottom: 6px;
+    width: 180px;
+}
+
+.mx_MemberList_invite::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+.mx_MessageList_invite::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_MemberList_invited h2 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 14px;
+    padding-left: 3px;
+    padding-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 4px;    
+}
+
 .mx_MemberList_wrapper {
     display: table;
     table-layout: fixed;
     width: 100%;
 }
-
-.mx_MemberList h2 {
-    margin: 14px;
-}

src/skins/vector/css/organisms/RightPanel.css

@@ -33,29 +33,36 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 66px;
-    flex: 0 0 66px;    
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 18px;
-    height: 48px;
+    margin-top: 32px;
     float: left;
     background-color: #fff;
-    margin-right: 22px;
+    margin-left: 3px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
-    height: 48px;
     display: table-cell;
     vertical-align: middle;    
     padding-left: 8px;
     padding-right: 8px;
 }
 
+.mx_RightPanel_headerButton_highlight {
+    position: relative;
+    bottom: 0px;
+    left: -4px;
+    width: 25px;
+    height: 4px;
+    background-color: #76cfa6;
+}
+
 .mx_RightPanel .mx_MemberList {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;

src/skins/vector/css/organisms/RoomList.css

@@ -20,7 +20,6 @@ limitations under the License.
 
 .mx_RoomList_invites,
 .mx_RoomList_recents {
-    margin-top: -12px;
     display: table;
     table-layout: fixed;
     width: 100%;
@@ -40,4 +39,6 @@ limitations under the License.
     font-size: 14px;
     padding-left: 12px;
     padding-right: 12px;
+    margin-top: 8px;
+    margin-bottom: 4px;
 }

src/skins/vector/css/organisms/RoomView.css

@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 88px;
-    flex: 0 0 88px;
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
 }
 
 .mx_RoomView_fileDropTarget {