Merge branch 'vector'

2015-07-21 22:37:14 -07:00 · 2015-07-21 22:37:14 -07:00 · 92e346a842
commit 92e346a842
parent 6ceaee7fc0 904754b20d
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 {
-    width: 100%;
+.mx_MessageComposer_wrapper {
+    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 {
-    text-decoration: underline;
+.mx_RoomTile_avatar {
+    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 {
-}
-
-.mx_RoomTile div {
+    display: table-cell;
+    vertical-align: middle;
    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 {
-    background-color: lime;
-}
-
-.mx_RoomTile.invited {
+.mx_RoomTile_selected {
+    background-color: #f3f8fa;
+    color: #80cef4;
    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;
+    display: flex;
    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%;
-    /* background-color: #ff0; */
+
+    -webkit-flex: 0 0 88px;
+    flex: 0 0 88px;
 }

-.mx_RoomView_messageListWrapper {
-    height: 100%;
-    overflow-y: scroll;    
-}
-
-.mx_RoomView_MessageList {
-    display: table;
-}
-
-.mx_RoomView_invitePrompt {
-}
-
-.mx_RoomView .mx_MemberList {
+.mx_RoomView_auxPanel {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;

-    /* background-color: #0f0; */
-    width: 250px;
-    overflow-y: scroll;
-    height: 100%;
+    max-width: 720px;
+    width: 100%;
+    margin: auto;
+
+    overflow: scroll;
+    -webkit-flex: 0 0 auto;
+    flex: 0 0 auto;
 }

-.mx_RoomView .mx_MemberList ul {
-    margin: 0px;
-    padding: 0px;
+.mx_RoomView_messagePanel {
+    -webkit-box-ordinal-group: 3;
+    -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 {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.mx_MatrixChat_chatWrapper {
+.mx_MatrixChat_wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
-    display: flex;
-    position: absolute;
-    width: 100%;
-    top: 0px;
-    bottom: 42px;
-}
+    display: flex;    

-.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: 250px;
+    width: 100%;
    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: 40px;
+    height: 21px;
 }

-.mx_MatrixChat_leftPanel .mx_RoomList {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
-    order: 2;
+.mx_MatrixChat_toolbarShowing {
+    height: auto;
+}

-    /* background-color: #0ff; */
+.mx_MatrixChat {
    width: 100%;
    height: 100%;
-    overflow-y: scroll;
-}

-.mx_MatrixChat .mx_RoomView {
+    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: #00f; */
-    width: 100%;
-    height: 100%;       
+    -webkit-flex: 1;
+    flex: 1;
+}
+
+.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;
+
+    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;
-    height: 350px;
-    position: relative;
+    width: 100%;
+    height: 100%;
+    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}>
-                <option value="private_chat">Private Chat</option>
-                <option value="public_chat">Public Chat</option>
+            <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
+                <option value={this.Presets.PrivateChat}>Private 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',
-    mixins: [RoomNameTextboxController],
-
-    onValueChanged: function(ev) {
-        this.setState({room_name: ev.target.value})
-    },
+    displayName: 'VideoFeed',
+    mixins: [VideoFeedController],

    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