implement latest skin

skins/base/css/molecules/MemberTile.css

@@ -30,7 +30,7 @@ limitations under the License.
 }
 
 .mx_MemberTile_avatar img {
-    border-radius: 16px;    
+    border-radius: 20px;    
     background-color: #dbdbdb;
 }
 

skins/base/css/molecules/MessageComposer.css

@@ -19,9 +19,9 @@ limitations under the License.
     height: 50px;
     vertical-align: middle;
     margin: auto;
-    border-top: 1px solid #d8d8d8;
-    border-left: 1px solid #d8d8d8;
-    border-right: 1px solid #d8d8d8;
+    background-color: #fff;
+    border-radius: 25px;
+    border: 1px solid #e1e1e1;
 }
 
 .mx_MessageComposer_row {
@@ -32,32 +32,44 @@ limitations under the License.
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
     display: table-cell;
-    padding-left: 12px;
-    padding-right: 12px;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    vertical-align: middle;
-    width: 32px;
-    height: 32px;
+    padding-left: 5px;
+    padding-right: 10px;
+    height: 50px;
+}
+
+.mx_MessageComposer .mx_MessageComposer_avatar img {
+    margin-top: 5px;
+    border-radius: 20px;
+    background-color: #bdbdbd;
 }
 
 .mx_MessageComposer_input {
     display: table-cell;
     width: 100%;
-    padding-right: 1em;
     vertical-align: middle;
+    height: 50px;
 }
 
 .mx_MessageComposer_input textarea {
     font-size: 15px;
     width: 100%;
     height: 1em;
+    padding-top: 0.7em;
+    padding-bottom: 0.7em;
     border: 0px;
     resize: none;
     outline: none;
-    padding-top: 0.7em;
-    padding-bottom: 0.7em;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;    
-}
+}
+
+.mx_MessageComposer_upload {
+    display: table-cell;
+    vertical-align: middle;
+    padding-right: 15px;
+}
+
+.mx_MessageComposer_upload img {
+    margin-top: 5px;
+}

skins/base/css/molecules/MessageTile.css

@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_MessageTile_avatar img {
     background-color: #dbdbdb;
-    border-radius: 16px;
+    border-radius: 20px;
     border: 0px;
 }
 

skins/base/css/molecules/RoomHeader.css

@@ -20,42 +20,85 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 720px;
     margin: auto;
-    height: 50px;
+    height: 86px;
+    margin-top: 18px;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;    
 }
 
 .mx_RoomHeader_leftRow {
     display: table-row;
     margin-left: 12px;
-    height: 50px;
-    float: left;
+    height: 48px;
+
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
 }
 
 .mx_RoomHeader_rightRow {
     display: table-row;
-    height: 50px;
-    margin-right: -26px;
-    float: right;
+    height: 48px;
+    background-color: #fff;
+    border-radius: 48px;
+    border: 1px solid #e1e1e1;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 0 0 200px;
+    flex: 0 0 200px;    
+}
+
+.mx_RoomHeader_info {
+    display: table-cell;
+    height: 48px;
+    vertical-align: middle;
 }
 
 .mx_RoomHeader_name {
-    display: table-cell;
     vertical-align: middle;
-    height: 50px;
+    height: 28px;
+    color: #80cef4;
     font-weight: 400;
-    font-size: 20px;
+    font-size: 18px;
     padding-left: 16px;
     padding-right: 16px;
 }
 
+.mx_RoomHeader_topic {
+    vertical-align: bottom;
+    float: left;
+    max-height: 38px;
+    color: #80cef4;    
+    padding-left: 16px;
+    padding-right: 16px;
+    overflow: scroll;
+}
+
 .mx_RoomHeader_avatar {
     display: table-cell;
     height: 50px;
     vertical-align: middle;
 }
 
+.mx_RoomHeader_avatar img {
+	border-radius: 24px;
+}
+
 .mx_RoomHeader_button {
-    height: 50px;
+    height: 48px;
     display: table-cell;
     vertical-align: middle;
-    padding-right: 16px;    
+    padding-left: 8px;
+    padding-right: 8px;
 }

skins/base/css/molecules/RoomTile.css

@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_avatar img {
-    border-radius: 16px;
+    border-radius: 20px;
     background-color: #dbdbdb;
 }
 
@@ -47,15 +47,14 @@ limitations under the License.
 
 .mx_RoomTile_badge {    
     float: right;
-    background-color: #d8d8d8;
-    color: #747474;
+    background-color: #80cef4;
+    color: #fff;
     border-radius: 10px;
     font-weight: 400;
     font-size: 14px;
-    line-height: 22px;
-    width: 34px;
-    height: 20px;
-    vertical-align: top;
+    line-height: 28px;
+    width: 26px;
+    height: 26px;
     text-align: center;
 }
 

skins/base/css/organisms/LeftPanel.css

@@ -49,6 +49,7 @@ limitations under the License.
     overflow-y: scroll;
 }
 
+/*
 .mx_LeftPanel .mx_RoomCreate {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
@@ -69,6 +70,7 @@ limitations under the License.
     width: 100%;
     height: 46px;
 }
+*/
 
 .mx_LeftPanel .mx_DirectoryMenu {
     -webkit-box-ordinal-group: 3;
@@ -77,12 +79,14 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    min-height: 150px;
+    -webkit-flex: 0 0 170px;
+    flex: 0 0 170px;
+
     padding-left: 16px;
     padding-right: 16px;
 }
 
 .mx_LeftPanel .mx_DirectoryMenu .mx_DirectoryMenu_options {
-    margin-top: -12px;
+    margin-top: 12px;
     width: 100%;
 }

skins/base/css/organisms/MemberList.css

@@ -22,7 +22,7 @@ limitations under the License.
 
 .mx_MemberList_chevron {
     position: absolute;
-    right: 20px;
+    right: 35px;
     margin-top: -13px;
 }
 
@@ -33,6 +33,7 @@ limitations under the License.
     max-height: 75%;
     border-radius: 8px;
     padding: 20px 14px 14px 24px;
+    background-color: #fff;
 }
 
 .mx_MemberList_wrapper {

skins/base/css/organisms/RightPanel.css

@@ -33,18 +33,28 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 50px;
-    flex: 0 0 50px;    
+    -webkit-flex: 0 0 66px;
+    flex: 0 0 66px;    
+}
 
-    text-align: right;
+/** Fixme - factor this out with the main header **/
 
-    height: 50px;
-    border-bottom: 1px solid #d8d8d8;
+.mx_RightPanel_headerButtonGroup {
+    margin-top: 18px;
+    height: 48px;
+    float: right;
+    background-color: #fff;
+    border-radius: 48px;
+    border: 1px solid #e1e1e1;
+    margin-right: 22px;
 }
 
 .mx_RightPanel_headerButton {
-    margin-top: 9px;
-    margin-right: 16px;
+    height: 48px;
+    display: table-cell;
+    vertical-align: middle;    
+    padding-left: 8px;
+    padding-right: 8px;
 }
 
 .mx_RightPanel .mx_MemberList {

skins/base/css/organisms/RoomView.css

@@ -35,9 +35,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 50px;
-    flex: 0 0 50px;
-    border-bottom: 1px solid #d8d8d8;
+    -webkit-flex: 0 0 86px;
+    flex: 0 0 86px;
 }
 
 .mx_RoomView_auxPanel {
@@ -47,7 +46,10 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
+    max-width: 720px;
     width: 100%;
+    margin: auto;
+    border-top: 1px solid #a8dbf3;
     height: 0%;
 }
 
@@ -86,7 +88,7 @@ limitations under the License.
     order: 4;
 
     width: 100%;
-    -webkit-flex: 0 0 50px;
-    flex: 0 0 50px;    
-    /* background-color: #ff0; */
+    -webkit-flex: 0 0 63px;
+    flex: 0 0 63px;
+    margin-left: 3px;
 }

skins/base/css/pages/MatrixChat.css

@@ -45,7 +45,7 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
-    /* background-color: #00f; */
+    background-color: #f3f8fa;
     width: 100%;
     height: 100%;       
 }
@@ -57,6 +57,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
+    background-color: #f3f8fa;
     -webkit-flex: 0 0 230px;
     flex: 0 0 230px;
     height: 100%;