0.7.5

Add .travis.yml

.gitignore

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

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+    - 6   # node v6, to match jenkins
+install:
+    - npm install
+    - (cd node_modules/matrix-react-sdk && npm run build)

CHANGELOG.md

@@ -1,3 +1,195 @@
+Changes in [0.7.5](https://github.com/vector-im/vector-web/releases/tag/v0.7.5) (2016-08-28)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4-r1...v0.7.5)
+
+ * re-add leave button in RoomSettings
+ * add /user URLs
+ * recognise matrix.to links and other vector links
+ * fix linkify dependency
+ * fix avatar clicking in MemberInfo
+ * fix RoomTagContextMenu so it works on historical rooms
+ * warn people to put their Matrix HS on a separate domain to Vector
+ * fix zalgos again
+ * Add .travis.yml
+   [\#2007](https://github.com/vector-im/vector-web/pull/2007)
+ * add fancy changelog dialog
+   [\#1972](https://github.com/vector-im/vector-web/pull/1972)
+ * Update autocomplete design
+   [\#1978](https://github.com/vector-im/vector-web/pull/1978)
+ * Update encryption info in README
+   [\#2001](https://github.com/vector-im/vector-web/pull/2001)
+ * Added event/info message avatars back in
+   [\#2000](https://github.com/vector-im/vector-web/pull/2000)
+ * Wmwragg/chat message presentation
+   [\#1987](https://github.com/vector-im/vector-web/pull/1987)
+ * Make the notification slider work
+   [\#1982](https://github.com/vector-im/vector-web/pull/1982)
+ * Use cpx to copy olm.js, and add watcher
+   [\#1966](https://github.com/vector-im/vector-web/pull/1966)
+ * Make up a device display name
+   [\#1959](https://github.com/vector-im/vector-web/pull/1959)
+
+Changes in [0.7.4-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.4-r1) (2016-08-12)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4...v0.7.4-r1)
+ * Update to matrix-react-sdk 0.6.4-r1 to fix inviting multiple people
+
+
+Changes in [0.7.4](https://github.com/vector-im/vector-web/releases/tag/v0.7.4) (2016-08-11)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.3...v0.7.4)
+
+ * Don't show border on composer when not in RTE mode
+   [\#1954](https://github.com/vector-im/vector-web/pull/1954)
+ * Wmwragg/room tag menu
+   [\#1941](https://github.com/vector-im/vector-web/pull/1941)
+ * Don't redirect to mobile app if verifying 3pid
+   [\#1951](https://github.com/vector-im/vector-web/pull/1951)
+ * Make sure that we clear localstorage before *all* tests
+   [\#1950](https://github.com/vector-im/vector-web/pull/1950)
+ * Basic CSS for multi-invite dialog
+   [\#1942](https://github.com/vector-im/vector-web/pull/1942)
+ * More tests for the loading process:
+   [\#1947](https://github.com/vector-im/vector-web/pull/1947)
+ * Support for refactored login token handling
+   [\#1946](https://github.com/vector-im/vector-web/pull/1946)
+ * Various fixes and improvements to emojification.
+   [\#1935](https://github.com/vector-im/vector-web/pull/1935)
+ * More app-loading tests
+   [\#1938](https://github.com/vector-im/vector-web/pull/1938)
+ * Some tests of the application load process
+   [\#1936](https://github.com/vector-im/vector-web/pull/1936)
+ * Add 'enable labs' setting to sample config
+   [\#1930](https://github.com/vector-im/vector-web/pull/1930)
+ * Matthew/scalar
+   [\#1928](https://github.com/vector-im/vector-web/pull/1928)
+ * Fix unit tests
+   [\#1929](https://github.com/vector-im/vector-web/pull/1929)
+ * Wmwragg/mute mention state fix
+   [\#1926](https://github.com/vector-im/vector-web/pull/1926)
+ * CSS for deactivate account dialog
+   [\#1919](https://github.com/vector-im/vector-web/pull/1919)
+ * Wmwragg/mention state menu
+   [\#1900](https://github.com/vector-im/vector-web/pull/1900)
+ * Fix UnknownBody styling for #1901
+   [\#1913](https://github.com/vector-im/vector-web/pull/1913)
+ * Exclude olm from the webpack
+   [\#1914](https://github.com/vector-im/vector-web/pull/1914)
+ * Wmwragg/button updates
+   [\#1912](https://github.com/vector-im/vector-web/pull/1912)
+ * Wmwragg/button updates
+   [\#1828](https://github.com/vector-im/vector-web/pull/1828)
+ * CSS for device management UI
+   [\#1909](https://github.com/vector-im/vector-web/pull/1909)
+ * Fix a warning from RoomSubList
+   [\#1908](https://github.com/vector-im/vector-web/pull/1908)
+ * Fix notifications warning layout
+   [\#1907](https://github.com/vector-im/vector-web/pull/1907)
+ * Remove relayoutOnUpdate prop on gemini-scrollbar
+   [\#1883](https://github.com/vector-im/vector-web/pull/1883)
+ * Bump dependency versions
+   [\#1842](https://github.com/vector-im/vector-web/pull/1842)
+ * Wmwragg/mention state indicator round 2
+   [\#1835](https://github.com/vector-im/vector-web/pull/1835)
+ * Wmwragg/spinner fix
+   [\#1822](https://github.com/vector-im/vector-web/pull/1822)
+ * Wmwragg/mention state indicator
+   [\#1823](https://github.com/vector-im/vector-web/pull/1823)
+ * Revert "Presentation for inline link"
+   [\#1809](https://github.com/vector-im/vector-web/pull/1809)
+ * Wmwragg/modal restyle
+   [\#1806](https://github.com/vector-im/vector-web/pull/1806)
+ * Presentation for inline link
+   [\#1799](https://github.com/vector-im/vector-web/pull/1799)
+ * CSS for offline user colours
+   [\#1798](https://github.com/vector-im/vector-web/pull/1798)
+ * Wmwragg/typography updates
+   [\#1776](https://github.com/vector-im/vector-web/pull/1776)
+ * webpack: always use the olm from vector-web
+   [\#1766](https://github.com/vector-im/vector-web/pull/1766)
+ * feat: large emoji support
+   [\#1718](https://github.com/vector-im/vector-web/pull/1718)
+ * Autocomplete
+   [\#1717](https://github.com/vector-im/vector-web/pull/1717)
+ * #1664 Set a maximum height for codeblocks
+   [\#1670](https://github.com/vector-im/vector-web/pull/1670)
+ * CSS for device blocking
+   [\#1688](https://github.com/vector-im/vector-web/pull/1688)
+ * Fix joining rooms by typing the alias
+   [\#1685](https://github.com/vector-im/vector-web/pull/1685)
+ * Add ability to delete an alias from room directory
+   [\#1680](https://github.com/vector-im/vector-web/pull/1680)
+ * package.json: add olm as optionalDependency
+   [\#1678](https://github.com/vector-im/vector-web/pull/1678)
+ * Another go at enabling olm on vector.im/develop
+   [\#1675](https://github.com/vector-im/vector-web/pull/1675)
+ * CSS for unverify button
+   [\#1661](https://github.com/vector-im/vector-web/pull/1661)
+ * CSS fix for rooms with crypto enabled
+   [\#1660](https://github.com/vector-im/vector-web/pull/1660)
+ * Karma: fix warning by ignoring olm
+   [\#1652](https://github.com/vector-im/vector-web/pull/1652)
+ * Update for react-sdk dbkr/fix_peeking branch
+   [\#1639](https://github.com/vector-im/vector-web/pull/1639)
+ * Update README.md
+   [\#1641](https://github.com/vector-im/vector-web/pull/1641)
+ * Fix karma tests
+   [\#1643](https://github.com/vector-im/vector-web/pull/1643)
+ * Rich Text Editor
+   [\#1553](https://github.com/vector-im/vector-web/pull/1553)
+ * Fix RoomDirectory to join by alias whenever possible.
+   [\#1615](https://github.com/vector-im/vector-web/pull/1615)
+ * Make the config optional
+   [\#1612](https://github.com/vector-im/vector-web/pull/1612)
+ * CSS support for device verification
+   [\#1610](https://github.com/vector-im/vector-web/pull/1610)
+ * Don't use SdkConfig
+   [\#1609](https://github.com/vector-im/vector-web/pull/1609)
+ * serve config.json statically instead of bundling it
+   [\#1516](https://github.com/vector-im/vector-web/pull/1516)
+
+Changes in [0.7.3](https://github.com/vector-im/vector-web/releases/tag/v0.7.3) (2016-06-03)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.2...v0.7.3)
+
+* Update to react-sdk 0.6.3
+
+Changes in [0.7.2](https://github.com/vector-im/vector-web/releases/tag/v0.7.2) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.1...v0.7.2)
+
+ * Correctly bump the dep on new matrix-js-sdk and matrix-react-sdk
+
+Changes in [0.7.1](https://github.com/vector-im/vector-web/releases/tag/v0.7.1) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.0...v0.7.1)
+
+ * Fix accidentally committed local changes to the default config.json (doh!)
+
+Changes in [0.7.0](https://github.com/vector-im/vector-web/releases/tag/v0.7.0) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.1...v0.7.0)
+
+ * Update to matrix-react-sdk 0.6.0 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.6.0/CHANGELOG.md)
+ * Style selection color.
+   [\#1557](https://github.com/vector-im/vector-web/pull/1557)
+ * Fix NPE when loading the Settings page which infini-spinnered
+   [\#1518](https://github.com/vector-im/vector-web/pull/1518)
+ * Add option to enable email notifications
+   [\#1469](https://github.com/vector-im/vector-web/pull/1469)
+
+Changes in [0.6.1](https://github.com/vector-im/vector-web/releases/tag/v0.6.1) (2016-04-22)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.0...v0.6.1)
+
+ * Update to matrix-react-sdk 0.5.2 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.2/CHANGELOG.md)
+ * Don't relayout scrollpanels every time something changes
+   [\#1438](https://github.com/vector-im/vector-web/pull/1438)
+ * Include react-addons-perf for non-production builds
+   [\#1431](https://github.com/vector-im/vector-web/pull/1431)
+
 Changes in [0.6.0](https://github.com/vector-im/vector-web/releases/tag/v0.6.0) (2016-04-19)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/vector-web/compare/v0.5.0...v0.6.0)

README.md

@@ -3,63 +3,137 @@ Vector/Web
 
 Vector is a Matrix web client built using the Matrix React SDK (https://github.com/matrix-org/matrix-react-sdk).
 
-Getting started
+Getting Started
 ===============
 
+The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta.
+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
+1. Move (or symlink) the vector-x.x.x directory to an appropriate name
+1. If desired, copy `config.sample.json` to `config.json` and edit it
+   as desired. See below for details.
+1. Enter the URL into your browser and log into vector!
+
+Important Security Note
+=======================
+
+We do not recommend running Vector from the same domain name as your Matrix
+homeserver.  The reason is the risk of XSS (cross-site-scripting) vulnerabilities
+that could occur if someone caused Vector to load and render malicious user generated
+content from a Matrix API which then had trusted access to Vector (or other apps) due
+to sharing the same domain.
+
+We have put some coarse mitigations into place to try to protect against this situation,
+but it's still not good practice to do it in the first place.
+See https://github.com/vector-im/vector-web/issues/1977 for more details.
+
+Building 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
    rebuild one of the dependencies, due to https://github.com/npm/npm/issues/3055:
    `(cd node_modules/matrix-react-sdk && npm install)`
-1. Start the development builder and a testing server: `npm start`
-1. Wait a few seconds for the initial build to finish (the command won't
-   terminate: it's running a web server for you).
-1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
+1. Configure the app by copying `config.sample.json` to `config.json` and modifying
+   it (see below for details)
+1. `npm run package` to build a tarball to deploy. Untaring this file will give
+   a version-specific directory containing all the files that need to go on your
+   web server.
 
-With `npm start`, any changes you make to the source files will cause a rebuild so
-your changes will show up when you refresh. This development server also disables
-caching, so do NOT use it in production.
+Note that `npm run package` is not supported on Windows, so Windows users can run `npm
+run build`, which will build all the necessary files into the `vector`
+directory. The version of Vector will not appear in Settings without
+using the package script. You can then mount the vector directory on your
+webserver to actually serve up the app, which is entirely static content.
 
-Configuring
+config.json
 ===========
 
-Configure the app by modifying the `config.json` file:
+You can configure the app by copying `vector/config.sample.json` to
+`vector/config.json` and customising it:
 
 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
-   will not work.
+   registering with an email address, adding an email address to your account,
+   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.
 
-You will need to re-run `npm run build` after editing `config.json`.
 
-Deployment
-==========
+Running as a Desktop app
+========================
 
-On a Unix-based OS, run `npm run package` to build a tarball package.  Untaring
-this file will give a version-specific directory containing all the files that
-need to go on your web server.
+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.
+Get a tarball from https://vector.im/packages or build your own - see Building From Source
+above).
+
+There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop
 
-The package script is not supported on Windows, so Windows users can run `npm
-run build`, which will build all the necessary files into the `vector`
-directory. Note that the version of Vector will not appear in Settings without
-using the package script. You can then mount the vector directory on your
-webserver to actually serve up the app, which is entirely static content.
 
 Development
 ===========
 
-For simple tweaks, you can work on any of the source files within Vector with
-the setup above, and your changes will cause an instant rebuild.
+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.
 
-However, 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.
+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.
 
-[Be aware that there may be problems with this process under npm version 3.]
+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.
 
 First clone and build `matrix-js-sdk`:
 
@@ -102,17 +176,53 @@ Finally, build and start vector itself:
         + 1013 hidden modules
     ```
    Remember, the command will not terminate since it runs the web server
-   and rebuilds source files when they change.
+   and rebuilds source files when they change. This development server also
+   disables caching, so do NOT use it in production.
 1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.
 
-When you make changes to `matrix-js-sdk` or `matrix-react-sdk`, you will need
-to run `npm run build` in the relevant directory. You can do this automatically
-by instead running `npm start` in each directory, to start a development
-builder which will watch for changes to the files and rebuild automatically.
+When you make changes to `matrix-react-sdk`, you will need to run `npm run
+build` in the relevant directory. You can do this automatically by instead
+running `npm start` in the directory, to start a development builder which
+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`.
 
+If any of these steps error with, `file table overflow`, you are probably on a mac
+which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
+You'll need to do this in each new terminal you open before building vector.
+
+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
 ===================
 
@@ -121,23 +231,13 @@ 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
-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
-
-```
-/encrypt on
-```
-
-in the message bar in that room. Vector will then generate a set of keys, and
-encrypt all outgoing messages in that room. (Note that other people in that
-room will send messages in the clear unless they also `/encrypt on`.)
+To enable the (very experimental) support, check the 'End-to-End Encryption'
+box in the 'Labs' section of the user settings (note that the labs are disabled
+on http://vector.im/beta: you will need to use http://vector.im/develop or your
+own deployment of vector). The Room Settings dialog will then show an
+'Encryption' setting; rooms for which you are an administrator will offer you
+the option of enabling encryption. Any messages sent in that room will then be
+encrypted.
 
 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.

config.json

@@ -1,4 +0,0 @@
-{
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im"
-}

jenkins.sh

@@ -4,12 +4,15 @@ set -e
 
 export NVM_DIR="/home/jenkins/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 4
+nvm use 6
 
 set -x
 
 npm install
 
+# apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked.
+npm install matrix-react-sdk matrix-js-sdk
+
 # we may be using a dev branch of react-sdk, in which case we need to build it
 (cd node_modules/matrix-react-sdk && npm run build)
 

karma.conf.js

@@ -27,6 +27,7 @@ module.exports = function (config) {
 
         // list of files / patterns to load in the browser
         files: [
+            'node_modules/babel-polyfill/browser.js',
             testFile,
             {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
         ],
@@ -35,7 +36,7 @@ module.exports = function (config) {
         proxies: {
             "/img/": "/base/vector/img/",
         },
-        
+
         // preprocess matching files before serving them to the browser
         // available preprocessors:
         // https://npmjs.org/browse/keyword/karma-preprocessor
@@ -122,7 +123,7 @@ module.exports = function (config) {
 
                     // same goes for js-sdk
                     "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
-                    
+
                     sinon: 'sinon/pkg/sinon.js',
                 },
                 root: [
@@ -130,6 +131,11 @@ module.exports = function (config) {
                     path.resolve('./test'),
                 ],
             },
+            plugins: [
+                // olm may not be installed, so avoid webpack warnings by
+                // ignoring it.
+                new webpack.IgnorePlugin(/^olm$/),
+            ],
             devtool: 'inline-source-map',
         },
     });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vector-web",
-  "version": "0.6.0",
+  "version": "0.7.5",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -12,53 +12,64 @@
   "matrix-react-parent": "matrix-react-sdk",
   "scripts": {
     "reskindex": "reskindex -h src/header",
+    "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js",
-    "build:bundle:dev": "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:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev",
+    "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
+    "build:staticfiles": "cpx -v node_modules/olm/olm.js vector/",
+    "build": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:dev": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle:dev",
     "package": "scripts/package.sh",
+    "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
     "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",
+    "start:staticfiles": "cpx -Lwv node_modules/olm/olm.js vector/",
     "//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:prod": "parallelshell \"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*",
+    "start": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start:prod": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css* vector/emojione",
     "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"
   },
   "dependencies": {
     "babel-polyfill": "^6.5.0",
+    "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
+    "draft-js": "^0.7.0",
     "extract-text-webpack-plugin": "^0.9.1",
     "filesize": "^3.1.2",
     "flux": "~2.0.3",
-    "gemini-scrollbar": "matrix-org/gemini-scrollbar#7dc736d",
+    "gemini-scrollbar": "matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
-    "linkifyjs": "^2.0.0-beta.4",
-    "matrix-js-sdk": "^0.5.2",
-    "matrix-react-sdk": "^0.5.1",
+    "linkifyjs": "2.0.0-beta.4",
+    "matrix-js-sdk": "0.5.6",
+    "matrix-react-sdk": "0.6.5",
     "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-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#4707b88",
-    "sanitize-html": "^1.11.1"
+    "react-dom": "^15.2.1",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
+    "sanitize-html": "^1.11.1",
+    "ua-parser-js": "^0.7.10",
+    "url": "^0.11.0"
   },
   "devDependencies": {
     "babel": "^5.8.23",
     "babel-core": "^5.8.25",
     "babel-loader": "^5.3.2",
     "catw": "^1.0.1",
+    "cpx": "^1.3.2",
     "css-raw-loader": "^0.1.1",
+    "emojione": "^2.2.3",
     "expect": "^1.16.0",
+    "fs-extra": "^0.30.0",
     "http-server": "^0.8.4",
     "json-loader": "^0.5.3",
     "karma": "^0.13.22",
@@ -72,9 +83,13 @@
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
+    "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"
   }
 }

src/component-index.js

@@ -34,6 +34,10 @@ 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.context_menus.RoomTagContextMenu'] = require('./components/views/context_menus/RoomTagContextMenu');
+module.exports.components['views.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
 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');
@@ -44,11 +48,10 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen
 module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader');
 module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator');
 module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp');
-module.exports.components['views.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');
 module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');
+module.exports.components['views.settings.IntegrationsManager'] = require('./components/views/settings/IntegrationsManager');
 module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications');

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
-                the best experience. <a href="https://getfirefox.com">Firefox</a>,
+                Please install <a href="https://www.google.com/chrome">Chrome</a> or
+                <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

@@ -17,7 +17,8 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+var Matrix = require("matrix-js-sdk");
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
@@ -45,8 +46,17 @@ module.exports = React.createClass({
     },
 
     getInitialState: function() {
-        return {
-            phase : this.Phase.MemberList
+        if (this.props.userId) {
+            var member = new Matrix.RoomMember(null, this.props.userId);
+            return {
+                phase: this.Phase.MemberInfo,
+                member: member,
+            }
+        }
+        else {
+            return {
+                phase: this.Phase.MemberList
+            }
         }
     },
 
@@ -97,7 +107,7 @@ module.exports = React.createClass({
                 });
             }
         }
-        if (payload.action === "view_room") {
+        else if (payload.action === "view_room") {
             if (this.state.phase === this.Phase.MemberInfo) {
                 this.setState({
                     phase: this.Phase.MemberList
@@ -136,8 +146,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">
@@ -145,15 +155,15 @@ module.exports = React.createClass({
                             { filesHighlight }
                         </div>
                     </div>;
+        }
 
-            if (!this.props.collapsed) {
-                if(this.state.phase == this.Phase.MemberList) {
-                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
-                }
-                else if(this.state.phase == this.Phase.MemberInfo) {
-                    var MemberInfo = sdk.getComponent('rooms.MemberInfo');
-                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
-                }
+        if (!this.props.collapsed) {
+            if(this.props.roomId && this.state.phase == this.Phase.MemberList) {
+                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+            }
+            else if(this.state.phase == this.Phase.MemberInfo) {
+                var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
             }
         }
 

src/components/structures/RoomDirectory.js

@@ -21,7 +21,7 @@ var React = require('react');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var ContentRepo = require("matrix-js-sdk").ContentRepo;
 var Modal = require('matrix-react-sdk/lib/Modal');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var GeminiScrollbar = require('react-gemini-scrollbar');
 
@@ -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,33 +80,79 @@ module.exports = React.createClass({
                     publicRooms: data.chunk,
                     loading: false,
                 });
-                self.forceUpdate();
             }
         });
     },
 
-    componentWillUnmount: function() {
-        // dis.dispatch({
-        //     action: 'ui_opacity',
-        //     sideOpacity: 1.0,
-        //     middleOpacity: 1.0,
-        // });
+    /**
+     * A limited interface for removing rooms from the directory.
+     * Will set the room to not be publicly visible and delete the
+     * default alias. In the long term, it would be better to allow
+     * 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) {
-        // extract the metadata from the publicRooms structure to pass
-        // as out-of-band data to view_room, because we get information
-        // here that we can't get other than by joining the room in some
-        // cases.
-        var room;
-        for (var i = 0; i < this.state.publicRooms.length; ++i) {
-            if (this.state.publicRooms[i].room_id == roomId) {
-                room = this.state.publicRooms[i];
-                break;
-            }
+    onRoomClicked: function(room, ev) {
+        if (ev.shiftKey) {
+            ev.preventDefault();
+            this.removeFromDirectory(room);
+        } else {
+            this.showRoom(room);
         }
-        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");
@@ -106,19 +164,27 @@ 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",
             };
         }
-
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
-            oob_data: oob_data,
-        });
+        // 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 (room_alias) {
+            payload.room_alias = room_alias;
+        } else {
+            payload.room_id = room.room_id;
+        }
+        dis.dispatch(payload);
     },
 
     getRows: function(filter) {
@@ -129,8 +195,8 @@ module.exports = React.createClass({
         var rooms = this.state.publicRooms.filter(function(a) {
             // FIXME: if incrementally typing, keep narrowing down the search set
             // incrementally rather than starting over each time.
-            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) || 
-                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) && 
+            return (((a.name && a.name.toLowerCase().search(filter.toLowerCase()) >= 0) ||
+                     (a.aliases && a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0)) &&
                       a.num_joined_members > 0);
         }).sort(function(a,b) {
             return a.num_joined_members - b.num_joined_members;
@@ -139,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 || alias || "Unnamed room";
+            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
             guestRead = null;
             guestJoin = null;
 
@@ -164,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)}>
+                <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 }
@@ -178,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 }
@@ -193,7 +262,7 @@ module.exports = React.createClass({
         this.forceUpdate();
         this.setState({ roomAlias : this.refs.roomAlias.value })
         if (ev.key == "Enter") {
-            this.showRoom(this.refs.roomAlias.value);
+            this.showRoomAlias(this.refs.roomAlias.value);
         }
     },
 
@@ -226,3 +295,8 @@ 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?
@@ -145,11 +149,26 @@ var RoomSubList = React.createClass({
         return this.tsOfNewestEvent(roomB) - this.tsOfNewestEvent(roomA);
     },
 
+    lexicographicalComparator: function(roomA, roomB) {
+        return roomA.name > roomB.name ? 1 : -1;
+    },
+
+    // Generates the manual comparator using the given list
     manualComparator: function(roomA, roomB) {
         if (!roomA.tags[this.props.tagName] || !roomB.tags[this.props.tagName]) return 0;
+
+        // Make sure the room tag has an order element, if not set it to be the bottom
         var a = roomA.tags[this.props.tagName].order;
         var b = roomB.tags[this.props.tagName].order;
-        return a == b ? this.recentsComparator(roomA, roomB) : ( a > b  ? 1 : -1);
+
+        // Order undefined room tag orders to the bottom
+        if (a === undefined && b !== undefined) {
+            return 1;
+        } else if (a !== undefined && b === undefined) {
+            return -1;
+        }
+
+        return a == b ? this.lexicographicalComparator(roomA, roomB) : ( a > b  ? 1 : -1);
     },
 
     sortList: function(list, order) {
@@ -160,6 +179,9 @@ var RoomSubList = React.createClass({
         if (order === "manual") comparator = this.manualComparator;
         if (order === "recent") comparator = this.recentsComparator;
 
+        // Fix undefined orders here, and make sure the backend gets updated as well
+        this._fixUndefinedOrder(list);
+
         //if (debug) console.log("sorting list for sublist " + this.props.label + " with length " + list.length + ", this.props.list = " + this.props.list);
         this.setState({ sortedList: list.sort(comparator) });
     },
@@ -308,6 +330,46 @@ var RoomSubList = React.createClass({
         this.props.onShowMoreRooms();
     },
 
+    // Fix any undefined order elements of a room in a manual ordered list
+    //     room.tag[tagname].order
+    _fixUndefinedOrder: function(list) {
+        if (this.props.order === "manual") {
+            var order = 0.0;
+            var self = this;
+
+            // Find the highest (lowest position) order of a room in a manual ordered list
+            list.forEach(function(room) {
+                if (room.tags.hasOwnProperty(self.props.tagName)) {
+                    if (order < room.tags[self.props.tagName].order) {
+                        order = room.tags[self.props.tagName].order;
+                    }
+                }
+            });
+
+            // Fix any undefined order elements of a room in a manual ordered list
+            // Do this one at a time, as each time a rooms tag data is updated the RoomList
+            // gets triggered and another list is passed in. Doing it one at a time means that
+            // we always correctly calculate the highest order for the list - stops multiple
+            // rooms getting the same order. This is only really relevant for the first time this
+            // is run with historical room tag data, after that there should only be undefined
+            // in the list at a time anyway.
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) {
+                    MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() {
+                        // Do any final stuff here
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to add tag " + self.props.tagName + " to room",
+                            description: err.toString()
+                        });
+                    });
+                    break;
+                };
+            };
+        }
+    },
+
     render: function() {
         var connectDropTarget = this.props.connectDropTarget;
         var RoomDropTarget = sdk.getComponent('rooms.RoomDropTarget');

src/components/structures/SearchBox.js

@@ -81,10 +81,20 @@ module.exports = React.createClass({
         var searchControls;
         if (!this.props.collapsed) {
             searchControls = [
+                    this.state.searchTerm.length > 0 ?
+                    <div key="button"
+                         className="mx_SearchBox_closeButton"
+                         onClick={ ()=>{ this.refs.search.value = ""; this.onChange(); } }>
+                        <TintableSvg
+                            className="mx_SearchBox_searchButton"
+                            src="img/icons-close.svg" width="24" height="24"
+                        />
+                    </div>
+                    :
                     <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"
@@ -93,7 +103,7 @@ module.exports = React.createClass({
                         className="mx_SearchBox_search"
                         value={ this.state.searchTerm }
                         onChange={ this.onChange }
-                        placeholder="Search room names"
+                        placeholder="Filter room names"
                     />
                 ];
         }

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,19 +126,18 @@ 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>
                 )
             }
         }
 
-        // 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">
-                <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
-                   onClick={ this.onPermalinkClick }>Permalink</a>
+            <div className="mx_MessageContextMenu_field">
+                <a href={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
+                   target="_blank" onClick={ this.onPermalinkClick }>Permalink</a>
             </div>
         );
 

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -0,0 +1,144 @@
+/*
+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 RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'NotificationStateContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState() {
+        return {
+            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+        }
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _save: function(newState) {
+        const oldState = this.state.roomNotifState;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+
+        if (cli.isGuest()) return;
+
+        this.setState({
+            roomNotifState: newState,
+        });
+        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
+            // delay slightly so that the user can see their state change
+            // before closing the menu
+            return q.delay(500).then(() => {
+                if (this._unmounted) return;
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            });
+        }, (error) => {
+            // TODO: some form of error notification to the user
+            // to inform them that their state change failed.
+            // For now we at least set the state back
+            if (this._unmounted) return;
+            this.setState({
+                roomNotifState: oldState,
+            });
+        });
+    },
+
+    _onClickAlertMe: function() {
+        this._save(RoomNotifs.ALL_MESSAGES_LOUD);
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(RoomNotifs.ALL_MESSAGES);
+    },
+
+    _onClickMentions: function() {
+        this._save(RoomNotifs.MENTIONS_ONLY);
+    },
+
+    _onClickMute: function() {
+        this._save(RoomNotifs.MUTE);
+    },
+
+    render: function() {
+        var alertMeClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
+        });
+
+        var allNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
+        });
+
+        var mentionsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
+        });
+
+        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_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <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_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <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/context_menus/RoomTagContextMenu.js

@@ -0,0 +1,201 @@
+/*
+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: 'RoomTagContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        return {
+            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
+            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+        };
+    },
+
+    _toggleTag: function(tagNameOn, tagNameOff) {
+        var self = this;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+        if (!cli.isGuest()) {
+            q.delay(500).then(function() {
+                if (tagNameOff !== null && tagNameOff !== undefined) {
+                    cli.deleteRoomTag(roomId, tagNameOff).finally(function() {
+                        // Close the context menu
+                        if (self.props.onFinished) {
+                            self.props.onFinished();
+                        };
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to remove tag " + tagNameOff + " from room",
+                            description: err.toString()
+                        });
+                    });
+                }
+
+                if (tagNameOn !== null && tagNameOn !== undefined) {
+                    // If the tag ordering meta data is required, it is added by
+                    // the RoomSubList when it sorts its rooms
+                    cli.setRoomTag(roomId, tagNameOn, {}).finally(function() {
+                        // Close the context menu
+                        if (self.props.onFinished) {
+                            self.props.onFinished();
+                        };
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to add tag " + tagNameOn + " to room",
+                            description: err.toString()
+                        });
+                    });
+                }
+            });
+        }
+    },
+
+    _onClickFavourite: function() {
+        // Tag room as 'Favourite'
+        if (!this.state.isFavourite && this.state.isLowPriority) {
+            this.setState({
+                isFavourite: true,
+                isLowPriority: false,
+            });
+            this._toggleTag("m.favourite", "m.lowpriority");
+        } else if (this.state.isFavourite) {
+            this.setState({isFavourite: false});
+            this._toggleTag(null, "m.favourite");
+        } else if (!this.state.isFavourite) {
+            this.setState({isFavourite: true});
+            this._toggleTag("m.favourite");
+        }
+    },
+
+    _onClickLowPriority: function() {
+        // Tag room as 'Low Priority'
+        if (!this.state.isLowPriority && this.state.isFavourite) {
+            this.setState({
+                isFavourite: false,
+                isLowPriority: true,
+            });
+            this._toggleTag("m.lowpriority", "m.favourite");
+        } else if (this.state.isLowPriority) {
+            this.setState({isLowPriority: false});
+            this._toggleTag(null, "m.lowpriority");
+        } else if (!this.state.isLowPriority) {
+            this.setState({isLowPriority: true});
+            this._toggleTag("m.lowpriority");
+        }
+    },
+
+    _onClickLeave: function() {
+        // Leave room
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickForget: function() {
+        // FIXME: duplicated with RoomSettings (and dead code in RoomView)
+        MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
+            dis.dispatch({ action: 'view_next_room' });
+        }, function(err) {
+            var errCode = err.errcode || "unknown error code";
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: `Failed to forget room (${errCode})`
+            });
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    render: function() {
+        var myUserId = MatrixClientPeg.get().credentials.userId;
+        var myMember = this.props.room.getMember(myUserId);
+
+        var favouriteClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        var lowPriorityClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        var leaveClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': false,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        if (myMember && myMember.membership === "leave") {
+            return (
+                <div>
+                    <div className={ leaveClasses } onClick={ this._onClickForget } >
+                        <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                        Forget
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <div className={ favouriteClasses } onClick={this._onClickFavourite} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_fave.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    Favourite
+                </div>
+                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_low.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    Low Priority
+                </div>
+                <hr className="mx_RoomTagContextMenu_separator" />
+                <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    Leave
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/dialogs/ChangelogDialog.js

@@ -0,0 +1,82 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import request from 'browser-request';
+
+const REPOS = ['vector-im/vector-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
+
+export default class ChangelogDialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const version = this.props.newVersion.split('-');
+        const version2 = this.props.version.split('-');
+        if(version == null || version2 == null) return;
+        for(let i=0; i<REPOS.length; i++) {
+            const oldVersion = version2[2*i+1];
+            const newVersion = version[2*i+1];
+            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
+                if(body == null) return;
+                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+            });
+        }
+    }
+
+    render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+
+        const logs = REPOS.map(repo => {
+            if (this.state[repo] == null) return <Spinner key={repo} />;
+            return (
+                <div key={repo}>
+                    <h2>{repo}</h2>
+                    {this.state[repo].map(commit =>
+                        <div key={commit.commit.url}><a href={commit.commit.url}>{commit.commit.message}</a></div>
+                    )}
+                </div>
+            )
+        });
+
+        const content = (
+            <div className="mx_ChangelogDialog_content">
+                {this.props.version == null || this.props.newVersion == null ? <h2>Unavailable</h2> : logs}
+            </div>
+        );
+
+
+        return (
+            <QuestionDialog
+                title="Changelog"
+                description={content}
+                button="Update"
+                onFinished={this.props.onFinished}
+                />
+        )
+    }
+}
+
+ChangelogDialog.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/elements/ImageView.js

@@ -80,7 +80,7 @@ module.exports = React.createClass({
     getName: function () {
         var name = this.props.name;
         if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank">{ name }</a>;
+            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
         }
         return name;
     },
@@ -169,7 +169,7 @@ module.exports = React.createClass({
                                 { this.getName() }
                             </div>
                             { eventMeta }
-                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
+                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank" rel="noopener">
                                 <div className="mx_ImageView_download">
                                         Download this file<br/>
                                          <span className="mx_ImageView_size">{ size_res }</span>

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/globals/NewVersionBar.js

@@ -17,20 +17,36 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+import Modal from 'matrix-react-sdk/lib/Modal';
 
-module.exports = React.createClass({
-    displayName: 'NewVersionBar',
+export default function NewVersionBar(props) {
+    const onChangelogClicked = () => {
+        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
 
-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
-                    A new version of Vector is available. Refresh your browser.
-                </div>
+        Modal.createDialog(ChangelogDialog, {
+            version: props.version,
+            newVersion: props.newVersion,
+            onFinished: (update) => {
+                if(update) {
+                    window.location.reload();
+                }
+            }
+        });
+    };
+
+    return (
+        <div className="mx_MatrixToolbar">
+            <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
+            <div className="mx_MatrixToolbar_content">
+                A new version of Vector is available. Refresh your browser.
             </div>
-        );
-    }
-});
+            <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>
+        </div>
+    );
+}
 
+NewVersionBar.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+};

src/components/views/messages/MessageTimestamp.js

@@ -26,7 +26,7 @@ module.exports = React.createClass({
         var date = new Date(this.props.ts);
         return (
             <span className="mx_MessageTimestamp">
-                { DateUtils.formatDate(date) }
+                { DateUtils.formatTime(date) }
             </span>
         );
     },

src/components/views/messages/SenderProfile.js

@@ -1,45 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'SenderProfile',
-
-    propTypes: {
-        mxEvent: React.PropTypes.object.isRequired, // event whose sender we're showing
-        aux: React.PropTypes.string, // stuff to go after the sender name, if anything
-        onClick: React.PropTypes.func,
-    },
-
-    render: function() {
-        var mxEvent = this.props.mxEvent;
-        var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-
-        var msgtype = mxEvent.getContent().msgtype;
-        if (msgtype && msgtype == 'm.emote') {
-            return <span/>; // emote message must include the name so don't duplicate it
-        }
-        return (
-            <span className="mx_SenderProfile" onClick={this.props.onClick}>
-                {name} { this.props.aux }
-            </span>
-        );
-    },
-});
-

src/components/views/settings/IntegrationsManager.js

@@ -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.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'IntegrationsManager',
+
+    propTypes: {
+        src: React.PropTypes.string.isRequired, // the source of the integration manager being embedded
+        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
+    },
+
+    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
+    // dialog base class somehow, surely...
+    componentDidMount: function() {
+        document.addEventListener("keydown", this.onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        document.removeEventListener("keydown", this.onKeyDown);
+    },
+
+    onKeyDown: function(ev) {
+        if (ev.keyCode == 27) { // escape
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_IntegrationsManager">
+                <iframe src={ this.props.src }></iframe>
+            </div>
+        );
+    }
+});

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
@@ -69,6 +69,19 @@ module.exports = React.createClass({
         ERROR: "ERROR"      // There was an error
     },
 
+    propTypes: {
+        // The array of threepids from the JS SDK (required for email notifications)
+        threepids: React.PropTypes.array.isRequired,
+        // The brand string set when creating an email pusher
+        brand: React.PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            threepids: []
+        };
+    },
+
     getInitialState: function() {
         return {
             phase: this.phases.LOADING,
@@ -102,6 +115,28 @@ module.exports = React.createClass({
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },
 
+    onEnableEmailNotificationsChange: function(address, event) {
+        var emailPusherPromise;
+        if (event.target.checked) {
+            var data = {}
+            data['brand'] = this.props.brand || 'Vector';
+            emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
+        } else {
+            var emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
+            emailPusher.kind = null;
+            emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher);
+        }
+        emailPusherPromise.done(() => {
+            this._refreshFromServer();
+        }, (error) => {
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error saving email notification preferences",
+                description: "Vector was unable to save your email notification preferences.",
+            });
+        });
+    },
+
     onNotifStateButtonClicked: function(event) {
         // FIXME: use .bind() rather than className metadata here surely
         var vectorRuleId = event.target.className.split("-")[0];
@@ -620,6 +655,24 @@ module.exports = React.createClass({
         return rows;
     },
 
+    emailNotificationsRow: function(address, label) {
+        return (<div className="mx_UserNotifSettings_tableRow">
+            <div className="mx_UserNotifSettings_inputCell">
+                <input id="enableEmailNotifications_{address}"
+                    ref="enableEmailNotifications_{address}"
+                    type="checkbox"
+                    checked={ UserSettingsStore.hasEmailPusher(this.state.pushers, address) }
+                    onChange={ this.onEnableEmailNotificationsChange.bind(this, address) }
+                />
+            </div>
+            <div className="mx_UserNotifSettings_labelCell">
+                <label htmlFor="enableEmailNotifications_{address}">
+                    {label}
+                </label>
+            </div>
+        </div>);
+    },
+
     render: function() {
         var self = this;
 
@@ -656,12 +709,29 @@ module.exports = React.createClass({
                     {masterPushRuleDiv}
 
                     <div className="mx_UserSettings_notifTable">
-                        All notifications are currently disabled for all devices.
+                        All notifications are currently disabled for all targets.
                     </div>
                 </div>
             );
         }
 
+        var emailNotificationsRow;
+        if (this.props.threepids.filter(function(tp) {
+                if (tp.medium == "email") {
+                    return true;
+                }
+            }).length == 0) {
+            emailNotificationsRow = <div>
+                Add an email address above to configure email notifications
+            </div>;
+        } else {
+            // This only supports the first email address in your profile for now
+            emailNotificationsRow = this.emailNotificationsRow(
+                this.props.threepids[0].address,
+                "Enable email notifications ("+this.props.threepids[0].address+")"
+            );
+        }
+
         // Build external push rules
         var externalRules = [];
         for (var i in this.state.externalPushRules) {
@@ -682,13 +752,11 @@ module.exports = React.createClass({
 
         var devicesSection;
         if (this.state.pushers === undefined) {
-            devicesSection = <div className="error">Unable to fetch device list</div>
+            devicesSection = <div className="error">Unable to fetch notification target list</div>
         } else if (this.state.pushers.length == 0) {
-            devicesSection = <div className="mx_UserSettings_devicesTable_nodevices">
-                No devices are receiving push notifications
-            </div>
+            devicesSection = null;
         } else {
-            // It would be great to be able to delete pushers from here too,
+            // TODO: It would be great to be able to delete pushers from here too,
             // and this wouldn't be hard to add.
             var rows = [];
             for (var i = 0; i < this.state.pushers.length; ++i) {
@@ -698,17 +766,17 @@ module.exports = React.createClass({
                 </tr>);
             }
             devicesSection = (<table className="mx_UserSettings_devicesTable">
-                <thead>
-                    <tr>
-                        <th>Application</th>
-                        <th>Device</th>
-                    </tr>
-                </thead>
                 <tbody>
                     {rows}
                 </tbody>
             </table>);
         }
+        if (devicesSection) {
+            devicesSection = (<div>
+                <h3>Notification targets</h3>
+                { devicesSection }
+            </div>);
+        }
 
         var advancedSettings;
         if (externalRules.length) {
@@ -766,7 +834,7 @@ module.exports = React.createClass({
                         </div>
                     </div>
 
-                    <h3>General use</h3>
+                    { emailNotificationsRow }
 
                     <div className="mx_UserNotifSettings_pushRulesTableWrapper">
                         <table className="mx_UserNotifSettings_pushRulesTable">
@@ -788,7 +856,6 @@ module.exports = React.createClass({
 
                     { advancedSettings }
 
-                    <h3>Devices</h3>
                     { devicesSection }
 
                 </div>

src/notifications/VectorPushRulesDefinitions.js

@@ -65,7 +65,7 @@ module.exports = {
     // Messages containing user's display name
     // (skip contains_user_name which is too geeky)
     ".m.rule.contains_display_name": new VectorPushRuleDefinition({
-        kind: "underride",
+        kind: "override",
         description: "Messages containing my name",
         vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
             on: StandardActions.ACTION_NOTIFY,

src/skins/vector/css/common.css

@@ -32,6 +32,8 @@ body {
     color: #454545;
     border: 0px;
     margin: 0px;
+    /* This should render the fonts the same accross browsers */
+    -webkit-font-smoothing: subpixel-antialiased;
 }
 
 div.error {
@@ -52,12 +54,21 @@ a:visited {
     color: #76cfa6;
 }
 
+input[type=text].error, input[type=password].error {
+    border: 1px solid red;
+}
+
 input[type=text]:focus, textarea:focus {
     border: 1px solid #76CFA6;
     outline: none;
     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;
@@ -75,53 +86,27 @@ input[type=text]:focus, textarea:focus {
     position: absolute;
 }
 
-/* hack to avoid accidental click-throughs if you miss the narrow scrollbar */
+/* Expand thumbs on hoverover */
+.gm-scrollbar {
+    border-radius: 5px ! important;
+}
 .gm-scrollbar.-vertical {
-    border-left: 6px solid transparent;
+    width: 6px;
+    transition: width 120ms ease-out ! important;
 }
-
-.mx_ContextualMenu_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1.0;
-    z-index: 2000;
+.gm-scrollbar.-vertical:hover,
+.gm-scrollbar.-vertical:active {
+    width: 8px;
+    transition: width 120ms ease-out ! important;
 }
-
-.mx_ContextualMenu {
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #747474;
-    position: fixed;
-    z-index: 2001;
-    padding: 6px;
+.gm-scrollbar.-horizontal {
+    height: 6px;
+    transition: height 120ms ease-out ! important;
 }
-
-.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;
+.gm-scrollbar.-horizontal:hover,
+.gm-scrollbar.-horizontal:active {
+    height: 8px;
+    transition: height 120ms ease-out ! important;
 }
 
 .mx_Dialog_wrapper {
@@ -143,16 +128,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;
-    max-width: 80%;
+    padding-left: 58px;
+    width: 60%;
+    max-width: 704px;
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
 }
 
 .mx_Dialog_background {
@@ -161,12 +161,13 @@ input[type=text]:focus, textarea:focus {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #000;
-    opacity: 0.2;
+    background-color: #e9e9e9;
+    opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
+    background-color: #000;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {
@@ -180,34 +181,60 @@ 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 button.danger, .mx_Dialog input[type="submit"].danger {
+    background-color: #ff0064;
+    border: solid 1px #ff0064;
+}
+
+.mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
+    background-color: #777777;
+    border: solid 1px #777777;
+    opacity: 0.7;
 }
 
 .mx_Dialog_title {
     min-height: 16px;
-    padding: 12px;
-    border-bottom: 1px solid #a4a4a4;
+    padding-top: 40px;
     font-weight: bold;
-    font-size: 18px;
+    font-size: 22px;
     line-height: 1.4;
+    color: #454545;
+}
+
+.mx_Dialog_title.danger {
+    color: #ff0064;
 }
 
 .mx_TextInputDialog_label {
@@ -224,7 +251,29 @@ input[type=text]:focus, textarea:focus {
     background-color: #fff;
 }
 
-.emojione {
+.mx_emojione {
     height: 1em;
     vertical-align: middle;
 }
+
+::-moz-selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+::selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+/** green button with rounded corners */
+.mx_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;
-    flex: 0 0 210px;
+    -webkit-flex: 0 0 235px;
+    flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
@@ -109,7 +109,7 @@ limitations under the License.
     -webkit-order: 2;
     order: 2;
 
-    padding-left: 25px;
+    padding-left: 20px;
     padding-right: 22px;
     background-color: #fff;
 

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

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_SearchBox {
     height: 24px;
     margin-left: 16px;
-    margin-right: 20px;
+    margin-right: 16px;
     padding-top: 24px;
     padding-bottom: 22px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
@@ -28,6 +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 {
@@ -60,4 +67,4 @@ limitations under the License.
 
 .mx_SearchBox object {
     pointer-events: none;
-}
+}

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

@@ -94,12 +94,26 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_UserSettings_button.danger {
+    background-color: #ff0064;
+}
+
 .mx_UserSettings_section {
     margin-left: 63px;
     margin-top: 28px;
     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;
-    left: 50%;
-    margin-top: 12px;
+    display: inline;
+    position: relative;
+    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/dialogs/MultiInviteDialog.css

@@ -0,0 +1,36 @@
+/*
+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_MultiInviteDialog ul {
+    height: 300px;
+    overflow-y: auto;
+}
+
+.mx_MultiInviteDialog li {
+    list-style-type: none;
+}
+
+.mx_MultiInviteDialog_statusText {
+    text-indent: 20px;
+}
+
+.mx_MultiInviteDialog p.error {
+    color: #ff0064;
+}
+
+.mx_MultiInviteDialog p.invited {
+    color: #76cfa6;
+}

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

@@ -0,0 +1,22 @@
+.mx_UserPill {
+    color: white;
+    background-color: #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_RoomPill {
+    background-color: white;
+    color: #76cfa6;
+    border: 1px solid #76cfa6;
+    padding: 2px 8px;
+    border-radius: 16px;
+}
+
+.mx_Markdown_BOLD {
+    font-weight: bold;
+}
+
+.mx_Markdown_ITALIC {
+    font-style: italic;
+}

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

@@ -16,6 +16,7 @@ limitations under the License.
 
 .mx_MImageBody {
     display: block;
+    margin-right: 34px;
 }
 
 .mx_MImageBody_thumbnail {

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,79 @@
+.mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid #e5e5e5;
+    background: white;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_Autocomplete_ProviderSection {
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+}
+
+/* a "block" completion takes up a whole line */
+.mx_Autocomplete_Completion_block {
+    height: 34px;
+    display: flex;
+    padding: 0 12px;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
+}
+
+.mx_Autocomplete_Completion_block * {
+     margin: 0 3px;
+}
+
+.mx_Autocomplete_Completion_pill {
+    border-radius: 17px;
+    height: 34px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
+}
+
+.mx_Autocomplete_Completion_pill * {
+    margin: 0 3px;
+}
+
+/* container for pill-style completions */
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
+}
+
+.mx_Autocomplete_Completion.selected {
+    background: #f6f6f6;
+    outline: none;
+}
+
+.mx_Autocomplete_provider_name {
+    margin: 12px;
+    color: #454545;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}

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

@@ -52,6 +52,7 @@ limitations under the License.
     display: table-cell;
     vertical-align: middle;
     overflow: hidden;
+    font-size: 14px;
     text-overflow: ellipsis;
 }
 
@@ -86,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 .mx_EntityTile_name,
-.mx_EntityTile_offline .mx_EntityTile_name_hover
+.mx_EntityTile_offline_neveractive .mx_EntityTile_avatar,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name,
+.mx_EntityTile_offline_neveractive .mx_EntityTile_name_hover
 {
     opacity: 0.25;
 }

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

@@ -17,103 +17,95 @@ limitations under the License.
 .mx_EventTile {
     max-width: 100%;
     clear: both;
-    margin-top: 24px;
-    margin-left: 65px;
+    padding-top: 18px;
+    font-size: 14px;
+    position: relative;
+}
+
+.mx_EventTile.mx_EventTile_info {
+    padding-top: 0px;
 }
 
 .mx_EventTile_avatar {
-    padding-left: 18px;
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: -2px;
-    float: left;
-    position: relative;
-    top: 0px;
+    position: absolute;
+    top: 14px;
+    left: 8px;
     cursor: pointer;
+    z-index: 2;
+}
+
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    top: 8px;
+    left: 44px;
 }
 
 .mx_EventTile_continuation {
-    margin-top: 8px ! important;
+    padding-top: 0px ! important;
+}
+
+.mx_EventTile_verified {
+    background-color: #eaf5f0;
+}
+
+.mx_EventTile_unverified {
+    background-color: #ffa0a0;
 }
 
 .mx_EventTile .mx_SenderProfile {
     color: #454545;
     opacity: 0.5;
-    display: inline-block;
-    font-size: 13px;
+    font-size: 14px;
+    display: block; /* anti-zalgo, with overflow hidden */
     overflow-y: hidden;
     cursor: pointer;
+    padding-left: 65px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 22px;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
     color: #acacac;
     font-size: 11px;
+    left: 8px;
+    position: absolute;
 }
 
 .mx_EventTile_line {
     position: relative;
     /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-    margin-right: 95px;
+    margin-right: 110px;
+    padding-left: 65px; /* left gutter */
+    padding-top: 4px;
+    padding-bottom: 2px;
+    border-radius: 4px;
+    min-height: 24px;
+    line-height: 22px;
 }
 
-/* all the overflow-y: hidden; are to trap Zalgos -
-   but they introduce an implicit overflow-x: auto.
-   so make that explicitly hidden too to avoid random
-   horizontal scrollbars occasionally appearing, like in
-   https://github.com/vector-im/vector-web/issues/1154
-    */
-.mx_EventTile_content {
-    display: block;
-    overflow-y: hidden;
-    overflow-x: hidden;
+/* HACK to override line-height which is already marked important elsewhere */
+.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
+    font-size: 48px ! important;
+    line-height: 48px ! important;
 }
 
-/* Various markdown overrides */
-
-.mx_EventTile_content .markdown-body {
-    font-family: inherit ! important;
-    white-space: normal ! important;
-    line-height: inherit ! important;
-    color: inherit;
-    font-size: 15px;
-}
-
-/* have to use overlay rather than auto otherwise Linux and Windows
-   Chrome gets very confused about vertical spacing:
-   https://github.com/vector-im/vector-web/issues/754
-*/
-.mx_EventTile_content .markdown-body pre {
-    overflow-x: overlay;
-    overflow-y: visible;
-}
-
-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2,
-.mx_EventTile_content .markdown-body h3,
-.mx_EventTile_content .markdown-body h4,
-.mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6
-{
-    font-family: inherit ! important;
-}
-
-.mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
-}
-
-.mx_EventTile_content .markdown-body .hljs {
-    display: inline ! important;
-}
-
-/* end of overrides */
-
 /* this is used for the tile for the event which is selected via the URL.
  * TODO: ultimately we probably want some transition on here.
  */
-.mx_EventTile_selected {
+.mx_EventTile_selected .mx_EventTile_line {
     border-left: #76cfa6 5px solid;
-    margin-left: 53px;
-    padding-left: 7px;
+    padding-left: 60px;
+    background-color: #f7f7f7;
+}
+
+.mx_EventTile:hover .mx_EventTile_line,
+.mx_EventTile.menu .mx_EventTile_line
+{
+    background-color: #f7f7f7;
 }
 
 .mx_EventTile_searchHighlight {
@@ -162,32 +154,29 @@ limitations under the License.
     text-decoration: none;
 }
 
-.mx_EventTile .mx_MessageTimestamp {
-    display: block;
-    visibility: hidden;
-    text-align: right;
-    white-space: nowrap;
-}
-
-.mx_EventTile_last .mx_MessageTimestamp {
+.mx_EventTile_last .mx_MessageTimestamp,
+.mx_EventTile:hover .mx_MessageTimestamp,
+.mx_EventTile.menu .mx_MessageTimestamp
+{
     visibility: visible;
 }
 
-.mx_EventTile:hover .mx_MessageTimestamp {
-    visibility: visible;
+.mx_EventTile_selected .mx_MessageTimestamp {
+    left: 3px;
 }
 
 .mx_EventTile_editButton {
     position: absolute;
     display: inline-block;
     visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
 }
 
-.mx_EventTile:hover .mx_EventTile_editButton {
-    visibility: visible;
-}
-
-.mx_EventTile.menu .mx_EventTile_editButton {
+.mx_EventTile:hover .mx_EventTile_editButton,
+.mx_EventTile.menu .mx_EventTile_editButton
+{
     visibility: visible;
 }
 
@@ -200,6 +189,13 @@ limitations under the License.
     display: inline-block;
     width: 14px;
     height: 14px;
+    top: 29px;
+}
+
+.mx_EventTile_continuation .mx_EventTile_readAvatars,
+.mx_EventTile_info .mx_EventTile_readAvatars
+{
+    top: 7px;
 }
 
 .mx_EventTile_readAvatars .mx_BaseAvatar {
@@ -212,3 +208,60 @@ limitations under the License.
     font-size: 11px;
     position: absolute;
 }
+
+/* all the overflow-y: hidden; are to trap Zalgos -
+   but they introduce an implicit overflow-x: auto.
+   so make that explicitly hidden too to avoid random
+   horizontal scrollbars occasionally appearing, like in
+   https://github.com/vector-im/vector-web/issues/1154
+    */
+.mx_EventTile_content {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
+}
+
+/* Various markdown overrides */
+
+.mx_EventTile_content .markdown-body {
+    font-family: inherit ! important;
+    white-space: normal ! important;
+    line-height: inherit ! important;
+    color: inherit;
+    font-size: 14px;
+}
+
+/* have to use overlay rather than auto otherwise Linux and Windows
+   Chrome gets very confused about vertical spacing:
+   https://github.com/vector-im/vector-web/issues/754
+*/
+.mx_EventTile_content .markdown-body pre {
+    overflow-x: overlay;
+    overflow-y: visible;
+}
+
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
+{
+    font-family: inherit ! important;
+}
+
+.mx_EventTile_content .markdown-body a {
+    color: #76cfa6;
+}
+
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
+}
+
+/* end of overrides */

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

@@ -34,8 +34,8 @@ limitations under the License.
 
 .mx_LinkPreviewWidget_caption {
     margin-left: 15px;
-    -webkit-flex: 1;
-    flex: 1;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
 }
 
 .mx_LinkPreviewWidget_title {
@@ -50,11 +50,14 @@ limitations under the License.
 .mx_LinkPreviewWidget_description {
     margin-top: 8px;
     white-space: normal;
+    word-break: break-word;
 }
 
 .mx_LinkPreviewWidget_cancel {
     visibility: hidden;
     cursor: pointer;
+    -webkit-flex: 0 0 40px;
+    flex: 0 0 40px;
 }
 
 .mx_LinkPreviewWidget:hover .mx_LinkPreviewWidget_cancel {

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

@@ -0,0 +1,57 @@
+/*
+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_MemberDeviceInfo {
+    font-size: 12px;
+    display: table-row;
+    height: 17px;
+}
+
+.mx_MemberDeviceInfo div {
+    display: table-cell;
+}
+
+.mx_MemberDeviceInfo_textButton {
+    color: #fff;
+    background-color: #76cfa6;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+
+    cursor: pointer;
+}
+
+.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 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

@@ -17,6 +17,7 @@ limitations under the License.
 .mx_MemberInfo {
     margin-top: 20px;
     height: 100%;
+    overflow-y: auto;
 }
 
 .mx_MemberInfo h2 {
@@ -72,3 +73,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/MemberList.css

@@ -18,6 +18,7 @@ limitations under the License.
     height: 100%;
 
     margin-top: 12px;
+    margin-right: 20px;
 
     -webkit-flex: 1;
     flex: 1;

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

@@ -21,16 +21,21 @@ limitations under the License.
     border-top: 1px solid #e5e5e5;
 }
 
+.mx_MessageComposer_autocomplete_wrapper {
+    position: relative;
+    height: 0;
+}
+
 .mx_MessageComposer_row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
     width: 100%;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar {
-    display: table-cell;
     padding-left: 10px;
     padding-right: 28px;
-    vertical-align: middle;
 }
 
 .mx_MessageComposer .mx_MessageComposer_avatar .mx_BaseAvatar {
@@ -42,9 +47,7 @@ limitations under the License.
 }
 
 .mx_MessageComposer_noperm_error {
-    display: table-cell;
     width: 100%;
-    vertical-align: middle;
     height: 60px;
     text-align: center;
     font-style: italic;
@@ -52,15 +55,26 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input {
-    display: table-cell;
-    width: 100%;
+    flex: 1;
     vertical-align: middle;
-    height: 60px;
+    min-height: 60px;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+    font-size: 14px;
+    margin-right: 6px;
+}
+.mx_MessageComposer_input_rte {
+    border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    flex: 1;
 }
 
 .mx_MessageComposer_input textarea {
     display: block;
-    font-size: 15px;
     width: 100%;
     padding: 0px;
     margin-top: 6px;
@@ -73,6 +87,7 @@ limitations under the License.
     box-shadow: none;
     color: #454545;
     background-color: #fff;
+    font-size: 14px;
 
     /* needed for FF */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -92,11 +107,12 @@ limitations under the License.
 .mx_MessageComposer_hangup,
 .mx_MessageComposer_voicecall,
 .mx_MessageComposer_videocall {
-    display: table-cell;
-    vertical-align: middle;
-    padding-left: 10px;
-    padding-right: 10px;
+    /*display: table-cell;*/
+    /*vertical-align: middle;*/
+    /*padding-left: 10px;*/
+    padding-right: 5px;
     cursor: pointer;
+    padding-top: 4px;
 }
 
 .mx_MessageComposer_upload object,
@@ -106,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;
-    vertical-align: top;
-    padding-left: 8px;
-    padding-right: 8px;
+    margin-left: 12px;
     cursor: pointer;
 }
 

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

@@ -19,6 +19,21 @@ limitations under the License.
     margin-bottom: 20px;
 }
 
+.mx_RoomSettings_leaveButton {
+    height: 36px;
+    background-color: #76cfa6;
+    border-radius: 36px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 34px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
+    margin-right: 32px;
+}
+
 .mx_RoomSettings_powerLevels {
     display: table;
 }

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

@@ -15,32 +15,79 @@ limitations under the License.
 */
 
 .mx_RoomTile {
+    position: relative;
     cursor: pointer;
-    /* This fixes wrapping of long room names, but breaks drag & drop previews */
-    /* display: table-row; */
     font-size: 13px;
+    display: block;
+    height: 34px;
+}
+
+.mx_RoomTile_nameContainer {
+    display: inline-block;
+    width: 180px;
+    height: 24px;
 }
 
 .mx_RoomTile_avatar {
-    display: table-cell;
-    padding-right: 11px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 20px;
+    display: inline-block;
+    padding-top: 5px;
+    padding-bottom: 5px;
+    padding-left: 16px;
+    padding-right: 6px;
     width: 24px;
     height: 24px;
-    position: relative;
     vertical-align: middle;
 }
 
+.mx_RoomTile_avatar_container:hover:before,
+.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
+    display: block;
+    position: absolute;
+    content: "";
+    border-radius: 40px;
+    background-image: url("img/icons_ellipsis.svg");
+    background-size: 25px;
+    left: 15px;
+    width: 24px;
+    height: 24px;
+    z-index: 4;
+}
+
+.mx_RoomTile_avatar_container:hover:after,
+.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
+    display: block;
+    position: absolute;
+    content: "";
+    border-radius: 40px;
+    background: #4A4A4A;
+    top: 5px;
+    width: 24px;
+    height: 24px;
+    opacity: 0.6;
+    z-index: 2;
+}
+
+.collapsed .mx_RoomTile_avatar_container:hover:before {
+    display: none;
+}
+
+.collapsed .mx_RoomTile_avatar_container:hover:after {
+    display: none;
+}
+
 .mx_RoomTile_name {
-    display: table-cell;
-    width: 100%;
+    display: inline-block;
+    position: relative;
+    width: 165px;
     vertical-align: middle;
-    overflow: hidden;
-    word-break: break-word;
-    padding-right: 19px;
+    padding-left: 6px;
+    padding-right: 6px;
+    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 {
@@ -53,103 +100,87 @@ limitations under the License.
 */
 }
 
+.collapsed .mx_RoomTile_nameContainer {
+    height: 0;
+}
+
 .collapsed .mx_RoomTile_name {
     display: none;
 }
 
-/*
-.mx_RoomTile_nameBadge {
-    display: table;
-    width: 100%;
-    height: 50px;
-}
-
-.mx_RoomTile_badgeCell {
-    display: table-cell;
-    vertical-align: middle;
-    width: 26px;
-}
-
-.mx_RoomTile_badge {
-    background-color: #76cfa6;
-    color: #fff;
-    border-radius: 26px;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 28px;
-    width: 26px;
-    height: 26px;
-    text-align: center;
-}
-*/
-
-/*
-.mx_RoomTile_badge {
-    background-color: #ff0064;
-    border: 3px solid #fff;
+.collapsed .mx_RoomTile_badge {
+    top: -2px;
+    min-width: 12px;
+    height: 16px;
     border-radius: 16px;
-    width: 9px;
-    height: 9px;
-    position: absolute;
-    right: 9px;
-    bottom: 3px;
+    padding: 0px 4px 0px 4px;
+    z-index: 200;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomTile_highlight .mx_RoomTile_badge:after {
+    display: none;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomTile_highlight .mx_RoomTile_badge: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 {
-    background-color: #ff0064;
-    width: 8px;
-    height: 8px;
+    display: inline-block;
+    min-width: 19px;
+    height: 17px;
     position: absolute;
-    left: 7px;
-    top: 50%;
-    margin-top: -4px;
-    border-radius: 4px;
+    right: 8px; /*gutter */
+    top: 9px;
+    border-radius: 14px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 11px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomTile .mx_RoomTile_badge.mx_RoomTile_badgeButton,
+.mx_RoomTile.mx_RoomTile_notificationStateMenu .mx_RoomTile_badge {
+    letter-spacing: 0.1em;
+    opacity: 1;
+}
+
+.mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
+.mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
+    background-color: rgb(214, 214, 214);
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #454545;
+    background-color: #76cfa6;
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge {
     background-color: #ff0064;
 }
 
-.mx_RoomTile_unread,
-.mx_RoomTile_highlight {
-    font-weight: bold;
+.mx_RoomTile_unread, .mx_RoomTile_highlight {
+    font-weight: 800;
 }
 
-.mx_RoomTile_selected .mx_RoomTile_name {
-    padding-right: 23px;
-}
-
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    color: #ff0064 ! important;
-}
-
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_avatar {
-    padding-right: 7px;
-}
-
-.mx_RoomTile.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;
+.mx_RoomTile_selected {
     background-color: rgba(118,207,166,0.2);
 }
 
-/*
-.mx_RoomTile.mx_RoomTile_selected .mx_RoomTile_name {
-    background: url('img/selected.png');
-    background-repeat: no-repeat;
-    background-position: right center;
+.mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
+    width: 140px;
 }
-*/
 
 .mx_RoomTile_arrow {
     position: absolute;

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

@@ -32,7 +32,7 @@ limitations under the License.
     margin-left: 3px;
     font-size: 15px;
     margin-bottom: 8px;
-    width: 180px;
+    width: 189px;
 }
 
 .mx_SearchableEntityList_query::-moz-placeholder {

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/matrix-react-sdk/views/settings/IntegrationsManager.css

@@ -0,0 +1,33 @@
+/*
+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_IntegrationsManager {
+    display: -webkit-flex;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    -webkit-align-items: center;
+    align-items: center;
+    justify-content: center;
+    -webkit-justify-content: center;
+}
+
+.mx_IntegrationsManager iframe {
+    background-color: #fff;
+    border: 0px;
+    width: 720px;
+    height: 512px;
+}

src/skins/vector/css/vector-web/fonts.css

@@ -0,0 +1,65 @@
+/*
+ * Open Sans
+ * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
+ */
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/*
+ * Fira Mono
+ * Used for monospace copy, i.e. code
+ */
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}

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: 20px;
-    margin-right: 20px;
+    margin-left: 16px; /* gutter */
+    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;
-    background-color: #76cfa6;
+    height: 5px;
+    border-radius: 5px;
+    background-color: rgba(118, 207, 166, 0.2);
 }
 
 .mx_RightPanel_headerButton_badge {
-    position: absolute;
-    top: 4px;
-    left: 28px;
-    font-size: 12px;
-    background-color: #76cfa6;
-    color: #fff;
+    font-size: 11px;
+    color: #76cfa6;
     font-weight: bold;
-    border-radius: 20px;
-    padding-left: 4px;
-    padding-right: 4px;
-    padding-top: 0px;
+    padding-bottom: 2px;
 }
 
 .mx_RightPanel .mx_MemberList,

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

@@ -22,8 +22,6 @@ limitations under the License.
     margin-bottom: 12px;
     color: #4a4a4a;
 
-    border-top: 1px solid #c5c5c5;
-
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;

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-right: 12px;
+    padding-left: 16px; /* gutter */
+    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: 8px; /* 20px */
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+}
+
+.mx_NotificationStateContextMenu_field.mx_NotificationStateContextMenu_fieldSet {
+    font-weight: bold;
+}
+
+.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: inline-block;
+    opacity: 0;
+    position: relative;
+    left: -5px;
+}
+
+.mx_NotificationStateContextMenu_fieldSet .mx_NotificationStateContextMenu_activeIcon {
+    opacity: 1;
+}

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

@@ -0,0 +1,79 @@
+/*
+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_RoomTagContextMenu_field {
+    padding-top: 8px;
+    padding-right: 20px;
+    padding-bottom: 8px;
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    line-height: 16px;
+}
+
+.mx_RoomTagContextMenu_field:first-child {
+    padding-top: 4px;
+}
+
+.mx_RoomTagContextMenu_field:last-child {
+    padding-bottom: 4px;
+    color: #ff0064;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
+    font-weight: bold;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
+    display: none;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon_set {
+    display: inline-block;
+}
+
+.mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldDisabled {
+    color: rgba(0, 0, 0, 0.2);
+}
+
+.mx_RoomTagContextMenu_icon {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: inline-block
+}
+
+.mx_RoomTagContextMenu_icon_set {
+    padding-right: 8px;
+    padding-left: 4px;
+    display: none;
+}
+
+.mx_RoomTagContextMenu_separator {
+    margin-top: 0;
+    margin-bottom: 0;
+    border-bottom-style: none;
+    border-left-style: none;
+    border-right-style: none;
+    border-top-style: solid;
+    border-top-width: 1px;
+    border-color: #bbbbbb;
+    opacity: 0.4;
+}
+
+.mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
+    /* Something to indicate that the icon is the set tag */
+}

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

@@ -0,0 +1,20 @@
+/*
+Copyright 2016 Aviral Dasgupta
+
+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_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}

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 {
@@ -52,3 +54,7 @@ limitations under the License.
     float: right;
     margin-right: 10px;
 }
+
+.mx_MatrixToolbar_action {
+    margin-right: 16px;
+}

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-right: 15px;
+    margin-left: 18px;
+    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;
-    left: 64px;
+    z-index: 2000;
+    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/Fira_Mono/OFL.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A.
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

src/skins/vector/fonts/Lato.css

@@ -1,48 +0,0 @@
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Lato Light'), local('Lato-Light'), url(IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Lato Light'), local('Lato-Light'), url(22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'), url(8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Lato Regular'), local('Lato-Regular'), url(MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'), url(rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Lato';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Lato Bold'), local('Lato-Bold'), url(MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}

src/skins/vector/fonts/OpenSans.css

@@ -1,24 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Open Sans';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Open Sans'), local('OpenSans'), url(opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
-}
-/* latin */
-@font-face {
-  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');
-  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 */
-@font-face {
-  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');
-  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-delete.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="15" height="15" viewBox="0, 0, 15, 15">
+  <g id="Extra-icons">
+    <g>
+      <path d="M3.45,3.45 L11.55,11.55" fill-opacity="0" stroke="#FF0064" stroke-width="1" stroke-linecap="round" id="Line"/>
+      <path d="M11.55,3.45 L3.45,11.55" fill-opacity="0" stroke="#FF0064" stroke-width="1" stroke-linecap="round" id="Line-Copy-2"/>
+    </g>
+  </g>
+</svg>

src/skins/vector/img/icon-context-fave-on.svg

@@ -0,0 +1,15 @@
+<?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>DAE17B64-40B5-478A-8E8D-97AD1A6E25C8</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(-93.000000, -313.000000)">
+            <g id="icon_context_fave_on" transform="translate(92.000000, 312.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <polygon id="Star-1" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,15 @@
+<?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>8A6E1837-F0F1-432E-A0DA-6F3741F71EBF</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.2">
+        <g id="Extra-icons-sheet" transform="translate(-63.000000, -313.000000)">
+            <g id="icon_context_fave" transform="translate(62.000000, 312.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <polygon id="Star-1" stroke="#000000" stroke-linejoin="round" points="7.5 10.75 3.67939586 12.7586105 4.40906632 8.50430523 1.31813264 5.49138954 5.58969793 4.87069477 7.5 1 9.41030207 4.87069477 13.6818674 5.49138954 10.5909337 8.50430523 11.3206041 12.7586105"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icon-context-low-on.svg

@@ -0,0 +1,15 @@
+<?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>CD51482C-F2D4-4F63-AF9E-86513F9AF87F</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(-93.000000, -338.000000)">
+            <g id="icon_context_low_on" transform="translate(92.000000, 337.000000)">
+                <rect id="Rectangle-Copy" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#4A4A4A" stroke-linejoin="round" fill="#4A4A4A"></path>
+            </g>
+        </g>
+    </g>
+</svg>

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

@@ -0,0 +1,15 @@
+<?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>B160345F-40D3-4BE6-A860-6D04BF223EF7</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(-63.000000, -338.000000)">
+            <g id="icon_context_low" transform="translate(62.000000, 337.000000)">
+                <rect id="Rectangle" fill-opacity="0" fill="#D8D8D8" x="0" y="0" width="15" height="15"></rect>
+                <path d="M12.7604081,8 C13.2413214,8 13.3067421,8.25679316 12.9190465,8.57356358 L8.20351162,12.4264364 C7.81340686,12.7451752 7.18723719,12.7432068 6.79954156,12.4264364 L2.08400668,8.57356358 C1.69390193,8.25482476 1.76733588,8 2.24264506,8 L4.46666667,8 L4.46666667,3.00292933 C4.46666667,2.44902676 4.84616384,2 5.33587209,2 L9.66412791,2 C10.1441768,2 10.5333333,2.43788135 10.5333333,3.00292933 L10.5333333,8 L12.7604081,8 Z" id="Combined-Shape" stroke="#000000" stroke-linejoin="round" opacity="0.2"></path>
+            </g>
+        </g>
+    </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/icon_context_delete.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 15 15" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;">
+    <g transform="matrix(1,0,0,1,-0,-80)">
+        <g id="icon_context_delete" transform="matrix(0.600982,0,0,0.600982,0,80)">
+            <g transform="matrix(1.66394,0,0,1.66394,0,-133.116)">
+                <path d="M7.508,86.728C8.739,85.523 9.979,84.326 11.196,83.109C11.277,83.034 11.364,82.99 11.472,82.968C11.512,82.964 11.549,82.962 11.589,82.964C11.668,82.973 11.743,82.994 11.811,83.036C11.994,83.148 12.086,83.371 12.036,83.579C12.017,83.657 11.98,83.724 11.93,83.787C10.749,85.064 9.524,86.299 8.285,87.52C9.489,88.752 10.686,89.991 11.904,91.209C11.958,91.267 12.001,91.331 12.026,91.408C12.042,91.458 12.05,91.51 12.05,91.562C12.05,91.82 11.846,92.041 11.589,92.061C11.454,92.071 11.33,92.025 11.225,91.942C9.948,90.762 8.713,89.536 7.492,88.297C6.261,89.501 5.021,90.698 3.804,91.916C3.745,91.97 3.681,92.013 3.605,92.038C3.555,92.054 3.502,92.062 3.45,92.062C3.192,92.062 2.972,91.858 2.952,91.602C2.941,91.466 2.987,91.342 3.07,91.238C4.251,89.96 5.476,88.726 6.715,87.505C5.511,86.273 4.314,85.034 3.096,83.816C3.042,83.757 2.999,83.693 2.974,83.617C2.908,83.413 2.983,83.184 3.156,83.058C3.221,83.01 3.294,82.984 3.372,82.968C3.412,82.964 3.449,82.962 3.489,82.964C3.598,82.977 3.689,83.014 3.775,83.082C5.052,84.263 6.287,85.488 7.508,86.728Z" style="fill:rgb(255,0,100);"/>
+            </g>
+        </g>
+    </g>
+</svg>