Merge branch 'develop' into matthew/scalar

.gitignore

@@ -1,5 +1,4 @@
 /cert.pem
-/.DS_Store
 /karma-reports
 /key.pem
 /lib
@@ -8,3 +7,4 @@
 /vector/bundle.*
 /vector/components.css
 /vector/config.json
+.DS_Store

README.md

@@ -5,9 +5,13 @@ Vector is a Matrix web client built using the Matrix React SDK (https://github.c
 
 Getting Started
 ===============
-Vector is a modular webapp built with modern ES6 and requires and npm build system to build.
+
-Instructions for building are below, but building from source shouldn't be necessary
+The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta.
-for simple deployments.
+The develop branch is continuously deployed by Jenkins at https://vector.im/develop for
+those who like living dangerously. 
+
+To host your own copy of Vector, the quickest bet is to use a pre-built released version
+of Vector:
 
 1. Download the latest version from https://vector.im/packages/
 1. Untar the tarball on your web server
@@ -19,10 +23,10 @@ for simple deployments.
 Building From Source
 ====================
 
-If you do wish to build vector from source:
+Vector is a modular webapp built with modern ES6 and requires a npm build system to build.
 
 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
+1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git`
 1. Switch to the vector directory: `cd vector-web`
 1. Install the prerequisites: `npm install`
 1. If you are using the `develop` branch of vector, you will probably need to
@@ -49,19 +53,73 @@ You can configure the app by copying `vector/config.sample.json` to
 1. `default_hs_url` is the default home server url.
 1. `default_is_url` is the default identity server url (this is the server used
    for verifying third party identifiers like email addresses). If this is blank,
-   registering with an email address or adding an email address to your account
+   registering with an email address, adding an email address to your account,
-   will not work.
+   or inviting users via email address will not work.  Matrix identity servers are
+   very simple web services which map third party identifiers (currently only email 
+   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.
+
+
+Running as a Desktop app
+========================
+
+In future we'll do an official distribution of Vector as an desktop app.  Meanwhile,
+there are a few options:
+
+@asdf:matrix.org points out that you can use nativefier and it just works(tm):
+
+```
+sudo npm install nativefier -g
+nativefier https://vector.im/beta/
+```
+
+krisa has a dedicated electron project at https://github.com/krisak/vector-electron-desktop
+(although you should swap out the 'vector' folder for the latest vector tarball you want to run)
+
+There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop
+
 
 Development
 ===========
 
+Before attempting to develop on Vector you **must** read the developer guide
+for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which
+also defines the design, architecture and style for Vector too.
+
+The idea of Vector is to be a relatively lightweight "skin" of customisations on
+top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
+higher and lower level React components useful for building Matrix communication
+apps using React.
+
+After creating a new component you must run `npm run reskindex` to regenerate
+the `component-index.js` for the app (used in future for skinning)
+
+**However, as of July 2016 this layering abstraction is broken due to rapid
+development on Vector forcing `matrix-react-sdk` to move fast at the expense of
+maintaining a clear abstraction between the two.**  Hacking on Vector inevitably
+means hacking equally on `matrix-react-sdk`, and there are bits of
+`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project
+(e.g. matrix-react-sdk specific CSS), and a bunch of Vector specific behaviour
+in the `matrix-react-sdk` (grep for Vector).  This separation problem will be
+solved asap once development on Vector (and thus matrix-react-sdk) has
+stabilised.  Until then, the two projects should basically be considered as a
+single unit.  In particular, `matrix-react-sdk` issues are currently filed
+against `vector-web` in github.
+
+Please note that Vector is intended to run correctly without access to the public
+internet.  So please don't depend on resources (JS libs, CSS, images, fonts)
+hosted by external CDNs or servers but instead please package all dependencies
+into Vector itself.
+
+Setting up a dev environment
+============================
+
 Much of the functionality in Vector is actually in the `matrix-react-sdk` and
 `matrix-js-sdk` modules. It is possible to set these up in a way that makes it
 easy to track the `develop` branches in git and to make local changes without
 having to manually rebuild each time.
 
-[Be aware that there may be problems with this process under npm version 3.]
-
 First clone and build `matrix-js-sdk`:
 
 1. `git clone git@github.com:matrix-org/matrix-js-sdk.git`
@@ -115,6 +173,37 @@ will watch for changes to the files and rebuild automatically.
 If you add or remove any components from the Vector skin, you will need to rebuild
 the skin's index by running, `npm run reskindex`.
 
+Filing issues
+=============
+
+All issues for Vector-web and Matrix-react-sdk should be filed at
+https://github.com/matrix-org/matrix-react-sdk/issues
+
+Triaging issues
+===============
+
+Issues will be triaged by the core team using the following primary set of tags:
+
+priority:
+    P1: top priority; typically blocks releases.
+    P2: one below that
+    P3: non-urgent
+    P4/P5: bluesky some day, who knows.
+
+bug or feature:
+  bug severity:
+     * cosmetic - feature works functionally but UI/UX is broken.
+     * critical - whole app doesn't work
+     * major - entire feature doesn't work
+     * minor - partially broken feature (but still usable)
+
+     * release blocker
+
+     * ui/ux (think of this as cosmetic)
+
+     * network (specific to network conditions)
+     * platform (platform specific)
+
 Enabling encryption
 ===================
 
@@ -123,10 +212,7 @@ day-to-day use; it is experimental and should be considered only as a
 proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
 of the current progress.
 
-To build a version of vector with support for end-to-end encryption, install
+Vector is built with support for end-to-end encryption by default.
-the olm module with `npm i https://matrix.org/packages/npm/olm/olm-0.1.0.tgz`
-before running `npm start`. The olm library will be detected and used if
-available.
 
 To enable encryption for a room, type
 
@@ -142,4 +228,4 @@ Note that historical encrypted messages cannot currently be decoded - history
 is therefore lost when the page is reloaded.
 
 There is currently no visual indication of whether encryption is enabled for a
-room, or whether a particular message was encrypted.
+room.

package.json

@@ -17,16 +17,17 @@
     "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": "npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:staticfiles": "scripts/staticfiles.js",
-    "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
+    "build": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:dev": "npm run build:staticfiles && npm run build:css && npm run build:compile && npm run build:bundle:dev",
     "package": "scripts/package.sh",
     "start:js": "webpack -w src/vector/index.js vector/bundle.js",
     "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",
     "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
     "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
-    "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start": "parallelshell \"npm run build:staticfiles\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start:prod": "parallelshell \"npm run build:staticfiles\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
+    "clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
     "prepublish": "npm run build:css && npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
     "test:multi": "karma start"
@@ -39,7 +40,7 @@
     "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#87ebaa7",
+    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.0.0-beta.4",
@@ -47,11 +48,11 @@
     "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
-    "react": "^15.0.1",
+    "react": "^15.2.1",
     "react-dnd": "^2.1.4",
     "react-dnd-html5-backend": "^2.1.2",
-    "react-dom": "^15.0.1",
+    "react-dom": "^15.2.1",
-    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#c3d942e",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.11.1"
   },
   "devDependencies": {
@@ -61,6 +62,7 @@
     "catw": "^1.0.1",
     "css-raw-loader": "^0.1.1",
     "expect": "^1.16.0",
+    "fs-extra": "^0.30.0",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
@@ -74,10 +76,13 @@
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "react-addons-test-utils": "^15.0.1",
     "react-addons-perf": "^15.0",
+    "react-addons-test-utils": "^15.0.1",
     "rimraf": "^2.4.3",
     "source-map-loader": "^0.1.5",
     "webpack": "^1.12.14"
+  },
+  "optionalDependencies": {
+    "olm": "https://matrix.org/packages/npm/olm/olm-1.0.0.tgz"
   }
 }

scripts/staticfiles.js

@@ -0,0 +1,21 @@
+#!/usr/bin/env node
+
+// copy static files from node_modules to the vector directory
+//
+
+var fs = require('fs-extra');
+
+function exists(f) {
+    try {
+        fs.statSync(f);
+        return true;
+    } catch(e) {
+        return false;
+    }
+}
+
+const olm = 'node_modules/olm/olm.js';
+if (exists(olm)) {
+    console.log("copy", olm, "-> vector");
+    fs.copySync(olm, 'vector/olm.js');
+}

src/component-index.js

@@ -34,6 +34,8 @@ module.exports.components['structures.RoomDirectory'] = require('./components/st
 module.exports.components['structures.RoomSubList'] = require('./components/structures/RoomSubList');
 module.exports.components['structures.SearchBox'] = require('./components/structures/SearchBox');
 module.exports.components['structures.ViewSource'] = require('./components/structures/ViewSource');
+module.exports.components['views.context_menus.MessageContextMenu'] = require('./components/views/context_menus/MessageContextMenu');
+module.exports.components['views.context_menus.NotificationStateContextMenu'] = require('./components/views/context_menus/NotificationStateContextMenu');
 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');
@@ -46,7 +48,6 @@ module.exports.components['views.messages.DateSeparator'] = require('./component
 module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
 module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile');
 module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile');
-module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu');
 module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView');
 module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
 module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');

src/components/structures/BottomLeftMenu.js

@@ -52,13 +52,13 @@ module.exports = React.createClass({
             <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="24" height="24"/>
+                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25"/>
                     </div>
                     <div className="mx_BottomLeftMenu_directory" title="Room directory" onClick={ this.onRoomDirectoryClick }>
-                        <TintableSvg src="img/icons-directory.svg" width="24" height="24"/>
+                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
                     </div>
                     <div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
-                        <TintableSvg src="img/icons-settings.svg" width="24" height="24"/>
+                        <TintableSvg src="img/icons-settings.svg" width="25" height="25"/>
                     </div>
                 </div>
             </div>

src/components/structures/CompatibilityPage.js

@@ -45,8 +45,8 @@ module.exports = React.createClass({
                 available or experimental in your current browser.
                 </p>
                 <p>
-                Please install <a href="https://www.google.com/chrome">Chrome</a> for
+                Please install <a href="https://www.google.com/chrome">Chrome</a> or
-                the best experience. <a href="https://getfirefox.com">Firefox</a>,
+                <a href="https://getfirefox.com">Firefox</a> for the best experience.
                 <a href="http://apple.com/safari">Safari</a> and
                 <a href="http://opera.com">Opera</a> work too.
                 </p>

src/components/structures/RightPanel.js

@@ -136,8 +136,8 @@ module.exports = React.createClass({
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                             { membersBadge }
+                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">

src/components/structures/RoomDirectory.js

@@ -52,6 +52,18 @@ module.exports = React.createClass({
     },
 
     componentDidMount: function() {
+        this.getPublicRooms();
+    },
+
+    componentWillUnmount: function() {
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 1.0,
+        //     middleOpacity: 1.0,
+        // });
+    },
+
+    getPublicRooms: function() {
         var self = this;
         MatrixClientPeg.get().publicRooms(function (err, data) {
             if (err) {
@@ -68,35 +80,79 @@ module.exports = React.createClass({
                     publicRooms: data.chunk,
                     loading: false,
                 });
-                self.forceUpdate();
             }
         });
     },
 
-    componentWillUnmount: function() {
+    /**
-        // dis.dispatch({
+     * A limited interface for removing rooms from the directory.
-        //     action: 'ui_opacity',
+     * Will set the room to not be publicly visible and delete the
-        //     sideOpacity: 1.0,
+     * default alias. In the long term, it would be better to allow
-        //     middleOpacity: 1.0,
+     * HS admins to do this through the RoomSettings interface, but
-        // });
+     * this needs SPEC-417.
+     */
+    removeFromDirectory: function(room) {
+        var alias = get_display_alias_for_room(room);
+        var name = room.name || alias || "Unnamed room";
+
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        var desc;
+        if (alias) {
+            desc = `Delete the room alias '${alias}' and remove '${name}' from the directory?`;
+        } else {
+            desc = `Remove '${name}' from the directory?`;
+        }
+
+        Modal.createDialog(QuestionDialog, {
+            title: "Remove from Directory",
+            description: desc,
+            onFinished: (should_delete) => {
+                if (!should_delete) return;
+
+                var Loader = sdk.getComponent("elements.Spinner");
+                var modal = Modal.createDialog(Loader);
+                var step = `remove '${name}' from the directory.`;
+
+                MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
+                    if (!alias) return;
+                    step = 'delete the alias.';
+                    return MatrixClientPeg.get().deleteAlias(alias);
+                }).done(() => {
+                    modal.close();
+                    this.getPublicRooms();
+                }, function(err) {
+                    modal.close();
+                    this.getPublicRooms();
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Failed to "+step,
+                        description: err.toString()
+                    });
+                });
+            }
+        });
     },
 
-    showRoom: function(roomId, roomAlias) {
+    onRoomClicked: function(room, ev) {
-        // extract the metadata from the publicRooms structure to pass
+        if (ev.shiftKey) {
-        // as out-of-band data to view_room, because we get information
+            ev.preventDefault();
-        // here that we can't get other than by joining the room in some
+            this.removeFromDirectory(room);
-        // cases.
+        } else {
-        var room;
+            this.showRoom(room);
-        if (roomId) {
-            for (var i = 0; i < this.state.publicRooms.length; ++i) {
-                if (this.state.publicRooms[i].room_id == roomId) {
-                    room = this.state.publicRooms[i];
-                    break;
-                }
-            }
         }
-        var oob_data = {};
+    },
+
+    showRoomAlias: function(alias) {
+        this.showRoom(null, alias);
+    },
+
+    showRoom: function(room, room_alias) {
+        var payload = {action: 'view_room'};
         if (room) {
+            // Don't let the user view a room they won't be able to either
+            // peek or join: fail earlier so they don't have to click back
+            // to the directory.
             if (MatrixClientPeg.get().isGuest()) {
                 if (!room.world_readable && !room.guest_can_join) {
                     var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
@@ -108,26 +164,25 @@ module.exports = React.createClass({
                 }
             }
 
-            oob_data = {
+            if (!room_alias) {
+                room_alias = get_display_alias_for_room(room);
+            }
+
+            payload.oob_data = {
                 avatarUrl: room.avatar_url,
                 // XXX: This logic is duplicated from the JS SDK which
                 // would normally decide what the name is.
-                name: room.name || room.canonical_alias || (room.aliases ? room.aliases[0] : "Unnamed room"),
+                name: room.name || room_alias || "Unnamed room",
             };
         }
-
-        var payload = {
-            oob_data: oob_data,
-            action: 'view_room',
-        };
         // It's not really possible to join Matrix rooms by ID because the HS has no way to know
         // which servers to start querying. However, there's no other way to join rooms in
         // this list without aliases at present, so if roomAlias isn't set here we have no
         // choice but to supply the ID.
-        if (roomAlias) {
+        if (room_alias) {
-            payload.room_alias = roomAlias;
+            payload.room_alias = room_alias;
         } else {
-            payload.room_id = roomId;
+            payload.room_id = room.room_id;
         }
         dis.dispatch(payload);
     },
@@ -150,8 +205,7 @@ module.exports = React.createClass({
         var self = this;
         var guestRead, guestJoin, perms;
         for (var i = 0; i < rooms.length; i++) {
-            var alias = rooms[i].canonical_alias || (rooms[i].aliases ? rooms[i].aliases[0] : "");
+            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
-            var name = rooms[i].name || alias || "Unnamed room";
             guestRead = null;
             guestJoin = null;
 
@@ -175,7 +229,11 @@ module.exports = React.createClass({
             topic = linkifyString(sanitizeHtml(topic));
 
             rows.unshift(
-                <tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id, alias)}>
+                <tr key={ rooms[i].room_id }
+                    onClick={self.onRoomClicked.bind(self, rooms[i])}
+                    // cancel onMouseDown otherwise shift-clicking highlights text
+                    onMouseDown={(ev) => {ev.preventDefault();}}
+                >
                     <td className="mx_RoomDirectory_roomAvatar">
                         <BaseAvatar width={24} height={24} resizeMethod='crop'
                             name={ name } idName={ name }
@@ -189,7 +247,7 @@ module.exports = React.createClass({
                         <div className="mx_RoomDirectory_topic"
                              onClick={ function(e) { e.stopPropagation() } }
                              dangerouslySetInnerHTML={{ __html: topic }}/>
-                        <div className="mx_RoomDirectory_alias">{ alias }</div>
+                        <div className="mx_RoomDirectory_alias">{ get_display_alias_for_room(rooms[i]) }</div>
                     </td>
                     <td className="mx_RoomDirectory_roomMemberCount">
                         { rooms[i].num_joined_members }
@@ -204,7 +262,7 @@ module.exports = React.createClass({
         this.forceUpdate();
         this.setState({ roomAlias : this.refs.roomAlias.value })
         if (ev.key == "Enter") {
-            this.showRoom(null, this.refs.roomAlias.value);
+            this.showRoomAlias(this.refs.roomAlias.value);
         }
     },
 
@@ -224,8 +282,7 @@ module.exports = React.createClass({
                 <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"
+                    <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
-                                     relayoutOnUpdate={false} >
                         <table ref="directory_table" className="mx_RoomDirectory_table">
                             <tbody>
                                 { this.getRows(this.state.roomAlias) }
@@ -237,3 +294,9 @@ module.exports = React.createClass({
         );
     }
 });
+
+// Similar to matrix-react-sdk's MatrixTools.getDisplayAliasForRoom
+// but works with the objects we get from the public room list
+function get_display_alias_for_room(room) {
+    return  room.canonical_alias || (room.aliases ? room.aliases[0] : "");
+}

src/components/structures/RoomSubList.js

@@ -61,8 +61,12 @@ var RoomSubList = React.createClass({
         label: React.PropTypes.string.isRequired,
         tagName: React.PropTypes.string,
         editable: React.PropTypes.bool,
+
         order: React.PropTypes.string.isRequired,
-        selectedRoom: React.PropTypes.string.isRequired,
+
+        // undefined if no room is selected (eg we are showing settings)
+        selectedRoom: React.PropTypes.string,
+
         startAsHidden: React.PropTypes.bool,
         showSpinner: React.PropTypes.bool, // true to show a spinner if 0 elements when expanded
         collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?

src/components/structures/SearchBox.js

@@ -94,7 +94,7 @@ module.exports = React.createClass({
                     <TintableSvg
                         key="button"
                         className="mx_SearchBox_searchButton"
-                        src="img/right_search.svg" width="24" height="24"
+                        src="img/icons-search-copy.svg" width="13" height="13"
                     />,
                     <input
                         key="searchfield"

src/components/views/context_menus/MessageContextMenu.js

@@ -47,7 +47,7 @@ module.exports = React.createClass({
         var ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createDialog(ViewSource, {
             mxEvent: this.props.mxEvent
-        });
+        }, 'mx_Dialog_viewsource');
         if (this.props.onFinished) this.props.onFinished();
     },
 
@@ -95,7 +95,7 @@ module.exports = React.createClass({
 
         if (eventStatus === 'not_sent') {
             resendButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
                     Resend
                 </div>
             );
@@ -103,7 +103,7 @@ module.exports = React.createClass({
 
         if (!eventStatus) { // sent
             redactButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onRedactClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
                     Redact
                 </div>
             );
@@ -111,14 +111,14 @@ module.exports = React.createClass({
 
         if (eventStatus === "queued" || eventStatus === "not_sent") {
             cancelButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onCancelSendClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
                     Cancel Sending
                 </div>
             );
         }
 
         viewSourceButton = (
-            <div className="mx_ContextualMenu_field" onClick={this.onViewSourceClick}>
+            <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
                 View Source
             </div>
         );
@@ -126,7 +126,7 @@ module.exports = React.createClass({
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
-                    <div className="mx_ContextualMenu_field" onClick={this.onUnhidePreviewClick}>
+                    <div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
                         Unhide Preview
                     </div>
                 )
@@ -136,7 +136,7 @@ module.exports = React.createClass({
         // XXX: this should be https://matrix.to.
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         permalinkButton = (
-            <div className="mx_ContextualMenu_field">
+            <div className="mx_MessageContextMenu_field">
                 <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
                    onClick={ this.onPermalinkClick }>Permalink</a>
             </div>

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -0,0 +1,150 @@
+/*
+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 q = require("q");
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = React.createClass({
+    displayName: 'NotificationStateContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        var areNotifsMuted = false;
+        var cli = MatrixClientPeg.get();
+        if (!cli.isGuest()) {
+            var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
+            if (roomPushRule) {
+                if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
+                    areNotifsMuted = true;
+                }
+            }
+        }
+
+        return {
+            areNotifsMuted: areNotifsMuted,
+        };
+    },
+
+    _save: function( isMuted ) {
+        var self = this;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+
+        if (!cli.isGuest()) {
+            cli.setRoomMutePushRule(
+                "global", roomId, isMuted
+            ).then(function() {
+                self.setState({areNotifsMuted: isMuted});
+
+                // delay slightly so that the user can see their state change
+                // before closing the menu
+                q.delay(500).then(function() {
+                    // tell everyone that wants to know of the change in
+                    // notification state
+                    dis.dispatch({
+                        action: 'notification_change',
+                        roomId: self.props.room.roomId,
+                        isMuted: isMuted,
+                    });
+
+                    // Close the context menu
+                    if (self.props.onFinished) {
+                        self.props.onFinished();
+                    };
+                });
+            }).fail(function(error) {
+                // TODO: some form of error notification to the user
+                // to inform them that their state change failed.
+            });
+        }
+    },
+
+    _onClickAlertMe: function() {
+        // Placeholder
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(false);
+    },
+
+    _onClickMentions: function() {
+        // Placeholder
+    },
+
+    _onClickMute: function() {
+        this._save(true);
+    },
+
+    render: function() {
+        var cli = MatrixClientPeg.get();
+
+        var alertMeClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
+        var allNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
+        });
+
+        var mentionsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
+        });
+
+        return (
+            <div>
+                <div className="mx_NotificationStateContextMenu_picker" >
+                    <img src="img/notif-slider.svg" width="20" height="107" />
+                </div>
+                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    All messages (loud)
+                </div>
+                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    All messages
+                </div>
+                <div className={ mentionsClasses } onClick={this._onClickMentions} >
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    Mentions only
+                </div>
+                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
+                    Mute
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/globals/MatrixToolbar.js

@@ -35,7 +35,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_MatrixToolbar">
                 <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
+                <div className="mx_MatrixToolbar_content">
                     You are not receiving desktop notifications. <a className="mx_MatrixToolbar_link" onClick={ this.onClick }>Enable them now</a>
                 </div>
                 <div className="mx_MatrixToolbar_close"><img src="img/cancel.svg" width="18" height="18" onClick={ this.hideToolbar } /></div>
@@ -43,4 +43,3 @@ module.exports = React.createClass({
         );
     }
 });
-

src/components/views/settings/Notifications.js

@@ -24,7 +24,7 @@ var Modal = require('matrix-react-sdk/lib/Modal');
 
 var notifications = require('../../../notifications');
 
-// TODO: this "view" component still has far to much application logic in it,
+// TODO: this "view" component still has far too much application logic in it,
 // which should be factored out to other files.
 
 // TODO: this component also does a lot of direct poking into this.state, which

src/skins/vector/css/common.css

@@ -58,6 +58,11 @@ input[type=text]:focus, textarea:focus {
     box-shadow: none;
 }
 
+/* Prevent ugly dotted highlight around selected elements in Firefox */
+::-moz-focus-inner {
+    border: 0;
+}
+
 /* applied to side-panels and messagepanel when in RoomSettings */
 .mx_fadable {
     opacity: 1;
@@ -80,50 +85,6 @@ input[type=text]:focus, textarea:focus {
     border-left: 6px solid transparent;
 }
 
-.mx_ContextualMenu_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1.0;
-    z-index: 2000;
-}
-
-.mx_ContextualMenu {
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #747474;
-    position: fixed;
-    z-index: 2001;
-    padding: 6px;
-}
-
-.mx_ContextualMenu_chevron_right {
-    padding: 12px;
-    position: absolute;
-    right: -21px;
-    top: 0px;
-}
-
-.mx_ContextualMenu_chevron_left {
-    padding: 12px;
-    position: absolute;
-    left: -21px;
-    top: 0px;
-}
-
-.mx_ContextualMenu_field {
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
-}
-
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
-}
-
 .mx_Dialog_wrapper {
     position: fixed;
     z-index: 4000;
@@ -143,16 +104,31 @@ input[type=text]:focus, textarea:focus {
     justify-content: center;
 }
 
+/* Spinner Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_spinner .mx_Dialog {
+    width: auto;
+    border-radius: 8px;
+    padding-left: 0px;
+    box-shadow: none;
+}
+
+/* View Source Dialog overide */
+.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
 .mx_Dialog {
     background-color: #fff;
     color: #747474;
-    text-align: center;
     z-index: 4010;
     font-weight: 300;
     font-size: 15px;
     position: relative;
-    border-radius: 8px;
+    padding-left: 58px;
-    max-width: 80%;
+    width: 60%;
+    max-width: 704px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .mx_Dialog_background {
@@ -161,12 +137,13 @@ input[type=text]:focus, textarea:focus {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #000;
+    background-color: #e9e9e9;
-    opacity: 0.2;
+    opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
+    background-color: #000;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {
@@ -180,34 +157,45 @@ input[type=text]:focus, textarea:focus {
 }
 
 .mx_Dialog_content {
-    margin: 24px;
+    margin: 24px 58px 68px 0;
+    font-size: 14px;
+    color: #4a4a4a;
+    word-wrap: break-word;
 }
 
 .mx_Dialog_buttons {
-    padding-bottom: 24px;
+    padding-bottom: 36px;
 }
 
 .mx_Dialog button, .mx_Dialog input[type="submit"] {
     border: 0px;
     height: 36px;
-    border-radius: 36px;
+    border-radius: 40px;
+    border: solid 1px #76cfa6;
     font-weight: 400;
     font-size: 15px;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+
+    color: #76cfa6;
+    background-color: #fff;
+}
+
+.mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
     color: #fff;
     background-color: #76cfa6;
-    margin-left: 8px;
-    margin-right: 8px;
-    padding-left: 1em;
-    padding-right: 1em;
 }
 
 .mx_Dialog_title {
     min-height: 16px;
-    padding: 12px;
+    padding-top: 40px;
-    border-bottom: 1px solid #a4a4a4;
     font-weight: bold;
-    font-size: 18px;
+    font-size: 22px;
     line-height: 1.4;
+    color: #454545;
 }
 
 .mx_TextInputDialog_label {
@@ -238,3 +226,15 @@ input[type=text]:focus, textarea:focus {
     background-color: #76CFA6;
     color: white;
 }
+
+/** green button with rounded corners */
+.textButton {
+    color: #fff;
+    background-color: #76cfa6;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    cursor: pointer;
+    display: inline;
+}

src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.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_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1.0;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu {
+    border: solid 1px rgba(187, 187, 187, 0.5);
+    border-radius: 4px;
+    background-color: #f6f6f6;
+    color: #4a4a4a;
+    position: absolute;
+    padding: 6px;
+	font-size: 14px;
+    z-index: 2001;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_right {
+    right: 8px;
+}
+
+.mx_ContextualMenu_chevron_right {
+    position: absolute;
+    right: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 8px solid rgba(187, 187, 187, 0.5);
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_right:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-left: 7px solid #f6f6f6;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    right: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_left {
+    left: 8px;
+}
+
+.mx_ContextualMenu_chevron_left {
+    position: absolute;
+    left: -8px;
+    top: 0px;
+    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_ContextualMenu_chevron_left:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid #f6f6f6;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    left: 1px;
+}
+
+.mx_ContextualMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.mx_ContextualMenu_spinner {
+    display: block;
+    margin: 0 auto;
+}

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

@@ -93,8 +93,8 @@ limitations under the License.
 
     background-color: #eaf5f0;
 
-    -webkit-flex: 0 0 210px;
+    -webkit-flex: 0 0 235px;
-    flex: 0 0 210px;
+    flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {

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

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_SearchBox {
     height: 24px;
-    margin-left: 16px;
+    margin-left: 18px;
-    margin-right: 20px;
+    margin-right: 18px;
     padding-top: 24px;
     padding-bottom: 22px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -28,11 +28,13 @@ limitations under the License.
 
 .mx_SearchBox_searchButton {
     margin-right: 10px;
+    margin-top: 5px;
     pointer-events: none;
 }
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
+    margin-top: -5px;
 }
 
 .mx_SearchBox_search {
@@ -65,4 +67,4 @@ limitations under the License.
 
 .mx_SearchBox object {
     pointer-events: none;
-}
+}

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

@@ -100,6 +100,16 @@ limitations under the License.
     margin-bottom: 28px;
 }
 
+.mx_UserSettings_toggle input {
+    width: 16px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+
+.mx_UserSettings_toggle label {
+    padding-bottom: 21px;
+}
+
 .mx_UserSettings_accountTable
 .mx_UserSettings_notifTable
 {

src/skins/vector/css/matrix-react-sdk/structures/login/Login.css

@@ -131,9 +131,19 @@ limitations under the License.
 }
 
 .mx_Login_loader {
-    position: absolute;
+    display: inline;
-    left: 50%;
+    position: relative;
-    margin-top: 12px;
+    top: 2px;
+    left: 8px;
+}
+
+.mx_Login_loader .mx_Spinner {
+    display: inline;
+}
+
+.mx_Login_loader .mx_Spinner img {
+    width: 16px;
+    height: 16px;
 }
 
 .mx_Login_error {

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

@@ -17,3 +17,8 @@ limitations under the License.
 .mx_MTextBody {
     white-space: pre-wrap;
 }
+
+.mx_MTextBody pre{
+  overflow-y: auto;
+  max-height: 30vh;
+}

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

@@ -0,0 +1,16 @@
+/*
+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_UnknownBody {
+    white-space: pre-wrap;
+}

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

@@ -0,0 +1,67 @@
+.mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid #e5e5e5;
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_Autocomplete_ProviderSection {
+    padding: 12px;
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.mx_Autocomplete_ProviderSection * {
+    padding: 2px;
+    border-radius: 4px;
+}
+
+.mx_Autocomplete_Completion {
+    user-select: none;
+    cursor: pointer;
+    transition: 0.3s all ease;
+    display: flex;
+    align-items: center;
+}
+
+.mx_Autocomplete_Completion.selected * {
+    transition: 0.3s all ease;
+}
+
+.mx_Autocomplete_Completion.selected {
+    background: #76cfa6;
+    color: white;
+    outline: none;
+}
+
+.mx_Autocomplete_Completion.selected * {
+    color: white !important;
+}
+
+.mx_Autocomplete_provider_name {
+    color: #76cfa6;
+    font-weight: 600;
+}
+
+.autocomplete-enter {
+    opacity: 0.01;
+}
+
+.autocomplete-enter.autocomplete-enter-active {
+    opacity: 1;
+    transition: opacity 300ms ease-in;
+}
+
+.autocomplete-leave {
+    opacity: 1;
+}
+
+.autocomplete-leave.autocomplete-leave-active {
+    opacity: 0.01;
+    transition: opacity 300ms ease-in;
+}

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

@@ -87,14 +87,17 @@ limitations under the License.
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
 .mx_EntityTile_unavailable .mx_EntityTile_name,
-.mx_EntityTile_unavailable .mx_EntityTile_name_hover
+.mx_EntityTile_unavailable .mx_EntityTile_name_hover,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name,
+.mx_EntityTile_offline_beenactive .mx_EntityTile_name_hover
 {
     opacity: 0.66;
 }
 
-.mx_EntityTile_offline .mx_EntityTile_avatar,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
-.mx_EntityTile_offline .mx_EntityTile_name,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
-.mx_EntityTile_offline .mx_EntityTile_name_hover
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }

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

@@ -76,6 +76,11 @@ limitations under the License.
     overflow-x: hidden;
 }
 
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
+}
+
 /* Various markdown overrides */
 
 .mx_EventTile_content .markdown-body {
@@ -115,6 +120,10 @@ limitations under the License.
 
 /* end of overrides */
 
+.mx_EventTile_bigEmoji {
+    font-size: 48px ! important;
+}
+
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */

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

@@ -16,18 +16,18 @@ limitations under the License.
 
 .mx_MemberDeviceInfo {
     font-size: 12px;
-    margin-top: 5px;
+    display: table-row;
+    height: 17px;
 }
 
 .mx_MemberDeviceInfo div {
-    display: inline;
+    display: table-cell;
-    margin-right: 5px;
 }
 
 .mx_MemberDeviceInfo_textButton {
     color: #fff;
-    height: 20px;
+    background-color: #76cfa6;
-    border-radius: 20px;
+    border-radius: 17px;
     text-align: center;
     padding-left: 1em;
     padding-right: 1em;
@@ -35,10 +35,23 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_MemberDeviceInfo_verify {
+.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;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
     background-color: #76cfa6;
 }
 
-.mx_MemberDeviceInfo_unverify {
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
+    background-color: #eca46f;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
     background-color: #e55e5e;
-}
+}

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

@@ -72,3 +72,8 @@ limitations under the License.
     margin-left: 8px;
     line-height: 23px;
 }
+
+.mx_MemberInfo_devices {
+    display: table;
+    border-spacing: 5px;
+}

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

@@ -21,6 +21,11 @@ limitations under the License.
     border-top: 1px solid #e5e5e5;
 }
 
+.mx_MessageComposer_autocomplete_wrapper {
+    position: relative;
+    height: 0;
+}
+
 .mx_MessageComposer_row {
     display: flex;
     flex-direction: row;
@@ -104,9 +109,10 @@ limitations under the License.
 .mx_MessageComposer_videocall {
     /*display: table-cell;*/
     /*vertical-align: middle;*/
-    padding-left: 10px;
+    /*padding-left: 10px;*/
-    padding-right: 10px;
+    padding-right: 5px;
     cursor: pointer;
+    padding-top: 4px;
 }
 
 .mx_MessageComposer_upload object,
@@ -116,16 +122,3 @@ limitations under the License.
     pointer-events: none;
 }
 
-.mx_MessageComposer_videocall {
-    padding-right: 10px;
-    padding-top: 4px;
-}
-
-.mx_MessageComposer_voicecall {
-    padding-right: 10px;
-    padding-top: 4px;
-}
-
-.mx_MessageComposer_upload object {
-    margin-top: 5px;
-}

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

@@ -103,7 +103,8 @@ limitations under the License.
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
     background-color: #fff;
-
+    display: flex;
+    align-items: center;
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
@@ -161,13 +162,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_settingsButton {
-    display: inline-block;
-    position: relative;
-    bottom: 10px;
-    left: 4px;
-}
-
 .mx_RoomHeader_settingsButton object {
     pointer-events: none;
 }
@@ -183,10 +177,6 @@ limitations under the License.
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leaveButton {
-    margin-top: -1px;
-}
-
 .mx_RoomHeader_placeholder {
     color: #a2a2a2 ! important;
 }
@@ -243,10 +233,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_button {
-    display: table-cell;
+    margin-left: 8px;
-    vertical-align: top;
-    padding-left: 8px;
-    padding-right: 8px;
     cursor: pointer;
 }
 

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

@@ -15,33 +15,47 @@ limitations under the License.
 */
 
 .mx_RoomTile {
-    cursor: pointer;
-    /* This fixes wrapping of long room names, but breaks drag & drop previews */
-    /* display: table-row; */
-    font-size: 13px;
     position: relative;
+    cursor: pointer;
+    font-size: 13px;
+    display: block;
+    height: 34px;
+}
+
+.mx_RoomTile .mx_RoomTile_mute {
+    opacity: 0.4;
+}
+
+.mx_RoomTile_nameContainer {
+    display: inline-block;
+    width: 180px;
+    height: 24px;
 }
 
 .mx_RoomTile_avatar {
-    display: table-cell;
+    display: inline-block;
-    padding-right: 11px;
+    padding-top: 5px;
-    padding-top: 6px;
+    padding-bottom: 5px;
-    padding-bottom: 6px;
     padding-left: 18px;
+    padding-right: 6px;
     width: 24px;
     height: 24px;
-    position: relative;
     vertical-align: middle;
 }
 
 .mx_RoomTile_name {
-    display: table-cell;
+    display: inline-block;
-    width: 100%;
+    position: relative;
+    width: 165px;
     vertical-align: middle;
-    overflow: hidden;
+    padding-left: 6px;
-    word-break: break-word;
+    padding-right: 6px;
-    padding-right: 15px;
+    padding-top: 2px;
+    padding-bottom: 3px;
     color: rgba(69, 69, 69, 0.8);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
@@ -54,28 +68,96 @@ limitations under the License.
 */
 }
 
+.collapsed .mx_RoomTile_nameContainer {
+    height: 0;
+}
+
 .collapsed .mx_RoomTile_name {
     display: none;
 }
 
 .collapsed .mx_RoomTile_badge {
-    margin-top: -15px;
+    top: -2px;
-    right: 7px;
+    min-width: 12px;
+    height: 16px;
+    border-radius: 16px;
+    padding: 0px 4px 0px 4px;
+    z-index: 200;
+}
+
+/* Position mute icon when room muted and collapsed - invisible at the moment */
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
+    background-color: rgba(0,0,0,0);
+    opacity: 0;
+    top: -2px;
+}
+
+/* Position menu icon when room muted and collapsed */
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.collapsed .mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    display: inline-block;
+    background-color: rgb(214, 214, 214);
+    letter-spacing: 0.1em;
+    opacity: 1;
+    top: -2px;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
+    display: none;
+}
+
+/* This is the bottom of the speech bubble - not drawn when room muted */
+.mx_RoomTile_highlight .mx_RoomTile_badge:not(.mx_RoomTile_badgeMute):after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 6px;
+    border-top: 8px solid #ff0064;
+    border-right: 10px solid transparent;
 }
 
 .mx_RoomTile_badge {
-    min-width: 12px;
+    display: inline-block;
-    height: 16px;
+    min-width: 19px;
+    height: 17px;
     position: absolute;
-    right: 16px;
+    right: 8px; /*gutter */
-    top: 50%;
+    top: 9px;
-    margin-top: -8px;
+    border-radius: 14px;
-    border-radius: 16px;
     color: #fff;
-    font-weight: bold;
+    font-weight: 600;
     font-size: 11px;
     text-align: center;
-    padding: 0px 4px 0px 4px;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
+.mx_RoomTile.mx_RoomTile_menu .mx_RoomTile_badge {
+    letter-spacing: 0.1em;
+    opacity: 1;
+}
+
+/* Position menu icon when room muted */
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute,
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton.mx_RoomTile_badgeMute {
+    background-color: rgb(214, 214, 214);
+    letter-spacing: 0.1em;
+    opacity: 1;
+    top: 9px;
+    right: 8px; /* gutter */
+}
+
+/* Position mute icon when room muted */
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeMute {
+    background-color: rgba(0,0,0,0);
+    opacity: 1;
+    top: 11px;
+    right: 6px;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
@@ -86,41 +168,21 @@ limitations under the License.
     background-color: #ff0064;
 }
 
-.mx_RoomTile_unread,
+.mx_RoomTile_read .mx_RoomTile_badge {
-.mx_RoomTile_highlight {
+    background-color: rgb(214, 214, 214);
-    font-weight: bold;
+    opacity: 0;
 }
 
-/* the inner highlight span has 4px of padding on it, so we shrink the _avatar by 4px and grow the _name by 4px to fit it in */
+.mx_RoomTile_unread, .mx_RoomTile_highlight {
-.mx_RoomTile_selected .mx_RoomTile_name {
+    font-weight: 800;
-    padding-right: 19px;
-}
-.mx_RoomTile_selected .mx_RoomTile_avatar {
-    padding-right: 7px;
 }
 
-/* leave room for the badge, if present.
+.mx_RoomTile_selected {
-   N.B. this has to come after the above _selected width tweaks */
-.mx_RoomTile_unreadNotify .mx_RoomTile_name,
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    padding-right: 40px;
-}
-
-.mx_RoomTile_selected .mx_RoomTile_name span {
-    display: inline-block;
-    position: relative;
-    width: 100%;
-    padding: 4px;
-    margin-top: -4px;
-    margin-bottom: -4px;
-    border-radius: 2px;
     background-color: rgba(118,207,166,0.2);
 }
 
-/* stop the span from overlapping with the badge */
+.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
-.mx_RoomTile_unreadNotify.mx_RoomTile_selected .mx_RoomTile_name span,
+    width: 144px;
-.mx_RoomTile_highlight.mx_RoomTile_selected .mx_RoomTile_name span {
-    padding-right: 22px;
 }
 
 .mx_RoomTile_arrow {

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

@@ -0,0 +1,47 @@
+/*
+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_DevicesPanel {
+    display: table;
+    table-layout: fixed;
+    width: 880px;
+    border-spacing: 2px;
+}
+
+.mx_DevicesPanel_header {
+    display: table-header-group;
+    font-weight: bold;
+}
+
+.mx_DevicesPanel_header > div {
+    display: table-cell;
+}
+
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceLastSeen {
+    width: 30%;
+}
+
+.mx_DevicesPanel_header .mx_DevicesPanel_deviceButtons {
+    width: 20%;
+}
+
+.mx_DevicesPanel_device {
+    display: table-row;
+}
+
+.mx_DevicesPanel_device > div {
+    display: table-cell;
+}

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

@@ -51,6 +51,10 @@ limitations under the License.
     overflow-y: auto;
 }
 
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+   flex: 0 0 120px;
+}
+
 .mx_LeftPanel .mx_BottomLeftMenu {
     -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
@@ -59,10 +63,11 @@ limitations under the License.
     order: 3;
 
     border-top: 1px solid rgba(0, 0, 0, 0.1);
-    margin-left: 18px;
+    margin-left: 16px; /* gutter */
-    margin-right: 18px;
+    margin-right: 16px; /* gutter */
     -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
+    z-index: 1;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu_options {
@@ -95,3 +100,7 @@ limitations under the License.
 .mx_LeftPanel .mx_BottomLeftMenu_settings {
     float: right;
 }
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}

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

@@ -43,7 +43,7 @@ limitations under the License.
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 25px;
+    margin-top: 6px;
     float: left;
     background-color: #fff;
     margin-left: -4px;
@@ -55,34 +55,27 @@ limitations under the License.
     vertical-align: middle;
     padding-left: 15px;
     padding-right: 15px;
+    text-align: center;
     position: relative;
 }
 
 .mx_RightPanel_headerButton object {
     pointer-events: none;
+    padding-bottom: 3px;
 }
 
 .mx_RightPanel_headerButton_highlight {
-    position: absolute;
-    bottom: -2px;
-    left: 10px;
     width: 25px;
-    height: 4px;
+    height: 5px;
-    background-color: #76cfa6;
+    border-radius: 5px;
+    background-color: rgba(118, 207, 166, 0.2);
 }
 
 .mx_RightPanel_headerButton_badge {
-    position: absolute;
+    font-size: 11px;
-    top: 4px;
+    color: #76cfa6;
-    left: 28px;
-    font-size: 12px;
-    background-color: #76cfa6;
-    color: #fff;
     font-weight: bold;
-    border-radius: 20px;
+    padding-bottom: 2px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 0px;
 }
 
 .mx_RightPanel .mx_MemberList,

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

@@ -25,8 +25,8 @@ limitations under the License.
     color: #3d3b39;
     font-weight: 600;
     font-size: 13px;
-    padding-left: 12px;
+    padding-left: 16px; /* gutter */
-    padding-right: 12px;
+    padding-right: 16px; /* gutter */
     margin-top: 8px;
     margin-bottom: 4px;
     cursor: pointer;

src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css

@@ -0,0 +1,25 @@
+/*
+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_MessageContextMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.mx_MessageContextMenu_field.mx_MessageContextMenu_fieldSet {
+    font-weight: bold;
+}

src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css

@@ -0,0 +1,56 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationStateContextMenu_picker {
+    position: absolute;
+    top: 16px;
+    left: 5px;
+}
+
+.mx_NotificationStateContextMenu_field {
+    padding-top: 4px;
+    padding-right: 6px;
+    padding-bottom: 10px;
+    padding-left: 20px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
+    font-weight: bold;
+    padding-left: 8px;
+}
+
+.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_NotificationStateContextMenu_icon {
+    padding-right: 4px;
+    padding-left: 4px;
+}
+
+.mx_NotificationStateContextMenu_activeIcon {
+    display: none;
+    position: relative;
+    left: -5px;
+}
+
+.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {
+    display: inline-block;
+}

src/skins/vector/css/vector-web/views/elements/ImageView.css

@@ -69,6 +69,7 @@ limitations under the License.
 .mx_ImageView_labelWrapper {
     position: absolute;
     top: 0px;
+    right: 0px;
     height: 100%;
     overflow: auto;
     pointer-events: all;

src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css

@@ -33,6 +33,11 @@ limitations under the License.
     margin-top: -2px;
 }
 
+.mx_MatrixToolbar_content {
+    -webkit-flex: 1;
+    flex: 1;
+}
+
 .mx_MatrixToolbar_link
 {
     color: #fff ! important;
@@ -41,10 +46,7 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar_close {
-    -webkit-flex: 1;
-    flex: 1;
     cursor: pointer;
-    text-align: right;
 }
 
 .mx_MatrixToolbar_close img {

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

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_RoomDropTarget {
     font-size: 13px;
-    margin-left: 10px;
+    margin-left: 18px;
-    margin-right: 15px;
+    margin-right: 18px;
     padding-top: 5px;
     padding-bottom: 5px;
     border: 1px dashed #76cfa6;
@@ -28,6 +28,7 @@ limitations under the License.
 
 .collapsed .mx_RoomDropTarget {
     margin-right: 10px;
+    margin-left: 10px;
 }
 
 .mx_RoomDropTarget_placeholder {

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

@@ -14,19 +14,19 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_RoomTooltip_chevron {
+    position: absolute;
+    left: -9px;
+    top: 7px;
+}
+
 .mx_RoomTooltip {
     display: none;
     position: fixed;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
     background-color: #fff;
-    z-index: 1000;
+    z-index: 2000;
-    left: 64px;
+    left: 52px;
     padding: 6px;
 }
-
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -9px;
-    top: 8px;
-}

src/skins/vector/css/vector-web/views/settings/Notifications.css

@@ -21,20 +21,20 @@ limitations under the License.
 
 .mx_UserNotifSettings_inputCell {
     display: table-cell;
-    padding-bottom: 21px;
+    padding-bottom: 8px;
     padding-right: 8px;
     width: 16px;
 }
 
 .mx_UserNotifSettings_labelCell
 {
-    padding-bottom: 21px;
+    padding-bottom: 8px;
     width: 400px;
     display: table-cell;
 }
 
 .mx_UserNotifSettings_pushRulesTableWrapper {
-    padding-bottom: 21px;
+    padding-bottom: 8px;
 }
 
 .mx_UserNotifSettings_pushRulesTable {

src/skins/vector/fonts/OpenSans.css

@@ -3,7 +3,7 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2'), url(Open_Sans/OpenSans-Regular.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin */
@@ -11,7 +11,7 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 600;
-  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  src: local('Open Sans Semibold'), local('OpenSans-Semibold'), url(opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Semibold.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 /* latin */
@@ -19,6 +19,6 @@
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 700;
-  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2'), url(Open_Sans/OpenSans-Bold.ttf) format('truetype');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
+}

src/skins/vector/fonts/Open_Sans/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   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.

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

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
+  <g id="Symbols">
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109"/>
+    <path d="M23,28 C21.195,28 16.807,25.624 13.122,20.524 C9.675,15.755 8,12.309 8,9.99 C8,8.164 9.225,7.293 9.883,6.825 L10.045,6.708 C10.773,6.173 11.903,6 12.337,6 C13.097,6 13.417,6.458 13.611,6.857 C13.776,7.195 15.141,10.212 15.28,10.587 C15.492,11.164 15.422,12.005 14.766,12.488 L14.65,12.571 C14.324,12.804 13.718,13.236 13.634,13.761 C13.594,14.016 13.677,14.283 13.889,14.577 C14.946,16.043 18.32,20.346 18.928,20.931 C19.405,21.389 20.009,21.455 20.42,21.098 C20.846,20.729 21.035,20.511 21.037,20.508 L21.081,20.465 C21.116,20.434 21.449,20.162 21.992,20.162 C22.385,20.162 22.783,20.302 23.178,20.576 C24.201,21.287 26.51,22.876 26.51,22.876 L26.547,22.906 C26.842,23.166 27.269,23.917 26.772,24.893 C26.256,25.907 24.655,28 23,28 L23,28 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
+  </g>
+</svg>

src/skins/vector/img/icon-context-mute-mentions.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="16" height="12" viewBox="0, 0, 16, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <g>
+      <path d="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
+      <path d="M13,3.928 C13,4.757 12.328,5.428 11.5,5.428 C10.672,5.428 10,4.757 10,3.928 C10,3.1 10.672,2.428 11.5,2.428 C12.328,2.428 13,3.1 13,3.928 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-3"/>
+      <path d="M14,9.5 C14,6.84 12.881,6 11.5,6 C10.119,6 9,6.884 9,9.5 L14,9.5 z" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-5"/>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icon-context-mute-off-copy.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="16" height="12" viewBox="0, 0, 16, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <path d="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
+    <path d="M9.878,7.667 C10.82,7.667 11.584,6.92 11.584,6 C11.584,5.08 10.82,4.333 9.878,4.333" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50"/>
+    <path d="M10.055,9.333 C11.939,9.333 13.466,7.841 13.466,6 C13.466,4.159 11.939,2.667 10.055,2.667" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy"/>
+    <path d="M10.055,11 C12.881,11 15.172,8.761 15.172,6 C15.172,3.239 12.881,1 10.055,1" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy-2"/>
+  </g>
+</svg>

src/skins/vector/img/icon-context-mute-off.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="16" height="12" viewBox="0, 0, 16, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <path d="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
+    <path d="M10,8 C11.105,8 12,7.105 12,6 C12,4.895 11.105,4 10,4" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50"/>
+    <path d="M10.207,10 C12.416,10 14.207,8.209 14.207,6 C14.207,3.791 12.416,2 10.207,2" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Oval-50-Copy"/>
+  </g>
+</svg>

src/skins/vector/img/icon-context-mute.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="16" height="12" viewBox="0, 0, 16, 12">
+  <g id="Screens-revised" opacity="0.2">
+    <path d="M7.142,0.009 C7.687,0.152 7.921,0.47 8,1 L8,11 C8,11.866 6.974,12.323 6.33,11.743 L3.288,9 L1,9 C0.448,9 0,8.552 0,8 L0,4 C0,3.448 0.448,3 1,3 L3.278,3 L6.332,0.256 C6.744,-0.016 6.487,0.101 7.142,0.009 z M7,1 L3.661,4 L1,4 L1,8 L3.672,8 L7,11 L7,1 z" fill="#000000" id="path-1"/>
+    <path d="M12.55,4.45 L9.722,7.278" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-2"/>
+    <path d="M12.55,7.278 L9.722,4.45" fill-opacity="0" stroke="#000000" stroke-width="1" stroke-linecap="round" id="Line-Copy-5"/>
+  </g>
+</svg>

src/skins/vector/img/icons-create-room.svg

@@ -1,20 +1,18 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_create_room</title>
+    <title>0F9BCC43-B3A7-4C9F-8E34-1F38194362C2</title>
     <desc>Created with sketchtool.</desc>
     <defs></defs>
-    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-20.000000, -726.000000)">
+        <g id="Room-list-Copy-3" transform="translate(-21.000000, -726.000000)">
-            <g id="Room-list" sketch:type="MSLayerGroup">
+            <g id="icons_create_room" transform="translate(21.000000, 726.000000)">
-                <g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
+                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
-                    <g id="icons_create_room" transform="translate(20.000000, 18.000000)">
+                <g id="Group-3" opacity="0.8" transform="translate(6.000000, 6.000000)" stroke="#FFFFFF" stroke-linecap="round">
-                        <circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
+                    <path d="M0,6.5 L13,6.5" id="Line"></path>
-                        <path d="M7,12 L17,12" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
+                    <path d="M6.5,0 L6.5,13" id="Line"></path>
-                        <path d="M12,7 L12,17" id="Line" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"></path>
-                    </g>
                 </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/skins/vector/img/icons-directory.svg

@@ -1,21 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_directory</title>
+    <title>E34C64ED-EBD7-49B6-BDD9-CB729162705A</title>
     <desc>Created with sketchtool.</desc>
-    <defs></defs>
+    <defs>
-    <g id="03-Input" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <rect id="path-1" x="6" y="10" width="13" height="8" rx="1"></rect>
-        <g id="03_4-Uploading" sketch:type="MSArtboardGroup" transform="translate(-54.000000, -726.000000)">
+        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="13" height="8" fill="white">
-            <g id="Room-list" sketch:type="MSLayerGroup">
+            <use xlink:href="#path-1"></use>
-                <g id="Room-list/Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
+        </mask>
-                    <g id="icons_directory" transform="translate(54.000000, 18.000000)">
+    </defs>
-                        <ellipse id="Oval-1-Copy-7" fill="#76CFA6" cx="12.48" cy="12" rx="11.52" ry="12"></ellipse>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-                        <path d="M10.919715,8.29307518 C10.8407601,8.29307518 10.7883135,8.12984737 10.7170546,7.88143019 C10.616152,7.53041266 10.4645131,7 9.9312114,7 L7.38327791,7 C7.02270784,7 6.73168646,7.30842284 6.72057007,7.70887507 L6.72,17.2758903 C6.72,17.6754098 7.01786223,18 7.38327791,18 L17.5770071,18 C17.9424228,18 18.24,17.6754098 18.24,17.2758903 L18.24,9.01687394 C18.24,8.61766535 17.9424228,8.29307518 17.5770071,8.29307518 L10.919715,8.29307518 Z M17.28,16.7470688 C17.28,16.8865013 17.1755713,17 17.0471522,17 L6.95341227,17 C6.82499318,17 6.72,16.8865013 6.72,16.7470688 L6.72056448,10 L17.28,10 L17.28,16.7470688 L17.28,16.7470688 Z M17.28,9 L6.72,9 L6.72,7.20209147 C6.72395157,7.0886985 6.82641007,7 6.95286024,7 L9.47593617,7 C9.67210328,7 9.74040895,7.13682752 9.84964157,7.44903616 C9.93826959,7.70177649 10.0596392,8.04800302 10.4547959,8.04800302 L17.0471398,8.04800302 C17.1755657,8.04800302 17.28,8.14148923 17.28,8.25664609 L17.28,9 L17.28,9 Z" id="Fill-137"></path>
+        <g id="Room-list-Copy-3" transform="translate(-58.000000, -726.000000)">
-                        <path d="M18,17 C18,16.8865013 17.8912201,17 18,17 L7,17 C7.1093679,17 7,16.8865013 7,17 L7,10 L18,10 L18,17 L18,17 Z" id="Path-Copy-2" fill="#FFFFFF"></path>
+            <g id="icons_directory" transform="translate(58.000000, 726.000000)">
-                        <path d="M7,9 L7,7 C7.00411622,7.0886985 7.11084382,7 7,7 L10,7 C10.0751076,7 10.1462593,7.13682752 10,7 C10.3523642,7.70177649 10.4787908,8.04800302 11,8 L18,8 C17.8912143,8.04800302 18,8.14148923 18,8 L18,9 L7,9 Z" id="Path-Copy" fill="#FFFFFF"></path>
+                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
-                    </g>
+                <use id="Rectangle-9" stroke="#FFFFFF" mask="url(#mask-2)" stroke-width="2" opacity="0.8" xlink:href="#path-1"></use>
-                </g>
+                <path d="M6,9 L6,6.99895656 C6,6.44724809 6.45097518,6 6.99077797,6 L11.009222,6 C11.5564136,6 12,6.44386482 12,7 L12,8 L17.9970707,8 C18.5509732,8 19,8.45318604 19,9 L19,9 L6,9 Z" id="Path-Copy" fill="#FFFFFF" opacity="0.6"></path>
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/skins/vector/img/icons-people.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="25" height="25" viewBox="0, 0, 25, 25">
+  <g id="Symbols">
+    <path d="M12.5,25 C19.404,25 25,19.404 25,12.5 C25,5.596 19.404,0 12.5,0 C5.596,0 0,5.596 0,12.5 C0,19.404 5.596,25 12.5,25 z" fill="#76CFA6" id="Oval-1-Copy-7"/>
+    <path d="M12.5,11.439 C13.881,11.439 15,10.32 15,8.939 C15,7.558 13.881,6.439 12.5,6.439 C11.119,6.439 10,7.558 10,8.939 C10,10.32 11.119,11.439 12.5,11.439 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="1" id="path-1" opacity="0.8"/>
+    <path d="M17.89,19 C17.89,15.134 17.89,12 12.445,12 C6.999,12 6.999,15.134 6.999,19 C10.785,19 13.067,19 17.89,19 z" fill-opacity="0" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" id="path-3" opacity="0.8"/>
+  </g>
+</svg>

src/skins/vector/img/icons-search-copy.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="13" height="13" viewBox="0, 0, 13, 13">
+  <g id="Symbols">
+    <g>
+      <path d="M10.229,5.547 C10.229,8.133 8.133,10.229 5.547,10.229 C2.961,10.229 0.865,8.133 0.865,5.547 C0.865,2.961 2.961,0.865 5.547,0.865 C8.133,0.865 10.229,2.961 10.229,5.547 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/>
+      <path d="M8.824,8.824 L12.135,12.135" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icons-search.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
+  <g id="Symbols">
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-1-Copy-7"/>
+    <path d="M22.4,15.4 C22.4,19.266 19.266,22.4 15.4,22.4 C11.534,22.4 8.4,19.266 8.4,15.4 C8.4,11.534 11.534,8.4 15.4,8.4 C19.266,8.4 22.4,11.534 22.4,15.4 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/>
+    <path d="M20.3,20.3 L25.25,25.25" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/>
+  </g>
+</svg>

src/skins/vector/img/icons-settings.svg

@@ -1,17 +1,15 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+<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 3.5.1 (25234) - http://www.bohemiancoding.com/sketch -->
+    <!-- Generator: sketchtool 3.8.3 (29802) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_settings</title>
+    <title>4D42A2A7-7430-4D4F-A0A2-E19278CF66E3</title>
     <desc>Created with sketchtool.</desc>
     <defs></defs>
-    <g id="09-Invitations-and-joining" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="09_1-Invite-members" sketch:type="MSArtboardGroup" transform="translate(-886.000000, -25.000000)">
+        <g id="Room-list-Copy-3" transform="translate(-165.000000, -726.000000)">
-            <g id="Room-header" sketch:type="MSLayerGroup" transform="translate(210.000000, 0.000000)">
+            <g id="icons_settings" transform="translate(165.000000, 726.000000)">
-                <g id="icons_settings" transform="translate(676.000000, 25.000000)" sketch:type="MSShapeGroup">
+                <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
-                    <circle id="Oval-1-Copy-7" fill="#76CFA6" cx="12" cy="12" r="12"></circle>
+                <path d="M15.625,12.5 C15.625,11.6373655 15.3198273,10.900882 14.7094727,10.2905273 C14.099118,9.68017273 13.3626345,9.375 12.5,9.375 C11.6373655,9.375 10.900882,9.68017273 10.2905273,10.2905273 C9.68017273,10.900882 9.375,11.6373655 9.375,12.5 C9.375,13.3626345 9.68017273,14.099118 10.2905273,14.7094727 C10.900882,15.3198273 11.6373655,15.625 12.5,15.625 C13.3626345,15.625 14.099118,15.3198273 14.7094727,14.7094727 C15.3198273,14.099118 15.625,13.3626345 15.625,12.5 L15.625,12.5 Z M19.7916667,11.465115 L19.7916667,13.5728624 C19.7916667,13.6488177 19.7663486,13.721607 19.7157118,13.7912326 C19.665075,13.8608583 19.6017799,13.9020001 19.5258247,13.9146593 L17.7693685,14.1805013 C17.649106,14.5222999 17.5256806,14.8102925 17.3990885,15.0444878 C17.6206247,15.360968 17.9592534,15.7977041 18.4149848,16.3547092 C18.4782808,16.4306644 18.5099284,16.5097833 18.5099284,16.5920681 C18.5099284,16.674353 18.4814456,16.7471423 18.4244792,16.8104384 C18.2535799,17.0446337 17.9402692,17.3864272 17.4845378,17.835829 C17.0288063,18.2852308 16.7313194,18.5099284 16.5920681,18.5099284 C16.5161129,18.5099284 16.4338293,18.4814456 16.3452148,18.4244792 L15.0349935,17.3990885 C14.7564909,17.5446694 14.4684983,17.6649301 14.1710069,17.7598741 C14.0697333,18.6207002 13.9779554,19.2093445 13.8956706,19.5258247 C13.8513633,19.7030535 13.7374322,19.7916667 13.5538737,19.7916667 L11.4461263,19.7916667 C11.3575119,19.7916667 11.2799754,19.7647663 11.2135145,19.7109646 C11.1470537,19.657163 11.110659,19.5891208 11.1043294,19.5068359 L10.8384874,17.7598741 C10.5283368,17.6586005 10.243509,17.5415046 9.98399523,17.4085829 L8.6452908,18.4244792 C8.58199476,18.4814456 8.50287591,18.5099284 8.40793186,18.5099284 C8.31931741,18.5099284 8.24019855,18.4751161 8.17057292,18.4054905 C7.37304289,17.6839157 6.85085844,17.152237 6.60400391,16.8104384 C6.55969668,16.7471423 6.5375434,16.674353 6.5375434,16.5920681 C6.5375434,16.5161129 6.56286144,16.4433236 6.61349826,16.3736979 C6.70844231,16.2407762 6.86984478,16.0303201 7.0977105,15.7423231 C7.32557623,15.4543262 7.49647295,15.231211 7.61040582,15.0729709 C7.43950652,14.7564907 7.3097516,14.4431801 7.22113715,14.1330295 L5.4836697,13.8766819 C5.40138486,13.8640227 5.33492502,13.8244632 5.28428819,13.7580024 C5.23365137,13.6915416 5.20833333,13.6171698 5.20833333,13.534885 L5.20833333,11.4271376 C5.20833333,11.3511823 5.23365137,11.278393 5.28428819,11.2087674 C5.33492502,11.1391417 5.39505535,11.0979999 5.46468099,11.0853407 L7.23063151,10.8194987 C7.31924596,10.5283369 7.44267137,10.2371796 7.60091146,9.9460178 C7.34772732,9.5852304 7.00909862,9.14849432 6.58501519,8.63579644 C6.52171916,8.5598412 6.49007161,8.4838871 6.49007161,8.40793186 C6.49007161,8.34463582 6.5185544,8.27184648 6.57552083,8.18956163 C6.74009052,7.96169591 7.05181881,7.62148483 7.51071506,7.16891819 C7.96961131,6.71635154 8.26868058,6.49007161 8.40793186,6.49007161 C8.4902167,6.49007161 8.57250031,6.52171916 8.65478516,6.58501519 L9.96500651,7.60091146 C10.2435091,7.45533058 10.5315017,7.33506992 10.8289931,7.24012587 C10.9302667,6.3792998 11.0220446,5.79065552 11.1043294,5.47417535 C11.1486367,5.29694645 11.2625678,5.20833333 11.4461263,5.20833333 L13.5538737,5.20833333 C13.6424881,5.20833333 13.7200246,5.23523374 13.7864855,5.28903537 C13.8529463,5.342837 13.889341,5.41087922 13.8956706,5.49316406 L14.1615126,7.24012587 C14.4716632,7.34139952 14.756491,7.45849543 15.0160048,7.5914171 L16.3642036,6.57552083 C16.42117,6.5185544 16.4971241,6.49007161 16.5920681,6.49007161 C16.674353,6.49007161 16.7534718,6.52171916 16.8294271,6.58501519 C17.6459459,7.338238 18.1681304,7.87624622 18.3959961,8.19905599 C18.4403033,8.24969282 18.4624566,8.31931741 18.4624566,8.40793186 C18.4624566,8.4838871 18.4371386,8.55667645 18.3865017,8.62630208 C18.2915577,8.75922375 18.1301552,8.96967991 17.9022895,9.25767687 C17.6744238,9.54567382 17.503527,9.76878899 17.3895942,9.92702908 C17.5541639,10.2435093 17.6839188,10.5536552 17.7788628,10.8574761 L19.5163303,11.1233181 C19.5986151,11.1359773 19.665075,11.1755368 19.7157118,11.2419976 C19.7663486,11.3084584 19.7916667,11.3828302 19.7916667,11.465115 L19.7916667,11.465115 Z" id="icons_settings-copy" stroke="#FFFFFF" opacity="0.8"></path>
-                    <path d="M15,12 C15,11.1718709 14.7070342,10.4648467 14.1210938,9.87890625 C13.5351533,9.29296582 12.8281291,9 12,9 C11.1718709,9 10.4648467,9.29296582 9.87890625,9.87890625 C9.29296582,10.4648467 9,11.1718709 9,12 C9,12.8281291 9.29296582,13.5351533 9.87890625,14.1210938 C10.4648467,14.7070342 11.1718709,15 12,15 C12.8281291,15 13.5351533,14.7070342 14.1210938,14.1210938 C14.7070342,13.5351533 15,12.8281291 15,12 L15,12 Z M19,11.0065104 L19,13.0299479 C19,13.1028649 18.9756947,13.1727427 18.9270833,13.2395833 C18.878472,13.3064239 18.8177087,13.3459201 18.7447917,13.3580729 L17.0585938,13.6132812 C16.9431418,13.9414079 16.8246534,14.2178808 16.703125,14.4427083 C16.9157997,14.7465293 17.2408832,15.1657959 17.6783854,15.7005208 C17.7391496,15.7734379 17.7695312,15.849392 17.7695312,15.9283854 C17.7695312,16.0073789 17.7421878,16.0772566 17.6875,16.1380208 C17.5234367,16.3628483 17.2226584,16.6909701 16.7851562,17.1223958 C16.3476541,17.5538216 16.0620666,17.7695312 15.9283854,17.7695312 C15.8554684,17.7695312 15.7764761,17.7421878 15.6914062,17.6875 L14.4335938,16.703125 C14.1662313,16.8428826 13.8897584,16.9583329 13.6041667,17.0494792 C13.506944,17.8758722 13.4188372,18.4409707 13.3398438,18.7447917 C13.2973088,18.9149314 13.1879349,19 13.0117188,19 L10.9882812,19 C10.9032114,19 10.8287764,18.9741756 10.764974,18.922526 C10.7011716,18.8708765 10.6662327,18.805556 10.6601562,18.7265625 L10.4049479,17.0494792 C10.1072034,16.9522565 9.83376861,16.8398444 9.58463542,16.7122396 L8.29947917,17.6875 C8.23871497,17.7421878 8.16276087,17.7695312 8.07161458,17.7695312 C7.98654471,17.7695312 7.91059061,17.7361114 7.84375,17.6692708 C7.07812117,16.976559 6.5768241,16.4661475 6.33984375,16.1380208 C6.29730882,16.0772566 6.27604167,16.0073789 6.27604167,15.9283854 C6.27604167,15.8554684 6.30034698,15.7855906 6.34895833,15.71875 C6.44010462,15.5911452 6.59505099,15.3891073 6.81380208,15.1126302 C7.03255318,14.8361531 7.19661404,14.6219626 7.30598958,14.4700521 C7.14192626,14.1662311 7.01736154,13.8654529 6.93229167,13.5677083 L5.26432292,13.3216146 C5.18532947,13.3094617 5.12152802,13.2714847 5.07291667,13.2076823 C5.02430531,13.1438799 5,13.072483 5,12.9934896 L5,10.9700521 C5,10.8971351 5.02430531,10.8272573 5.07291667,10.7604167 C5.12152802,10.6935761 5.17925314,10.6540799 5.24609375,10.6419271 L6.94140625,10.3867188 C7.02647612,10.1072035 7.14496452,9.82769237 7.296875,9.54817708 C7.05381823,9.20182118 6.72873467,8.78255454 6.32161458,8.29036458 C6.26085039,8.21744755 6.23046875,8.14453161 6.23046875,8.07161458 C6.23046875,8.01085039 6.25781223,7.94097262 6.3125,7.86197917 C6.4704869,7.64322807 6.76974606,7.31662544 7.21028646,6.88216146 C7.65082686,6.44769748 7.93793336,6.23046875 8.07161458,6.23046875 C8.15060803,6.23046875 8.2296003,6.26085039 8.30859375,6.32161458 L9.56640625,7.296875 C9.8337687,7.15711736 10.1102416,7.04166712 10.3958333,6.95052083 C10.493056,6.12412781 10.5811628,5.5590293 10.6601562,5.25520833 C10.7026912,5.08506859 10.8120651,5 10.9882812,5 L13.0117188,5 C13.0967886,5 13.1712236,5.02582439 13.235026,5.07747396 C13.2988284,5.12912352 13.3337673,5.19444405 13.3398438,5.2734375 L13.5950521,6.95052083 C13.8927966,7.04774354 14.1662314,7.16015561 14.4153646,7.28776042 L15.7096354,6.3125 C15.7643232,6.25781223 15.8372391,6.23046875 15.9283854,6.23046875 C16.0073789,6.23046875 16.083333,6.26085039 16.15625,6.32161458 C16.9401081,7.04470848 17.4414052,7.56119637 17.6601562,7.87109375 C17.7026912,7.9197051 17.7239583,7.98654471 17.7239583,8.07161458 C17.7239583,8.14453161 17.699653,8.21440939 17.6510417,8.28125 C17.5598954,8.4088548 17.404949,8.61089271 17.1861979,8.88736979 C16.9674468,9.16384687 16.803386,9.37803743 16.6940104,9.52994792 C16.8519973,9.83376888 16.976562,10.131509 17.0677083,10.4231771 L18.7356771,10.6783854 C18.8146705,10.6905383 18.878472,10.7285153 18.9270833,10.7923177 C18.9756947,10.8561201 19,10.927517 19,11.0065104 L19,11.0065104 Z" id="icons_settings-copy" fill="#FFFFFF"></path>
-                </g>
             </g>
         </g>
     </g>
-</svg>
+</svg>

src/skins/vector/img/icons-upload.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
+  <g id="Symbols">
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109-Copy"/>
+    <g id="file">
+      <path d="M10,10.01 C10,7.795 11.782,6 14.004,6 L18.402,6 C18.402,6 25,12.492 25,12.492 L25,24.006 C25,26.212 23.206,28 21,28 L14,28 C11.791,28 10,26.2 10,23.99 L10,10.01 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
+      <path d="M25,13 L20.157,13 C18.966,13 18,12.034 18,10.843 L18,6" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-3"/>
+    </g>
+    <path d="M21.479,19.066 C21.612,19.066 21.746,19.015 21.848,18.912 C22.051,18.706 22.051,18.374 21.848,18.168 L17.871,14.154 C17.668,13.948 17.338,13.949 17.135,14.153 L13.153,18.162 C12.95,18.367 12.949,18.701 13.152,18.906 C13.355,19.113 13.685,19.113 13.888,18.908 L16.987,15.788 L16.988,24.474 C16.988,24.764 17.222,25 17.509,25 C17.798,25 18.03,24.764 18.03,24.474 L18.029,15.801 L21.111,18.912 C21.212,19.015 21.345,19.066 21.479,19.066 L21.479,19.066 z" fill="#76CFA6" id="Fill-75"/>
+  </g>
+</svg>

src/skins/vector/img/icons-video.svg

@@ -0,0 +1,20 @@
+<?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>05D354CE-86A7-4B6F-B9BE-F1CEBBD81B21</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)">
+            <g id="icons_video" transform="translate(542.000000, 366.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-109-Copy-2" fill="#EAF5F0"></path>
+                <g transform="translate(9.000000, 9.000000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
+                    <g>
+                        <rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect>
+                        <path d="M13,8.50795206 C13,11.2533934 15.8192656,12.6412404 15.8192656,12.6412404 C16.8995921,13.391019 17.7753697,12.9258617 17.7753697,11.6159552 L17.7753697,5.39994895 C17.7753697,4.08392094 16.8771592,3.5920349 15.8192656,4.37466376 C15.8192656,4.37466376 13,5.76251076 13,8.50795206 Z" id="Path-16"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/members.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="17px" height="22px" viewBox="0 0 17 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: bin/sketchtool 1.4 (305) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_people</title>
-    <desc>Created with bin/sketchtool.</desc>
-    <defs></defs>
-    <g id="02-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="02_13-Chat-member-profile" sketch:type="MSArtboardGroup" transform="translate(-978.000000, -32.000000)" fill="#76CFA6">
-            <g id="icons_people" sketch:type="MSLayerGroup" transform="translate(978.000000, 32.000000)">
-                <path d="M7.79396172,11.1845854 C10.8910264,11.1845854 13.4110283,8.6755122 13.4110283,5.59121951 C13.4110283,2.50853659 10.8910264,0 7.79396172,0 C4.69851351,0 2.18012797,2.50853659 2.18012797,5.59121951 C2.18012797,8.6755122 4.69851351,11.1845854 7.79396172,11.1845854 L7.79396172,11.1845854 Z M7.79396172,0.804878049 C10.4454327,0.804878049 12.6028173,2.95229268 12.6028173,5.59121951 C12.6028173,8.2317561 10.4454327,10.3797073 7.79396172,10.3797073 C5.14410719,10.3797073 2.98833899,8.2317561 2.98833899,5.59121951 C2.98833899,2.95229268 5.14410719,0.804878049 7.79396172,0.804878049 L7.79396172,0.804878049 Z M0.885806936,21.4634146 C1.33849039,19.4978231 2.46183493,15.4298815 3.13651101,14.4663415 C4.32835286,12.76 6.45287023,12.8072195 6.48358225,12.8034634 L9.03699027,12.8013171 C9.06393064,12.7980976 11.7369539,12.5421463 12.9228689,14.5377073 C12.9320286,14.5532683 12.9422659,14.5682927 12.9535809,14.5827805 C13.6376414,15.4425239 14.755176,19.1307382 15.2598605,21.1908293 L15.2598605,21.1908293 L14.9096797,21.1908293 L1.53746094,21.1908293 L1.15172387,21.1908293 L1.15172387,21.9957073 L1.53746094,21.9957073 L14.9096797,21.9957073 L15.2954167,21.9957073 L15.2954167,21.3375005 C15.3143567,21.416496 15.3322794,21.4927245 15.3491183,21.5659024 C15.3922229,21.7520976 15.5587144,21.8781951 15.7429865,21.8781951 C15.7726209,21.8781951 15.8027941,21.8749756 15.8335061,21.8685366 C16.0506455,21.8186341 16.1869638,21.6029268 16.1368547,21.3856098 C15.7844747,19.8558049 14.5355192,15.312 13.6044602,14.1052195 C12.144831,11.6825366 9.08063366,11.9857073 8.99388568,11.9985854 L6.49759124,11.9985854 C6.38767454,11.996439 3.92209212,11.9320488 2.47323917,14.0059512 C1.66987741,15.1531707 0.489889321,19.5553171 0.0750076642,21.3872195 C0.0254373883,21.6045366 0.162294454,21.8197073 0.379972623,21.8685366 C0.460649718,21.8870317 0.541104777,21.8798767 0.61291652,21.8524806 L0.61291652,22 L1.15172387,22 L1.15172387,21.4634146 L0.885804128,21.4634146 Z" id="Fill-92" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/skins/vector/img/notif-active.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="13px" height="13px" viewBox="0 0 13 13" 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>E15782FC-B5FA-472A-AE12-CFFF484E7253</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Left-Panel-mention-states" transform="translate(-221.000000, -165.000000)">
+            <g id="notification-shortcuts" transform="translate(206.000000, 119.000000)">
+                <g id="slider" transform="translate(16.000000, 16.000000)">
+                    <g id="notif_active" transform="translate(0.000000, 31.000000)">
+                        <circle id="Oval-190" stroke="#62A887" fill="#76CFA6" cx="5.5" cy="5.5" r="5.5"></circle>
+                        <path d="M2.5,6.5 L4,8" id="Line" stroke="#FFFFFF" stroke-linecap="round"></path>
+                        <path d="M4,2.97753906 L8.30664062,8" id="Line-Copy" stroke="#FFFFFF" stroke-linecap="round" transform="translate(6.153320, 5.488770) scale(-1, 1) translate(-6.153320, -5.488770) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/notif-slider.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="7px" height="109px" viewBox="0 0 7 109" 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>16CB4618-0BD3-4568-BB20-FC56EBC46046</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
+        <g id="Left-Panel-mention-states" transform="translate(-224.000000, -134.000000)" stroke="#000000">
+            <g id="notification-shortcuts" transform="translate(206.000000, 119.000000)">
+                <g id="slider" transform="translate(16.000000, 16.000000)">
+                    <g id="notif_slider" transform="translate(3.000000, 0.000000)">
+                        <path d="M2.5,3.49505001 L2.5,104.507355" id="Line" stroke-linecap="square"></path>
+                        <circle id="Oval-187" fill="#F7F7F7" cx="2.5" cy="36.5" r="2.5"></circle>
+                        <path d="M2.5,73 C3.88071187,73 5,71.8807119 5,70.5 C5,69.1192881 3.88071187,68 2.5,68 C1.11928813,68 0,69.1192881 0,70.5 C0,71.8807119 1.11928813,73 2.5,73 Z" id="Oval-187-Copy" fill="#F7F7F7"></path>
+                        <path d="M2.5,5 C3.88071187,5 5,3.88071187 5,2.5 C5,1.11928813 3.88071187,0 2.5,0 C1.11928813,0 0,1.11928813 0,2.5 C0,3.88071187 1.11928813,5 2.5,5 Z" id="Oval-187-Copy-3" fill="#F7F7F7"></path>
+                        <circle id="Oval-187-Copy-2" fill="#F7F7F7" cx="2.5" cy="104.5" r="2.5"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/vector/index.js

@@ -205,13 +205,13 @@ function getConfig() {
 
 async function loadApp() {
     if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
-        if (confirm("Vector runs much better as an app on iOS. Get the app?")) {
+        if (confirm("Vector is not supported on mobile web. Install the app?")) {
             window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
             return;
         }
     }
     else if (/Android/.test(navigator.userAgent)) {
-        if (confirm("Vector runs much better as an app on Android. Get the app?")) {
+        if (confirm("Vector is not supported on mobile web. Install the app?")) {
             window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
             return;
         }

vector/index.html

@@ -24,6 +24,8 @@
   </head>
   <body style="height: 100%;">
     <section id="matrixchat" style="height: 100%;"></section>
+    <!-- load olm, if possible. -->
+    <script src="olm.js"></script>
     <script src="bundle.js"></script>
     <noscript>Sorry, Vector requires JavaScript to be enabled.</noscript>
     <link rel="stylesheet" href="bundle.css">

webpack.config.js

@@ -2,8 +2,6 @@ var path = require('path');
 var webpack = require('webpack');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 
-var olm_path = path.resolve('./node_modules/olm');
-
 module.exports = {
     module: {
         preLoaders: [
@@ -45,13 +43,16 @@ module.exports = {
 
             // same goes for js-sdk
             "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
-
-            // matrix-js-sdk will use olm if it is available,
-            // but does not explicitly depend on it. Pull it
-            // in from node_modules if it's there.
-            olm: olm_path,
         },
     },
+    externals: {
+        // olm takes ages for webpack to process, and it's already heavily
+        // optimised, so there is little to gain by us uglifying it. We
+        // therefore use it via a separate <script/> tag in index.html (which
+        // loads it into the browser global `Olm`), and reference it as an
+        // external here.
+        "olm": "Olm",
+    },
     plugins: [
         new webpack.DefinePlugin({
             'process.env': {
@@ -62,23 +63,6 @@ module.exports = {
         new ExtractTextPlugin("bundle.css", {
             allChunks: true
         }),
-
-        // olm.js includes "require 'fs'", which is never
-        // executed in the browser. Ignore it.
-        new webpack.IgnorePlugin(/^fs$/, /node_modules\/olm$/)
     ],
     devtool: 'source-map'
 };
-
-// ignore olm.js if it's not installed.
-(function() {
-    var fs = require('fs');
-    try {
-        fs.lstatSync(olm_path);
-        console.log("Olm is installed; including it in webpack bundle");
-    } catch (e) {
-        module.exports.plugins.push(
-            new webpack.IgnorePlugin(/^olm$/)
-        );
-    }
-}) ();