0.7.4

Don't show border on composer when not in RTE mode

.gitignore

@@ -1,8 +1,12 @@
-node_modules
-vector/bundle.*
-lib
+/cert.pem
+/karma-reports
+/key.pem
+/lib
+/node_modules
+/packages/
+/vector/bundle.*
+/vector/components.css
+/vector/emojione/
+/vector/config.json
+/vector/olm.js
 .DS_Store
-key.pem
-cert.pem
-vector/components.css
-packages/

CHANGELOG.md

@@ -0,0 +1,273 @@
+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)
+
+ * Matthew/design tweaks
+   [\#1402](https://github.com/vector-im/vector-web/pull/1402)
+ * Improve handling of notification rules we can't parse
+   [\#1399](https://github.com/vector-im/vector-web/pull/1399)
+ * Do less mangling of jenkins builds
+   [\#1391](https://github.com/vector-im/vector-web/pull/1391)
+ * Start Notifications component refactor
+   [\#1386](https://github.com/vector-im/vector-web/pull/1386)
+ * make the UI fadable to help with decluttering
+   [\#1376](https://github.com/vector-im/vector-web/pull/1376)
+ * Get and display a user's pushers in settings
+   [\#1374](https://github.com/vector-im/vector-web/pull/1374)
+ * URL previewing support
+   [\#1343](https://github.com/vector-im/vector-web/pull/1343)
+ * 😄 Emoji autocomplete and unicode emoji to image conversion using emojione.
+   [\#1332](https://github.com/vector-im/vector-web/pull/1332)
+ * Show full-size avatar on MemberInfo avatar click
+   [\#1340](https://github.com/vector-im/vector-web/pull/1340)
+ * Numerous other changes via [matrix-react-sdk 0.5.1](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.1/CHANGELOG.md)
+
+Changes in [0.5.0](https://github.com/vector-im/vector-web/releases/tag/v0.5.0) (2016-03-30)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.4.1...v0.5.0)
+
+ * Prettier, animated placeholder :D
+   [\#1292](https://github.com/vector-im/vector-web/pull/1292)
+   (Disabled for now due to high CPU usage)
+ * RoomDirectory: use SimpleRoomHeader instead of RoomHeader
+   [\#1307](https://github.com/vector-im/vector-web/pull/1307)
+ * Tell webpack not to parse the highlight.js languages
+   [\#1277](https://github.com/vector-im/vector-web/pull/1277)
+ * CSS for https://github.com/matrix-org/matrix-react-sdk/pull/247
+   [\#1249](https://github.com/vector-im/vector-web/pull/1249)
+ * URI-decode the hash-fragment
+   [\#1254](https://github.com/vector-im/vector-web/pull/1254)
+
+Changes in [0.4.1](https://github.com/vector-im/vector-web/releases/tag/v0.4.1) (2016-03-23)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.4.0...v0.4.1)
+ * Update to matrix-react-sdk 0.3.1; see
+   https://github.com/matrix-org/matrix-react-sdk/blob/v0.3.1/CHANGELOG.md
+   (Disables debug logging)
+
+Changes in [0.4.0](https://github.com/vector-im/vector-web/releases/tag/v0.4.0) (2016-03-23)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.3.0...v0.4.0)
+
+ * Update to matrix-react-sdk 0.3.0; see
+   https://github.com/matrix-org/matrix-react-sdk/blob/master/CHANGELOG.md
+
+Other changes
+ * permalink button
+   [\#1232](https://github.com/vector-im/vector-web/pull/1232)
+ * make senderprofiles clickable
+   [\#1191](https://github.com/vector-im/vector-web/pull/1191)
+ * fix notif spam when logging in from a guest session by correctly logging out
+   first.
+   [\#1180](https://github.com/vector-im/vector-web/pull/1180)
+ * use new start_login_from_guest dispatch for cancellable logins from guest
+   accounts
+   [\#1165](https://github.com/vector-im/vector-web/pull/1165)
+ * Use then() chaining rather than manual callbacks
+   [\#1171](https://github.com/vector-im/vector-web/pull/1171)
+ * Remove trailing whitespace
+   [\#1163](https://github.com/vector-im/vector-web/pull/1163)
+ * Update the actions of default rules instead of overriding.
+   [\#1037](https://github.com/vector-im/vector-web/pull/1037)
+ * Update README to include `npm install` in react-sdk
+   [\#1137](https://github.com/vector-im/vector-web/pull/1137)
+
+Changes in vector v0.3.0 (2016-03-11)
+======================================
+ * Lots of new bug fixes and updates
+
+Changes in vector v0.2.0 (2016-02-24)
+======================================
+ * Refactor of matrix-react-sdk and vector to remove separation between views and
+   controllers
+ * Temporarily break the layering abstraction between vector and matrix-react-sdk
+   for expedience in developing vector.
+ * Vast numbers of new features, including read receipts, read-up-to markers,
+   updated look and feel, search, new room and user settings, and email invites.
+
+Changes in vector v0.1.2 (2015-10-28)
+======================================
+ * Support Room Avatars
+ * Fullscreen video calls
+ * Mute mic in VoIP calls
+ * Fix bug with multiple desktop notifications
+ * Context menu on messages
+ * Better hover-over on member list
+ * Support CAS auth
+ * Many other bug fixes
+
+Changes in vector v0.1.1 (2015-08-10)
+======================================
+
+ * Support logging in with an email address
+ * Use the Vector identity server
+ * Fix a bug where the client was not stopped properly on logout
+ * Fix bugs where field values would be forgotten if login or registration failed
+ * Improve URL bar navigation
+ * Add explanatory help text on advanced server options
+ * Fix a bug which caused execptions on malformed VoIP invitations
+ * Remove superfluous scrollbars on Firefox
+ * Numerous CSS fixes
+ * Improved accessibility
+ * Support command-click / middle click to open image in a new tab
+ * Improved room directory
+ * Fix display of text with many combining unicode points
+
+Changes in vector v0.1.0 (2015-08-10)
+======================================
+Initial release

CHANGES.rst

@@ -1,44 +0,0 @@
-Changes in vector v0.3.0 (2016-03-11)
-======================================
- * Lots of new bug fixes and updates
-
-Changes in vector v0.2.0 (2016-02-24)
-======================================
- * Refactor of matrix-react-sdk and vector to remove separation between views and
-   controllers
- * Temporarily break the layering abstraction between vector and matrix-react-sdk
-   for expedience in developing vector.
- * Vast numbers of new features, including read receipts, read-up-to markers,
-   updated look and feel, search, new room and user settings, and email invites.
-
-Changes in vector v0.1.2 (2015-10-28)
-======================================
- * Support Room Avatars
- * Fullscreen video calls
- * Mute mic in VoIP calls
- * Fix bug with multiple desktop notifications
- * Context menu on messages
- * Better hover-over on member list
- * Support CAS auth
- * Many other bug fixes
- 
-Changes in vector v0.1.1 (2015-08-10)
-======================================
-
- * Support logging in with an email address
- * Use the Vector identity server
- * Fix a bug where the client was not stopped properly on logout
- * Fix bugs where field values would be forgotten if login or registration failed
- * Improve URL bar navigation
- * Add explanatory help text on advanced server options
- * Fix a bug which caused execptions on malformed VoIP invitations
- * Remove superfluous scrollbars on Firefox
- * Numerous CSS fixes
- * Improved accessibility
- * Support command-click / middle click to open image in a new tab
- * Improved room directory
- * Fix display of text with many combining unicode points
-
-Changes in vector v0.1.0 (2015-08-10)
-======================================
-Initial release

README.md

@@ -3,61 +3,122 @@ 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!
+
+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. 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. 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. 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)
+
+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, all serious development on Vector happens on the `develop` branch.  This typically
-depends on the `develop` snapshot versions of `matrix-react-sdk` and `matrix-js-sdk`
-too, which can't be installed automatically due to https://github.com/npm/npm/issues/3055.
-To get the right dependencies, check out the `develop` branches of these libraries and
-then use `ln -s` to tell Vector about them:
+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`:
 
@@ -100,17 +161,49 @@ 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`.
 
+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
 ===================
 
@@ -119,10 +212,7 @@ day-to-day use; it is experimental and should be considered only as a
 proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
 of the current progress.
 
-To build a version of vector with support for end-to-end encryption, install
-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.
+Vector is built with support for end-to-end encryption by default.
 
 To enable encryption for a room, type
 
@@ -138,4 +228,4 @@ Note that historical encrypted messages cannot currently be decoded - history
 is therefore lost when the page is reloaded.
 
 There is currently no visual indication of whether encryption is enabled for a
-room, or whether a particular message was encrypted.
+room.

config.json

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

jenkins.sh

@@ -8,20 +8,26 @@ nvm use 4
 
 set -x
 
-# install the versions of js-sdk and react-sdk provided to us by jenkins
-npm install ./node_modules/matrix-js-sdk-*.tgz
-npm install ./node_modules/matrix-react-sdk-*.tgz
-
-# install the other dependencies
 npm install
 
+# 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)
+
+# run the mocha tests
+npm run test
+
 # build our artifacts; dumps them in ./vector
-npm run build
+npm run build:dev
 
 # gzip up ./vector
 rm vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
 
-REACT_SHA=$(head -c 12 node_modules/matrix-react-sdk/git-revision.txt)
-JSSDK_SHA=$(head -c 12 node_modules/matrix-js-sdk/git-revision.txt)
+ # node_modules deps from 'npm install' don't have a .git dir so can't
+ # rev-parse; but they do set the commit in package.json under 'gitHead' which
+ # we're grabbing here.
+REACT_SHA=$(grep 'gitHead' node_modules/matrix-react-sdk/package.json | cut -d \" -f 4 | head -c 12)
+JSSDK_SHA=$(grep 'gitHead' node_modules/matrix-js-sdk/package.json | cut -d \" -f 4 | head -c 12)
+
 VECTOR_SHA=$(git rev-parse --short=12 HEAD) # use the ACTUAL SHA rather than assume develop
+
 tar -zcvhf vector-$VECTOR_SHA-react-$REACT_SHA-js-$JSSDK_SHA.tar.gz vector #g[z]ip, [c]reate archive, [v]erbose, [f]ilename, [h]ard-dereference (do not archive symlinks)

karma.conf.js

@@ -0,0 +1,142 @@
+// karma.conf.js - the config file for karma, which runs our tests.
+
+var path = require('path');
+var webpack = require('webpack');
+
+/*
+ * We use webpack to build our tests. It's a pain to have to wait for webpack
+ * to build everything; however it's the easiest way to load our dependencies
+ * from node_modules.
+ *
+ * If you run karma in multi-run mode (with `npm run test:multi`), it will watch
+ * the tests for changes, and webpack will rebuild using a cache. This is much quicker
+ * than a clean rebuild.
+ */
+
+// the name of the test file. By default, a special file which runs all tests.
+var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
+
+process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
+process.env.Q_DEBUG = 1;
+
+module.exports = function (config) {
+    config.set({
+        // frameworks to use
+        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+        frameworks: ['mocha'],
+
+        // 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},
+        ],
+
+        // redirect img links to the karma server
+        proxies: {
+            "/img/": "/base/vector/img/",
+        },
+
+        // preprocess matching files before serving them to the browser
+        // available preprocessors:
+        // https://npmjs.org/browse/keyword/karma-preprocessor
+        preprocessors: {
+            'test/**/*.js': ['webpack', 'sourcemap']
+        },
+
+        // test results reporter to use
+        // possible values: 'dots', 'progress'
+        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+        reporters: ['progress', 'junit'],
+
+        // web server port
+        port: 9876,
+
+        // enable / disable colors in the output (reporters and logs)
+        colors: true,
+
+        // level of logging
+        // possible values: config.LOG_DISABLE || config.LOG_ERROR ||
+        // config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+        logLevel: config.LOG_INFO,
+
+        // enable / disable watching file and executing tests whenever any file
+        // changes
+        autoWatch: true,
+
+        // start these browsers
+        // available browser launchers:
+        // https://npmjs.org/browse/keyword/karma-launcher
+        browsers: [
+            'Chrome',
+            //'PhantomJS',
+        ],
+
+        // Continuous Integration mode
+        // if true, Karma captures browsers, runs the tests and exits
+        // singleRun: false,
+
+        // Concurrency level
+        // how many browser should be started simultaneous
+        concurrency: Infinity,
+
+        junitReporter: {
+            outputDir: 'karma-reports',
+        },
+
+        webpack: {
+            module: {
+                loaders: [
+                    { test: /\.json$/, loader: "json" },
+                    {
+                        test: /\.js$/, loader: "babel",
+                        include: [path.resolve('./src'),
+                                  path.resolve('./test'),
+                                 ],
+                        query: {
+                            // we're using babel 5, for consistency with
+                            // the release build, which doesn't use the
+                            // presets.
+                            // presets: ['react', 'es2015'],
+                        },
+                    },
+                ],
+                noParse: [
+                    // don't parse the languages within highlight.js. They
+                    // cause stack overflows
+                    // (https://github.com/webpack/webpack/issues/1721), and
+                    // there is no need for webpack to parse them - they can
+                    // just be included as-is.
+                    /highlight\.js\/lib\/languages/,
+
+                    // also disable parsing for sinon, because it
+                    // tries to do voodoo with 'require' which upsets
+                    // webpack (https://github.com/webpack/webpack/issues/304)
+                    /sinon\/pkg\/sinon\.js$/,
+                ],
+            },
+            resolve: {
+                alias: {
+                    // alias any requires to the react module to the one in our path, otherwise
+                    // we tend to get the react source included twice when using npm link.
+                    react: path.resolve('./node_modules/react'),
+
+                    // same goes for js-sdk
+                    "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
+
+                    sinon: 'sinon/pkg/sinon.js',
+                },
+                root: [
+                    path.resolve('./src'),
+                    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.3.0",
+  "version": "0.7.4",
   "description": "Vector webapp",
   "author": "matrix.org",
   "repository": {
@@ -12,40 +12,49 @@
   "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": "npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
+    "build:staticfiles": "scripts/staticfiles.js",
+    "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",
     "//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*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "start": "parallelshell \"npm run build:staticfiles\" \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start:prod": "parallelshell \"npm run build: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": "^1.3.0",
+    "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.4.1",
-    "matrix-react-sdk": "^0.2.0",
+    "matrix-js-sdk": "0.5.5",
+    "matrix-react-sdk": "0.6.4",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
-    "react": "^0.14.2",
-    "react-dnd": "^2.0.2",
-    "react-dnd-html5-backend": "^2.0.0",
-    "react-dom": "^0.14.2",
-    "react-gemini-scrollbar": "^2.0.1",
+    "react": "^15.2.1",
+    "react-dnd": "^2.1.4",
+    "react-dnd-html5-backend": "^2.1.2",
+    "react-dom": "^15.2.1",
+    "react-gemini-scrollbar": "matrix-org/react-gemini-scrollbar#5e97aef",
     "sanitize-html": "^1.11.1"
   },
   "devDependencies": {
@@ -53,12 +62,31 @@
     "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",
+    "karma-chrome-launcher": "^0.2.3",
+    "karma-cli": "^0.1.2",
+    "karma-junit-reporter": "^0.4.1",
+    "karma-mocha": "^0.2.2",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-sourcemap-loader": "^0.3.7",
+    "karma-webpack": "^1.7.0",
+    "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.13"
+    "webpack": "^1.12.14"
+  },
+  "optionalDependencies": {
+    "olm": "https://matrix.org/packages/npm/olm/olm-1.0.0.tgz"
   }
 }

release.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+#
+# Script to perform a release of vector-web.
+#
+# Requires github-changelog-generator; to install, do 
+#   pip install git+https://github.com/matrix-org/github-changelog-generator.git
+
+set -e
+
+cd `dirname $0`
+
+exec ./node_modules/matrix-js-sdk/release.sh -z "$@"

scripts/issues-burndown.pl

@@ -0,0 +1,124 @@
+#!/usr/bin/env perl
+
+use warnings;
+use strict;
+
+use Net::GitHub;
+use DateTime;
+use DateTime::Format::ISO8601;
+
+my $gh = Net::GitHub->new(
+    login => 'ara4n', pass => 'secret'
+);
+
+$gh->set_default_user_repo('vector-im', 'vector-web'); 
+
+my @issues = $gh->issue->repos_issues({ state => 'all', milestone => 3 });
+while ($gh->issue->has_next_page) {
+    push @issues, $gh->issue->next_page;
+}
+
+# we want:
+# day by day:
+# split by { open, closed }
+# split by { bug, feature, neither }
+# each split by { p1, p2, p3, p4, p5, unprioritised }  <- priority
+# each split by { minor, major, critical, cosmetic, network, no-severity }  <- severity
+# then split (with overlap between the groups) as { total, tag1, tag2, ... }?
+
+# ...and then all over again split by milestone.
+
+my $days = {};
+my $schema = {};
+my $now = DateTime->now();
+
+foreach my $issue (@issues) {
+    next if ($issue->{pull_request});
+    
+    # use Data::Dumper;
+    # print STDERR Dumper($issue);
+
+    my @label_list = map { $_->{name} } @{$issue->{labels}};
+    my $labels = {};
+    $labels->{$_} = 1 foreach (@label_list);
+    $labels->{bug}++ if ($labels->{cosmetic} && !$labels->{bug} && !$labels->{feature});
+
+    my $extract_labels = sub {
+        my $label = undef;
+        foreach (@_) {
+            $label ||= $_ if (delete $labels->{$_});
+        }
+        return $label;
+    };
+
+    my $state = $issue->{state};
+    my $type = &$extract_labels(qw(bug feature)) || "neither";
+    my $priority = &$extract_labels(qw(p1 p2 p3 p4 p5)) || "unprioritised";
+    my $severity = &$extract_labels(qw(minor major critical cosmetic network)) || "no-severity";
+
+    my $start = DateTime::Format::ISO8601->parse_datetime($issue->{created_at});
+
+    do {
+        my $ymd = $start->ymd();
+
+        $days->{ $ymd }->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
+        $schema->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
+        foreach (keys %$labels) {
+            $days->{ $ymd }->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+            $schema->{ 'created' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+        }
+
+        $start = $start->add(days => 1);
+    } while (DateTime->compare($start, $now) < 0);
+
+    if ($state eq 'closed') {
+        my $end = DateTime::Format::ISO8601->parse_datetime($issue->{closed_at});
+        do {
+            my $ymd = $end->ymd();
+
+            $days->{ $ymd }->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
+            $schema->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ total }++;
+            foreach (keys %$labels) {
+                $days->{ $ymd }->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+                $schema->{ 'resolved' }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+            }
+
+            $end = $end->add(days => 1);
+        } while (DateTime->compare($end, $now) < 0);
+    }
+}
+
+print "day,";
+foreach my $state (sort keys %{$schema}) {
+    foreach my $type (grep { /^(bug|feature)$/ } sort keys %{$schema->{$state}}) {
+        foreach my $priority (grep { /^(p1|p2)$/ } sort keys %{$schema->{$state}->{$type}}) {
+            foreach my $severity (sort keys %{$schema->{$state}->{$type}->{$priority}}) {
+                # foreach my $tag (sort keys %{$schema->{$state}->{$type}->{$priority}->{$severity}}) {
+                #     print "\"$type\n$priority\n$severity\n$tag\",";
+                # }
+                print "\"$state\n$type\n$priority\n$severity\",";
+            }
+        }
+    }
+}
+print "\n";
+
+foreach my $day (sort keys %$days) {
+    print "$day,";
+    foreach my $state (sort keys %{$schema}) {
+        foreach my $type (grep { /^(bug|feature)$/ } sort keys %{$schema->{$state}}) {
+            foreach my $priority (grep { /^(p1|p2)$/ } sort keys %{$schema->{$state}->{$type}}) {
+                foreach my $severity (sort keys %{$schema->{$state}->{$type}->{$priority}}) {
+                    # foreach my $tag (sort keys %{$schema->{$state}->{$type}->{$priority}->{$severity}}) {
+                    #     print $days->{$day}->{$state}->{$type}->{$priority}->{$severity}->{$tag} || 0;
+                    #     print ",";
+                    # }
+                    print $days->{$day}->{$state}->{$type}->{$priority}->{$severity}->{total} || 0;
+                    print ",";
+                }
+            }
+        }
+    }
+    print "\n";
+}
+

scripts/issues-no-state.pl

@@ -0,0 +1,104 @@
+#!/usr/bin/env perl
+
+use warnings;
+use strict;
+
+use Net::GitHub;
+use DateTime;
+use DateTime::Format::ISO8601;
+
+my $gh = Net::GitHub->new(
+    login => 'ara4n', pass => 'secret'
+);
+
+$gh->set_default_user_repo('vector-im', 'vector-web'); 
+
+my @issues = $gh->issue->repos_issues({ state => 'all', milestone => 3 });
+while ($gh->issue->has_next_page) {
+    push @issues, $gh->issue->next_page;
+}
+
+# we want:
+# day by day:
+# split by { open, closed }
+# split by { bug, feature, neither }
+# each split by { p1, p2, p3, p4, p5, unprioritised }  <- priority
+# each split by { minor, major, critical, cosmetic, network, no-severity }  <- severity
+# then split (with overlap between the groups) as { total, tag1, tag2, ... }?
+
+# ...and then all over again split by milestone.
+
+my $days = {};
+my $schema = {};
+my $now = DateTime->now();
+
+foreach my $issue (@issues) {
+    next if ($issue->{pull_request});
+    
+    use Data::Dumper;
+    print STDERR Dumper($issue);
+
+    my @label_list = map { $_->{name} } @{$issue->{labels}};
+    my $labels = {};
+    $labels->{$_} = 1 foreach (@label_list);
+    $labels->{bug}++ if ($labels->{cosmetic} && !$labels->{bug} && !$labels->{feature});
+
+    my $extract_labels = sub {
+        my $label = undef;
+        foreach (@_) {
+            $label ||= $_ if (delete $labels->{$_});
+        }
+        return $label;
+    };
+
+    my $type = &$extract_labels(qw(bug feature)) || "neither";
+    my $priority = &$extract_labels(qw(p1 p2 p3 p4 p5)) || "unprioritised";
+    my $severity = &$extract_labels(qw(minor major critical cosmetic network)) || "no-severity";
+
+    my $start = DateTime::Format::ISO8601->parse_datetime($issue->{created_at});
+    my $end = $issue->{closed_at} ? DateTime::Format::ISO8601->parse_datetime($issue->{closed_at}) : $now;
+
+    do {
+        my $ymd = $start->ymd();
+
+        $days->{ $ymd }->{ $type }->{ $priority }->{ $severity }->{ total }++;
+        $schema->{ $type }->{ $priority }->{ $severity }->{ total }++;
+        foreach (keys %$labels) {
+            $days->{ $ymd }->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+            $schema->{ $type }->{ $priority }->{ $severity }->{ $_ }++;
+        }
+
+        $start = $start->add(days => 1);
+    } while (DateTime->compare($start, $end) < 0);
+}
+
+print "day,";
+foreach my $type (sort keys %{$schema}) {
+    foreach my $priority (sort keys %{$schema->{$type}}) {
+        foreach my $severity (sort keys %{$schema->{$type}->{$priority}}) {
+            # foreach my $tag (sort keys %{$schema->{$type}->{$priority}->{$severity}}) {
+            #     print "\"$type\n$priority\n$severity\n$tag\",";
+            # }
+            print "\"$type\n$priority\n$severity\",";
+        }
+    }
+}
+print "\n";
+
+foreach my $day (sort keys %$days) {
+    print "$day,";
+    foreach my $type (sort keys %{$schema}) {
+        foreach my $priority (sort keys %{$schema->{$type}}) {
+            foreach my $severity (sort keys %{$schema->{$type}->{$priority}}) {
+                # foreach my $tag (sort keys %{$schema->{$type}->{$priority}->{$severity}}) {
+                #     print $days->{$day}->{$type}->{$priority}->{$severity}->{$tag} || 0;
+                #     print ",";
+                # }
+                print $days->{$day}->{$type}->{$priority}->{$severity}->{total} || 0;
+                print ",";
+            }
+        }
+    }
+    print "\n";
+}
+

scripts/staticfiles.js

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

src/VectorConferenceHandler.js

@@ -44,6 +44,7 @@ ConferenceCall.prototype.setup = function() {
         // looking for a 1:1 room with this conf user ID!)
         var call = Matrix.createNewMatrixCall(self.client, room.roomId);
         call.confUserId = self.confUserId;
+        call.groupRoomId = self.groupRoomId;
         return call;
     });
 };

src/component-index.js

@@ -19,6 +19,9 @@ limitations under the License.
  * You can edit it you like, but your changes will be overwritten,
  * so you'd just be trying to swim upstream like a salmon.
  * You are not a salmon.
+ *
+ * To update it, run:
+ *    ./reskindex.js -h header
  */
 
 module.exports.components = require('matrix-react-sdk/lib/component-index').components;
@@ -29,7 +32,11 @@ module.exports.components['structures.LeftPanel'] = require('./components/struct
 module.exports.components['structures.RightPanel'] = require('./components/structures/RightPanel');
 module.exports.components['structures.RoomDirectory'] = require('./components/structures/RoomDirectory');
 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.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');
@@ -40,11 +47,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

@@ -47,12 +47,19 @@ module.exports = React.createClass({
 
     render: function() {
         var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/create-big.svg" label="Start chat" onClick={ this.onCreateRoomClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/directory-big.svg" label="Directory" onClick={ this.onRoomDirectoryClick }/>
-                    <BottomLeftMenuTile collapsed={ this.props.collapsed } img="img/settings-big.svg" label="Settings" onClick={ this.onSettingsClick }/>
+                    <div className="mx_BottomLeftMenu_createRoom" title="Start chat" onClick={ this.onCreateRoomClick }>
+                        <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="25" height="25"/>
+                    </div>
+                    <div className="mx_BottomLeftMenu_settings" title="Settings" onClick={ this.onSettingsClick }>
+                        <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/LeftPanel.js

@@ -31,6 +31,7 @@ var LeftPanel = React.createClass({
     getInitialState: function() {
         return {
             showCallElement: null,
+            searchFilter: '',
         };
     },
 
@@ -40,7 +41,7 @@ var LeftPanel = React.createClass({
 
     componentWillReceiveProps: function(newProps) {
         this._recheckCallElement(newProps.selectedRoom);
-    },    
+    },
 
     componentWillUnmount: function() {
         dis.unregister(this.dispatcherRef);
@@ -79,23 +80,28 @@ var LeftPanel = React.createClass({
         if (call) {
             dis.dispatch({
                 action: 'view_room',
-                room_id: call.roomId,
+                room_id: call.groupRoomId || call.roomId,
             });
         }
     },
 
+    onSearch: function(term) {
+        this.setState({ searchFilter: term });
+    },
+
     render: function() {
         var RoomList = sdk.getComponent('rooms.RoomList');
         var BottomLeftMenu = sdk.getComponent('structures.BottomLeftMenu');
+        var SearchBox = sdk.getComponent('structures.SearchBox');
 
         var collapseButton;
-        var classes = "mx_LeftPanel";
+        var classes = "mx_LeftPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
         else {
             // Hide the collapse button until we work out how to display it in the new skin
-            // collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>   
+            // collapseButton = <img className="mx_LeftPanel_hideButton" onClick={ this.onHideClick } src="img/hide.png" width="12" height="20" alt="<"/>
         }
 
         var callPreview;
@@ -109,12 +115,14 @@ var LeftPanel = React.createClass({
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
+                <SearchBox collapsed={ this.props.collapsed } onSearch={ this.onSearch } />
                 { collapseButton }
                 { callPreview }
                 <RoomList
                     selectedRoom={this.props.selectedRoom}
                     collapsed={this.props.collapsed}
+                    searchFilter={this.state.searchFilter}
                     ConferenceHandler={VectorConferenceHandler} />
                 <BottomLeftMenu collapsed={this.props.collapsed}/>
             </aside>

src/components/structures/RightPanel.js

@@ -38,7 +38,7 @@ module.exports = React.createClass({
     },
 
     componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);        
+        dis.unregister(this.dispatcherRef);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
         }
@@ -82,6 +82,9 @@ module.exports = React.createClass({
 
     onAction: function(payload) {
         if (payload.action === "view_user") {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
             if (payload.member) {
                 this.setState({
                     phase: this.Phase.MemberInfo,
@@ -133,8 +136,8 @@ module.exports = React.createClass({
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
                         <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <TintableSvg src="img/members.svg" width="17" height="22"/>
                             { membersBadge }
+                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
@@ -152,20 +155,25 @@ module.exports = React.createClass({
                     panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
                 }
             }
-
         }
 
-        var classes = "mx_RightPanel";
+        if (!panel) {
+            panel = <div className="mx_RightPanel_blank"></div>;
+        }
+
+        var classes = "mx_RightPanel mx_fadable";
         if (this.props.collapsed) {
             classes += " collapsed";
         }
 
         return (
-            <aside className={classes}>
+            <aside className={classes} style={{ opacity: this.props.opacity }}>
                 <div className="mx_RightPanel_header">
                     { buttonGroup }
                 </div>
                 { panel }
+                <div className="mx_RightPanel_footer">
+                </div>
             </aside>
         );
     }

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');
 
@@ -43,11 +43,31 @@ module.exports = React.createClass({
         }
     },
 
+    componentWillMount: function() {
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 0.3,
+        //     middleOpacity: 0.3,
+        // });
+    },
+
     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) {
-                self.setState({ loading: false });                
+                self.setState({ loading: false });
                 console.error("Failed to get publicRooms: %s", JSON.stringify(err));
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
@@ -60,38 +80,111 @@ module.exports = React.createClass({
                     publicRooms: data.chunk,
                     loading: false,
                 });
-                self.forceUpdate();
             }
         });
     },
 
-    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;
-            }
+    /**
+     * 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?`;
         }
-        var oob_data = {};
+
+        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()
+                    });
+                });
+            }
+        });
+    },
+
+    onRoomClicked: function(room, ev) {
+        if (ev.shiftKey) {
+            ev.preventDefault();
+            this.removeFromDirectory(room);
+        } else {
+            this.showRoom(room);
+        }
+    },
+
+    showRoomAlias: function(alias) {
+        this.showRoom(null, alias);
+    },
+
+    showRoom: function(room, room_alias) {
+        var payload = {action: 'view_room'};
         if (room) {
-            oob_data = {
+            // 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");
+                    Modal.createDialog(NeedToRegisterDialog, {
+                        title: "Failed to join the room",
+                        description: "This room is inaccessible to guests. You may be able to join if you register."
+                    });
+                    return;
+                }
+            }
+
+            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.aliases[0],
+                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) {
@@ -102,7 +195,9 @@ 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.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0 && a.num_joined_members > 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;
         });
@@ -110,7 +205,7 @@ module.exports = React.createClass({
         var self = this;
         var guestRead, guestJoin, perms;
         for (var i = 0; i < rooms.length; i++) {
-            var name = rooms[i].name || rooms[i].aliases[0];
+            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
             guestRead = null;
             guestJoin = null;
 
@@ -124,7 +219,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomDirectory_perm">Guests can join</div>
                 );
             }
-            
+
             perms = null;
             if (guestRead || guestJoin) {
                 perms = <div className="mx_RoomDirectory_perms">{guestRead} {guestJoin}</div>;
@@ -134,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 }
@@ -148,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">{ rooms[i].aliases[0] }</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 }
@@ -163,13 +262,13 @@ 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);
         }
     },
 
     render: function() {
         if (this.state.loading) {
-            var Loader = sdk.getComponent("elements.Spinner");            
+            var Loader = sdk.getComponent("elements.Spinner");
             return (
                 <div className="mx_RoomDirectory">
                     <Loader />
@@ -177,10 +276,10 @@ module.exports = React.createClass({
             );
         }
 
-        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        var SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         return (
             <div className="mx_RoomDirectory">
-                <RoomHeader simpleHeader="Directory" />
+                <SimpleRoomHeader title="Directory" />
                 <div className="mx_RoomDirectory_list">
                     <input ref="roomAlias" placeholder="Join a room (e.g. #foo:domain.com)" className="mx_RoomDirectory_input" size="64" onKeyUp={ this.onKeyUp }/>
                     <GeminiScrollbar className="mx_RoomDirectory_tableWrapper">
@@ -196,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,20 +61,20 @@ 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
-
-        // TODO: Fix the name of this. This is too easily confused with the
-        // "hidden" state which is the expanded (or not) view of the list of rooms.
-        // What this prop *really* does is control whether the room name is displayed
-        // so it should be named as such.
-        collapsed: React.PropTypes.bool.isRequired,
+        collapsed: React.PropTypes.bool.isRequired, // is LeftPanel collapsed?
         onHeaderClick: React.PropTypes.func,
         alwaysShowHeader: React.PropTypes.bool,
         incomingCall: React.PropTypes.object,
-        onShowMoreRooms: React.PropTypes.func
+        onShowMoreRooms: React.PropTypes.func,
+        searchFilter: React.PropTypes.string,
     },
 
     getInitialState: function() {
@@ -93,13 +93,20 @@ var RoomSubList = React.createClass({
     },
 
     componentWillMount: function() {
-        this.sortList(this.props.list, this.props.order);
+        this.sortList(this.applySearchFilter(this.props.list, this.props.searchFilter), this.props.order);
     },
 
     componentWillReceiveProps: function(newProps) {
         // order the room list appropriately before we re-render
         //if (debug) console.log("received new props, list = " + newProps.list);
-        this.sortList(newProps.list, newProps.order);
+        this.sortList(this.applySearchFilter(newProps.list, newProps.searchFilter), newProps.order);
+    },
+
+    applySearchFilter: function(list, filter) {
+        if (filter === "") return list;
+        return list.filter((room) => {
+            return room.name && room.name.toLowerCase().indexOf(filter.toLowerCase()) >= 0
+        });
     },
 
     onClick: function(ev) {
@@ -142,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) {
@@ -157,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) });
     },
@@ -187,15 +212,15 @@ var RoomSubList = React.createClass({
         var rooms = this.state.sortedList;
         if (found.room) {
             rooms.splice(found.index, 1);
-        }        
+        }
         else {
             console.warn("Can't remove room " + room.roomId + " - can't find it");
         }
         this.setState({ sortedList: rooms });
     },
 
-    findRoomTile: function(room) {        
-        var index = this.state.sortedList.indexOf(room); 
+    findRoomTile: function(room) {
+        var index = this.state.sortedList.indexOf(room);
         if (index >= 0) {
             // console.log("found: room: " + room.roomId + " with index " + index);
         }
@@ -210,7 +235,7 @@ var RoomSubList = React.createClass({
     },
 
     calcManualOrderTagData: function(room) {
-        var index = this.state.sortedList.indexOf(room); 
+        var index = this.state.sortedList.indexOf(room);
 
         // we sort rooms by the lexicographic ordering of the 'order' metadata on their tags.
         // for convenience, we calculate this for now a floating point number between 0.0 and 1.0.
@@ -274,11 +299,11 @@ var RoomSubList = React.createClass({
     },
 
     _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");        
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         return (
             <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
                 { this.props.collapsed ? '' : this.props.label }
-                <TintableSvg className="mx_RoomSubList_chevron"
+                <img className="mx_RoomSubList_chevron"
                     src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
                     width="10" height="10" />
             </h2>
@@ -305,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].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');
@@ -332,7 +397,7 @@ var RoomSubList = React.createClass({
             }
             else {
                 subList = <TruncatedList className={ classes }>
-                          </TruncatedList>;                
+                          </TruncatedList>;
             }
 
             return connectDropTarget(
@@ -356,7 +421,7 @@ var RoomSubList = React.createClass({
 
 // Export the wrapped version, inlining the 'collect' functions
 // to more closely resemble the ES7
-module.exports = 
+module.exports =
 DropTarget('RoomTile', roomListTarget, function(connect) {
     return {
         connectDropTarget: connect.dropTarget(),

src/components/structures/SearchBox.js

@@ -0,0 +1,119 @@
+/*
+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 dis = require('matrix-react-sdk/lib/dispatcher');
+var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
+
+module.exports = React.createClass({
+    displayName: 'SearchBox',
+
+    propTypes: {
+        collapsed: React.PropTypes.bool,
+        onSearch: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        return {
+            searchTerm: "",
+        };
+    },
+
+    onChange: function() {
+        if (!this.refs.search) return;
+        this.setState({ searchTerm: this.refs.search.value });
+        this.onSearch();
+    },
+
+    onSearch: new rate_limited_func(
+        function() {
+            this.props.onSearch(this.refs.search.value);
+        },
+        100
+    ),
+
+    onToggleCollapse: function(show) {
+        if (show) {
+            dis.dispatch({
+                action: 'show_left_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_left_panel',
+            });
+        }
+    },
+
+    render: function() {
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
+
+        var toggleCollapse;
+        if (this.props.collapsed) {
+            toggleCollapse =
+                <div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
+                </div>
+        }
+        else {
+            toggleCollapse =
+                <div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
+                </div>
+        }
+
+        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/icons-search-copy.svg" width="13" height="13"
+                    />,
+                    <input
+                        key="searchfield"
+                        type="text"
+                        ref="search"
+                        className="mx_SearchBox_search"
+                        value={ this.state.searchTerm }
+                        onChange={ this.onChange }
+                        placeholder="Filter room names"
+                    />
+                ];
+        }
+
+        var self = this;
+        return (
+            <div className="mx_SearchBox">
+                { searchControls }
+                { toggleCollapse }
+            </div>
+        );
+    }
+});

src/components/structures/ViewSource.js

@@ -40,7 +40,7 @@ module.exports = React.createClass({
             this.props.onFinished();
         }
     },
-    
+
     render: function() {
         return (
             <div className="mx_ViewSource">

src/components/views/context_menus/MessageContextMenu.js

@@ -27,6 +27,17 @@ var Resend = require("matrix-react-sdk/lib/Resend");
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
 
+    propTypes: {
+        /* the MatrixEvent associated with the context menu */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* an optional EventTileOps implementation that can be used to unhide preview widgets */
+        eventTileOps: React.PropTypes.object,
+
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
     onResendClick: function() {
         Resend.resend(this.props.mxEvent);
         if (this.props.onFinished) this.props.onFinished();
@@ -36,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();
     },
 
@@ -62,16 +73,29 @@ module.exports = React.createClass({
         if (this.props.onFinished) this.props.onFinished();
     },
 
+    onPermalinkClick: function() {
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
+    onUnhidePreviewClick: function() {
+        if (this.props.eventTileOps) {
+            this.props.eventTileOps.unhideWidget();
+        }
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
     render: function() {
         var eventStatus = this.props.mxEvent.status;
         var resendButton;
         var viewSourceButton;
         var redactButton;
         var cancelButton;
+        var permalinkButton;
+        var unhidePreviewButton;
 
         if (eventStatus === 'not_sent') {
             resendButton = (
-                <div className="mx_ContextualMenu_field" onClick={this.onResendClick}>
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
                     Resend
                 </div>
             );
@@ -79,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>
             );
@@ -87,24 +111,45 @@ 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>
         );
 
+        if (this.props.eventTileOps) {
+            if (this.props.eventTileOps.isWidgetHidden()) {
+                unhidePreviewButton = (
+                    <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_MessageContextMenu_field">
+                <a href={ "#/room/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
+                   onClick={ this.onPermalinkClick }>Permalink</a>
+            </div>
+        );
+
         return (
             <div>
                 {resendButton}
                 {redactButton}
                 {cancelButton}
                 {viewSourceButton}
+                {unhidePreviewButton}
+                {permalinkButton}
             </div>
         );
     }

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -0,0 +1,153 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var q = require("q");
+var React = require('react');
+var classNames = require('classnames');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = React.createClass({
+    displayName: 'NotificationStateContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        var areNotifsMuted = false;
+        var cli = MatrixClientPeg.get();
+        if (!cli.isGuest()) {
+            var roomPushRule = cli.getRoomPushRule("global", this.props.room.roomId);
+            if (roomPushRule) {
+                if (0 <= roomPushRule.actions.indexOf("dont_notify")) {
+                    areNotifsMuted = true;
+                }
+            }
+        }
+
+        return {
+            areNotifsMuted: areNotifsMuted,
+        };
+    },
+
+    _save: function( areNotifsMuted ) {
+        var self = this;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+
+        if (!cli.isGuest()) {
+            // Wrapping this in a q promise, as setRoomMutePushRule can return
+            // a promise or a value
+            q(cli.setRoomMutePushRule("global", roomId, areNotifsMuted))
+            .then(function() {
+                self.setState({areNotifsMuted: areNotifsMuted});
+
+                // delay slightly so that the user can see their state change
+                // before closing the menu
+                return q.delay(500).then(function() {
+                    // tell everyone that wants to know of the change in
+                    // notification state
+                    dis.dispatch({
+                        action: 'notification_change',
+                        roomId: self.props.room.roomId,
+                        areNotifsMuted: areNotifsMuted,
+                    });
+
+                    // Close the context menu
+                    if (self.props.onFinished) {
+                        self.props.onFinished();
+                    };
+                });
+            }).fail(function(error) {
+                // TODO: some form of error notification to the user
+                // to inform them that their state change failed.
+            });
+        }
+    },
+
+    _onClickAlertMe: function() {
+        // Placeholder
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(false);
+    },
+
+    _onClickMentions: function() {
+        this._save(true);
+    },
+
+    _onClickMute: function() {
+        // Placeholder
+    },
+
+    render: function() {
+        var cli = MatrixClientPeg.get();
+
+        var alertMeClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
+        var allNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': !this.state.areNotifsMuted,
+        });
+
+        var mentionsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.areNotifsMuted,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldDisabled': true,
+        });
+
+        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,171 @@
+/*
+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();
+        };
+    },
+
+    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,
+        });
+
+        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/elements/ImageView.js

@@ -27,7 +27,19 @@ module.exports = React.createClass({
     displayName: 'ImageView',
 
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired
+        src: React.PropTypes.string.isRequired, // the source of the image being displayed
+        name: React.PropTypes.string, // the main title ('name') for the image
+        link: React.PropTypes.string, // the link (if any) applied to the name of the image
+        width: React.PropTypes.number, // width of the image src in pixels
+        height: React.PropTypes.number, // height of the image src in pixels
+        fileSize: React.PropTypes.number, // size of the image src in bytes
+        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
+
+        // the event (if any) that the Image is displaying. Used for event-specific stuff like
+        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
+        // properties above, which let us use lightboxes to display images which aren't associated
+        // with events.
+        mxEvent: React.PropTypes.object,
     },
 
     // XXX: keyboard shortcuts for managing dialogs should be done by the modal
@@ -65,6 +77,14 @@ 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>;
+        }
+        return name;
+    },
+
     render: function() {
 
 /*
@@ -102,12 +122,36 @@ module.exports = React.createClass({
                 width: this.props.width,
                 height: this.props.height,
             };
-            res = ", " + style.width + "x" + style.height + "px";
+            res = style.width + "x" + style.height + "px";
         }
 
         var size;
-        if (this.props.mxEvent.getContent().info && this.props.mxEvent.getContent().info.size) {
-            size = filesize(this.props.mxEvent.getContent().info.size);
+        if (this.props.fileSize) {
+            size = filesize(this.props.fileSize);
+        }
+
+        var size_res;
+        if (size && res) {
+            size_res = size + ", " + res;
+        }
+        else {
+            size_res = size || res;
+        }
+
+        var showEventMeta = !!this.props.mxEvent;
+
+        var eventMeta;
+        if(showEventMeta) {
+            eventMeta = (<div className="mx_ImageView_metadata">
+                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+            </div>);
+        }
+
+        var eventRedact;
+        if(showEventMeta) {
+            eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
+                Redact
+            </div>);
         }
 
         return (
@@ -122,25 +166,16 @@ module.exports = React.createClass({
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">
-                                { this.props.mxEvent.getContent().body }
-                            </div>
-                            <div className="mx_ImageView_metadata">
-                                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
+                                { this.getName() }
                             </div>
+                            { eventMeta }
                             <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
                                 <div className="mx_ImageView_download">
                                         Download this file<br/>
-                                         <span className="mx_ImageView_size">{ size } { res }</span>
+                                         <span className="mx_ImageView_size">{ size_res }</span>
                                 </div>
                             </a>
-                            <div className="mx_ImageView_button">
-                                <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
-                                    View full screen
-                                </a>
-                            </div>
-                            <div className="mx_ImageView_button" onClick={this.onRedactClick}>
-                                Redact
-                            </div>
+                            { eventRedact }
                             <div className="mx_ImageView_shim">
                             </div>
                         </div>

src/components/views/globals/MatrixToolbar.js

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

src/components/views/messages/SenderProfile.js

@@ -1,39 +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',
-
-    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') {
-            name = ''; // emote message must include the name so don't duplicate it
-        }
-        return (
-            <span className="mx_SenderProfile">
-                {name} { this.props.aux }
-            </span>
-        );
-    },
-});
-

src/components/views/rooms/RoomDNDView.js

@@ -38,7 +38,7 @@ var roomTileSource = {
         // Return the data describing the dragged item
         var item = {
             room: props.room,
-            originalList: props.roomSubList,            
+            originalList: props.roomSubList,
             originalIndex: props.roomSubList.findRoomTile(props.room).index,
             targetList: props.roomSubList, // at first target is same as original
             // lastTargetRoom: null,
@@ -145,10 +145,10 @@ var roomTileTarget = {
                 // shuffle the list to add our tile to that position.
                 props.roomSubList.moveRoomTile(item.room, roomTile.index);
             }
-            
+
             // stop us from flickering between our droptarget and the previous room.
             // whenever the cursor changes direction we have to reset the flicker-damping.
-/*            
+/*
             var yDelta = off.y - item.lastYOffset;
 
             if ((yDelta > 0 && item.lastYDelta < 0) ||
@@ -168,7 +168,7 @@ var roomTileTarget = {
 
             if (yDelta) item.lastYDelta = yDelta;
             item.lastYOffset = off.y;
-*/            
+*/
         }
         else if (switchedTarget) {
             if (!props.roomSubList.findRoomTile(item.room).room) {
@@ -183,7 +183,7 @@ var roomTileTarget = {
 
 // Export the wrapped version, inlining the 'collect' functions
 // to more closely resemble the ES7
-module.exports = 
+module.exports =
 DropTarget('RoomTile', roomTileTarget, function(connect, monitor) {
     return {
         // Call this function inside render()

src/components/views/rooms/RoomTooltip.js

@@ -34,7 +34,7 @@ module.exports = React.createClass({
             });
         }
         else {
-            tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px"; 
+            tooltip.style.top = (70 + tooltip.parentElement.getBoundingClientRect().top) + "px";
             tooltip.style.display = "block";
         }
     },

src/components/views/rooms/SearchBar.js

@@ -50,7 +50,7 @@ module.exports = React.createClass({
     onSearch: function() {
         this.props.onSearch(this.refs.search_term.value, this.state.scope);
     },
-    
+
     render: function() {
         var searchButtonClasses = classNames({ mx_SearchBar_searchButton : true, mx_SearchBar_searching: this.props.searchInProgress });
         var thisRoomClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'Room' });

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/notifications/ContentRules.js

@@ -0,0 +1,125 @@
+/*
+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.
+*/
+
+'use strict';
+
+var PushRuleVectorState = require('./PushRuleVectorState');
+
+module.exports = {
+    /**
+     * Extract the keyword rules from a list of rules, and parse them
+     * into a form which is useful for Vector's UI.
+     *
+     * Returns an object containing:
+     *   rules: the primary list of keyword rules
+     *   vectorState: a PushRuleVectorState indicating whether those rules are
+     *      OFF/ON/LOUD
+     *   externalRules: a list of other keyword rules, with states other than
+     *      vectorState
+     */
+    parseContentRules: function(rulesets) {
+        // first categorise the keyword rules in terms of their actions
+        var contentRules = this._categoriseContentRules(rulesets);
+
+        // Decide which content rules to display in Vector UI.
+        // Vector displays a single global rule for a list of keywords
+        // whereas Matrix has a push rule per keyword.
+        // Vector can set the unique rule in ON, LOUD or OFF state.
+        // Matrix has enabled/disabled plus a combination of (highlight, sound) tweaks.
+
+        // The code below determines which set of user's content push rules can be
+        // displayed by the vector UI.
+        // Push rules that does not fit, ie defined by another Matrix client, ends
+        // in externalRules.
+        // There is priority in the determination of which set will be the displayed one.
+        // The set with rules that have LOUD tweaks is the first choice. Then, the ones
+        // with ON tweaks (no tweaks).
+
+        if (contentRules.loud.length) {
+            return {
+                vectorState: PushRuleVectorState.LOUD,
+                rules: contentRules.loud,
+                externalRules: [].concat(contentRules.loud_but_disabled, contentRules.on, contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.loud_but_disabled.length) {
+            return {
+                vectorState: PushRuleVectorState.OFF,
+                rules: contentRules.loud_but_disabled,
+                externalRules: [].concat(contentRules.on, contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.on.length) {
+            return {
+                vectorState: PushRuleVectorState.ON,
+                rules: contentRules.on,
+                externalRules: [].concat(contentRules.on_but_disabled, contentRules.other),
+            };
+        }
+        else if (contentRules.on_but_disabled.length) {
+            return {
+                vectorState: PushRuleVectorState.OFF,
+                rules: contentRules.on_but_disabled,
+                externalRules: contentRules.other,
+            }
+        } else  {
+            return {
+                vectorState: PushRuleVectorState.ON,
+                rules: [],
+                externalRules: contentRules.other,
+            }
+        }
+    },
+
+    _categoriseContentRules: function(rulesets) {
+        var contentRules = {on: [], on_but_disabled:[], loud: [], loud_but_disabled: [], other: []};
+        for (var kind in rulesets.global) {
+            for (var i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
+                var r = rulesets.global[kind][i];
+
+                // check it's not a default rule
+                if (r.rule_id[0] === '.' || kind !== 'content') {
+                    continue;
+                }
+
+                r.kind = kind; // is this needed? not sure
+
+                switch (PushRuleVectorState.contentRuleVectorStateKind(r)) {
+                    case PushRuleVectorState.ON:
+                        if (r.enabled) {
+                            contentRules.on.push(r);
+                        }
+                        else {
+                            contentRules.on_but_disabled.push(r);
+                        }
+                        break;
+                    case PushRuleVectorState.LOUD:
+                        if (r.enabled) {
+                            contentRules.loud.push(r);
+                        }
+                        else {
+                            contentRules.loud_but_disabled.push(r);
+                        }
+                        break;
+                    default:
+                        contentRules.other.push(r);
+                        break;
+                }
+            }
+        }
+        return contentRules;
+    },
+};

src/notifications/NotificationUtils.js

@@ -0,0 +1,89 @@
+/*
+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.
+*/
+
+'use strict';
+
+module.exports = {
+    // Encodes a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // to a list of push actions.
+    encodeActions: function(action) {
+        var notify = action.notify;
+        var sound = action.sound;
+        var highlight = action.highlight;
+        if (notify) {
+            var actions = ["notify"];
+            if (sound) {
+                actions.push({"set_tweak": "sound", "value": sound});
+            }
+            if (highlight) {
+                actions.push({"set_tweak": "highlight"});
+            } else {
+                actions.push({"set_tweak": "highlight", "value": false});
+            }
+            return actions;
+        } else {
+            return ["dont_notify"];
+        }
+    },
+
+    // Decode a list of actions to a dictionary of {
+    //   "notify": true/false,
+    //   "sound": string or undefined,
+    //   "highlight: true/false,
+    // }
+    // If the actions couldn't be decoded then returns null.
+    decodeActions: function(actions) {
+        var notify = false;
+        var sound = null;
+        var highlight = false;
+
+        for (var i = 0; i < actions.length; ++i) {
+            var action = actions[i];
+            if (action === "notify") {
+                notify = true;
+            } else if (action === "dont_notify") {
+                notify = false;
+            } else if (typeof action === 'object') {
+                if (action.set_tweak === "sound") {
+                    sound = action.value
+                } else if (action.set_tweak === "highlight") {
+                    highlight = action.value;
+                } else {
+                    // We don't understand this kind of tweak, so give up.
+                    return null;
+                }
+            } else {
+                // We don't understand this kind of action, so give up.
+                return null;
+            }
+        }
+
+        if (highlight === undefined) {
+            // If a highlight tweak is missing a value then it defaults to true.
+            highlight = true;
+        }
+
+        var result = {notify: notify, highlight: highlight};
+        if (sound !== null) {
+            result.sound = sound;
+        }
+        return result;
+    },
+};

src/notifications/PushRuleVectorState.js

@@ -0,0 +1,94 @@
+/*
+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.
+*/
+
+'use strict';
+
+var StandardActions = require('./StandardActions');
+var NotificationUtils = require('./NotificationUtils');
+
+var states = {
+    /** The push rule is disabled */
+    OFF: "off",
+
+    /** The user will receive push notification for this rule */
+    ON: "on",
+
+    /** The user will receive push notification for this rule with sound and
+        highlight if this is legitimate */
+    LOUD: "loud",
+};
+
+
+module.exports = {
+    /**
+     * Enum for state of a push rule as defined by the Vector UI.
+     * @readonly
+     * @enum {string}
+     */
+    states: states,
+
+    /**
+     * Convert a PushRuleVectorState to a list of actions
+     *
+     * @return [object] list of push-rule actions
+     */
+    actionsFor: function(pushRuleVectorState) {
+        if (pushRuleVectorState === this.ON) {
+            return StandardActions.ACTION_NOTIFY;
+        }
+        else if (pushRuleVectorState === this.LOUD) {
+            return StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND;
+        }
+    },
+
+    /**
+     * Convert a pushrule's actions to a PushRuleVectorState.
+     *
+     * Determines whether a content rule is in the PushRuleVectorState.ON
+     * category or in PushRuleVectorState.LOUD, regardless of its enabled
+     * state. Returns null if it does not match these categories.
+     */
+    contentRuleVectorStateKind: function(rule) {
+        var decoded = NotificationUtils.decodeActions(rule.actions);
+
+        if (!decoded) {
+            return null;
+        }
+
+        // Count tweaks to determine if it is a ON or LOUD rule
+        var tweaks = 0;
+        if (decoded.sound) {
+            tweaks++;
+        }
+        if (decoded.highlight) {
+            tweaks++;
+        }
+        var stateKind = null;
+        switch (tweaks) {
+            case 0:
+                stateKind = this.ON;
+                break;
+            case 2:
+                stateKind = this.LOUD;
+                break;
+        }
+        return stateKind;
+    },
+};
+
+for (var k in states) {
+    module.exports[k] = states[k];
+};

src/notifications/StandardActions.js

@@ -0,0 +1,30 @@
+/*
+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.
+*/
+
+'use strict';
+
+var NotificationUtils = require('./NotificationUtils');
+
+var encodeActions = NotificationUtils.encodeActions;
+
+module.exports = {
+    ACTION_NOTIFY: encodeActions({notify: true}),
+    ACTION_NOTIFY_DEFAULT_SOUND: encodeActions({notify: true, sound: "default"}),
+    ACTION_NOTIFY_RING_SOUND: encodeActions({notify: true, sound: "ring"}),
+    ACTION_HIGHLIGHT_DEFAULT_SOUND: encodeActions({notify: true, sound: "default", highlight: true}),
+    ACTION_DONT_NOTIFY: encodeActions({notify: false}),
+    ACTION_DISABLED: null,
+};

src/notifications/VectorPushRulesDefinitions.js

@@ -0,0 +1,134 @@
+/*
+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.
+*/
+
+'use strict';
+
+var StandardActions = require('./StandardActions');
+var PushRuleVectorState = require('./PushRuleVectorState');
+
+class VectorPushRuleDefinition {
+    constructor(opts) {
+        this.kind = opts.kind;
+        this.description = opts.description;
+        this.vectorStateToActions = opts.vectorStateToActions;
+    }
+
+    // Translate the rule actions and its enabled value into vector state
+    ruleToVectorState(rule) {
+        var enabled = false;
+        var actions = null;
+        if (rule) {
+            enabled = rule.enabled;
+            actions = rule.actions;
+        }
+
+        for (var stateKey in PushRuleVectorState.states) {
+            var state = PushRuleVectorState.states[stateKey];
+            var vectorStateToActions = this.vectorStateToActions[state];
+
+            if (!vectorStateToActions) {
+                // No defined actions means that this vector state expects a disabled (or absent) rule
+                if (!enabled) {
+                    return state;
+                }
+            } else {
+                // The actions must match to the ones expected by vector state
+                if (enabled && JSON.stringify(rule.actions) === JSON.stringify(vectorStateToActions)) {
+                    return state;
+                }
+            }
+        }
+
+        console.error("Cannot translate rule actions into Vector rule state. Rule: " +
+                      JSON.stringify(rule));
+        return undefined;
+    }
+};
+
+/**
+ * The descriptions of rules managed by the Vector UI.
+ */
+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",
+        description: "Messages containing my name",
+        vectorStateToActions: { // The actions for each vector state, or null to disable the rule.
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_HIGHLIGHT_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Messages just sent to the user in a 1:1 room
+    ".m.rule.room_one_to_one": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Messages in one-to-one chats",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY
+        }
+    }),
+
+    // Messages just sent to a group chat room
+    // 1:1 room messages are catched by the .m.rule.room_one_to_one rule if any defined
+    // By opposition, all other room messages are from group chat rooms.
+    ".m.rule.message": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Messages in group chats",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY
+        }
+    }),
+
+    // Invitation for the user
+    ".m.rule.invite_for_me": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "When I'm invited to a room",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Incoming call
+    ".m.rule.call": new VectorPushRuleDefinition({
+        kind: "underride",
+        description: "Call invitation",
+        vectorStateToActions: {
+            on: StandardActions.ACTION_NOTIFY,
+            loud: StandardActions.ACTION_NOTIFY_RING_SOUND,
+            off: StandardActions.ACTION_DISABLED
+        }
+    }),
+
+    // Notifications from bots
+    ".m.rule.suppress_notices": new VectorPushRuleDefinition({
+        kind: "override",
+        description: "Messages sent by bot",
+        vectorStateToActions: {
+            // .m.rule.suppress_notices is a "negative" rule, we have to invert its enabled value for vector UI
+            on: StandardActions.ACTION_DISABLED,
+            loud: StandardActions.ACTION_NOTIFY_DEFAULT_SOUND,
+            off: StandardActions.ACTION_DONT_NOTIFY,
+        }
+    }),
+};

src/notifications/index.js

@@ -0,0 +1,24 @@
+/*
+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.
+*/
+
+'use strict';
+
+module.exports = {
+    NotificationUtils: require('./NotificationUtils'),
+    PushRuleVectorState: require('./PushRuleVectorState'),
+    VectorPushRulesDefinitions: require('./VectorPushRulesDefinitions'),
+    ContentRules: require('./ContentRules'),
+};

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,62 +54,59 @@ 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;
+    -webkit-transition: opacity 0.2s ease-in-out;
+    -moz-transition: opacity 0.2s ease-in-out;
+    -ms-transition: opacity 0.2s ease-in-out;
+    -o-transition: opacity 0.2s ease-in-out;
+}
+
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
    Stop the scrollbar view from pushing out the container's overall sizing, which causes
    flexbox to adapt to the new size and cause the view to keep growing.
  */
 .gm-scrollbar-container .gm-scroll-view {
-  position: absolute;
-}
-
-.mx_ContextualMenu_background {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 1.0;
-    z-index: 2000;
-}
-
-.mx_ContextualMenu {
-    border: 1px solid #a4a4a4;
-    border-radius: 8px;
-    background-color: #fff;
-    color: #747474;
-    position: fixed;
-    z-index: 2001;
-    padding: 6px;
-}
-
-.mx_ContextualMenu_chevron_right {
-    padding: 12px;
     position: absolute;
-    right: -21px;
-    top: 0px;
 }
 
-.mx_ContextualMenu_chevron_left {
-    padding: 12px;
-    position: absolute;
-    left: -21px;
-    top: 0px;
+/* Expand thumbs on hoverover */
+.gm-scrollbar {
+    border-radius: 5px ! important;
 }
-
-.mx_ContextualMenu_field {
-    padding: 3px 6px 3px 6px;
-    cursor: pointer;
+.gm-scrollbar.-vertical {
+    width: 6px;
+    transition: width 120ms ease-out ! important;
 }
-
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
+.gm-scrollbar.-vertical:hover,
+.gm-scrollbar.-vertical:active {
+    width: 8px;
+    transition: width 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal {
+    height: 6px;
+    transition: height 120ms ease-out ! important;
+}
+.gm-scrollbar.-horizontal:hover,
+.gm-scrollbar.-horizontal:active {
+    height: 8px;
+    transition: height 120ms ease-out ! important;
 }
 
 .mx_Dialog_wrapper {
@@ -129,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 {
@@ -147,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 {
@@ -166,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 {
@@ -209,3 +250,30 @@ input[type=text]:focus, textarea:focus {
     color: #454545;
     background-color: #fff;
 }
+
+.emojione {
+    height: 1em;
+    vertical-align: middle;
+}
+
+::-moz-selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+::selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+/** green button with rounded corners */
+.textButton {
+    color: #fff;
+    background-color: #76cfa6;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    cursor: pointer;
+    display: inline;
+}

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

@@ -0,0 +1,106 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ContextualMenu_wrapper {
+    position: fixed;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu_background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 1.0;
+    z-index: 2000;
+}
+
+.mx_ContextualMenu {
+    border: solid 1px rgba(187, 187, 187, 0.5);
+    border-radius: 4px;
+    background-color: #f6f6f6;
+    color: #4a4a4a;
+    position: absolute;
+    padding: 6px;
+	font-size: 14px;
+    z-index: 2001;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_right {
+    right: 8px;
+}
+
+.mx_ContextualMenu_chevron_right {
+    position: absolute;
+    right: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-left: 8px solid rgba(187, 187, 187, 0.5);
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_right:after {
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-left: 7px solid #f6f6f6;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    right: 1px;
+}
+
+.mx_ContextualMenu.mx_ContextualMenu_left {
+    left: 8px;
+}
+
+.mx_ContextualMenu_chevron_left {
+    position: absolute;
+    left: -8px;
+    top: 0px;
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-bottom: 8px solid transparent;
+}
+
+.mx_ContextualMenu_chevron_left:after{
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 7px solid transparent;
+    border-right: 7px solid #f6f6f6;
+    border-bottom: 7px solid transparent;
+    position:absolute;
+    top: -7px;
+    left: 1px;
+}
+
+.mx_ContextualMenu_field {
+    padding: 3px 6px 3px 6px;
+    cursor: pointer;
+    white-space: nowrap;
+}
+
+.mx_ContextualMenu_spinner {
+    display: block;
+    margin: 0 auto;
+}

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

@@ -18,7 +18,7 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: #4a4a4a;    
+    color: #4a4a4a;
 }
 
 .mx_CreateRoom input,

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

@@ -31,7 +31,7 @@ limitations under the License.
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
-    display: flex;    
+    display: flex;
 
     flex-direction: column;
     -webkit-flex-direction: column;
@@ -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 {

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

@@ -1,7 +1,23 @@
+/*
+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_RoomStatusBar {
-    margin-top: 5px;
+    margin-top: 15px;
     margin-left: 65px;
-    min-height: 24px;
+    min-height: 34px;
 }
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
@@ -14,12 +30,42 @@
     text-align: center;
 }
 
-.mx_RoomStatusBar_placeholderIndicator { 
+.mx_RoomStatusBar_placeholderIndicator span {
     color: #4a4a4a;
     opacity: 0.5;
+    position: relative;
+    top: -4px;
+/*    
+    animation-duration: 1s;
+    animation-name: bounce;
+    animation-direction: alternate;
+    animation-iteration-count: infinite;
+*/    
 }
 
-.mx_RoomStatusBar_scrollDownIndicator { 
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
+    animation-delay: 0.3s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(2) {
+    animation-delay: 0.6s;
+}
+.mx_RoomStatusBar_placeholderIndicator span:nth-child(3) {
+    animation-delay: 0.9s;
+}
+
+@keyframes bounce {
+    from {
+        opacity: 0.5;
+        top: 0;
+    }
+
+    to {
+        opacity: 0.2;
+        top: -3px;
+    }
+}
+
+.mx_RoomStatusBar_scrollDownIndicator {
     cursor: pointer;
 }
 
@@ -70,7 +116,7 @@
 .mx_RoomStatusBar_tabCompleteWrapper {
     display: flex;
     display: -webkit-flex;
-    height: 24px;
+    height: 26px;
 }
 
 .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {

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

@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 .mx_RoomView_fileDropTarget {
@@ -64,7 +64,7 @@ limitations under the License.
     border: 2px #e1dddd solid;
     border-bottom: none;
     position: absolute;
-    top: 83px;
+    top: 70px;
     bottom: 0px;
     z-index: 3000;
 }
@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -121,7 +121,7 @@ limitations under the License.
 .mx_RoomView_messageListWrapper {
     max-width: 960px;
     margin: auto;
-    
+
     min-height: 100%;
 
     display: -webkit-box;
@@ -137,6 +137,11 @@ limitations under the License.
     -webkit-justify-content: flex-end;
 }
 
+.mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+}
+
 .mx_RoomView_MessageList {
     width: 100%;
     list-style-type: none;
@@ -153,7 +158,7 @@ limitations under the License.
     margin-bottom: 8px;
     margin-left: 63px;
     padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;
 }
 
 .mx_RoomView_invitePrompt {
@@ -202,11 +207,12 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_statusAreaBox {
     max-width: 960px;
     margin: auto;
-    min-height: 36px;
+    min-height: 60px;
 }
 
 .mx_RoomView_statusAreaBox_line {
-    border-top: 1px solid #eee;
+    margin-left: 65px;
+    border-top: 1px solid #e5e5e5;
     height: 1px;
 }
 
@@ -260,4 +266,5 @@ hr.mx_RoomView_myReadMarker {
     color: #fff;
     font-weight: bold;
     padding: 6px 0;
+    cursor: pointer;
 }

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

@@ -0,0 +1,70 @@
+/*
+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_SearchBox {
+    height: 24px;
+    margin-left: 16px;
+    margin-right: 16px;
+    padding-top: 24px;
+    padding-bottom: 22px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+
+    display: flex;
+    display: -webkit-flex;
+}
+
+.mx_SearchBox_searchButton {
+    margin-right: 10px;
+    margin-top: 5px;
+    pointer-events: none;
+}
+
+.mx_SearchBox_closeButton {
+    cursor: pointer;
+    margin-top: -5px;
+}
+
+.mx_SearchBox_search {
+    flex: 1 1 auto;
+    -webkit-flex: 1 1 auto;
+    width: 0px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    font-size: 12px;
+    margin-top: -2px;
+    height: 24px;
+    border: 0px ! important;
+    /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
+    background-color: transparent;
+    border: 0px;
+}
+
+.mx_SearchBox_minimise,
+.mx_SearchBox_maximise {
+    margin-top: 3px;
+    cursor: pointer;
+}
+
+.mx_SearchBox_minimise {
+    margin-left: 10px;
+}
+
+.mx_SearchBox_maximise {
+    margin-left: 9px;
+}
+
+.mx_SearchBox object {
+    pointer-events: none;
+}

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

@@ -1,16 +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_UploadBar {
     position: relative;
 }
 
 .mx_UploadBar_uploadProgressOuter {
-    height: 4px;
+    height: 5px;
     margin-left: 63px;
     margin-top: -1px;
+    padding-bottom: 5px;
 }
 
 .mx_UploadBar_uploadProgressInner {
     background-color: #76cfa6;
-    height: 4px;
+    height: 5px;
 }
 
 .mx_UploadBar_uploadFilename {
@@ -22,7 +39,7 @@
 
 .mx_UploadBar_uploadIcon {
     float: left;
-    margin-top: 1px;
+    margin-top: 5px;
     margin-left: 14px;
 }
 
@@ -32,12 +49,12 @@
     margin-right: 10px;
     position: relative;
     opacity: 0.6;
-    cursor: pointer;    
+    cursor: pointer;
     z-index: 1;
 }
 
 .mx_UploadBar_uploadBytes {
-    float: right;    
+    float: right;
     margin-top: 5px;
     margin-right: 30px;
     color: #76cfa6;

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

@@ -26,7 +26,7 @@ limitations under the License.
     display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;    
+    -webkit-flex-direction: column;
 }
 
 .mx_UserSettings .mx_RoomHeader {
@@ -36,8 +36,8 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 .mx_UserSettings_body {
@@ -50,7 +50,23 @@ limitations under the License.
     -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
-    overflow-y: auto;    
+    margin-top: -20px;
+    overflow-y: auto;
+}
+
+.mx_UserSettings h3 {
+    clear: both;
+    margin-left: 63px;
+    text-transform: uppercase;
+    color: #3d3b39;
+    font-weight: 600;
+    font-size: 13px;
+    margin-top: 26px;
+    margin-bottom: 10px;
+}
+
+.mx_UserSettings_section h3 {
+    margin-left: 0px;
 }
 
 .mx_UserSettings_spinner {
@@ -78,20 +94,8 @@ limitations under the License.
     cursor: pointer;
 }
 
-.mx_UserSettings h2 {
-    clear: both;
-    margin-top: 32px;
-    margin-bottom: 8px;
-    margin-left: 63px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #eee;
-}
-
-.mx_UserSettings h3 {
-    font-weight: bold;
-    font-size: 15px;
-    margin-top: 4px;
-    margin-bottom: 4px;
+.mx_UserSettings_button.danger {
+    background-color: #ff0064;
 }
 
 .mx_UserSettings_section {
@@ -100,12 +104,26 @@ limitations under the License.
     margin-bottom: 28px;
 }
 
+.mx_UserSettings_toggle input {
+    width: 16px;
+    margin-right: 8px;
+    margin-bottom: 8px;
+}
+
+.mx_UserSettings_toggle label {
+    padding-bottom: 21px;
+}
+
 .mx_UserSettings_accountTable
 .mx_UserSettings_notifTable
 {
     display: table;
 }
 
+.mx_UserSettings_notifTable .mx_Spinner {
+    position: absolute;
+}
+
 .mx_UserSettings_profileTable
 {
     display: table;

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

@@ -60,6 +60,14 @@ limitations under the License.
     margin-bottom: 14px;
 }
 
+.mx_Login_fieldLabel {
+    margin-top: -10px;
+    margin-left: 8px;
+    margin-bottom: 14px;
+    font-size: 13px;
+    opacity: 0.8;
+}
+
 .mx_Login_submit {
     margin-top: 35px;
     margin-bottom: 24px;
@@ -77,7 +85,8 @@ limitations under the License.
     opacity: 0.8;
 }
 
-.mx_Login_checkbox {
+.mx_Login_checkbox,
+.mx_Login_radio {
     margin-right: 10px;
 }
 
@@ -122,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

@@ -14,6 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_MImageBody {
+    display: block;
+}
+
 .mx_MImageBody_thumbnail {
     max-width: 100%;
 /*

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

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

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

@@ -0,0 +1,16 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+    http://www.apache.org/licenses/LICENSE-2.0
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UnknownBody {
+    white-space: pre-wrap;
+}

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

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

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

@@ -47,11 +47,12 @@ limitations under the License.
     top: 0px;
     right: 6px;
 }
-  
+
 .mx_EntityTile_name {
     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,7 +17,7 @@ limitations under the License.
 .mx_EventTile {
     max-width: 100%;
     clear: both;
-    margin-top: 24px;
+    padding-top: 24px;
     margin-left: 65px;
 }
 
@@ -29,19 +29,28 @@ limitations under the License.
     float: left;
     position: relative;
     top: 0px;
+    cursor: pointer;
 }
 
 .mx_EventTile_continuation {
-    margin-top: 8px ! important;
+    padding-top: 8px ! 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;
-    margin-bottom: 4px;
-    display: block;
     overflow-y: hidden;
+    cursor: pointer;
 }
 
 .mx_EventTile .mx_MessageTimestamp {
@@ -55,9 +64,21 @@ limitations under the License.
     margin-right: 95px;
 }
 
+/* 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;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
 }
 
 /* Various markdown overrides */
@@ -70,6 +91,15 @@ limitations under the License.
     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,
@@ -90,10 +120,16 @@ limitations under the License.
 
 /* 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.  
+/* 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;
+}
+
+/* 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 {
     border-left: #76cfa6 5px solid;
     margin-left: 53px;
     padding-left: 7px;
@@ -110,7 +146,7 @@ limitations under the License.
 
 .mx_EventTile_searchHighlight a {
     background-color: #76cfa6;
-    color: #fff;    
+    color: #fff;
 }
 
 .mx_EventTile_sending {
@@ -141,10 +177,15 @@ limitations under the License.
     margin-right: 10px;
 }
 
+.mx_EventTile_msgOption a {
+    text-decoration: none;
+}
+
 .mx_EventTile .mx_MessageTimestamp {
     display: block;
     visibility: hidden;
     text-align: right;
+    white-space: nowrap;
 }
 
 .mx_EventTile_last .mx_MessageTimestamp {
@@ -158,7 +199,7 @@ limitations under the License.
 .mx_EventTile_editButton {
     position: absolute;
     display: inline-block;
-    visibility: hidden; 
+    visibility: hidden;
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton {

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

@@ -0,0 +1,65 @@
+/*
+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_LinkPreviewWidget {
+    margin-top: 15px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+    display: -webkit-flex;
+    display: flex;
+    border-left: 4px solid #ddd;
+    color: #888;
+}
+
+.mx_LinkPreviewWidget_image {
+    -webkit-flex: 0 0 100px;
+    flex: 0 0 100px;
+    margin-left: 15px;
+    text-align: center;
+    cursor: pointer;
+}
+
+.mx_LinkPreviewWidget_caption {
+    margin-left: 15px;
+    -webkit-flex: 1 1 auto;
+    flex: 1 1 auto;
+}
+
+.mx_LinkPreviewWidget_title {
+    display: inline;
+    font-weight: bold;
+}
+
+.mx_LinkPreviewWidget_siteName {
+    display: inline;
+}
+
+.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 {
+    visibility: visible;
+}

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

@@ -15,7 +15,9 @@ limitations under the License.
 */
 
 .mx_MemberInfo {
+    margin-top: 20px;
     height: 100%;
+    overflow-y: auto;
 }
 
 .mx_MemberInfo h2 {
@@ -32,6 +34,14 @@ limitations under the License.
     clear: both;
 }
 
+.mx_MemberInfo_avatar .mx_BaseAvatar {
+    cursor: not-allowed;
+}
+
+.mx_MemberInfo_avatar .mx_BaseAvatar.mx_BaseAvatar_image {
+    cursor: pointer;
+}
+
 .mx_MemberInfo_profile {
     margin-bottom: 16px;
 }
@@ -46,7 +56,7 @@ limitations under the License.
 }
 
 .mx_MemberInfo_profileField {
-    font-color: #999999;    
+    font-color: #999999;
     font-size: 13px;
     position: relative;
     background-color: #fff;
@@ -63,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

@@ -17,6 +17,9 @@ limitations under the License.
 .mx_MemberList {
     height: 100%;
 
+    margin-top: 12px;
+    margin-right: 20px;
+
     -webkit-flex: 1;
     flex: 1;
 
@@ -30,6 +33,11 @@ limitations under the License.
     -webkit-flex-direction: column;
 }
 
+.mx_MemberList .mx_Spinner {
+    flex: 0;
+    -webkit-flex: 0;
+}
+
 .mx_MemberList_chevron {
     position: absolute;
     right: 35px;
@@ -72,17 +80,6 @@ limitations under the License.
 }
 */
 
-.mx_MemberList_bottom {
-    order: 4;
-    flex: 0 0 72px;
-    -webkit-flex: 0 0 72px;
-}
-
-.mx_MemberList_bottomRule {
-    border-top: 2px solid #e1dddd;
-    margin-right: 15px;
-}
-
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
     color: #3d3b39;
@@ -91,12 +88,12 @@ limitations under the License.
     padding-left: 3px;
     padding-right: 12px;
     margin-top: 8px;
-    margin-bottom: 4px;    
+    margin-bottom: 4px;
 }
 
 /* we have to have display: table in order for the horizontal wrapping to work */
 .mx_MemberList_wrapper {
-    display: table; 
+    display: table;
     table-layout: fixed;
     width: 100%;
 }

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

@@ -18,30 +18,57 @@ limitations under the License.
     max-width: 960px;
     vertical-align: middle;
     margin: auto;
-    border-top: 2px solid #e1dddd;
+    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 {
     display: block;
 }
 
-.mx_MessageComposer_input {
-    display: table-cell;
+.mx_MessageComposer_composecontrols {
     width: 100%;
+}
+
+.mx_MessageComposer_noperm_error {
+    width: 100%;
+    height: 60px;
+    text-align: center;
+    font-style: italic;
+    color: #888;
+}
+
+.mx_MessageComposer_input {
+    flex: 1;
     vertical-align: middle;
-    height: 70px;
+    min-height: 60px;
+    max-height: 120px;
+    display: flex;
+    align-items: center;
+    overflow: auto;
+}
+.mx_MessageComposer_input_rte {
+    border-top: 2px solid #76cfa6; /* placeholder RTE indicator */
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    flex: 1;
 }
 
 .mx_MessageComposer_input textarea {
@@ -78,11 +105,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,
@@ -92,16 +120,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

@@ -23,12 +23,11 @@ limitations under the License.
 .mx_RoomHeader_wrapper {
     max-width: 960px;
     margin: auto;
-    height: 83px;
-    border-bottom: 1px solid #eeeeee;
+    height: 70px;
 
     -webkit-align-items: center;
     align-items: center;
-    
+
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
@@ -36,10 +35,6 @@ limitations under the License.
     display: flex;
 }
 
-.mx_RoomHeader_editing .mx_RoomHeader_wrapper {
-    border-bottom: 1px solid transparent;
-}
-
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
@@ -53,6 +48,19 @@ limitations under the License.
     flex: 1;
 }
 
+.mx_RoomHeader_spinner {
+    height: 36px;
+
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
 .mx_RoomHeader_textButton {
     height: 36px;
     background-color: #76cfa6;
@@ -71,7 +79,7 @@ limitations under the License.
 
     cursor: pointer;
 
-/*  
+/*
     -webkit-flex: 0 0 90px;
     flex: 0 0 90px;
 */
@@ -95,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;
@@ -110,7 +119,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_simpleHeader {
-    line-height: 83px;
+    line-height: 70px;
     color: #454545;
     font-size: 22px;
     font-weight: bold;
@@ -120,11 +129,8 @@ limitations under the License.
     width: 100%;
 }
 
-.mx_RoomHeader_simpleHeaderCancel {
+.mx_RoomHeader_simpleHeader .mx_RoomHeader_cancelButton {
     float: right;
-    margin-top: 8px;
-    padding: 24px;
-    cursor: pointer;
 }
 
 .mx_RoomHeader_name {
@@ -156,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;
 }
@@ -178,10 +177,6 @@ limitations under the License.
     color: #76cfa6;
 }
 
-.mx_RoomHeader_leaveButton {
-    margin-top: -1px;
-}
-
 .mx_RoomHeader_placeholder {
     color: #a2a2a2 ! important;
 }
@@ -202,13 +197,14 @@ limitations under the License.
     vertical-align: bottom;
     float: left;
     max-height: 42px;
-    color: #454545;
-    font-weight: 300;  
+    color: #A2A2A2;
+    font-weight: 300;
+    font-size: 13px;
     margin-left: 19px;
     margin-right: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
-    border-bottom: 1px solid transparent;    
+    border-bottom: 1px solid transparent;
 }
 
 .mx_RoomHeader_avatar {
@@ -218,6 +214,10 @@ limitations under the License.
     vertical-align: middle;
 }
 
+.mx_RoomHeader_avatar .mx_BaseAvatar_image {
+    object-fit: cover;
+}
+
 .mx_RoomHeader_avatarPicker_edit {
     position: absolute;
     margin-left: 16px;
@@ -233,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/RoomList.css

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 .mx_RoomList {
-    padding-top: 24px;
+    padding-top: 8px;
     padding-bottom: 12px;
     min-height: 400px;
 }

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

@@ -23,7 +23,7 @@ limitations under the License.
 
     flex-direction: column;
     -webkit-flex-direction: column;
-    
+
     justify-content: center;
     -webkit-justify-content: center;
 
@@ -54,3 +54,15 @@ limitations under the License.
     text-decoration: underline;
     cursor: pointer;
 }
+
+.mx_RoomPreviewBar_warning {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-align-items: center;
+    align-items: center;
+    padding: 8px;
+}
+
+.mx_RoomPreviewBar_warningIcon {
+    padding: 12px;
+}

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

@@ -107,7 +107,7 @@ limitations under the License.
 .mx_RoomSettings .mx_RoomSettings_alias {
     max-width: 400px;
     margin-bottom: 16px;
-    /* 
+    /*
     commented out so margin applies
     display: table-cell; */
 }
@@ -130,6 +130,13 @@ limitations under the License.
     visibility: visible;
 }
 
+.mx_RoomSettings_warning {
+    color: #ff0064;
+    font-weight: bold;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+
 .mx_RoomSettings_editable {
     border: 0px;
     border-bottom: 1px solid #c7c7c7;

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: 8px;
-    padding-top: 6px;
-    padding-bottom: 6px;
-    padding-left: 18px;
+    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;
+    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;
-    padding-right: 16px;    
-    color: rgba(69, 69, 69, 0.8);
 }
 
 .mx_RoomTile_ellipsis .mx_RoomTile_name {
@@ -53,83 +100,86 @@ 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: 4px;
+    display: inline-block;
+    min-width: 19px;
+    height: 17px;
     position: absolute;
-    left: 0px;
-    top: 5px;
-    bottom: 5px;
-} 
+    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 {
-    color: #76cfa6 ! important;
+.mx_RoomTile_selected {
+    background-color: rgba(118,207,166,0.2);
 }
 
-.mx_RoomTile_highlight .mx_RoomTile_name {
-    color: #ff0064 ! important;
-}
-
-.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 {

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 {
@@ -51,13 +51,13 @@ limitations under the License.
     flex: 1;
     -webkit-flex: 1;
 
-    overflow-y: auto;    
+    overflow-y: auto;
 }
 
 .mx_SearchableEntityList_list {
     display: table;
     table-layout: fixed;
-    width: 100%;    
+    width: 100%;
 }
 
 .mx_SearchableEntityList_list .mx_EntityTile_chevron {
@@ -67,7 +67,7 @@ limitations under the License.
 .mx_SearchableEntityList_hrWrapper {
     width: 100%;
     flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;    
+    -webkit-flex: 0 0 auto;
 }
 
 .mx_SearchableEntityList hr {

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

@@ -21,6 +21,7 @@ limitations under the License.
 .mx_TabCompleteBar_item {
     display: inline-block;
     margin-right: 15px;
+    margin-bottom: 2px;
     cursor: pointer;
 }
 
@@ -37,6 +38,7 @@ limitations under the License.
 
 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
     opacity: 1.0;
+    vertical-align: initial;
     color: #fff;
 }
 
@@ -47,5 +49,6 @@ limitations under the License.
 
 .mx_TabCompleteBar_text {
     color: #4a4a4a;
+    vertical-align: middle;
     opacity: 0.5;
 }

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

@@ -19,25 +19,25 @@ limitations under the License.
     max-width: 960px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border-bottom: 1px solid #eee;
+    border-bottom: 1px solid #e5e5e5;
 }
 
-.mx_TopUnreadMessagesBar_scrollUp { 
+.mx_TopUnreadMessagesBar_scrollUp {
     display: inline;
     cursor: pointer;
 }
 
-.mx_TopUnreadMessagesBar_scrollUp img { 
+.mx_TopUnreadMessagesBar_scrollUp img {
     padding-left: 10px;
     padding-right: 31px;
     vertical-align: middle;
 }
 
-.mx_TopUnreadMessagesBar_scrollUp span { 
+.mx_TopUnreadMessagesBar_scrollUp span {
     opacity: 0.5;
 }
 
-.mx_TopUnreadMessagesBar_close { 
+.mx_TopUnreadMessagesBar_close {
     float: right;
     padding-right: 14px;
     padding-top: 3px;

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/structures/LeftPanel.css

@@ -35,7 +35,7 @@ limitations under the License.
 }
 
 .mx_LeftPanel_callView {
-    
+
 }
 
 .mx_LeftPanel .mx_RoomList_scrollbar {
@@ -48,7 +48,11 @@ limitations under the License.
     -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
-    overflow-y: auto; 
+    overflow-y: auto;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+   flex: 0 0 120px;
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -58,23 +62,45 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 140px;
-    flex: 0 0 140px;
-
-    background-color: rgba(118,207,166,0.2);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-left: 16px; /* gutter */
+    margin-right: 16px; /* gutter */
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;
+    z-index: 1;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {
-    color: #454545;
+.mx_LeftPanel .mx_BottomLeftMenu_options {
+    margin-top: 18px;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu .mx_BottomLeftMenu_options {
-    margin-top: 15px;
-    width: 100%;
+.mx_BottomLeftMenu_options object {
+    pointer-events: none;
 }
 
-.mx_LeftPanel .mx_BottomLeftMenu img {
-    border-radius: 0px;
-    background-color: transparent;
-    vertical-align: middle;
-}
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_settings {
+    margin-left: 0px ! important;
+    padding-top: 3px ! important;
+    padding-bottom: 3px ! important;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_directory {
+    margin-left: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    float: right;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}

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

@@ -33,14 +33,17 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 83px;
-    flex: 0 0 83px;
+    border-bottom: 1px solid #e5e5e5;
+    margin-right: 20px;
+
+    -webkit-flex: 0 0 70px;
+    flex: 0 0 70px;
 }
 
 /** Fixme - factor this out with the main header **/
 
 .mx_RightPanel_headerButtonGroup {
-    margin-top: 32px;
+    margin-top: 6px;
     float: left;
     background-color: #fff;
     margin-left: -4px;
@@ -49,44 +52,54 @@ limitations under the License.
 .mx_RightPanel_headerButton {
     cursor: pointer;
     display: table-cell;
-    vertical-align: middle;    
+    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,
-.mx_RightPanel .mx_MemberInfo {
+.mx_RightPanel .mx_MemberInfo,
+.mx_RightPanel_blank {
     -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     -webkit-order: 2;
     order: 2;
+    flex: 1;
+    -webkit-flex: 1;
+}
+
+.mx_RightPanel_footer {
+    -webkit-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -ms-flex-order: 3;
+    -webkit-order: 3;
+    order: 3;
+
+    border-top: 1px solid #e5e5e5;
+    margin-right: 20px;
+
+    -webkit-flex: 0 0 60px;
+    flex: 0 0 60px;
 }

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

@@ -26,21 +26,21 @@ limitations under the License.
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
-    display: flex;    
+    display: flex;
 
     flex-direction: column;
     -webkit-flex-direction: column;
 }
 
 .mx_RoomDirectory_list {
-    -webkit-flex: 1;    
+    -webkit-flex: 1;
     flex: 1;
 
     display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
     display: -webkit-flex;
-    display: flex;    
+    display: flex;
 
     flex-direction: column;
     -webkit-flex-direction: column;
@@ -59,7 +59,7 @@ limitations under the License.
 
 .mx_RoomDirectory_tableWrapper {
     overflow-y: auto;
-    -webkit-flex: 1 1 0;    
+    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 }
 
@@ -116,6 +116,7 @@ limitations under the License.
 .mx_RoomDirectory_roomMemberCount {
     text-align: right;
     width: 100px;
+    padding-right: 10px;
 }
 
 .mx_RoomDirectory_table tr {

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

@@ -25,17 +25,18 @@ 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;
 }
 
 .mx_RoomSubList_chevron {
-    padding-left: 5px;
+    padding-left: 4px;
     pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_chevron  {
-    padding-left: 13px;
+    padding-left: 12px;
 }

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

@@ -19,4 +19,5 @@ limitations under the License.
     font-size: 12px;
     padding: 0.5em 1em 0.5em 1em;
     word-wrap: break-word;
+    white-space: pre-wrap;
 }

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/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;
@@ -82,9 +83,10 @@ limitations under the License.
     -webkit-justify-content: center;
     flex-direction: column;
     -webkit-flex-direction: column;
-    padding-left: 60px;
-    padding-right: 60px;
+    padding-left: 30px;
+    padding-right: 30px;
     min-height: 100%;
+    max-width: 240px;
     color: #fff;
 }
 
@@ -99,6 +101,7 @@ limitations under the License.
 .mx_ImageView_name {
     font-size: 18px;
     margin-bottom: 6px;
+    word-wrap: break-word;
 }
 
 .mx_ImageView_metadata {

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

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

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

@@ -16,8 +16,8 @@ limitations under the License.
 
 .mx_RoomDropTarget {
     font-size: 13px;
-    margin-left: 10px;
-    margin-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/rooms/SearchBar.css

@@ -52,7 +52,7 @@ limitations under the License.
 
 .mx_SearchBar_searching img {
     animation: pulsate 0.5s ease-out;
-    animation-iteration-count: infinite; 
+    animation-iteration-count: infinite;
 }
 
 .mx_SearchBar_button {
@@ -77,7 +77,7 @@ limitations under the License.
     background-color: #fff;
     color: #76CFA6;
     border: #76CFA6 1px solid;
-} 
+}
 
 .mx_SearchBar_cancel {
     padding-left: 14px;

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 {
@@ -60,3 +60,11 @@ limitations under the License.
     cursor: pointer;
     color: #76cfa6;
 }
+
+.mx_UserSettings_devicesTable td {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+.mx_UserSettings_devicesTable_nodevices {
+    font-style: italic;
+}

src/skins/vector/fonts/OpenSans.css

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

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

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

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

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

src/skins/vector/img/icon-context-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>