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;
+    background-color: #fff;
-    border-left: 1px solid #d8d8d8;
+    border-radius: 25px;
-    border-right: 1px solid #d8d8d8;
+    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-left: 5px;
-    padding-right: 12px;
+    padding-right: 10px;
-    padding-top: 3px;
+    height: 50px;
-    padding-bottom: 3px;
+}
-    vertical-align: middle;
+
-    width: 32px;
+.mx_MessageComposer .mx_MessageComposer_avatar img {
-    height: 32px;
+    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;
+    height: 48px;
-    float: left;
+
+    -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;
+    height: 48px;
-    margin-right: -26px;
+    background-color: #fff;
-    float: right;
+    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;
+    background-color: #80cef4;
-    color: #747474;
+    color: #fff;
     border-radius: 10px;
     font-weight: 400;
     font-size: 14px;
-    line-height: 22px;
+    line-height: 28px;
-    width: 34px;
+    width: 26px;
-    height: 20px;
+    height: 26px;
-    vertical-align: top;
     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;
+    -webkit-flex: 0 0 66px;
-    flex: 0 0 50px;    
+    flex: 0 0 66px;    
+}
 
-    text-align: right;
+/** Fixme - factor this out with the main header **/
 
-    height: 50px;
+.mx_RightPanel_headerButtonGroup {
-    border-bottom: 1px solid #d8d8d8;
+    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;
+    height: 48px;
-    margin-right: 16px;
+    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;
+    -webkit-flex: 0 0 86px;
-    flex: 0 0 50px;
+    flex: 0 0 86px;
-    border-bottom: 1px solid #d8d8d8;
 }
 
 .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;
+    -webkit-flex: 0 0 63px;
-    flex: 0 0 50px;    
+    flex: 0 0 63px;
-    /* background-color: #ff0; */
+    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%;       

skins/base/views/molecules/DirectoryMenu.js

@@ -29,19 +29,24 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_DirectoryMenu">
-                <h2>Directory</h2>
                 <div className="mx_DirectoryMenu_options">
                     <div className="mx_RoomTile">
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/placeholder.png" width="32" height="32" alt="(+)"/>
+                            <img src="img/create-big.png" width="42" height="42"/>
                         </div>
-                        <div className="mx_RoomTile_name">Users</div>
+                        <div className="mx_RoomTile_name">Create Room</div>
                     </div>
                     <div className="mx_RoomTile">
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/placeholder.png" width="32" height="32" alt="(+)"/>
+                            <img src="img/directory-big.png" width="42" height="42"/>
                         </div>
-                        <div className="mx_RoomTile_name">Rooms</div>
+                        <div className="mx_RoomTile_name">Directory</div>
+                    </div>
+                    <div className="mx_RoomTile">
+                        <div className="mx_RoomTile_avatar">
+                            <img src="img/settings-big.png" width="42" height="42"/>
+                        </div>
+                        <div className="mx_RoomTile_name">Settings</div>
                     </div>
                 </div>
             </div>

skins/base/views/molecules/MessageComposer.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var MessageComposerController = require("../../../../src/controllers/molecules/MessageComposer");
 
 module.exports = React.createClass({
@@ -25,16 +26,20 @@ module.exports = React.createClass({
     mixins: [MessageComposerController],
 
     render: function() {
+        var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
         return (
             <div className="mx_MessageComposer">
                 <div className="mx_MessageComposer_wrapper">
                     <div className="mx_MessageComposer_row">
                         <div className="mx_MessageComposer_avatar">
-                            <img src="img/placeholder.png" width="32" height="32" alt="(+)"/>
+                            <img src={ MatrixClientPeg.get().getAvatarUrlForMember(me, 40, 40, "crop") } width="40" height="40"/>
                         </div>
                         <div className="mx_MessageComposer_input">
                             <textarea ref="textarea" onKeyDown={this.onKeyDown} placeholder="Type a message" />
                         </div>
+                        <div className="mx_MessageComposer_upload">
+                            <img src="img/upload.png" width="32" height="32"/>
+                        </div>
                     </div>
                 </div>
             </div>

skins/base/views/molecules/MessageTile.js

@@ -56,12 +56,13 @@ module.exports = React.createClass({
             mx_MessageTile_highlight: this.shouldHighlight(),
             mx_MessageTile_continuation: this.props.continuation,
         });
+        var timestamp = this.props.last ? <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
         return (
             <div className={classes}>
                 <div className="mx_MessageTile_avatar">
-                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 32, 32, "crop") : null } width="32" height="32"/>
+                    <img src={ this.props.mxEvent.sender ? MatrixClientPeg.get().getAvatarUrlForMember(this.props.mxEvent.sender, 40, 40, "crop") : null } width="40" height="40"/>
                 </div>
-                <MessageTimestamp ts={this.props.mxEvent.getTs()} />
+                { timestamp }
                 <SenderProfile mxEvent={this.props.mxEvent} />
                 <TileType mxEvent={this.props.mxEvent} />
             </div>

skins/base/views/molecules/RoomCreate.js

@@ -32,7 +32,7 @@ module.exports = React.createClass({
                 <div className="mx_RoomCreate_table">
                     <div className="mx_RoomTile">
                         <div className="mx_RoomTile_avatar">
-                            <img src="img/create.png" width="32" height="32" alt="(+)"/>
+                            <img src="img/create.png" width="32" height="32"/>
                         </div>
                         <div className="mx_RoomTile_name">Create new room</div>
                     </div>

skins/base/views/molecules/RoomHeader.js

@@ -18,6 +18,7 @@ limitations under the License.
 
 var React = require('react');
 
+var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 var RoomHeaderController = require("../../../../src/controllers/molecules/RoomHeader");
 
 module.exports = React.createClass({
@@ -25,19 +26,26 @@ module.exports = React.createClass({
     mixins: [RoomHeaderController],
 
     render: function() {
+
+        var topic = this.props.room.currentState.getStateEvents('m.room.topic', '');
+        topic = topic ? <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div> : null;
+
         return (
             <div className="mx_RoomHeader">
                 <div className="mx_RoomHeader_wrapper">
                     <div className="mx_RoomHeader_leftRow">
                         <div className="mx_RoomHeader_avatar">
-                            <img src="img/placeholder.png" width="32" height="32" alt="(+)"/>
+                            <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 48, 48, "crop") } width="48" height="48"/>
                         </div>
+                        <div className="mx_RoomHeader_info">
                             <div className="mx_RoomHeader_name">{ this.props.room.name }</div>
-                        <div className="mx_RoomHeader_button">
+                            { topic }
-                            <img src="img/info.png" width="32" height="32"/>
                         </div>
                     </div>
                     <div className="mx_RoomHeader_rightRow">
+                        <div className="mx_RoomHeader_button">
+                            <img src="img/settings.png" width="32" height="32"/>
+                        </div>
                         <div className="mx_RoomHeader_button">
                             <img src="img/search.png" width="32" height="32"/>
                         </div>

skins/base/views/molecules/RoomTile.js

@@ -45,7 +45,7 @@ module.exports = React.createClass({
         }
         return (
             <div className={classes} onClick={this.onClick}>
-                <div className="mx_RoomTile_avatar"><img src="img/placeholder.png" width="32" height="32" alt="()"/></div>
+                <div className="mx_RoomTile_avatar"><img src={ MatrixClientPeg.get().getAvatarUrlForRoom(this.props.room, 40, 40, "crop") } width="40" height="40"/></div>
                 <div className="mx_RoomTile_name">{name}{ badge }</div>
             </div>
         );

skins/base/views/organisms/LeftPanel.js

@@ -31,7 +31,6 @@ module.exports = React.createClass({
             <div className="mx_LeftPanel">
                 <img className="mx_LeftPanel_hideButton" src="img/hide.png" width="32" height="32" alt="<"/>
                 <RoomList selectedRoom={this.props.currentRoom} />
-                <RoomCreate/>
                 <DirectoryMenu />
             </div>
         );

skins/base/views/organisms/RightPanel.js

@@ -28,8 +28,14 @@ module.exports = React.createClass({
         return (
             <div className="mx_RightPanel">
                 <div className="mx_RightPanel_header">
-                    <img className="mx_RightPanel_headerButton" src="img/file.png" width="32" height="32" alt="Files"/>
+                    <div className="mx_RightPanel_headerButtonGroup">
-                    <img className="mx_RightPanel_headerButton" src="img/members.png" width="32" height="32" alt="Members"/>
+                        <div className="mx_RightPanel_headerButton">
+                            <img src="img/file.png" width="32" height="32" alt="Files"/>
+                        </div>
+                        <div className="mx_RightPanel_headerButton">
+                            <img src="img/members.png" width="32" height="32" alt="Members"/>
+                        </div>
+                    </div>
                 </div>
                 <MemberList roomId={this.props.roomId} key={this.props.roomId} />
             </div>

skins/base/views/organisms/RoomView.js

@@ -67,6 +67,7 @@ module.exports = React.createClass({
             return (
                 <div className="mx_RoomView">
                     <RoomHeader room={this.state.room} />
+                    <div className="mx_RoomView_auxPanel"></div>
                     <div ref="messageWrapper" className="mx_RoomView_messagePanel" onScroll={this.onMessageListScroll}>
                         <div className="mx_RoomView_messageListWrapper">
                             <div className="mx_RoomView_MessageList" aria-live="polite">
@@ -76,7 +77,7 @@ module.exports = React.createClass({
                             </div>
                         </div>
                     </div>
-                    <MessageComposer roomId={this.props.roomId} />
+                    <MessageComposer room={this.state.room} />
                 </div>
             );
         }

src/controllers/molecules/MessageComposer.js

@@ -54,7 +54,7 @@ module.exports = {
                 };
             }
 
-            MatrixClientPeg.get().sendMessage(this.props.roomId, content).then(function() {
+            MatrixClientPeg.get().sendMessage(this.props.room.roomId, content).then(function() {
                 dis.dispatch({
                     action: 'message_sent'
                 });

src/controllers/organisms/RoomView.js

@@ -227,6 +227,10 @@ module.exports = {
             var mxEv = this.state.room.timeline[i];
             var TileType = tileTypes[mxEv.getType()];
             var continuation = false;
+            var last = false;
+            if (i == this.state.room.timeline.length - 1) {
+                last = true;
+            }
             if (i > 0 &&
                 count < this.state.messageCap - 1 &&
                 this.state.room.timeline[i].sender &&
@@ -238,7 +242,7 @@ module.exports = {
             }
             if (!TileType) continue;
             ret.unshift(
-                <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation}/>
+                <TileType key={mxEv.getId()} mxEvent={mxEv} continuation={continuation} last={last}/>
             );
             ++count;
         }