0.8.1

Prepare changelog for v0.8.1
Pin to released js-sdk & react-sdk
2025-12-09 01:30:57 +00:00 · 2016-09-21 17:30:41 +01:00 · 2016-09-21 17:30:40 +01:00 · 2016-09-21 17:29:44 +01:00 · 2016-09-21 12:03:59 +01:00 · 2016-09-21 12:02:41 +01:00
245 changed files with 9281 additions and 1627 deletions
--- a/.gitignore
+++ b/.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/
--- a/.travis.yml
+++ b/.travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+    - 6   # node v6, to match jenkins
+install:
+    - npm install
+    - (cd node_modules/matrix-react-sdk && npm run build)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,403 @@
+Changes in [0.8.1](https://github.com/vector-im/vector-web/releases/tag/v0.8.1) (2016-09-21)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.8.0...v0.8.1)
+
+
+Changes in [0.8.0](https://github.com/vector-im/vector-web/releases/tag/v0.8.0) (2016-09-21)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r3...v0.8.0)
+
+ * Dbkr/rebrand
+   [\#2285](https://github.com/vector-im/vector-web/pull/2285)
+ * Listen for close_scalar and close the dialog box when received
+   [\#2282](https://github.com/vector-im/vector-web/pull/2282)
+ * Revert "improve lipstick and support scalar logout"
+   [\#2281](https://github.com/vector-im/vector-web/pull/2281)
+ * improve lipstick and support scalar logout
+   [\#2280](https://github.com/vector-im/vector-web/pull/2280)
+ * Fix changelog links
+   [\#2071](https://github.com/vector-im/vector-web/pull/2071)
+ * Paginate Room Directory
+   [\#2241](https://github.com/vector-im/vector-web/pull/2241)
+ * Make redeploy script symlink config
+   [\#2240](https://github.com/vector-im/vector-web/pull/2240)
+ * Update the version of olm to 1.3.0
+   [\#2210](https://github.com/vector-im/vector-web/pull/2210)
+ * Directory network selector
+   [\#2219](https://github.com/vector-im/vector-web/pull/2219)
+ * Wmwragg/two state sublist headers
+   [\#2235](https://github.com/vector-im/vector-web/pull/2235)
+ * Wmwragg/correct incoming call positioning
+   [\#2222](https://github.com/vector-im/vector-web/pull/2222)
+ * Wmwragg/remove old filter
+   [\#2211](https://github.com/vector-im/vector-web/pull/2211)
+ * Wmwragg/multi invite bugfix
+   [\#2198](https://github.com/vector-im/vector-web/pull/2198)
+ * Wmwragg/chat multi invite
+   [\#2181](https://github.com/vector-im/vector-web/pull/2181)
+ * shuffle bottomleftmenu around a bit
+   [\#2182](https://github.com/vector-im/vector-web/pull/2182)
+ * Improve autocomplete behaviour (styling)
+   [\#2175](https://github.com/vector-im/vector-web/pull/2175)
+ * First wave of E2E visuals
+   [\#2163](https://github.com/vector-im/vector-web/pull/2163)
+ * FilePanel and NotificationPanel support
+   [\#2113](https://github.com/vector-im/vector-web/pull/2113)
+ * Cursor: pointer on member info create room button
+   [\#2151](https://github.com/vector-im/vector-web/pull/2151)
+ * Support for adding DM rooms to the MemberInfo Panel
+   [\#2147](https://github.com/vector-im/vector-web/pull/2147)
+ * Wmwragg/one to one indicators
+   [\#2139](https://github.com/vector-im/vector-web/pull/2139)
+ * Added back the Directory listing button, with new tootlip
+   [\#2136](https://github.com/vector-im/vector-web/pull/2136)
+ * wmwragg/chat invite dialog fix
+   [\#2134](https://github.com/vector-im/vector-web/pull/2134)
+ * Wmwragg/one to one chat
+   [\#2110](https://github.com/vector-im/vector-web/pull/2110)
+ * Support toggling DM status of rooms
+   [\#2111](https://github.com/vector-im/vector-web/pull/2111)
+ * Formatting toolbar for RTE message composer.
+   [\#2082](https://github.com/vector-im/vector-web/pull/2082)
+ * jenkins.sh: install olm from jenkins artifacts
+   [\#2092](https://github.com/vector-im/vector-web/pull/2092)
+ * e2e device CSS
+   [\#2085](https://github.com/vector-im/vector-web/pull/2085)
+ * Bump to olm 1.1.0
+   [\#2069](https://github.com/vector-im/vector-web/pull/2069)
+ * Improve readability of the changelog dialog
+   [\#2056](https://github.com/vector-im/vector-web/pull/2056)
+ * Turn react consistency checks back on in develop builds
+   [\#2009](https://github.com/vector-im/vector-web/pull/2009)
+ * Wmwragg/direct chat sublist
+   [\#2028](https://github.com/vector-im/vector-web/pull/2028)
+
+Changes in [0.7.5-r3](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r3) (2016-09-02)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r2...v0.7.5-r3)
+
+ * Bump to matrix-react-sdk 0.6.5-r3 in order to fix bug #2020 (tightloop when flooded with join events)
+
+
+Changes in [0.7.5-r2](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r2) (2016-09-01)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5-r1...v0.7.5-r2)
+
+ * Bump to matrix-react-sdk 0.6.5-r1 in order to fix guest access
+
+Changes in [0.7.5-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.5-r1) (2016-08-28)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.5...v0.7.5-r1)
+
+ * Correctly pin deps :(
+
+Changes in [0.7.5](https://github.com/vector-im/vector-web/releases/tag/v0.7.5) (2016-08-28)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4-r1...v0.7.5)
+
+ * re-add leave button in RoomSettings
+ * add /user URLs
+ * recognise matrix.to links and other vector links
+ * fix linkify dependency
+ * fix avatar clicking in MemberInfo
+ * fix RoomTagContextMenu so it works on historical rooms
+ * warn people to put their Matrix HS on a separate domain to Vector
+ * fix zalgos again
+ * Add .travis.yml
+   [\#2007](https://github.com/vector-im/vector-web/pull/2007)
+ * add fancy changelog dialog
+   [\#1972](https://github.com/vector-im/vector-web/pull/1972)
+ * Update autocomplete design
+   [\#1978](https://github.com/vector-im/vector-web/pull/1978)
+ * Update encryption info in README
+   [\#2001](https://github.com/vector-im/vector-web/pull/2001)
+ * Added event/info message avatars back in
+   [\#2000](https://github.com/vector-im/vector-web/pull/2000)
+ * Wmwragg/chat message presentation
+   [\#1987](https://github.com/vector-im/vector-web/pull/1987)
+ * Make the notification slider work
+   [\#1982](https://github.com/vector-im/vector-web/pull/1982)
+ * Use cpx to copy olm.js, and add watcher
+   [\#1966](https://github.com/vector-im/vector-web/pull/1966)
+ * Make up a device display name
+   [\#1959](https://github.com/vector-im/vector-web/pull/1959)
+
+Changes in [0.7.4-r1](https://github.com/vector-im/vector-web/releases/tag/v0.7.4-r1) (2016-08-12)
+==================================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.4...v0.7.4-r1)
+ * Update to matrix-react-sdk 0.6.4-r1 to fix inviting multiple people
+
+
+Changes in [0.7.4](https://github.com/vector-im/vector-web/releases/tag/v0.7.4) (2016-08-11)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.3...v0.7.4)
+
+ * Don't show border on composer when not in RTE mode
+   [\#1954](https://github.com/vector-im/vector-web/pull/1954)
+ * Wmwragg/room tag menu
+   [\#1941](https://github.com/vector-im/vector-web/pull/1941)
+ * Don't redirect to mobile app if verifying 3pid
+   [\#1951](https://github.com/vector-im/vector-web/pull/1951)
+ * Make sure that we clear localstorage before *all* tests
+   [\#1950](https://github.com/vector-im/vector-web/pull/1950)
+ * Basic CSS for multi-invite dialog
+   [\#1942](https://github.com/vector-im/vector-web/pull/1942)
+ * More tests for the loading process:
+   [\#1947](https://github.com/vector-im/vector-web/pull/1947)
+ * Support for refactored login token handling
+   [\#1946](https://github.com/vector-im/vector-web/pull/1946)
+ * Various fixes and improvements to emojification.
+   [\#1935](https://github.com/vector-im/vector-web/pull/1935)
+ * More app-loading tests
+   [\#1938](https://github.com/vector-im/vector-web/pull/1938)
+ * Some tests of the application load process
+   [\#1936](https://github.com/vector-im/vector-web/pull/1936)
+ * Add 'enable labs' setting to sample config
+   [\#1930](https://github.com/vector-im/vector-web/pull/1930)
+ * Matthew/scalar
+   [\#1928](https://github.com/vector-im/vector-web/pull/1928)
+ * Fix unit tests
+   [\#1929](https://github.com/vector-im/vector-web/pull/1929)
+ * Wmwragg/mute mention state fix
+   [\#1926](https://github.com/vector-im/vector-web/pull/1926)
+ * CSS for deactivate account dialog
+   [\#1919](https://github.com/vector-im/vector-web/pull/1919)
+ * Wmwragg/mention state menu
+   [\#1900](https://github.com/vector-im/vector-web/pull/1900)
+ * Fix UnknownBody styling for #1901
+   [\#1913](https://github.com/vector-im/vector-web/pull/1913)
+ * Exclude olm from the webpack
+   [\#1914](https://github.com/vector-im/vector-web/pull/1914)
+ * Wmwragg/button updates
+   [\#1912](https://github.com/vector-im/vector-web/pull/1912)
+ * Wmwragg/button updates
+   [\#1828](https://github.com/vector-im/vector-web/pull/1828)
+ * CSS for device management UI
+   [\#1909](https://github.com/vector-im/vector-web/pull/1909)
+ * Fix a warning from RoomSubList
+   [\#1908](https://github.com/vector-im/vector-web/pull/1908)
+ * Fix notifications warning layout
+   [\#1907](https://github.com/vector-im/vector-web/pull/1907)
+ * Remove relayoutOnUpdate prop on gemini-scrollbar
+   [\#1883](https://github.com/vector-im/vector-web/pull/1883)
+ * Bump dependency versions
+   [\#1842](https://github.com/vector-im/vector-web/pull/1842)
+ * Wmwragg/mention state indicator round 2
+   [\#1835](https://github.com/vector-im/vector-web/pull/1835)
+ * Wmwragg/spinner fix
+   [\#1822](https://github.com/vector-im/vector-web/pull/1822)
+ * Wmwragg/mention state indicator
+   [\#1823](https://github.com/vector-im/vector-web/pull/1823)
+ * Revert "Presentation for inline link"
+   [\#1809](https://github.com/vector-im/vector-web/pull/1809)
+ * Wmwragg/modal restyle
+   [\#1806](https://github.com/vector-im/vector-web/pull/1806)
+ * Presentation for inline link
+   [\#1799](https://github.com/vector-im/vector-web/pull/1799)
+ * CSS for offline user colours
+   [\#1798](https://github.com/vector-im/vector-web/pull/1798)
+ * Wmwragg/typography updates
+   [\#1776](https://github.com/vector-im/vector-web/pull/1776)
+ * webpack: always use the olm from vector-web
+   [\#1766](https://github.com/vector-im/vector-web/pull/1766)
+ * feat: large emoji support
+   [\#1718](https://github.com/vector-im/vector-web/pull/1718)
+ * Autocomplete
+   [\#1717](https://github.com/vector-im/vector-web/pull/1717)
+ * #1664 Set a maximum height for codeblocks
+   [\#1670](https://github.com/vector-im/vector-web/pull/1670)
+ * CSS for device blocking
+   [\#1688](https://github.com/vector-im/vector-web/pull/1688)
+ * Fix joining rooms by typing the alias
+   [\#1685](https://github.com/vector-im/vector-web/pull/1685)
+ * Add ability to delete an alias from room directory
+   [\#1680](https://github.com/vector-im/vector-web/pull/1680)
+ * package.json: add olm as optionalDependency
+   [\#1678](https://github.com/vector-im/vector-web/pull/1678)
+ * Another go at enabling olm on vector.im/develop
+   [\#1675](https://github.com/vector-im/vector-web/pull/1675)
+ * CSS for unverify button
+   [\#1661](https://github.com/vector-im/vector-web/pull/1661)
+ * CSS fix for rooms with crypto enabled
+   [\#1660](https://github.com/vector-im/vector-web/pull/1660)
+ * Karma: fix warning by ignoring olm
+   [\#1652](https://github.com/vector-im/vector-web/pull/1652)
+ * Update for react-sdk dbkr/fix_peeking branch
+   [\#1639](https://github.com/vector-im/vector-web/pull/1639)
+ * Update README.md
+   [\#1641](https://github.com/vector-im/vector-web/pull/1641)
+ * Fix karma tests
+   [\#1643](https://github.com/vector-im/vector-web/pull/1643)
+ * Rich Text Editor
+   [\#1553](https://github.com/vector-im/vector-web/pull/1553)
+ * Fix RoomDirectory to join by alias whenever possible.
+   [\#1615](https://github.com/vector-im/vector-web/pull/1615)
+ * Make the config optional
+   [\#1612](https://github.com/vector-im/vector-web/pull/1612)
+ * CSS support for device verification
+   [\#1610](https://github.com/vector-im/vector-web/pull/1610)
+ * Don't use SdkConfig
+   [\#1609](https://github.com/vector-im/vector-web/pull/1609)
+ * serve config.json statically instead of bundling it
+   [\#1516](https://github.com/vector-im/vector-web/pull/1516)
+
+Changes in [0.7.3](https://github.com/vector-im/vector-web/releases/tag/v0.7.3) (2016-06-03)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.2...v0.7.3)
+
+* Update to react-sdk 0.6.3
+
+Changes in [0.7.2](https://github.com/vector-im/vector-web/releases/tag/v0.7.2) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.1...v0.7.2)
+
+ * Correctly bump the dep on new matrix-js-sdk and matrix-react-sdk
+
+Changes in [0.7.1](https://github.com/vector-im/vector-web/releases/tag/v0.7.1) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.7.0...v0.7.1)
+
+ * Fix accidentally committed local changes to the default config.json (doh!)
+
+Changes in [0.7.0](https://github.com/vector-im/vector-web/releases/tag/v0.7.0) (2016-06-02)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.1...v0.7.0)
+
+ * Update to matrix-react-sdk 0.6.0 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.6.0/CHANGELOG.md)
+ * Style selection color.
+   [\#1557](https://github.com/vector-im/vector-web/pull/1557)
+ * Fix NPE when loading the Settings page which infini-spinnered
+   [\#1518](https://github.com/vector-im/vector-web/pull/1518)
+ * Add option to enable email notifications
+   [\#1469](https://github.com/vector-im/vector-web/pull/1469)
+
+Changes in [0.6.1](https://github.com/vector-im/vector-web/releases/tag/v0.6.1) (2016-04-22)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.6.0...v0.6.1)
+
+ * Update to matrix-react-sdk 0.5.2 - see
+   [changelog](https://github.com/matrix-org/matrix-react-sdk/blob/v0.5.2/CHANGELOG.md)
+ * Don't relayout scrollpanels every time something changes
+   [\#1438](https://github.com/vector-im/vector-web/pull/1438)
+ * Include react-addons-perf for non-production builds
+   [\#1431](https://github.com/vector-im/vector-web/pull/1431)
+
+Changes in [0.6.0](https://github.com/vector-im/vector-web/releases/tag/v0.6.0) (2016-04-19)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/vector-web/compare/v0.5.0...v0.6.0)
+
+ * 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
--- a/CHANGES.rst
+++ b/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
--- a/README.md
+++ b/README.md
@@ -3,61 +3,137 @@ Vector/Web

 Vector is a Matrix web client built using the Matrix React SDK (https://github.com/matrix-org/matrix-react-sdk).

-Getting started
+Getting Started
 ===============

+The easiest way to test Vector is to just use the hosted copy at https://vector.im/beta.
+The develop branch is continuously deployed by Jenkins at https://vector.im/develop for
+those who like living dangerously.
+
+To host your own copy of Vector, the quickest bet is to use a pre-built released version
+of Vector:
+
+1. Download the latest version from https://vector.im/packages/
+1. Untar the tarball on your web server
+1. Move (or symlink) the vector-x.x.x directory to an appropriate name
+1. If desired, copy `config.sample.json` to `config.json` and edit it
+   as desired. See below for details.
+1. Enter the URL into your browser and log into vector!
+
+Important Security Note
+=======================
+
+We do not recommend running Vector from the same domain name as your Matrix
+homeserver.  The reason is the risk of XSS (cross-site-scripting) vulnerabilities
+that could occur if someone caused Vector to load and render malicious user generated
+content from a Matrix API which then had trusted access to Vector (or other apps) due
+to sharing the same domain.
+
+We have put some coarse mitigations into place to try to protect against this situation,
+but it's still not good practice to do it in the first place.
+See https://github.com/vector-im/vector-web/issues/1977 for more details.
+
+Building From Source
+====================
+
+Vector is a modular webapp built with modern ES6 and requires a npm build system to build.
+
 1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 
+1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git`
 1. Switch to the vector directory: `cd vector-web`
 1. Install the prerequisites: `npm install`
-1. 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.
+Get a tarball from https://vector.im/packages or build your own - see Building From Source
+above).
+
+There's also a (much) older electron distribution at https://github.com/stevenhammerton/vector-desktop

-The package script is not supported on Windows, so Windows users can run `npm
-run build`, which will build all the necessary files into the `vector`
-directory. Note that the version of Vector will not appear in Settings without
-using the package script. You can then mount the vector directory on your
-webserver to actually serve up the app, which is entirely static content.

 Development
 ===========

-For simple tweaks, you can work on any of the source files within Vector with the
-setup above, and your changes will cause an instant rebuild.
+Before attempting to develop on Vector you **must** read the developer guide
+for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which
+also defines the design, architecture and style for Vector too.

-However, 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 +176,53 @@ Finally, build and start vector itself:
        + 1013 hidden modules
    ```
   Remember, the command will not terminate since it runs the web server
-   and rebuilds source files when they change.
+   and rebuilds source files when they change. This development server also
+   disables caching, so do NOT use it in production.
 1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector.

-When you make changes to `matrix-js-sdk` or `matrix-react-sdk`, you will need
-to run `npm run build` in the relevant directory. You can do this automatically
-by instead running `npm start` in each directory, to start a development
-builder which will watch for changes to the files and rebuild automatically.
+When you make changes to `matrix-react-sdk`, you will need to run `npm run
+build` in the relevant directory. You can do this automatically by instead
+running `npm start` in the directory, to start a development builder which
+will watch for changes to the files and rebuild automatically.

 If you add or remove any components from the Vector skin, you will need to rebuild
 the skin's index by running, `npm run reskindex`.

+If any of these steps error with, `file table overflow`, you are probably on a mac
+which has a very low limit on max open files. Run `ulimit -Sn 1024` and try again.
+You'll need to do this in each new terminal you open before building vector.
+
+Filing issues
+=============
+
+All issues for Vector-web and Matrix-react-sdk should be filed at
+https://github.com/matrix-org/matrix-react-sdk/issues
+
+Triaging issues
+===============
+
+Issues will be triaged by the core team using the following primary set of tags:
+
+priority:
+    P1: top priority; typically blocks releases.
+    P2: one below that
+    P3: non-urgent
+    P4/P5: bluesky some day, who knows.
+
+bug or feature:
+  bug severity:
+     * cosmetic - feature works functionally but UI/UX is broken.
+     * critical - whole app doesn't work
+     * major - entire feature doesn't work
+     * minor - partially broken feature (but still usable)
+
+     * release blocker
+
+     * ui/ux (think of this as cosmetic)
+
+     * network (specific to network conditions)
+     * platform (platform specific)
+
 Enabling encryption
 ===================

@@ -119,23 +231,14 @@ day-to-day use; it is experimental and should be considered only as a
 proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview
 of the current progress.

-To build a version of vector with support for end-to-end encryption, install
-the olm module with `npm i https://matrix.org/packages/npm/olm/olm-0.1.0.tgz`
-before running `npm start`. The olm library will be detected and used if
-available.
-
-To enable encryption for a room, type
-
-```
-/encrypt on
-```
-
-in the message bar in that room. Vector will then generate a set of keys, and
-encrypt all outgoing messages in that room. (Note that other people in that
-room will send messages in the clear unless they also `/encrypt on`.)
+To enable the (very experimental) support, check the 'End-to-End Encryption'
+box in the 'Labs' section of the user settings (note that the labs are disabled
+on http://vector.im/beta: you will need to use http://vector.im/develop or your
+own deployment of vector). The Room Settings dialog will then show an
+'Encryption' setting; rooms for which you are an administrator will offer you
+the option of enabling encryption. Any messages sent in that room will then be
+encrypted.

 Note that historical encrypted messages cannot currently be decoded - history
 is therefore lost when the page is reloaded.

-There is currently no visual indication of whether encryption is enabled for a
-room, or whether a particular message was encrypted.
--- a/config.json
+++ b/config.json
@@ -1,4 +0,0 @@
-{
-    "default_hs_url": "https://matrix.org",
-    "default_is_url": "https://vector.im"
-}
--- a/deploy/redeploy.py
+++ b/deploy/redeploy.py
@@ -5,8 +5,8 @@ from urlparse import urljoin
 from flask import Flask, jsonify, request, abort
 app = Flask(__name__)

-arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink = (
-    None, None, None, None
+arg_jenkins_url, arg_extract_path, arg_should_clean, arg_symlink, arg_config_location = (
+    None, None, None, None, None
 )

 def download_file(url):
@@ -122,6 +122,9 @@ def on_receive_jenkins_poke():

    create_symlink(source=os.path.join(untar_location, "vector"), linkname=arg_symlink)

+    if arg_config_location:
+        create_symlink(source=arg_config_location, linkname=os.path.join(untar_location, "vector", 'config.json'))
+
    return jsonify({})

 if __name__ == "__main__":
@@ -154,6 +157,12 @@ if __name__ == "__main__":
            to the /vector directory INSIDE the tarball."
        )
    )
+    parser.add_argument(
+        "--config", dest="config", help=(
+            "Write a symlink to config.json in the extracted tarball. \
+            To this location."
+        )
+    )
    args = parser.parse_args()
    if args.jenkins.endswith("/"): # important for urljoin
        arg_jenkins_url = args.jenkins
@@ -162,9 +171,10 @@ if __name__ == "__main__":
    arg_extract_path = args.extract
    arg_should_clean = args.clean
    arg_symlink = args.symlink
+    arg_config_location = args.config
    print(
-        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s" %
+        "Listening on port %s. Extracting to %s%s. Symlinking to %s. Jenkins URL: %s. Config location: %s" %
        (args.port, arg_extract_path,
-            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url)
+            " (clean after)" if arg_should_clean else "", arg_symlink, arg_jenkins_url, arg_config_location)
    )
    app.run(host="0.0.0.0", port=args.port, debug=True)
--- a/jenkins.sh
+++ b/jenkins.sh
@@ -4,24 +4,39 @@ set -e

 export NVM_DIR="/home/jenkins/.nvm"
 [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
-nvm use 4
+nvm use 6

 set -x

-# 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

+# apparently npm 3.10.3 on node 6.4.0 doesn't upgrade #develop target with npm install unless explicitly asked.
+npm install matrix-react-sdk matrix-js-sdk
+
+# install olm. A naive 'npm i ./olm/olm-*.tgz' fails because it uses the url
+# from our package.json (or even matrix-js-sdk's) in preference.
+tar -C olm -xz < olm/olm-*.tgz
+rm -r node_modules/olm
+cp -r olm/package node_modules/olm
+
+# we may be using a dev branch of react-sdk, in which case we need to build it
+(cd node_modules/matrix-react-sdk && npm run build)
+
+# 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)
--- a/karma.conf.js
+++ b/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',
+        },
+    });
+};
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vector-web",
-  "version": "0.3.0",
+  "version": "0.8.1",
  "description": "Vector webapp",
  "author": "matrix.org",
  "repository": {
@@ -12,53 +12,84 @@
  "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": "webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js",
+    "build:staticfiles": "cpx -v node_modules/olm/olm.js vector/",
+    "build": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle",
+    "build:dev": "npm run build:staticfiles && npm run build:emojione && npm run build:css && npm run build:compile && npm run build:bundle:dev",
    "package": "scripts/package.sh",
+    "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
    "start:js": "webpack -w src/vector/index.js vector/bundle.js",
    "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js",
    "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css",
+    "start:staticfiles": "cpx -Lwv node_modules/olm/olm.js vector/",
    "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270",
-    "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
-    "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*",
-    "prepublish": "npm run build:css && npm run build:compile"
+    "start": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "start:prod": "parallelshell \"npm run start:staticfiles\" \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
+    "clean": "rimraf lib vector/olm.js vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css* vector/emojione",
+    "prepublish": "npm run build:css && npm run build:compile",
+    "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
+    "test:multi": "karma start"
  },
  "dependencies": {
    "babel-polyfill": "^6.5.0",
+    "browser-request": "^0.3.3",
    "classnames": "^2.1.2",
+    "draft-js": "^0.8.1",
    "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",
+    "linkifyjs": "2.0.0-beta.4",
+    "matrix-js-sdk": "0.6.1",
+    "matrix-react-sdk": "0.7.2",
    "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",
-    "sanitize-html": "^1.11.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",
+    "ua-parser-js": "^0.7.10",
+    "url": "^0.11.0"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-core": "^5.8.25",
    "babel-loader": "^5.3.2",
    "catw": "^1.0.1",
+    "cpx": "^1.3.2",
    "css-raw-loader": "^0.1.1",
+    "emojione": "^2.2.3",
+    "expect": "^1.16.0",
+    "fs-extra": "^0.30.0",
    "http-server": "^0.8.4",
    "json-loader": "^0.5.3",
+    "karma": "^0.13.22",
+    "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.3.0.tgz"
  }
 }
--- a/release.sh
+++ b/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 "$@"
--- a/scripts/issues-burndown.pl
+++ b/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";
+}
+
--- a/scripts/issues-no-state.pl
+++ b/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";
+}
+
--- a/src/VectorConferenceHandler.js
+++ b/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;
    });
 };
--- a/src/component-index.js
+++ b/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,13 @@ 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.dialogs.ChangelogDialog'] = require('./components/views/dialogs/ChangelogDialog');
+module.exports.components['views.directory.NetworkDropdown'] = require('./components/views/directory/NetworkDropdown');
 module.exports.components['views.elements.ImageView'] = require('./components/views/elements/ImageView');
 module.exports.components['views.elements.Spinner'] = require('./components/views/elements/Spinner');
 module.exports.components['views.globals.GuestWarningBar'] = require('./components/views/globals/GuestWarningBar');
@@ -40,11 +49,9 @@ 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.DNDRoomTile'] = require('./components/views/rooms/DNDRoomTile');
 module.exports.components['views.rooms.RoomDropTarget'] = require('./components/views/rooms/RoomDropTarget');
 module.exports.components['views.rooms.RoomTooltip'] = require('./components/views/rooms/RoomTooltip');
 module.exports.components['views.rooms.SearchBar'] = require('./components/views/rooms/SearchBar');
+module.exports.components['views.settings.IntegrationsManager'] = require('./components/views/settings/IntegrationsManager');
 module.exports.components['views.settings.Notifications'] = require('./components/views/settings/Notifications');
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -17,42 +17,106 @@ limitations under the License.
 'use strict';

 var React = require('react');
+var ReactDOM = require('react-dom');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');

 module.exports = React.createClass({
    displayName: 'BottomLeftMenu',

+    propTypes: {
+        collapsed: React.PropTypes.bool.isRequired,
+    },
+
+    getInitialState: function() {
+        return({
+            directoryHover : false,
+            roomsHover : false,
+            peopleHover : false,
+            settingsHover : false,
+        });
+    },
+
+    // Room events
+    onDirectoryClick: function() {
+        dis.dispatch({ action: 'view_room_directory' });
+    },
+
+    onDirectoryMouseEnter: function() {
+        this.setState({ directoryHover: true });
+    },
+
+    onDirectoryMouseLeave: function() {
+        this.setState({ directoryHover: false });
+    },
+
+    onRoomsClick: function() {
+        dis.dispatch({ action: 'view_create_room' });
+    },
+
+    onRoomsMouseEnter: function() {
+        this.setState({ roomsHover: true });
+    },
+
+    onRoomsMouseLeave: function() {
+        this.setState({ roomsHover: false });
+    },
+
+    // People events
+    onPeopleClick: function() {
+        dis.dispatch({ action: 'view_create_chat' });
+    },
+
+    onPeopleMouseEnter: function() {
+        this.setState({ peopleHover: true });
+    },
+
+    onPeopleMouseLeave: function() {
+        this.setState({ peopleHover: false });
+    },
+
+    // Settings events
    onSettingsClick: function() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.dispatch({ action: 'view_user_settings' });
    },

-    onRoomDirectoryClick: function() {
-        dis.dispatch({action: 'view_room_directory'});
+    onSettingsMouseEnter: function() {
+        this.setState({ settingsHover: true });
    },

-    onCreateRoomClick: function() {
-        dis.dispatch({action: 'view_create_room'});
+    onSettingsMouseLeave: function() {
+        this.setState({ settingsHover: false });
    },

-    getLabel: function(name) {
-        if (!this.props.collapsed) {
-            return <div className="mx_RoomTile_name">{name}</div>
-        }
-        else if (this.state.hover) {
+    // Get the label/tooltip to show
+    getLabel: function(label, show) {
+        if (show) {
            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            return <RoomTooltip name={name}/>;
+            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
        }
    },

    render: function() {
-        var BottomLeftMenuTile = sdk.getComponent('rooms.BottomLeftMenuTile');
+        var TintableSvg = sdk.getComponent('elements.TintableSvg');
        return (
            <div className="mx_BottomLeftMenu">
                <div className="mx_BottomLeftMenu_options">
-                    <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_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
+                        <TintableSvg src="img/icons-people.svg" width="25" height="25" />
+                        { this.getLabel("Start chat", this.state.peopleHover) }
+                    </div>
+                    <div className="mx_BottomLeftMenu_directory" onClick={ this.onDirectoryClick } onMouseEnter={ this.onDirectoryMouseEnter } onMouseLeave={ this.onDirectoryMouseLeave } >
+                        <TintableSvg src="img/icons-directory.svg" width="25" height="25"/>
+                        { this.getLabel("Room directory", this.state.directoryHover) }
+                    </div>
+                    <div className="mx_BottomLeftMenu_createRoom" onClick={ this.onRoomsClick } onMouseEnter={ this.onRoomsMouseEnter } onMouseLeave={ this.onRoomsMouseLeave } >
+                        <TintableSvg src="img/icons-create-room.svg" width="25" height="25" />
+                        { this.getLabel("Create new room", this.state.roomsHover) }
+                    </div>
+                    <div className="mx_BottomLeftMenu_settings" onClick={ this.onSettingsClick } onMouseEnter={ this.onSettingsMouseEnter } onMouseLeave={ this.onSettingsMouseLeave } >
+                        <TintableSvg src="img/icons-settings.svg" width="25" height="25" />
+                        { this.getLabel("Settings", this.state.settingsHover) }
+                    </div>
                </div>
            </div>
        );
--- a/src/components/structures/CompatibilityPage.js
+++ b/src/components/structures/CompatibilityPage.js
@@ -39,14 +39,14 @@ module.exports = React.createClass({
        return (
        <div className="mx_CompatibilityPage">
            <div className="mx_CompatibilityPage_box">
-                <p>Sorry, your browser is <b>not</b> able to run Vector.</p>
+                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
                <p>
-                Vector uses many advanced browser features, some of which are not
+                Riot uses many advanced browser features, some of which are not
                available or experimental in your current browser.
                </p>
                <p>
-                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>
--- a/src/components/structures/LeftPanel.js
+++ b/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;
@@ -103,18 +109,20 @@ var LeftPanel = React.createClass({
            var CallView = sdk.getComponent('voip.CallView');
            callPreview = (
                <CallView
-                    className="mx_LeftPanel_callView" onClick={this.onCallViewClick}
+                    className="mx_LeftPanel_callView" showVoice={true} onClick={this.onCallViewClick}
                    ConferenceHandler={VectorConferenceHandler} />
            );
        }

        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>
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -17,17 +17,26 @@ limitations under the License.
 'use strict';

 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+var Matrix = require("matrix-js-sdk");
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var MatrixClientPeg = require("matrix-react-sdk/lib/MatrixClientPeg");
 var rate_limited_func = require('matrix-react-sdk/lib/ratelimitedfunc');
+var Modal = require('matrix-react-sdk/lib/Modal');

 module.exports = React.createClass({
    displayName: 'RightPanel',

+    propTypes: {
+        userId: React.PropTypes.string, // if showing an orphaned MemberInfo page, this is set
+        roomId: React.PropTypes.string, // if showing panels for a given room, this is set
+        collapsed: React.PropTypes.bool, // currently unused property to request for a minimized view of the panel
+    },
+
    Phase : {
        MemberList: 'MemberList',
-        FileList: 'FileList',
+        FilePanel: 'FilePanel',
+        NotificationPanel: 'NotificationPanel',
        MemberInfo: 'MemberInfo',
    },

@@ -38,20 +47,29 @@ module.exports = React.createClass({
    },

    componentWillUnmount: function() {
-        dis.unregister(this.dispatcherRef);        
+        dis.unregister(this.dispatcherRef);
        if (MatrixClientPeg.get()) {
            MatrixClientPeg.get().removeListener("RoomState.members", this.onRoomStateMember);
        }
    },

    getInitialState: function() {
-        return {
-            phase : this.Phase.MemberList
+        if (this.props.userId) {
+            var member = new Matrix.RoomMember(null, this.props.userId);
+            return {
+                phase: this.Phase.MemberInfo,
+                member: member,
+            }
+        }
+        else {
+            return {
+                phase: this.Phase.MemberList
+            }
        }
    },

    onMemberListButtonClick: function() {
-        if (this.props.collapsed) {
+        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
            this.setState({ phase: this.Phase.MemberList });
            dis.dispatch({
                action: 'show_right_panel',
@@ -64,6 +82,51 @@ module.exports = React.createClass({
        }
    },

+    onFileListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.FilePanel) {
+            this.setState({ phase: this.Phase.FilePanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
+    onNotificationListButtonClick: function() {
+        if (this.props.collapsed || this.state.phase !== this.Phase.NotificationPanel) {
+            this.setState({ phase: this.Phase.NotificationPanel });
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
+        else {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        }
+    },
+
+    onInviteButtonClick: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
+            Modal.createDialog(NeedToRegisterDialog, {
+                title: "Please Register",
+                description: "Guest users can't invite users. Please register to invite."
+            });
+            return;
+        }
+
+        // call ChatInviteDialog
+        dis.dispatch({
+            action: 'view_invite',
+            roomId: this.props.roomId,
+        });
+    },
+
    onRoomStateMember: function(ev, state, member) {
        // redraw the badge on the membership list
        if (this.state.phase == this.Phase.MemberList && member.roomId === this.props.roomId) {
@@ -82,6 +145,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,
@@ -94,7 +160,7 @@ module.exports = React.createClass({
                });
            }
        }
-        if (payload.action === "view_room") {
+        else if (payload.action === "view_room") {
            if (this.state.phase === this.Phase.MemberInfo) {
                this.setState({
                    phase: this.Phase.MemberList
@@ -105,67 +171,107 @@ module.exports = React.createClass({

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

        var filesHighlight;
        var membersHighlight;
+        var notificationsHighlight;
        if (!this.props.collapsed) {
            if (this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) {
                membersHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
            }
-            else if (this.state.phase == this.Phase.FileList) {
+            else if (this.state.phase == this.Phase.FilePanel) {
                filesHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
            }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                notificationsHighlight = <div className="mx_RightPanel_headerButton_highlight"></div>;
+            }
        }

        var membersBadge;
        if ((this.state.phase == this.Phase.MemberList || this.state.phase === this.Phase.MemberInfo) && this.props.roomId) {
            var cli = MatrixClientPeg.get();
            var room = cli.getRoom(this.props.roomId);
+            var user_is_in_room;
            if (room) {
-                membersBadge = <div className="mx_RightPanel_headerButton_badge">{ room.getJoinedMembers().length }</div>;
+                membersBadge = room.getJoinedMembers().length;
+                user_is_in_room = room.hasMembershipState(
+                    MatrixClientPeg.get().credentials.userId, 'join'
+                );
            }
+
+            if (user_is_in_room) {
+                inviteGroup =
+                    <div className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                        <div className="mx_RightPanel_icon" >
+                            <TintableSvg src="img/icon-invite-people.svg" width="35" height="35" />
+                        </div>
+                        <div className="mx_RightPanel_message">Invite to this room</div>
+                    </div>;
+            }
+
        }

        if (this.props.roomId) {
            buttonGroup =
                    <div className="mx_RightPanel_headerButtonGroup">
                        <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
-                            <TintableSvg src="img/members.svg" width="17" height="22"/>
-                            { membersBadge }
+                            <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
+                            <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                            { membersHighlight }
                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files">
-                            <TintableSvg src="img/files.svg" width="17" height="22"/>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
                            { filesHighlight }
                        </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
+                            <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
+                            <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
+                            { notificationsHighlight }
+                        </div>
                    </div>;
-
-            if (!this.props.collapsed) {
-                if(this.state.phase == this.Phase.MemberList) {
-                    panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
-                }
-                else if(this.state.phase == this.Phase.MemberInfo) {
-                    var MemberInfo = sdk.getComponent('rooms.MemberInfo');
-                    panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId} />
-                }
-            }
-
        }

-        var classes = "mx_RightPanel";
+        if (!this.props.collapsed) {
+            if(this.props.roomId && this.state.phase == this.Phase.MemberList) {
+                panel = <MemberList roomId={this.props.roomId} key={this.props.roomId} />
+            }
+            else if(this.state.phase == this.Phase.MemberInfo) {
+                var MemberInfo = sdk.getComponent('rooms.MemberInfo');
+                panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.props.userId} />
+            }
+            else if (this.state.phase == this.Phase.NotificationPanel) {
+                panel = <NotificationPanel />
+            }
+            else if (this.state.phase == this.Phase.FilePanel) {
+                panel = <FilePanel roomId={this.props.roomId} />
+            }
+        }
+
+        if (!panel) {
+            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">
+                    { inviteGroup }
+                </div>
            </aside>
        );
    }
--- a/src/components/structures/RoomDirectory.js
+++ b/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');

@@ -29,88 +29,274 @@ var linkify = require('linkifyjs');
 var linkifyString = require('linkifyjs/string');
 var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
 var sanitizeHtml = require('sanitize-html');
+var q = require('q');

 linkifyMatrix(linkify);

 module.exports = React.createClass({
    displayName: 'RoomDirectory',

+    propTypes: {
+        config: React.PropTypes.object,
+    },
+
+    getDefaultProps: function() {
+        return {
+            config: {
+                networks: [],
+            },
+        }
+    },
+
    getInitialState: function() {
        return {
            publicRooms: [],
-            roomAlias: '',
            loading: true,
+            filterByNetwork: null,
        }
    },

+    componentWillMount: function() {
+        // precompile Regexps
+        this.networkPatterns = {};
+        if (this.props.config.networkPatterns) {
+            for (const network of Object.keys(this.props.config.networkPatterns)) {
+                this.networkPatterns[network] = new RegExp(this.props.config.networkPatterns[network]);
+            }
+        }
+        this.nextBatch = null;
+        this.filterString = null;
+        this.filterTimeout = null;
+        this.scrollPanel = null;
+
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 0.3,
+        //     middleOpacity: 0.3,
+        // });
+    },
+
    componentDidMount: function() {
-        var self = this;
-        MatrixClientPeg.get().publicRooms(function (err, data) {
-            if (err) {
-                self.setState({ loading: false });                
-                console.error("Failed to get publicRooms: %s", JSON.stringify(err));
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failed to get public room list",
-                    description: err.message
-                });
+        this.refreshRoomList();
+    },
+
+    componentWillUnmount: function() {
+        // dis.dispatch({
+        //     action: 'ui_opacity',
+        //     sideOpacity: 1.0,
+        //     middleOpacity: 1.0,
+        // });
+    },
+
+    refreshRoomList: function() {
+        this.nextBatch = null;
+        this.setState({
+            publicRooms: [],
+            loading: true,
+        });
+        this.getMoreRooms().done();
+    },
+
+    getMoreRooms: function() {
+        const my_filter_string = this.filterString;
+        const opts = {limit: 20};
+        if (this.nextBatch) opts.since = this.nextBatch;
+        if (this.filterString) opts.filter = { generic_search_term: my_filter_string } ;
+        return MatrixClientPeg.get().publicRooms(opts).then((data) => {
+            if (my_filter_string != this.filterString) {
+                // if the filter has changed since this request was sent,
+                // throw away the result (don't even clear the busy flag
+                // since we must still have a request in flight)
+                return;
            }
-            else {
-                self.setState({
-                    publicRooms: data.chunk,
-                    loading: false,
+
+            this.nextBatch = data.next_batch;
+            this.setState((s) => {
+                s.publicRooms.push(...data.chunk);
+                s.loading = false;
+                return s;
+            });
+            return Boolean(data.next_batch);
+        }, (err) => {
+            if (my_filter_string != this.filterString) {
+                // as above: we don't care about errors for old
+                // requests either
+                return;
+            }
+            this.setState({ loading: false });
+            console.error("Failed to get publicRooms: %s", JSON.stringify(err));
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Failed to get public room list",
+                description: err.message
+            });
+        });
+    },
+
+    /**
+     * A limited interface for removing rooms from the directory.
+     * Will set the room to not be publicly visible and delete the
+     * default alias. In the long term, it would be better to allow
+     * HS admins to do this through the RoomSettings interface, but
+     * this needs SPEC-417.
+     */
+    removeFromDirectory: function(room) {
+        var alias = get_display_alias_for_room(room);
+        var name = room.name || alias || "Unnamed room";
+
+        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+        var desc;
+        if (alias) {
+            desc = `Delete the room alias '${alias}' and remove '${name}' from the directory?`;
+        } else {
+            desc = `Remove '${name}' from the directory?`;
+        }
+
+        Modal.createDialog(QuestionDialog, {
+            title: "Remove from Directory",
+            description: desc,
+            onFinished: (should_delete) => {
+                if (!should_delete) return;
+
+                var Loader = sdk.getComponent("elements.Spinner");
+                var modal = Modal.createDialog(Loader);
+                var step = `remove '${name}' from the directory.`;
+
+                MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
+                    if (!alias) return;
+                    step = 'delete the alias.';
+                    return MatrixClientPeg.get().deleteAlias(alias);
+                }).done(() => {
+                    modal.close();
+                    this.refreshRoomList();
+                }, function(err) {
+                    modal.close();
+                    this.refreshRoomList();
+                    Modal.createDialog(ErrorDialog, {
+                        title: "Failed to "+step,
+                        description: err.toString()
+                    });
                });
-                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;
-            }
+    onRoomClicked: function(room, ev) {
+        if (ev.shiftKey) {
+            ev.preventDefault();
+            this.removeFromDirectory(room);
+        } else {
+            this.showRoom(room);
        }
-        var oob_data = {};
+    },
+
+    onNetworkChange: function(network) {
+        this.setState({
+            filterByNetwork: network,
+        }, () => {
+            // we just filtered out a bunch of rooms, so check to see if
+            // we need to fill up the scrollpanel again
+            // NB. Because we filter the results, the HS can keep giving
+            // us more rooms and we'll keep requesting more if none match
+            // the filter, which is pretty terrible. We need a way
+            // to filter by network on the server.
+            if (this.scrollPanel) this.scrollPanel.checkFillState();
+        });
+    },
+
+    onFillRequest: function(backwards) {
+        if (backwards || !this.nextBatch) return q(false);
+
+        return this.getMoreRooms();
+    },
+
+    onFilterChange: function(ev) {
+        const alias = ev.target.value;
+
+        this.filterString = alias || null;
+
+        // don't send the request for a little bit,
+        // no point hammering the server with a
+        // request for every keystroke, let the
+        // user finish typing.
+        if (this.filterTimeout) {
+            clearTimeout(this.filterTimeout);
+        }
+        this.filterTimeout = setTimeout(() => {
+            this.filterTimeout = null;
+            this.refreshRoomList();
+        }, 300);
+    },
+
+    onFilterKeyUp: function(ev) {
+        if (ev.key == "Enter") {
+            this.showRoomAlias(ev.target.value);
+        }
+    },
+
+    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) {
+    getRows: function() {
        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');

        if (!this.state.publicRooms) return [];

-        var rooms = this.state.publicRooms.filter(function(a) {
-            // FIXME: if incrementally typing, keep narrowing down the search set
-            // incrementally rather than starting over each time.
-            return (a.aliases[0].toLowerCase().search(filter.toLowerCase()) >= 0 && a.num_joined_members > 0);
-        }).sort(function(a,b) {
-            return a.num_joined_members - b.num_joined_members;
+        var rooms = this.state.publicRooms.filter((a) => {
+            if (this.state.filterByNetwork) {
+                if (!this._isRoomInNetwork(a, this.state.filterByNetwork)) return false;
+            }
+
+            return true;
        });
        var rows = [];
        var self = this;
        var guestRead, guestJoin, perms;
        for (var i = 0; i < rooms.length; i++) {
-            var name = rooms[i].name || rooms[i].aliases[0];
+            var name = rooms[i].name || get_display_alias_for_room(rooms[i]) || "Unnamed room";
            guestRead = null;
            guestJoin = null;

@@ -124,7 +310,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>;
@@ -133,8 +319,12 @@ module.exports = React.createClass({
            var topic = rooms[i].topic || '';
            topic = linkifyString(sanitizeHtml(topic));

-            rows.unshift(
-                <tr key={ rooms[i].room_id } onClick={self.showRoom.bind(null, rooms[i].room_id)}>
+            rows.push(
+                <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 +338,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 }
@@ -159,40 +349,69 @@ module.exports = React.createClass({
        return rows;
    },

-    onKeyUp: function(ev) {
-        this.forceUpdate();
-        this.setState({ roomAlias : this.refs.roomAlias.value })
-        if (ev.key == "Enter") {
-            this.showRoom(this.refs.roomAlias.value);
+    collectScrollPanel: function(element) {
+        this.scrollPanel = element;
+    },
+
+    /**
+     * Terrible temporary function that guess what network a public room
+     * entry is in, until synapse is able to tell us
+     */
+    _isRoomInNetwork(room, network) {
+        if (room.aliases && this.networkPatterns[network]) {
+            for (const alias of room.aliases) {
+                if (this.networkPatterns[network].test(alias)) return true;
+            }
        }
+
+        return false;
    },

    render: function() {
+        let content;
        if (this.state.loading) {
-            var Loader = sdk.getComponent("elements.Spinner");            
-            return (
-                <div className="mx_RoomDirectory">
-                    <Loader />
-                </div>
-            );
+            const Loader = sdk.getComponent("elements.Spinner");
+            content = <div className="mx_RoomDirectory">
+                <Loader />
+            </div>;
+        } else {
+            const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+            content = <ScrollPanel ref={this.collectScrollPanel}
+                className="mx_RoomDirectory_tableWrapper"
+                onFillRequest={ this.onFillRequest }
+                stickyBottom={false}
+                startAtBottom={false}
+                onResize={function(){}}
+            >
+                <table ref="directory_table" className="mx_RoomDirectory_table">
+                    <tbody>
+                        { this.getRows() }
+                    </tbody>
+                </table>
+            </ScrollPanel>;
        }

-        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
        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">
-                        <table ref="directory_table" className="mx_RoomDirectory_table">
-                            <tbody>
-                                { this.getRows(this.state.roomAlias) }
-                            </tbody>
-                        </table>
-                    </GeminiScrollbar>
+                    <div className="mx_RoomDirectory_listheader">
+                        <input type="text" placeholder="Find a room by keyword or room ID (#foo:matrix.org)"
+                            className="mx_RoomDirectory_input" size="64" onChange={this.onFilterChange} onKeyUp={this.onFilterKeyUp}
+                        />
+                        <NetworkDropdown config={this.props.config} onNetworkChange={this.onNetworkChange} />
+                    </div>
+                    {content}
                </div>
            </div>
        );
    }
 });

+// 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] : "");
+}
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -17,15 +17,21 @@ limitations under the License.
 'use strict';

 var React = require('react');
+var ReactDOM = require('react-dom');
+var classNames = require('classnames');
 var DropTarget = require('react-dnd').DropTarget;
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var Unread = require('matrix-react-sdk/lib/Unread');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var FormattingUtils = require('matrix-react-sdk/lib/utils/FormattingUtils');

 // turn this on for drop & drag console debugging galore
 var debug = false;

+const TRUNCATE_AT = 10;
+
 var roomListTarget = {
    canDrop: function() {
        return true;
@@ -61,26 +67,26 @@ 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() {
        return {
            hidden: this.props.startAsHidden || false,
-            truncateAt: 20,
+            truncateAt: TRUNCATE_AT,
            sortedList: [],
        };
    },
@@ -93,26 +99,50 @@ 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
+        });
+    },
+
+    // The header is collapsable if it is hidden or not stuck
+    // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
+    isCollapsableOnClick: function() {
+        var stuck = this.refs.header.dataset.stuck;
+        if (this.state.hidden || stuck === undefined || stuck === "none") {
+            return true;
+        } else {
+            return false;
+        }
    },

    onClick: function(ev) {
-        var isHidden = !this.state.hidden;
-        this.setState({ hidden : isHidden });
+        if (this.isCollapsableOnClick()) {
+            // The header isCollapsable, so the click is to be interpreted as collapse and truncation logic
+            var isHidden = !this.state.hidden;
+            this.setState({ hidden : isHidden });
+
+            if (isHidden) {
+                // as good a way as any to reset the truncate state
+                this.setState({ truncateAt : TRUNCATE_AT });
+            }

-        if (isHidden) {
-            // as good a way as any to reset the truncate state
-            this.setState({ truncateAt : 20 });
            this.props.onShowMoreRooms();
+            this.props.onHeaderClick(isHidden);
+        } else {
+            // The header is stuck, so the click is to be interpreted as a scroll to the header
+            this.props.onHeaderClick(this.state.hidden, this.refs.header.dataset.originalPosition);
        }
-
-        this.props.onHeaderClick(isHidden);
    },

    tsOfNewestEvent: function(room) {
@@ -142,11 +172,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,10 +202,59 @@ 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) });
    },

+    _shouldShowNotifBadge: function(roomNotifState) {
+        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
+        return showBadgeInStates.indexOf(roomNotifState) > -1;
+    },
+
+    _shouldShowMentionBadge: function(roomNotifState) {
+        return roomNotifState != RoomNotifs.MUTE;
+    },
+
+    /**
+     * Total up all the notification counts from the rooms
+     *
+     * @param {Number} If supplied will only total notifications for rooms outside the truncation number
+     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
+     */
+    roomNotificationCount: function(truncateAt) {
+        var self = this;
+
+        return this.props.list.reduce(function(result, room, index) {
+            if (truncateAt === undefined || index >= truncateAt) {
+                var roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
+                var highlight = room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites';
+                var notificationCount = room.getUnreadNotificationCount();
+
+                const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
+                const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
+                const badges = notifBadges || mentionBadges;
+
+                if (badges) {
+                    result[0] += notificationCount;
+                    if (highlight) {
+                        result[1] = true;
+                    }
+                }
+            }
+            return result;
+        }, [0, false]);
+    },
+
+    _updateSubListCount: function() {
+        // Force an update by setting the state to the current state
+        // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
+        // method is honoured
+        this.setState(this.state);
+    },
+
    moveRoomTile: function(room, atIndex) {
        if (debug) console.log("moveRoomTile: id " + room.roomId + ", atIndex " + atIndex);
        //console.log("moveRoomTile before: " + JSON.stringify(this.state.rooms));
@@ -187,15 +281,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 +304,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.
@@ -254,12 +348,12 @@ var RoomSubList = React.createClass({

    makeRoomTiles: function() {
        var self = this;
-        var RoomTile = sdk.getComponent("rooms.RoomTile");
+        var DNDRoomTile = sdk.getComponent("rooms.DNDRoomTile");
        return this.state.sortedList.map(function(room) {
            var selected = room.roomId == self.props.selectedRoom;
            // XXX: is it evil to pass in self as a prop to RoomTile?
            return (
-                <RoomTile
+                <DNDRoomTile
                    room={ room }
                    roomSubList={ self }
                    key={ room.roomId }
@@ -268,32 +362,95 @@ var RoomSubList = React.createClass({
                    unread={ Unread.doesRoomHaveUnreadMessages(room) }
                    highlight={ room.getUnreadNotificationCount('highlight') > 0 || self.props.label === 'Invites' }
                    isInvite={ self.props.label === 'Invites' }
-                    incomingCall={ self.props.incomingCall && (self.props.incomingCall.roomId === room.roomId) ? self.props.incomingCall : null } />
+                    refreshSubList={ self._updateSubListCount }
+                    incomingCall={ null } />
            );
        });
    },

    _getHeaderJsx: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");        
+        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        var subListNotifications = this.roomNotificationCount();
+        var subListNotifCount = subListNotifications[0];
+        var subListNotifHighlight = subListNotifications[1];
+
+        var roomCount = this.props.list.length > 0 ? this.props.list.length : '';
+
+        var chevronClasses = classNames({
+            'mx_RoomSubList_chevron': true,
+            'mx_RoomSubList_chevronRight': this.state.hidden,
+            'mx_RoomSubList_chevronDown': !this.state.hidden,
+        });
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_badge': true,
+            'mx_RoomSubList_badgeHighlight': subListNotifHighlight,
+        });
+
+        var badge;
+        if (subListNotifCount > 0) {
+            badge = <div className={badgeClasses}>{ FormattingUtils.formatCount(subListNotifCount) }</div>;
+        }
+
+        // When collapsed, allow a long hover on the header to show user
+        // the full tag name and room count
+        var title;
+        if (this.props.collapsed) {
+            title = this.props.label;
+            if (roomCount !== '') {
+                title += " [" + roomCount + "]";
+            }
+        }
+
+        var incomingCall;
+        if (this.props.incomingCall) {
+            var self = this;
+            // Check if the incoming call is for this section
+            var incomingCallRoom = this.state.sortedList.filter(function(room) {
+                return self.props.incomingCall.roomId === room.roomId;
+            });
+
+            if (incomingCallRoom.length === 1) {
+                var IncomingCallBox = sdk.getComponent("voip.IncomingCallBox");
+                incomingCall = <IncomingCallBox className="mx_RoomSubList_incomingCall" incomingCall={ this.props.incomingCall }/>;
+            }
+        }
+
        return (
-            <h2 onClick={ this.onClick } className="mx_RoomSubList_label">
-                { this.props.collapsed ? '' : this.props.label }
-                <TintableSvg className="mx_RoomSubList_chevron"
-                    src={ this.state.hidden ? "img/list-close.svg" : "img/list-open.svg" }
-                    width="10" height="10" />
-            </h2>
+            <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
+                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                    { this.props.collapsed ? '' : this.props.label }
+                    <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
+                    <div className={chevronClasses}></div>
+                    { badge }
+                    { incomingCall }
+                </div>
+            </div>
        );
    },

    _createOverflowTile: function(overflowCount, totalCount) {
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        // XXX: this is duplicated from RoomTile - factor it out
+        var content = <div className="mx_RoomSubList_chevronDown"></div>;
+
+        var overflowNotifications = this.roomNotificationCount(TRUNCATE_AT);
+        var overflowNotifCount = overflowNotifications[0];
+        var overflowNotifHighlight = overflowNotifications[1];
+        if (overflowNotifCount && !this.props.collapsed) {
+            content = FormattingUtils.formatCount(overflowNotifCount);
+        }
+
+        var badgeClasses = classNames({
+            'mx_RoomSubList_moreBadge': true,
+            'mx_RoomSubList_moreBadgeNotify': overflowNotifCount && !this.props.collapsed,
+            'mx_RoomSubList_moreBadgeHighlight': overflowNotifHighlight && !this.props.collapsed,
+        });
+
        return (
-            <div className="mx_RoomTile mx_RoomTile_ellipsis" onClick={this._showFullMemberList}>
-                <div className="mx_RoomTile_avatar">
-                    <BaseAvatar url="img/ellipsis.svg" name="..." width={24} height={24} />
-                </div>
-                <div className="mx_RoomTile_name">and { overflowCount } others...</div>
+            <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+                <div className="mx_RoomSubList_line"></div>
+                <div className="mx_RoomSubList_more">more</div>
+            <div className={ badgeClasses }>{ content }</div>
            </div>
        );
    },
@@ -302,7 +459,49 @@ var RoomSubList = React.createClass({
        this.setState({
            truncateAt: -1
        });
+
        this.props.onShowMoreRooms();
+        this.props.onHeaderClick(false);
+    },
+
+    // Fix any undefined order elements of a room in a manual ordered list
+    //     room.tag[tagname].order
+    _fixUndefinedOrder: function(list) {
+        if (this.props.order === "manual") {
+            var order = 0.0;
+            var self = this;
+
+            // Find the highest (lowest position) order of a room in a manual ordered list
+            list.forEach(function(room) {
+                if (room.tags.hasOwnProperty(self.props.tagName)) {
+                    if (order < room.tags[self.props.tagName].order) {
+                        order = room.tags[self.props.tagName].order;
+                    }
+                }
+            });
+
+            // Fix any undefined order elements of a room in a manual ordered list
+            // Do this one at a time, as each time a rooms tag data is updated the RoomList
+            // gets triggered and another list is passed in. Doing it one at a time means that
+            // we always correctly calculate the highest order for the list - stops multiple
+            // rooms getting the same order. This is only really relevant for the first time this
+            // is run with historical room tag data, after that there should only be undefined
+            // in the list at a time anyway.
+            for (let i = 0; i < list.length; i++) {
+                if (list[i].tags[self.props.tagName] && list[i].tags[self.props.tagName].order === undefined) {
+                    MatrixClientPeg.get().setRoomTag(list[i].roomId, self.props.tagName, {order: (order + 1.0) / 2.0}).finally(function() {
+                        // Do any final stuff here
+                    }).fail(function(err) {
+                        var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                        Modal.createDialog(ErrorDialog, {
+                            title: "Failed to add tag " + self.props.tagName + " to room",
+                            description: err.toString()
+                        });
+                    });
+                    break;
+                };
+            };
+        }
    },

    render: function() {
@@ -332,7 +531,7 @@ var RoomSubList = React.createClass({
            }
            else {
                subList = <TruncatedList className={ classes }>
-                          </TruncatedList>;                
+                          </TruncatedList>;
            }

            return connectDropTarget(
@@ -356,7 +555,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(),
--- a/src/components/structures/SearchBox.js
+++ b/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>
+        );
+    }
+});
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -40,7 +40,7 @@ module.exports = React.createClass({
            this.props.onFinished();
        }
    },
-    
+
    render: function() {
        return (
            <div className="mx_ViewSource">
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/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,37 @@ 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();
+    },
+
+    onQuoteClick: function () {
+        console.log(this.props.mxEvent);
+        dis.dispatch({
+            action: 'quote',
+            event: this.props.mxEvent,
+        });
+    },
+
    render: function() {
        var eventStatus = this.props.mxEvent.status;
        var resendButton;
        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 +111,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 +119,51 @@ 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: 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={ "https://matrix.to/#/" + this.props.mxEvent.getRoomId() +"/"+ this.props.mxEvent.getId() }
+                   target="_blank" onClick={ this.onPermalinkClick }>Permalink</a>
+            </div>
+        );
+
+        const quoteButton = (
+            <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+                Quote
+            </div>
+        );
+
        return (
            <div>
                {resendButton}
                {redactButton}
                {cancelButton}
                {viewSourceButton}
+                {unhidePreviewButton}
+                {permalinkButton}
+                {quoteButton}
            </div>
        );
    }
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -0,0 +1,144 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var q = require("q");
+var React = require('react');
+var classNames = require('classnames');
+var RoomNotifs = require('matrix-react-sdk/lib/RoomNotifs');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+module.exports = React.createClass({
+    displayName: 'NotificationStateContextMenu',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState() {
+        return {
+            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+        }
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _save: function(newState) {
+        const oldState = this.state.roomNotifState;
+        const roomId = this.props.room.roomId;
+        var cli = MatrixClientPeg.get();
+
+        if (cli.isGuest()) return;
+
+        this.setState({
+            roomNotifState: newState,
+        });
+        RoomNotifs.setRoomNotifsState(this.props.room.roomId, newState).done(() => {
+            // delay slightly so that the user can see their state change
+            // before closing the menu
+            return q.delay(500).then(() => {
+                if (this._unmounted) return;
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            });
+        }, (error) => {
+            // TODO: some form of error notification to the user
+            // to inform them that their state change failed.
+            // For now we at least set the state back
+            if (this._unmounted) return;
+            this.setState({
+                roomNotifState: oldState,
+            });
+        });
+    },
+
+    _onClickAlertMe: function() {
+        this._save(RoomNotifs.ALL_MESSAGES_LOUD);
+    },
+
+    _onClickAllNotifs: function() {
+        this._save(RoomNotifs.ALL_MESSAGES);
+    },
+
+    _onClickMentions: function() {
+        this._save(RoomNotifs.MENTIONS_ONLY);
+    },
+
+    _onClickMute: function() {
+        this._save(RoomNotifs.MUTE);
+    },
+
+    render: function() {
+        var alertMeClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
+        });
+
+        var allNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
+        });
+
+        var mentionsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
+        });
+
+        var muteNotifsClasses = classNames({
+            'mx_NotificationStateContextMenu_field': true,
+            'mx_NotificationStateContextMenu_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
+        });
+
+        return (
+            <div>
+                <div className="mx_NotificationStateContextMenu_picker" >
+                    <img src="img/notif-slider.svg" width="20" height="107" />
+                </div>
+                <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    All messages (loud)
+                </div>
+                <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    All messages
+                </div>
+                <div className={ mentionsClasses } onClick={this._onClickMentions} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    Mentions only
+                </div>
+                <div className={ muteNotifsClasses } onClick={this._onClickMute} >
+                    <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
+                    Mute
+                </div>
+            </div>
+        );
+    }
+});
--- a/src/components/views/context_menus/RoomTagContextMenu.js
+++ b/src/components/views/context_menus/RoomTagContextMenu.js
@@ -0,0 +1,253 @@
+/*
+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');
+var DMRoomMap = require('matrix-react-sdk/lib/utils/DMRoomMap');
+var Rooms = require('matrix-react-sdk/lib/Rooms');
+
+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() {
+        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
+        return {
+            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
+            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
+        };
+    },
+
+    _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");
+        }
+    },
+
+    _onClickDM: function() {
+        const newIsDirectMessage = !this.state.isDirectMessage;
+        this.setState({
+            isDirectMessage: newIsDirectMessage,
+        });
+
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        let newTarget;
+        if (newIsDirectMessage) {
+            const guessedTarget = Rooms.guessDMRoomTarget(
+                this.props.room,
+                this.props.room.getMember(MatrixClientPeg.get().credentials.userId),
+            );
+            newTarget = guessedTarget.userId;
+        } else {
+            newTarget = null;
+        }
+
+        // give some time for the user to see the icon change first, since
+        // this will hide the context menu once it completes
+        q.delay(500).done(() => {
+            return Rooms.setDMRoom(this.props.room.roomId, newTarget).finally(() => {
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                };
+            }, (err) => {
+                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                Modal.createDialog(ErrorDialog, {
+                    title: "Failed to set Direct Message status of room",
+                    description: err.toString()
+                });
+            });
+        });
+    },
+
+    _onClickLeave: function() {
+        // Leave room
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    _onClickForget: function() {
+        // FIXME: duplicated with RoomSettings (and dead code in RoomView)
+        MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
+            dis.dispatch({ action: 'view_next_room' });
+        }, function(err) {
+            var errCode = err.errcode || "unknown error code";
+            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: `Failed to forget room (${errCode})`
+            });
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        };
+    },
+
+    render: function() {
+        const myUserId = MatrixClientPeg.get().credentials.userId;
+        const myMember = this.props.room.getMember(myUserId);
+
+        const favouriteClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isFavourite,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        const lowPriorityClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isLowPriority,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        const leaveClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': false,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        const dmClasses = classNames({
+            'mx_RoomTagContextMenu_field': true,
+            'mx_RoomTagContextMenu_fieldSet': this.state.isDirectMessage,
+            'mx_RoomTagContextMenu_fieldDisabled': false,
+        });
+
+        if (myMember && myMember.membership === "leave") {
+            return (
+                <div>
+                    <div className={ leaveClasses } onClick={ this._onClickForget } >
+                        <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                        Forget
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                <div className={ favouriteClasses } onClick={this._onClickFavourite} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_fave.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    Favourite
+                </div>
+                <div className={ lowPriorityClasses } onClick={this._onClickLowPriority} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_low.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    Low Priority
+                </div>
+                <div className={ dmClasses } onClick={this._onClickDM} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTagContextMenu_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    Direct Chat
+                </div>
+                <hr className="mx_RoomTagContextMenu_separator" />
+                <div className={ leaveClasses } onClick={(myMember && myMember.membership === "join") ? this._onClickLeave : null} >
+                    <img className="mx_RoomTagContextMenu_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    Leave
+                </div>
+            </div>
+        );
+    }
+});
--- a/src/components/views/dialogs/ChangelogDialog.js
+++ b/src/components/views/dialogs/ChangelogDialog.js
@@ -0,0 +1,92 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ */
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import request from 'browser-request';
+
+const REPOS = ['vector-im/vector-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
+
+export default class ChangelogDialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const version = this.props.newVersion.split('-');
+        const version2 = this.props.version.split('-');
+        if(version == null || version2 == null) return;
+        for(let i=0; i<REPOS.length; i++) {
+            const oldVersion = version2[2*i+1];
+            const newVersion = version[2*i+1];
+            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
+                if(body == null) return;
+                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+            });
+        }
+    }
+
+    _elementsForCommit(commit) {
+        return (
+            <li key={commit.sha} className="mx_ChangelogDialog_li">
+                <a href={commit.html_url} target="_blank" ref="noopener">
+                    {commit.commit.message}
+                </a>
+            </li>
+        );
+    }
+
+    render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+
+        const logs = REPOS.map(repo => {
+            if (this.state[repo] == null) return <Spinner key={repo} />;
+            return (
+                <div key={repo}>
+                    <h2>{repo}</h2>
+                    <ul>
+                    {this.state[repo].map(this._elementsForCommit)}
+                    </ul>
+                </div>
+            )
+        });
+
+        const content = (
+            <div className="mx_ChangelogDialog_content">
+                {this.props.version == null || this.props.newVersion == null ? <h2>Unavailable</h2> : logs}
+            </div>
+        );
+
+
+        return (
+            <QuestionDialog
+                title="Changelog"
+                description={content}
+                button="Update"
+                onFinished={this.props.onFinished}
+                />
+        )
+    }
+}
+
+ChangelogDialog.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};
--- a/src/components/views/directory/NetworkDropdown.js
+++ b/src/components/views/directory/NetworkDropdown.js
@@ -0,0 +1,150 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+export default class NetworkDropdown extends React.Component {
+    constructor() {
+        super();
+
+        this.dropdownRootElement = null;
+        this.ignoreEvent = null;
+
+        this.onInputClick = this.onInputClick.bind(this);
+        this.onRootClick = this.onRootClick.bind(this);
+        this.onDocumentClick = this.onDocumentClick.bind(this);
+        this.onNetworkClick = this.onNetworkClick.bind(this);
+        this.collectRoot = this.collectRoot.bind(this);
+
+        this.state = {
+            expanded: false,
+            selectedNetwork: null,
+        };
+    }
+
+    componentWillMount() {
+        // Listen for all clicks on the document so we can close the
+        // menu when the user clicks somewhere else
+        document.addEventListener('click', this.onDocumentClick, false);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.onDocumentClick, false);
+    }
+
+    onDocumentClick(ev) {
+        // Close the dropdown if the user clicks anywhere that isn't
+        // within our root element
+        if (ev !== this.ignoreEvent) {
+            this.setState({
+                expanded: false,
+            });
+        }
+    }
+
+    onRootClick(ev) {
+        // This captures any clicks that happen within our elements,
+        // such that we can then ignore them when they're seen by the
+        // click listener on the document handler, ie. not close the
+        // dropdown immediately after opening it.
+        // NB. We can't just stopPropagation() because then the event
+        // doesn't reach the React onClick().
+        this.ignoreEvent = ev;
+    }
+
+    onInputClick(ev) {
+        this.setState({
+            expanded: !this.state.expanded,
+        });
+        ev.preventDefault();
+    }
+
+    onNetworkClick(network, ev) {
+        this.setState({
+            expanded: false,
+            selectedNetwork: network,
+        });
+        this.props.onNetworkChange(network);
+    }
+
+    collectRoot(e) {
+        if (this.dropdownRootElement) {
+            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
+        }
+        if (e) {
+            e.addEventListener('click', this.onRootClick, false);
+        }
+        this.dropdownRootElement = e;
+    }
+
+    _optionForNetwork(network, wire_onclick) {
+        if (wire_onclick === undefined) wire_onclick = true;
+        let icon;
+        let name;
+        let span_class;
+
+        if (network === null) {
+            name = 'All networks';
+            span_class = 'mx_NetworkDropdown_menu_all';
+        } else {
+            name = this.props.config.networkNames[network];
+            icon = <img src={this.props.config.networkIcons[network]} />;
+            span_class = 'mx_NetworkDropdown_menu_network';
+        }
+
+        const click_handler = wire_onclick ? this.onNetworkClick.bind(this, network) : null;
+
+        return <div key={network} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
+            {icon}
+            <span className={span_class}>{name}</span>
+        </div>;
+    }
+
+    render() {
+        const current_value = this._optionForNetwork(this.state.selectedNetwork, false);
+
+        let menu;
+        if (this.state.expanded) {
+           const menu_options = [this._optionForNetwork(null)];
+            for (const network of this.props.config.networks) {
+                menu_options.push(this._optionForNetwork(network));
+            }
+            menu = <div className="mx_NetworkDropdown_menu">
+                {menu_options}
+            </div>;
+        }
+
+        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
+            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
+                {current_value}
+                <span className="mx_NetworkDropdown_arrow"></span>
+                {menu}
+            </div>
+        </div>;
+    }
+}
+
+NetworkDropdown.propTypes = {
+    onNetworkChange: React.PropTypes.func.isRequired,
+    config: React.PropTypes.object,
+};
+
+NetworkDropdown.defaultProps = {
+    config: {
+        networks: [],
+    }
+};
+
--- a/src/components/views/elements/ImageView.js
+++ b/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" rel="noopener">{ 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 }
+                                { this.getName() }
                            </div>
-                            <div className="mx_ImageView_metadata">
-                                Uploaded on { DateUtils.formatDate(new Date(this.props.mxEvent.getTs())) } by { this.props.mxEvent.getSender() }
-                            </div>
-                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank">
+                            { eventMeta }
+                            <a className="mx_ImageView_link" href={ this.props.src } target="_blank" rel="noopener">
                                <div className="mx_ImageView_download">
                                        Download this file<br/>
-                                         <span className="mx_ImageView_size">{ size } { res }</span>
+                                         <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>
--- a/src/components/views/globals/GuestWarningBar.js
+++ b/src/components/views/globals/GuestWarningBar.js
@@ -34,7 +34,7 @@ module.exports = React.createClass({
            <div className="mx_GuestWarningBar">
                <img className="mx_GuestWarningBar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
                <div>
-                    You are using Vector as a guest. <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>log in</a> to access more rooms and features.
+                    You are Rioting as a guest. <a onClick={this.onRegisterClicked}>Register</a> or <a onClick={this.onLoginClicked}>log in</a> to access more rooms and features.
                </div>
            </div>
        );
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/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({
        );
    }
 });
-
--- a/src/components/views/globals/NewVersionBar.js
+++ b/src/components/views/globals/NewVersionBar.js
@@ -17,20 +17,49 @@ limitations under the License.
 'use strict';

 var React = require('react');
-var sdk = require('matrix-react-sdk')
+var sdk = require('matrix-react-sdk');
+import Modal from 'matrix-react-sdk/lib/Modal';

-module.exports = React.createClass({
-    displayName: 'NewVersionBar',
+/**
+ * Check a version string is compatible with the Changelog
+ * dialog
+ */
+function checkVersion(ver) {
+    const parts = ver.split('-');
+    return parts[0] == 'vector' && parts[2] == 'react' && parts[4] == 'js';
+}

-    render: function() {
-        return (
-            <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
-                <div>
-                    A new version of Vector is available. Refresh your browser.
-                </div>
-            </div>
-        );
+export default function NewVersionBar(props) {
+    const onChangelogClicked = () => {
+        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
+
+        Modal.createDialog(ChangelogDialog, {
+            version: props.version,
+            newVersion: props.newVersion,
+            onFinished: (update) => {
+                if(update) {
+                    window.location.reload();
+                }
+            }
+        });
+    };
+
+    let changelog_button;
+    if (checkVersion(props.version) && checkVersion(props.newVersion)) {
+        changelog_button = <button className="mx_MatrixToolbar_action" onClick={onChangelogClicked}>Changelog</button>;
    }
-});
+    return (
+        <div className="mx_MatrixToolbar">
+            <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="/!\"/>
+            <div className="mx_MatrixToolbar_content">
+                A new version of Riot is available. Refresh your browser.
+            </div>
+            {changelog_button}
+        </div>
+    );
+}

+NewVersionBar.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+};
--- a/src/components/views/login/VectorCustomServerDialog.js
+++ b/src/components/views/login/VectorCustomServerDialog.js
@@ -33,7 +33,7 @@ module.exports = React.createClass({
                        You can use the custom server options to log into other Matrix
                        servers by specifying a different Home server URL.
                        <br/>
-                        This allows you to use Vector with an existing Matrix account on
+                        This allows you to use Riot with an existing Matrix account on
                        a different home server.
                        <br/>
                        <br/>
--- a/src/components/views/login/VectorLoginFooter.js
+++ b/src/components/views/login/VectorLoginFooter.js
@@ -27,8 +27,8 @@ module.exports = React.createClass({
    render: function() {
        return (
            <div className="mx_Login_links">
-                <a href="https://medium.com/@Vector">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
-                <a href="https://twitter.com/@VectorCo">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
+                <a href="https://twitter.com/@RiotChat">twitter</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
                <a href="https://github.com/vector-im/vector-web">github</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;
                <a href="https://matrix.org">powered by Matrix</a>
            </div>
--- a/src/components/views/login/VectorLoginHeader.js
+++ b/src/components/views/login/VectorLoginHeader.js
@@ -27,7 +27,7 @@ module.exports = React.createClass({
    render: function() {
        return (
            <div className="mx_Login_logo">
-                <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                <img src="img/logo.png" width="195" height="195" alt="Riot"/>
            </div>
        );
    }
--- a/src/components/views/messages/MessageTimestamp.js
+++ b/src/components/views/messages/MessageTimestamp.js
@@ -26,7 +26,7 @@ module.exports = React.createClass({
        var date = new Date(this.props.ts);
        return (
            <span className="mx_MessageTimestamp">
-                { DateUtils.formatDate(date) }
+                { DateUtils.formatTime(date) }
            </span>
        );
    },
--- a/src/components/views/messages/SenderProfile.js
+++ b/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>
-        );
-    },
-});
-
--- a/src/components/views/rooms/BottomLeftMenuTile.js
+++ b/src/components/views/rooms/BottomLeftMenuTile.js
@@ -1,57 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('matrix-react-sdk')
-
-module.exports = React.createClass({
-    displayName: 'BottomLeftMenuTile',
-
-    getInitialState: function() {
-        return( { hover : false });
-    },
-
-    onMouseEnter: function() {
-        this.setState( { hover : true });
-    },
-
-    onMouseLeave: function() {
-        this.setState( { hover : false });
-    },
-
-    render: function() {
-        var label;
-        if (!this.props.collapsed) {
-            label = <div className="mx_RoomTile_name">{ this.props.label }</div>;
-        }
-        else if (this.state.hover) {
-            var RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            label = <RoomTooltip bottom={ true } label={ this.props.label }/>;
-        }
-
-        return (
-            <div className="mx_RoomTile" onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.props.onClick}>
-                <div className="mx_RoomTile_avatar">
-                    <img src={ this.props.img } width="26" height="26"/>
-                </div>
-                { label }
-            </div>
-        );
-    }
-});
--- a/src/components/views/rooms/DNDRoomTile.js
+++ b/src/components/views/rooms/DNDRoomTile.js
@@ -25,6 +25,13 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk');
 var RoomTile = require('matrix-react-sdk/lib/components/views/rooms/RoomTile');

+/**
+ * Defines a new Component, DNDRoomTile that wraps RoomTile, making it draggable.
+ * Requires extra props:
+ *   roomSubList: React.PropTypes.object.isRequired,
+ *   refreshSubList: React.PropTypes.func.isRequired,
+ */
+
 /**
 * Specifies the drag source contract.
 * Only `beginDrag` function is required.
@@ -38,7 +45,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 +152,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 +175,7 @@ var roomTileTarget = {

            if (yDelta) item.lastYDelta = yDelta;
            item.lastYOffset = off.y;
-*/            
+*/
        }
        else if (switchedTarget) {
            if (!props.roomSubList.findRoomTile(item.room).room) {
@@ -183,7 +190,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()
@@ -202,4 +209,3 @@ DragSource('RoomTile', roomTileSource, function(connect, monitor) {
    };
 })(RoomTile));

-module.exports.replaces = 'RoomTile';
--- a/src/components/views/rooms/RoomTooltip.js
+++ b/src/components/views/rooms/RoomTooltip.js
@@ -18,42 +18,79 @@ limitations under the License.

 var React = require('react');
 var ReactDOM = require('react-dom');
-
 var dis = require('matrix-react-sdk/lib/dispatcher');

 module.exports = React.createClass({
    displayName: 'RoomTooltip',

-    componentDidMount: function() {
-        var tooltip = ReactDOM.findDOMNode(this);
-        if (!this.props.bottom) {
-            // tell the roomlist about us so it can position us
-            dis.dispatch({
-                action: 'view_tooltip',
-                tooltip: tooltip,
-            });
-        }
-        else {
-            tooltip.style.top = tooltip.parentElement.getBoundingClientRect().top + "px"; 
-            tooltip.style.display = "block";
-        }
+    propTypes: {
+        // Alllow the tooltip to be styled by the parent element
+        className: React.PropTypes.string.isRequired,
+        // The tooltip is derived from either the room name or a label
+        room: React.PropTypes.object,
+        label: React.PropTypes.string,
    },

+    // Create a wrapper for the tooltip outside the parent and attach it to the body element
+    componentDidMount: function() {
+        this.tooltipContainer = document.createElement("div");
+        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
+        document.body.appendChild(this.tooltipContainer);
+
+        this._renderTooltip();
+    },
+
+    componentDidUpdate: function() {
+        this._renderTooltip();
+    },
+
+    // Remove the wrapper element, as the tooltip has finished using it
    componentWillUnmount: function() {
-        if (!this.props.bottom) {
-            dis.dispatch({
-                action: 'view_tooltip',
-                tooltip: null,
-            });
-        }
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: null,
+            parent: null,
+        });
+
+        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
+        document.body.removeChild(this.tooltipContainer);
+    },
+
+    _renderTooltip: function() {
+        var label = this.props.room ? this.props.room.name : this.props.label;
+
+        // Add the parent's position to the tooltips, so it's correctly
+        // positioned, also taking into account any window zoom
+        // NOTE: The additional 6 pixels for the left position, is to take account of the
+        // tooltips chevron
+        var parent = ReactDOM.findDOMNode(this);
+        var style = {};
+        style.top = parent.getBoundingClientRect().top + window.pageYOffset;
+        style.left = 6 + parent.getBoundingClientRect().right + window.pageXOffset;
+        style.display = "block";
+
+        var tooltip = (
+            <div className="mx_RoomTooltip" style={style} >
+                <div className="mx_RoomTooltip_chevron"></div>
+                { label }
+            </div>
+        );
+
+        // Render the tooltip manually, as we wish it not to be rendered within the parent
+        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+
+        // Tell the roomlist about us so it can manipulate us if it wishes
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: this.tooltip,
+            parent: parent,
+        });
    },

    render: function() {
-        var label = this.props.room ? this.props.room.name : this.props.label;
+        // Render a placeholder
        return (
-            <div className="mx_RoomTooltip">
-                 <img className="mx_RoomTooltip_chevron" src="img/chevron-left.png" width="9" height="16"/>
-                 { label }
+            <div className={ this.props.className } >
            </div>
        );
    }
--- a/src/components/views/rooms/SearchBar.js
+++ b/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' });
--- a/src/components/views/settings/IntegrationsManager.js
+++ b/src/components/views/settings/IntegrationsManager.js
@@ -0,0 +1,63 @@
+/*
+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');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+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() {
+        this.dispatcherRef = dis.register(this.onAction);
+        document.addEventListener("keydown", this.onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        document.removeEventListener("keydown", this.onKeyDown);
+    },
+
+    onKeyDown: function(ev) {
+        if (ev.keyCode == 27) { // escape
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    },
+
+    onAction: function(payload) {
+        if (payload.action === 'close_scalar') {
+            this.props.onFinished();
+        }
+    },
+
+    render: function() {
+        return (
+            <iframe src={ this.props.src }></iframe>
+        );
+    }
+});
--- a/src/components/views/settings/Notifications.js
+++ b/src/components/views/settings/Notifications.js
--- a/src/notifications/ContentRules.js
+++ b/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;
+    },
+};
--- a/src/notifications/NotificationUtils.js
+++ b/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;
+    },
+};
--- a/src/notifications/PushRuleVectorState.js
+++ b/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];
+};
--- a/src/notifications/StandardActions.js
+++ b/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,
+};
--- a/src/notifications/VectorPushRulesDefinitions.js
+++ b/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: "override",
+        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,
+        }
+    }),
+};
--- a/src/notifications/index.js
+++ b/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'),
+};
--- a/src/skins/vector/css/common.css
+++ b/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,64 @@ 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;
 }

+/* Required by Firefox */
+textarea {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
+/* Prevent ugly dotted highlight around selected elements in Firefox */
+::-moz-focus-inner {
+    border: 0;
+}
+
+/* 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 +133,33 @@ 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);
+    max-height: 80%;
+    overflow-y: auto;
 }

 .mx_Dialog_background {
@@ -147,12 +168,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 +188,61 @@ 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;
-    font-weight: 400;
-    font-size: 15px;
+    border-radius: 40px;
+    border: solid 1px #76cfa6;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+    cursor: pointer;
+    color: #76cfa6;
+    background-color: #fff;
+}
+
+.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 +258,30 @@ input[type=text]:focus, textarea:focus {
    color: #454545;
    background-color: #fff;
 }
+
+.mx_emojione {
+    height: 1em;
+    vertical-align: middle;
+}
+
+::-moz-selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+::selection {
+    background-color: #76CFA6;
+    color: white;
+}
+
+/** green button with rounded corners */
+.mx_textButton {
+    color: #fff;
+    background-color: #76cfa6;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    cursor: pointer;
+    display: inline;
+}
--- a/src/skins/vector/css/hide.css
+++ b/src/skins/vector/css/hide.css
@@ -1,6 +0,0 @@
-.mx_RoomSettings_encrypt,
-.mx_CreateRoom_encrypt,
-.mx_RightPanel_filebutton
-{
-    display: none !important;
-}
--- a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
+++ b/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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
+++ b/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,
--- a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
@@ -0,0 +1,118 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_FilePanel {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_FilePanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_FilePanel .mx_RoomView_MessageList h2 {
+    display: none;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_FilePanel .mx_EventTile_avatar {
+    display: none;
+}
+
+/* Overrides for the attachment body tiles */
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody {
+    margin-right: 0px;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_download {
+    display: flex;
+    font-size: 14px;
+    color: #acacac;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
+    flex: 1 1 auto;
+    color: #747474;
+    word-wrap: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
+    flex: 1 0 0;
+    font-size: 11px;
+    text-align: right;
+    white-space: nowrap;
+}
+
+/* Overides for the sender details line */
+
+.mx_FilePanel .mx_EventTile_senderDetails {
+    display: flex;
+    margin-top: -2px;
+}
+
+.mx_FilePanel .mx_EventTile_senderDetailsLink {
+    text-decoration: none;
+}
+
+.mx_FilePanel .mx_EventTile .mx_SenderProfile {
+    flex: 1 1 auto;
+    line-height: initial;
+    padding: 0px;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+    word-wrap: break-word;
+}
+
+.mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
+    flex: 1 0 0;
+    text-align: right;
+    visibility: visible;
+    position: initial;
+    font-size: 11px;
+    opacity: 1.0;
+    color: #acacac;
+}
+
+/* Overrides for the wrappers around the body tile */
+
+.mx_FilePanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 0px;
+}
+
+.mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+
--- a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
+++ b/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 {
@@ -109,7 +109,7 @@ limitations under the License.
    -webkit-order: 2;
    order: 2;

-    padding-left: 25px;
+    padding-left: 20px;
    padding-right: 22px;
    background-color: #fff;

@@ -151,6 +151,6 @@ limitations under the License.
 }

 .mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 72px;
-    flex: 0 0 72px;
+    -webkit-flex: 0 0 122px;
+    flex: 0 0 122px;
 }
--- a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
@@ -0,0 +1,104 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NotificationPanel {
+    -webkit-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -ms-flex-order: 2;
+    -webkit-order: 2;
+    order: 2;
+
+    -webkit-flex: 1 1 0;
+    flex: 1 1 0;
+
+    width: 100%;
+
+    overflow-y: auto;
+}
+
+.mx_NotificationPanel .mx_RoomView_messageListWrapper {
+    margin-right: 20px;
+}
+
+.mx_NotificationPanel .mx_RoomView_MessageList h2 {
+    margin-left: 0px;
+}
+
+/* FIXME: rather than having EventTile's default CSS be for MessagePanel,
+   we should make EventTile a base CSS class and customise it specifically
+   for usage in {Message,File,Notification}Panel. */
+
+.mx_NotificationPanel .mx_EventTile_roomName {
+    font-weight: bold;
+    font-size: 14px;
+    word-wrap: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a {
+    color: #4a4a4a;
+}
+
+.mx_NotificationPanel .mx_EventTile_avatar {
+    top: 8px;
+    left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    color: #000;
+    opacity: 0.3;
+    font-size: 12px;
+    display: inline;
+    padding-left: 0px;
+    word-wrap: break-word;
+}
+
+.mx_NotificationPanel .mx_EventTile_senderDetails {
+    padding-left: 32px;
+    padding-top: 8px;
+    position: relative;
+}
+
+.mx_NotificationPanel .mx_EventTile_roomName a,
+.mx_NotificationPanel .mx_EventTile_senderDetails a {
+    text-decoration: none ! important;
+}
+
+.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
+    visibility: visible;
+    position: initial;
+    display: inline;
+}
+
+.mx_NotificationPanel .mx_EventTile_line {
+    margin-right: 0px;
+    padding-left: 32px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-right: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
+    background-color: #fff;
+}
+
+.mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
+    padding-left: 0px;
+}
+
+.mx_NotificationPanel .mx_EventTile_content {
+    margin-right: 0px;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
@@ -1,7 +1,22 @@
+/*
+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-left: 65px;
-    min-height: 24px;
+    min-height: 34px;
 }

 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
@@ -9,21 +24,58 @@
    padding-left: 18px;
    padding-right: 12px;
    margin-left: -73px;
+    margin-top: 13px;
    float: left;
    width: 24px;
    text-align: center;
 }

-.mx_RoomStatusBar_placeholderIndicator { 
-    color: #4a4a4a;
-    opacity: 0.5;
+.mx_RoomStatusBar_callBar {
+    height: 50px;
+    line-height: 50px;
 }

-.mx_RoomStatusBar_scrollDownIndicator { 
+.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_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;
 }

 .mx_RoomStatusBar_unreadMessagesBar {
+    padding-top: 10px;
    color: #ff0064;
    cursor: pointer;
 }
@@ -57,10 +109,12 @@
 }

 .mx_RoomStatusBar_tabCompleteBar {
+    padding-top: 10px;
    color: #4a4a4a;
 }

 .mx_RoomStatusBar_typingBar {
+    padding-top: 10px;
    color: #4a4a4a;
    opacity: 0.5;
    overflow-y: hidden;
@@ -70,7 +124,7 @@
 .mx_RoomStatusBar_tabCompleteWrapper {
    display: flex;
    display: -webkit-flex;
-    height: 24px;
+    height: 26px;
 }

 .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/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,14 +207,24 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_statusAreaBox {
    max-width: 960px;
    margin: auto;
-    min-height: 36px;
+    min-height: 50px;
 }

 .mx_RoomView_statusAreaBox_line {
-    border-top: 1px solid #eee;
+    margin-left: 65px;
+    border-top: 1px solid #e5e5e5;
    height: 1px;
 }

+.mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
+    background-color: #fff;
+}
+
+.mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
+    color: #fff;
+    opacity: 1.0;
+}
+
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox_line {
    border-top: 1px hidden;
 }
@@ -233,6 +248,7 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_voipButton {
    float: right;
    margin-right: 13px;
+    margin-top: 10px;
    cursor: pointer;
 }

@@ -260,4 +276,9 @@ hr.mx_RoomView_myReadMarker {
    color: #fff;
    font-weight: bold;
    padding: 6px 0;
+    cursor: pointer;
 }
+
+.mx_RoomView_ongoingConfCallNotification a {
+    color: #fff ! important;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
@@ -0,0 +1,69 @@
+/*
+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;
+
+    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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
+++ b/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;
--- a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
+++ b/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,38 @@ limitations under the License.
    margin-bottom: 28px;
 }

+.mx_UserSettings_cryptoSection ul {
+    display: table;
+}
+.mx_UserSettings_cryptoSection li {
+    display: table-row;
+}
+.mx_UserSettings_cryptoSection label,
+.mx_UserSettings_cryptoSection span {
+    display: table-cell;
+    padding-right: 1em;
+}
+
+.mx_UserSettings_toggle input {
+    width: 16px;
+    margin-right: 8px;
+    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;
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
+++ b/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 {
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
@@ -0,0 +1,65 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+/* Using a textarea for this element, to circumvent autofill */
+.mx_ChatInviteDialog_input,
+.mx_ChatInviteDialog_input:focus
+{
+    height: 26px;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    padding-left: 12px;
+    padding-right: 12px;
+    margin: 0 !important;
+    border: 0 !important;
+    outline: 0 !important;
+    width: 1000%; /* Pretend that this is an "input type=text" */
+    resize: none;
+    overflow: hidden;
+    vertical-align: middle;
+    box-sizing: border-box;
+    word-wrap: nowrap;
+}
+
+.mx_ChatInviteDialog_inputContainer {
+    border-radius: 3px;
+    border: solid 1px #f0f0f0;
+    line-height: 36px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-top: 1px;
+    padding-bottom: 1px;
+    max-height: 150px;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.mx_ChatInviteDialog_error {
+    position: absolute;
+    color: #ff0064;
+    line-height: 36px;
+}
+
+.mx_ChatInviteDialog_cancel {
+    position: absolute;
+    right: 11px;
+    top: 13px;
+    cursor: pointer;
+}
+
+.mx_ChatInviteDialog_cancel object {
+    pointer-events: none;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css
@@ -0,0 +1,39 @@
+/*
+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_EncryptedEventDialog .mx_MemberDeviceInfo {
+    float: right;
+    padding: 0px;
+    margin-right: 42px;
+}
+
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_textButton {
+    border: 0px;
+    height: 36px;
+    border-radius: 40px;
+    border: solid 1px #76cfa6;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+    cursor: pointer;
+    color: #76cfa6;
+    background-color: #fff;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css
@@ -0,0 +1,45 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AddressSelector {
+    position: absolute;
+    background-color: #fff;
+    width: 485px;
+    max-height: 116px;
+    overflow-y: auto;
+	border-radius: 3px;
+	background-color: #fff;
+	border: solid 1px #76cfa6;
+    cursor: pointer;
+}
+
+.mx_AddressSelector.mx_AddressSelector_empty {
+    display: none;
+}
+
+.mx_AddressSelector_addressListElement .mx_AddressTile {
+    background-color: #fff;
+    border: solid 1px #fff;
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
+     background-color: #eaf5f0; /* selected colour */
+}
+
+.mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
+    background-color: #eaf5f0; /* selected colour */
+    border: solid 1px #eaf5f0; /* selected colour */
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
@@ -0,0 +1,138 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_AddressTile {
+    display: inline-block;
+    border-radius: 3px;
+    background-color: rgba(74, 73, 74, 0.1);
+    border: solid 1px #f0f0f0;
+    line-height: 26px;
+    color: #454545;
+    font-size: 14px;
+    font-weight: normal;
+    margin-right: 4px;
+}
+
+.mx_AddressTile.mx_AddressTile_error {
+    background-color: rgba(255, 0, 100, 0.1);
+    color: #ff0064;
+    border-color: #ff0064;
+}
+
+.mx_AddressTile_network {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 4px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_avatar {
+    display: inline-block;
+    position: relative;
+    padding-left: 2px;
+    padding-right: 7px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_mx {
+    display: inline-block;
+    margin: 0;
+    border: 0;
+    padding: 0;
+}
+
+.mx_AddressTile_name {
+    display: inline-block;
+    padding-right: 4px;
+    font-weight: 600;
+    overflow: hidden;
+    height: 26px;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_name.mx_AddressTile_justified {
+    width: 180px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_id {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_id.mx_AddressTile_justified {
+    width: 200px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknownMx {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknownMxl.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_email {
+    display: inline-block;
+    font-weight: 600;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_email.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_unknown {
+    display: inline-block;
+    padding-right: 11px;
+}
+
+.mx_AddressTile_unknown.mx_AddressTile_justified {
+    width: 380px; /* name + id width */
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.mx_AddressTile_dismiss {
+    display: inline-block;
+    padding-right: 11px;
+    padding-left: 1px;
+    cursor: pointer;
+}
+
+.mx_AddressTile_dismiss object {
+    pointer-events: none;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
@@ -0,0 +1,39 @@
+.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;
+}
+
+.mx_Markdown_CODE {
+    padding: .2em 0;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(0,0,0,.04);
+    border-radius: 3px;
+}
+
+.mx_Markdown_HR {
+    display: block;
+    background: #e7e7e7;
+}
+
+.mx_Markdown_STRIKETHROUGH {
+    text-decoration: line-through;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
@@ -14,6 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */

+.mx_MImageBody {
+    display: block;
+    margin-right: 34px;
+}
+
 .mx_MImageBody_thumbnail {
    max-width: 100%;
 /*
@@ -25,7 +30,6 @@ limitations under the License.

 .mx_MImageBody_download {
    color: #76cfa6;
-    cursor: pointer;
 }

 .mx_MImageBody_download a {
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
+++ b/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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css
+++ b/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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
@@ -0,0 +1,79 @@
+.mx_Autocomplete {
+    position: absolute;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    border: 1px solid #e5e5e5;
+    background: white;
+    border-bottom: none;
+    border-radius: 4px 4px 0 0;
+    max-height: 50vh;
+    overflow: auto
+}
+
+.mx_Autocomplete_ProviderSection {
+    border-bottom: 1px solid #e5e5e5;
+}
+
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+}
+
+/* a "block" completion takes up a whole line */
+.mx_Autocomplete_Completion_block {
+    height: 34px;
+    display: flex;
+    padding: 0 12px;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
+}
+
+.mx_Autocomplete_Completion_block * {
+     margin: 0 3px;
+}
+
+.mx_Autocomplete_Completion_pill {
+    border-radius: 17px;
+    height: 34px;
+    display: flex;
+    user-select: none;
+    cursor: pointer;
+    align-items: center;
+    color: #4a4a4a;
+}
+
+.mx_Autocomplete_Completion_pill * {
+    margin: 0 3px;
+}
+
+/* container for pill-style completions */
+.mx_Autocomplete_Completion_container_pill {
+    margin: 12px;
+    display: flex;
+    flex-flow: wrap;
+}
+
+.mx_Autocomplete_Completion.selected {
+    background: #f6f6f6;
+    outline: none;
+}
+
+.mx_Autocomplete_provider_name {
+    margin: 12px;
+    color: #454545;
+    font-weight: 400;
+    opacity: 0.4;
+}
+
+/* styling for common completion elements */
+.mx_Autocomplete_Completion_subtitle {
+    font-style: italic;
+    flex: 1;
+}
+
+.mx_Autocomplete_Completion_description {
+    color: gray;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
+++ b/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;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
@@ -17,86 +17,91 @@ limitations under the License.
 .mx_EventTile {
    max-width: 100%;
    clear: both;
-    margin-top: 24px;
-    margin-left: 65px;
+    padding-top: 18px;
+    font-size: 14px;
+    position: relative;
+}
+
+.mx_EventTile.mx_EventTile_info {
+    padding-top: 0px;
 }

 .mx_EventTile_avatar {
-    padding-left: 18px;
-    padding-right: 12px;
-    margin-left: -73px;
-    margin-top: -2px;
-    float: left;
-    position: relative;
-    top: 0px;
+    position: absolute;
+    top: 14px;
+    left: 8px;
+    cursor: pointer;
+    z-index: 2;
+}
+
+.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
+    top: 8px;
+    left: 65px;
 }

 .mx_EventTile_continuation {
-    margin-top: 8px ! important;
+    padding-top: 0px ! important;
 }

 .mx_EventTile .mx_SenderProfile {
    color: #454545;
    opacity: 0.5;
-    font-size: 13px;
-    margin-bottom: 4px;
-    display: block;
+    font-size: 14px;
+    display: block; /* anti-zalgo, with overflow hidden */
    overflow-y: hidden;
+    cursor: pointer;
+    padding-left: 65px; /* left gutter */
+    padding-bottom: 0px;
+    padding-top: 0px;
+    margin: 0px;
+    line-height: 22px;
 }

 .mx_EventTile .mx_MessageTimestamp {
+    display: block;
+    visibility: hidden;
+    white-space: nowrap;
    color: #acacac;
    font-size: 11px;
+    left: 8px;
+    position: absolute;
 }

 .mx_EventTile_line {
    position: relative;
    /* ideally should be 100px, but 95px gives us a max thumbnail size of 800x600, which is nice */
-    margin-right: 95px;
+    margin-right: 110px;
+    padding-left: 65px; /* left gutter */
+    padding-top: 4px;
+    padding-bottom: 2px;
+    border-radius: 4px;
+    min-height: 24px;
+    line-height: 22px;
 }

-.mx_EventTile_content {
-    display: block;
-    overflow-y: hidden;
+.mx_EventTile_info .mx_EventTile_line {
+    padding-left: 83px;
 }

-/* Various markdown overrides */
-
-.mx_EventTile_content .markdown-body {
-    font-family: inherit ! important;
-    white-space: normal ! important;
-    line-height: inherit ! important;
-    color: inherit;
-    font-size: 15px;
+/* 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;
 }

-.mx_EventTile_content .markdown-body h1,
-.mx_EventTile_content .markdown-body h2,
-.mx_EventTile_content .markdown-body h3,
-.mx_EventTile_content .markdown-body h4,
-.mx_EventTile_content .markdown-body h5,
-.mx_EventTile_content .markdown-body h6
-{
-    font-family: inherit ! important;
-}
-
-.mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
-}
-
-.mx_EventTile_content .markdown-body .hljs {
-    display: inline ! important;
-}
-
-/* end of overrides */
-
-/* this is used for the tile for the event which is selected via the URL.  
- * TODO: ultimately we probably want some transition on here.  
+/* this is used for the tile for the event which is selected via the URL.
+ * TODO: ultimately we probably want some transition on here.
 */
-.mx_EventTile_selected { 
+.mx_EventTile_selected .mx_EventTile_line {
    border-left: #76cfa6 5px solid;
-    margin-left: 53px;
-    padding-left: 7px;
+    padding-left: 60px;
+    background-color: #f7f7f7;
+}
+
+.mx_EventTile:hover .mx_EventTile_line,
+.mx_EventTile.menu .mx_EventTile_line
+{
+    background-color: #f7f7f7;
 }

 .mx_EventTile_searchHighlight {
@@ -110,7 +115,11 @@ limitations under the License.

 .mx_EventTile_searchHighlight a {
    background-color: #76cfa6;
-    color: #fff;    
+    color: #fff;
+}
+
+.mx_EventTile_encrypting {
+    color: #abddbc ! important;
 }

 .mx_EventTile_sending {
@@ -141,31 +150,33 @@ limitations under the License.
    margin-right: 10px;
 }

-.mx_EventTile .mx_MessageTimestamp {
-    display: block;
-    visibility: hidden;
-    text-align: right;
+.mx_EventTile_msgOption a {
+    text-decoration: none;
 }

-.mx_EventTile_last .mx_MessageTimestamp {
+.mx_EventTile_last .mx_MessageTimestamp,
+.mx_EventTile:hover .mx_MessageTimestamp,
+.mx_EventTile.menu .mx_MessageTimestamp
+{
    visibility: visible;
 }

-.mx_EventTile:hover .mx_MessageTimestamp {
-    visibility: visible;
+.mx_EventTile_selected .mx_MessageTimestamp {
+    left: 3px;
 }

 .mx_EventTile_editButton {
    position: absolute;
    display: inline-block;
-    visibility: hidden; 
+    visibility: hidden;
+    cursor: pointer;
+    top: 6px;
+    right: 6px;
 }

-.mx_EventTile:hover .mx_EventTile_editButton {
-    visibility: visible;
-}
-
-.mx_EventTile.menu .mx_EventTile_editButton {
+.mx_EventTile:hover .mx_EventTile_editButton,
+.mx_EventTile.menu .mx_EventTile_editButton
+{
    visibility: visible;
 }

@@ -178,6 +189,13 @@ limitations under the License.
    display: inline-block;
    width: 14px;
    height: 14px;
+    top: 29px;
+}
+
+.mx_EventTile_continuation .mx_EventTile_readAvatars,
+.mx_EventTile_info .mx_EventTile_readAvatars
+{
+    top: 7px;
 }

 .mx_EventTile_readAvatars .mx_BaseAvatar {
@@ -190,3 +208,100 @@ limitations under the License.
    font-size: 11px;
    position: absolute;
 }
+
+/* all the overflow-y: hidden; are to trap Zalgos -
+   but they introduce an implicit overflow-x: auto.
+   so make that explicitly hidden too to avoid random
+   horizontal scrollbars occasionally appearing, like in
+   https://github.com/vector-im/vector-web/issues/1154
+    */
+.mx_EventTile_content {
+    display: block;
+    overflow-y: hidden;
+    overflow-x: hidden;
+    margin-right: 34px;
+}
+
+/* De-zalgoing */
+.mx_EventTile_body {
+    overflow-y: hidden;
+}
+
+/* End to end encryption stuff */
+
+.mx_EventTile_e2eIcon {
+    display: block;
+    position: absolute;
+    top: 9px;
+    left: 46px;
+    z-index: 2;
+    cursor: pointer;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    padding-left: 60px;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
+    border-left: #76cfa5 5px solid;
+}
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
+    border-left: #e8bf37 5px solid;
+}
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_MessageTimestamp {
+    left: 3px;
+}
+
+/*
+.mx_EventTile_verified .mx_EventTile_e2eIcon {
+    display: none;
+}
+*/
+
+.mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_e2eIcon,
+.mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_e2eIcon {
+    display: block;
+    left: 41px;
+}
+
+/* Various markdown overrides */
+
+.mx_EventTile_content .markdown-body {
+    font-family: inherit ! important;
+    white-space: normal ! important;
+    line-height: inherit ! important;
+    color: inherit;
+    font-size: 14px;
+}
+
+/* have to use overlay rather than auto otherwise Linux and Windows
+   Chrome gets very confused about vertical spacing:
+   https://github.com/vector-im/vector-web/issues/754
+*/
+.mx_EventTile_content .markdown-body pre {
+    overflow-x: overlay;
+    overflow-y: visible;
+}
+
+.mx_EventTile_content .markdown-body h1,
+.mx_EventTile_content .markdown-body h2,
+.mx_EventTile_content .markdown-body h3,
+.mx_EventTile_content .markdown-body h4,
+.mx_EventTile_content .markdown-body h5,
+.mx_EventTile_content .markdown-body h6
+{
+    font-family: inherit ! important;
+}
+
+.mx_EventTile_content .markdown-body a {
+    color: #76cfa6;
+}
+
+.mx_EventTile_content .markdown-body .hljs {
+    display: inline ! important;
+}
+
+/* end of overrides */
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
+++ b/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-wrap: 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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
@@ -0,0 +1,69 @@
+/*
+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 {
+    padding: 10px 0px;
+}
+
+
+.mx_MemberDeviceInfo_textButton {
+    color: #fff;
+    background-color: #76cfa6;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    width: 95px;
+    border: 0px;
+    font-size: 14px;
+
+    cursor: pointer;
+    display: inline;
+}
+
+.mx_MemberDeviceInfo_deviceId {
+    font-size: 13px;
+}
+
+.mx_MemberDeviceInfo_deviceInfo {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.mx_MemberDeviceInfo_block,
+.mx_MemberDeviceInfo_unblock {
+    float: right;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
+    float: right;
+    padding-left: 1em;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
+    color: #76cfa5;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
+    color: #e8bf37;
+}
+
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
+    color: #ba6363;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
@@ -15,16 +15,31 @@ limitations under the License.
 */

 .mx_MemberInfo {
+    margin-top: 20px;
+    padding-right: 20px;
    height: 100%;
+    overflow-y: auto;
 }

 .mx_MemberInfo h2 {
    margin-top: 6px;
 }

+.mx_MemberInfo .mx_RoomTile_nameContainer {
+    width: 154px;
+}
+
+.mx_MemberInfo .mx_RoomTile_badge {
+    display: none;
+}
+
+.mx_MemberInfo .mx_RoomTile_name {
+    width: 160px;
+}
+
 .mx_MemberInfo_cancel {
    float: right;
-    margin-right: 18px;
+    margin-right: 10px;
    cursor: pointer;
 }

@@ -32,6 +47,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 +69,7 @@ limitations under the License.
 }

 .mx_MemberInfo_profileField {
-    font-color: #999999;    
+    font-color: #999999;
    font-size: 13px;
    position: relative;
    background-color: #fff;
@@ -63,3 +86,13 @@ limitations under the License.
    margin-left: 8px;
    line-height: 23px;
 }
+
+.mx_MemberInfo_createRoom {
+    cursor: pointer;
+}
+
+.mx_MemberInfo_createRoom_label {
+    width: 150px ! important;
+    cursor: pointer;
+}
+
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
+++ b/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;
@@ -44,15 +52,29 @@ limitations under the License.
    flex: 1 1 0px;
 }

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

-.mx_MemberList .mx_SearchableEntityList_expanded {
-    flex: 1 0 0;
-    -webkit-flex: 1 0 0;
+.mx_MemberList_query::-moz-placeholder {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
+}
+
+.mx_MemberList_query::-webkit-input-placeholder {
+    color: #454545;
+    opacity: 0.5;
+    font-size: 14px;
 }

 .mx_MemberList_joined {
@@ -72,17 +94,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 +102,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%;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
@@ -18,35 +18,86 @@ limitations under the License.
    max-width: 960px;
    vertical-align: middle;
    margin: auto;
-    border-top: 2px solid #e1dddd;
+    border-top: 1px solid #e5e5e5;
+    position: relative;
+}
+
+.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_e2eIcon {
+    position: absolute;
+    left: 44px;
+}
+
+.mx_MessageComposer_noperm_error {
+    width: 100%;
+    height: 60px;
+    text-align: center;
+    font-style: italic;
+    color: #888;
+}
+
+.mx_MessageComposer_input_wrapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_MessageComposer_input {
+    flex: 1;
    vertical-align: middle;
-    height: 70px;
+    display: flex;
+    flex-direction: column;
+    min-height: 60px;
+    justify-content: center;
+    align-items: flex-start;
+    font-size: 14px;
+    margin-right: 6px;
+}
+
+.mx_MessageComposer_input_empty .public-DraftEditorPlaceholder-root {
+    display: none;
+}
+
+.mx_MessageComposer_input .DraftEditor-root {
+    width: 100%;
+    flex: 1;
+    max-height: 120px;
+    overflow: auto;
+}
+
+.mx_MessageComposer_input blockquote {
+    color: rgb(119, 119, 119);
+    margin: 0 0 16px;
+    padding: 0 15px;
+    border-left: 4px solid rgb(221, 221, 221);
 }

 .mx_MessageComposer_input textarea {
    display: block;
-    font-size: 15px;
    width: 100%;
    padding: 0px;
    margin-top: 6px;
@@ -59,7 +110,9 @@ limitations under the License.
    box-shadow: none;
    color: #454545;
    background-color: #fff;
-
+    font-size: 14px;
+    max-height: 120px;
+    overflow: auto;
    /* needed for FF */
    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 }
@@ -78,11 +131,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 +146,59 @@ limitations under the License.
    pointer-events: none;
 }

-.mx_MessageComposer_videocall {
-    padding-right: 10px;
-    padding-top: 4px;
+.mx_MessageComposer_formatting {
+    cursor: pointer;
+    margin: 0 11px;
 }

-.mx_MessageComposer_voicecall {
-    padding-right: 10px;
-    padding-top: 4px;
+.mx_MessageComposer_formatbar_wrapper {
+    width: 100%;
+    background-color: #f7f7f7;
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
 }

-.mx_MessageComposer_upload object {
-    margin-top: 5px;
+.mx_MessageComposer_formatbar {
+    margin: auto;
+    max-width: 960px;
+    display: flex;
+
+    height: 30px;
+
+    box-sizing: border-box;
+    padding-left: 62px;
+
+    flex-direction: row;
+    align-items: center;
+    font-size: 10px;
+    color: #888;
+}
+
+.mx_MessageComposer_formatbar * {
+    margin-right: 4px;
+}
+
+.mx_MessageComposer_format_button,
+.mx_MessageComposer_formatbar_cancel,
+.mx_MessageComposer_formatbar_markdown {
+    cursor: pointer;
+}
+
+.mx_MessageComposer_format_button_disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.mx_MessageComposer_formatbar_cancel {
+    margin-right: 22px;
+}
+
+.mx_MessageComposer_formatbar_markdown {
+    margin-right: 64px;
+}
+
+.mx_MessageComposer_input_markdownIndicator {
+    cursor: pointer;
+    height: 10px;
+    padding: 4px 4px 4px 0;
+    opacity: 0.8;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
+++ b/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;
 }

--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
@@ -15,7 +15,6 @@ limitations under the License.
 */

 .mx_RoomList {
-    padding-top: 24px;
    padding-bottom: 12px;
    min-height: 400px;
 }
@@ -33,3 +32,8 @@ limitations under the License.
    overflow-x: hidden ! important;
    overflow-y: scroll ! important;
 }
+
+/* Make sure the scrollbar is above the sticky headers from RoomList */
+.mx_RoomList_scrollbar .gm-scrollbar.-vertical {
+    z-index: 6;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
+++ b/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;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
@@ -19,6 +19,30 @@ limitations under the License.
    margin-bottom: 20px;
 }

+.mx_RoomSettings_leaveButton,
+.mx_RoomSettings_integrationsButton {
+    height: 36px;
+    background-color: #76cfa6;
+    border-radius: 36px;
+    margin-right: 8px;
+    color: #fff;
+    line-height: 34px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.mx_RoomSettings_e2eIcon {
+    padding-left: 4px;
+    padding-right: 7px;
+}
+
+.mx_RoomSettings_leaveButton {
+    margin-right: 32px;
+}
+
 .mx_RoomSettings_powerLevels {
    display: table;
 }
@@ -73,12 +97,14 @@ limitations under the License.
    height: 37px;
    border: 1px solid #979797;
    margin-right: 13px;
+    cursor: pointer;
 }

 .mx_RoomSettings .mx_RoomSettings_roomColor_selected {
    position: absolute;
    left: 10px;
    top: 4px;
+    cursor: default ! important;
 }

 .mx_RoomSettings .mx_RoomSettings_roomColorPrimary {
@@ -107,7 +133,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 +156,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;
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -15,121 +15,183 @@ 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_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -54px;
+    left: -12px;
+}
+
+
+.mx_RoomTile_nameContainer {
+    display: inline-block;
+    width: 180px;
+    height: 24px;
+}
+
+.mx_RoomTile_avatar_container {
+    position: relative;
 }

 .mx_RoomTile_avatar {
-    display: 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_dm {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    right: -5px;
+    z-index: 2;
+}
+
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:before,
+.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:before {
+    display: block;
+    position: absolute;
+    content: "";
+    border-radius: 40px;
+    background-image: url("img/icons_ellipsis.svg");
+    background-size: 25px;
+    width: 24px;
+    height: 24px;
+    z-index: 4;
+}
+
+.mx_RoomTile:hover .mx_RoomTile_avatar_container:after,
+.mx_RoomTile_avatar_container.mx_RoomTile_avatar_roomTagMenu:after {
+    display: block;
+    position: absolute;
+    content: "";
+    border-radius: 40px;
+    background: #4A4A4A;
+    bottom: 0;
+    width: 24px;
+    height: 24px;
+    opacity: 0.6;
+    z-index: 1;
+}
+
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container:before {
+    display: none;
+}
+
+.collapsed .mx_RoomTile:hover .mx_RoomTile_avatar_container: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 {
-    font-style: italic;
-    color: #454545;
 }

 .mx_RoomTile_invite {
-/*    color: rgba(69, 69, 69, 0.5);
-*/
+/*    color: rgba(69, 69, 69, 0.5); */
+}
+
+.collapsed .mx_RoomTile_nameContainer {
+    width: 60px; /* colapsed panel width */
 }

 .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: 0px;
+    min-width: 12px;
    border-radius: 16px;
-    width: 9px;
-    height: 9px;
-    position: absolute;
-    right: 9px;
-    bottom: 3px;
+    padding: 0px 4px 0px 4px;
+    z-index: 3;
+}
+
+/* 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: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
 }
-*/

 .mx_RoomTile_badge {
-    background-color: #ff0064;
-    width: 4px;
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
    position: absolute;
-    left: 0px;
-    top: 5px;
-    bottom: 5px;
-} 
+    right: 8px; /*gutter */
+    top: 9px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    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(255, 255, 255, 0.8);
 }

-.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 {
@@ -137,5 +199,3 @@ limitations under the License.
    right: 0px;
 }

-.mx_RoomTile:hover {
-}
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
+++ b/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 {
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
+++ b/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;
 }

@@ -33,10 +34,13 @@ limitations under the License.
    padding-bottom: 2px;
    margin-bottom: 6px;
    border-radius: 30px;
+    position: relative;
+    top: 1px;
 }

 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
    opacity: 1.0;
+    vertical-align: initial;
    color: #fff;
 }

@@ -47,5 +51,6 @@ limitations under the License.

 .mx_TabCompleteBar_text {
    color: #4a4a4a;
+    vertical-align: middle;
    opacity: 0.5;
 }
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
+++ b/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;
--- a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css
@@ -0,0 +1,51 @@
+/*
+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;
+}
+
+.mx_DevicesPanel_myDevice {
+    font-weight: bold;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css
@@ -0,0 +1,31 @@
+/*
+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 .mx_Dialog {
+    width: 60%;
+    height: 70%;
+    overflow: hidden;
+    padding: 0px;
+    max-width: initial;
+    max-height: initial;
+}
+
+.mx_IntegrationsManager iframe {
+    background-color: #fff;
+    border: 0px;
+    width: 100%;
+    height: 100%;
+}
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
@@ -12,4 +12,14 @@ distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-*/
+*/
+
+.mx_CallView_voice {
+    background-color: #76cfa6;
+    color: #fff;
+    cursor: pointer;
+    text-align: center;
+    padding: 6px;
+    font-weight: bold;
+    font-size: 13px;
+}
--- a/src/skins/vector/css/vector-web/fonts.css
+++ b/src/skins/vector/css/vector-web/fonts.css
@@ -0,0 +1,65 @@
+/*
+ * Open Sans
+ * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
+ */
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Open Sans';
+    src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}
+
+/*
+ * Fira Mono
+ * Used for monospace copy, i.e. code
+ */
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Mono';
+    src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
--- a/src/skins/vector/css/vector-web/structures/LeftPanel.css
+++ b/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,12 @@ limitations under the License.
    -webkit-flex: 1 1 0;
    flex: 1 1 0;

-    overflow-y: auto; 
+    overflow-y: auto;
+    z-index: 6;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu {
+   flex: 0 0 160px;
 }

 .mx_LeftPanel .mx_BottomLeftMenu {
@@ -58,23 +63,56 @@ 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(118, 207, 166, 0.2);
+    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_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people,
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    display: inline-block;
+    cursor: pointer;
+}
+
+.collapsed .mx_BottomLeftMenu_directory,
+.collapsed .mx_BottomLeftMenu_createRoom,
+.collapsed .mx_BottomLeftMenu_people,
+.collapsed .mx_BottomLeftMenu_settings {
+    margin-right: 0px ! important;
+    padding-top: 3px ! important;
+    padding-bottom: 3px ! important;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_directory,
+.mx_LeftPanel .mx_BottomLeftMenu_createRoom,
+.mx_LeftPanel .mx_BottomLeftMenu_people {
+    margin-right: 10px;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_settings {
+    float: right;
+}
+
+.mx_LeftPanel.collapsed .mx_BottomLeftMenu_settings {
+    float: none;
+}
+
+.mx_LeftPanel .mx_BottomLeftMenu_tooltip {
+    display: inline-block;
+    position: relative;
+    top: -25px;
+    left: 6px;
+}
--- a/src/skins/vector/css/vector-web/structures/RightPanel.css
+++ b/src/skins/vector/css/vector-web/structures/RightPanel.css
@@ -33,60 +33,100 @@ 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;
+    margin-left: 0px;
 }

 .mx_RightPanel_headerButton {
    cursor: pointer;
    display: table-cell;
-    vertical-align: middle;    
-    padding-left: 15px;
-    padding-right: 15px;
+    vertical-align: top;
+    padding-left: 4px;
+    padding-right: 5px;
+    text-align: center;
    position: relative;
 }

 .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 1 0;
+    -webkit-flex: 1 1 0;
+}
+
+.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;
+}
+
+.mx_RightPanel_footer .mx_RightPanel_invite {
+    line-height: 35px;
+    font-size: 14px;
+	color: #4A4A4A;
+    padding-top: 13px;
+    padding-left: 5px;
+    cursor: pointer;
+}
+
+.collapsed .mx_RightPanel_footer .mx_RightPanel_invite {
+    display: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon {
+    display: inline-block;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_icon object {
+    pointer-events: none;
+}
+
+.mx_RightPanel_invite .mx_RightPanel_message {
+    display: inline-block;
+    vertical-align: top;
+    padding-left: 10px
 }
--- a/src/skins/vector/css/vector-web/structures/RoomDirectory.css
+++ b/src/skins/vector/css/vector-web/structures/RoomDirectory.css
@@ -26,40 +26,56 @@ 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;
 }

+.mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
+    justify-content: flex-start;
+    -webkit-justify-content: flex-start;
+}
+
+.mx_RoomDirectory_listheader {
+    display: table;
+    width: 100%;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    border-spacing: 5px;
+}
+
 .mx_RoomDirectory_input {
-    margin: auto;
+    display: table-cell;
    border-radius: 3px;
    border: 1px solid #c7c7c7;
    font-weight: 300;
    font-size: 13px;
    padding: 9px;
-    margin-top: 12px;
-    margin-bottom: 12px;
+}
+
+.mx_RoomDirectory_listheader .mx_NetworkDropdown {
+    display: table-cell;
+    width: 100%;
 }

 .mx_RoomDirectory_tableWrapper {
    overflow-y: auto;
-    -webkit-flex: 1 1 0;    
+    -webkit-flex: 1 1 0;
    flex: 1 1 0;
 }

@@ -116,6 +132,7 @@ limitations under the License.
 .mx_RoomDirectory_roomMemberCount {
    text-align: right;
    width: 100px;
+    padding-right: 10px;
 }

 .mx_RoomDirectory_table tr {
--- a/src/skins/vector/css/vector-web/structures/RoomSubList.css
+++ b/src/skins/vector/css/vector-web/structures/RoomSubList.css
@@ -20,22 +20,222 @@ limitations under the License.
    width: 100%;
 }

+.mx_RoomSubList_labelContainer {
+    height: 31px; /* mx_RoomSubList_label height including border */
+    width: 235px; /* LHS Panel width */
+    position: relative;
+}
+
 .mx_RoomSubList_label {
+    position: relative;
    text-transform: uppercase;
    color: #3d3b39;
    font-weight: 600;
-    font-size: 13px;
-    padding-left: 12px;
-    padding-right: 12px;
-    margin-top: 8px;
-    margin-bottom: 4px;
+    font-size: 12px;
+    width: 203px; /* padding + width = LHS Panel width */
+    height: 17px; /* padding + height = 29px, same as mx_RoomSubList_stickyContainer */
+    padding-left: 16px; /* gutter */
+    padding-right: 16px; /* gutter */
+    padding-top: 6px;
+    padding-bottom: 6px;
+    cursor: pointer;
+    background-color: #d3efe1;
+    border-top: solid 2px #eaf5f0;
+}
+
+.mx_RoomSubList_label.mx_RoomSubList_fixed {
+    position: fixed;
+    top: 0;
+    z-index: 5;
+    /* pointer-events: none; */
+}
+
+.collapsed .mx_RoomSubList_label {
+    height: 17px;
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.collapsed .mx_RoomSubList_labelContainer {
+    width: 28px; /* collapsed LHS Panel width */
+}
+
+.mx_RoomSubList_roomCount {
+    display: inline-block;
+    font-size: 12px;
+    font-weight: normal;
+    color: #76cfa6;
+    padding-left: 5px;
+    text-transform: none;
+}
+
+.collapsed .mx_RoomSubList_roomCount {
+    display: none;
+}
+
+.mx_RoomSubList_badge {
+    display: inline-block;
+    min-width: 15px;
+    height: 15px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: 7px;
+    border-radius: 8px;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 4px;
+    padding-right: 4px;
+    background-color: #76cfa6;
+}
+
+/*
+.collapsed .mx_RoomSubList_badge {
+    display: none;
+}
+*/
+
+.mx_RoomSubList_badgeHighlight {
+    background-color: #ff0064;
+}
+
+/* This is the bottom of the speech bubble */
+.mx_RoomSubList_badgeHighlight:after {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+    margin-left: 5px;
+    border-top: 5px solid #ff0064;
+    border-right: 7px solid transparent;
+}
+
+/* Hide the bottom of speech bubble */
+.collapsed .mx_RoomSubList_badgeHighlight:after {
+    display: none;
 }

 .mx_RoomSubList_chevron {
-    padding-left: 5px;
    pointer-events: none;
+    position: absolute;
+    right: 41px;
+    top: 11px;
 }

-.collapsed .mx_RoomSubList_chevron  {
-    padding-left: 13px;
+.mx_RoomSubList_chevronDown {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 6px solid #76cfa6;
 }
+
+.mx_RoomSubList_chevronUp {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 6px solid #76cfa6;
+}
+
+.mx_RoomSubList_chevronRight {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-left: 6px solid #76cfa6;
+    border-bottom: 5px solid transparent;
+}
+
+/* The overflow section */
+.mx_RoomSubList_ellipsis {
+    display: block;
+    line-height: 11px;
+    height: 18px;
+    position: relative;
+    cursor: pointer;
+    font-size: 13px;
+}
+
+.collapsed .mx_RoomSubList_ellipsis {
+    height: 20px;
+}
+
+.mx_RoomSubList_line {
+    display: inline-block;
+    width: 159px;
+    border-top: dotted 2px #76cfa6;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_line {
+    display: none;
+}
+
+.mx_RoomSubList_more {
+    display: inline-block;
+    text-transform: uppercase;
+    font-size: 10px;
+    font-weight: 600;
+    text-align: left;
+    color: #76cfa6;
+    padding-left: 7px;
+    padding-right: 7px;
+    padding-left: 7px;
+    vertical-align: middle;
+}
+
+.collapsed .mx_RoomSubList_more {
+    display: none;
+}
+
+.mx_RoomSubList_moreBadge {
+    display: inline-block;
+    min-width: 15px;
+    height: 13px;
+    position: absolute;
+    right: 8px; /*gutter */
+    top: -2px;
+    border-radius: 8px;
+    border: solid 1px #76cfa6;
+    color: #fff;
+    font-weight: 600;
+    font-size: 10px;
+    text-align: center;
+    padding-top: 1px;
+    padding-left: 3px;
+    padding-right: 3px;
+    background-color: #fff;
+    vertical-align: middle;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
+    background-color: #76cfa6;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
+    background-color: #ff0064;
+    border: 0;
+    padding-top: 3px;
+    padding-left: 4px;
+    padding-right: 4px;
+}
+
+.collapsed .mx_RoomSubList_moreBadge {
+    position: static;
+    margin-left: 16px;
+    margin-top: 2px;
+}
+
+.mx_RoomSubList_ellipsis .mx_RoomSubList_chevronDown {
+    position: relative;
+    top: 4px;
+    left: 2px;
+}
+
+
--- a/src/skins/vector/css/vector-web/structures/ViewSource.css
+++ b/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;
 }
--- a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
+++ b/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;
+}
--- a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
+++ b/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;
+}
--- a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css
+++ b/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 */
+}
--- a/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css
+++ b/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css
@@ -0,0 +1,24 @@
+/*
+Copyright 2016 Aviral Dasgupta
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ChangelogDialog_content {
+    max-height: 300px;
+    overflow: auto;
+}
+
+.mx_ChangelogDialog_li {
+    padding: 0.2em;
+}
--- a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
+++ b/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
@@ -0,0 +1,77 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_NetworkDropdown {
+    position: relative;
+}
+
+.mx_NetworkDropdown_input {
+    position: relative;
+    border-radius: 3px;
+    border: 1px solid #c7c7c7;
+    font-weight: 300;
+    font-size: 13px;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    user-select: none;
+}
+
+.mx_NetworkDropdown_arrow {
+    border-color: #4a4a4a transparent transparent;
+    border-style: solid;
+    border-width: 5px 5px 0;
+    display: block;
+    height: 0;
+    position: absolute;
+    right: 10px;
+    top: 14px;
+    width: 0
+}
+
+.mx_NetworkDropdown_networkoption {
+    height: 35px;
+    line-height: 35px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+.mx_NetworkDropdown_networkoption img {
+    margin: 5px;
+    width: 25px;
+    vertical-align: middle;
+}
+
+.mx_NetworkDropdown_menu {
+    position: absolute;
+    left: -1px;
+    right: -1px;
+    top: 100%;
+    z-index: 2;
+    margin: 0;
+    padding: 0px;
+    border-radius: 3px;
+    border: 1px solid #76cfa6;
+    background-color: white;
+}
+
+.mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
+    background-color: #ddd;
+}
+
+.mx_NetworkDropdown_menu_network {
+    font-weight: bold;
+}
+
--- a/Show More
+++ b/Show More