Merge branch 'vector'

2015-07-21 22:37:14 -07:00 · 2015-07-21 22:37:14 -07:00 · 92e346a842
parent 6ceaee7fc0 904754b20d
commit 92e346a842
180 changed files with 6631 additions and 476 deletions
--- a/examples/trivial/fonts
+++ b/examples/trivial/fonts
@ -0,0 +1 @@
 ../../skins/base/fonts/
--- a/examples/trivial/img
+++ b/examples/trivial/img
@ -0,0 +1 @@
 ../../skins/base/img
--- a/examples/trivial/index.html
+++ b/examples/trivial/index.html
@ -2,9 +2,22 @@
 <html lang="en" style="height: 100%; overflow: hidden">
  <head>
    <meta charset="utf-8">
-    <title>Matrix React SDK Example</title>
+    <title>vector</title>
    <link href='fonts/Lato.css' rel='stylesheet' type='text/css'>
  </head>
  <body style="height: 100%;">
    <audio id="ringbackAudio" loop>
        <source src="media/ringback.ogg" type="audio/ogg" />
        <source src="media/ringback.mp3" type="audio/mpeg" />
    </audio>
    <audio id="callendAudio">
        <source src="media/callend.ogg" type="audio/ogg" />
        <source src="media/callend.mp3" type="audio/mpeg" />
    </audio>
    <audio id="busyAudio">
        <source src="media/busy.ogg" type="audio/ogg" />
        <source src="media/busy.mp3" type="audio/mpeg" />
    </audio>
    <section id="matrixchat" style="height: 100%;"></section>
    <script src="bundle.js"></script>
    <link rel="stylesheet" href="node_modules/matrix-react-sdk/bundle.css">
--- a/examples/trivial/index.js
+++ b/examples/trivial/index.js
@ -40,9 +40,17 @@ function routeUrl(location) {
            }
        }
        window.matrixChat.showScreen('register', params);
    } else {
        window.matrixChat.showScreen(location.hash.substring(2));
    }
 }
 function onHashChange(ev) {
    routeUrl(window.location);
 }
 window.addEventListener('hashchange', onHashChange);
 var loaded = false;
 window.onload = function() {
--- a/examples/trivial/media/busy.mp3
+++ b/examples/trivial/media/busy.mp3
--- a/examples/trivial/media/busy.ogg
+++ b/examples/trivial/media/busy.ogg
--- a/examples/trivial/media/callend.mp3
+++ b/examples/trivial/media/callend.mp3
--- a/examples/trivial/media/callend.ogg
+++ b/examples/trivial/media/callend.ogg
--- a/examples/trivial/media/message.mp3
+++ b/examples/trivial/media/message.mp3
--- a/examples/trivial/media/message.ogg
+++ b/examples/trivial/media/message.ogg
--- a/examples/trivial/media/ring.mp3
+++ b/examples/trivial/media/ring.mp3
--- a/examples/trivial/media/ring.ogg
+++ b/examples/trivial/media/ring.ogg
--- a/examples/trivial/media/ringback.mp3
+++ b/examples/trivial/media/ringback.mp3
--- a/examples/trivial/media/ringback.ogg
+++ b/examples/trivial/media/ringback.ogg
--- a/skins/base/css/atoms/MessageTimestamp.css
+++ b/skins/base/css/atoms/MessageTimestamp.css
@ -15,6 +15,4 @@ limitations under the License.
 */
 .mx_MessageTimestamp {
    display: table-cell;
    white-space: pre;
 }
--- a/skins/base/css/common.css
+++ b/skins/base/css/common.css
@ -15,9 +15,94 @@ limitations under the License.
 */
 body {
-	font-family: Helvetica, Arial, Sans-Serif;
+    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
    font-size: 16px;
    color: #454545;
    border: 0px;
    margin: 0px;
 }
 div.error {
    color: red;
 }
 h2 {
    color: #80cef4;
    font-weight: 400;
    font-size: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
 }
 /* FIXME: show them on hoverover, and fix for firefox */
 ::-webkit-scrollbar {
    display: none;
 }
 html {
    overflow: -moz-scrollbars-none;
 }
 .mx_Dialog_Background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.2;
    z-index: 2000;
 }
 .mx_Dialog_Wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
 }
 .mx_Dialog {
    background-color: #fff;
    color: #747474;
    text-align: center;
    margin: auto;
    max-width: 500px;
    z-index: 2010;
    font-weight: 300;
    font-size: 16px;
    position: relative;
    border-radius: 8px;
    top: 200px;
 }
 .mx_Dialog_content {
    margin: 35px;
 }
 .mx_Dialog_buttons {
    padding-bottom: 35px;
 }
 .mx_Dialog button {
    border: 0px;
    height: 36px;
    border-radius: 36px;
    font-weight: 400;
    font-size: 16px;
    color: #fff;
    background-color: #80cef4;
    margin-left: 8px;
    margin-right: 8px;
    padding-left: 1em;
    padding-right: 1em;
 }
 .mx_ErrorDialogTitle {
    min-height: 16px;
    padding: 12px;
    border-bottom: 1px solid #a9dbf4;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.4;
 }
--- a/skins/base/css/molecules/MNoticeTile.css
+++ b/skins/base/css/molecules/MNoticeTile.css
@ -15,4 +15,5 @@ limitations under the License.
 */
 .mx_MNoticeTile {
    opacity: 0.5;
 }
--- a/skins/base/css/molecules/MatrixToolbar.css
+++ b/skins/base/css/molecules/MatrixToolbar.css
@ -0,0 +1,28 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_MatrixToolbar {
    width: 100%;
    text-align: center;
    background-color: #ff0064;
    color: #fff;
    font-weight: bold;
    padding: 6px;
 }
 .mx_MatrixToolbar button {
    margin-left: 12px;
 }
--- a/skins/base/css/molecules/MemberInfo.css
+++ b/skins/base/css/molecules/MemberInfo.css
@ -0,0 +1,73 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_MemberInfo {
    text-align: center;
    border: 1px solid #a9dbf4;
    border-radius: 8px;
    background-color: #fff;
    position: absolute;
    width: 200px;
    margin-left: -295px;
    margin-top: 0px;
    z-index: 1000;
    padding: 6px;
 }
 .mx_MemberInfo_chevron {
    padding: 12px;
    position: absolute;
    right: -21px;
    top: 0px;
 }
 /*
 * a hacky shim to extend the hitmask of the overlay to overlap
 * better with the main menu itself
 */
 .mx_MemberInfo_shim {
    position: absolute;
    left: 212px;
    width: 40px;
    height: 100%;
 }
 .mx_MemberInfo_avatar {
    padding: 6px;
 }
 .mx_MemberInfo_avatarImg {
    border-radius: 128px;
 }
 .mx_MemberInfo_field {
    padding: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .mx_MemberInfo_button {
    vertical-align: middle;
    max-width: 100px;
    height: 36px;
    background-color: #50e3c2;
    line-height: 36px;
    border-radius: 36px;
    color: #fff;
    margin: auto;
    margin-top: 6px;
    margin-bottom: 6px;
 }
--- a/skins/base/css/molecules/MemberTile.css
+++ b/skins/base/css/molecules/MemberTile.css
@ -0,0 +1,99 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_MemberTile {
    cursor: pointer;
    display: table-row;
    height: 49px;
 }
 .mx_MemberTile_avatar {
    display: table-cell;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    position: relative;
 }
 .mx_MemberTile_avatarImg {
    z-index: 20;
    border-radius: 20px;    
    background-color: #dbdbdb;
 }
 .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;
 }
 .mx_MemberTile_power {
    z-index: 10;
    position: absolute;
    width: 48px;
    height: 48px;
    left: -4px;
    top: -1px;
 }
 .mx_MemberTile_name {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .mx_MemberTile_nameWrapper {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
 }
 .mx_MemberTile_nameSpan {
 }
 .mx_MemberTile_unavailable .mx_MemberTile_avatar,
 .mx_MemberTile_unavailable .mx_MemberTile_name,
 .mx_MemberTile_unavailable .mx_MemberTile_nameSpan
 {
    opacity: 0.75;
 }
 .mx_MemberTile_offline .mx_MemberTile_avatar,
 .mx_MemberTile_offline .mx_MemberTile_name,
 .mx_MemberTile_offline .mx_MemberTile_nameSpan
 {
    opacity: 0.5;
 }
--- a/skins/base/css/molecules/MessageComposer.css
+++ b/skins/base/css/molecules/MessageComposer.css
@ -14,7 +14,71 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-.mx_MessageComposer textarea {
+.mx_MessageComposer_wrapper {
-    width: 100%;
+    max-width: 720px;
    height: 50px;
    vertical-align: middle;
    margin: auto;
    background-color: #fff;
    border-radius: 25px;
    border: 1px solid #a9dbf4;
 }
 .mx_MessageComposer_row {
    display: table-row;
    width: 100%;
    height: 50px;
 }
 .mx_MessageComposer .mx_MessageComposer_avatar {
    display: table-cell;
    padding-left: 5px;
    padding-right: 10px;
    height: 50px;
 }
 .mx_MessageComposer .mx_MessageComposer_avatar img {
    margin-top: 5px;
    border-radius: 20px;
    background-color: #dbdbdb;
 }
 .mx_MessageComposer_input {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
    height: 50px;
 }
 .mx_MessageComposer_input textarea {
    font-size: 15px;
    width: 100%;
    height: 1.2em;
    padding-top: 0.7em;
    padding-bottom: 0.7em;
    border: 0px;
    resize: none;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;    
    /* needed for FF */
    font-family: 'Lato', Helvetica, Arial, Sans-Serif;
 }
 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
    line-height: 100%;
 }
 .mx_MessageComposer_upload {
    display: table-cell;
    vertical-align: middle;
    padding-right: 15px;
    cursor: pointer;
 }
 .mx_MessageComposer_upload img {
    margin-top: 5px;
 }
--- a/skins/base/css/molecules/MessageTile.css
+++ b/skins/base/css/molecules/MessageTile.css
@ -15,11 +15,52 @@ limitations under the License.
 */
 .mx_MessageTile {
-	display: table-row;
+    max-width: 100%;
    clear: both;
    margin-top: 32px;
    margin-left: 56px;
 }
 .mx_MessageTile_avatar {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -64px;
    margin-top: -7px;
    float: left;    
 }
 .mx_MessageTile_avatar img {
    background-color: #dbdbdb;
    border-radius: 20px;
    border: 0px;
 }
 .mx_MessageTile_continuation {
    margin-top: 8px ! important;
 }
 .mx_MessageTile .mx_SenderProfile {
    color: #454545;
    opacity: 0.5;
    font-size: 14px;
    margin-bottom: 4px;
    display: block;
 }
 .mx_MessageTile .mx_MessageTimestamp {
    color: #454545;
    opacity: 0.5;
    font-size: 14px;
    float: right;
 }
 .mx_MessageTile_content {
-	display: table-cell;
+    padding-right: 100px;
    display: block;
 }
 .mx_MessageTile_notice .mx_MessageTile_content {
    opacity: 0.5;
 }
 .mx_MessageTile_sending {
@ -33,3 +74,7 @@ limitations under the License.
 .mx_MessageTile_highlight {
    color: #00f;
 }
 .mx_MessageTile_msgOption {
    float: right;
 }
--- a/skins/base/css/molecules/RoomDropTarget.css
+++ b/skins/base/css/molecules/RoomDropTarget.css
@ -0,0 +1,27 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_RoomDropTarget {
    font-size: 14px;
    text-align: center;
    margin-left: 8px;
    margin-right: 8px;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #fbfbfb;
    border: 1px dashed #d7d7d7;
    border-radius: 8px;
 }
--- a/skins/base/css/molecules/RoomHeader.css
+++ b/skins/base/css/molecules/RoomHeader.css
@ -15,6 +15,125 @@ limitations under the License.
 */
 .mx_RoomHeader {
-    height: 1em;
+}
-    padding: 0px;
+
 .mx_RoomHeader_wrapper {
    max-width: 720px;
    margin: auto;
    height: 88px;
    border-bottom: 1px solid #a8dbf3;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 }
 .mx_RoomHeader_leftRow {
    height: 48px;
    margin-top: 18px;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    width: 100%;
 }
 .mx_RoomHeader_hangupButton {
    height: 48px;
    margin-top: 18px;
    background-color: #80cef4;
    border-radius: 48px;
    margin-right: 8px;
    color: #fff;
    line-height: 48px;
    text-align: center;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    -webkit-flex: 0 0 90px;
    flex: 0 0 90px;
 }
 .mx_RoomHeader_rightRow {
    height: 48px;
    margin-top: 18px;
    background-color: #fff;
    border-radius: 48px;
    border: 1px solid #a9dbf4;
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    -webkit-flex: 0 0 200px;
    flex: 0 0 200px;    
 }
 .mx_RoomHeader_info {
    display: table-cell;
    height: 48px;
    vertical-align: middle;
 }
 .mx_RoomHeader_simpleHeader {
    line-height: 88px;
    color: #80cef4;
    font-weight: 400;
    font-size: 20px;
    overflow: scroll;
    text-overflow: ellipsis;
 }
 .mx_RoomHeader_name {
    vertical-align: middle;
    height: 28px;
    color: #80cef4;
    font-weight: 400;
    font-size: 20px;
    padding-left: 16px;
    padding-right: 16px;
    overflow: scroll;
    text-overflow: ellipsis;
 }
 .mx_RoomHeader_topic {
    vertical-align: bottom;
    float: left;
    max-height: 38px;
    color: #70b5d7;  
    font-weight: 300;  
    padding-left: 16px;
    padding-right: 16px;
    overflow: scroll;
    text-overflow: ellipsis;
 }
 .mx_RoomHeader_avatar {
    display: table-cell;
    width: 48px;
    height: 50px;
    vertical-align: middle;
 }
 .mx_RoomHeader_avatar img {
 	border-radius: 24px;
 }
 .mx_RoomHeader_button {
    height: 48px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 8px;
    padding-right: 8px;
 }
--- a/skins/base/css/molecules/RoomSettings.css
+++ b/skins/base/css/molecules/RoomSettings.css
@ -0,0 +1,34 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_RoomSettings {
    max-height: 250px;
 }
 .mx_RoomSettings_settings {
    display: table;
    margin: 5px 0;
 }
 .mx_RoomSettings_settings > div {
    display: table-row;
 }
 .mx_RoomSettings_settings > div > * {
    display: table-cell;
    margin: 0 10px;
 }
--- a/skins/base/css/molecules/RoomTile.css
+++ b/skins/base/css/molecules/RoomTile.css
@ -15,31 +15,84 @@ limitations under the License.
 */
 .mx_RoomTile {
    padding: 5px;
    cursor: pointer;
    display: table-row;
    color: #818794;
 }
-.mx_RoomTile.selected {
+.mx_RoomTile_avatar {
-    text-decoration: underline;
+    display: table-cell;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 16px;
    vertical-align: middle;
    width: 40px;
    height: 40px;
    position: relative;
 }
 .mx_RoomTile_avatar img {
    border-radius: 20px;
    background-color: #dbdbdb;
 }
 .mx_RoomTile_name {
-}
+    display: table-cell;
-
+    vertical-align: middle;
 .mx_RoomTile div {
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 16px;    
 }
-.mx_RoomTile.unread {
+/*
 .mx_RoomTile_nameBadge {
    display: table;
    width: 100%;
    height: 50px;
 }
 .mx_RoomTile_badgeCell {
    display: table-cell;
    vertical-align: middle;
    width: 26px;
 }
 .mx_RoomTile_badge {    
    background-color: #80cef4;
    color: #fff;
    border-radius: 26px;
    font-weight: 400;
    font-size: 14px;
    line-height: 28px;
    width: 26px;
    height: 26px;
    text-align: center;
 }
 */
 .mx_RoomTile_badge {    
    background-color: #ff0064;
    border: 3px solid #fff;
    border-radius: 16px;
    width: 9px;
    height: 9px;
    position: absolute;
    right: 9px;
    bottom: 3px;
 }
 .mx_RoomTile_unread,
 .mx_RoomTile_highlight,
 .mx_RoomTile_invited
 {
    font-weight: bold;
    color: #000;
 }
-.mx_RoomTile.highlight {
+.mx_RoomTile_selected {
-    background-color: lime;
+    background-color: #f3f8fa;
-}
+    color: #80cef4;
 .mx_RoomTile.invited {
    font-weight: bold;
 }
--- a/skins/base/css/molecules/SenderProfile.css
+++ b/skins/base/css/molecules/SenderProfile.css
@ -15,6 +15,4 @@ limitations under the License.
 */
 .mx_SenderProfile {
    display: table-cell;
    padding: 0px 1em 0em 1em;
 }
--- a/skins/base/css/molecules/ServerConfig.css
+++ b/skins/base/css/molecules/ServerConfig.css
@ -0,0 +1,31 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_ServerConfig {
    margin-top: 7px;
 }
 .mx_ServerConfig .mx_Login_field {
    margin-top: 4px;
    margin-bottom: 5px;
 }
 .mx_ServerConfig_help:link {
    opacity: 0.8;
    font-size: 14px;
    font-weight: 300;
    color: #4a4a4a;
 }
--- a/skins/base/css/molecules/voip/CallView.css
+++ b/skins/base/css/molecules/voip/CallView.css
@ -0,0 +1,15 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
--- a/skins/base/css/molecules/voip/IncomingCallbox.css
+++ b/skins/base/css/molecules/voip/IncomingCallbox.css
@ -0,0 +1,68 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_IncomingCallBox {
    text-align: center;
    border: 1px solid #a9dbf4;
    border-radius: 8px;
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    left: 235px;
    top: 155px;
    padding: 6px;
 }
 .mx_IncomingCallBox_chevron {
    padding: 12px;
    position: absolute;
    left: -21px;
    top: 0px;
 }
 .mx_IncomingCallBox_title {
    padding: 6px;
    font-weight: bold;
 }
 .mx_IncomingCallBox_buttons {
    display: table-row;
 }
 .mx_IncomingCallBox_buttons_cell {
    vertical-align: middle;
    display: table-cell;
    padding: 6px;
    width: 50%;
 }
 .mx_IncomingCallBox_buttons_decline,
 .mx_IncomingCallBox_buttons_accept {
    vertical-align: middle;
    width: 80px;
    height: 36px;
    line-height: 36px;
    border-radius: 36px;
    color: #fff;
 }
 .mx_IncomingCallBox_buttons_decline {
    background-color: #f48080;
 }
 .mx_IncomingCallBox_buttons_accept {
    background-color: #80f480;
 }
--- a/skins/base/css/molecules/voip/VideoView.css
+++ b/skins/base/css/molecules/voip/VideoView.css
@ -0,0 +1,40 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_VideoView {
    width: 100%;
    position: relative;
    z-index: 30;
    margin-top: 12px;
 }
 .mx_VideoView video {
    width: 100%;
 }
 .mx_VideoView_remoteVideoFeed {
    width: 100%;
    background-color: #000;
    z-index: 50;
 }
 .mx_VideoView_localVideoFeed {
    width: 20%;
    position: absolute;
    left: 16px;
    bottom: 28px;
    z-index: 100;
 }
--- a/skins/base/css/organisms/LeftPanel.css
+++ b/skins/base/css/organisms/LeftPanel.css
@ -0,0 +1,70 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_LeftPanel {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
 }
 .mx_LeftPanel_hideButton {
    position: absolute;
    top: 10px;
    right: 10px;
 }
 .mx_LeftPanel .mx_RoomList {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    height: 100%;
    overflow-y: scroll;
 }
 .mx_LeftPanel .mx_BottomLeftMenu {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    -webkit-flex: 0 0 170px;
    flex: 0 0 170px;
    border-top: 1px solid #f3f8fa;
 }
 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
    color: #378bb4;
 }
 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile_avatar {
    padding-left: 14px;
 }
 .mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
    margin-top: 12px;
    width: 100%;
 }
--- a/skins/base/css/organisms/MemberList.css
+++ b/skins/base/css/organisms/MemberList.css
@ -0,0 +1,47 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_MemberList {
    height: 100%;
    margin-bottom: 100px;
    padding: 8px;
 }
 .mx_MemberList_chevron {
    position: absolute;
    right: 35px;
    margin-top: -15px;
 }
 .mx_MemberList_border {
    border: 1px solid #a9dbf4;
    overflow-y: scroll;
    height: auto;
    max-height: 75%;
    border-radius: 8px;
    padding: 20px 14px 14px 24px;
    background-color: #fff;
 }
 .mx_MemberList_wrapper {
    display: table;
    table-layout: fixed;
    width: 100%;
 }
 .mx_MemberList h2 {
    margin-top: 0px;
 }
--- a/skins/base/css/organisms/RightPanel.css
+++ b/skins/base/css/organisms/RightPanel.css
@ -0,0 +1,66 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_RightPanel {
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
 }
 .mx_RightPanel_header {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    -webkit-flex: 0 0 66px;
    flex: 0 0 66px;    
 }
 /** Fixme - factor this out with the main header **/
 .mx_RightPanel_headerButtonGroup {
    margin-top: 18px;
    height: 48px;
    float: right;
    background-color: #fff;
    border-radius: 48px;
    border: 1px solid #a9dbf4;
    margin-right: 22px;
 }
 .mx_RightPanel_headerButton {
    height: 48px;
    display: table-cell;
    vertical-align: middle;    
    padding-left: 8px;
    padding-right: 8px;
 }
 .mx_RightPanel .mx_MemberList {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
 }
--- a/skins/base/css/organisms/RoomDirectory.css
+++ b/skins/base/css/organisms/RoomDirectory.css
@ -0,0 +1,41 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_RoomDirectory {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
 }
 .mx_RoomDirectory_input {
    margin: auto;
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-weight: 300;
    font-size: 14px;
    padding: 9px;
    margin-top: 12px;
    margin-bottom: 12px;
 }
 .mx_RoomDirectory_table {
    width: 100%;
 }
 .mx_RoomDirectory_table td,
 .mx_RoomDirectory_table th, {
    padding: 6px;
 }
--- a/skins/base/css/organisms/RoomList.css
+++ b/skins/base/css/organisms/RoomList.css
@ -16,3 +16,15 @@ limitations under the License.
 .mx_RoomList {
 }
 .mx_RoomList_recents {
    margin-top: -12px;
    display: table;
    table-layout: fixed;
    width: 100%;
 }
 .mx_RoomList h2 {
    padding-left: 16px;
    padding-right: 16px;
 }
--- a/skins/base/css/organisms/RoomView.css
+++ b/skins/base/css/organisms/RoomView.css
@ -17,66 +17,132 @@ limitations under the License.
 .mx_RoomView {
    word-wrap: break-word;
    position: relative;
 }
 .mx_RoomView .mx_RoomHeader {
    height: 30px;
 }
 .mx_RoomView_roomWrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    position: absolute;
    width: 100%;
-    top: 32px;
+
-    bottom: 0px;
+    flex-direction: column;
    -webkit-flex-direction: column;
 }
-.mx_RoomView_messagePanel {
+.mx_RoomView .mx_RoomHeader {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
-    width: 100%;
+
-    height: 100%;
+    -webkit-flex: 0 0 88px;
-    /* background-color: #ff0; */
+    flex: 0 0 88px;
 }
-.mx_RoomView_messageListWrapper {
+.mx_RoomView_auxPanel {
    height: 100%;
    overflow-y: scroll;    
 }
 .mx_RoomView_MessageList {
    display: table;
 }
 .mx_RoomView_invitePrompt {
 }
 .mx_RoomView .mx_MemberList {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
-    /* background-color: #0f0; */
+    max-width: 720px;
-    width: 250px;
+    width: 100%;
-    overflow-y: scroll;
+    margin: auto;
-    height: 100%;
+
    overflow: scroll;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
 }
-.mx_RoomView .mx_MemberList ul {
+.mx_RoomView_messagePanel {
-    margin: 0px;
+    -webkit-box-ordinal-group: 3;
-    padding: 0px;
+    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    width: 100%;
    flex: 1 1 0;
    margin-top: 18px;
    margin-bottom: 18px;
    overflow-y: scroll;
 }
 .mx_RoomView_messageListWrapper {
    max-width: 720px;
    margin: auto;
 }
 .mx_RoomView_MessageList {
    width: 100%;
 }
 .mx_RoomView_MessageList h2 {
    clear: both;
    margin-top: 32px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #a8dbf3;
 }
 .mx_RoomView_invitePrompt {
 }
 .mx_RoomView_statusArea {
    -webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
    -ms-flex-order: 4;
    -webkit-order: 4;
    order: 4;
    width: 100%;
    -webkit-flex: 0 0 58px;
    flex: 0 0 58px;
 }
 .mx_RoomView_statusAreaBox {
    max-width: 720px;
    margin: auto;
    border-top: 1px solid #a8dbf3;
 }
 .mx_RoomView_typingBar {
    margin-top: 17px;
    margin-left: 56px;
    color: #818794;
 }
 .mx_RoomView_typingBar img {
    padding-left: 12px;
    padding-right: 12px;
    margin-left: -64px;
    margin-top: -7px;
    float: left;    
 }
 .mx_RoomView .mx_MessageComposer {
    -webkit-box-ordinal-group: 5;
    -moz-box-ordinal-group: 5;
    -ms-flex-order: 5;
    -webkit-order: 5;
    order: 5;
    width: 100%;
-    bottom: 0px;
+    -webkit-flex: 0 0 63px;
    flex: 0 0 63px;
    margin-right: 2px;
 }
 .mx_RoomView_uploadProgressOuter {
    width: 100%;
    background-color: black;
    height: 5px;
 }
 .mx_RoomView_uploadProgressInner {
    background-color: blue;
    height: 5px;
 }
--- a/skins/base/css/organisms/UserSettings.css
+++ b/skins/base/css/organisms/UserSettings.css
@ -0,0 +1,21 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 .mx_UserSettings {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
 }
--- a/skins/base/css/pages/MatrixChat.css
+++ b/skins/base/css/pages/MatrixChat.css
@ -14,76 +14,101 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
-.mx_MatrixChat {
+.mx_MatrixChat_wrapper {
    position: relative;
    width: 100%;
    height: 100%;
 }
 .mx_MatrixChat_chatWrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;    
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 42px;
 }
 .mx_MatrixChat_leftPanel {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-flex-direction: column;
-    /* background-color: #f00; */
+    width: 100%;
    width: 250px;
    height: 100%;
 }
-.mx_MatrixChat_leftPanel .mx_MatrixToolbar {
+.mx_MatrixToolbar {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
-    width: 100%;
+    height: 21px;
    height: 40px;
 }
-.mx_MatrixChat_leftPanel .mx_RoomList {
+.mx_MatrixChat_toolbarShowing {
    height: auto;
 }
 .mx_MatrixChat {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
-    /* background-color: #0ff; */
+    -webkit-flex: 1;
-    width: 100%;
+    flex: 1;
    height: 100%;
    overflow-y: scroll;
 }
-.mx_MatrixChat .mx_RoomView {
+.mx_MatrixChat .mx_LeftPanel {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
    -webkit-flex: 0 0 230px;
    flex: 0 0 230px;
 }
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
-    /* background-color: #00f; */
+    padding-left: 12px;
    padding-right: 12px;
    background-color: #f3f8fa;
    width: 100%;
    /* XXX: Hack: apparently if you try to nest a flex-box
     * within a non-flex-box within a flex-box, the height
     * of the innermost element gets miscalculated if the
     * parents are both auto.
     * Ideally we'd launch straight into the RoomView at this
     * point, but instead we fudge it and make the middlePanel
     * flex itself.
     */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 }
 .mx_MatrixChat .mx_RightPanel {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    background-color: #f3f8fa;
    -webkit-flex: 0 0 230px;
    flex: 0 0 230px;
    height: 100%; 
 }
--- a/skins/base/css/templates/Login.css
+++ b/skins/base/css/templates/Login.css
@ -15,8 +15,81 @@ limitations under the License.
 */
 .mx_Login {
-    width: 600px;
+    width: 100%;
-    height: 350px;
+    height: 100%;
-    position: relative;
+    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
 }
 .mx_Login h2 {
    color: #4a4a4a;
    font-weight: 300;
    margin-top: 32px;
    margin-bottom: 20px;
 }
 .mx_Login_box {
    width: 300px;
 }
 .mx_Login_logo {
    text-align: center;
 }
 .mx_Login_field {
    width: 100%;
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-weight: 300;
    font-size: 14px;
    padding: 9px;
    margin-bottom: 14px;
 }
 .mx_Login_submit {
    margin-top: 35px;
    margin-bottom: 24px;
    width: 100%;
    border-radius: 40px;
    height: 40px;
    border: 0px;
    background-color: #76cfa6;
    font-size: 16px;
    color: #fff;
 }
 .mx_Login_label {
    font-size: 14px;
    opacity: 0.8;
 }
 .mx_Login_checkbox {
    margin-right: 10px;
 }
 .mx_Login_create {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 14px;
    opacity: 0.8;
 }
 .mx_Login_error {
    color: #ff2020;
    font-weight: bold;
    text-align: center;
    margin-bottom: 24px;
 }
 .mx_Login_create:link {
    color: #4a4a4a;
 }
--- a/skins/base/fonts/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2
+++ b/skins/base/fonts/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2
--- a/skins/base/fonts/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2
+++ b/skins/base/fonts/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2
--- a/skins/base/fonts/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2
+++ b/skins/base/fonts/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2
--- a/skins/base/fonts/Lato.css
+++ b/skins/base/fonts/Lato.css
@ -0,0 +1,48 @@
 /* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
--- a/skins/base/fonts/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2
+++ b/skins/base/fonts/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2
--- a/skins/base/fonts/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2
+++ b/skins/base/fonts/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2
--- a/skins/base/fonts/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2
+++ b/skins/base/fonts/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2
--- a/skins/base/img/attach.png
+++ b/skins/base/img/attach.png
--- a/skins/base/img/chevron-left.png
+++ b/skins/base/img/chevron-left.png
--- a/skins/base/img/chevron-right.png
+++ b/skins/base/img/chevron-right.png
--- a/skins/base/img/chevron.png
+++ b/skins/base/img/chevron.png
--- a/skins/base/img/create-big.png
+++ b/skins/base/img/create-big.png
--- a/skins/base/img/create.png
+++ b/skins/base/img/create.png
--- a/skins/base/img/directory-big.png
+++ b/skins/base/img/directory-big.png
--- a/skins/base/img/file.png
+++ b/skins/base/img/file.png
--- a/skins/base/img/filegrid.png
+++ b/skins/base/img/filegrid.png
--- a/skins/base/img/filelist.png
+++ b/skins/base/img/filelist.png
--- a/skins/base/img/hide.png
+++ b/skins/base/img/hide.png
--- a/skins/base/img/info.png
+++ b/skins/base/img/info.png
--- a/skins/base/img/logo.png
+++ b/skins/base/img/logo.png
--- a/skins/base/img/members.png
+++ b/skins/base/img/members.png
--- a/skins/base/img/menu.png
+++ b/skins/base/img/menu.png
--- a/skins/base/img/p/p0.png
+++ b/skins/base/img/p/p0.png
--- a/skins/base/img/p/p1.png
+++ b/skins/base/img/p/p1.png
--- a/skins/base/img/p/p10.png
+++ b/skins/base/img/p/p10.png
--- a/skins/base/img/p/p11.png
+++ b/skins/base/img/p/p11.png
--- a/skins/base/img/p/p12.png
+++ b/skins/base/img/p/p12.png
--- a/skins/base/img/p/p13.png
+++ b/skins/base/img/p/p13.png
--- a/skins/base/img/p/p14.png
+++ b/skins/base/img/p/p14.png
--- a/skins/base/img/p/p15.png
+++ b/skins/base/img/p/p15.png
--- a/skins/base/img/p/p16.png
+++ b/skins/base/img/p/p16.png
--- a/skins/base/img/p/p17.png
+++ b/skins/base/img/p/p17.png
--- a/skins/base/img/p/p18.png
+++ b/skins/base/img/p/p18.png
--- a/skins/base/img/p/p19.png
+++ b/skins/base/img/p/p19.png
--- a/skins/base/img/p/p2.png
+++ b/skins/base/img/p/p2.png
--- a/skins/base/img/p/p20.png
+++ b/skins/base/img/p/p20.png
--- a/skins/base/img/p/p3.png
+++ b/skins/base/img/p/p3.png
--- a/skins/base/img/p/p4.png
+++ b/skins/base/img/p/p4.png
--- a/skins/base/img/p/p5.png
+++ b/skins/base/img/p/p5.png
--- a/skins/base/img/p/p6.png
+++ b/skins/base/img/p/p6.png
--- a/skins/base/img/p/p7.png
+++ b/skins/base/img/p/p7.png
--- a/skins/base/img/p/p8.png
+++ b/skins/base/img/p/p8.png
--- a/skins/base/img/p/p9.png
+++ b/skins/base/img/p/p9.png
--- a/skins/base/img/p/piechart.pde
+++ b/skins/base/img/p/piechart.pde
@ -0,0 +1,19 @@
 // a trivial processing.org snippet to generate these
 // using java2d (ugh).  Peity and JS might have been
 // a better idea.  Or SVG.
 size(48, 48);
 g = createGraphics(48, 48, JAVA2D);
 for (int i = 0; i <= 20; i++) {
  g.beginDraw();
  g.background(0.0, 0.0);
  g.smooth();
  g.strokeCap(SQUARE);
  g.strokeWeight(3);
  g.stroke(0x80, 0xcf, 0xf4, 255.0);
  g.fill(0.0, 0.0);
  g.arc(24, 24, 43, 43, -PI/2, -PI/2 + (i*2*PI/20.0));
  g.save("p" + i + ".png");
  g.endDraw();
 }
--- a/skins/base/img/placeholder.png
+++ b/skins/base/img/placeholder.png
--- a/skins/base/img/search.png
+++ b/skins/base/img/search.png
--- a/skins/base/img/settings-big.png
+++ b/skins/base/img/settings-big.png
--- a/skins/base/img/settings.png
+++ b/skins/base/img/settings.png
--- a/skins/base/img/typing.png
+++ b/skins/base/img/typing.png
--- a/skins/base/img/upload.png
+++ b/skins/base/img/upload.png
--- a/skins/base/img/video.png
+++ b/skins/base/img/video.png
--- a/skins/base/img/voip.png
+++ b/skins/base/img/voip.png
--- a/skins/base/views/atoms/EditableText.js
+++ b/skins/base/views/atoms/EditableText.js
@ -33,6 +33,7 @@ module.exports = React.createClass({
    },
    onClickDiv: function() {
        console.log("onClickDiv triggered");
        this.setState({
            phase: this.Phases.Edit,
        })
@ -43,18 +44,26 @@ module.exports = React.createClass({
    },
    onFinish: function(ev) {
-        this.setValue(ev.target.value);
+        if (ev.target.value) {
            this.setValue(ev.target.value, ev.key === "Enter");
        } else {
            this.cancelEdit();
        }
    },
    render: function() {
        var editable_el;
        if (this.state.phase == this.Phases.Display) {
-            editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
+            if (this.state.value) {
                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.state.value}</div>;
            } else {
                editable_el = <div ref="display_div" onClick={this.onClickDiv}>{this.props.label}</div>;
            }
        } else if (this.state.phase == this.Phases.Edit) {
            editable_el = (
                <div>
-                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} autoFocus/>
+                    <input type="text" defaultValue={this.state.value} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onFinish} placeholder={this.props.placeHolder} autoFocus/>
                </div>
            );
        }
--- a/skins/base/views/atoms/create_room/Presets.js
+++ b/skins/base/views/atoms/create_room/Presets.js
@ -25,14 +25,15 @@ module.exports = React.createClass({
    mixins: [PresetsController],
    onValueChanged: function(ev) {
-        this.setState({preset: ev.target.value})
+        this.props.onChange(ev.target.value)
    },
    render: function() {
        return (
-            <select className="mx_Presets" onChange={this.onValueChanged} defaultValue={this.state.preset}>
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
-                <option value="private_chat">Private Chat</option>
+                <option value={this.Presets.PrivateChat}>Private Chat</option>
-                <option value="public_chat">Public Chat</option>
+                <option value={this.Presets.PublicChat}>Public Chat</option>
                <option value={this.Presets.Custom}>Custom</option>
            </select>
        );
    }
--- a/skins/base/views/atoms/create_room/RoomAlias.js
+++ b/skins/base/views/atoms/create_room/RoomAlias.js
@ -0,0 +1,79 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 'use strict';
 var React = require('react');
 var RoomAliasController = require("../../../../../src/controllers/atoms/create_room/RoomAlias");
 module.exports = React.createClass({
    displayName: 'RoomAlias',
    mixins: [RoomAliasController],
    onValueChanged: function(ev) {
        this.props.onChange(ev.target.value);
    },
    onFocus: function(ev) {
        var target = ev.target;
        var curr_val = ev.target.value;
        if (this.props.homeserver) {
            if (curr_val == "") {
                setTimeout(function() {
                    target.value = "#:" + this.props.homeserver;
                    target.setSelectionRange(1, 1);
                }, 0);
            } else {
                var suffix = ":" + this.props.homeserver;
                setTimeout(function() {
                    target.setSelectionRange(
                        curr_val.startsWith("#") ? 1 : 0,
                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
                    );
                }, 0);
            }
        }
    },
    onBlur: function(ev) {
        var curr_val = ev.target.value;
        if (this.props.homeserver) {
            if (curr_val == "#:" + this.props.homeserver) {
                ev.target.value = "";
                return;
            }
            if (curr_val != "") {
                var new_val = ev.target.value;
                var suffix = ":" + this.props.homeserver;
                if (!curr_val.startsWith("#")) new_val = "#" + new_val;
                if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
                ev.target.value = new_val;
            }
        }
    },
    render: function() {
        return (
            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
                onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
                value={this.props.alias}/>
        );
    }
 });
--- a/skins/base/views/atoms/create_room/RoomNameTextbox.js
+++ b/skins/base/views/atoms/create_room/RoomNameTextbox.js
@ -18,19 +18,17 @@ limitations under the License.
 var React = require('react');
-var RoomNameTextboxController = require("../../../../../src/controllers/atoms/create_room/RoomNameTextbox");
+var VideoFeedController = require("../../../../../src/controllers/atoms/voip/VideoFeed");
 module.exports = React.createClass({
-    displayName: 'RoomNameTextbox',
+    displayName: 'VideoFeed',
-    mixins: [RoomNameTextboxController],
+    mixins: [VideoFeedController],
    onValueChanged: function(ev) {
        this.setState({room_name: ev.target.value})
    },
    render: function() {
        return (
-            <input type="text" className="mx_RoomNameTextbox" placeholder="ex. MyNewRoom" onChange={this.onValueChanged}/>
+            <video>
            </video>
        );
-    }
+    },
 });
--- a/skins/base/views/molecules/BottomLeftMenu.js
+++ b/skins/base/views/molecules/BottomLeftMenu.js
@ -0,0 +1,67 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 'use strict';
 var React = require('react');
 var classNames = require('classnames');
 var dis = require("../../../../src/dispatcher");
 var MatrixClientPeg = require("../../../../src/MatrixClientPeg");
 module.exports = React.createClass({
    displayName: 'BottomLeftMenu',
    onSettingsClick: function() {
        dis.dispatch({action: 'view_user_settings'});
    },
    onRoomDirectoryClick: function() {
        dis.dispatch({action: 'view_room_directory'});
    },
    onCreateRoomClick: function() {
        dis.dispatch({action: 'view_create_room'});
    },
    render: function() {
        return (
            <div className="mx_BottomLeftMenu">
                <div className="mx_BottomLeftMenu_options">
                    <div className="mx_RoomTile" onClick={this.onCreateRoomClick}>
                        <div className="mx_RoomTile_avatar">
                            <img src="img/create-big.png" width="42" height="42"/>
                        </div>
                        <div className="mx_RoomTile_name">Create new room</div>
                    </div>
                    <div className="mx_RoomTile" onClick={this.onRoomDirectoryClick}>
                        <div className="mx_RoomTile_avatar">
                            <img src="img/directory-big.png" width="42" height="42"/>
                        </div>
                        <div className="mx_RoomTile_name">Directory</div>
                    </div>
                    <div className="mx_RoomTile" onClick={this.onSettingsClick}>
                        <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>
        );
    }
 });
--- a/skins/base/views/molecules/ChangeAvatar.js
+++ b/skins/base/views/molecules/ChangeAvatar.js
@ -0,0 +1,65 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 'use strict';
 var React = require('react');
 var ChangeAvatarController = require("../../../../src/controllers/molecules/ChangeAvatar");
 var Loader = require("react-loader");
 module.exports = React.createClass({
    displayName: 'ChangeAvatar',
    mixins: [ChangeAvatarController],
    onFileSelected: function(ev) {
        this.setAvatarFromFile(ev.target.files[0]);
    },
    onError: function(error) {
        this.setState({
            errorText: "Failed to upload profile picture!"
        });
    },
    render: function() {
        switch (this.state.phase) {
            case this.Phases.Display:
            case this.Phases.Error:
                return (
                    <div>
                        <div className="mx_Dialog_content">
                            <img src={this.state.avatarUrl}/>
                        </div>
                        <div className="mx_Dialog_content">
                            Upload new:
                            <input type="file" onChange={this.onFileSelected}/>
                            {this.state.errorText}
                        </div>    
                        <div className="mx_Dialog_buttons">
                            <button onClick={this.props.onFinished}>Cancel</button>
                        </div>
                    </div>
                );
            case this.Phases.Uploading:
                return (
                    <Loader />
                );
        }
    }
 });
--- a/skins/base/views/molecules/ChangePassword.js
+++ b/skins/base/views/molecules/ChangePassword.js
@ -0,0 +1,85 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 'use strict';
 var React = require('react');
 var ChangePasswordController = require("../../../../src/controllers/molecules/ChangePassword");
 var Loader = require("react-loader");
 module.exports = React.createClass({
    displayName: 'ChangePassword',
    mixins: [ChangePasswordController],
    onClickChange: function() {
        var old_password = this.refs.old_input.getDOMNode().value;
        var new_password = this.refs.new_input.getDOMNode().value;
        var confirm_password = this.refs.confirm_input.getDOMNode().value;
        if (new_password != confirm_password) {
            this.setState({
                state: this.Phases.Error,
                errorString: "Passwords don't match"
            });
        } else if (new_password == '' || old_password == '') {
            this.setState({
                state: this.Phases.Error,
                errorString: "Passwords can't be empty"
            });
        } else {
            this.changePassword(old_password, new_password);
        }
    },
    render: function() {
        switch (this.state.phase) {
            case this.Phases.Edit:
            case this.Phases.Error:
                return (
                    <div>
                        <div className="mx_Dialog_content">
                            <div>{this.state.errorString}</div>
                            <div><label>Old password <input type="password" ref="old_input"/></label></div>
                            <div><label>New password <input type="password" ref="new_input"/></label></div>
                            <div><label>Confirm password <input type="password" ref="confirm_input"/></label></div>
                        </div>
                        <div className="mx_Dialog_buttons">
                            <button onClick={this.onClickChange}>Change Password</button>
                            <button onClick={this.props.onFinished}>Cancel</button>
                        </div>
                    </div>
                );
            case this.Phases.Uploading:
                return (
                    <div className="mx_Dialog_content">
                        <Loader />
                    </div>
                );
            case this.Phases.Success:
                return (
                    <div>
                        <div className="mx_Dialog_content">
                            Success!
                        </div>
                        <div className="mx_Dialog_buttons">
                            <button onClick={this.props.onFinished}>Ok</button>
                        </div>
                    </div>
                )
        }
    }
 });
--- a/skins/base/views/molecules/DateSeparator.js
+++ b/skins/base/views/molecules/DateSeparator.js
@ -0,0 +1,56 @@
 /*
 Copyright 2015 OpenMarket Ltd
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
    http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
 'use strict';
 var React = require('react');
 var days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
 ];
 module.exports = React.createClass({
    displayName: 'DateSeparator',
    render: function() {
        var date = new Date(this.props.ts);
        var today = new Date();
        var yesterday = new Date();
        yesterday.setDate(today.getDate() - 1);
        var label;
        if (date.toDateString() === today.toDateString()) {
            label = "Today";
        }
        else if (date.toDateString() === yesterday.toDateString()) {
            label = "Yesterday";
        }
        else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
            label = days[date.getDay()];
        }
        else {
            label = date.toDateString();
        }
        return (
            <h2>{ label }</h2>
        );
    }
 });
--- a/Show More
+++ b/Show More