0.8.3

Centre images in dialog buttons

CHANGELOG.md

@@ -1,3 +1,130 @@
+Changes in [0.8.3](https://github.com/vector-im/vector-web/releases/tag/v0.8.3) (2016-10-12)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.2...v0.8.3)
+
+ * Centre images in dialog buttons
+   [\#2453](https://github.com/vector-im/vector-web/pull/2453)
+ * Only show quote option if RTE is enabled
+   [\#2448](https://github.com/vector-im/vector-web/pull/2448)
+ * Fix join button for 'matrix' networks
+   [\#2443](https://github.com/vector-im/vector-web/pull/2443)
+ * Don't stop paginating if no rooms match
+   [\#2422](https://github.com/vector-im/vector-web/pull/2422)
+
+Changes in [0.8.2](https://github.com/vector-im/vector-web/releases/tag/v0.8.2) (2016-10-05)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.1...v0.8.2)
+
+ * Add native joining of 3p networks to room dir
+   [\#2379](https://github.com/vector-im/vector-web/pull/2379)
+ * Update to linkify 2.1.3
+   [\#2406](https://github.com/vector-im/vector-web/pull/2406)
+ * Use 'Sign In' / 'Sign Out' universally
+   [\#2383](https://github.com/vector-im/vector-web/pull/2383)
+ * Prevent network dropdown resizing slightly
+   [\#2382](https://github.com/vector-im/vector-web/pull/2382)
+ * Room directory: indicate when there are no results
+   [\#2380](https://github.com/vector-im/vector-web/pull/2380)
+ * Room dir: New filtering & 3rd party networks
+   [\#2362](https://github.com/vector-im/vector-web/pull/2362)
+ * Update linkify version
+   [\#2359](https://github.com/vector-im/vector-web/pull/2359)
+ * Directory search join button
+   [\#2339](https://github.com/vector-im/vector-web/pull/2339)
+
+Changes in [0.8.1](https://github.com/vector-im/vector-web/releases/tag/v0.8.1) (2016-09-21)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.0...v0.8.1)
+
+
+Changes in [0.8.0](https://github.com/vector-im/vector-web/releases/tag/v0.8.0) (2016-09-21)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r3...v0.8.0)
+
+ * Dbkr/rebrand
+   [\#2285](https://github.com/vector-im/vector-web/pull/2285)
+ * Listen for close_scalar and close the dialog box when received
+   [\#2282](https://github.com/vector-im/vector-web/pull/2282)
+ * Revert "improve lipstick and support scalar logout"
+   [\#2281](https://github.com/vector-im/vector-web/pull/2281)
+ * improve lipstick and support scalar logout
+   [\#2280](https://github.com/vector-im/vector-web/pull/2280)
+ * Fix changelog links
+   [\#2071](https://github.com/vector-im/vector-web/pull/2071)
+ * Paginate Room Directory
+   [\#2241](https://github.com/vector-im/vector-web/pull/2241)
+ * Make redeploy script symlink config
+   [\#2240](https://github.com/vector-im/vector-web/pull/2240)
+ * Update the version of olm to 1.3.0
+   [\#2210](https://github.com/vector-im/vector-web/pull/2210)
+ * Directory network selector
+   [\#2219](https://github.com/vector-im/vector-web/pull/2219)
+ * Wmwragg/two state sublist headers
+   [\#2235](https://github.com/vector-im/vector-web/pull/2235)
+ * Wmwragg/correct incoming call positioning
+   [\#2222](https://github.com/vector-im/vector-web/pull/2222)
+ * Wmwragg/remove old filter
+   [\#2211](https://github.com/vector-im/vector-web/pull/2211)
+ * Wmwragg/multi invite bugfix
+   [\#2198](https://github.com/vector-im/vector-web/pull/2198)
+ * Wmwragg/chat multi invite
+   [\#2181](https://github.com/vector-im/vector-web/pull/2181)
+ * shuffle bottomleftmenu around a bit
+   [\#2182](https://github.com/vector-im/vector-web/pull/2182)
+ * Improve autocomplete behaviour (styling)
+   [\#2175](https://github.com/vector-im/vector-web/pull/2175)
+ * First wave of E2E visuals
+   [\#2163](https://github.com/vector-im/vector-web/pull/2163)
+ * FilePanel and NotificationPanel support
+   [\#2113](https://github.com/vector-im/vector-web/pull/2113)
+ * Cursor: pointer on member info create room button
+   [\#2151](https://github.com/vector-im/vector-web/pull/2151)
+ * Support for adding DM rooms to the MemberInfo Panel
+   [\#2147](https://github.com/vector-im/vector-web/pull/2147)
+ * Wmwragg/one to one indicators
+   [\#2139](https://github.com/vector-im/vector-web/pull/2139)
+ * Added back the Directory listing button, with new tootlip
+   [\#2136](https://github.com/vector-im/vector-web/pull/2136)
+ * wmwragg/chat invite dialog fix
+   [\#2134](https://github.com/vector-im/vector-web/pull/2134)
+ * Wmwragg/one to one chat
+   [\#2110](https://github.com/vector-im/vector-web/pull/2110)
+ * Support toggling DM status of rooms
+   [\#2111](https://github.com/vector-im/vector-web/pull/2111)
+ * Formatting toolbar for RTE message composer.
+   [\#2082](https://github.com/vector-im/vector-web/pull/2082)
+ * jenkins.sh: install olm from jenkins artifacts
+   [\#2092](https://github.com/vector-im/vector-web/pull/2092)
+ * e2e device CSS
+   [\#2085](https://github.com/vector-im/vector-web/pull/2085)
+ * Bump to olm 1.1.0
+   [\#2069](https://github.com/vector-im/vector-web/pull/2069)
+ * Improve readability of the changelog dialog
+   [\#2056](https://github.com/vector-im/vector-web/pull/2056)
+ * Turn react consistency checks back on in develop builds
+   [\#2009](https://github.com/vector-im/vector-web/pull/2009)
+ * Wmwragg/direct chat sublist
+   [\#2028](https://github.com/vector-im/vector-web/pull/2028)
+
+Changes in [0.7.5-r3](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r3) (2016-09-02)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r2...v0.7.5-r3)
+
+ * Bump to matrix-react-sdk 0.6.5-r3 in order to fix bug #2020 (tightloop when flooded with join events)
+
+
+Changes in [0.7.5-r2](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r2) (2016-09-01)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r1...v0.7.5-r2)
+
+ * Bump to matrix-react-sdk 0.6.5-r1 in order to fix guest access
+
+Changes in [0.7.5-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r1) (2016-08-28)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5...v0.7.5-r1)
+
+ * Correctly pin deps :(
+
 Changes in [0.7.5](https://github.com/vector-im/vector-web/releases/tag/v0.7.5) (2016-08-28)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4-r1...v0.7.5)

README.md

@@ -72,7 +72,32 @@ You can configure the app by copying `vector/config.sample.json` to
    addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html
    for more details.  Currently the only public matrix identity servers are https://matrix.org
    and https://vector.im.  In future identity servers will be decentralised.
-
+1. `roomDirectory`: config for the public room directory. This section encodes behaviour
+   on the room directory screen for filtering the list by server / network type and joining
+   third party networks. This config section will disappear once APIs are available to
+   get this information for home servers. This section is optional.
+1. `roomDirectory.servers`: List of other Home Servers' directories to include in the drop
+   down list. Optional.
+1. `roomDirectory.serverConfig`: Config for each server in `roomDirectory.servers`. Optional.
+1. `roomDirectory.serverConfig.<server_name>.networks`: List of networks (named
+   in `roomDirectory.networks`) to include for this server. Optional.
+1. `roomDirectory.networks`: config for each network type. Optional.
+1. `roomDirectory.<network_type>.name`: Human-readable name for the network. Required.
+1. `roomDirectory.<network_type>.protocol`: Protocol as given by the server in
+   `/_matrix/client/unstable/thirdparty/protocols` response. Required to be able to join
+   this type of third party network.
+1. `roomDirectory.<network_type>.domain`: Domain as given by the server in
+   `/_matrix/client/unstable/thirdparty/protocols` response, if present. Required to be
+   able to join this type of third party network, if present in `thirdparty/protocols`.
+1. `roomDirectory.<network_type>.portalRoomPattern`: Regular expression matching aliases
+   for portal rooms to locations on this network. Required.
+1. `roomDirectory.<network_type>.icon`: URL to an icon to be displayed for this network. Required.
+1. `roomDirectory.<network_type>.example`: Textual example of a location on this network,
+   eg. '#channel' for an IRC network. Optional.
+1. `roomDirectory.<network_type>.nativePattern`: Regular expression that matches a
+   valid location on this network. This is used as a hint to the user to indicate
+   when a valid location has been entered so it's not necessary for this to be
+   exactly correct. Optional.
 
 Running as a Desktop app
 ========================
@@ -241,3 +266,4 @@ encrypted.
 
 Note that historical encrypted messages cannot currently be decoded - history
 is therefore lost when the page is reloaded.
+

deploy/redeploy.py

@@ -5,8 +5,8 @@ from urlparse import urljoin
 from flask import Flask, jsonify, request, abort
 app = Flask(__name__)
 
-arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink = (
-    None, None, None, None
+arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = (
+    None, None, None, None, None
 )
 
 def download_file(url):
@@ -122,6 +122,9 @@ def on_receive_jenkins_poke():
 
     create_symlink(source=os.path.join(untar_location, "vector"), linkname=arg_symlink)
 
+    if arg_config_location:
+        create_symlink(source=arg_config_location, linkname=os.path.join(untar_location, "vector", 'config.json'))
+
     return jsonify({})
 
 if __name__ == "__main__":
@@ -154,6 +157,12 @@ if __name__ == "__main__":
             to the /vector directory INSIDE the tarball."
         )
     )
+    parser.add_argument(
+        "--config", dest="config", help=(
+            "Write a symlink to config.json in the extracted tarball. \
+            To this location."
+        )
+    )
     args = parser.parse_args()
     if args.jenkins.endswith("/"): # important for urljoin
         arg_jenkins_url = args.jenkins
@@ -162,9 +171,10 @@ if __name__ == "__main__":
     arg_extract_path = args.extract
     arg_should_clean = args.clean
     arg_symlink = args.symlink
+    arg_config_location = args.config
     print(
-        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s" %
+        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
         (args.port, arg_extract_path,
-            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url)
+            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location)
     )
     app.run(host="0.0.0.0", port=args.port, debug=True)

jenkins.sh

@@ -13,6 +13,12 @@ npm install
 # apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked.
 npm install matrix-react-sdk matrix-js-sdk
 
+# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url
+# from our package.json (or even matrix-js-sdk's) in preference.
+tar -C olm -xz < olm/olm-*.tgz
+rm -r node_modules/olm
+cp -r olm/package node_modules/olm
+
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vector-web",
-  "version": "0.7.5",
+  "version": "0.8.3",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -17,7 +17,7 @@
     "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
-    "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
+    "build:bundle:dev": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
     "build:staticfiles": "cpx -v node_modules/olm/olm.js vector/",
     "build": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle",
     "build:dev": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle:dev",
@@ -39,16 +39,16 @@
     "babel-polyfill": "^6.5.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
-    "draft-js": "^0.7.0",
+    "draft-js": "^0.8.1",
     "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
     "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
-    "linkifyjs": "2.0.0-beta.4",
-    "matrix-js-sdk": "0.5.6",
-    "matrix-react-sdk": "0.6.5",
+    "linkifyjs": "^2.1.3",
+    "matrix-js-sdk": "0.6.3",
+    "matrix-react-sdk": "0.7.4",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.2.1",
@@ -90,6 +90,6 @@
     "webpack": "^1.12.14"
   },
   "optionalDependencies": {
-    "olm": "https://matrix.org/packages/npm/olm/olm-1.0.0.tgz"
+    "olm": "https://matrix.org/packages/npm/olm/olm-1.3.0.tgz"
   }
 }

src/component-index.js

@@ -38,6 +38,7 @@ module.exports.components['views.context_menus.MessageContextMenu'] = require('.
 module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
 module.exports.components['views.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
 module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
+module.exports.components['views.directory.NetworkDropdown'] = require('./components/views/directory/NetworkDropdown');
 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.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
@@ -48,8 +49,7 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen
 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.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile');
-module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView');
+module.exports.components['views.rooms.DNDRoomTile'] = require('./components/views/rooms/DNDRoomTile');
 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');

src/components/structures/BottomLeftMenu.js

@@ -17,48 +17,105 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
     displayName: 'BottomLeftMenu',
 
+    propTypes: {
+        collapsed: React.PropTypes.bool.isRequired,
+    },
+
+    getInitialState: function() {
+        return({
+            directoryHover : false,
+            roomsHover : false,
+            peopleHover : false,
+            settingsHover : false,
+        });
+    },
+
+    // Room events
+    onDirectoryClick: function() {
+        dis.dispatch({ action: 'view_room_directory' });
+    },
+
+    onDirectoryMouseEnter: function() {
+        this.setState({ directoryHover: true });
+    },
+
+    onDirectoryMouseLeave: function() {
+        this.setState({ directoryHover: false });
+    },
+
+    onRoomsClick: function() {
+        dis.dispatch({ action: 'view_create_room' });
+    },
+
+    onRoomsMouseEnter: function() {
+        this.setState({ roomsHover: true });
+    },
+
+    onRoomsMouseLeave: function() {
+        this.setState({ roomsHover: false });
+    },
+
+    // People events
+    onPeopleClick: function() {
+        dis.dispatch({ action: 'view_create_chat' });
+    },
+
+    onPeopleMouseEnter: function() {
+        this.setState({ peopleHover: true });
+    },
+
+    onPeopleMouseLeave: function() {
+        this.setState({ peopleHover: false });
+    },
+
+    // Settings events
     onSettingsClick: function() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.dispatch({ action: 'view_user_settings' });
     },
 
-    onRoomDirectoryClick: function() {
-        dis.dispatch({action: 'view_room_directory'});
+    onSettingsMouseEnter: function() {
+        this.setState({ settingsHover: true });
     },
 
-    onCreateRoomClick: function() {
-        dis.dispatch({action: 'view_create_room'});
+    onSettingsMouseLeave: function() {
+        this.setState({ settingsHover: false });
     },
 
-    getLabel: function(name) {
-        if (!this.props.collapsed) {
-            return <div className="mx_RoomTile_name">{name}</div>
-        }
-        else if (this.state.hover) {
+    // Get the label/tooltip to show
+    getLabel: function(label, show) {
+        if (show) {
             var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            return <RoomTooltip name={name}/>;
+            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
         }
     },
 
     render: function() {
-        var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
-                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25"/>
+                    <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
+                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
+                        { this.getLabel("Start chat", this.state.peopleHover) }
                     </div>
-                    <div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
+                    <div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
                         <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
+                        { this.getLabel("Room directory", this.state.directoryHover) }
                     </div>
-                    <div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
-                        <TintableSvg src="img/icons-settings.svg" width="25" height="25"/>
+                    <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
+                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
+                        { this.getLabel("Create new room", this.state.roomsHover) }
+                    </div>
+                    <div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
+                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
+                        { this.getLabel("Settings", this.state.settingsHover) }
                     </div>
                 </div>
             </div>

src/components/structures/CompatibilityPage.js

@@ -39,9 +39,9 @@ module.exports = React.createClass({
         return (
         <div className="mx_CompatibilityPage">
             <div className="mx_CompatibilityPage_box">
-                <p>Sorry, your browser is <b>not</b> able to run Vector.</p>
+                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
                 <p>
-                Vector uses many advanced browser features, some of which are not
+                Riot uses many advanced browser features, some of which are not
                 available or experimental in your current browser.
                 </p>
                 <p>

src/components/structures/LeftPanel.js

@@ -109,7 +109,7 @@ var LeftPanel = React.createClass({
             var CallView = sdk.getComponent('voip.CallView');
             callPreview = (
                 <CallView
-                    className="mx_LeftPanel_callView" onClick={this.onCallViewClick}
+                    className="mx_LeftPanel_callView" showVoice={true} onClick={this.onCallViewClick}
                     ConferenceHandler={VectorConferenceHandler} />
             );
         }

src/components/structures/RightPanel.js

@@ -22,13 +22,21 @@ var Matrix = require("matrix-js-sdk");
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
+var Modal = require('matrix-react-sdk/lib/Modal');
 
 module.exports = React.createClass({
     displayName: 'RightPanel',
 
+    propTypes: {
+        userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
+        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+        collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
+    },
+
     Phase : {
         MemberList: 'MemberList',
-        FileList: 'FileList',
+        FilePanel: 'FilePanel',
+        NotificationPanel: 'NotificationPanel',
         MemberInfo: 'MemberInfo',
     },
 
@@ -61,7 +69,7 @@ module.exports = React.createClass({
     },
 
     onMemberListButtonClick: function() {
-        if (this.props.collapsed) {
+        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
             this.setState({ phase: this.Phase.MemberList });
             dis.dispatch({
                 action: 'show_right_panel',
@@ -74,6 +82,51 @@ module.exports = React.createClass({
         }
     },
 
+    onFileListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
+            this.setState({ phase: this.Phase.FilePanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
+    onNotificationListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
+            this.setState({ phase: this.Phase.NotificationPanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
+    onInviteButtonClick: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            Modal.createDialog(NeedToRegisterDialog, {
+                title: "Please Register",
+                description: "Guest users can't invite users. Please register to invite."
+            });
+            return;
+        }
+
+        // call ChatInviteDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.roomId,
+        });
+    },
+
     onRoomStateMember: function(ev, state, member) {
         // redraw the badge on the membership list
         if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@@ -118,42 +171,70 @@ module.exports = React.createClass({
 
     render: function() {
         var MemberList = sdk.getComponent('rooms.MemberList');
+        var NotificationPanel = sdk.getComponent('structures.NotificationPanel');
+        var FilePanel = sdk.getComponent('structures.FilePanel');
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
         var buttonGroup;
+        var inviteGroup;
         var panel;
 
         var filesHighlight;
         var membersHighlight;
+        var notificationsHighlight;
         if (!this.props.collapsed) {
             if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                 membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
-            else if (this.state.phase == this.Phase.FileList) {
+            else if (this.state.phase == this.Phase.FilePanel) {
                 filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
             }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
         }
 
         var membersBadge;
         if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
             var cli = MatrixClientPeg.get();
             var room = cli.getRoom(this.props.roomId);
+            var user_is_in_room;
             if (room) {
-                membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
+                membersBadge = room.getJoinedMembers().length;
+                user_is_in_room = room.hasMembershipState(
+                    MatrixClientPeg.get().credentials.userId, 'join'
+                );
             }
+
+            if (user_is_in_room) {
+                inviteGroup =
+                    <div className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                        <div className="mx_RightPanel_icon" >
+                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                        </div>
+                        <div className="mx_RightPanel_message">Invite to this room</div>
+                    </div>;
+            }
+
         }
 
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            { membersBadge }
+                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
                             <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
-                            <TintableSvg src="img/files.svg" width="17" height="22"/>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
                             { filesHighlight }
                         </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                            { notificationsHighlight }
+                        </div>
                     </div>;
         }
 
@@ -165,6 +246,12 @@ module.exports = React.createClass({
                 var MemberInfo = sdk.getComponent('rooms.MemberInfo');
                 panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
             }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />
+            }
+            else if (this.state.phase == this.Phase.FilePanel) {
+                panel = <FilePanel roomId={this.props.roomId} />
+            }
         }
 
         if (!panel) {
@@ -183,6 +270,7 @@ module.exports = React.createClass({
                 </div>
                 { panel }
                 <div className="mx_RightPanel_footer">
+                    { inviteGroup }
                 </div>
             </aside>
         );

src/components/structures/RoomDirectory.js

@@ -29,21 +29,72 @@ var linkify = require('linkifyjs');
 var linkifyString = require('linkifyjs/string');
 var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
 var sanitizeHtml = require('sanitize-html');
+var q = require('q');
 
 linkifyMatrix(linkify);
 
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
+    propTypes: {
+        config: React.PropTypes.object,
+    },
+
+    getDefaultProps: function() {
+        return {
+            config: {
+                networks: [],
+            },
+        }
+    },
+
     getInitialState: function() {
         return {
             publicRooms: [],
-            roomAlias: '',
             loading: true,
+            network: null,
+            roomServer: null,
+            filterString: null,
         }
     },
 
     componentWillMount: function() {
+        // precompile Regexps
+        this.portalRoomPatterns = {};
+        this.nativePatterns = {};
+        if (this.props.config.networks) {
+            for (const network of Object.keys(this.props.config.networks)) {
+                const network_info = this.props.config.networks[network];
+                if (network_info.portalRoomPattern) {
+                    this.portalRoomPatterns[network] = new RegExp(network_info.portalRoomPattern);
+                }
+                if (network_info.nativePattern) {
+                    this.nativePatterns[network] = new RegExp(network_info.nativePattern);
+                }
+            }
+        }
+
+        this.nextBatch = null;
+        this.filterTimeout = null;
+        this.scrollPanel = null;
+        this.protocols = null;
+
+        MatrixClientPeg.get().getThirdpartyProtocols().done((response) => {
+            this.protocols = response;
+        }, (err) => {
+            if (MatrixClientPeg.get().isGuest()) {
+                // Guests currently aren't allowed to use this API, so
+                // ignore this as otherwise this error is literally the
+                // thing you see when loading the client!
+                return;
+            }
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to get protocol list from Home Server",
+                description: "The Home Server may be too old to support third party networks",
+            });
+        });
+
         // dis.dispatch({
         //     action: 'ui_opacity',
         //     sideOpacity: 0.3,
@@ -51,10 +102,6 @@ module.exports = React.createClass({
         // });
     },
 
-    componentDidMount: function() {
-        this.getPublicRooms();
-    },
-
     componentWillUnmount: function() {
         // dis.dispatch({
         //     action: 'ui_opacity',
@@ -63,24 +110,65 @@ module.exports = React.createClass({
         // });
     },
 
-    getPublicRooms: function() {
-        var self = this;
-        MatrixClientPeg.get().publicRooms(function (err, data) {
-            if (err) {
-                self.setState({ loading: false });
-                console.error("Failed to get publicRooms: %s", JSON.stringify(err));
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to get public room list",
-                    description: err.message
-                });
+    refreshRoomList: function() {
+        this.nextBatch = null;
+        this.setState({
+            publicRooms: [],
+            loading: true,
+        });
+        this.getMoreRooms().done();
+    },
+
+    getMoreRooms: function() {
+        if (!MatrixClientPeg.get()) return q();
+
+        const my_filter_string = this.state.filterString;
+        const my_server = this.state.roomServer;
+        // remember the next batch token when we sent the request
+        // too. If it's changed, appending to the list will corrupt it.
+        const my_next_batch = this.nextBatch;
+        const opts = {limit: 20};
+        if (my_server != MatrixClientPeg.getHomeServerName()) {
+            opts.server = my_server;
+        }
+        if (this.nextBatch) opts.since = this.nextBatch;
+        if (my_filter_string) opts.filter = { generic_search_term: my_filter_string } ;
+        return MatrixClientPeg.get().publicRooms(opts).then((data) => {
+            if (
+                my_filter_string != this.state.filterString ||
+                my_server != this.state.roomServer ||
+                my_next_batch != this.nextBatch)
+            {
+                // if the filter or server has changed since this request was sent,
+                // throw away the result (don't even clear the busy flag
+                // since we must still have a request in flight)
+                return;
             }
-            else {
-                self.setState({
-                    publicRooms: data.chunk,
-                    loading: false,
-                });
+
+            this.nextBatch = data.next_batch;
+            this.setState((s) => {
+                s.publicRooms.push(...data.chunk);
+                s.loading = false;
+                return s;
+            });
+            return Boolean(data.next_batch);
+        }, (err) => {
+            if (
+                my_filter_string != this.state.filterString ||
+                my_server != this.state.roomServer ||
+                my_next_batch != this.nextBatch)
+            {
+                // as above: we don't care about errors for old
+                // requests either
+                return;
             }
+            this.setState({ loading: false });
+            console.error("Failed to get publicRooms: %s", JSON.stringify(err));
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to get public room list",
+                description: err.message
+            });
         });
     },
 
@@ -121,10 +209,10 @@ module.exports = React.createClass({
                     return MatrixClientPeg.get().deleteAlias(alias);
                 }).done(() => {
                     modal.close();
-                    this.getPublicRooms();
+                    this.refreshRoomList();
                 }, function(err) {
                     modal.close();
-                    this.getPublicRooms();
+                    this.refreshRoomList();
                     Modal.createDialog(ErrorDialog, {
                         title: "Failed to "+step,
                         description: err.toString()
@@ -143,6 +231,98 @@ module.exports = React.createClass({
         }
     },
 
+    onOptionChange: function(server, network) {
+        // clear next batch so we don't try to load more rooms
+        this.nextBatch = null;
+        this.setState({
+            // Clear the public rooms out here otherwise we needlessly
+            // spend time filtering lots of rooms when we're about to
+            // to clear the list anyway.
+            publicRooms: [],
+            roomServer: server,
+            network: network,
+        }, this.refreshRoomList);
+        // We also refresh the room list each time even though this
+        // filtering is client-side. It hopefully won't be client side
+        // for very long, and we may have fetched a thousand rooms to
+        // find the five gitter ones, at which point we do not want
+        // to render all those rooms when switching back to 'all networks'.
+        // Easiest to just blow away the state & re-fetch.
+    },
+
+    onFillRequest: function(backwards) {
+        if (backwards || !this.nextBatch) return q(false);
+
+        return this.getMoreRooms();
+    },
+
+    onFilterChange: function(alias) {
+        this.setState({
+            filterString: alias || null,
+        });
+
+        // don't send the request for a little bit,
+        // no point hammering the server with a
+        // request for every keystroke, let the
+        // user finish typing.
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+        this.filterTimeout = setTimeout(() => {
+            this.filterTimeout = null;
+            this.refreshRoomList();
+        }, 300);
+    },
+
+    onFilterClear: function() {
+        // update immediately
+        this.setState({
+            filterString: null,
+        }, this.refreshRoomList);
+
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+    },
+
+    onJoinClick: function(alias) {
+        // If we're on the 'Matrix' network (or all networks),
+        // just show that rooms alias
+        if (this.state.network == null || this.state.network == '_matrix') {
+            this.showRoomAlias(alias);
+        } else {
+            // This is a 3rd party protocol. Let's see if we
+            // can join it
+            const fields = this._getFieldsForThirdPartyLocation(alias, this.state.network);
+            if (!fields) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Unable to join network",
+                    description: "Riot does not know how to join a room on this network",
+                });
+                return;
+            }
+            const protocol = this._protocolForThirdPartyNetwork(this.state.network);
+            MatrixClientPeg.get().getThirdpartyLocation(protocol, fields).done((resp) => {
+                if (resp.length > 0 && resp[0].alias) {
+                    this.showRoomAlias(resp[0].alias);
+                } else {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Room not found",
+                        description: "Couldn't find a matching Matrix room",
+                    });
+                }
+            }, (e) => {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Fetching third party location failed",
+                    description: "Unable to look up room ID from server",
+                });
+            });
+        }
+    },
+
     showRoomAlias: function(alias) {
         this.showRoom(null, alias);
     },
@@ -187,19 +367,17 @@ module.exports = React.createClass({
         dis.dispatch(payload);
     },
 
-    getRows: function(filter) {
+    getRows: function() {
         var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
 
         if (!this.state.publicRooms) return [];
 
-        var rooms = this.state.publicRooms.filter(function(a) {
-            // FIXME: if incrementally typing, keep narrowing down the search set
-            // incrementally rather than starting over each time.
-            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
-                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
-                      a.num_joined_members > 0);
-        }).sort(function(a,b) {
-            return a.num_joined_members - b.num_joined_members;
+        var rooms = this.state.publicRooms.filter((a) => {
+            if (this.state.network) {
+                if (!this._isRoomInNetwork(a, this.state.roomServer, this.state.network)) return false;
+            }
+
+            return true;
         });
         var rows = [];
         var self = this;
@@ -228,7 +406,7 @@ module.exports = React.createClass({
             var topic = rooms[i].topic || '';
             topic = linkifyString(sanitizeHtml(topic));
 
-            rows.unshift(
+            rows.push(
                 <tr key={ rooms[i].room_id }
                     onClick={self.onRoomClicked.bind(self, rooms[i])}
                     // cancel onMouseDown otherwise shift-clicking highlights text
@@ -258,37 +436,188 @@ module.exports = React.createClass({
         return rows;
     },
 
-    onKeyUp: function(ev) {
-        this.forceUpdate();
-        this.setState({ roomAlias : this.refs.roomAlias.value })
-        if (ev.key == "Enter") {
-            this.showRoomAlias(this.refs.roomAlias.value);
+    collectScrollPanel: function(element) {
+        this.scrollPanel = element;
+    },
+
+    /**
+     * Terrible temporary function that guess what network a public room
+     * entry is in, until synapse is able to tell us
+     */
+    _isRoomInNetwork: function(room, server, network) {
+        // We carve rooms into two categories here. 'portal' rooms are
+        // rooms created by a user joining a bridge 'portal' alias to
+        // participate in that room or a foreign network. A room is a
+        // portal room if it has exactly one alias and that alias matches
+        // a pattern defined in the config. Its network is the key
+        // of the pattern that it matches.
+        // All other rooms are considered 'native matrix' rooms, and
+        // go into the special '_matrix' network.
+
+        let roomNetwork = '_matrix';
+        if (room.aliases && room.aliases.length == 1) {
+            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
+                for (const n of this.props.config.serverConfig[server].networks) {
+                    const pat = this.portalRoomPatterns[n];
+                    if (pat && pat.test(room.aliases[0])) {
+                        roomNetwork = n;
+                    }
+                }
+            }
+        }
+        return roomNetwork == network;
+    },
+
+    _stringLooksLikeId: function(s, network) {
+        let pat = /^#[^\s]+:[^\s]/;
+        if (
+            network && network != '_matrix' &&
+            this.nativePatterns[network]
+        ) {
+            pat = this.nativePatterns[network];
+        }
+
+        return pat.test(s);
+    },
+
+    _protocolForThirdPartyNetwork: function(network) {
+        if (
+            this.props.config.networks &&
+            this.props.config.networks[network] &&
+            this.props.config.networks[network].protocol
+        ) {
+            return this.props.config.networks[network].protocol;
         }
     },
 
-    render: function() {
-        if (this.state.loading) {
-            var Loader = sdk.getComponent("elements.Spinner");
-            return (
-                <div className="mx_RoomDirectory">
-                    <Loader />
-                </div>
-            );
+    _getFieldsForThirdPartyLocation: function(user_input, network) {
+        if (!this.props.config.networks || !this.props.config.networks[network]) return null;
+
+        const network_info = this.props.config.networks[network];
+        if (!network_info.protocol) return null;
+
+        if (!this.protocols) return null;
+
+        let matched_instance;
+        // Try to find which instance in the 'protocols' response
+        // matches this network. We look for a matching protocol
+        // and the existence of a 'domain' field and if present,
+        // its value.
+        if (
+            this.protocols[network_info.protocol] &&
+            this.protocols[network_info.protocol].instances &&
+            this.protocols[network_info.protocol].instances.length == 1
+        ) {
+            const the_instance = this.protocols[network_info.protocol].instances[0];
+            // If there's only one instance in this protocol, use it
+            // as long as it has no domain (which we assume to mean it's
+            // there is only one possible instance).
+            if (
+                (
+                    the_instance.fields.domain === undefined &&
+                    network_info.domain === undefined
+                ) ||
+                (
+                    the_instance.fields.domain !== undefined &&
+                    the_instance.fields.domain == network_info.domain
+                )
+            ) {
+                matched_instance = the_instance;
+            }
+        } else if (network_info.domain) {
+            // otherwise, we look for one with a matching domain.
+            for (const this_instance of this.protocols[network_info.protocol].instances) {
+                if (this_instance.fields.domain == network_info.domain) {
+                    matched_instance = this_instance;
+                }
+            }
         }
 
-        var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        if (matched_instance === undefined) return null;
+
+        // now make an object with the fields specified by that protocol. We
+        // require that the values of all but the last field come from the
+        // instance. The last is the user input.
+        const required_fields = this.protocols[network_info.protocol].location_fields;
+        const fields = {};
+        for (let i = 0; i < required_fields.length - 1; ++i) {
+            const this_field = required_fields[i];
+            if (matched_instance.fields[this_field] === undefined) return null;
+            fields[this_field] = matched_instance.fields[this_field];
+        }
+        fields[required_fields[required_fields.length - 1]] = user_input;
+        return fields;
+    },
+
+    render: function() {
+        let content;
+        if (this.state.loading) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            content = <div className="mx_RoomDirectory">
+                <Loader />
+            </div>;
+        } else {
+            const rows = this.getRows();
+            // we still show the scrollpanel, at least for now, because
+            // otherwise we don't fetch more because we don't get a fill
+            // request from the scrollpanel because there isn't one
+            let scrollpanel_content;
+            if (rows.length == 0) {
+                scrollpanel_content = <i>No rooms to show</i>;
+            } else {
+                scrollpanel_content = <table ref="directory_table" className="mx_RoomDirectory_table">
+                    <tbody>
+                        { this.getRows() }
+                    </tbody>
+                </table>;
+            }
+            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+            content = <ScrollPanel ref={this.collectScrollPanel}
+                className="mx_RoomDirectory_tableWrapper"
+                onFillRequest={ this.onFillRequest }
+                stickyBottom={false}
+                startAtBottom={false}
+                onResize={function(){}}
+            >
+                { scrollpanel_content }
+            </ScrollPanel>;
+        }
+
+        let placeholder = 'Search for a room';
+        if (this.state.network === null || this.state.network === '_matrix') {
+            placeholder = '#example:' + this.state.roomServer;
+        } else if (
+            this.props.config.networks &&
+            this.props.config.networks[this.state.network] &&
+            this.props.config.networks[this.state.network].example &&
+            this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network)
+        ) {
+            placeholder = this.props.config.networks[this.state.network].example;
+        }
+
+        let showJoinButton = this._stringLooksLikeId(this.state.filterString, this.state.network);
+        if (this.state.network && this.state.network != '_matrix') {
+            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network) === null) {
+                showJoinButton = false;
+            }
+        }
+
+        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
+        const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
         return (
             <div className="mx_RoomDirectory">
                 <SimpleRoomHeader title="Directory" />
                 <div className="mx_RoomDirectory_list">
-                    <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
-                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
-                        <table ref="directory_table" className="mx_RoomDirectory_table">
-                            <tbody>
-                                { this.getRows(this.state.roomAlias) }
-                            </tbody>
-                        </table>
-                    </GeminiScrollbar>
+                    <div className="mx_RoomDirectory_listheader">
+                        <DirectorySearchBox
+                            className="mx_RoomDirectory_searchbox"
+                            onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
+                            placeholder={placeholder} showJoinButton={showJoinButton}
+                        />
+                        <NetworkDropdown config={this.props.config} onOptionChange={this.onOptionChange} />
+                    </div>
+                    {content}
                 </div>
             </div>
         );

src/components/structures/RoomSubList.js

@@ -17,15 +17,21 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+var ReactDOM = require('react-dom');
+var classNames = require('classnames');
 var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var Unread = require('matrix-react-sdk/lib/Unread');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');
 
 // turn this on for drop & drag console debugging galore
 var debug = false;
 
+const TRUNCATE_AT = 10;
+
 var roomListTarget = {
     canDrop: function() {
         return true;
@@ -80,7 +86,7 @@ var RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
-            truncateAt: 20,
+            truncateAt: TRUNCATE_AT,
             sortedList: [],
         };
     },
@@ -109,17 +115,34 @@ var RoomSubList = React.createClass({
         });
     },
 
-    onClick: function(ev) {
-        var isHidden = !this.state.hidden;
-        this.setState({ hidden : isHidden });
-
-        if (isHidden) {
-            // as good a way as any to reset the truncate state
-            this.setState({ truncateAt : 20 });
-            this.props.onShowMoreRooms();
+    // The header is collapsable if it is hidden or not stuck
+    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
+    isCollapsableOnClick: function() {
+        var stuck = this.refs.header.dataset.stuck;
+        if (this.state.hidden || stuck === undefined || stuck === "none") {
+            return true;
+        } else {
+            return false;
         }
+    },
 
-        this.props.onHeaderClick(isHidden);
+    onClick: function(ev) {
+        if (this.isCollapsableOnClick()) {
+            // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
+            var isHidden = !this.state.hidden;
+            this.setState({ hidden : isHidden });
+
+            if (isHidden) {
+                // as good a way as any to reset the truncate state
+                this.setState({ truncateAt : TRUNCATE_AT });
+            }
+
+            this.props.onShowMoreRooms();
+            this.props.onHeaderClick(isHidden);
+        } else {
+            // The header is stuck, so the click is to be interpreted as a scroll to the header
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
+        }
     },
 
     tsOfNewestEvent: function(room) {
@@ -186,6 +209,52 @@ var RoomSubList = React.createClass({
         this.setState({ sortedList: list.sort(comparator) });
     },
 
+    _shouldShowNotifBadge: function(roomNotifState) {
+        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
+        return showBadgeInStates.indexOf(roomNotifState) > -1;
+    },
+
+    _shouldShowMentionBadge: function(roomNotifState) {
+        return roomNotifState != RoomNotifs.MUTE;
+    },
+
+    /**
+     * Total up all the notification counts from the rooms
+     *
+     * @param {Number} If supplied will only total notifications for rooms outside the truncation number
+     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
+     */
+    roomNotificationCount: function(truncateAt) {
+        var self = this;
+
+        return this.props.list.reduce(function(result, room, index) {
+            if (truncateAt === undefined || index >= truncateAt) {
+                var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+                var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
+                var notificationCount = room.getUnreadNotificationCount();
+
+                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+                const badges = notifBadges || mentionBadges;
+
+                if (badges) {
+                    result[0] += notificationCount;
+                    if (highlight) {
+                        result[1] = true;
+                    }
+                }
+            }
+            return result;
+        }, [0, false]);
+    },
+
+    _updateSubListCount: function() {
+        // Force an update by setting the state to the current state
+        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
+        // method is honoured
+        this.setState(this.state);
+    },
+
     moveRoomTile: function(room, atIndex) {
         if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
         //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@@ -279,12 +348,12 @@ var RoomSubList = React.createClass({
 
     makeRoomTiles: function() {
         var self = this;
-        var RoomTile = sdk.getComponent("rooms.RoomTile");
+        var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
         return this.state.sortedList.map(function(room) {
             var selected = room.roomId == self.props.selectedRoom;
             // XXX: is it evil to pass in self as a prop to RoomTile?
             return (
-                <RoomTile
+                <DNDRoomTile
                     room={ room }
                     roomSubList={ self }
                     key={ room.roomId }
@@ -293,32 +362,95 @@ 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 } />
+                    refreshSubList={ self._updateSubListCount }
+                    incomingCall={ null } />
             );
         });
     },
 
     _getHeaderJsx: function() {
         var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        var subListNotifications = this.roomNotificationCount();
+        var subListNotifCount = subListNotifications[0];
+        var subListNotifHighlight = subListNotifications[1];
+
+        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
+
+        var chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronRight': this.state.hidden,
+            'mx_RoomSubList_chevronDown': !this.state.hidden,
+        });
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+        });
+
+        var badge;
+        if (subListNotifCount > 0) {
+            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
+        }
+
+        // When collapsed, allow a long hover on the header to show user
+        // the full tag name and room count
+        var title;
+        if (this.props.collapsed) {
+            title = this.props.label;
+            if (roomCount !== '') {
+                title += " [" + roomCount + "]";
+            }
+        }
+
+        var incomingCall;
+        if (this.props.incomingCall) {
+            var self = this;
+            // Check if the incoming call is for this section
+            var incomingCallRoom = this.state.sortedList.filter(function(room) {
+                return self.props.incomingCall.roomId === room.roomId;
+            });
+
+            if (incomingCallRoom.length === 1) {
+                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+                incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
+            }
+        }
+
         return (
-            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
-                { this.props.collapsed ? '' : this.props.label }
-                <img className="mx_RoomSubList_chevron"
-                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
-                    width="10" height="10" />
-            </h2>
+            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
+                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
+                    <div className={chevronClasses}></div>
+                    { badge }
+                    { incomingCall }
+                </div>
+            </div>
         );
     },
 
     _createOverflowTile: function(overflowCount, totalCount) {
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        // XXX: this is duplicated from RoomTile - factor it out
+        var content = <div className="mx_RoomSubList_chevronDown"></div>;
+
+        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        var overflowNotifCount = overflowNotifications[0];
+        var overflowNotifHighlight = overflowNotifications[1];
+        if (overflowNotifCount && !this.props.collapsed) {
+            content = FormattingUtils.formatCount(overflowNotifCount);
+        }
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_moreBadge': true,
+            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
+            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
+        });
+
         return (
-            <div className="mx_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomTile_avatar">
-                    <BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
-                </div>
-                <div className="mx_RoomTile_name">and { overflowCount } others...</div>
+            <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+                <div className="mx_RoomSubList_line"></div>
+                <div className="mx_RoomSubList_more">more</div>
+            <div className={ badgeClasses }>{ content }</div>
             </div>
         );
     },
@@ -327,7 +459,9 @@ var RoomSubList = React.createClass({
         this.setState({
             truncateAt: -1
         });
+
         this.props.onShowMoreRooms();
+        this.props.onHeaderClick(false);
     },
 
     // Fix any undefined order elements of a room in a manual ordered list

src/components/views/context_menus/MessageContextMenu.js

@@ -20,9 +20,10 @@ var React = require('react');
 
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var dis = require('matrix-react-sdk/lib/dispatcher');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
 var Modal = require('matrix-react-sdk/lib/Modal');
 var Resend = require("matrix-react-sdk/lib/Resend");
+import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -84,6 +85,14 @@ module.exports = React.createClass({
         if (this.props.onFinished) this.props.onFinished();
     },
 
+    onQuoteClick: function () {
+        console.log(this.props.mxEvent);
+        dis.dispatch({
+            action: 'quote',
+            event: this.props.mxEvent,
+        });
+    },
+
     render: function() {
         var eventStatus = this.props.mxEvent.status;
         var resendButton;
@@ -141,6 +150,12 @@ module.exports = React.createClass({
             </div>
         );
 
+        const quoteButton = (
+            <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+                Quote
+            </div>
+        );
+
         return (
             <div>
                 {resendButton}
@@ -149,6 +164,7 @@ module.exports = React.createClass({
                 {viewSourceButton}
                 {unhidePreviewButton}
                 {permalinkButton}
+                {UserSettingsStore.isFeatureEnabled('rich_text_editor') ? quoteButton : null}
             </div>
         );
     }

src/components/views/context_menus/RoomTagContextMenu.js

@@ -21,6 +21,8 @@ var React = require('react');
 var classNames = require('classnames');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var dis = require('matrix-react-sdk/lib/dispatcher');
+var DMRoomMap = require('matrix-react-sdk/lib/utils/DMRoomMap');
+var Rooms = require('matrix-react-sdk/lib/Rooms');
 
 module.exports = React.createClass({
     displayName: 'RoomTagContextMenu',
@@ -32,9 +34,11 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
+        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
         return {
             isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
             isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
         };
     },
 
@@ -113,6 +117,43 @@ module.exports = React.createClass({
         }
     },
 
+    _onClickDM: function() {
+        const newIsDirectMessage = !this.state.isDirectMessage;
+        this.setState({
+            isDirectMessage: newIsDirectMessage,
+        });
+
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        let newTarget;
+        if (newIsDirectMessage) {
+            const guessedTarget = Rooms.guessDMRoomTarget(
+                this.props.room,
+                this.props.room.getMember(MatrixClientPeg.get().credentials.userId),
+            );
+            newTarget = guessedTarget.userId;
+        } else {
+            newTarget = null;
+        }
+
+        // give some time for the user to see the icon change first, since
+        // this will hide the context menu once it completes
+        q.delay(500).done(() => {
+            return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => {
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            }, (err) => {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failed to set Direct Message status of room",
+                    description: err.toString()
+                });
+            });
+        });
+    },
+
     _onClickLeave: function() {
         // Leave room
         dis.dispatch({
@@ -146,27 +187,33 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var myUserId = MatrixClientPeg.get().credentials.userId;
-        var myMember = this.props.room.getMember(myUserId);
+        const myUserId = MatrixClientPeg.get().credentials.userId;
+        const myMember = this.props.room.getMember(myUserId);
 
-        var favouriteClasses = classNames({
+        const favouriteClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
-        var lowPriorityClasses = classNames({
+        const lowPriorityClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
-        var leaveClasses = classNames({
+        const leaveClasses = classNames({
             'mx_RoomTagContextMenu_field': true,
             'mx_RoomTagContextMenu_fieldSet': false,
             'mx_RoomTagContextMenu_fieldDisabled': false,
         });
 
+        const dmClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
         if (myMember && myMember.membership === "leave") {
             return (
                 <div>
@@ -190,6 +237,11 @@ module.exports = React.createClass({
                     <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
                     Low Priority
                 </div>
+                <div className={ dmClasses } onClick={this._onClickDM} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    Direct Chat
+                </div>
                 <hr className="mx_RoomTagContextMenu_separator" />
                 <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
                     <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />

src/components/views/dialogs/ChangelogDialog.js

@@ -41,6 +41,16 @@ export default class ChangelogDialog extends React.Component {
         }
     }
 
+    _elementsForCommit(commit) {
+        return (
+            <li key={commit.sha} className="mx_ChangelogDialog_li">
+                <a href={commit.html_url} target="_blank" ref="noopener">
+                    {commit.commit.message}
+                </a>
+            </li>
+        );
+    }
+
     render() {
         const Spinner = sdk.getComponent('views.elements.Spinner');
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
@@ -50,9 +60,9 @@ export default class ChangelogDialog extends React.Component {
             return (
                 <div key={repo}>
                     <h2>{repo}</h2>
-                    {this.state[repo].map(commit =>
-                        <div key={commit.commit.url}><a href={commit.commit.url}>{commit.commit.message}</a></div>
-                    )}
+                    <ul>
+                    {this.state[repo].map(this._elementsForCommit)}
+                    </ul>
                 </div>
             )
         });

src/components/views/directory/NetworkDropdown.js

@@ -0,0 +1,244 @@
+/*
+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.
+*/
+
+import React from 'react';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+
+export default class NetworkDropdown extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.dropdownRootElement = null;
+        this.ignoreEvent = null;
+
+        this.onInputClick = this.onInputClick.bind(this);
+        this.onRootClick = this.onRootClick.bind(this);
+        this.onDocumentClick = this.onDocumentClick.bind(this);
+        this.onMenuOptionClick = this.onMenuOptionClick.bind(this);
+        this.onInputKeyUp = this.onInputKeyUp.bind(this);
+        this.collectRoot = this.collectRoot.bind(this);
+        this.collectInputTextBox = this.collectInputTextBox.bind(this);
+
+        this.inputTextBox = null;
+
+        const server = MatrixClientPeg.getHomeServerName();
+        let defaultNetwork = null;
+        if (
+            this.props.config.serverConfig &&
+            this.props.config.serverConfig[server] &&
+            this.props.config.serverConfig[server].networks &&
+            this.props.config.serverConfig[server].networks.indexOf('_matrix') > -1
+        ) {
+            defaultNetwork = '_matrix';
+        }
+
+        this.state = {
+            expanded: false,
+            selectedServer: server,
+            selectedNetwork: defaultNetwork,
+        };
+    }
+
+    componentWillMount() {
+        // Listen for all clicks on the document so we can close the
+        // menu when the user clicks somewhere else
+        document.addEventListener('click', this.onDocumentClick, false);
+
+        // fire this now so the defaults can be set up
+        this.props.onOptionChange(this.state.selectedServer, this.state.selectedNetwork);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.onDocumentClick, false);
+    }
+
+    componentDidUpdate() {
+        if (this.state.expanded && this.inputTextBox) {
+            this.inputTextBox.focus();
+        }
+    }
+
+    onDocumentClick(ev) {
+        // Close the dropdown if the user clicks anywhere that isn't
+        // within our root element
+        if (ev !== this.ignoreEvent) {
+            this.setState({
+                expanded: false,
+            });
+        }
+    }
+
+    onRootClick(ev) {
+        // This captures any clicks that happen within our elements,
+        // such that we can then ignore them when they're seen by the
+        // click listener on the document handler, ie. not close the
+        // dropdown immediately after opening it.
+        // NB. We can't just stopPropagation() because then the event
+        // doesn't reach the React onClick().
+        this.ignoreEvent = ev;
+    }
+
+    onInputClick(ev) {
+        this.setState({
+            expanded: !this.state.expanded,
+        });
+        ev.preventDefault();
+    }
+
+    onMenuOptionClick(server, network, ev) {
+        this.setState({
+            expanded: false,
+            selectedServer: server,
+            selectedNetwork: network,
+        });
+        this.props.onOptionChange(server, network);
+    }
+
+    onInputKeyUp(e) {
+        if (e.key == 'Enter') {
+            this.setState({
+                expanded: false,
+                selectedServer: e.target.value,
+                selectedNetwork: null,
+            });
+            this.props.onOptionChange(e.target.value, null);
+        }
+    }
+
+    collectRoot(e) {
+        if (this.dropdownRootElement) {
+            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
+        }
+        if (e) {
+            e.addEventListener('click', this.onRootClick, false);
+        }
+        this.dropdownRootElement = e;
+    }
+
+    collectInputTextBox(e) {
+        this.inputTextBox = e;
+    }
+
+    _getMenuOptions() {
+        const options = [];
+
+        let servers = [];
+        if (this.props.config.servers) {
+            servers = servers.concat(this.props.config.servers);
+        }
+
+        if (servers.indexOf(MatrixClientPeg.getHomeServerName()) == -1) {
+            servers.unshift(MatrixClientPeg.getHomeServerName());
+        }
+
+        for (const server of servers) {
+            options.push(this._makeMenuOption(server, null));
+            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
+                for (const network of this.props.config.serverConfig[server].networks) {
+                    options.push(this._makeMenuOption(server, network));
+                }
+            }
+        }
+
+        return options;
+    }
+
+    _makeMenuOption(server, network, wire_onclick) {
+        if (wire_onclick === undefined) wire_onclick = true;
+        let icon;
+        let name;
+        let span_class;
+
+        if (network === null) {
+            name = server;
+            span_class = 'mx_NetworkDropdown_menu_all';
+        } else if (network == '_matrix') {
+            name = 'Matrix';
+            icon = <img src="img/network-matrix.svg" width="16" height="16" />;
+            span_class = 'mx_NetworkDropdown_menu_network';
+        } else {
+            if (this.props.config.networks[network] === undefined) {
+                throw new Error(network + ' network missing from config');
+            }
+            if (this.props.config.networks[network].name) {
+                name = this.props.config.networks[network].name;
+            } else {
+                name = network;
+            }
+            if (this.props.config.networks[network].icon) {
+                // omit height here so if people define a non-square logo in the config, it
+                // will keep the aspect when it scales
+                icon = <img src={this.props.config.networks[network].icon} width="16" />;
+            } else {
+                icon = <img src={iconPath} width="16" height="16" />;
+            }
+
+            span_class = 'mx_NetworkDropdown_menu_network';
+        }
+
+        const click_handler = wire_onclick ? this.onMenuOptionClick.bind(this, server, network) : null;
+
+        let key = server;
+        if (network !== null) {
+            key += '_' + network;
+        }
+
+        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
+            {icon}
+            <span className={span_class}>{name}</span>
+        </div>;
+    }
+
+    render() {
+        let current_value;
+
+        let menu;
+        if (this.state.expanded) {
+            const menu_options = this._getMenuOptions();
+            menu = <div className="mx_NetworkDropdown_menu">
+                {menu_options}
+            </div>;
+            current_value = <input type="text" className="mx_NetworkDropdown_networkoption"
+                ref={this.collectInputTextBox} onKeyUp={this.onInputKeyUp}
+                placeholder="matrix.org" // 'matrix.org' as an example of an HS name
+            />
+        } else {
+            current_value = this._makeMenuOption(
+                this.state.selectedServer, this.state.selectedNetwork, false
+            );
+        }
+
+        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
+            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
+                {current_value}
+                <span className="mx_NetworkDropdown_arrow"></span>
+                {menu}
+            </div>
+        </div>;
+    }
+}
+
+NetworkDropdown.propTypes = {
+    onOptionChange: React.PropTypes.func.isRequired,
+    config: React.PropTypes.object,
+};
+
+NetworkDropdown.defaultProps = {
+    config: {
+        networks: [],
+    }
+};
+

src/components/views/globals/GuestWarningBar.js

@@ -34,7 +34,7 @@ module.exports = React.createClass({
             <div className="mx_GuestWarningBar">
                 <img className="mx_GuestWarningBar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
                 <div>
-                    You are using Vector as a guest. <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>log in</a> to access more rooms and features.
+                    You are Rioting as a guest. <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>sign in</a> to access more rooms and features.
                 </div>
             </div>
         );

src/components/views/globals/NewVersionBar.js

@@ -20,6 +20,15 @@ var React = require('react');
 var sdk = require('matrix-react-sdk');
 import Modal from 'matrix-react-sdk/lib/Modal';
 
+/**
+ * Check a version string is compatible with the Changelog
+ * dialog
+ */
+function checkVersion(ver) {
+    const parts = ver.split('-');
+    return parts[0] == 'vector' && parts[2] == 'react' && parts[4] == 'js';
+}
+
 export default function NewVersionBar(props) {
     const onChangelogClicked = () => {
         const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
@@ -35,13 +44,17 @@ export default function NewVersionBar(props) {
         });
     };
 
+    let changelog_button;
+    if (checkVersion(props.version) && checkVersion(props.newVersion)) {
+        changelog_button = <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>;
+    }
     return (
         <div className="mx_MatrixToolbar">
             <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
             <div className="mx_MatrixToolbar_content">
-                A new version of Vector is available. Refresh your browser.
+                A new version of Riot is available. Refresh your browser.
             </div>
-            <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>
+            {changelog_button}
         </div>
     );
 }
@@ -49,4 +62,4 @@ export default function NewVersionBar(props) {
 NewVersionBar.propTypes = {
     version: React.PropTypes.string.isRequired,
     newVersion: React.PropTypes.string.isRequired,
-};
+};

src/components/views/login/VectorCustomServerDialog.js

@@ -30,10 +30,10 @@ module.exports = React.createClass({
                 </div>
                 <div className="mx_Dialog_content">
                     <span>
-                        You can use the custom server options to log into other Matrix
+                        You can use the custom server options to sign into other Matrix
                         servers by specifying a different Home server URL.
                         <br/>
-                        This allows you to use Vector with an existing Matrix account on
+                        This allows you to use Riot with an existing Matrix account on
                         a different home server.
                         <br/>
                         <br/>

src/components/views/login/VectorLoginFooter.js

@@ -27,8 +27,8 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_links">
-                <a href="https://medium.com/@Vector">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
-                <a href="https://twitter.com/@VectorCo">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://twitter.com/@RiotChat">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
                 <a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
                 <a href="https://matrix.org">powered by Matrix</a>
             </div>

src/components/views/login/VectorLoginHeader.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_logo">
-                <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                <img src="img/logo.png" width="195" height="195" alt="Riot"/>
             </div>
         );
     }

src/components/views/rooms/BottomLeftMenuTile.js

@@ -1,57 +0,0 @@
-/*
-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.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'BottomLeftMenuTile',
-
-    getInitialState: function() {
-        return( { hover : false });
-    },
-
-    onMouseEnter: function() {
-        this.setState( { hover : true });
-    },
-
-    onMouseLeave: function() {
-        this.setState( { hover : false });
-    },
-
-    render: function() {
-        var label;
-        if (!this.props.collapsed) {
-            label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
-        }
-        else if (this.state.hover) {
-            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
-        }
-
-        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="26" height="26"/>
-                </div>
-                { label }
-            </div>
-        );
-    }
-});

src/components/views/rooms/DNDRoomTile.js

@@ -25,6 +25,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk');
 var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');
 
+/**
+ * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
+ * Requires extra props:
+ *   roomSubList: React.PropTypes.object.isRequired,
+ *   refreshSubList: React.PropTypes.func.isRequired,
+ */
+
 /**
  * Specifies the drag source contract.
  * Only `beginDrag` function is required.
@@ -202,4 +209,3 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) {
     };
 })(RoomTile));
 
-module.exports.replaces = 'RoomTile';

src/components/views/rooms/RoomTooltip.js

@@ -18,42 +18,79 @@ limitations under the License.
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-
 var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
     displayName: 'RoomTooltip',
 
-    componentDidMount: function() {
-        var tooltip = ReactDOM.findDOMNode(this);
-        if (!this.props.bottom) {
-            // tell the roomlist about us so it can position us
-            dis.dispatch({
-                action: 'view_tooltip',
-                tooltip: tooltip,
-            });
-        }
-        else {
-            tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
-            tooltip.style.display = "block";
-        }
+    propTypes: {
+        // Alllow the tooltip to be styled by the parent element
+        className: React.PropTypes.string.isRequired,
+        // The tooltip is derived from either the room name or a label
+        room: React.PropTypes.object,
+        label: React.PropTypes.string,
     },
 
+    // Create a wrapper for the tooltip outside the parent and attach it to the body element
+    componentDidMount: function() {
+        this.tooltipContainer = document.createElement("div");
+        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
+        document.body.appendChild(this.tooltipContainer);
+
+        this._renderTooltip();
+    },
+
+    componentDidUpdate: function() {
+        this._renderTooltip();
+    },
+
+    // Remove the wrapper element, as the tooltip has finished using it
     componentWillUnmount: function() {
-        if (!this.props.bottom) {
-            dis.dispatch({
-                action: 'view_tooltip',
-                tooltip: null,
-            });
-        }
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: null,
+            parent: null,
+        });
+
+        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
+        document.body.removeChild(this.tooltipContainer);
+    },
+
+    _renderTooltip: function() {
+        var label = this.props.room ? this.props.room.name : this.props.label;
+
+        // Add the parent's position to the tooltips, so it's correctly
+        // positioned, also taking into account any window zoom
+        // NOTE: The additional 6 pixels for the left position, is to take account of the
+        // tooltips chevron
+        var parent = ReactDOM.findDOMNode(this);
+        var style = {};
+        style.top = parent.getBoundingClientRect().top + window.pageYOffset;
+        style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
+        style.display = "block";
+
+        var tooltip = (
+            <div className="mx_RoomTooltip" style={style} >
+                <div className="mx_RoomTooltip_chevron"></div>
+                { label }
+            </div>
+        );
+
+        // Render the tooltip manually, as we wish it not to be rendered within the parent
+        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+
+        // Tell the roomlist about us so it can manipulate us if it wishes
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: this.tooltip,
+            parent: parent,
+        });
     },
 
     render: function() {
-        var label = this.props.room ? this.props.room.name : this.props.label;
+        // Render a placeholder
         return (
-            <div className="mx_RoomTooltip">
-                 <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
-                 { label }
+            <div className={ this.props.className } >
             </div>
         );
     }

src/components/views/settings/IntegrationsManager.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var sdk = require('matrix-react-sdk');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
 
 module.exports = React.createClass({
     displayName: 'IntegrationsManager',
@@ -31,10 +32,12 @@ module.exports = React.createClass({
     // XXX: keyboard shortcuts for managing dialogs should be done by the modal
     // dialog base class somehow, surely...
     componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
         document.addEventListener("keydown", this.onKeyDown);
     },
 
     componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
         document.removeEventListener("keydown", this.onKeyDown);
     },
 
@@ -46,11 +49,15 @@ module.exports = React.createClass({
         }
     },
 
+    onAction: function(payload) {
+        if (payload.action === 'close_scalar') {
+            this.props.onFinished();
+        }
+    },
+
     render: function() {
         return (
-            <div className="mx_IntegrationsManager">
-                <iframe src={ this.props.src }></iframe>
-            </div>
+            <iframe src={ this.props.src }></iframe>
         );
     }
 });

src/components/views/settings/Notifications.js

@@ -119,7 +119,7 @@ module.exports = React.createClass({
         var emailPusherPromise;
         if (event.target.checked) {
             var data = {}
-            data['brand'] = this.props.brand || 'Vector';
+            data['brand'] = this.props.brand || 'Riot';
             emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
         } else {
             var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
@@ -132,7 +132,7 @@ module.exports = React.createClass({
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
                 title: "Error saving email notification preferences",
-                description: "Vector was unable to save your email notification preferences.",
+                description: "An error occurred whilst saving your email notification preferences.",
             });
         });
     },
@@ -784,7 +784,7 @@ module.exports = React.createClass({
                 <div>
                     <h3>Advanced notifications settings</h3>
                     There are advanced notifications which are not shown here.<br/>
-                    You might have configured them in another client than Vector. You cannot tune them in Vector but they still apply.
+                    You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply.
                     <ul>
                         { externalRules }
                     </ul>
@@ -843,7 +843,7 @@ module.exports = React.createClass({
                                     <th width="55%"></th>
                                     <th width="15%">Off</th>
                                     <th width="15%">On</th>
-                                    <th width="15%">Highlight<br/>&amp; sound</th>
+                                    <th width="15%">Noisy</th>
                                 </tr>
                             </thead>
                             <tbody>

src/skins/vector/css/common.css

@@ -64,6 +64,11 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* Required by Firefox */
+textarea {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
 /* Prevent ugly dotted highlight around selected elements in Firefox */
 ::-moz-focus-inner {
     border: 0;
@@ -153,6 +158,8 @@ input[type=text]:focus, textarea:focus {
     width: 60%;
     max-width: 704px;
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    max-height: 80%;
+    overflow-y: auto;
 }
 
 .mx_Dialog_background {
@@ -196,16 +203,20 @@ input[type=text]:focus, textarea:focus {
     height: 36px;
     border-radius: 40px;
     border: solid 1px #76cfa6;
-    font-weight: 400;
-    font-size: 15px;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     margin-left: 0px;
     margin-right: 8px;
     padding-left: 1.5em;
     padding-right: 1.5em;
     outline: none;
-
+    cursor: pointer;
     color: #76cfa6;
     background-color: #fff;
+
+    /* align images in buttons (eg spinners) */
+    vertical-align: middle;
 }
 
 .mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {

src/skins/vector/css/hide.css

@@ -1,6 +0,0 @@
-.mx_RoomSettings_encrypt,
-.mx_CreateRoom_encrypt,
-.mx_RightPanel_filebutton
-{
-    display: none !important;
-}

src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css

@@ -0,0 +1,120 @@
+/*
+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_FilePanel {
+    -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;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+    display: none;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_FilePanel .mx_EventTile_avatar {
+    display: none;
+}
+
+/* Overrides for the attachment body tiles */
+
+.mx_FilePanel .mx_EventTile {
+    word-break: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+    margin-right: 0px;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
+    display: flex;
+    font-size: 14px;
+    color: #acacac;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
+    flex: 1 1 auto;
+    color: #747474;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+    flex: 1 0 0;
+    font-size: 11px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Overides for the sender details line */
+
+.mx_FilePanel .mx_EventTile_senderDetails {
+    display: flex;
+    margin-top: -2px;
+}
+
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+    text-decoration: none;
+}
+
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+    flex: 1 1 auto;
+    line-height: initial;
+    padding: 0px;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+    flex: 1 0 0;
+    text-align: right;
+    visibility: visible;
+    position: initial;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+}
+
+/* Overrides for the wrappers around the body tile */
+
+.mx_FilePanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 0px;
+}
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+

src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css

@@ -151,6 +151,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 72px;
-    flex: 0 0 72px;
+    -webkit-flex: 0 0 122px;
+    flex: 0 0 122px;
 }

src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css

@@ -0,0 +1,106 @@
+/*
+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_NotificationPanel {
+    -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;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+    margin-left: 0px;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile {
+    word-break: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: #4a4a4a;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: #000;
+    opacity: 0.3;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    visibility: visible;
+    position: initial;
+    display: inline;
+}
+
+.mx_NotificationPanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_content {
+    margin-right: 0px;
+}

src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomStatusBar {
-    margin-top: 15px;
     margin-left: 65px;
     min-height: 34px;
 }
@@ -25,11 +24,17 @@ limitations under the License.
     padding-left: 18px;
     padding-right: 12px;
     margin-left: -73px;
+    margin-top: 13px;
     float: left;
     width: 24px;
     text-align: center;
 }
 
+.mx_RoomStatusBar_callBar {
+    height: 50px;
+    line-height: 50px;
+}
+
 .mx_RoomStatusBar_placeholderIndicator span {
     color: #4a4a4a;
     opacity: 0.5;
@@ -70,6 +75,7 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_unreadMessagesBar {
+    padding-top: 10px;
     color: #ff0064;
     cursor: pointer;
 }
@@ -103,10 +109,12 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_tabCompleteBar {
+    padding-top: 10px;
     color: #4a4a4a;
 }
 
 .mx_RoomStatusBar_typingBar {
+    padding-top: 10px;
     color: #4a4a4a;
     opacity: 0.5;
     overflow-y: hidden;

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -207,7 +207,7 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_statusAreaBox {
     max-width: 960px;
     margin: auto;
-    min-height: 60px;
+    min-height: 50px;
 }
 
 .mx_RoomView_statusAreaBox_line {
@@ -216,6 +216,15 @@ hr.mx_RoomView_myReadMarker {
     height: 1px;
 }
 
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+    background-color: #fff;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+    color: #fff;
+    opacity: 1.0;
+}
+
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
     border-top: 1px hidden;
 }
@@ -239,6 +248,7 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_voipButton {
     float: right;
     margin-right: 13px;
+    margin-top: 10px;
     cursor: pointer;
 }
 
@@ -268,3 +278,7 @@ hr.mx_RoomView_myReadMarker {
     padding: 6px 0;
     cursor: pointer;
 }
+
+.mx_RoomView_ongoingConfCallNotification a {
+    color: #fff ! important;
+}

src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css

@@ -20,7 +20,6 @@ limitations under the License.
     margin-right: 16px;
     padding-top: 24px;
     padding-bottom: 22px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
     display: flex;
     display: -webkit-flex;

src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css

@@ -104,6 +104,18 @@ limitations under the License.
     margin-bottom: 28px;
 }
 
+.mx_UserSettings_cryptoSection ul {
+    display: table;
+}
+.mx_UserSettings_cryptoSection li {
+    display: table-row;
+}
+.mx_UserSettings_cryptoSection label,
+.mx_UserSettings_cryptoSection span {
+    display: table-cell;
+    padding-right: 1em;
+}
+
 .mx_UserSettings_toggle input {
     width: 16px;
     margin-right: 8px;

src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css

@@ -0,0 +1,65 @@
+/*
+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.
+*/
+
+/* Using a textarea for this element, to circumvent autofill */
+.mx_ChatInviteDialog_input,
+.mx_ChatInviteDialog_input:focus
+{
+    height: 26px;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    padding-left: 12px;
+    padding-right: 12px;
+    margin: 0 !important;
+    border: 0 !important;
+    outline: 0 !important;
+    width: 1000%; /* Pretend that this is an "input type=text" */
+    resize: none;
+    overflow: hidden;
+    vertical-align: middle;
+    box-sizing: border-box;
+    word-wrap: nowrap;
+}
+
+.mx_ChatInviteDialog_inputContainer {
+    border-radius: 3px;
+    border: solid 1px #f0f0f0;
+    line-height: 36px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    max-height: 150px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.mx_ChatInviteDialog_error {
+    position: absolute;
+    color: #ff0064;
+    line-height: 36px;
+}
+
+.mx_ChatInviteDialog_cancel {
+    position: absolute;
+    right: 11px;
+    top: 13px;
+    cursor: pointer;
+}
+
+.mx_ChatInviteDialog_cancel object {
+    pointer-events: none;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css

@@ -14,23 +14,26 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MultiInviteDialog ul {
-    height: 300px;
-    overflow-y: auto;
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo {
+    float: right;
+    padding: 0px;
+    margin-right: 42px;
 }
 
-.mx_MultiInviteDialog li {
-    list-style-type: none;
-}
-
-.mx_MultiInviteDialog_statusText {
-    text-indent: 20px;
-}
-
-.mx_MultiInviteDialog p.error {
-    color: #ff0064;
-}
-
-.mx_MultiInviteDialog p.invited {
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
+    border: 0px;
+    height: 36px;
+    border-radius: 40px;
+    border: solid 1px #76cfa6;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+    cursor: pointer;
     color: #76cfa6;
-}
+    background-color: #fff;
+}

src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css

@@ -0,0 +1,45 @@
+/*
+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_AddressSelector {
+    position: absolute;
+    background-color: #fff;
+    width: 485px;
+    max-height: 116px;
+    overflow-y: auto;
+	border-radius: 3px;
+	background-color: #fff;
+	border: solid 1px #76cfa6;
+    cursor: pointer;
+}
+
+.mx_AddressSelector.mx_AddressSelector_empty {
+    display: none;
+}
+
+.mx_AddressSelector_addressListElement .mx_AddressTile {
+    background-color: #fff;
+    border: solid 1px #fff;
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
+     background-color: #eaf5f0; /* selected colour */
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
+    background-color: #eaf5f0; /* selected colour */
+    border: solid 1px #eaf5f0; /* selected colour */
+}

src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css

@@ -0,0 +1,138 @@
+/*
+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_AddressTile {
+    display: inline-block;
+    border-radius: 3px;
+    background-color: rgba(74, 73, 74, 0.1);
+    border: solid 1px #f0f0f0;
+    line-height: 26px;
+    color: #454545;
+    font-size: 14px;
+    font-weight: normal;
+    margin-right: 4px;
+}
+
+.mx_AddressTile.mx_AddressTile_error {
+    background-color: rgba(255, 0, 100, 0.1);
+    color: #ff0064;
+    border-color: #ff0064;
+}
+
+.mx_AddressTile_network {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 4px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_avatar {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 7px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_mx {
+    display: inline-block;
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
+.mx_AddressTile_name {
+    display: inline-block;
+    padding-right: 4px;
+    font-weight: 600;
+    overflow: hidden;
+    height: 26px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_name.mx_AddressTile_justified {
+    width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_id {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_id.mx_AddressTile_justified {
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknownMx {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_email {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_email.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknown {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknown.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_dismiss {
+    display: inline-block;
+    padding-right: 11px;
+    padding-left: 1px;
+    cursor: pointer;
+}
+
+.mx_AddressTile_dismiss object {
+    pointer-events: none;
+}

src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css

@@ -0,0 +1,72 @@
+/*
+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_DirectorySearchBox {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+}
+
+.mx_DirectorySearchBox_container {
+    display: flex;
+    display: -webkit-flex;
+    padding-left: 9px;
+    padding-right: 9px;
+}
+
+.mx_DirectorySearchBox_input {
+    flex-grow: 1;
+    -webkit-flex-grow: 1;
+    border: 0;
+    padding: 0;
+    font-weight: 300;
+    font-size: 13px;
+}
+input[type=text].mx_DirectorySearchBox_input:focus {
+    border: 0;
+}
+
+.mx_DirectorySearchBox_joinButton {
+    display: table-cell;
+    padding: 3px;
+    padding-left: 10px;
+    padding-right: 10px;
+    background-color: #efefef;
+    border-radius: 3px;
+    background-image: url('img/icon-return.svg');
+    background-position: 8px 70%;
+    background-repeat: no-repeat;
+    text-indent: 18px;
+    font-weight: 600;
+    font-size: 12px;
+    user-select: none;
+    cursor: pointer;
+}
+
+.mx_DirectorySearchBox_clear_wrapper {
+    display: table-cell;
+}
+
+.mx_DirectorySearchBox_clear {
+    display: inline-block;
+    vertical-align: middle;
+    background: url('img/icon_context_delete.svg');
+    background-position: 0 50%;
+    background-repeat: no-repeat;
+    width: 15px;
+    height: 15px;
+    cursor: pointer;
+}

src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css

@@ -20,3 +20,20 @@
 .mx_Markdown_ITALIC {
     font-style: italic;
 }
+
+.mx_Markdown_CODE {
+    padding: .2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0,0,0,.04);
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    display: block;
+    background: #e7e7e7;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+    text-decoration: line-through;
+}

src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css

@@ -30,7 +30,6 @@ limitations under the License.
 
 .mx_MImageBody_download {
     color: #76cfa6;
-    cursor: pointer;
 }
 
 .mx_MImageBody_download a {

src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css

@@ -36,21 +36,13 @@ limitations under the License.
 
 .mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
     top: 8px;
-    left: 44px;
+    left: 65px;
 }
 
 .mx_EventTile_continuation {
     padding-top: 0px ! important;
 }
 
-.mx_EventTile_verified {
-    background-color: #eaf5f0;
-}
-
-.mx_EventTile_unverified {
-    background-color: #ffa0a0;
-}
-
 .mx_EventTile .mx_SenderProfile {
     color: #454545;
     opacity: 0.5;
@@ -87,6 +79,10 @@ limitations under the License.
     line-height: 22px;
 }
 
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 83px;
+}
+
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
     font-size: 48px ! important;
@@ -122,6 +118,10 @@ limitations under the License.
     color: #fff;
 }
 
+.mx_EventTile_encrypting {
+    color: #abddbc ! important;
+}
+
 .mx_EventTile_sending {
     color: #ddd;
 }
@@ -227,6 +227,46 @@ limitations under the License.
     overflow-y: hidden;
 }
 
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+    display: block;
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    padding-left: 60px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: #76cfa5 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: #e8bf37 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+    left: 3px;
+}
+
+/*
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+    display: none;
+}
+*/
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+    display: block;
+    left: 41px;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {

src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css

@@ -50,7 +50,7 @@ limitations under the License.
 .mx_LinkPreviewWidget_description {
     margin-top: 8px;
     white-space: normal;
-    word-break: break-word;
+    word-wrap: break-word;
 }
 
 .mx_LinkPreviewWidget_cancel {

src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css

@@ -15,14 +15,9 @@ limitations under the License.
 */
 
 .mx_MemberDeviceInfo {
-    font-size: 12px;
-    display: table-row;
-    height: 17px;
+    padding: 10px 0px;
 }
 
-.mx_MemberDeviceInfo div {
-    display: table-cell;
-}
 
 .mx_MemberDeviceInfo_textButton {
     color: #fff;
@@ -31,27 +26,44 @@ limitations under the License.
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
+    width: 95px;
+    border: 0px;
+    font-size: 14px;
 
     cursor: pointer;
+    display: inline;
+}
+
+.mx_MemberDeviceInfo_deviceId {
+    font-size: 13px;
+}
+
+.mx_MemberDeviceInfo_deviceInfo {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.mx_MemberDeviceInfo_block,
+.mx_MemberDeviceInfo_unblock {
+    float: right;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
-    color: #fff;
-    width: 17px;
-    border-radius: 17px;
-    text-align: center;
+    float: right;
+    padding-left: 1em;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
-    background-color: #76cfa6;
+    color: #76cfa5;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
-    background-color: #eca46f;
+    color: #e8bf37;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
-    background-color: #e55e5e;
+    color: #ba6363;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_MemberInfo {
     margin-top: 20px;
+    padding-right: 20px;
     height: 100%;
     overflow-y: auto;
 }
@@ -24,9 +25,21 @@ limitations under the License.
     margin-top: 6px;
 }
 
+.mx_MemberInfo .mx_RoomTile_nameContainer {
+    width: 154px;
+}
+
+.mx_MemberInfo .mx_RoomTile_badge {
+    display: none;
+}
+
+.mx_MemberInfo .mx_RoomTile_name {
+    width: 160px;
+}
+
 .mx_MemberInfo_cancel {
     float: right;
-    margin-right: 18px;
+    margin-right: 10px;
     cursor: pointer;
 }
 
@@ -74,7 +87,12 @@ limitations under the License.
     line-height: 23px;
 }
 
-.mx_MemberInfo_devices {
-    display: table;
-    border-spacing: 5px;
-}
+.mx_MemberInfo_createRoom {
+    cursor: pointer;
+}
+
+.mx_MemberInfo_createRoom_label {
+    width: initial ! important;
+    cursor: pointer;
+}
+

src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css

@@ -52,15 +52,29 @@ limitations under the License.
     flex: 1 1 0px;
 }
 
-.mx_MemberList .mx_SearchableEntityList {
-    order: 1;
-    flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;
+.mx_MemberList_query {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    border-radius: 3px;
+    border: 1px solid #f0f0f0;
+    padding: 9px;
+    color: #454545;
+    background-color: #fff;
+    margin-left: 3px;
+    font-size: 14px;
+    margin-bottom: 8px;
+    width: 189px;
 }
 
-.mx_MemberList .mx_SearchableEntityList_expanded {
-    flex: 1 0 0;
-    -webkit-flex: 1 0 0;
+.mx_MemberList_query::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.mx_MemberList_query::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
 }
 
 .mx_MemberList_joined {

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -19,6 +19,7 @@ limitations under the License.
     vertical-align: middle;
     margin: auto;
     border-top: 1px solid #e5e5e5;
+    position: relative;
 }
 
 .mx_MessageComposer_autocomplete_wrapper {
@@ -46,6 +47,11 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_MessageComposer_e2eIcon {
+    position: absolute;
+    left: 44px;
+}
+
 .mx_MessageComposer_noperm_error {
     width: 100%;
     height: 60px;
@@ -54,23 +60,40 @@ limitations under the License.
     color: #888;
 }
 
+.mx_MessageComposer_input_wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
 .mx_MessageComposer_input {
     flex: 1;
     vertical-align: middle;
-    min-height: 60px;
-    max-height: 120px;
     display: flex;
-    align-items: center;
-    overflow: auto;
+    flex-direction: column;
+    min-height: 60px;
+    justify-content: center;
+    align-items: flex-start;
     font-size: 14px;
     margin-right: 6px;
 }
-.mx_MessageComposer_input_rte {
-    border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+
+.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
+    display: none;
 }
 
 .mx_MessageComposer_input .DraftEditor-root {
+    width: 100%;
     flex: 1;
+    max-height: 120px;
+    overflow: auto;
+}
+
+.mx_MessageComposer_input blockquote {
+    color: rgb(119, 119, 119);
+    margin: 0 0 16px;
+    padding: 0 15px;
+    border-left: 4px solid rgb(221, 221, 221);
 }
 
 .mx_MessageComposer_input textarea {
@@ -88,7 +111,8 @@ limitations under the License.
     color: #454545;
     background-color: #fff;
     font-size: 14px;
-
+    max-height: 120px;
+    overflow: auto;
     /* needed for FF */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 }
@@ -122,3 +146,59 @@ limitations under the License.
     pointer-events: none;
 }
 
+.mx_MessageComposer_formatting {
+    cursor: pointer;
+    margin: 0 11px;
+}
+
+.mx_MessageComposer_formatbar_wrapper {
+    width: 100%;
+    background-color: #f7f7f7;
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
+}
+
+.mx_MessageComposer_formatbar {
+    margin: auto;
+    max-width: 960px;
+    display: flex;
+
+    height: 30px;
+
+    box-sizing: border-box;
+    padding-left: 62px;
+
+    flex-direction: row;
+    align-items: center;
+    font-size: 10px;
+    color: #888;
+}
+
+.mx_MessageComposer_formatbar * {
+    margin-right: 4px;
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+    cursor: pointer;
+}
+
+.mx_MessageComposer_format_button_disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+    margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+    margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    height: 10px;
+    padding: 4px 4px 4px 0;
+    opacity: 0.8;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css

@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-top: 8px;
     padding-bottom: 12px;
     min-height: 400px;
 }
@@ -33,3 +32,8 @@ limitations under the License.
     overflow-x: hidden ! important;
     overflow-y: scroll ! important;
 }
+
+/* Make sure the scrollbar is above the sticky headers from RoomList */
+.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
+    z-index: 6;
+}

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css

@@ -19,7 +19,8 @@ limitations under the License.
     margin-bottom: 20px;
 }
 
-.mx_RoomSettings_leaveButton {
+.mx_RoomSettings_leaveButton,
+.mx_RoomSettings_integrationsButton {
     height: 36px;
     background-color: #76cfa6;
     border-radius: 36px;
@@ -31,6 +32,14 @@ limitations under the License.
     cursor: pointer;
     padding-left: 12px;
     padding-right: 12px;
+}
+
+.mx_RoomSettings_e2eIcon {
+    padding-left: 4px;
+    padding-right: 7px;
+}
+
+.mx_RoomSettings_leaveButton {
     margin-right: 32px;
 }
 
@@ -88,12 +97,14 @@ limitations under the License.
     height: 37px;
     border: 1px solid #979797;
     margin-right: 13px;
+    cursor: pointer;
 }
 
 .mx_RoomSettings .mx_RoomSettings_roomColor_selected {
     position: absolute;
     left: 10px;
     top: 4px;
+    cursor: default ! important;
 }
 
 .mx_RoomSettings .mx_RoomSettings_roomColorPrimary {

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css

@@ -22,12 +22,24 @@ limitations under the License.
     height: 34px;
 }
 
+.mx_RoomTile_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -54px;
+    left: -12px;
+}
+
+
 .mx_RoomTile_nameContainer {
     display: inline-block;
     width: 180px;
     height: 24px;
 }
 
+.mx_RoomTile_avatar_container {
+    position: relative;
+}
+
 .mx_RoomTile_avatar {
     display: inline-block;
     padding-top: 5px;
@@ -39,7 +51,15 @@ limitations under the License.
     vertical-align: middle;
 }
 
-.mx_RoomTile_avatar_container:hover:before,
+.mx_RoomTile_dm {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: -5px;
+    z-index: 2;
+}
+
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
 .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
     display: block;
     position: absolute;
@@ -47,31 +67,30 @@ limitations under the License.
     border-radius: 40px;
     background-image: url("img/icons_ellipsis.svg");
     background-size: 25px;
-    left: 15px;
     width: 24px;
     height: 24px;
     z-index: 4;
 }
 
-.mx_RoomTile_avatar_container:hover:after,
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:after,
 .mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
     display: block;
     position: absolute;
     content: "";
     border-radius: 40px;
     background: #4A4A4A;
-    top: 5px;
+    bottom: 0;
     width: 24px;
     height: 24px;
     opacity: 0.6;
-    z-index: 2;
+    z-index: 1;
 }
 
-.collapsed .mx_RoomTile_avatar_container:hover:before {
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {
     display: none;
 }
 
-.collapsed .mx_RoomTile_avatar_container:hover:after {
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:after {
     display: none;
 }
 
@@ -90,18 +109,12 @@ limitations under the License.
     text-overflow: ellipsis;
 }
 
-.mx_RoomTile_ellipsis .mx_RoomTile_name {
-    font-style: italic;
-    color: #454545;
-}
-
 .mx_RoomTile_invite {
-/*    color: rgba(69, 69, 69, 0.5);
-*/
+/*    color: rgba(69, 69, 69, 0.5); */
 }
 
 .collapsed .mx_RoomTile_nameContainer {
-    height: 0;
+    width: 60px; /* colapsed panel width */
 }
 
 .collapsed .mx_RoomTile_name {
@@ -109,12 +122,11 @@ limitations under the License.
 }
 
 .collapsed .mx_RoomTile_badge {
-    top: -2px;
+    top: 0px;
     min-width: 12px;
-    height: 16px;
     border-radius: 16px;
     padding: 0px 4px 0px 4px;
-    z-index: 200;
+    z-index: 3;
 }
 
 /* Hide the bottom of speech bubble */
@@ -129,22 +141,22 @@ limitations under the License.
     display: block;
     width: 0;
     height: 0;
-    margin-left: 6px;
-    border-top: 8px solid #ff0064;
-    border-right: 10px solid transparent;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
 }
 
 .mx_RoomTile_badge {
     display: inline-block;
-    min-width: 19px;
-    height: 17px;
+    min-width: 15px;
+    height: 15px;
     position: absolute;
     right: 8px; /*gutter */
     top: 9px;
-    border-radius: 14px;
+    border-radius: 8px;
     color: #fff;
     font-weight: 600;
-    font-size: 11px;
+    font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
@@ -175,7 +187,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_selected {
-    background-color: rgba(118,207,166,0.2);
+    background-color: rgba(255, 255, 255, 0.8);
 }
 
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
@@ -187,5 +199,3 @@ limitations under the License.
     right: 0px;
 }
 
-.mx_RoomTile:hover {
-}

src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css

@@ -34,6 +34,8 @@ limitations under the License.
     padding-bottom: 2px;
     margin-bottom: 6px;
     border-radius: 30px;
+    position: relative;
+    top: 1px;
 }
 
 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {

src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css

@@ -45,3 +45,7 @@ limitations under the License.
 .mx_DevicesPanel_device > div {
     display: table-cell;
 }
+
+.mx_DevicesPanel_myDevice {
+    font-weight: bold;
+}

src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css

@@ -14,20 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_IntegrationsManager {
-    display: -webkit-flex;
-    display: flex;
-    width: 100%;
-    height: 100%;
-    -webkit-align-items: center;
-    align-items: center;
-    justify-content: center;
-    -webkit-justify-content: center;
+.mx_IntegrationsManager .mx_Dialog {
+    width: 60%;
+    height: 70%;
+    overflow: hidden;
+    padding: 0px;
+    max-width: initial;
+    max-height: initial;
 }
 
 .mx_IntegrationsManager iframe {
     background-color: #fff;
     border: 0px;
-    width: 720px;
-    height: 512px;
+    width: 100%;
+    height: 100%;
 }

src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css

@@ -12,4 +12,14 @@ 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_CallView_voice {
+    background-color: #76cfa6;
+    color: #fff;
+    cursor: pointer;
+    text-align: center;
+    padding: 6px;
+    font-weight: bold;
+    font-size: 13px;
+}

src/skins/vector/css/vector-web/structures/LeftPanel.css

@@ -49,10 +49,11 @@ limitations under the License.
     flex: 1 1 0;
 
     overflow-y: auto;
+    z-index: 6;
 }
 
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu {
-   flex: 0 0 120px;
+   flex: 0 0 160px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -62,7 +63,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(118, 207, 166, 0.2);
     margin-left: 16px; /* gutter */
     margin-right: 16px; /* gutter */
     -webkit-flex: 0 0 60px;
@@ -78,23 +79,27 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
 .mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people,
 .mx_LeftPanel .mx_BottomLeftMenu_settings {
     display: inline-block;
     cursor: pointer;
 }
 
-.collapsed .mx_BottomLeftMenu_createRoom,
 .collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_people,
 .collapsed .mx_BottomLeftMenu_settings {
-    margin-left: 0px ! important;
+    margin-right: 0px ! important;
     padding-top: 3px ! important;
     padding-bottom: 3px ! important;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu_directory {
-    margin-left: 10px;
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people {
+    margin-right: 10px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu_settings {
@@ -104,3 +109,10 @@ limitations under the License.
 .mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
     float: none;
 }
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -25px;
+    left: 6px;
+}

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -46,15 +46,15 @@ limitations under the License.
     margin-top: 6px;
     float: left;
     background-color: #fff;
-    margin-left: -4px;
+    margin-left: 0px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
     display: table-cell;
-    vertical-align: middle;
-    padding-left: 15px;
-    padding-right: 15px;
+    vertical-align: top;
+    padding-left: 4px;
+    padding-right: 5px;
     text-align: center;
     position: relative;
 }
@@ -86,8 +86,8 @@ limitations under the License.
     -ms-flex-order: 2;
     -webkit-order: 2;
     order: 2;
-    flex: 1;
-    -webkit-flex: 1;
+    flex: 1 1 0;
+    -webkit-flex: 1 1 0;
 }
 
 .mx_RightPanel_footer {
@@ -103,3 +103,30 @@ limitations under the License.
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }
+
+.mx_RightPanel_footer .mx_RightPanel_invite {
+    line-height: 35px;
+    font-size: 14px;
+	color: #4A4A4A;
+    padding-top: 13px;
+    padding-left: 5px;
+    cursor: pointer;
+}
+
+.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
+    display: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon {
+    display: inline-block;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon object {
+    pointer-events: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_message {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 10px
+}

src/skins/vector/css/vector-web/structures/RoomDirectory.css

@@ -46,15 +46,27 @@ limitations under the License.
     -webkit-flex-direction: column;
 }
 
-.mx_RoomDirectory_input {
-    margin: auto;
-    border-radius: 3px;
-    border: 1px solid #c7c7c7;
-    font-weight: 300;
-    font-size: 13px;
-    padding: 9px;
+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+}
+
+.mx_RoomDirectory_listheader {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
     margin-top: 12px;
     margin-bottom: 12px;
+    border-spacing: 5px;
+}
+
+.mx_RoomDirectory_searchbox {
+    display: table-cell;
+}
+
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+    display: table-cell;
+    width: 200px;
 }
 
 .mx_RoomDirectory_tableWrapper {

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -20,23 +20,222 @@ limitations under the License.
     width: 100%;
 }
 
+.mx_RoomSubList_labelContainer {
+    height: 31px; /* mx_RoomSubList_label height including border */
+    width: 235px; /* LHS Panel width */
+    position: relative;
+}
+
 .mx_RoomSubList_label {
+    position: relative;
     text-transform: uppercase;
     color: #3d3b39;
     font-weight: 600;
-    font-size: 13px;
+    font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
     padding-left: 16px; /* gutter */
     padding-right: 16px; /* gutter */
-    margin-top: 8px;
-    margin-bottom: 4px;
+    padding-top: 6px;
+    padding-bottom: 6px;
     cursor: pointer;
+    background-color: #d3efe1;
+    border-top: solid 2px #eaf5f0;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 5;
+    /* pointer-events: none; */
+}
+
+.collapsed .mx_RoomSubList_label {
+    height: 17px;
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.collapsed .mx_RoomSubList_labelContainer {
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.mx_RoomSubList_roomCount {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: normal;
+    color: #76cfa6;
+    padding-left: 5px;
+    text-transform: none;
+}
+
+.collapsed .mx_RoomSubList_roomCount {
+    display: none;
+}
+
+.mx_RoomSubList_badge {
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: 7px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #76cfa6;
+}
+
+/*
+.collapsed .mx_RoomSubList_badge {
+    display: none;
+}
+*/
+
+.mx_RoomSubList_badgeHighlight {
+    background-color: #ff0064;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomSubList_badgeHighlight:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomSubList_badgeHighlight:after {
+    display: none;
 }
 
 .mx_RoomSubList_chevron {
-    padding-left: 4px;
     pointer-events: none;
+    position: absolute;
+    right: 41px;
+    top: 11px;
 }
 
-.collapsed .mx_RoomSubList_chevron  {
-    padding-left: 12px;
+.mx_RoomSubList_chevronDown {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid #76cfa6;
 }
+
+.mx_RoomSubList_chevronUp {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronRight {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-left: 6px solid #76cfa6;
+    border-bottom: 5px solid transparent;
+}
+
+/* The overflow section */
+.mx_RoomSubList_ellipsis {
+    display: block;
+    line-height: 11px;
+    height: 18px;
+    position: relative;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.collapsed .mx_RoomSubList_ellipsis {
+    height: 20px;
+}
+
+.mx_RoomSubList_line {
+    display: inline-block;
+    width: 159px;
+    border-top: dotted 2px #76cfa6;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_line {
+    display: none;
+}
+
+.mx_RoomSubList_more {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 600;
+    text-align: left;
+    color: #76cfa6;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-left: 7px;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_more {
+    display: none;
+}
+
+.mx_RoomSubList_moreBadge {
+    display: inline-block;
+    min-width: 15px;
+    height: 13px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: -2px;
+    border-radius: 8px;
+    border: solid 1px #76cfa6;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 3px;
+    padding-right: 3px;
+    background-color: #fff;
+    vertical-align: middle;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
+    background-color: #76cfa6;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
+    background-color: #ff0064;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.collapsed .mx_RoomSubList_moreBadge {
+    position: static;
+    margin-left: 16px;
+    margin-top: 2px;
+}
+
+.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
+    position: relative;
+    top: 4px;
+    left: 2px;
+}
+
+

src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css

@@ -18,3 +18,7 @@ limitations under the License.
     max-height: 300px;
     overflow: auto;
 }
+
+.mx_ChangelogDialog_li {
+    padding: 0.2em;
+}

src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css

@@ -0,0 +1,81 @@
+/*
+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_NetworkDropdown {
+    position: relative;
+}
+
+.mx_NetworkDropdown_input {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 13px;
+    user-select: none;
+}
+
+.mx_NetworkDropdown_arrow {
+    border-color: #4a4a4a transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0
+}
+
+.mx_NetworkDropdown_networkoption {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.mx_NetworkDropdown_networkoption img {
+    margin: 5px;
+    width: 25px;
+    vertical-align: middle;
+}
+
+input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:focus {
+    border: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+.mx_NetworkDropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid #76cfa6;
+    background-color: white;
+}
+
+.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
+    background-color: #ddd;
+}
+
+.mx_NetworkDropdown_menu_network {
+    font-weight: bold;
+}
+

src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css

@@ -18,6 +18,8 @@ limitations under the License.
     font-size: 13px;
     margin-left: 18px;
     margin-right: 18px;
+    margin-top: 8px;
+    margin-bottom: 7px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed #76cfa6;

src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css

@@ -16,17 +16,38 @@ limitations under the License.
 
 .mx_RoomTooltip_chevron {
     position: absolute;
-    left: -9px;
-    top: 7px;
+    left: -8px;
+    top: 4px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-bottom: 8px solid transparent;
+}
+
+.mx_RoomTooltip_chevron:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid #fff;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    left: 1px;
 }
 
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
+    border: 1px solid rgba(187, 187, 187, 0.5);
+    border-radius: 5px;
     background-color: #fff;
     z-index: 2000;
-    left: 52px;
-    padding: 6px;
+    padding: 5px;
+    pointer-events: none;
+    line-height: 14px;
+    font-size: 13px;
+    color: rgba(0, 0, 0, 0.7);
 }
+

src/skins/vector/img/avatar-error.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>5EF602F6-A36C-41EE-BAEC-50801DFD5492</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Chat-People-2c-Invite-modal-ERROR" transform="translate(-611.000000, -358.000000)">
+            <g id="avatar_error" transform="translate(611.000000, 358.000000)">
+                <circle id="Oval-2" fill="#FF0064" cx="12.5" cy="12.5" r="12.5"></circle>
+                <path d="M11.2470703,15.0292969 C11.2470703,14.5901671 11.2733559,14.2082536 11.3259277,13.8835449 C11.3784996,13.5588363 11.4650873,13.2619642 11.5856934,12.9929199 C11.7062994,12.7238756 11.8624665,12.4687512 12.0541992,12.2275391 C12.2459319,11.9863269 12.4809556,11.7296563 12.7592773,11.4575195 C12.9695649,11.2534169 13.1659333,11.0601409 13.3483887,10.8776855 C13.530844,10.6952302 13.6916497,10.508139 13.8308105,10.3164062 C13.9699714,10.1246735 14.0797522,9.920574 14.1601562,9.70410156 C14.2405603,9.48762913 14.2807617,9.2464206 14.2807617,8.98046875 C14.2807617,8.39908563 14.1369643,7.9553238 13.8493652,7.64916992 C13.5617661,7.34301605 13.1396512,7.18994141 12.5830078,7.18994141 C12.3603504,7.18994141 12.1438813,7.22086558 11.9335938,7.28271484 C11.7233062,7.34456411 11.5346688,7.44352146 11.3676758,7.57958984 C11.2006828,7.71565823 11.0661626,7.88883358 10.9641113,8.09912109 C10.86206,8.3094086 10.8110352,8.5629868 10.8110352,8.85986328 L8.55664062,8.85986328 C8.56282555,8.27848017 8.66951394,7.76668515 8.87670898,7.32446289 C9.08390403,6.88224063 9.36840639,6.51115059 9.73022461,6.21118164 C10.0920428,5.91121269 10.515704,5.68546625 11.0012207,5.53393555 C11.4867375,5.38240484 12.0139946,5.30664062 12.5830078,5.30664062 C13.2076854,5.30664062 13.7643205,5.38704347 14.2529297,5.54785156 C14.7415389,5.70865966 15.1559228,5.94368335 15.4960938,6.25292969 C15.8362647,6.56217603 16.0944815,6.9394509 16.270752,7.38476562 C16.4470224,7.83008035 16.5351562,8.33414432 16.5351562,8.89697266 C16.5351562,9.30517782 16.4702155,9.68554511 16.340332,10.0380859 C16.2104486,10.3906268 16.0372732,10.7215154 15.8208008,11.0307617 C15.6043283,11.3400081 15.356935,11.6368801 15.0786133,11.9213867 C14.8002916,12.2058933 14.5126968,12.4873033 14.2158203,12.765625 C13.8756493,13.0748713 13.6483567,13.413491 13.5339355,13.7814941 C13.4195144,14.1494973 13.3592123,14.5654274 13.3530273,15.0292969 L11.2470703,15.0292969 Z M11.0893555,17.9145508 C11.0893555,17.7413728 11.1171872,17.5805671 11.1728516,17.4321289 C11.2285159,17.2836907 11.310465,17.1538092 11.4187012,17.0424805 C11.5269374,16.9311518 11.6599113,16.8445641 11.817627,16.7827148 C11.9753426,16.7208656 12.156249,16.6899414 12.3603516,16.6899414 C12.5644541,16.6899414 12.7453605,16.7208656 12.9030762,16.7827148 C13.0607918,16.8445641 13.1937657,16.9311518 13.302002,17.0424805 C13.4102382,17.1538092 13.4937334,17.2836907 13.5524902,17.4321289 C13.611247,17.5805671 13.640625,17.7413728 13.640625,17.9145508 C13.640625,18.2547218 13.529298,18.5392241 13.3066406,18.7680664 C13.0839833,18.9969087 12.7685567,19.1113281 12.3603516,19.1113281 C11.9521464,19.1113281 11.6382661,18.9969087 11.4187012,18.7680664 C11.1991363,18.5392241 11.0893555,18.2547218 11.0893555,17.9145508 L11.0893555,17.9145508 Z" id="?" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-md-false.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>D335F9E8-C813-47D7-B1BE-C8DEF2C8214F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs>
+        <text id="text-1" font-family="markdown" font-size="14" font-weight="normal" fill="#DDDDDD">
+            <tspan x="829.125" y="759"></tspan>
+        </text>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="1" dy="1" in="SourceAlpha" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0526494565 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="1">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-829.000000, -745.000000)" fill="#DDDDDD">
+            <g id="button_md_off">
+                <use filter="url(#filter-2)" xlink:href="#text-1"></use>
+                <use filter="url(#filter-3)" xlink:href="#text-1"></use>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-md-true.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="23px" height="15px" viewBox="0 0 23 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>2A63B135-4281-4FBB-A88C-012AE22E9594</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="14" font-family="markdown" font-weight="normal">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-829.000000, -745.000000)" fill="#4A4A4A">
+            <text id="button_markdown_on">
+                <tspan x="829.125" y="759"></tspan>
+            </text>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-bold-o-n.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>01F3F9B2-8F38-4BAF-A345-AECAC3D88E79</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-294.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_bold_ON">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M10.9882812,3.92523872 L13.4321289,3.92523872 C14.5457412,3.92523872 15.3540828,4.0836844 15.8571777,4.40058051 C16.3602727,4.71747663 16.6118164,5.22145922 16.6118164,5.9125434 C16.6118164,6.38162127 16.5017101,6.76654581 16.2814941,7.06732856 C16.0612782,7.36811131 15.7685565,7.54893633 15.4033203,7.60980903 L15.4033203,7.66351997 C15.9010442,7.77452312 16.2600087,7.98220334 16.4802246,8.28656684 C16.7004406,8.59093034 16.8105469,8.99554869 16.8105469,9.50043403 C16.8105469,10.2165834 16.5518418,10.7751716 16.0344238,11.1762153 C15.5170059,11.5772589 14.8142948,11.7777778 13.9262695,11.7777778 L10.9882812,11.7777778 L10.9882812,3.92523872 Z M12.6533203,7.035102 L13.6201172,7.035102 C14.0712913,7.035102 14.3980296,6.96527848 14.6003418,6.82562934 C14.802654,6.6859802 14.9038086,6.45502548 14.9038086,6.13275825 C14.9038086,5.83197549 14.7937023,5.61623872 14.5734863,5.48554145 C14.3532704,5.35484418 14.005048,5.28949653 13.5288086,5.28949653 L12.6533203,5.28949653 L12.6533203,7.035102 Z M12.6533203,8.35639106 L12.6533203,10.4027778 L13.7382812,10.4027778 C14.1966169,10.4027778 14.5349924,10.3150508 14.753418,10.1395942 C14.9718435,9.96413758 15.0810547,9.69558558 15.0810547,9.33393012 C15.0810547,8.68223415 14.6155646,8.35639106 13.6845703,8.35639106 L12.6533203,8.35639106 Z" id="B" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-bold.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>9BC64A5B-F157-43FF-BCC4-02D30CDF520B</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-294.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_bold">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M10.9882812,3.92523872 L13.4321289,3.92523872 C14.5457412,3.92523872 15.3540828,4.0836844 15.8571777,4.40058051 C16.3602727,4.71747663 16.6118164,5.22145922 16.6118164,5.9125434 C16.6118164,6.38162127 16.5017101,6.76654581 16.2814941,7.06732856 C16.0612782,7.36811131 15.7685565,7.54893633 15.4033203,7.60980903 L15.4033203,7.66351997 C15.9010442,7.77452312 16.2600087,7.98220334 16.4802246,8.28656684 C16.7004406,8.59093034 16.8105469,8.99554869 16.8105469,9.50043403 C16.8105469,10.2165834 16.5518418,10.7751716 16.0344238,11.1762153 C15.5170059,11.5772589 14.8142948,11.7777778 13.9262695,11.7777778 L10.9882812,11.7777778 L10.9882812,3.92523872 Z M12.6533203,7.035102 L13.6201172,7.035102 C14.0712913,7.035102 14.3980296,6.96527848 14.6003418,6.82562934 C14.802654,6.6859802 14.9038086,6.45502548 14.9038086,6.13275825 C14.9038086,5.83197549 14.7937023,5.61623872 14.5734863,5.48554145 C14.3532704,5.35484418 14.005048,5.28949653 13.5288086,5.28949653 L12.6533203,5.28949653 L12.6533203,7.035102 Z M12.6533203,8.35639106 L12.6533203,10.4027778 L13.7382812,10.4027778 C14.1966169,10.4027778 14.5349924,10.3150508 14.753418,10.1395942 C14.9718435,9.96413758 15.0810547,9.69558558 15.0810547,9.33393012 C15.0810547,8.68223415 14.6155646,8.35639106 13.6845703,8.35639106 L12.6533203,8.35639106 Z" id="B" fill="#4A4A4A"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-bullet-o-n.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>654917CF-20A4-49B6-B0A1-9875D7B733C8</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_bullet_ON" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M5.57421875,5.39496528 C5.57421875,4.79339977 5.71874855,4.33344343 6.0078125,4.01508247 C6.29687645,3.6967215 6.71288791,3.5375434 7.25585938,3.5375434 C7.7910183,3.5375434 8.20507666,3.69769805 8.49804688,4.01801215 C8.79101709,4.33832625 8.9375,4.79730604 8.9375,5.39496528 C8.9375,5.98871825 8.79004054,6.44769803 8.49511719,6.7719184 C8.20019384,7.09613877 7.78711203,7.25824653 7.25585938,7.25824653 C6.71679418,7.25824653 6.30175927,7.09613877 6.01074219,6.7719184 C5.71972511,6.44769803 5.57421875,5.98871825 5.57421875,5.39496528 L5.57421875,5.39496528 Z" id="•" fill="#FFFFFF"></path>
+                    <path d="M11.5,5.5 L19.5,5.5" id="Line" stroke="#FFFFFF" stroke-linecap="round"></path>
+                    <path d="M11.5,8.5 L19.5,8.5" id="Line-Copy" stroke="#FFFFFF" stroke-linecap="round"></path>
+                    <path d="M11.5,11.5 L19.5,11.5" id="Line-Copy-3" stroke="#FFFFFF" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-bullet.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>B7D94619-44BC-4184-A60A-DBC5BB54E5F9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_bullet" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M5.57421875,5.39496528 C5.57421875,4.79339977 5.71874855,4.33344343 6.0078125,4.01508247 C6.29687645,3.6967215 6.71288791,3.5375434 7.25585938,3.5375434 C7.7910183,3.5375434 8.20507666,3.69769805 8.49804688,4.01801215 C8.79101709,4.33832625 8.9375,4.79730604 8.9375,5.39496528 C8.9375,5.98871825 8.79004054,6.44769803 8.49511719,6.7719184 C8.20019384,7.09613877 7.78711203,7.25824653 7.25585938,7.25824653 C6.71679418,7.25824653 6.30175927,7.09613877 6.01074219,6.7719184 C5.71972511,6.44769803 5.57421875,5.98871825 5.57421875,5.39496528 L5.57421875,5.39496528 Z" id="•" fill="#4A4A4A"></path>
+                    <path d="M11.5,5.5 L19.5,5.5" id="Line" stroke="#4A4A4A" stroke-linecap="round"></path>
+                    <path d="M11.5,8.5 L19.5,8.5" id="Line-Copy" stroke="#4A4A4A" stroke-linecap="round"></path>
+                    <path d="M11.5,11.5 L19.5,11.5" id="Line-Copy-3" stroke="#4A4A4A" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-code-o-n.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>B76754AB-42E6-48D2-9443-80CBC0DE02ED</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_code_ON" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="/" fill="#FFFFFF" points="15.9262695 4.14746094 12.9990234 12 12.1074219 12 15.034668 4.14746094"></polygon>
+                    <g id="Group-5" opacity="0.5" transform="translate(17.000000, 5.000000)" stroke="#FFFFFF" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                    <g id="Group-5-Copy" opacity="0.5" transform="translate(9.500000, 8.000000) scale(-1, 1) translate(-9.500000, -8.000000) translate(8.000000, 5.000000)" stroke="#FFFFFF" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-code.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>4CAFF494-61AE-4916-AFE8-D1E62F7CF0DE</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-422.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_code" transform="translate(128.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="/" fill-opacity="0.7" fill="#000000" points="15.9262695 4.14746094 12.9990234 12 12.1074219 12 15.034668 4.14746094"></polygon>
+                    <g id="Group-5" opacity="0.5" transform="translate(17.000000, 5.000000)" stroke="#4A4A4A" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                    <g id="Group-5-Copy" opacity="0.5" transform="translate(9.500000, 8.000000) scale(-1, 1) translate(-9.500000, -8.000000) translate(8.000000, 5.000000)" stroke="#4A4A4A" stroke-linecap="round">
+                        <path d="M0.5,0.5 L2.97487373,2.97487373" id="Line"></path>
+                        <path d="M0.5,3.02512627 L2.97487373,5.5" id="Line-Copy-4" transform="translate(1.737437, 4.262563) scale(1, -1) translate(-1.737437, -4.262563) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-formatting.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="18px" viewBox="0 0 24 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-" transform="translate(-829.000000, -729.000000)">
+            <g id="button_text_formatting" transform="translate(829.000000, 729.000000)">
+                <rect id="Rectangle-111" fill="#F6F6F6" x="0" y="0" width="24" height="18" rx="9"></rect>
+                <text id="Aa" font-family="OpenSans-Bold, Open Sans" font-size="12" font-weight="bold" letter-spacing="-1.20000005" fill="#4A4A4A">
+                    <tspan x="5" y="13">A</tspan>
+                    <tspan x="12.0792968" y="13" font-family="OpenSans-Italic, Open Sans" font-style="italic" font-weight="normal">a</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-italic-o-n.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>116426C2-0B55-480E-92B3-57D4B3ABAB90</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-326.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_italic_ON" transform="translate(32.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="I" fill="#FFFFFF" points="12.4619141 11.7777778 14.1323242 3.92523872 15.034668 3.92523872 13.3642578 11.7777778"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-italic.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>9FBC844D-96CF-4DCB-B545-FCD23727218B</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-326.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_italic" transform="translate(32.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <polygon id="I" fill="#4A4A4A" points="12.4619141 11.7777778 14.1323242 3.92523872 15.034668 3.92523872 13.3642578 11.7777778"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-numbullet-o-n.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>294F929B-31AA-4D0C-98B3-9CA96764060D</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-454.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_numbullet_ON" transform="translate(160.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M8.3046875,8.77777778 L7.09765625,8.77777778 L7.09765625,5.47309028 L7.109375,4.93012153 L7.12890625,4.33637153 C6.92838441,4.53689336 6.78906289,4.66840247 6.7109375,4.73090278 L6.0546875,5.25824653 L5.47265625,4.53168403 L7.3125,3.06684028 L8.3046875,3.06684028 L8.3046875,8.77777778 Z" id="1" fill="#FFFFFF"></path>
+                    <path d="M11.5,5.5 L19.5,5.5" id="Line" stroke="#FFFFFF" stroke-linecap="round"></path>
+                    <path d="M11.5,8.5 L19.5,8.5" id="Line-Copy" stroke="#FFFFFF" stroke-linecap="round"></path>
+                    <path d="M11.5,11.5 L19.5,11.5" id="Line-Copy-3" stroke="#FFFFFF" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-numbullet.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>F0F58459-A13A-48C5-9332-ABFB96726F05</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-454.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_numbullet" transform="translate(160.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M8.3046875,8.77777778 L7.09765625,8.77777778 L7.09765625,5.47309028 L7.109375,4.93012153 L7.12890625,4.33637153 C6.92838441,4.53689336 6.78906289,4.66840247 6.7109375,4.73090278 L6.0546875,5.25824653 L5.47265625,4.53168403 L7.3125,3.06684028 L8.3046875,3.06684028 L8.3046875,8.77777778 Z" id="1" fill="#4A4A4A"></path>
+                    <path d="M11.5,5.5 L19.5,5.5" id="Line" stroke="#4A4A4A" stroke-linecap="round"></path>
+                    <path d="M11.5,8.5 L19.5,8.5" id="Line-Copy" stroke="#4A4A4A" stroke-linecap="round"></path>
+                    <path d="M11.5,11.5 L19.5,11.5" id="Line-Copy-3" stroke="#4A4A4A" stroke-linecap="round"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-quote-o-n.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>3B24B8C7-64BE-4B3E-A748-94DB72E1210F</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_quote_ON" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M13.6762695,4.58734809 C13.2019833,4.85981039 12.8185236,5.09442718 12.5258789,5.29120551 C12.2332342,5.48798384 11.9355484,5.74782825 11.6328125,6.07074653 C11.350259,6.37348242 11.1333015,6.69135033 10.9819336,7.02435981 C10.8305656,7.35736929 10.7246097,7.7862387 10.6640625,8.3109809 L11.390625,8.3109809 C12.0162792,8.3109809 12.5082176,8.46486934 12.8664551,8.77265082 C13.2246925,9.08043231 13.4038086,9.53200657 13.4038086,10.1273872 C13.4038086,10.5512174 13.2448746,10.9472909 12.927002,11.3156196 C12.6091293,11.6839482 12.1726916,11.8681098 11.6176758,11.8681098 C10.7498329,11.8681098 10.1292336,11.5830378 9.75585938,11.0128852 C9.38248511,10.4427326 9.19580078,9.69347252 9.19580078,8.76508247 C9.19580078,8.10915471 9.33707541,7.51126029 9.61962891,6.97138129 C9.9021824,6.43150229 10.2452779,5.9496549 10.6489258,5.52582465 C11.0626648,5.09190321 11.5016253,4.72358007 11.9658203,4.42084418 C12.4300153,4.1181083 12.8185206,3.87087769 13.1313477,3.67914497 L13.6762695,4.58734809 Z M19.2768555,4.58734809 C18.8025692,4.85981039 18.4191095,5.09442718 18.1264648,5.29120551 C17.8338202,5.48798384 17.5361343,5.74782825 17.2333984,6.07074653 C16.9407537,6.38357361 16.7212735,6.70396429 16.5749512,7.03192817 C16.4286288,7.35989205 16.3251956,7.7862387 16.2646484,8.3109809 L16.9912109,8.3109809 C17.6168651,8.3109809 18.1088035,8.46486934 18.467041,8.77265082 C18.8252785,9.08043231 19.0043945,9.53200657 19.0043945,10.1273872 C19.0043945,10.5512174 18.8454606,10.9472909 18.5275879,11.3156196 C18.2097152,11.6839482 17.7732775,11.8681098 17.2182617,11.8681098 C16.3504188,11.8681098 15.7298196,11.5830378 15.3564453,11.0128852 C14.983071,10.4427326 14.7963867,9.69347252 14.7963867,8.76508247 C14.7963867,8.10915471 14.9376613,7.51126029 15.2202148,6.97138129 C15.5027683,6.43150229 15.8458639,5.9496549 16.2495117,5.52582465 C16.6632508,5.09190321 17.1022112,4.72358007 17.5664062,4.42084418 C18.0306013,4.1181083 18.4191065,3.87087769 18.7319336,3.67914497 L19.2768555,4.58734809 Z" id="“" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-quote.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>BFC0418B-9081-4789-A231-B75953157748</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_quote" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M13.6762695,4.58734809 C13.2019833,4.85981039 12.8185236,5.09442718 12.5258789,5.29120551 C12.2332342,5.48798384 11.9355484,5.74782825 11.6328125,6.07074653 C11.350259,6.37348242 11.1333015,6.69135033 10.9819336,7.02435981 C10.8305656,7.35736929 10.7246097,7.7862387 10.6640625,8.3109809 L11.390625,8.3109809 C12.0162792,8.3109809 12.5082176,8.46486934 12.8664551,8.77265082 C13.2246925,9.08043231 13.4038086,9.53200657 13.4038086,10.1273872 C13.4038086,10.5512174 13.2448746,10.9472909 12.927002,11.3156196 C12.6091293,11.6839482 12.1726916,11.8681098 11.6176758,11.8681098 C10.7498329,11.8681098 10.1292336,11.5830378 9.75585938,11.0128852 C9.38248511,10.4427326 9.19580078,9.69347252 9.19580078,8.76508247 C9.19580078,8.10915471 9.33707541,7.51126029 9.61962891,6.97138129 C9.9021824,6.43150229 10.2452779,5.9496549 10.6489258,5.52582465 C11.0626648,5.09190321 11.5016253,4.72358007 11.9658203,4.42084418 C12.4300153,4.1181083 12.8185206,3.87087769 13.1313477,3.67914497 L13.6762695,4.58734809 Z M19.2768555,4.58734809 C18.8025692,4.85981039 18.4191095,5.09442718 18.1264648,5.29120551 C17.8338202,5.48798384 17.5361343,5.74782825 17.2333984,6.07074653 C16.9407537,6.38357361 16.7212735,6.70396429 16.5749512,7.03192817 C16.4286288,7.35989205 16.3251956,7.7862387 16.2646484,8.3109809 L16.9912109,8.3109809 C17.6168651,8.3109809 18.1088035,8.46486934 18.467041,8.77265082 C18.8252785,9.08043231 19.0043945,9.53200657 19.0043945,10.1273872 C19.0043945,10.5512174 18.8454606,10.9472909 18.5275879,11.3156196 C18.2097152,11.6839482 17.7732775,11.8681098 17.2182617,11.8681098 C16.3504188,11.8681098 15.7298196,11.5830378 15.3564453,11.0128852 C14.983071,10.4427326 14.7963867,9.69347252 14.7963867,8.76508247 C14.7963867,8.10915471 14.9376613,7.51126029 15.2202148,6.97138129 C15.5027683,6.43150229 15.8458639,5.9496549 16.2495117,5.52582465 C16.6632508,5.09190321 17.1022112,4.72358007 17.5664062,4.42084418 C18.0306013,4.1181083 18.4191065,3.87087769 18.7319336,3.67914497 L19.2768555,4.58734809 Z" id="“" fill="#4A4A4A"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-strike-o-n.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>69B11088-0F3A-4E14-BD9F-4FEF4115E99B</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-358.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_strike_ON" transform="translate(64.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M16.5107422,9.68842231 C16.5107422,10.3795065 16.2600937,10.9184008 15.7587891,11.3051215 C15.2574845,11.6918422 14.5771527,11.8851997 13.7177734,11.8851997 C12.7867792,11.8851997 12.0706405,11.7652464 11.5693359,11.5253364 L11.5693359,10.644477 C11.8916032,10.7805454 12.2425111,10.8879662 12.6220703,10.9667426 C13.0016295,11.0455191 13.3776023,11.0849067 13.75,11.0849067 C14.358727,11.0849067 14.8170558,10.9694293 15.125,10.7384711 C15.4329442,10.507513 15.5869141,10.1861457 15.5869141,9.77435981 C15.5869141,9.50222303 15.5323085,9.27932487 15.4230957,9.10565864 C15.3138829,8.9319924 15.1312676,8.77175638 14.8752441,8.62494575 C14.6192207,8.47813512 14.2298203,8.31163288 13.7070312,8.12543403 C12.9765588,7.86403949 12.4546728,7.55430952 12.1413574,7.19623481 C11.8280421,6.8381601 11.6713867,6.37087962 11.6713867,5.79437934 C11.6713867,5.18923309 11.8987607,4.70762983 12.3535156,4.34955512 C12.8082705,3.99148041 13.409827,3.81244575 14.1582031,3.81244575 C14.938806,3.81244575 15.656735,3.95567348 16.3120117,4.24213325 L16.0273438,5.03705512 C15.3792285,4.76491834 14.7490265,4.628852 14.1367188,4.628852 C13.6533179,4.628852 13.2755547,4.7326921 13.003418,4.94037543 C12.7312812,5.14805876 12.5952148,5.43630458 12.5952148,5.80512153 C12.5952148,6.07725831 12.6453446,6.30015647 12.7456055,6.4738227 C12.8458664,6.64748893 13.0150541,6.80682979 13.2531738,6.95185004 C13.4912935,7.0968703 13.8556291,7.25710633 14.3461914,7.43256293 C15.1697632,7.72618419 15.736408,8.04128521 16.0461426,8.37787543 C16.3558772,8.71446566 16.5107422,9.15131025 16.5107422,9.68842231 L16.5107422,9.68842231 Z" id="S-" fill="#FFFFFF"></path>
+                    <path d="M9.5,8.5 L18.7195444,7.5" id="Line" stroke="#FFFFFF" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 8.000000) scale(1, -1) translate(-14.109772, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-strike.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>A34F2223-34C6-46AE-AA47-38EC8984E9B3</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off" transform="translate(-358.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_strike" transform="translate(64.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M16.5107422,9.68842231 C16.5107422,10.3795065 16.2600937,10.9184008 15.7587891,11.3051215 C15.2574845,11.6918422 14.5771527,11.8851997 13.7177734,11.8851997 C12.7867792,11.8851997 12.0706405,11.7652464 11.5693359,11.5253364 L11.5693359,10.644477 C11.8916032,10.7805454 12.2425111,10.8879662 12.6220703,10.9667426 C13.0016295,11.0455191 13.3776023,11.0849067 13.75,11.0849067 C14.358727,11.0849067 14.8170558,10.9694293 15.125,10.7384711 C15.4329442,10.507513 15.5869141,10.1861457 15.5869141,9.77435981 C15.5869141,9.50222303 15.5323085,9.27932487 15.4230957,9.10565864 C15.3138829,8.9319924 15.1312676,8.77175638 14.8752441,8.62494575 C14.6192207,8.47813512 14.2298203,8.31163288 13.7070312,8.12543403 C12.9765588,7.86403949 12.4546728,7.55430952 12.1413574,7.19623481 C11.8280421,6.8381601 11.6713867,6.37087962 11.6713867,5.79437934 C11.6713867,5.18923309 11.8987607,4.70762983 12.3535156,4.34955512 C12.8082705,3.99148041 13.409827,3.81244575 14.1582031,3.81244575 C14.938806,3.81244575 15.656735,3.95567348 16.3120117,4.24213325 L16.0273438,5.03705512 C15.3792285,4.76491834 14.7490265,4.628852 14.1367188,4.628852 C13.6533179,4.628852 13.2755547,4.7326921 13.003418,4.94037543 C12.7312812,5.14805876 12.5952148,5.43630458 12.5952148,5.80512153 C12.5952148,6.07725831 12.6453446,6.30015647 12.7456055,6.4738227 C12.8458664,6.64748893 13.0150541,6.80682979 13.2531738,6.95185004 C13.4912935,7.0968703 13.8556291,7.25710633 14.3461914,7.43256293 C15.1697632,7.72618419 15.736408,8.04128521 16.0461426,8.37787543 C16.3558772,8.71446566 16.5107422,9.15131025 16.5107422,9.68842231 L16.5107422,9.68842231 Z" id="S-" fill="#4A4A4A"></path>
+                    <path d="M9.5,8.5 L18.7195444,7.5" id="Line" stroke="#4A4A4A" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 8.000000) scale(1, -1) translate(-14.109772, -8.000000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-underline-o-n.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>FD84FF7C-43E4-4312-90AB-5A59AD018377</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_off-BUTTONS-ON" transform="translate(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_underline_ON" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill="#4A4A4A" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M17.0092773,4.14746094 L17.0092773,9.22851562 C17.0092773,10.1237024 16.738935,10.8273086 16.1982422,11.3393555 C15.6575494,11.8514023 14.9145555,12.1074219 13.9692383,12.1074219 C13.0239211,12.1074219 12.2925644,11.849612 11.7751465,11.3339844 C11.2577285,10.8183568 10.9990234,10.1093795 10.9990234,9.20703125 L10.9990234,4.14746094 L11.9121094,4.14746094 L11.9121094,9.27148438 C11.9121094,9.92676109 12.091144,10.4298485 12.4492188,10.7807617 C12.8072935,11.1316749 13.3336554,11.3071289 14.0283203,11.3071289 C14.6907585,11.3071289 15.2010073,11.1307798 15.559082,10.7780762 C15.9171567,10.4253726 16.0961914,9.91959965 16.0961914,9.26074219 L16.0961914,4.14746094 L17.0092773,4.14746094 Z" id="U" fill="#FFFFFF"></path>
+                    <path d="M9.5,13.5 L18.7195444,13.5" id="Line" stroke="#4A4A4A" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 13.500000) scale(1, -1) translate(-14.109772, -13.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/button-text-underline.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="16px" viewBox="0 0 28 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>13E7EE68-9B16-4A3D-8F9F-31E4BAB7E438</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-390.000000, -745.000000)">
+            <g id="format-buttons-A-Copy" transform="translate(294.000000, 745.000000)">
+                <g id="button_text_underline" transform="translate(96.000000, 0.000000)">
+                    <rect id="Rectangle-108" fill-opacity="0.1" fill="#000000" x="0" y="0" width="28" height="16" rx="8"></rect>
+                    <path d="M17.0092773,4.14746094 L17.0092773,9.22851562 C17.0092773,10.1237024 16.738935,10.8273086 16.1982422,11.3393555 C15.6575494,11.8514023 14.9145555,12.1074219 13.9692383,12.1074219 C13.0239211,12.1074219 12.2925644,11.849612 11.7751465,11.3339844 C11.2577285,10.8183568 10.9990234,10.1093795 10.9990234,9.20703125 L10.9990234,4.14746094 L11.9121094,4.14746094 L11.9121094,9.27148438 C11.9121094,9.92676109 12.091144,10.4298485 12.4492188,10.7807617 C12.8072935,11.1316749 13.3336554,11.3071289 14.0283203,11.3071289 C14.6907585,11.3071289 15.2010073,11.1307798 15.559082,10.7780762 C15.9171567,10.4253726 16.0961914,9.91959965 16.0961914,9.26074219 L16.0961914,4.14746094 L17.0092773,4.14746094 Z" id="U" fill-opacity="0.7" fill="#000000"></path>
+                    <path d="M9.5,13.5 L18.7195444,13.5" id="Line" stroke="#4A4A4A" stroke-linecap="round" opacity="0.5" transform="translate(14.109772, 13.500000) scale(1, -1) translate(-14.109772, -13.500000) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-blocked.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>2805649B-D39D-43EA-A357-659EF9B97BA4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -328.000000)" fill="#BA6363">
+            <path d="M307,340 C310.313708,340 313,337.313708 313,334 C313,330.686292 310.313708,328 307,328 C303.686292,328 301,330.686292 301,334 C301,337.313708 303.686292,340 307,340 Z M304,333 L310,333 L310,335 L304,335 L304,333 Z" id="blocked_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-unencrypted.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="14px" height="12px" viewBox="0 0 14 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>16F5F38E-A6A3-472A-BC13-13F0F12876CF</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.200000003">
+        <g id="typing-indicator" transform="translate(-301.000000, -141.000000)" fill="#000000">
+            <g id="unencrypted_icon" transform="translate(301.000000, 141.000000)">
+                <g id="Lock-Copy" transform="translate(0.000000, 4.000000)">
+                    <g id="Layer_1">
+                        <polygon id="Shape" points="1.33333333 0.666666667 0 0.666666667 0 8 5 8 10 8 10 0.666666667 8.66666667 0.666666667"></polygon>
+                    </g>
+                </g>
+                <g id="Lock-Copy-2" transform="translate(6.000000, 0.000000)">
+                    <g id="Layer_1">
+                        <path d="M7.66666667,3.66666667 C7.66666667,1.63333333 6.03333333,0 4,0 C1.96666667,0 0.333333333,1.63333333 0.333333333,3.66666667 L0.333333333,4.66666667 L7.66666667,4.66666667 L7.66666667,3.66666667 Z M1.66666667,4.66666667 L1.66666667,3.66666667 C1.66666667,2.36666667 2.7,1.33333333 4,1.33333333 C5.3,1.33333333 6.33333333,2.36666667 6.33333333,3.66666667 L6.33333333,4.66666667 L4,4.66666667 L1.66666667,4.66666667 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-verified.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="10px" height="12px" viewBox="0 0 10 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>48BF5D32-306C-4B20-88EB-24B1F743CAC9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-301.000000, -172.000000)" fill="#76CFA6">
+            <path d="M309.666667,175.666667 C309.666667,173.633333 308.033333,172 306,172 C303.966667,172 302.333333,173.633333 302.333333,175.666667 L302.333333,176.666667 L301,176.666667 L301,184 L306,184 L311,184 L311,176.666667 L309.666667,176.666667 L309.666667,175.666667 Z M306,176.666667 L303.666667,176.666667 L303.666667,175.666667 C303.666667,174.366667 304.7,173.333333 306,173.333333 C307.3,173.333333 308.333333,174.366667 308.333333,175.666667 L308.333333,176.666667 L306,176.666667 L306,176.666667 Z" id="verified_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/e2e-warning.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="15px" height="12px" viewBox="0 0 15 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>CCDDE6F6-B552-48FD-AD54-6939841CA2DD</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Typing-Indicator" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="typing-indicator" transform="translate(-299.000000, -294.000000)" fill="#E9BF37">
+            <path d="M313.568455,304.982113 L306.898576,294.310305 C306.776309,294.117108 306.563606,294 306.334971,294 C306.106335,294 305.893632,294.117108 305.771366,294.310305 L299.101486,304.982113 C298.971497,305.189962 298.966004,305.452367 299.087182,305.665474 C299.20836,305.87858 299.436676,306.008036 299.681766,306.002604 L313.021525,306.002604 C313.260642,305.995965 313.477893,305.861783 313.590891,305.650946 C313.703889,305.440108 313.695328,305.184904 313.568455,304.982113 L313.568455,304.982113 Z M307.018633,304.00164 L305.684657,304.00164 L305.684657,302.667664 L307.018633,302.667664 L307.018633,304.00164 Z M307.018633,301.333689 L305.684657,301.333689 L305.684657,297.998749 L307.018633,297.998749 L307.018633,301.333689 Z" id="unverified_icon"></path>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-address-delete.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>943783E9-DBD7-4D4E-BAC9-35437C17C2C4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="Chat-People-2b-Invite-modal" transform="translate(-579.000000, -346.000000)" stroke="#FF0064">
+            <g id="icon_context_delete-copy" transform="translate(580.000000, 346.000000)">
+                <path d="M0.45,0.45 L8.55,8.55" id="Line"></path>
+                <path d="M0.45,0.45 L8.55,8.55" id="Line-Copy-2" transform="translate(4.500000, 4.500000) scale(-1, 1) translate(-4.500000, -4.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-email-user.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>6F488856-F8EF-479C-9747-AB6E0945C7DE</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Chat-Group-5a-Invite-modal" transform="translate(-611.000000, -366.000000)">
+            <g id="Group-6" transform="translate(604.000000, 364.000000)">
+                <g id="icon_email_user" transform="translate(7.000000, 2.000000)">
+                    <circle id="Oval-2" fill="#D8D8D8" cx="12.5" cy="12.5" r="12.5"></circle>
+                    <path d="M19.3007812,12.2265625 C19.3007812,12.9713579 19.1835949,13.6523407 18.9492188,14.2695312 C18.7148426,14.8867218 18.3854188,15.3671858 17.9609375,15.7109375 C17.5364562,16.0546892 17.0455757,16.2265625 16.4882812,16.2265625 C16.0768209,16.2265625 15.7200536,16.1171886 15.4179688,15.8984375 C15.1158839,15.6796864 14.9127609,15.3828144 14.8085938,15.0078125 L14.7148438,15.0078125 C14.4596341,15.4140645 14.1445331,15.718749 13.7695312,15.921875 C13.3945294,16.125001 12.9726586,16.2265625 12.5039062,16.2265625 C11.6549437,16.2265625 10.9869816,15.9531277 10.5,15.40625 C10.0130184,14.8593723 9.76953125,14.1197963 9.76953125,13.1875 C9.76953125,12.114578 10.0924447,11.2434929 10.7382812,10.5742188 C11.3841178,9.90494457 12.2512966,9.5703125 13.3398438,9.5703125 C13.7356791,9.5703125 14.1744768,9.6054684 14.65625,9.67578125 C15.1380232,9.7460941 15.5664044,9.84374937 15.9414062,9.96875 L15.7695312,13.6015625 L15.7695312,13.7890625 C15.7695312,14.6224 16.0403619,15.0390625 16.5820312,15.0390625 C16.9934916,15.0390625 17.3203113,14.7734402 17.5625,14.2421875 C17.8046887,13.7109348 17.9257812,13.0338583 17.9257812,12.2109375 C17.9257812,11.320308 17.7434914,10.5377638 17.3789062,9.86328125 C17.0143211,9.18879871 16.4960971,8.66927266 15.8242188,8.3046875 C15.1523404,7.94010234 14.3815148,7.7578125 13.5117188,7.7578125 C12.4023382,7.7578125 11.4375041,7.98697687 10.6171875,8.4453125 C9.7968709,8.90364813 9.17057508,9.55858949 8.73828125,10.4101562 C8.30598742,11.261723 8.08984375,12.2499944 8.08984375,13.375 C8.08984375,14.8854242 8.49348555,16.0468709 9.30078125,16.859375 C10.108077,17.6718791 11.2669195,18.078125 12.7773438,18.078125 C13.9283912,18.078125 15.1289,17.8437523 16.3789062,17.375 L16.3789062,18.65625 C15.2851508,19.1041689 14.0950585,19.328125 12.8085938,19.328125 C10.8815008,19.328125 9.37891164,18.8085989 8.30078125,17.7695312 C7.22265086,16.7304636 6.68359375,15.2812593 6.68359375,13.421875 C6.68359375,12.0624932 6.9752575,10.8528699 7.55859375,9.79296875 C8.14193,8.73306762 8.95051566,7.92187781 9.984375,7.359375 C11.0182343,6.79687219 12.1887955,6.515625 13.4960938,6.515625 C14.6263077,6.515625 15.6328081,6.74999766 16.515625,7.21875 C17.3984419,7.68750234 18.0833309,8.35546441 18.5703125,9.22265625 C19.0572941,10.0898481 19.3007812,11.0911402 19.3007812,12.2265625 L19.3007812,12.2265625 Z M11.2695312,13.21875 C11.2695312,14.4322977 11.746089,15.0390625 12.6992188,15.0390625 C13.7044321,15.0390625 14.2539058,14.2760493 14.3476562,12.75 L14.4414062,10.8828125 C14.1132796,10.7942704 13.7617206,10.75 13.3867188,10.75 C12.7200488,10.75 12.2005227,10.971352 11.828125,11.4140625 C11.4557273,11.856773 11.2695312,12.4583295 11.2695312,13.21875 L11.2695312,13.21875 Z" id="@" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-invite-people.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>9BA71BF4-DC4F-42D2-B2D0-9EAE0F7F8D45</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Right-panel/Footer" transform="translate(-26.000000, -34.000000)">
+            <g id="icon_invite_people" transform="translate(26.000000, 34.000000)">
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval" fill="#76CFA6"></path>
+                <g id="Group-5" transform="translate(8.000000, 9.000000)" stroke="#FFFFFF">
+                    <g id="Group-3" opacity="0.8" transform="translate(14.437500, 3.937500)" stroke-linecap="round">
+                        <path d="M0,3.28125 L6.5625,3.28125" id="Line"></path>
+                        <path d="M3.28125,0 L3.28125,6.5625" id="Line"></path>
+                    </g>
+                    <g id="icons_people_svg">
+                        <path d="M13.78125,15.75 C13.78125,12.1256313 13.7812503,9.1875 7.21875,9.1875 C0.656249741,9.1875 0.65625,12.1256313 0.65625,15.75 C5.21807306,15.75 7.96856689,15.75 13.78125,15.75 Z" id="Oval-40" stroke-linecap="round" stroke-linejoin="round"></path>
+                        <circle id="Oval" cx="7.21875" cy="3.609375" r="3.609375"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-mx-user.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 113 144" style="enable-background:new 0 0 113 144;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7BC9A4;}
+	.st1{fill:#B47BB5;}
+</style>
+<path class="st0" d="M61.6,0H20.8c-0.1,0-0.2,0-0.3,0C9.2,0,0,9.2,0,20.6v102.9C0,134.8,9.2,144,20.6,144c11.3,0,20.6-9.2,20.6-20.6
+	v-20.6h20.5c28.3,0,51.4-23.1,51.4-51.4S90,0,61.6,0"/>
+<path class="st1" d="M37.4,8.8c6.5,9.3,4.3,22.1-5,28.7c-9.3,6.5-22.1,4.3-28.6-5.1c-6.5-9.3-4.3-22.1,5-28.7
+	C18.1-2.8,30.9-0.5,37.4,8.8"/>
+<path class="st1" d="M109.3,111.6c6.5,9.3,4.3,22.1-5,28.7c-9.3,6.5-22.1,4.3-28.6-5.1l-30.8-44c-6.5-9.3-4.3-22.1,5-28.7
+	c9.3-6.5,22.1-4.3,28.6,5.1L109.3,111.6z"/>
+</svg>

src/skins/vector/img/icon-return.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>B542A09B-DBBF-41D4-A5FD-D05EE1E6BBC4</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Create-group" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Chat-Directory-search-result-ID" transform="translate(-553.000000, -97.000000)" stroke="#4A4A4A">
+            <g id="icon_return" transform="translate(554.000000, 97.000000)">
+                <polyline id="Rectangle" points="7.5 0.5 10.5 0.5 10.5 6.5 0 6.5"></polyline>
+                <g id="Group" transform="translate(0.000000, 1.954545)" stroke-linecap="square">
+                    <path d="M0.227272727,4.40909091 L4.25946916,0.376894528" id="Line"></path>
+                    <path d="M0.227272727,8.44128729 L4.25946916,4.40909091" id="Line-Copy-7" transform="translate(2.243371, 6.425189) scale(1, -1) translate(-2.243371, -6.425189) "></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-text-cancel.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="11px" height="9px" viewBox="0 0 11 9" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>28D80248-63BA-4A5F-9216-4CFE72784BAC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="02_x-Chat-text-input-markdown-panel-MD_on" transform="translate(-915.000000, -749.000000)" stroke="#000000">
+            <g id="icon_text_cancel" transform="translate(916.000000, 749.000000)">
+                <path d="M0.45,0.45 L8.55,8.55" id="Line"></path>
+                <path d="M0.45,0.45 L8.55,8.55" id="Line-Copy-2" transform="translate(4.500000, 4.500000) scale(-1, 1) translate(-4.500000, -4.500000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon_context_person.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="11.000464"
+   height="13"
+   viewBox="0 0 11.000464 13"
+   version="1.1"
+   id="svg4500"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="icon_context_person.svg">
+  <metadata
+     id="metadata4520">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>81230A28-D944-4572-B5DB-C03CAA2B1FCA</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1013"
+     inkscape:window-height="777"
+     id="namedview4518"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="24.48"
+     inkscape:cx="4.9078557"
+     inkscape:cy="9.7756405"
+     inkscape:window-x="495"
+     inkscape:window-y="175"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="icons_people_svg" />
+  <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+  <title
+     id="title4502">81230A28-D944-4572-B5DB-C03CAA2B1FCA</title>
+  <desc
+     id="desc4504">Created with sketchtool.</desc>
+  <defs
+     id="defs4506" />
+  <g
+     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1"
+     id="g4511"
+     transform="translate(-56.999768,-730.5)">
+    <g
+       transform="translate(50,725)"
+       id="icons_people">
+      <g
+         style="stroke:#00000f;stroke-opacity:0.94117647"
+         transform="translate(7,6)"
+         id="icons_people_svg">
+        <path
+           style="stroke:#cecece;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
+           inkscape:connector-curvature="0"
+           id="Oval-40"
+           d="m 10.5,12 c 0,-2.7614237 0,-5 -5,-5 -5.0000002,0 -5,2.2385763 -5,5 3.4756747,0 5.5712891,0 10,0 z" />
+        <circle
+           r="2.75"
+           cy="2.75"
+           cx="5.5"
+           id="Oval"
+           style="stroke:#cecece;stroke-opacity:1" />
+      </g>
+    </g>
+  </g>
+</svg>