Merge remote-tracking branch 'origin/develop' into unread_sync

2016-01-21 10:39:35 +00:00 · 2016-01-21 10:39:35 +00:00 · 4d4c6e06ec
parent d979511696 2d917910da
commit 4d4c6e06ec
92 changed files with 2233 additions and 405 deletions
--- a/src/VectorConferenceHandler.js
+++ b/src/VectorConferenceHandler.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/component-index.js
+++ b/src/component-index.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -33,9 +33,9 @@ module.exports.components['structures.ViewSource'] = require('./components/struc
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.MatrixToolbar'] = require('./components/views/globals/MatrixToolbar');
-module.exports.components['views.login.CustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog');
-module.exports.components['views.login.LoginFooter'] = require('./components/views/login/VectorLoginFooter');
-module.exports.components['views.login.LoginHeader'] = require('./components/views/login/VectorLoginHeader');
+module.exports.components['views.login.VectorCustomServerDialog'] = require('./components/views/login/VectorCustomServerDialog');
+module.exports.components['views.login.VectorLoginFooter'] = require('./components/views/login/VectorLoginFooter');
+module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
 module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
 module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
 module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile');
@ -45,3 +45,4 @@ module.exports.components['views.rooms.RoomDNDView'] = require('./components/vie
 module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
 module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');
 module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');
+module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications');
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -50,9 +50,9 @@ module.exports = React.createClass({
        return (
            <div className="mx_BottomLeftMenu">
                <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.png" label="Create new room" onClick={ this.onCreateRoomClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.png" label="Directory" onClick={ this.onRoomDirectoryClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.png" label="Settings" onClick={ this.onSettingsClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
+                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
                </div>
            </div>
        );
--- a/src/components/structures/CompatibilityPage.js
+++ b/src/components/structures/CompatibilityPage.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/structures/LeftPanel.js
+++ b/src/components/structures/LeftPanel.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -100,6 +100,7 @@ module.exports = React.createClass({

    render: function() {
        var MemberList = sdk.getComponent('rooms.MemberList');
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
        var buttonGroup;
        var panel;

@ -126,13 +127,13 @@ module.exports = React.createClass({
        if (this.props.roomId) {
            buttonGroup =
                    <div className="mx_RightPanel_headerButtonGroup">
-                        <div className="mx_RightPanel_headerButton" onClick={ this.onMemberListButtonClick }>
-                            <img src="img/members.svg" width="17" height="22" title="Members" alt="Members"/>
+                        <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
+                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                            { membersBadge }
                            { membersHighlight }
                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
-                            <img src="img/files.svg" width="17" height="22" title="Files" alt="Files"/>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
+                            <TintableSvg src="img/files.svg" width="17" height="22"/>
                            { filesHighlight }
                        </div>
                    </div>;
--- a/src/components/structures/RoomDirectory.js
+++ b/src/components/structures/RoomDirectory.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -56,17 +56,28 @@ module.exports = React.createClass({
        });
    },

-    joinRoom: function(roomId) {        
+    joinRoom: function(roomId, shouldPeek) {
        var self = this;
        self.setState({ loading: true });
-        // XXX: check that JS SDK suppresses duplicate attempts to join the same room
-        MatrixClientPeg.get().joinRoom(roomId).done(function() {
+
+        var joinOrPeekPromise;
+
+        if (shouldPeek) {
+            joinOrPeekPromise = MatrixClientPeg.get().peekInRoom(roomId);
+        }
+        else {
+            joinOrPeekPromise = MatrixClientPeg.get().joinRoom(roomId);
+        }
+
+        joinOrPeekPromise.done(function() {
            dis.dispatch({
                action: 'view_room',
+                auto_peek: false, // don't peek as we've already peeked here (if it was needed)
                room_id: roomId
            });
        }, function(err) {
            console.error("Failed to join room: %s", JSON.stringify(err));
+            console.error(err);
            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
            Modal.createDialog(ErrorDialog, {
                title: "Failed to join room",
@ -87,18 +98,46 @@ module.exports = React.createClass({
        });
        var rows = [];
        var self = this;
+        var guestRead, guestJoin, perms;
        for (var i = 0; i < rooms.length; i++) {
            var name = rooms[i].name || rooms[i].aliases[0];
+            guestRead = null;
+            guestJoin = null;
+            var shouldPeek = false;
+
+            if (rooms[i].world_readable) {
+                guestRead = (
+                    <span>[world readable]</span>
+                );
+                    // <img src="img/members.svg"
+                    //     alt="World Readable" title="World Readable" width="12" height="12" />
+                if (rooms[i].world_readable) {
+                    shouldPeek = true;
+                }
+            }
+            if (rooms[i].guest_can_join) {
+                guestJoin = (
+                    <span>[guests allowed]</span>
+                );
+                    // <img src="img/leave.svg"
+                    //     alt="Guests can join" title="Guests can join" width="12" height="12" />
+            }
+            
+            perms = null;
+            if (guestRead || guestJoin) {
+                perms = <div>{guestRead} {guestJoin}</div>;
+            }
+
            // <img src={ MatrixClientPeg.get().getAvatarUrlForRoom(rooms[i].room_id, 40, 40, "crop") } width="40" height="40" alt=""/>
            rows.unshift(
                <tbody key={ rooms[i].room_id }>
-                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id)}>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
                        <td className="mx_RoomDirectory_name">{ name }</td>
                        <td>{ rooms[i].aliases[0] }</td>
                        <td>{ rooms[i].num_joined_members }</td>
                    </tr>
-                    <tr>
-                        <td className="mx_RoomDirectory_topic" colSpan="3">{ rooms[i].topic }</td>
+                    <tr onClick={self.joinRoom.bind(null, rooms[i].room_id, shouldPeek)}>
+                        <td className="mx_RoomDirectory_topic" colSpan="3">{perms} { rooms[i].topic }</td>
                    </tr>
                </tbody>
            );
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -255,17 +255,17 @@ var RoomSubList = React.createClass({
                    unread={ Unread.doesRoomHaveUnreadMessages(room) }
                    highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
                    isInvite={ self.props.label === 'Invites' }
-                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null }
-                     />
+                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } />
            );
        });
    },

    _getHeaderJsx: function() {
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");        
        return (
            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
                { this.props.collapsed ? '' : this.props.label }
-                <img className="mx_RoomSubList_chevron"
+                <TintableSvg className="mx_RoomSubList_chevron"
                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
                    width="10" height="10" />
            </h2>
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -118,6 +118,7 @@ module.exports = React.createClass({
                    <img src={this.props.src} style={style}/>
                    <div className="mx_ImageView_labelWrapper">
                        <div className="mx_ImageView_label">
+                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
                            <div className="mx_ImageView_shim">
                            </div>
                            <div className="mx_ImageView_name">
--- a/src/components/views/elements/Spinner.js
+++ b/src/components/views/elements/Spinner.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/login/VectorCustomServerDialog.js
+++ b/src/components/views/login/VectorCustomServerDialog.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -25,7 +25,7 @@ module.exports = React.createClass({
    render: function() {
        return (
            <div className="mx_ErrorDialog">
-                <div className="mx_ErrorDialogTitle">
+                <div className="mx_Dialog_title">
                    Custom Server Options
                </div>
                <div className="mx_Dialog_content">
--- a/src/components/views/login/VectorLoginFooter.js
+++ b/src/components/views/login/VectorLoginFooter.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/login/VectorLoginHeader.js
+++ b/src/components/views/login/VectorLoginHeader.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/messages/DateSeparator.js
+++ b/src/components/views/messages/DateSeparator.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/messages/SenderProfile.js
+++ b/src/components/views/messages/SenderProfile.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/rooms/BottomLeftMenuTile.js
+++ b/src/components/views/rooms/BottomLeftMenuTile.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -48,7 +48,7 @@ module.exports = React.createClass({
        return (
            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
                <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="24" height="24"/>
+                    <img src={ this.props.img } width="26" height="26"/>
                </div>
                { label }
            </div>
--- a/src/components/views/rooms/MessageContextMenu.js
+++ b/src/components/views/rooms/MessageContextMenu.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/rooms/RoomDNDView.js
+++ b/src/components/views/rooms/RoomDNDView.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/rooms/RoomDropTarget.js
+++ b/src/components/views/rooms/RoomDropTarget.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
--- a/src/header
+++ b/src/header
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/atoms/RoomAvatar.css
+++ b/src/skins/vector/css/atoms/RoomAvatar.css
@ -1,28 +0,0 @@
-/*
-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_RoomAvatar {
-    vertical-align: middle;
-}
-
-.mx_RoomAvatar_initial {
-    position: absolute;
-    color: #fff;
-    text-align: center;
-    font-weight: normal ! important;
-    speak: none;
-    pointer-events: none;
-}
--- a/src/skins/vector/css/common.css
+++ b/src/skins/vector/css/common.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -52,7 +52,7 @@ a:visited {
    color: #76cfa6;
 }

-input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
+input[type=text]:focus, textarea:focus {
    border: 1px solid #76CFA6;
    outline: none;
    box-shadow: none;
@ -187,8 +187,7 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
    padding-right: 1em;
 }

-.mx_ErrorDialogTitle,
-.mx_QuestionDialogTitle {
+.mx_Dialog_title {
    min-height: 16px;
    padding: 12px;
    border-bottom: 1px solid #a4a4a4;
@ -196,3 +195,14 @@ input[type=text]:focus, textarea:focus, .mx_RoomSettings textarea:focus {
    font-size: 18px;
    line-height: 1.4;
 }
+
+.mx_TextInputDialog_label {
+    text-align: left;
+    padding-bottom: 12px;
+}
+
+.mx_TextInputDialog_input {
+    color: #747474;
+    font-weight: 300;
+    font-size: 15px;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -44,7 +44,7 @@ limitations under the License.
    min-width: 0px;
    max-width: 960px;
    width: 100%;
-    font-size: 20px;
+    font-size: 18px;
    text-align: center;

    pointer-events: none;
@ -113,6 +113,20 @@ limitations under the License.
 .mx_RoomView_messageListWrapper {
    max-width: 960px;
    margin: auto;
+    
+    min-height: 100%;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+
+    justify-content: flex-end;
+    -webkit-justify-content: flex-end;
 }

 .mx_RoomView_MessageList {
@ -150,6 +164,21 @@ limitations under the License.
    margin-bottom: 12px;
 }

+li.mx_RoomView_myReadMarker_container {
+    height: 0px;
+    margin: 0px;
+    padding: 0px;
+    border: 0px;
+}
+
+hr.mx_RoomView_myReadMarker {
+    border-top: solid 1px #76cfa6;
+    border-bottom: solid 1px #76cfa6;
+    margin-top: 0px;
+    position: relative;
+    top: 5px;
+}
+
 .mx_RoomView_statusArea {
    -webkit-box-ordinal-group: 4;
    -moz-box-ordinal-group: 4;
@ -189,7 +218,7 @@ limitations under the License.

 .mx_RoomView_voipChevron {
    position: absolute;
-    bottom: -10px;
+    bottom: -11px;
    right: 11px;
 }

@ -199,6 +228,10 @@ limitations under the License.
    cursor: pointer;
 }

+.mx_RoomView_voipButton object {
+    pointer-events: none;
+}
+
 .mx_RoomView_unreadMessagesBar {
    color: #ff0064;
    cursor: pointer;
@ -296,7 +329,7 @@ limitations under the License.
    color: #76CFA6;
 }

-.mx_RoomView_tabCompleteEol img {
+.mx_RoomView_tabCompleteEol object {
    vertical-align: middle;
    margin-right: 8px;
    margin-top: -2px;
--- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
--- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
@ -0,0 +1,173 @@
+/*
+Copyright 2015, 2016 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: 960px;
+    margin-left: auto;
+    margin-right: auto;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: column;
+    -webkit-flex-direction: column;    
+}
+
+.mx_UserSettings .mx_RoomHeader {
+    -webkit-box-ordinal-group: 1;
+    -moz-box-ordinal-group: 1;
+    -ms-flex-order: 1;
+    -webkit-order: 1;
+    order: 1;
+
+    -webkit-flex: 0 0 83px;
+    flex: 0 0 83px;
+}
+
+.mx_UserSettings_body {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    overflow-y: auto;    
+}
+
+.mx_UserSettings_spinner {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 12px;
+    width: 32px;
+    height: 32px;
+}
+
+.mx_UserSettings_button {
+    display: inline;
+    vertical-align: middle;
+    border: 0px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: #fff;
+    background-color: #76cfa6;
+    width: auto;
+    margin: auto;
+    padding: 7px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    cursor: pointer;
+}
+
+.mx_UserSettings h2 {
+    clear: both;
+    margin-top: 32px;
+    margin-bottom: 8px;
+    margin-left: 63px;
+    padding-bottom: 6px;
+    border-bottom: 1px solid #eee;
+}
+
+.mx_UserSettings h3 {
+    font-weight: bold;
+    font-size: 15px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+.mx_UserSettings_section {
+    margin-left: 63px;
+    margin-top: 28px;
+    margin-bottom: 28px;
+}
+
+.mx_UserSettings_accountTable
+.mx_UserSettings_notifTable
+{
+    display: table;
+}
+
+.mx_UserSettings_profileTable
+{
+    display: table;
+    float: left;
+}
+
+.mx_UserSettings_profileTableRow
+{
+    display: table-row;
+}
+
+.mx_UserSettings_profileLabelCell
+{
+    padding-bottom: 21px;
+    display: table-cell;
+    font-weight: bold;
+    padding-right: 24px;
+}
+
+.mx_UserSettings_profileInputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    width: 240px;
+}
+
+.mx_UserSettings_profileInputCell input,
+.mx_UserSettings_profileInputCell .mx_EditableText
+{
+    display: inline-block;
+    border: 0px;
+    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    padding: 0px;
+    width: 240px;
+    color: rgba(74, 74, 74, 0.9);
+    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-size: 16px;
+}
+
+.mx_UserSettings_changePasswordButton {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+    margin-top: -54px;
+}
+
+.mx_UserSettings_logout {
+    float: right;
+    margin-right: 32px;
+    margin-left: 32px;
+}
+
+.mx_UserSettings_avatarPicker {
+    margin-left: 32px;
+    margin-right: 32px;
+    float: right;
+    cursor: pointer;
+}
+
+.mx_UserSettings_avatarPicker_edit {
+    text-align: center;
+    margin-top: 10px;
+}
+
+.mx_UserSettings_avatarPicker_edit > input {
+    display: none;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -105,6 +105,15 @@ limitations under the License.
   color: #4a4a4a;
 }

+.mx_Login_forgot {
+    font-size: 13px;
+    opacity: 0.8;
+}
+
+.mx_Login_forgot:link {
+    color: #4a4a4a;
+}
+
 .mx_Login_loader {
    position: absolute;
    left: 50%;
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,20 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MemberAvatar {
+.mx_BaseAvatar {
    position: relative;
 }

-.mx_MemberAvatar_initial {
+.mx_BaseAvatar_initial {
    position: absolute;
    z-index: 1;
    color: #fff;
    text-align: center;
    speak: none;
    pointer-events: none;
+    font-weight: normal;
 }

-.mx_MemberAvatar_image {
-    border-radius: 20px;
+.mx_BaseAvatar_image {
+    border-radius: 40px;
    vertical-align: top;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MImageTile_thumbnail {
+.mx_MImageBody_thumbnail {
 /*
    background-color: #fff;
    border: 2px solid #fff;
@ -22,16 +22,20 @@ limitations under the License.
 */
 }

-.mx_MImageTile_download {
+.mx_MImageBody_download {
    color: #76cfa6;
    cursor: pointer;
+    margin-left: -16px;
 }

-.mx_MImageTile_download a {
+.mx_MImageBody_download a {
    color: #76cfa6;
    text-decoration: none;
 }

-.mx_MImageTile_download img {
-    padding-right: 8px;
-}
+.mx_MImageBody_download object {
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MNoticeTile {
+.mx_MNoticeBody {
    white-space: pre-wrap;
    opacity: 0.6;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,6 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MTextTile {
+.mx_MTextBody {
    white-space: pre-wrap;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_EventAsTextTile {
+.mx_TextualEvent {
    opacity: 0.5;
    overflow-y: hidden;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,14 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_MemberTile {
+.mx_EntityTile {
    display: table-row;
    position: relative;
    color: #454545;
    cursor: pointer;
 }

-.mx_MemberTile_avatar {
+.mx_EntityTile_invite {
+    display: table-cell;
+    vertical-align: middle;
+    margin-left: 10px;
+    width: 26px;
+}
+
+.mx_EntityTile_avatar {
    display: table-cell;
    padding-left: 3px;
    padding-right: 12px;
@ -33,71 +40,59 @@ limitations under the License.
    position: relative;
 }

-.mx_MemberTile_power {
+.mx_EntityTile_power {
    position: absolute;
-    width: 44px;
-    height: 44px;
-    left: 10px;
-    top: -1px;
+    width: 16px;
+    height: 17px;
+    top: 0px;
+    right: 6px;
 }
-
-.mx_MemberTile_name {
+  
+.mx_EntityTile_name {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
 }

-.mx_MemberTile_details {
+.mx_EntityTile_details {
    display: table-cell;
    padding-right: 14px;
    vertical-align: middle;
 }

-.mx_MemberTile_userId {
+.mx_EntityTile_name_hover {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
 }

-.mx_MemberTile_presence {
-    font-size: 11px;
-    opacity: 0.5;
-}
-
-.mx_MemberTile_chevron {
+.mx_EntityTile_chevron {
    margin-top: 8px;
    margin-right: -4px;
    margin-left: 6px;
    float: right;
 }

-/*
-.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_userId
+.mx_EntityTile_unavailable .mx_EntityTile_avatar,
+.mx_EntityTile_unavailable .mx_EntityTile_name,
+.mx_EntityTile_unavailable .mx_EntityTile_name_hover
 {
    opacity: 0.66;
 }

-.mx_MemberTile_offline .mx_MemberTile_avatar,
-.mx_MemberTile_offline .mx_MemberTile_name,
-.mx_MemberTile_offline .mx_MemberTile_userId
+.mx_EntityTile_offline .mx_EntityTile_avatar,
+.mx_EntityTile_offline .mx_EntityTile_name,
+.mx_EntityTile_offline .mx_EntityTile_name_hover
 {
    opacity: 0.25;
 }

-.mx_MemberTile:hover .mx_MessageTimestamp {
-    display: block;
+.mx_EntityTile_unknown .mx_EntityTile_avatar,
+.mx_EntityTile_unknown .mx_EntityTile_name,
+.mx_EntityTile_unknown .mx_EntityTile_name_hover
+{
+    opacity: 0.25;
 }
+
+
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -31,11 +31,6 @@ limitations under the License.
    top: 0px;
 }

-.mx_EventTile_avatar img {
-    border-radius: 20px;
-    border: 0px;
-}
-
 .mx_EventTile_continuation {
    margin-top: 8px ! important;
 }
@ -59,11 +54,6 @@ limitations under the License.
 }

 .mx_EventTile_content {
-    padding-right: 100px;
-    display: block;
-}
-
-.mx_MessageTile_content {
    display: block;
    margin-right: 100px;
    overflow-y: hidden;
@ -71,7 +61,7 @@ limitations under the License.

 /* Various markdown overrides */

-.mx_MessageTile_content .markdown-body {
+.mx_EventTile_content .markdown-body {
    font-family: inherit ! important;
    white-space: normal ! important;
    line-height: inherit ! important;
@ -79,34 +69,34 @@ limitations under the License.
    font-size: 15px;
 }

-.mx_MessageTile_content .markdown-body h1,
-.mx_MessageTile_content .markdown-body h2,
-.mx_MessageTile_content .markdown-body h3,
-.mx_MessageTile_content .markdown-body h4,
-.mx_MessageTile_content .markdown-body h5,
-.mx_MessageTile_content .markdown-body h6
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
 {
    font-family: inherit ! important;
 }

-.mx_MessageTile_content .markdown-body a {
+.mx_EventTile_content .markdown-body a {
    color: #76cfa6;
 }

-.mx_MessageTile_content .markdown-body .hljs {
-    display: inherit ! important;
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
 }

 /* end of overrides */

-.mx_MessageTile_searchHighlight {
+.mx_EventTile_searchHighlight {
    background-color: #76cfa6;
    color: #fff;
    border-radius: 5px;
    padding: 4px;
 }

-.mx_MessageTile_searchHighlight a {
+.mx_EventTile_searchHighlight a {
    background-color: #76cfa6;
    color: #fff;    
 }
@ -135,11 +125,11 @@ limitations under the License.
    z-index: 1;
    position: relative;
    width: 90px;
+    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
    margin-right: 10px;
-    margin-top: -6px;
 }

-.mx_MessageTimestamp {
+.mx_EventTile .mx_MessageTimestamp {
    display: block;
    visibility: hidden;
    text-align: right;
@ -178,7 +168,7 @@ limitations under the License.
    height: 14px;
 }

-.mx_EventTile_readAvatars .mx_MemberAvatar {
+.mx_EventTile_readAvatars .mx_BaseAvatar {
    position: absolute;
    display: inline-block;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -32,8 +32,17 @@ limitations under the License.
    clear: both;
 }

-.mx_MemberInfo_avatar img {
-    border-radius: 48px;
+.mx_MemberInfo_profile {
+    margin-bottom: 16px;
+}
+
+.mx_MemberInfo h3 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 16px;
+    margin-bottom: 14px;
 }

 .mx_MemberInfo_profileField {
@ -44,21 +53,13 @@ limitations under the License.
 }

 .mx_MemberInfo_buttons {
-    margin-top: 18px;
+    margin-bottom: 16px;
 }

 .mx_MemberInfo_field {
    cursor: pointer;
-    width: 100px;
-    text-align: center;
-    font-size: 11px;    
-    background-color: #888;
-    color: #fff;
-    font-weight: bold;
-    border-radius: 20px;
-    padding-left: 6px;
-    padding-right: 6px;
-    padding-top: 4px;
-    padding-bottom: 2px;
-    margin-bottom: 4px;
+    font-size: 13px;
+    color: #76cfa6;
+    margin-left: 8px;
+    line-height: 23px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -44,25 +44,43 @@ limitations under the License.
    flex: 1 1 0px;
 }

-.mx_MemberList_invite {
-    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
-    border-radius: 3px;
-    border: 1px solid #f0f0f0;
-    padding: 9px;
-    color: #454545;
-    margin-left: 3px;
-    font-size: 15px;
-    margin-bottom: 8px;
-    width: 180px;
+.mx_MemberList .mx_SearchableEntityList {
+    order: 1;
+    flex: 0;
+    -webkit-flex: 0;
 }

-.mx_MemberList_invite::-moz-placeholder {
-    color: #454545;
-    opacity: 0.5;
+.mx_MemberList .mx_SearchableEntityList_expanded {
+    flex: 1 1 100%;
+    -webkit-flex: 1 1 100%;
 }
-.mx_MessageList_invite::-webkit-input-placeholder {
-    color: #454545;
-    opacity: 0.5;
+
+.mx_MemberList_joined {
+    order: 2;
+    flex: 1 1 50%;
+    -webkit-flex: 1 1 50%;
+
+    overflow-y: auto;
+}
+
+/*
+.mx_MemberList_invited {
+    order: 3;
+    flex: 0 0 100px;
+    -webkit-flex: 0 0 100px;
+    overflow-y: auto;
+}
+*/
+
+.mx_MemberList_bottom {
+    order: 4;
+    flex: 0 0 72px;
+    -webkit-flex: 0 0 72px;
+}
+
+.mx_MemberList_bottomRule {
+    border-top: 2px solid #e1dddd;
+    margin-right: 15px;
 }

 .mx_MemberList_invited h2 {
@ -76,8 +94,13 @@ limitations under the License.
    margin-bottom: 4px;    
 }

+/* we have to have display: table in order for the horizontal wrapping to work */
 .mx_MemberList_wrapper {
-    display: table;
+    display: table; 
    table-layout: fixed;
    width: 100%;
 }
+
+.mx_MemberList_outerWrapper {
+    height: 0px;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -33,7 +33,7 @@ limitations under the License.
    vertical-align: middle;
 }

-.mx_MessageComposer .mx_MessageComposer_avatar .mx_MemberAvatar {
+.mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
    display: block;
 }

@ -82,6 +82,13 @@ limitations under the License.
    cursor: pointer;
 }

+.mx_MessageComposer_upload object,
+.mx_MessageComposer_hangup object,
+.mx_MessageComposer_voicecall object,
+.mx_MessageComposer_videocall object {
+    pointer-events: none;
+}
+
 .mx_MessageComposer_videocall {
    padding-right: 10px;
    padding-top: 4px;
@ -92,6 +99,6 @@ limitations under the License.
    padding-top: 4px;
 }

-.mx_MessageComposer_upload img {
+.mx_MessageComposer_upload object {
    margin-top: 5px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
@ -0,0 +1,20 @@
+/*
+Copyright 2016 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_PresenceLabel {
+    font-size: 11px;
+    opacity: 0.5;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

-.mx_RoomHeader {
+/* add 20px to the height of the header when editing */
+.mx_RoomHeader_editing {
+    -webit-flex: 0 0 93px ! important;
+    flex: 0 0 93px ! important;
 }

 .mx_RoomHeader_wrapper {
@ -33,6 +36,10 @@ limitations under the License.
    display: flex;
 }

+.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
+    border-bottom: 1px solid transparent;
+}
+
 .mx_RoomHeader_leftRow {
    margin-left: -2px;

@ -47,12 +54,13 @@ limitations under the License.
 }

 .mx_RoomHeader_textButton {
-    height: 48px;
+    height: 36px;
    background-color: #76cfa6;
-    border-radius: 48px;
+    border-radius: 36px;
    margin-right: 8px;
    color: #fff;
-    line-height: 48px;
+    line-height: 34px;
+    margin-top: -2px;
    text-align: center;

    -webkit-box-ordinal-group: 2;
@ -69,7 +77,20 @@ limitations under the License.
 */
    padding-left: 12px;
    padding-right: 12px;
-    }
+}
+
+.mx_RoomHeader_cancelButton {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    cursor: pointer;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}

 .mx_RoomHeader_rightRow {
    margin-top: 4px;
@ -84,7 +105,7 @@ limitations under the License.

 .mx_RoomHeader_info {
    display: table-cell;
-    /* height: 48px; */
+    width: 100%;
    vertical-align: middle;
 }

@ -94,13 +115,22 @@ limitations under the License.
    font-size: 22px;
    font-weight: bold;
    overflow: hidden;
+    margin-left: 63px;
    text-overflow: ellipsis;
+    width: 100%;
+}
+
+.mx_RoomHeader_simpleHeaderCancel {
+    float: right;
+    margin-top: 8px;
+    padding: 24px;
+    cursor: pointer;
 }

 .mx_RoomHeader_name {
-    cursor: pointer;
    vertical-align: middle;
-    height: 28px;
+    width: 100%;
+    height: 31px;
    overflow: hidden;
    color: #454545;
    font-weight: bold;
@ -109,12 +139,17 @@ limitations under the License.
    padding-right: 16px;
    /* why isn't text-overflow working? */
    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;
 }

 .mx_RoomHeader_nametext {
    display: inline-block;
 }

+.mx_RoomHeader_settingsHint {
+    color: #a2a2a2 ! important;
+}
+
 .mx_RoomHeader_searchStatus {
    display: inline-block;
    font-weight: normal;
@ -129,11 +164,22 @@ limitations under the License.
    left: 4px;
 }

-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
+.mx_RoomHeader_settingsButton object {
+    pointer-events: none;
+}
+
+.mx_RoomHeader_name,
+.mx_RoomHeader_avatar,
+.mx_RoomHeader_avatarPicker,
+.mx_RoomHeader_avatarPicker_edit {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
    color: #76cfa6;
 }

-.mx_RoomHeader_leftRow:hover .mx_RoomHeader_settingsButton {
+.mx_RoomHeader_name:hover .mx_RoomHeader_settingsButton {
    visibility: visible;
 }

@ -146,24 +192,20 @@ limitations under the License.
    visibility: visible;
 }

-
-.mx_RoomHeader_nameEditing {
-    padding-left: 8px;
-    padding-right: 16px;
-    margin-top: -5px;
+.mx_RoomHeader_placeholder {
+    color: #a2a2a2 ! important;
 }

-.mx_RoomHeader_name input, .mx_RoomHeader_nameInput {
-    border-radius: 3px;
-    width: 260px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
+.mx_RoomHeader_editable {
+    border-bottom: 1px solid #c7c7c7 ! important;
+    min-width: 150px;
+    cursor: text;
 }

-.mx_RoomHeader_nameInput {
-    margin-top: 6px;
+.mx_RoomHeader_editable:focus {
+    border-bottom: 1px solid #76CFA6 ! important;
+    outline: none;
+    box-shadow: none;
 }

 .mx_RoomHeader_topic {
@ -172,10 +214,11 @@ limitations under the License.
    max-height: 42px;
    color: #454545;
    font-weight: 300;  
-    padding-left: 19px;
-    padding-right: 16px;
+    margin-left: 19px;
+    margin-right: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
+    border-bottom: 1px solid transparent;    
 }

 .mx_RoomHeader_avatar {
@ -185,8 +228,18 @@ limitations under the License.
    vertical-align: middle;
 }

-.mx_RoomHeader_avatar img {
-	border-radius: 24px;
+.mx_RoomHeader_avatarPicker_edit {
+    position: absolute;
+    margin-left: 16px;
+    margin-top: 4px;
+}
+
+.mx_RoomHeader_avatarPicker_edit > label {
+    cursor: pointer;
+}
+
+.mx_RoomHeader_avatarPicker_edit > input {
+    display: none;
 }

 .mx_RoomHeader_button {
@ -194,10 +247,11 @@ limitations under the License.
    vertical-align: top;
    padding-left: 8px;
    padding-right: 8px;
+    cursor: pointer;
 }

-.mx_RoomHeader_button img {
-    cursor: pointer;
+.mx_RoomHeader_button object {
+    pointer-events: none;
 }

 .mx_RoomHeader_voipButton {
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
@ -0,0 +1,56 @@
+/*
+Copyright 2015, 2016 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_RoomPreviewBar {
+    text-align: center;
+    height: 176px;
+
+    -webkit-align-items: center;
+    align-items: center;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+    
+    justify-content: center;
+    -webkit-justify-content: center;
+
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+}
+
+.mx_RoomPreviewBar_wrapper {
+}
+
+.mx_RoomPreviewBar_invite_text {
+    color: #454545;
+}
+
+.mx_RoomPreviewBar_join_text {
+    color: #ff0064;
+}
+
+.mx_RoomPreviewBar_preview_text {
+    margin-top: 25px;
+    color: #a4a4a4;
+}
+
+.mx_RoomPreviewBar_join_text a {
+    text-decoration: underline;
+    cursor: pointer;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
@ -0,0 +1,191 @@
+/*
+Copyright 2015, 2016 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 {
+    margin-left: 65px;
+    margin-bottom: 20px;
+}
+
+.mx_RoomSettings_powerLevels {
+    display: table;
+}
+
+.mx_RoomSettings_powerLevel {
+    display: table-row;
+}
+
+.mx_RoomSettings_powerLevelKey,
+.mx_RoomSettings_powerLevel .mx_PowerSelector {
+    display: table-cell;
+    padding-bottom: 5px;
+}
+
+.mx_RoomSettings_powerLevelKey {
+    text-align: right;
+    padding-right: 0.3em;
+}
+
+.mx_RoomSettings h3 {
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 36px;
+    margin-bottom: 10px;
+}
+
+/*
+.mx_RoomSettings input,
+.mx_RoomSettings textarea  {
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 13px;
+    padding: 9px;
+    margin-top: 6px;
+}
+*/
+
+.mx_RoomSettings .mx_RoomSettings_toggles label {
+    margin-bottom: 8px;
+    display: block;
+}
+
+.mx_RoomSettings .mx_RoomSettings_toggles input[type="checkbox"] {
+    margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags input[type="checkbox"] {
+    margin-left: 1em;
+    margin-right: 7px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_tags {
+    margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor {
+    display: inline-block;
+    position: relative;
+    width: 37px;
+    height: 37px;
+    border: 1px solid #979797;
+    margin-right: 13px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColor_selected {
+    position: absolute;
+    left: 10px;
+    top: 4px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
+    height: 10px;
+    position: absolute;
+    bottom: 0px;
+    width: 100%;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasLabel {
+    margin-bottom: 8px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTable {
+    margin-top: 12px;
+    margin-bottom: 0px;
+    margin-left: 56px;
+    display: table;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow {
+    display: table-row;
+    margin-bottom: 16px;
+}
+
+.mx_RoomSettings .mx_RoomSettings_alias {
+    max-width: 400px;
+    margin-bottom: 16px;
+    /* 
+    commented out so margin applies
+    display: table-cell; */
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias {
+    display: table-cell;
+    padding-left: 0.5em;
+    position: relative;
+    cursor: pointer;
+}
+
+.mx_RoomSettings .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_deleteAlias img {
+    visibility: hidden;
+}
+
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_addAlias img,
+.mx_RoomSettings .mx_RoomSettings_aliasesTableRow:hover .mx_RoomSettings_deleteAlias img {
+    visibility: visible;
+}
+
+.mx_RoomSettings_editable {
+    border: 0px;
+    border-bottom: 1px solid #c7c7c7;
+    padding: 0px;
+    min-width: 240px;
+}
+
+.mx_RoomSettings_editable:focus {
+    border-bottom: 1px solid #76CFA6;
+    outline: none;
+    box-shadow: none;
+}
+
+.mx_RoomSettings_deleteAlias,
+.mx_RoomSettings_addAlias {
+    display: table-cell;
+    visibility: visible;
+}
+
+.mx_RoomSettings_deleteAlias:hover,
+.mx_RoomSettings_addAlias:hover {
+    visibility: visible;
+}
+
+.mx_RoomSettings_aliasPlaceholder {
+    color: #a2a2a2;
+}
+
+.mx_RoomSettings_buttons {
+    text-align: right;
+    margin-bottom: 16px;
+}
+
+.mx_RoomSettings_button {
+    display: inline;
+    border: 0px;
+    height: 36px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 15px;
+    color: #fff;
+    background-color: #76cfa6;
+    width: auto;
+    margin: auto;
+    padding: 6px;
+    padding-left: 1em;
+    padding-right: 1em;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -33,10 +33,6 @@ limitations under the License.
    vertical-align: middle;
 }

-.mx_RoomTile_avatar img {
-    border-radius: 20px;
-}
-
 .mx_RoomTile_name {
    display: table-cell;
    width: 100%;
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
@ -0,0 +1,78 @@
+/*
+Copyright 2016 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_SearchableEntityList {
+    display: flex;
+    display: -webkit-flex;
+
+    flex-direction: column;
+    -webkit-flex-direction: column;
+}
+
+.mx_SearchableEntityList_query {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    padding: 9px;
+    color: #454545;
+    margin-left: 3px;
+    font-size: 15px;
+    margin-bottom: 8px;
+    width: 180px;
+}
+
+.mx_SearchableEntityList_query::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_SearchableEntityList_query::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+}
+
+.mx_SearchableEntityList_listWrapper {
+    flex: 1;
+    -webkit-flex: 1;
+
+    overflow-y: auto;    
+}
+
+.mx_SearchableEntityList_list {
+    display: table;
+    table-layout: fixed;
+    width: 100%;    
+}
+
+.mx_SearchableEntityList_list .mx_EntityTile_chevron {
+    display: none;
+}
+
+.mx_SearchableEntityList_hrWrapper {
+    width: 100%;
+    flex: 0;
+    -webkit-flex: 0;    
+}
+
+.mx_SearchableEntityList hr {
+    height: 1px;
+    border: 0px;
+    color: #e1dddd;
+    background-color: #e1dddd;
+    margin-right: 15px;
+    margin-top: 11px;
+    margin-bottom: 11px;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -21,10 +21,26 @@ limitations under the License.
 .mx_TabCompleteBar_item {
    display: inline-block;
    margin-right: 15px;
+    cursor: pointer;
+}
+
+.mx_TabCompleteBar_command {
+    margin-right: 8px;
+    background-color: #76CFA6;
+    padding-left: 8px;
+    padding-right: 8px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    margin-bottom: 6px;
+    border-radius: 30px;
+}
+
+.mx_TabCompleteBar_command .mx_TabCompleteBar_text {
+    opacity: 1.0;
+    color: #fff;
 }

 .mx_TabCompleteBar_item img {
-    border-radius: 24px;
    margin-right: 8px;
    vertical-align: middle;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/molecules/RoomSettings.css
+++ b/src/skins/vector/css/molecules/RoomSettings.css
@ -1,70 +0,0 @@
-/*
-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;
-    padding-top: 12px;
-}
-
-.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;
-}
-
-.mx_RoomSettings input,
-.mx_RoomSettings textarea  {
-    border-radius: 3px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
-    margin-top: 6px;
-}
-
-.mx_RoomSettings_description {
-    width: 330px;
-}
-
-.mx_RoomSettings_buttons {
-    text-align: right;
-    margin-bottom: 16px;
-}
-
-.mx_RoomSettings_button {
-    display: inline;
-    border: 0px;
-    height: 36px;
-    border-radius: 36px;
-    font-weight: 400;
-    font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
-    width: auto;
-    margin: auto;
-    padding: 6px;
-    padding-left: 1em;
-    padding-right: 1em;
-}
--- a/src/skins/vector/css/organisms/UserSettings.css
+++ b/src/skins/vector/css/organisms/UserSettings.css
@ -1,21 +0,0 @@
-/*
-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: 960px;
-    margin-left: auto;
-    margin-right: auto;
-}
--- a/src/skins/vector/css/vector-web/structures/CompatibilityPage.css
+++ b/src/skins/vector/css/vector-web/structures/CompatibilityPage.css
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/src/skins/vector/css/vector-web/structures/LeftPanel.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -61,7 +61,7 @@ limitations under the License.
    -webkit-flex: 0 0 140px;
    flex: 0 0 140px;

-    background-color: rgba(118,207,166,0.19);
+    background-color: rgba(118,207,166,0.2);
 }

 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
--- a/src/skins/vector/css/vector-web/structures/RightPanel.css
+++ b/src/skins/vector/css/vector-web/structures/RightPanel.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -55,6 +55,10 @@ limitations under the License.
    position: relative;
 }

+.mx_RightPanel_headerButton object {
+    pointer-events: none;
+}
+
 .mx_RightPanel_headerButton_highlight {
    position: absolute;
    bottom: -2px;
--- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css
+++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -33,6 +33,7 @@ limitations under the License.

 .mx_RoomSubList_chevron {
    padding-left: 5px;
+    pointer-events: none;
 }

 .collapsed .mx_RoomSubList_chevron  {
--- a/src/skins/vector/css/vector-web/structures/ViewSource.css
+++ b/src/skins/vector/css/vector-web/structures/ViewSource.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/elements/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -60,9 +60,10 @@ limitations under the License.
    max-width: 100%;
    /* XXX: max-height interacts badly with flex on Chrome and doesn't relayout properly until you refresh */
    max-height: 100%;
-    /* object-fit hack needed for Chrome due to Chrome not relaying out until you refresh */
+    /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
    object-fit: contain;
    /* background-image: url('img/trans.png'); */
+    pointer-events: all;
 }

 .mx_ImageView_labelWrapper {
@ -70,6 +71,7 @@ limitations under the License.
    top: 0px;
    height: 100%;
    overflow: auto;
+    pointer-events: all;
 }

 .mx_ImageView_label {
@ -86,20 +88,25 @@ limitations under the License.
    color: #fff;
 }

+.mx_ImageView_cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    padding: 35px;
+    cursor: pointer;
+}
+
 .mx_ImageView_name {
    font-size: 18px;
    margin-bottom: 6px;
-    pointer-events: all;
 }

 .mx_ImageView_metadata {
    font-size: 15px;
    opacity: 0.5;
-    pointer-events: all;
 }

 .mx_ImageView_download {
-    pointer-events: all;
    display: table;
    margin-top: 24px;
    margin-bottom: 6px;
@ -120,7 +127,6 @@ limitations under the License.
 }

 .mx_ImageView_button {
-    pointer-events: all;
    font-size: 15px;
    opacity: 0.5;
    margin-top: 18px;
--- a/src/skins/vector/css/vector-web/views/elements/Spinner.css
+++ b/src/skins/vector/css/vector-web/views/elements/Spinner.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
+++ b/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
+++ b/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/messages/SenderProfile.css
+++ b/src/skins/vector/css/vector-web/views/messages/SenderProfile.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
+++ b/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css
+++ b/src/skins/vector/css/vector-web/views/rooms/SearchBar.css
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
--- a/src/skins/vector/css/vector-web/views/settings/Notifications.css
+++ b/src/skins/vector/css/vector-web/views/settings/Notifications.css
@ -0,0 +1,62 @@
+/*
+Copyright 2015, 2016 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_UserNotifSettings_tableRow
+{
+    display: table-row;
+}
+
+.mx_UserNotifSettings_inputCell {
+    display: table-cell;
+    padding-bottom: 21px;
+    padding-right: 8px;
+    width: 16px;
+}
+
+.mx_UserNotifSettings_labelCell
+{
+    padding-bottom: 21px;
+    width: 270px;
+    display: table-cell;
+}
+
+.mx_UserNotifSettings_pushRulesTableWrapper {
+    padding-bottom: 21px;
+}
+
+.mx_UserNotifSettings_pushRulesTable {
+    width: 100%;
+    table-layout: fixed;
+}
+
+.mx_UserNotifSettings_pushRulesTable thead {
+    font-weight: bold;
+    font-size: 15px;
+}
+
+.mx_UserNotifSettings_pushRulesTable tbody th {
+    font-weight: 400;
+    font-size: 15px;
+}
+
+.mx_UserNotifSettings_pushRulesTable tbody th:first-child {
+    text-align: left;
+}
+
+.mx_UserNotifSettings_keywords {
+    cursor: pointer;
+    color: #76cfa6;
+}
--- a/src/skins/vector/img/admin.svg
+++ b/src/skins/vector/img/admin.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="17px" viewBox="-1 -1 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_owner</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_19-Room-contextual-menu-hover" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -128.000000)">
+            <g id="people_open" sketch:type="MSLayerGroup" transform="translate(966.000000, 59.000000)">
+                <g id="icons_owner" transform="translate(35.000000, 70.000000)" sketch:type="MSShapeGroup">
+                    <path d="M0.441894529,1.80537109 C2.59277353,3.03442388 4.25305977,2.17675781 5.9832796,0.805371094 C8.01666135,2.17675787 9.50756797,3.12670903 11.6293941,1.80537109 C11.6293941,7.01538067 11.9379879,12.2253912 5.9832796,12.2253906 C0.0285712975,12.2253901 0.441894531,7.01538067 0.441894529,1.80537109 Z" id="Path-2-Copy" stroke="#FFFFFF" fill="#F6A623"></path>
+                    <polygon id="Star-1" fill="#FFFFFF" points="6 8.8 3.88397309 9.91246118 4.28809827 7.55623059 2.57619654 5.88753882 4.94198655 5.54376941 6 3.4 7.05801345 5.54376941 9.42380346 5.88753882 7.71190173 7.55623059 8.11602691 9.91246118 "></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/camera.svg
+++ b/src/skins/vector/img/camera.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="15px" viewBox="-1 -1 16 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_camera</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-248.000000, -71.000000)" fill="#454545">
+            <path d="M255.5,76.25 C256.119795,76.25 256.649737,76.4700499 257.089844,76.9101562 C257.52995,77.3502626 257.75,77.8802052 257.75,78.5 C257.75,79.1197948 257.52995,79.6497374 257.089844,80.0898438 C256.649737,80.5299501 256.119795,80.75 255.5,80.75 C254.880205,80.75 254.350263,80.5299501 253.910156,80.0898438 C253.47005,79.6497374 253.25,79.1197948 253.25,78.5 C253.25,77.8802052 253.47005,77.3502626 253.910156,76.9101562 C254.350263,76.4700499 254.880205,76.25 255.5,76.25 L255.5,76.25 Z M261,73 C261.552086,73 262.023436,73.1953105 262.414062,73.5859375 C262.804689,73.9765645 263,74.4479139 263,75 L263,82 C263,82.5520861 262.804689,83.0234355 262.414062,83.4140625 C262.023436,83.8046895 261.552086,84 261,84 L250,84 C249.447914,84 248.976564,83.8046895 248.585938,83.4140625 C248.195311,83.0234355 248,82.5520861 248,82 L248,75 C248,74.4479139 248.195311,73.9765645 248.585938,73.5859375 C248.976564,73.1953105 249.447914,73 250,73 L251.75,73 L252.148438,71.9375 C252.247396,71.6822904 252.428384,71.4622405 252.691406,71.2773438 C252.954428,71.092447 253.223957,71 253.5,71 L257.5,71 C257.776043,71 258.045572,71.092447 258.308594,71.2773438 C258.571616,71.4622405 258.752604,71.6822904 258.851562,71.9375 L259.25,73 L261,73 Z M255.5,82 C256.463546,82 257.287757,81.6575555 257.972656,80.9726562 C258.657556,80.287757 259,79.4635465 259,78.5 C259,77.5364535 258.657556,76.712243 257.972656,76.0273438 C257.287757,75.3424445 256.463546,75 255.5,75 C254.536454,75 253.712243,75.3424445 253.027344,76.0273438 C252.342444,76.712243 252,77.5364535 252,78.5 C252,79.4635465 252.342444,80.287757 253.027344,80.9726562 C253.712243,81.6575555 254.536454,82 255.5,82 L255.5,82 Z" id="icon_camera" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/cancel-small.svg
+++ b/src/skins/vector/img/cancel-small.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M8,0 L0,8" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0,0 L8,8" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/cancel-white.svg
+++ b/src/skins/vector/img/cancel-white.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#ffffff" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>
--- a/src/skins/vector/img/create-big.svg
+++ b/src/skins/vector/img/create-big.svg
@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_create_room</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -653.000000)">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <g id="Group-Copy-15">
+                            <g id="icons_create_room">
+                                <g id="Oval-1-Copy-7-+-Group-Copy-5-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy-Copy" fill="#454545">
+                                    <circle id="Oval-1-Copy-7" cx="12" cy="12" r="12"></circle>
+                                </g>
+                                <path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                                <path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/directory-big.svg
+++ b/src/skins/vector/img/directory-big.svg
@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -2 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_directory</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -689.000000)" fill="#454545">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <g id="icons_directory" transform="translate(0.000000, 36.000000)">
+                            <path d="M8.74940618,2.46971496 C8.58491686,2.46971496 8.47565321,2.15795724 8.32719715,1.68349169 C8.11698337,1.01306413 7.80106888,0 6.69002375,0 L1.38182898,0 C0.63064133,0 0.0243467933,0.589073634 0.00118764846,1.35391924 L0,19.6264846 C0,20.3895487 0.620546318,21.0095012 1.38182898,21.0095012 L22.6187648,21.0095012 C23.3800475,21.0095012 24,20.3895487 24,19.6264846 L24,3.85213777 C24,3.08966746 23.3800475,2.46971496 22.6187648,2.46971496 L8.74940618,2.46971496 Z M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z M23.1086698,5.60391924 L0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L23.1086698,5.60391924 Z" id="Fill-137"></path>
+                            <path d="M23.1086698,19.5068597 C23.1086698,19.7757653 22.8889549,19.9946556 22.6187648,19.9946556 L1.38182898,19.9946556 C1.11163895,19.9946556 0.890736342,19.7757653 0.890736342,19.5068597 L0.89192399,6.49465558 L23.1086698,6.49465558 L23.1086698,19.5068597 L23.1086698,19.5068597 Z" id="Path-Copy-2" fill-opacity="0.1"></path>
+                            <path d="M0.89192399,5.60391924 L0.89192399,1.36698337 C0.90023753,1.09976247 1.11579572,0.890736342 1.38182898,0.890736342 L6.69002375,0.890736342 C7.10273159,0.890736342 7.24643705,1.2131829 7.47624703,1.94893112 C7.66270784,2.54453682 7.91805226,3.36045131 8.74940618,3.36045131 L22.6187648,3.36045131 C22.8889549,3.36045131 23.1086698,3.5807601 23.1086698,3.85213777 L23.1086698,5.60391924 L0.89192399,5.60391924 Z" id="Path-Copy" fill-opacity="0.1"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/download.svg
+++ b/src/skins/vector/img/download.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="14px" viewBox="-1 -1 12 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 75</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_x-Chat-MAX" sketch:type="MSArtboardGroup" transform="translate(-280.000000, -546.000000)" fill="#76CFA6">
+            <g id="Group" sketch:type="MSLayerGroup" transform="translate(243.000000, 58.000000)">
+                <g id="Group-Copy-13-+-Matrix-HQ-Copy-17-+-Bitmap" transform="translate(1.000000, 181.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-13">
+                        <path d="M45.3400426,312.526774 C45.4870048,312.526774 45.633967,312.470898 45.7464849,312.35838 C45.9699899,312.134109 45.9699899,311.771296 45.7464849,311.547026 L41.3659396,307.168011 C41.1424345,306.943741 40.7788562,306.944506 40.5545857,307.167246 L36.1686823,311.540137 C35.9444119,311.764408 35.9436465,312.127986 36.1671515,312.352256 C36.3906565,312.577292 36.7542349,312.577292 36.9785053,312.353787 L40.3915495,308.950694 L40.3930804,318.425929 C40.3930804,318.742816 40.6510296,319 40.9671515,319 C41.2848042,319 41.5412226,318.742816 41.5412226,318.425929 L41.5396917,308.965237 L44.9343656,312.35838 C45.0461182,312.470898 45.1930804,312.526774 45.3400426,312.526774 L45.3400426,312.526774 Z" id="Fill-75" transform="translate(40.957057, 313.000000) rotate(-180.000000) translate(-40.957057, -313.000000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/eol.svg
+++ b/src/skins/vector/img/eol.svg
@ -9,7 +9,7 @@
            <g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
                <path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
                <path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
+                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
            </g>
        </g>
    </g>
--- a/src/skins/vector/img/leave.svg
+++ b/src/skins/vector/img/leave.svg
@ -3,24 +3,20 @@
 <svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 20 26"
 	 xml:space="preserve">
-<style type="text/css">
-	.st0{fill:none;stroke:#76CFA6;}
-	.st1{fill:#76CFA6;}
-</style>
 <g id="Page-1" sketch:type="MSPage">
 	<g id="Exit-Copy-6" sketch:type="MSLayerGroup">
-		<path id="Rectangle-140_1_" sketch:type="MSShapeGroup" class="st0" d="M4.4,0.5h7.5c2.2,0,4,1.8,4,4v14c0,2.2-1.8,4-4,4H4.4
+		<path id="Rectangle-140_1_" sketch:type="MSShapeGroup" fill="none" stroke="#76CFA6" d="M4.4,0.5h7.5c2.2,0,4,1.8,4,4v14c0,2.2-1.8,4-4,4H4.4
 			c-2.2,0-4-1.8-4-4v-14C0.4,2.3,2.2,0.5,4.4,0.5z"/>
 		<g id="Rectangle-140_2_">
 			<g>
-				<path class="st1" d="M12,23H4.5C2,23,0,21,0,18.5v-14C0,2,2,0,4.5,0H12c2.5,0,4.5,2,4.5,4.5v14C16.4,21,14.4,23,12,23z M4.4,1
+				<path fill="#76CFA6" d="M12,23H4.5C2,23,0,21,0,18.5v-14C0,2,2,0,4.5,0H12c2.5,0,4.5,2,4.5,4.5v14C16.4,21,14.4,23,12,23z M4.4,1
 					C2.5,1,0.9,2.6,0.9,4.5v14c0,1.9,1.6,3.5,3.5,3.5h7.5c1.9,0,3.5-1.6,3.5-3.5v-14c0-1.9-1.6-3.5-3.5-3.5H4.4z"/>
 				<g>
-					<path class="st0" d="M3.2,20.6l8.3-1.8c1.1-0.2,2-1,2-1.7V5.7c0-0.7-0.9-1.4-2-1.7L3.2,2.2"/>
+					<path fill="none" stroke="#76CFA6" d="M3.2,20.6l8.3-1.8c1.1-0.2,2-1,2-1.7V5.7c0-0.7-0.9-1.4-2-1.7L3.2,2.2"/>
 				</g>
 			</g>
 		</g>
-		<circle id="Oval-605" sketch:type="MSShapeGroup" class="st1" cx="10.7" cy="11.1" r="1">
+		<circle id="Oval-605" sketch:type="MSShapeGroup" fill="#76CFA6" cx="10.7" cy="11.1" r="1">
 		</circle>
 	</g>
 </g>
--- a/src/skins/vector/img/mod.svg
+++ b/src/skins/vector/img/mod.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16px" height="17px" viewBox="-1 -1 15 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4.4 (395) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_admin</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="02_19-Room-contextual-menu-hover" sketch:type="MSArtboardGroup" transform="translate(-1000.000000, -172.000000)" stroke="#FFFFFF" fill="#C2C5AF">
+            <g id="people_open" sketch:type="MSLayerGroup" transform="translate(966.000000, 59.000000)">
+                <g id="icons_admin" transform="translate(35.000000, 114.000000)" sketch:type="MSShapeGroup">
+                    <path d="M0.441894529,1.80537109 C2.59277353,3.03442388 4.25305977,2.17675781 5.9832796,0.805371094 C8.01666135,2.17675787 9.50756797,3.12670903 11.6293941,1.80537109 C11.6293941,7.01538067 11.9379879,12.2253912 5.9832796,12.2253906 C0.0285712975,12.2253901 0.441894531,7.01538067 0.441894529,1.80537109 Z" id="Path-2-Copy-2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/plus.svg
+++ b/src/skins/vector/img/plus.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="14px" viewBox="-1 -1 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.4 (17249) - http://www.bohemiancoding.com/sketch -->
+    <title>Line + Line</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Line-+-Line" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#4A4A4A" stroke-width="2.82" stroke-linecap="square">
+            <path d="M4,0.228763834 L4,7.77123617" id="Line" sketch:type="MSShapeGroup"></path>
+            <path d="M0.228763834,4 L7.77123617,4" id="Line" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/settings-big.svg
+++ b/src/skins/vector/img/settings-big.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="26px" height="26px" viewBox="-1 -1 26 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icons_settings</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="01-Sign-up" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="01_2-Sign-up-2" sketch:type="MSArtboardGroup" transform="translate(-14.000000, -720.000000)" fill="#454545" opacity="0.9">
+            <g id="Left-panel" sketch:type="MSLayerGroup" transform="translate(-4.000000, 0.000000)">
+                <g id="right_bottom" transform="translate(0.000000, 626.000000)" sketch:type="MSShapeGroup">
+                    <g id="Group-Copy-29" transform="translate(18.000000, 27.000000)">
+                        <path d="M16,79 C16,77.8958278 15.6093789,76.9531289 14.828125,76.171875 C14.0468711,75.3906211 13.1041722,75 12,75 C10.8958278,75 9.95312891,75.3906211 9.171875,76.171875 C8.39062109,76.9531289 8,77.8958278 8,79 C8,80.1041722 8.39062109,81.0468711 9.171875,81.828125 C9.95312891,82.6093789 10.8958278,83 12,83 C13.1041722,83 14.0468711,82.6093789 14.828125,81.828125 C15.6093789,81.0468711 16,80.1041722 16,79 L16,79 Z M24,77.296875 L24,80.765625 C24,80.8906256 23.9583338,81.0104161 23.875,81.125 C23.7916662,81.2395839 23.6875006,81.3072916 23.5625,81.328125 L20.671875,81.765625 C20.4739573,82.3281278 20.2708344,82.8020814 20.0625,83.1875 C20.4270852,83.7083359 20.9843712,84.4270787 21.734375,85.34375 C21.8385422,85.4687506 21.890625,85.5989577 21.890625,85.734375 C21.890625,85.8697923 21.8437505,85.9895828 21.75,86.09375 C21.4687486,86.4791686 20.9531288,87.041663 20.203125,87.78125 C19.4531212,88.520837 18.9635428,88.890625 18.734375,88.890625 C18.6093744,88.890625 18.4739591,88.8437505 18.328125,88.75 L16.171875,87.0625 C15.7135394,87.3020845 15.2395858,87.4999992 14.75,87.65625 C14.5833325,89.0729238 14.4322923,90.0416641 14.296875,90.5625 C14.223958,90.8541681 14.0364598,91 13.734375,91 L10.265625,91 C10.1197909,91 9.99218805,90.9557296 9.8828125,90.8671875 C9.77343695,90.7786454 9.71354172,90.6666673 9.703125,90.53125 L9.265625,87.65625 C8.75520578,87.4895825 8.28646047,87.2968761 7.859375,87.078125 L5.65625,88.75 C5.55208281,88.8437505 5.42187578,88.890625 5.265625,88.890625 C5.11979094,88.890625 4.98958391,88.8333339 4.875,88.71875 C3.56249344,87.5312441 2.70312703,86.6562528 2.296875,86.09375 C2.22395797,85.9895828 2.1875,85.8697923 2.1875,85.734375 C2.1875,85.6093744 2.22916625,85.4895839 2.3125,85.375 C2.46875078,85.1562489 2.73437313,84.8098982 3.109375,84.3359375 C3.48437688,83.8619768 3.76562406,83.494793 3.953125,83.234375 C3.67187359,82.7135391 3.45833406,82.1979192 3.3125,81.6875 L0.453125,81.265625 C0.317707656,81.2447916 0.20833375,81.179688 0.125,81.0703125 C0.04166625,80.960937 0,80.8385423 0,80.703125 L0,77.234375 C0,77.1093744 0.04166625,76.9895839 0.125,76.875 C0.20833375,76.7604161 0.307291094,76.6927084 0.421875,76.671875 L3.328125,76.234375 C3.47395906,75.7552059 3.67708203,75.2760441 3.9375,74.796875 C3.52083125,74.203122 2.96354516,73.4843792 2.265625,72.640625 C2.16145781,72.5156244 2.109375,72.3906256 2.109375,72.265625 C2.109375,72.1614578 2.15624953,72.0416673 2.25,71.90625 C2.52083469,71.5312481 3.03385039,70.9713579 3.7890625,70.2265625 C4.54427461,69.4817671 5.03645719,69.109375 5.265625,69.109375 C5.40104234,69.109375 5.53645766,69.1614578 5.671875,69.265625 L7.828125,70.9375 C8.28646063,70.6979155 8.76041422,70.5000008 9.25,70.34375 C9.4166675,68.9270762 9.56770766,67.9583359 9.703125,67.4375 C9.77604203,67.1458319 9.96354016,67 10.265625,67 L13.734375,67 C13.8802091,67 14.007812,67.0442704 14.1171875,67.1328125 C14.226563,67.2213546 14.2864583,67.3333327 14.296875,67.46875 L14.734375,70.34375 C15.2447942,70.5104175 15.7135395,70.7031239 16.140625,70.921875 L18.359375,69.25 C18.4531255,69.1562495 18.5781242,69.109375 18.734375,69.109375 C18.8697923,69.109375 18.9999994,69.1614578 19.125,69.265625 C20.4687567,70.5052145 21.3281231,71.3906223 21.703125,71.921875 C21.776042,72.0052088 21.8125,72.1197909 21.8125,72.265625 C21.8125,72.3906256 21.7708338,72.5104161 21.6875,72.625 C21.5312492,72.8437511 21.2656269,73.1901018 20.890625,73.6640625 C20.5156231,74.1380232 20.2343759,74.505207 20.046875,74.765625 C20.3177097,75.2864609 20.5312492,75.7968725 20.6875,76.296875 L23.546875,76.734375 C23.6822923,76.7552084 23.7916662,76.820312 23.875,76.9296875 C23.9583338,77.039063 24,77.1614577 24,77.296875 L24,77.296875 Z" id="icons_settings"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/tab.svg
+++ b/src/skins/vector/img/tab.svg
@ -1,16 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="14px" viewBox="0 0 20 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icon_eol</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="03_2-Mentions-autocomplete" sketch:type="MSArtboardGroup" transform="translate(-772.000000, -670.000000)">
-            <g id="icon_eol" sketch:type="MSLayerGroup" transform="translate(772.000000, 670.000000)">
-                <path d="M0,7.5 L17,7.5" id="Path-118" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M13,2 L18,7.38056399 L13,12.761128" id="Path-119" stroke="#76CFA6" sketch:type="MSShapeGroup"></path>
-                <path d="M19.5,0 L19.5,14" id="Path-120" stroke="#80CEF4" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/skins/vector/img/tick.svg
+++ b/src/skins/vector/img/tick.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="14px" viewBox="-1 -1 17 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: sketchtool 3.4 (381) - http://www.bohemiancoding.com/sketch -->
+    <title>icon_tick</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="06a-Room-settings" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="06_4-Room-settings-admin" sketch:type="MSArtboardGroup" transform="translate(-310.000000, -206.000000)" fill="#4A4A4A">
+            <path d="M315,218 L310,213 L312,211 L315,214 L323,206 L325,208 L315,218 Z" id="icon_tick" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/src/skins/vector/img/upload-original.svg
+++ b/src/skins/vector/img/upload-original.svg
@ -1,19 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_upload</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-873.000000, -722.000000)">
-            <g id="icons_upload" sketch:type="MSLayerGroup" transform="translate(873.000000, 722.000000)">
-                <g id="Rectangle-5-+-Rectangle-6" sketch:type="MSShapeGroup">
-                    <path d="M0,4.00955791 C0,1.79514022 1.78163126,0 3.99825563,0 L9.59161955,0 C9.59161955,0 16.3225806,6.49234232 16.3225806,6.49234232 L16.3225806,18.0063928 C16.3225806,20.2120012 14.5290874,22 12.3296282,22 L3.99295243,22 C1.7877057,22 0,20.1996477 0,17.9904421 L0,4.00955791 Z" id="Rectangle-5" stroke="#76CFA6"></path>
-                    <path d="M15.6804916,7.49527496 L11.5273266,7.49527496 C10.3308881,7.49527496 9.3609831,6.52527676 9.3609831,5.3289315 L9.3609831,1.88544393 L15.6804916,7.49527496 Z" id="Rectangle-6-Copy" fill="#FFFFFF"></path>
-                    <path d="M16.3225806,7.09677419 L11.4129801,7.09677419 C10.2050375,7.09677419 9.22580645,6.11744908 9.22580645,4.90960051 L9.22580645,0" id="Rectangle-6" stroke="#76CFA6"></path>
-                </g>
-                <path d="M12.3736951,12.709235 C12.5125582,12.709235 12.6514212,12.6596674 12.7577382,12.5598531 C12.9689258,12.3609035 12.9689258,12.0390533 12.7577382,11.8401037 L8.61860697,7.95549406 C8.40741942,7.75654446 8.06387804,7.75722347 7.85196724,7.95481505 L3.70777326,11.8339926 C3.49586247,12.0329422 3.49513923,12.3554714 3.70632677,12.554421 C3.91751432,12.7540496 4.2610557,12.7540496 4.4729665,12.555779 L7.69791605,9.53690567 L7.69936254,17.9423563 C7.69936254,18.2234659 7.94309612,18.4516129 8.24179631,18.4516129 C8.541943,18.4516129 8.78423008,18.2234659 8.78423008,17.9423563 L8.78278359,9.54980684 L11.9903753,12.5598531 C12.095969,12.6596674 12.2348321,12.709235 12.3736951,12.709235 L12.3736951,12.709235 Z" id="Fill-75" fill="#76CFA6" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>
--- a/src/vector/index.js
+++ b/src/vector/index.js
@ -1,5 +1,5 @@
 /*
-Copyright 2015 OpenMarket Ltd
+Copyright 2015, 2016 OpenMarket Ltd

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@ -117,6 +117,7 @@ var onNewScreen = function(screen) {
        var hash = '#/' + screen;
        lastLocationHashSet = hash;
        window.location.hash = hash;
+        if (ga) ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
    }
 }

@ -154,7 +155,8 @@ function loadApp() {
                registrationUrl={makeRegistrationUrl()}
                ConferenceHandler={VectorConferenceHandler}
                config={configJson}
-                startingQueryParams={parseQsFromFragment(window.location)} />,
+                startingQueryParams={parseQsFromFragment(window.location)}
+                enableGuest={true} />,
            document.getElementById('matrixchat')
        );
    }
--- a/vector/img
+++ b/vector/img
@ -1 +1 @@
-../src/skins/vector/img
+../src/skins/vector/img/
--- a/vector/index.html
+++ b/vector/index.html
@ -25,6 +25,7 @@
  <body style="height: 100%;">
    <section id="matrixchat" style="height: 100%;"></section>
    <script src="bundle.js"></script>
+    <noscript>Sorry, Vector requires JavaScript to be enabled.</noscript>
    <link rel="stylesheet" href="bundle.css">
    <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
    <audio id="ringAudio" loop>
@ -43,5 +44,19 @@
        <source src="media/busy.ogg" type="audio/ogg" />
        <source src="media/busy.mp3" type="audio/mpeg" />
    </audio>
+    <script>
+        if (window.location.host === 'www.vector.im' || window.location.host === 'vector.im') {
+            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+            ga('create', 'UA-54779209-2', 'auto');
+            ga('send', 'pageview', window.location.pathname + window.location.search + window.location.hash);
+        }
+        else {
+            var ga = null;
+        }
+    </script>
  </body>
 </html>