From bba6664b1cf685d9666da63eacb4d8bbcb0ac764 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:58:42 +0000
Subject: [PATCH 001/168] bump to dep on react-sdk 0.8.3-electron

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 34df1c4eb4..a8197c226c 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
     "matrix-js-sdk": "0.7.2",
-    "matrix-react-sdk": "0.8.3",
+    "matrix-react-sdk": "0.8.3-electron",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From cbf105f2a0c448dcd27302be13de299fb43e7d4b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:59:41 +0000
Subject: [PATCH 002/168] Revert "bump to dep on react-sdk 0.8.3-electron"

This reverts commit bba6664b1cf685d9666da63eacb4d8bbcb0ac764.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index a8197c226c..34df1c4eb4 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
     "matrix-js-sdk": "0.7.2",
-    "matrix-react-sdk": "0.8.3-electron",
+    "matrix-react-sdk": "0.8.3",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 078493912c97f83971ca225e962077daa0e2dd79 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 03:18:12 +0000
Subject: [PATCH 003/168] make electron send email validation URLs with a
 nextlink of riot.im rather than file:///

---
 src/vector/index.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/vector/index.js b/src/vector/index.js
index b791783b98..8231950b49 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -136,11 +136,20 @@ var onNewScreen = function(screen) {
 // click back to the client having registered.
 // It's up to us to recognise if we're loaded with
 // this URL and tell MatrixClient to resume registration.
+//
+// If we're in electron, we should never pass through a file:// URL otherwise
+// the identity server will try to 302 the browser to it, which breaks horribly.
+// so in that instance, hardcode to use riot.im/app for now instead.
 var makeRegistrationUrl = function() {
-    return window.location.protocol + '//' +
-           window.location.host +
-           window.location.pathname +
-           '#/register';
+    if (window.location.protocol === "file:") {
+        return 'https://riot.im/app/#/register';
+    }
+    else {
+        return window.location.protocol + '//' +
+               window.location.host +
+               window.location.pathname +
+               '#/register';
+    }
 }
 
 window.addEventListener('hashchange', onHashChange);

From 8c523be6f52189ea0b731e6b0181d09f0b1f2a62 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:13:20 +0000
Subject: [PATCH 004/168] add gnu-tar to debian electron build deps

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 50a8ff041e..54709e08b1 100644
--- a/README.md
+++ b/README.md
@@ -121,6 +121,7 @@ The only platform that can build packages for all three platforms is macOS:
 ```
 brew install wine --without-x11
 brew install mono
+brew install gnu-tar
 npm install
 npm run build:electron
 ```

From 4de042bf587f42a9f91df4db22c536a6f8a6c0b6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 18:13:33 +0000
Subject: [PATCH 005/168] empirically fix win32 shortcut in start menu

---
 electron/src/squirrelhooks.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js
index 10fb8d9ec5..295ef5cfda 100644
--- a/electron/src/squirrelhooks.js
+++ b/electron/src/squirrelhooks.js
@@ -3,7 +3,7 @@ const spawn = require('child_process').spawn;
 const app = require('electron').app;
 
 function run_update_exe(args, done) {
-    const updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe');
+    const updateExe = path.resolve(path.dirname(process.execPath), 'Update.exe');
     spawn(updateExe, args, {
       detached: true
     }).on('close', done);

From 3f3772463b4c304d6d790b54a5c2d825e900facb Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 19:04:00 +0000
Subject: [PATCH 006/168] bump react dep

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 34df1c4eb4..1d2bb88610 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
     "matrix-js-sdk": "0.7.2",
-    "matrix-react-sdk": "0.8.3",
+    "matrix-react-sdk": "0.8.4",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 0129da4dd6990e965a5572073c05ea4e767f7dc3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 19:07:30 +0000
Subject: [PATCH 007/168] Prepare changelog for v0.9.5

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5427b8dcfe..265cbe80fd 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+Changes in [0.9.5](https://github.com/vector-im/riot-web/releases/tag/v0.9.5) (2016-12-24)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.4...v0.9.5)
+
+ * make electron send email validation URLs with a nextlink of riot.im rather than file:///
+ * add gnu-tar to debian electron build deps
+ * fix win32 shortcut in start menu
+
 Changes in [0.9.4](https://github.com/vector-im/riot-web/releases/tag/v0.9.4) (2016-12-22)
 ==========================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.3...v0.9.4)

From 747408871d71c8d020672e39140725c136a3b709 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 24 Dec 2016 19:07:31 +0000
Subject: [PATCH 008/168] v0.9.5

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 1d2bb88610..02e280a584 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From bacb284415a90811fbad2bae74b1921bf92a8fd9 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Dec 2016 02:01:28 +0000
Subject: [PATCH 009/168] basic jig for SASS-based themed CSS (one bundle per
 theme)

---
 package.json                                               | 6 ++++--
 src/skins/vector/css/{common.css => _common.scss}          | 0
 .../{ContextualMenu.css => _ContextualMenu.scss}           | 0
 .../structures/{CreateRoom.css => _CreateRoom.scss}        | 0
 .../structures/{FilePanel.css => _FilePanel.scss}          | 0
 .../structures/{MatrixChat.css => _MatrixChat.scss}        | 0
 .../{NotificationPanel.css => _NotificationPanel.scss}     | 0
 .../structures/{RoomStatusBar.css => _RoomStatusBar.scss}  | 0
 .../structures/{RoomView.css => _RoomView.scss}            | 0
 .../structures/{SearchBox.css => _SearchBox.scss}          | 0
 .../structures/{UploadBar.css => _UploadBar.scss}          | 0
 .../structures/{UserSettings.css => _UserSettings.scss}    | 0
 .../structures/login/{Login.css => _Login.scss}            | 0
 .../views/avatars/{BaseAvatar.css => _BaseAvatar.scss}     | 0
 .../{ChatInviteDialog.css => _ChatInviteDialog.scss}       | 0
 ...EncryptedEventDialog.css => _EncryptedEventDialog.scss} | 0
 ...SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} | 0
 .../{AddressSelector.css => _AddressSelector.scss}         | 0
 .../views/elements/{AddressTile.css => _AddressTile.scss}  | 0
 .../{DirectorySearchBox.css => _DirectorySearchBox.scss}   | 0
 ...erEventListSummary.css => _MemberEventListSummary.scss} | 0
 .../views/elements/{ProgressBar.css => _ProgressBar.scss}  | 0
 .../views/elements/{RichText.css => _RichText.scss}        | 0
 .../views/login/{ServerConfig.css => _ServerConfig.scss}   | 0
 .../views/messages/{MImageBody.css => _MImageBody.scss}    | 0
 .../views/messages/{MNoticeBody.css => _MNoticeBody.scss}  | 0
 .../views/messages/{MTextBody.css => _MTextBody.scss}      | 0
 .../messages/{TextualEvent.css => _TextualEvent.scss}      | 0
 .../views/messages/{UnknownBody.css => _UnknownBody.scss}  | 0
 .../views/rooms/{Autocomplete.css => _Autocomplete.scss}   | 0
 .../views/rooms/{EntityTile.css => _EntityTile.scss}       | 0
 .../views/rooms/{EventTile.css => _EventTile.scss}         | 0
 .../{LinkPreviewWidget.css => _LinkPreviewWidget.scss}     | 0
 .../rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} | 0
 .../views/rooms/{MemberInfo.css => _MemberInfo.scss}       | 0
 .../views/rooms/{MemberList.css => _MemberList.scss}       | 0
 .../rooms/{MessageComposer.css => _MessageComposer.scss}   | 0
 .../views/rooms/{PresenceLabel.css => _PresenceLabel.scss} | 0
 .../views/rooms/{RoomHeader.css => _RoomHeader.scss}       | 0
 .../views/rooms/{RoomList.css => _RoomList.scss}           | 0
 .../rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss}     | 0
 .../views/rooms/{RoomSettings.css => _RoomSettings.scss}   | 0
 .../views/rooms/{RoomTile.css => _RoomTile.scss}           | 0
 ...SearchableEntityList.css => _SearchableEntityList.scss} | 0
 .../rooms/{TabCompleteBar.css => _TabCompleteBar.scss}     | 0
 ...TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} | 0
 .../settings/{DevicesPanel.css => _DevicesPanel.scss}      | 0
 .../{IntegrationsManager.css => _IntegrationsManager.scss} | 0
 .../views/voip/{CallView.css => _CallView.scss}            | 0
 .../voip/{IncomingCallbox.css => _IncomingCallbox.scss}    | 0
 .../views/voip/{VideoView.css => _VideoView.scss}          | 0
 src/skins/vector/css/themes/dark.scss                      | 7 +++++++
 src/skins/vector/css/themes/light.scss                     | 4 ++++
 src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} | 0
 .../{CompatibilityPage.css => _CompatibilityPage.scss}     | 0
 .../structures/{LeftPanel.css => _LeftPanel.scss}          | 0
 .../structures/{RightPanel.css => _RightPanel.scss}        | 0
 .../structures/{RoomDirectory.css => _RoomDirectory.scss}  | 0
 .../structures/{RoomSubList.css => _RoomSubList.scss}      | 0
 .../structures/{ViewSource.css => _ViewSource.scss}        | 0
 .../{MessageContextMenu.css => _MessageContextMenu.scss}   | 0
 ...eContextMenu.css => _NotificationStateContextMenu.scss} | 0
 .../{RoomTagContextMenu.css => _RoomTagContextMenu.scss}   | 0
 .../dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} | 0
 .../{NetworkDropdown.css => _NetworkDropdown.scss}         | 0
 .../views/elements/{ImageView.css => _ImageView.scss}      | 0
 .../views/elements/{Spinner.css => _Spinner.scss}          | 0
 .../globals/{GuestWarningBar.css => _GuestWarningBar.scss} | 0
 .../globals/{MatrixToolbar.css => _MatrixToolbar.scss}     | 0
 .../{MessageTimestamp.css => _MessageTimestamp.scss}       | 0
 .../messages/{SenderProfile.css => _SenderProfile.scss}    | 0
 .../rooms/{RoomDropTarget.css => _RoomDropTarget.scss}     | 0
 .../views/rooms/{RoomTooltip.css => _RoomTooltip.scss}     | 0
 .../views/rooms/{SearchBar.css => _SearchBar.scss}         | 0
 .../settings/{Notifications.css => _Notifications.scss}    | 0
 src/vector/index.js                                        | 2 +-
 webpack.config.js                                          | 1 +
 77 files changed, 17 insertions(+), 3 deletions(-)
 rename src/skins/vector/css/{common.css => _common.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{ContextualMenu.css => _ContextualMenu.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{CreateRoom.css => _CreateRoom.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{FilePanel.css => _FilePanel.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{MatrixChat.css => _MatrixChat.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{NotificationPanel.css => _NotificationPanel.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{RoomStatusBar.css => _RoomStatusBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{RoomView.css => _RoomView.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{SearchBox.css => _SearchBox.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{UploadBar.css => _UploadBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/{UserSettings.css => _UserSettings.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/structures/login/{Login.css => _Login.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/avatars/{BaseAvatar.css => _BaseAvatar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{ChatInviteDialog.css => _ChatInviteDialog.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{EncryptedEventDialog.css => _EncryptedEventDialog.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/dialogs/{SetDisplayNameDialog.css => _SetDisplayNameDialog.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressSelector.css => _AddressSelector.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{AddressTile.css => _AddressTile.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{DirectorySearchBox.css => _DirectorySearchBox.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{MemberEventListSummary.css => _MemberEventListSummary.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{ProgressBar.css => _ProgressBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/elements/{RichText.css => _RichText.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/login/{ServerConfig.css => _ServerConfig.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/messages/{MImageBody.css => _MImageBody.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/messages/{MNoticeBody.css => _MNoticeBody.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/messages/{MTextBody.css => _MTextBody.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/messages/{TextualEvent.css => _TextualEvent.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/messages/{UnknownBody.css => _UnknownBody.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{Autocomplete.css => _Autocomplete.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EntityTile.css => _EntityTile.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{EventTile.css => _EventTile.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{LinkPreviewWidget.css => _LinkPreviewWidget.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberDeviceInfo.css => _MemberDeviceInfo.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberInfo.css => _MemberInfo.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MemberList.css => _MemberList.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{MessageComposer.css => _MessageComposer.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{PresenceLabel.css => _PresenceLabel.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomHeader.css => _RoomHeader.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomList.css => _RoomList.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomPreviewBar.css => _RoomPreviewBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomSettings.css => _RoomSettings.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{RoomTile.css => _RoomTile.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{SearchableEntityList.css => _SearchableEntityList.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TabCompleteBar.css => _TabCompleteBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/rooms/{TopUnreadMessagesBar.css => _TopUnreadMessagesBar.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/settings/{DevicesPanel.css => _DevicesPanel.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/settings/{IntegrationsManager.css => _IntegrationsManager.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/voip/{CallView.css => _CallView.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/voip/{IncomingCallbox.css => _IncomingCallbox.scss} (100%)
 rename src/skins/vector/css/matrix-react-sdk/views/voip/{VideoView.css => _VideoView.scss} (100%)
 create mode 100644 src/skins/vector/css/themes/dark.scss
 create mode 100644 src/skins/vector/css/themes/light.scss
 rename src/skins/vector/css/vector-web/{fonts.css => _fonts.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{CompatibilityPage.css => _CompatibilityPage.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{LeftPanel.css => _LeftPanel.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{RightPanel.css => _RightPanel.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{RoomDirectory.css => _RoomDirectory.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{RoomSubList.css => _RoomSubList.scss} (100%)
 rename src/skins/vector/css/vector-web/structures/{ViewSource.css => _ViewSource.scss} (100%)
 rename src/skins/vector/css/vector-web/views/context_menus/{MessageContextMenu.css => _MessageContextMenu.scss} (100%)
 rename src/skins/vector/css/vector-web/views/context_menus/{NotificationStateContextMenu.css => _NotificationStateContextMenu.scss} (100%)
 rename src/skins/vector/css/vector-web/views/context_menus/{RoomTagContextMenu.css => _RoomTagContextMenu.scss} (100%)
 rename src/skins/vector/css/vector-web/views/dialogs/{ChangelogDialog.css => _ChangelogDialog.scss} (100%)
 rename src/skins/vector/css/vector-web/views/directory/{NetworkDropdown.css => _NetworkDropdown.scss} (100%)
 rename src/skins/vector/css/vector-web/views/elements/{ImageView.css => _ImageView.scss} (100%)
 rename src/skins/vector/css/vector-web/views/elements/{Spinner.css => _Spinner.scss} (100%)
 rename src/skins/vector/css/vector-web/views/globals/{GuestWarningBar.css => _GuestWarningBar.scss} (100%)
 rename src/skins/vector/css/vector-web/views/globals/{MatrixToolbar.css => _MatrixToolbar.scss} (100%)
 rename src/skins/vector/css/vector-web/views/messages/{MessageTimestamp.css => _MessageTimestamp.scss} (100%)
 rename src/skins/vector/css/vector-web/views/messages/{SenderProfile.css => _SenderProfile.scss} (100%)
 rename src/skins/vector/css/vector-web/views/rooms/{RoomDropTarget.css => _RoomDropTarget.scss} (100%)
 rename src/skins/vector/css/vector-web/views/rooms/{RoomTooltip.css => _RoomTooltip.scss} (100%)
 rename src/skins/vector/css/vector-web/views/rooms/{SearchBar.css => _SearchBar.scss} (100%)
 rename src/skins/vector/css/vector-web/views/settings/{Notifications.css => _Notifications.scss} (100%)

diff --git a/package.json b/package.json
index 3f9f46e238..c657aad641 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "build:config": "cpx config.json webapp/",
     "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
+    "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
@@ -44,7 +44,7 @@
     "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w",
     "start:js": "webpack-dev-server -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
-    "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
+    "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"",
     "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
     "clean": "rimraf build lib webapp electron/dist",
@@ -113,11 +113,13 @@
     "karma-webpack": "^1.7.0",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
+    "node-sass": "^4.1.1",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
     "react-addons-perf": "^15.4.0",
     "react-addons-test-utils": "^15.4.0",
     "rimraf": "^2.4.3",
+    "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.5",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.16.2"
diff --git a/src/skins/vector/css/common.css b/src/skins/vector/css/_common.scss
similarity index 100%
rename from src/skins/vector/css/common.css
rename to src/skins/vector/css/_common.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/ContextualMenu.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/CreateRoom.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/FilePanel.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/MatrixChat.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/NotificationPanel.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/RoomStatusBar.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/SearchBox.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/UploadBar.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/UserSettings.css
rename to src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/Login.css b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/structures/login/Login.css
rename to src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/avatars/BaseAvatar.css
rename to src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/EncryptedEventDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/dialogs/SetDisplayNameDialog.css
rename to src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressSelector.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/AddressTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/MemberEventListSummary.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/ProgressBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/elements/RichText.css
rename to src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/login/ServerConfig.css
rename to src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MNoticeBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MNoticeBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/MTextBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_MTextBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/TextualEvent.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_TextualEvent.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css b/src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/messages/UnknownBody.css
rename to src/skins/vector/css/matrix-react-sdk/views/messages/_UnknownBody.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/Autocomplete.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EntityTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/LinkPreviewWidget.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberInfo.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MemberList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/PresenceLabel.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_PresenceLabel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomList.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomPreviewBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomSettings.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/SearchableEntityList.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TabCompleteBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/rooms/TopUnreadMessagesBar.css
rename to src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/settings/DevicesPanel.css
rename to src/skins/vector/css/matrix-react-sdk/views/settings/_DevicesPanel.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/settings/IntegrationsManager.css
rename to src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/CallView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/IncomingCallbox.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css b/src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
similarity index 100%
rename from src/skins/vector/css/matrix-react-sdk/views/voip/VideoView.css
rename to src/skins/vector/css/matrix-react-sdk/views/voip/_VideoView.scss
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
new file mode 100644
index 0000000000..19ab2cde4b
--- /dev/null
+++ b/src/skins/vector/css/themes/dark.scss
@@ -0,0 +1,7 @@
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #dddddd;
+$primary-bg-color: #2d2d2d;
+
+// button UI (white-on-green in light skin)
+
+@import "../_components"
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss
new file mode 100644
index 0000000000..e0ad84f62f
--- /dev/null
+++ b/src/skins/vector/css/themes/light.scss
@@ -0,0 +1,4 @@
+$primary-fg-color: #454545;
+$primary-bg-color: #ffffff;
+
+@import "../_components"
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/_fonts.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/fonts.css
rename to src/skins/vector/css/vector-web/_fonts.scss
diff --git a/src/skins/vector/css/vector-web/structures/CompatibilityPage.css b/src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/CompatibilityPage.css
rename to src/skins/vector/css/vector-web/structures/_CompatibilityPage.scss
diff --git a/src/skins/vector/css/vector-web/structures/LeftPanel.css b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/LeftPanel.css
rename to src/skins/vector/css/vector-web/structures/_LeftPanel.scss
diff --git a/src/skins/vector/css/vector-web/structures/RightPanel.css b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/RightPanel.css
rename to src/skins/vector/css/vector-web/structures/_RightPanel.scss
diff --git a/src/skins/vector/css/vector-web/structures/RoomDirectory.css b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/RoomDirectory.css
rename to src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
diff --git a/src/skins/vector/css/vector-web/structures/RoomSubList.css b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/RoomSubList.css
rename to src/skins/vector/css/vector-web/structures/_RoomSubList.scss
diff --git a/src/skins/vector/css/vector-web/structures/ViewSource.css b/src/skins/vector/css/vector-web/structures/_ViewSource.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/structures/ViewSource.css
rename to src/skins/vector/css/vector-web/structures/_ViewSource.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/context_menus/MessageContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_MessageContextMenu.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/context_menus/NotificationStateContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_NotificationStateContextMenu.scss
diff --git a/src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/context_menus/RoomTagContextMenu.css
rename to src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
diff --git a/src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css b/src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/dialogs/ChangelogDialog.css
rename to src/skins/vector/css/vector-web/views/dialogs/_ChangelogDialog.scss
diff --git a/src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/directory/NetworkDropdown.css
rename to src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/elements/ImageView.css
rename to src/skins/vector/css/vector-web/views/elements/_ImageView.scss
diff --git a/src/skins/vector/css/vector-web/views/elements/Spinner.css b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/elements/Spinner.css
rename to src/skins/vector/css/vector-web/views/elements/_Spinner.scss
diff --git a/src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/globals/GuestWarningBar.css
rename to src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
diff --git a/src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/globals/MatrixToolbar.css
rename to src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
diff --git a/src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css b/src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/messages/MessageTimestamp.css
rename to src/skins/vector/css/vector-web/views/messages/_MessageTimestamp.scss
diff --git a/src/skins/vector/css/vector-web/views/messages/SenderProfile.css b/src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/messages/SenderProfile.css
rename to src/skins/vector/css/vector-web/views/messages/_SenderProfile.scss
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/rooms/RoomDropTarget.css
rename to src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
diff --git a/src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/rooms/RoomTooltip.css
rename to src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
diff --git a/src/skins/vector/css/vector-web/views/rooms/SearchBar.css b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/rooms/SearchBar.css
rename to src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
diff --git a/src/skins/vector/css/vector-web/views/settings/Notifications.css b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
similarity index 100%
rename from src/skins/vector/css/vector-web/views/settings/Notifications.css
rename to src/skins/vector/css/vector-web/views/settings/_Notifications.scss
diff --git a/src/vector/index.js b/src/vector/index.js
index 8231950b49..96c6a971b6 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -30,7 +30,7 @@ require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/components.css');
+require('../../build/themes/light.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
diff --git a/webpack.config.js b/webpack.config.js
index 3500fedcb6..1c408b7068 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,6 +25,7 @@ module.exports = {
             { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
             // css-raw-loader loads CSS but doesn't try to treat url()s as require()s
             { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
+            { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] },
         ],
         noParse: [
             // don't parse the languages within highlight.js. They cause stack

From c5fa84cd28e7e0dcd389d98fd307728e0e2d896e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Dec 2016 02:02:05 +0000
Subject: [PATCH 010/168] autogenerate the _components.scss index

---
 src/skins/vector/css/rethemendex.sh | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100755 src/skins/vector/css/rethemendex.sh

diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
new file mode 100755
index 0000000000..27c4722427
--- /dev/null
+++ b/src/skins/vector/css/rethemendex.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+
+echo "// autogenerated by rethemendex.sh" > _components.scss
+
+for i in `find */* -iname _\*.scss`;
+do
+    echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
+done

From 33f0eaada0b6348305ab86b4f6557ae344dc42c2 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Dec 2016 02:02:23 +0000
Subject: [PATCH 011/168] autogen _components.css

---
 src/skins/vector/css/_components.scss | 72 +++++++++++++++++++++++++++
 1 file changed, 72 insertions(+)
 create mode 100644 src/skins/vector/css/_components.scss

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
new file mode 100644
index 0000000000..1106f249aa
--- /dev/null
+++ b/src/skins/vector/css/_components.scss
@@ -0,0 +1,72 @@
+// autogenerated by rethemendex.sh
+@import "matrix-react-sdk/structures/_ContextualMenu";
+@import "matrix-react-sdk/structures/_CreateRoom";
+@import "matrix-react-sdk/structures/_FilePanel";
+@import "matrix-react-sdk/structures/_MatrixChat";
+@import "matrix-react-sdk/structures/_NotificationPanel";
+@import "matrix-react-sdk/structures/_RoomStatusBar";
+@import "matrix-react-sdk/structures/_RoomView";
+@import "matrix-react-sdk/structures/_SearchBox";
+@import "matrix-react-sdk/structures/_UploadBar";
+@import "matrix-react-sdk/structures/_UserSettings";
+@import "matrix-react-sdk/structures/login/_Login";
+@import "matrix-react-sdk/views/avatars/_BaseAvatar";
+@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog";
+@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog";
+@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog";
+@import "matrix-react-sdk/views/elements/_AddressSelector";
+@import "matrix-react-sdk/views/elements/_AddressTile";
+@import "matrix-react-sdk/views/elements/_DirectorySearchBox";
+@import "matrix-react-sdk/views/elements/_MemberEventListSummary";
+@import "matrix-react-sdk/views/elements/_ProgressBar";
+@import "matrix-react-sdk/views/elements/_RichText";
+@import "matrix-react-sdk/views/login/_ServerConfig";
+@import "matrix-react-sdk/views/messages/_MImageBody";
+@import "matrix-react-sdk/views/messages/_MNoticeBody";
+@import "matrix-react-sdk/views/messages/_MTextBody";
+@import "matrix-react-sdk/views/messages/_TextualEvent";
+@import "matrix-react-sdk/views/messages/_UnknownBody";
+@import "matrix-react-sdk/views/rooms/_Autocomplete";
+@import "matrix-react-sdk/views/rooms/_EntityTile";
+@import "matrix-react-sdk/views/rooms/_EventTile";
+@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget";
+@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo";
+@import "matrix-react-sdk/views/rooms/_MemberInfo";
+@import "matrix-react-sdk/views/rooms/_MemberList";
+@import "matrix-react-sdk/views/rooms/_MessageComposer";
+@import "matrix-react-sdk/views/rooms/_PresenceLabel";
+@import "matrix-react-sdk/views/rooms/_RoomHeader";
+@import "matrix-react-sdk/views/rooms/_RoomList";
+@import "matrix-react-sdk/views/rooms/_RoomPreviewBar";
+@import "matrix-react-sdk/views/rooms/_RoomSettings";
+@import "matrix-react-sdk/views/rooms/_RoomTile";
+@import "matrix-react-sdk/views/rooms/_SearchableEntityList";
+@import "matrix-react-sdk/views/rooms/_TabCompleteBar";
+@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar";
+@import "matrix-react-sdk/views/settings/_DevicesPanel";
+@import "matrix-react-sdk/views/settings/_IntegrationsManager";
+@import "matrix-react-sdk/views/voip/_CallView";
+@import "matrix-react-sdk/views/voip/_IncomingCallbox";
+@import "matrix-react-sdk/views/voip/_VideoView";
+@import "vector-web/_fonts";
+@import "vector-web/structures/_CompatibilityPage";
+@import "vector-web/structures/_LeftPanel";
+@import "vector-web/structures/_RightPanel";
+@import "vector-web/structures/_RoomDirectory";
+@import "vector-web/structures/_RoomSubList";
+@import "vector-web/structures/_ViewSource";
+@import "vector-web/views/context_menus/_MessageContextMenu";
+@import "vector-web/views/context_menus/_NotificationStateContextMenu";
+@import "vector-web/views/context_menus/_RoomTagContextMenu";
+@import "vector-web/views/dialogs/_ChangelogDialog";
+@import "vector-web/views/directory/_NetworkDropdown";
+@import "vector-web/views/elements/_ImageView";
+@import "vector-web/views/elements/_Spinner";
+@import "vector-web/views/globals/_GuestWarningBar";
+@import "vector-web/views/globals/_MatrixToolbar";
+@import "vector-web/views/messages/_MessageTimestamp";
+@import "vector-web/views/messages/_SenderProfile";
+@import "vector-web/views/rooms/_RoomDropTarget";
+@import "vector-web/views/rooms/_RoomTooltip";
+@import "vector-web/views/rooms/_SearchBar";
+@import "vector-web/views/settings/_Notifications";

From c6beaa16318d005f0548f19f2dc956e17c60f1de Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 28 Dec 2016 04:04:43 +0000
Subject: [PATCH 012/168] initial stab at an official dark theme via the magic
 of SASS. SVGs are all broken, and some of the more exotic colours haven't
 been updated. There's been no attempt to use SASS to remove duplication from
 the CSS yet. no attempt to switch it at runtime yet.

---
 src/skins/vector/css/_common.scss             | 51 +++++++-------
 src/skins/vector/css/_components.scss         |  1 +
 .../structures/_ContextualMenu.scss           | 14 ++--
 .../structures/_CreateRoom.scss               |  4 +-
 .../structures/_FilePanel.scss                | 10 +--
 .../structures/_MatrixChat.scss               |  4 +-
 .../structures/_NotificationPanel.scss        |  7 +-
 .../structures/_RoomStatusBar.scss            | 16 ++---
 .../structures/_RoomView.scss                 | 24 +++----
 .../structures/_UploadBar.scss                |  6 +-
 .../structures/_UserSettings.scss             |  6 +-
 .../structures/login/_Login.scss              | 14 ++--
 .../views/avatars/_BaseAvatar.scss            |  2 +-
 .../views/dialogs/_ChatInviteDialog.scss      |  4 +-
 .../views/dialogs/_EncryptedEventDialog.scss  |  6 +-
 .../views/dialogs/_SetDisplayNameDialog.scss  |  6 +-
 .../views/elements/_AddressSelector.scss      | 16 ++---
 .../views/elements/_AddressTile.scss          |  8 +--
 .../views/elements/_DirectorySearchBox.scss   |  2 +-
 .../elements/_MemberEventListSummary.scss     |  2 +-
 .../views/elements/_RichText.scss             |  6 +-
 .../views/login/_ServerConfig.scss            |  2 +-
 .../views/messages/_MImageBody.scss           |  8 +--
 .../views/rooms/_Autocomplete.scss            | 12 ++--
 .../views/rooms/_EntityTile.scss              |  6 +-
 .../views/rooms/_EventTile.scss               | 34 +++++-----
 .../views/rooms/_MemberDeviceInfo.scss        | 14 ++--
 .../views/rooms/_MemberInfo.scss              |  4 +-
 .../views/rooms/_MemberList.scss              | 10 +--
 .../views/rooms/_MessageComposer.scss         | 10 +--
 .../views/rooms/_RoomHeader.scss              | 16 ++---
 .../views/rooms/_RoomPreviewBar.scss          |  4 +-
 .../views/rooms/_RoomSettings.scss            | 18 ++---
 .../views/rooms/_RoomTile.scss                | 14 ++--
 .../views/rooms/_SearchableEntityList.scss    | 10 +--
 .../views/rooms/_TabCompleteBar.scss          |  6 +-
 .../views/rooms/_TopUnreadMessagesBar.scss    |  2 +-
 .../views/settings/_IntegrationsManager.scss  |  2 +-
 .../views/voip/_CallView.scss                 |  4 +-
 .../views/voip/_IncomingCallbox.scss          |  4 +-
 src/skins/vector/css/rethemendex.sh           |  2 +-
 src/skins/vector/css/themes/_base.scss        | 68 +++++++++++++++++++
 src/skins/vector/css/themes/dark.scss         | 66 +++++++++++++++++-
 src/skins/vector/css/themes/light.scss        |  6 +-
 .../vector-web/structures/_RightPanel.scss    | 10 +--
 .../vector-web/structures/_RoomDirectory.scss |  6 +-
 .../vector-web/structures/_RoomSubList.scss   | 36 +++++-----
 .../context_menus/_RoomTagContextMenu.scss    |  2 +-
 .../views/directory/_NetworkDropdown.scss     |  6 +-
 .../vector-web/views/elements/_ImageView.scss |  8 +--
 .../views/globals/_GuestWarningBar.scss       |  6 +-
 .../views/globals/_MatrixToolbar.scss         |  6 +-
 .../views/rooms/_RoomDropTarget.scss          |  6 +-
 .../vector-web/views/rooms/_RoomTooltip.scss  | 12 ++--
 .../vector-web/views/rooms/_SearchBar.scss    | 14 ++--
 .../views/settings/_Notifications.scss        |  2 +-
 src/vector/index.js                           |  2 +-
 57 files changed, 388 insertions(+), 259 deletions(-)
 create mode 100644 src/skins/vector/css/themes/_base.scss

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index bb00bbd8c0..e81ea2fa6d 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -29,7 +29,8 @@ body {
        Arial here. */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 15px;
-    color: #454545;
+    background-color: $primary-bg-color;
+    color: $primary-fg-color;
     border: 0px;
     margin: 0px;
     /* This should render the fonts the same accross browsers */
@@ -41,7 +42,7 @@ div.error {
 }
 
 h2 {
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     font-size: 18px;
     margin-top: 16px;
@@ -51,7 +52,7 @@ h2 {
 a:hover,
 a:link,
 a:visited {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 input[type=text].error, input[type=password].error {
@@ -59,7 +60,7 @@ input[type=text].error, input[type=password].error {
 }
 
 input[type=text]:focus, textarea:focus {
-    border: 1px solid #76CFA6;
+    border: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -148,8 +149,8 @@ textarea {
 }
 
 .mx_Dialog {
-    background-color: #fff;
-    color: #747474;
+    background-color: $primary-bg-color;
+    color: $light-fg-color;
     z-index: 4010;
     font-weight: 300;
     font-size: 15px;
@@ -190,7 +191,7 @@ textarea {
 .mx_Dialog_content {
     margin: 24px 58px 68px 0;
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     word-wrap: break-word;
 }
 
@@ -202,7 +203,7 @@ textarea {
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -212,26 +213,26 @@ textarea {
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
 }
 
 .mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
 }
 
 .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
-    background-color: #ff0064;
-    border: solid 1px #ff0064;
+    background-color: $warning-color;
+    border: solid 1px $warning-color;
 }
 
 .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
-    background-color: #777777;
-    border: solid 1px #777777;
+    background-color: $light-fg-color;
+    border: solid 1px $light-fg-color;
     opacity: 0.7;
 }
 
@@ -241,11 +242,11 @@ textarea {
     font-weight: bold;
     font-size: 22px;
     line-height: 1.4;
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_Dialog_title.danger {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_TextInputDialog_label {
@@ -256,10 +257,10 @@ textarea {
 .mx_TextInputDialog_input {
     font-size: 15px;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
 }
 
 .mx_emojione {
@@ -268,19 +269,19 @@ textarea {
 }
 
 ::-moz-selection {
-    background-color: #76CFA6;
+    background-color: $accent-color;
     color: white;
 }
 
 ::selection {
-    background-color: #76CFA6;
+    background-color: $accent-color;
     color: white;
 }
 
 /** green button with rounded corners */
 .mx_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 1106f249aa..532e0a3657 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -1,4 +1,5 @@
 // autogenerated by rethemendex.sh
+@import "_common";
 @import "matrix-react-sdk/structures/_ContextualMenu";
 @import "matrix-react-sdk/structures/_CreateRoom";
 @import "matrix-react-sdk/structures/_FilePanel";
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
index d317363dd5..d3e73a9a15 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss
@@ -30,10 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border: solid 1px rgba(187, 187, 187, 0.5);
+    border: solid 1px $menu-border-color;
     border-radius: 4px;
-    background-color: #f6f6f6;
-    color: #4a4a4a;
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
     position: absolute;
     padding: 6px;
 	font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-left: 8px solid rgba(187, 187, 187, 0.5);
+    border-left: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-left: 7px solid #f6f6f6;
+    border-left: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -87,7 +87,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #f6f6f6;
+    border-right: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
index 88804409e2..2be193525e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss
@@ -18,13 +18,13 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_CreateRoom input,
 .mx_CreateRoom textarea  {
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index fca53b1d2a..2f4a00ad70 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -58,12 +58,12 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile .mx_MImageBody_download {
     display: flex;
     font-size: 14px;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
     flex: 1 1 auto;
-    color: #747474;
+    color: $light-fg-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -90,7 +90,7 @@ limitations under the License.
     padding: 0px;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@@ -100,7 +100,7 @@ limitations under the License.
     position: initial;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 /* Overrides for the wrappers around the body tile */
@@ -111,7 +111,7 @@ limitations under the License.
 }
 
 .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index f1cc7d4a1a..5587a6093c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -91,7 +91,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    background-color: #eaf5f0;
+    background-color: $secondary-accent-color;
 
     -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
@@ -111,7 +111,7 @@ limitations under the License.
 
     padding-left: 20px;
     padding-right: 22px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 
     -webkit-flex: 1;
     flex: 1;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index 83b0a033b7..06dd92f315 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -51,7 +51,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -61,8 +61,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: #000;
-    opacity: 0.3;
+    color: $primary-fg-color;
     font-size: 12px;
     display: inline;
     padding-left: 0px;
@@ -94,7 +93,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index ef0b69c4d0..d0ac5a600c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -36,7 +36,7 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     position: relative;
     top: -4px;
@@ -76,7 +76,7 @@ limitations under the License.
 
 .mx_RoomStatusBar_unreadMessagesBar {
     padding-top: 10px;
-    color: #ff0064;
+    color: $warning-color;
     cursor: pointer;
 }
 
@@ -93,29 +93,29 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_connectionLostBar_title {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomStatusBar_connectionLostBar_desc {
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 13px;
     opacity: 0.5;
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: #454545 ! important;
+    color: $primary-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
 
 .mx_RoomStatusBar_tabCompleteBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_RoomStatusBar_typingBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     overflow-y: hidden;
     display: block;
@@ -135,7 +135,7 @@ limitations under the License.
 .mx_RoomStatusBar_tabCompleteEol {
     flex: 0 0 auto;
     -webkit-flex: 0 0 auto;
-    color: #76CFA6;
+    color: $accent-color;
 }
 
 .mx_RoomStatusBar_tabCompleteEol object {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index c3f7ceed3b..182d690c5e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -89,7 +89,7 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
@@ -158,7 +158,7 @@ limitations under the License.
     margin-bottom: 8px;
     margin-left: 63px;
     padding-bottom: 6px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_RoomView_invitePrompt {
@@ -185,8 +185,8 @@ li.mx_RoomView_myReadMarker_container {
 }
 
 hr.mx_RoomView_myReadMarker {
-    border-top: solid 1px #76cfa6;
-    border-bottom: solid 1px #76cfa6;
+    border-top: solid 1px $accent-color;
+    border-bottom: solid 1px $accent-color;
     margin-top: 0px;
     position: relative;
     top: 5px;
@@ -212,16 +212,16 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_statusAreaBox_line {
     margin-left: 65px;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     height: 1px;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
-    color: #fff;
+    color: $accent-fg-color;
     opacity: 1.0;
 }
 
@@ -234,8 +234,8 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
-    background-color: #76CFA6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     position: relative;
 }
 
@@ -272,13 +272,13 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_ongoingConfCallNotification {
     width: 100%;
     text-align: center;
-    background-color: #ff0064;
-    color: #fff;
+    background-color: $warning-color;
+    color: $accent-fg-color;
     font-weight: bold;
     padding: 6px 0;
     cursor: pointer;
 }
 
 .mx_RoomView_ongoingConfCallNotification a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
index b489e13265..d76c81668c 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss
@@ -26,7 +26,7 @@ limitations under the License.
 }
 
 .mx_UploadBar_uploadProgressInner {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     height: 5px;
 }
 
@@ -34,7 +34,7 @@ limitations under the License.
     margin-top: 5px;
     margin-left: 65px;
     opacity: 0.5;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_UploadBar_uploadIcon {
@@ -57,5 +57,5 @@ limitations under the License.
     float: right;
     margin-top: 5px;
     margin-right: 30px;
-    color: #76cfa6;
+    color: $accent-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 427369a5c7..6ba1002bf9 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -84,8 +84,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 16px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 7px;
@@ -95,7 +95,7 @@ limitations under the License.
 }
 
 .mx_UserSettings_button.danger {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_UserSettings_section {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 0f610b25da..5f4164e894 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -32,7 +32,7 @@ limitations under the License.
 }
 
 .mx_Login h2 {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     font-weight: 300;
     margin-top: 32px;
     margin-bottom: 20px;
@@ -53,7 +53,7 @@ limitations under the License.
 .mx_Login_field {
     width: 100%;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;
@@ -75,9 +75,9 @@ limitations under the License.
     border-radius: 40px;
     height: 40px;
     border: 0px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     font-size: 15px;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_Login_label {
@@ -99,7 +99,7 @@ limitations under the License.
 }
 
 .mx_Login_create:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_links {
@@ -112,7 +112,7 @@ limitations under the License.
 }
 
 .mx_Login_links a:link {
-   color: #4a4a4a;
+   color: $primary-fg-color;
 }
 
 .mx_Login_prompt {
@@ -127,7 +127,7 @@ limitations under the License.
 }
 
 .mx_Login_forgot:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_loader {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
index 901a29599a..d481e5c177 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
@@ -21,7 +21,7 @@ limitations under the License.
 .mx_BaseAvatar_initial {
     position: absolute;
     z-index: 1;
-    color: #fff;
+    color: $avatar-initial-color;
     text-align: center;
     speak: none;
     pointer-events: none;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
index aa1dced80a..6bf9adce66 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss
@@ -36,7 +36,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_inputContainer {
     border-radius: 3px;
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 36px;
     padding-left: 4px;
     padding-right: 4px;
@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_error {
     position: absolute;
-    color: #ff0064;
+    color: $warning-color;
     line-height: 36px;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
index 5e72d7f8bf..cbc0195cac 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss
@@ -24,7 +24,7 @@ limitations under the License.
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -34,6 +34,6 @@ limitations under the License.
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
index 68409a803b..2f0750ad6b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss
@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_SetDisplayNameDialog_input {
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 15px;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
index aa0f8c6a4e..9871a7e881 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressSelector.scss
@@ -16,13 +16,13 @@ limitations under the License.
 
 .mx_AddressSelector {
     position: absolute;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
 	border-radius: 3px;
-	background-color: #fff;
-	border: solid 1px #76cfa6;
+	background-color: $primary-bg-color;
+	border: solid 1px $accent-color;
     cursor: pointer;
 }
 
@@ -31,15 +31,15 @@ limitations under the License.
 }
 
 .mx_AddressSelector_addressListElement .mx_AddressTile {
-    background-color: #fff;
-    border: solid 1px #fff;
+    background-color: $primary-bg-color;
+    border: solid 1px $primary-bg-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
-     background-color: #eaf5f0; /* selected colour */
+    background-color: $selected-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
-    background-color: #eaf5f0; /* selected colour */
-    border: solid 1px #eaf5f0; /* selected colour */
+    background-color: $selected-color;
+    border: solid 1px $selected-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
index 76c0e6032f..59c0b68d3b 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
@@ -18,9 +18,9 @@ limitations under the License.
     display: inline-block;
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 26px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 14px;
     font-weight: normal;
     margin-right: 4px;
@@ -28,8 +28,8 @@ limitations under the License.
 
 .mx_AddressTile.mx_AddressTile_error {
     background-color: rgba(255, 0, 100, 0.1);
-    color: #ff0064;
-    border-color: #ff0064;
+    color: $warning-color;
+    border-color: $warning-color;
 }
 
 .mx_AddressTile_network {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index 3a0922bcd2..dd953ab955 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_DirectorySearchBox {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
 }
 
 .mx_DirectorySearchBox_container {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
index b8197805a0..7d1b059b3c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_MemberEventListSummary.scss
@@ -31,6 +31,6 @@ limitations under the License.
 }
 
 .mx_MemberEventListSummary_toggle {
-    color:#76cfa6;
+    color:$accent-color;
     cursor:pointer;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
index f0b3c04645..72a4c0b7a4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_RichText.scss
@@ -1,14 +1,14 @@
 .mx_UserPill {
     color: white;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }
 
 .mx_RoomPill {
     background-color: white;
-    color: #76cfa6;
-    border: 1px solid #76cfa6;
+    color: $accent-color;
+    border: 1px solid $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
index 75cd4170da..1ad195de29 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss
@@ -27,5 +27,5 @@ limitations under the License.
     opacity: 0.8;
     font-size: 13px;
     font-weight: 300;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
\ No newline at end of file
diff --git a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
index 003ef1030c..83ae06160d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/messages/_MImageBody.scss
@@ -22,18 +22,18 @@ limitations under the License.
 .mx_MImageBody_thumbnail {
     max-width: 100%;
 /*
-    background-color: #fff;
-    border: 2px solid #fff;
+    background-color: $primary-bg-color;
+    border: 2px solid $primary-bg-color;
     border-radius: 1px;
 */
 }
 
 .mx_MImageBody_download {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MImageBody_download a {
-    color: #76cfa6;
+    color: $accent-color;
     text-decoration: none;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 6d611b5ef3..9265d4dc12 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -3,7 +3,7 @@
     bottom: 0;
     z-index: 1000;
     width: 100%;
-    border: 1px solid #e5e5e5;
+    border: 1px solid $primary-hairline-color;
     background: white;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
@@ -12,7 +12,7 @@
 }
 
 .mx_Autocomplete_ProviderSection {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_Autocomplete_Completion_container_pill {
@@ -28,7 +28,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_pill * {
@@ -57,13 +57,13 @@
 }
 
 .mx_Autocomplete_Completion.selected {
-    background: #f6f6f6;
+    background: $menu-bg-color;
     outline: none;
 }
 
 .mx_Autocomplete_provider_name {
     margin: 12px;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
index e52ece778d..2511f07d4d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EntityTile {
     display: table-row;
     position: relative;
-    color: #454545;
+    color: $primary-fg-color;
     cursor: pointer;
 }
 
@@ -77,12 +77,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    font-color: $primary-fg-color;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    font-color: $primary-fg-color;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index fd3f486b7d..a6b10e2435 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -44,7 +44,7 @@ limitations under the License.
 }
 
 .mx_EventTile .mx_SenderProfile {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
     display: block; /* anti-zalgo, with overflow hidden */
@@ -61,7 +61,7 @@ limitations under the License.
     display: block;
     visibility: hidden;
     white-space: nowrap;
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     left: 8px;
     position: absolute;
@@ -93,20 +93,20 @@ limitations under the License.
  * TODO: ultimately we probably want some transition on here.
  */
 .mx_EventTile_selected .mx_EventTile_line {
-    border-left: #76cfa6 5px solid;
+    border-left: $accent-color 5px solid;
     padding-left: 60px;
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
 .mx_EventTile.menu .mx_EventTile_line
 {
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile_searchHighlight {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     border-radius: 5px;
     padding-left: 2px;
     padding-right: 2px;
@@ -114,26 +114,26 @@ limitations under the License.
 }
 
 .mx_EventTile_searchHighlight a {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_EventTile_encrypting {
-    color: #abddbc ! important;
+    color: $event-encrypting-color ! important;
 }
 
 .mx_EventTile_sending {
-    color: #ddd;
+    color: $event-sending-color;
 }
 
 .mx_EventTile_notSent {
-    color: #f44;
+    color: $event-notsent-color;
 }
 
 .mx_EventTile_highlight,
 .mx_EventTile_highlight .markdown-body
  {
-    color: #FF0064;
+    color: $warning-color;
 }
 
 .mx_EventTile_contextual {
@@ -204,7 +204,7 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatarRemainder {
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     position: absolute;
 }
@@ -244,10 +244,10 @@ limitations under the License.
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: #76cfa5 5px solid;
+    border-left: $e2e-verified-color 5px solid;
 }
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: #e8bf37 5px solid;
+    border-left: $e2e-unverified-color 5px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@@ -297,7 +297,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_EventTile_content .markdown-body .hljs {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
index 53379ac4ce..f1584d4e00 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss
@@ -20,8 +20,8 @@ limitations under the License.
 
 
 .mx_MemberDeviceInfo_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;
@@ -50,13 +50,13 @@ limitations under the License.
 }
 
 /* "Unblacklist" is too long for a regular button: make it wider and
-   reduce the padding. */  
+   reduce the padding. */
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
 .mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
     width: 8em;
     padding-left: 1em;
     padding-right: 1em;
-}    
+}
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
@@ -66,13 +66,13 @@ limitations under the License.
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
-    color: #76cfa5;
+    color: $e2e-verified-color;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
-    color: #e8bf37;
+    color: $e2e-unverified-color;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
-    color: #ba6363;
+    color: $e2e-warning-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 40b1524c27..3b4b653e55 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -72,7 +72,7 @@ limitations under the License.
     font-color: #999999;
     font-size: 13px;
     position: relative;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_MemberInfo_buttons {
@@ -82,7 +82,7 @@ limitations under the License.
 .mx_MemberInfo_field {
     cursor: pointer;
     font-size: 13px;
-    color: #76cfa6;
+    color: $accent-color;
     margin-left: 8px;
     line-height: 23px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 7d38360601..3c7e3ec5e6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -55,10 +55,10 @@ limitations under the License.
 .mx_MemberList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 14px;
     margin-bottom: 8px;
@@ -66,13 +66,13 @@ limitations under the License.
 }
 
 .mx_MemberList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
 
 .mx_MemberList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 842f8db655..e5ffd22064 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -18,7 +18,7 @@ limitations under the License.
     max-width: 960px;
     vertical-align: middle;
     margin: auto;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     position: relative;
 }
 
@@ -108,8 +108,8 @@ limitations under the License.
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 14px;
     max-height: 120px;
     overflow: auto;
@@ -120,11 +120,11 @@ limitations under the License.
 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
     line-height: 100%;
-    color: #76cfa6;
+    color: $accent-color;
     opacity: 1.0;
 }
 .mx_MessageComposer_input textarea::-webkit-input-placeholder {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MessageComposer_upload,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 056fa8794b..a26f12ee69 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -63,10 +63,10 @@ limitations under the License.
 
 .mx_RoomHeader_textButton {
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     margin-top: -2px;
     text-align: center;
@@ -102,7 +102,7 @@ limitations under the License.
 
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     display: flex;
     align-items: center;
     -webkit-box-ordinal-group: 3;
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomHeader_simpleHeader {
     line-height: 70px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 22px;
     font-weight: bold;
     overflow: hidden;
@@ -138,7 +138,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: bold;
     font-size: 22px;
     padding-left: 19px;
@@ -174,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_RoomHeader_placeholder {
@@ -182,13 +182,13 @@ limitations under the License.
 }
 
 .mx_RoomHeader_editable {
-    border-bottom: 1px solid #c7c7c7 ! important;
+    border-bottom: 1px solid $strong-input-border-color ! important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid #76CFA6 ! important;
+    border-bottom: 1px solid $accent-color ! important;
     outline: none;
     box-shadow: none;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 286a39f7d5..6b71f96d2e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -38,11 +38,11 @@ limitations under the License.
 }
 
 .mx_RoomPreviewBar_invite_text {
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomPreviewBar_preview_text {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 6a3b1ac8cb..132c979232 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -24,10 +24,10 @@ limitations under the License.
 .mx_RoomSettings_integrationsButton_error {
     position: relative;
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     text-align: center;
     float: right;
@@ -47,8 +47,8 @@ limitations under the License.
     font-size: 10pt;
     line-height: 1.5em;
     border-radius: 5px;
-    background-color: #000;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_RoomSettings_e2eIcon {
@@ -174,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_warning {
-    color: #ff0064;
+    color: $warning-color;
     font-weight: bold;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -182,13 +182,13 @@ limitations under the License.
 
 .mx_RoomSettings_editable {
     border: 0px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid $strong-input-border-color;
     padding: 0px;
     min-width: 240px;
 }
 
 .mx_RoomSettings_editable:focus {
-    border-bottom: 1px solid #76CFA6;
+    border-bottom: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -220,8 +220,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index 2822d82e88..2236404383 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -78,7 +78,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background: #4A4A4A;
+    background: $primary-fg-color;
     bottom: 0;
     width: 24px;
     height: 24px;
@@ -103,7 +103,7 @@ limitations under the License.
     padding-right: 6px;
     padding-top: 2px;
     padding-bottom: 3px;
-    color: rgba(69, 69, 69, 0.8);
+    color: $roomtile-name-color;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -142,7 +142,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -154,7 +154,7 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 9px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
@@ -175,11 +175,11 @@ limitations under the License.
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
@@ -187,7 +187,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_selected {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: $roomtile-selected-bg-color;
 }
 
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index 76d9e21634..9a24868d14 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -25,10 +25,10 @@ limitations under the License.
 .mx_SearchableEntityList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 15px;
     margin-bottom: 8px;
@@ -36,13 +36,13 @@ limitations under the License.
 }
 
 .mx_SearchableEntityList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
 
 .mx_SearchableEntityList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
index 1f8a345083..5dcbd21a47 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TabCompleteBar.scss
@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_TabCompleteBar_command {
     margin-right: 8px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 2px;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
     opacity: 1.0;
     vertical-align: initial;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_TabCompleteBar_item img {
@@ -50,7 +50,7 @@ limitations under the License.
 }
 
 .mx_TabCompleteBar_text {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     vertical-align: middle;
     opacity: 0.5;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
index 77184d424f..7bbafcbe41 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss
@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 960px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
index 93ee0e20fe..13fc9b2237 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss
@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_IntegrationsManager iframe {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border: 0px;
     width: 100%;
     height: 100%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
index 8051b4d0d6..deb89a837c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_CallView_voice {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     cursor: pointer;
     text-align: center;
     padding: 6px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index 5cf62091b3..97a82a03e8 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -18,7 +18,7 @@ limitations under the License.
     text-align: center;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     position: fixed;
     z-index: 1000;
     padding: 6px;
@@ -58,7 +58,7 @@ limitations under the License.
     height: 36px;
     line-height: 36px;
     border-radius: 36px;
-    color: #fff;
+    color: $accent-fg-color;
     margin: auto;
 }
 
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
index 27c4722427..29e3438208 100755
--- a/src/skins/vector/css/rethemendex.sh
+++ b/src/skins/vector/css/rethemendex.sh
@@ -2,7 +2,7 @@
 
 echo "// autogenerated by rethemendex.sh" > _components.scss
 
-for i in `find */* -iname _\*.scss`;
+for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
 do
     echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
 done
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
new file mode 100644
index 0000000000..0fb25a6a7d
--- /dev/null
+++ b/src/skins/vector/css/themes/_base.scss
@@ -0,0 +1,68 @@
+
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #454545;
+$primary-bg-color: #ffffff;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: #ffffff;
+$accent-color: #76CFA6;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: #eaf5f0;
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #f7f7f7;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #e5e5e5;
+
+// used for the border of input text fields
+$input-border-color: #f0f0f0;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #c7c7c7;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #f6f6f6;
+
+$avatar-initial-color: #ffffff;
+
+// ********************
+
+$roomtile-name-color: rgba(69, 69, 69, 0.8);
+$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
+
+$roomsublist-label-fg-color: #3d3b39;
+$roomsublist-label-bg-color: #d3efe1;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+// ********************
+
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
index 19ab2cde4b..e560240264 100644
--- a/src/skins/vector/css/themes/dark.scss
+++ b/src/skins/vector/css/themes/dark.scss
@@ -1,7 +1,69 @@
+@import "_base";
+
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #dddddd;
 $primary-bg-color: #2d2d2d;
 
-// button UI (white-on-green in light skin)
+// used for dialog box text
+$light-fg-color: #747474;
 
-@import "../_components"
\ No newline at end of file
+// button UI (white-on-green in light skin)
+$accent-fg-color: $primary-bg-color;
+$accent-color: #76CFA6;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: $primary-bg-color;
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #353535;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #474747;
+
+// used for the border of input text fields
+$input-border-color: #3a3a3a;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #656565;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #373737;
+
+$avatar-initial-color: #2d2d2d;
+
+// ********************
+
+$roomtile-name-color: rgba(186, 186, 186, 0.8);
+$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
+
+$roomsublist-label-fg-color: $primary-fg-color;
+$roomsublist-label-bg-color: #454545;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
+
+@import "../_components";
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss
index e0ad84f62f..8b951e27e0 100644
--- a/src/skins/vector/css/themes/light.scss
+++ b/src/skins/vector/css/themes/light.scss
@@ -1,4 +1,2 @@
-$primary-fg-color: #454545;
-$primary-bg-color: #ffffff;
-
-@import "../_components"
\ No newline at end of file
+@import "_base";
+@import "../_components";
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 5da4c4ab1a..b9dbf1cd79 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -33,7 +33,7 @@ limitations under the License.
     -webkit-order: 1;
     order: 1;
 
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
     -webkit-flex: 0 0 70px;
@@ -45,7 +45,7 @@ limitations under the License.
 .mx_RightPanel_headerButtonGroup {
     margin-top: 6px;
     float: left;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     margin-left: 0px;
 }
 
@@ -73,7 +73,7 @@ limitations under the License.
 
 .mx_RightPanel_headerButton_badge {
     font-size: 11px;
-    color: #76cfa6;
+    color: $accent-color;
     font-weight: bold;
     padding-bottom: 2px;
 }
@@ -97,7 +97,7 @@ limitations under the License.
     -webkit-order: 3;
     order: 3;
 
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
     -webkit-flex: 0 0 60px;
@@ -107,7 +107,7 @@ limitations under the License.
 .mx_RightPanel_footer .mx_RightPanel_invite {
     line-height: 35px;
     font-size: 14px;
-	color: #4A4A4A;
+	color: $primary-fg-color;
     padding-top: 13px;
     padding-left: 5px;
     cursor: pointer;
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index 563b1772c9..e5df8741d1 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -20,7 +20,7 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 12px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -78,7 +78,7 @@ limitations under the License.
 
 .mx_RoomDirectory_table {
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     width: 100%;
     text-align: left;
     table-layout: fixed;
@@ -110,7 +110,7 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: #eaf5f0;
+    background-color: $secondary-accent-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
diff --git a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
index e6e81aefb1..0d56d6c378 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomSubList.scss
@@ -29,7 +29,7 @@ limitations under the License.
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $roomsublist-label-fg-color;
     font-weight: 600;
     font-size: 12px;
     width: 203px; /* padding + width = LHS Panel width */
@@ -39,8 +39,8 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: #d3efe1;
-    border-top: solid 2px #eaf5f0;
+    background-color: $roomsublist-label-bg-color;
+    border-top: solid 2px $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
@@ -63,7 +63,7 @@ limitations under the License.
     display: inline-block;
     font-size: 12px;
     font-weight: normal;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 5px;
     text-transform: none;
 }
@@ -80,14 +80,14 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 7px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 /*
@@ -97,7 +97,7 @@ limitations under the License.
 */
 
 .mx_RoomSubList_badgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 /* This is the bottom of the speech bubble */
@@ -108,7 +108,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -129,7 +129,7 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 6px solid #76cfa6;
+    border-top: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronUp {
@@ -137,14 +137,14 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-bottom: 6px solid #76cfa6;
+    border-bottom: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronRight {
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
-    border-left: 6px solid #76cfa6;
+    border-left: 6px solid $accent-color;
     border-bottom: 5px solid transparent;
 }
 
@@ -165,7 +165,7 @@ limitations under the License.
 .mx_RoomSubList_line {
     display: inline-block;
     width: 159px;
-    border-top: dotted 2px #76cfa6;
+    border-top: dotted 2px $accent-color;
     vertical-align: middle;
 }
 
@@ -179,7 +179,7 @@ limitations under the License.
     font-size: 10px;
     font-weight: 600;
     text-align: left;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 7px;
     padding-right: 7px;
     padding-left: 7px;
@@ -198,20 +198,20 @@ limitations under the License.
     right: 8px; /*gutter */
     top: -2px;
     border-radius: 8px;
-    border: solid 1px #76cfa6;
-    color: #fff;
+    border: solid 1px $accent-color;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 3px;
     padding-right: 3px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     vertical-align: middle;
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;
@@ -219,7 +219,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;
diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
index 947fd480fe..0a2e7605df 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
+++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_RoomTagContextMenu_field:last-child {
     padding-bottom: 4px;
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
index 8b4c445996..9147fdb7cb 100644
--- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
+++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
@@ -21,14 +21,14 @@ limitations under the License.
 .mx_NetworkDropdown_input {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     user-select: none;
 }
 
 .mx_NetworkDropdown_arrow {
-    border-color: #4a4a4a transparent transparent;
+    border-color: $primary-fg-color transparent transparent;
     border-style: solid;
     border-width: 5px 5px 0;
     display: block;
@@ -67,7 +67,7 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
     margin: 0;
     padding: 0px;
     border-radius: 3px;
-    border: 1px solid #76cfa6;
+    border: 1px solid $accent-color;
     background-color: white;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index 03223f259e..d66d9c7dbd 100644
--- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -87,7 +87,7 @@ limitations under the License.
     padding-right: 30px;
     min-height: 100%;
     max-width: 240px;
-    color: #fff;
+    color: $lightbox-fg-color;
 }
 
 .mx_ImageView_cancel {
@@ -114,10 +114,10 @@ limitations under the License.
     margin-top: 24px;
     margin-bottom: 6px;
     border-radius: 5px;
-    background-color: #454545;
+    background-color: $lightbox-bg-color;
     font-size: 14px;
     padding: 9px;
-    border: 1px solid #fff;
+    border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
@@ -125,7 +125,7 @@ limitations under the License.
 }
 
 .mx_ImageView_link {
-    color: #fff ! important;
+    color: $lightbox-fg-color ! important;
     text-decoration: none ! important;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index 717d75afe4..e8b5aebbb8 100644
--- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_GuestWarningBar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_GuestWarningBar a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index 4e214e113f..9bd70bb944 100644
--- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
     display: -webkit-box;
     display: -moz-box;
@@ -40,7 +40,7 @@ limitations under the License.
 
 .mx_MatrixToolbar_link
 {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
index 003215aff2..2fe16ca949 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -22,8 +22,8 @@ limitations under the License.
     margin-bottom: 7px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border: 1px dashed #76cfa6;
-    color: #454545;
+    border: 1px dashed $accent-color;
+    color: $primary-fg-color;
     background-color: rgba(255,255,255,0.5);
     border-radius: 4px;
 }
@@ -39,7 +39,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget_avatar {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border-radius: 24px;
     width: 24px;
     height: 24px;
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
index 192fa77b39..5469a9e6d3 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss
@@ -21,16 +21,16 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
-.mx_RoomTooltip_chevron:after{
+.mx_RoomTooltip_chevron:after {
     content:'';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #fff;
+    border-right: 7px solid $primary-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -40,14 +40,14 @@ limitations under the License.
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid rgba(187, 187, 187, 0.5);
+    border: 1px solid $menu-border-color;
     border-radius: 5px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     z-index: 2000;
     padding: 5px;
     pointer-events: none;
     line-height: 14px;
     font-size: 13px;
-    color: rgba(0, 0, 0, 0.7);
+    color: $primary-fg-color;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
index 7ec1a17ad5..5d1953220a 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
@@ -26,7 +26,7 @@ limitations under the License.
 .mx_SearchBar_input {
     display: inline block;
     border-radius: 3px 0px 0px 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     font-size: 15px;
     padding: 9px;
     padding-left: 11px;
@@ -41,7 +41,7 @@ limitations under the License.
     width: 37px;
     height: 37px;
     border-radius: 0px 3px 3px 0px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
 }
 
 @keyframes pulsate {
@@ -61,8 +61,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     margin-left: 7px;
@@ -74,9 +74,9 @@ limitations under the License.
 }
 
 .mx_SearchBar_unselected {
-    background-color: #fff;
-    color: #76CFA6;
-    border: #76CFA6 1px solid;
+    background-color: $primary-bg-color;
+    color: $accent-color;
+    border: $accent-color 1px solid;
 }
 
 .mx_SearchBar_cancel {
diff --git a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
index 7a93f3f7b2..4c88e44952 100644
--- a/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
+++ b/src/skins/vector/css/vector-web/views/settings/_Notifications.scss
@@ -58,7 +58,7 @@ limitations under the License.
 
 .mx_UserNotifSettings_keywords {
     cursor: pointer;
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_UserSettings_devicesTable td {
diff --git a/src/vector/index.js b/src/vector/index.js
index 96c6a971b6..47509887b5 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -30,7 +30,7 @@ require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/themes/light.css');
+require('../../build/themes/dark.css');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');

From d1a9695a353aec38762fcde749e852cfc3a5c3b5 Mon Sep 17 00:00:00 2001
From: Hubert Chathi <hubert@uhoreg.ca>
Date: Wed, 28 Dec 2016 20:57:31 -0500
Subject: [PATCH 013/168] update README to point to new names/locations

---
 README.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 41f307d347..f82572fbcf 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ https://riot.im/develop for those who like living dangerously.
 To host your own copy of Riot, the quickest bet is to use a pre-built
 released version of Riot:
 
-1. Download the latest version from https://github.com/vector-im/vector-web/releases
+1. Download the latest version from https://github.com/vector-im/riot-web/releases
 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
@@ -36,7 +36,7 @@ access to Riot (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.
+https://github.com/vector-im/riot-web/issues/1977 for more details.
 
 Building From Source
 ====================
@@ -45,7 +45,7 @@ Riot 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/riot-web.git`
 1. Switch to the vector-web directory: `cd vector-web`
 1. Install the prerequisites: `npm install`
 1. If you are using the `develop` branch of vector-web, you will probably need
@@ -97,7 +97,7 @@ Running as a Desktop app
 ========================
 
 Riot can also be run as a desktop app, wrapped in electron. You can download a
-pre-built version from https://riot.im/download/desktop/ or, if you prefer,
+pre-built version from https://riot.im/desktop.html or, if you prefer,
 built it yourself.
 
 To run as a desktop app:
@@ -167,13 +167,13 @@ the `component-index.js` for the app (used in future for skinning)
 development on Riot forcing `matrix-react-sdk` to move fast at the expense of
 maintaining a clear abstraction between the two.**  Hacking on Riot inevitably
 means hacking equally on `matrix-react-sdk`, and there are bits of
-`matrix-react-sdk` behaviour incorrectly residing in the `vector-web` project
+`matrix-react-sdk` behaviour incorrectly residing in the `riot-web` project
 (e.g. matrix-react-sdk specific CSS), and a bunch of Riot specific behaviour
 in the `matrix-react-sdk` (grep for `vector` / `riot`).  This separation problem will be
 solved asap once development on Riot (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.
+against `riot-web` in github.
 
 Please note that Riot is intended to run correctly without access to the public
 internet.  So please don't depend on resources (JS libs, CSS, images, fonts)
@@ -208,8 +208,8 @@ Then similarly with `matrix-react-sdk`:
 
 Finally, build and start Riot itself:
 
-1. `git clone git@github.com:vector-im/vector-web.git`
-1. `cd vector-web`
+1. `git clone git@github.com:vector-im/riot-web.git`
+1. `cd riot-web`
 1. `git checkout develop`
 1. `npm install`
 1. `rm -r node_modules/matrix-js-sdk; ln -s ../../matrix-js-sdk node_modules/`

From 35b301338643dcabafb43653e6da17de9c9fdcd2 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sat, 31 Dec 2016 14:27:44 +0000
Subject: [PATCH 014/168] fix up a few more colours

---
 src/skins/vector/css/_common.scss                          | 7 ++++++-
 src/skins/vector/css/themes/_base.scss                     | 3 +++
 src/skins/vector/css/themes/dark.scss                      | 3 +++
 .../css/vector-web/views/directory/_NetworkDropdown.scss   | 4 ++--
 4 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index e81ea2fa6d..ed96b48c22 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -55,8 +55,13 @@ a:visited {
     color: $accent-color;
 }
 
+input[type=text] {
+    background-color: $primary-bg-color;
+    color: $primary-fg-color;
+}
+
 input[type=text].error, input[type=password].error {
-    border: 1px solid red;
+    border: 1px solid $warning-color;
 }
 
 input[type=text]:focus, textarea:focus {
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 0fb25a6a7d..b9fd2d12bc 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -7,6 +7,9 @@ $primary-bg-color: #ffffff;
 // used for dialog box text
 $light-fg-color: #747474;
 
+// used for focusing form controls
+$focus-bg-color: #dddddd;
+
 // button UI (white-on-green in light skin)
 $accent-fg-color: #ffffff;
 $accent-color: #76CFA6;
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
index e560240264..5449b90ed6 100644
--- a/src/skins/vector/css/themes/dark.scss
+++ b/src/skins/vector/css/themes/dark.scss
@@ -4,6 +4,9 @@
 $primary-fg-color: #dddddd;
 $primary-bg-color: #2d2d2d;
 
+// used for focusing form controls
+$focus-bg-color: #101010;
+
 // used for dialog box text
 $light-fg-color: #747474;
 
diff --git a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
index 9147fdb7cb..84aa896a9d 100644
--- a/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
+++ b/src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss
@@ -68,11 +68,11 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
     padding: 0px;
     border-radius: 3px;
     border: 1px solid $accent-color;
-    background-color: white;
+    background-color: $primary-bg-color;
 }
 
 .mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
-    background-color: #ddd;
+    background-color: $focus-bg-color;
 }
 
 .mx_NetworkDropdown_menu_network {

From 6a1af891b77f1b0c63bd1df32d0ac8c87b59dff7 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <github@rvanderhoff.org.uk>
Date: Fri, 6 Jan 2017 10:43:13 +0000
Subject: [PATCH 015/168] Use a custom script to copy resources (#2893)

All of those cpx invocations were getting unwieldy, and I suspect the exotic
quoting needed to run them under parallelshell was breaking things on windows.

Replace the unwieldy cpx invocations with an unwieldy custom script.
---
 package.json        | 20 +++++------
 scripts/copy-res.js | 81 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 90 insertions(+), 11 deletions(-)
 create mode 100755 scripts/copy-res.js

diff --git a/package.json b/package.json
index 3f9f46e238..52cc41be32 100644
--- a/package.json
+++ b/package.json
@@ -27,26 +27,22 @@
   "matrix-react-parent": "matrix-react-sdk",
   "scripts": {
     "reskindex": "reskindex -h src/header",
-    "build:res": "cpx \"{src/skins/vector/fonts,src/skins/vector/img}/**\" webapp/ && cpx \"{res/media,res/vector-icons}/**\" webapp/",
-    "build:config": "cpx config.json webapp/",
-    "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/",
+    "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
     "build:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css --no-watch",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
     "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
-    "build": "node scripts/babelcheck.js && npm run build:res && npm run build:config && npm run build:emojione && npm run build:css && npm run build:bundle",
-    "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:config && npm run build:emojione && npm run build:css && npm run build:bundle:dev",
+    "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle",
+    "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
-    "start:res": "parallelshell \"cpx -w \\\"{src/skins/vector/fonts,src/skins/vector/img}/**\\\" webapp/\" \"cpx -w \\\"{res/media,res/vector-icons}/**\\\" webapp/\"",
-    "start:config": "cpx -w config.json webapp/",
-    "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w",
+    "start:res": "node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
-    "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
-    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"",
-    "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
+    "start:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
+    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
+    "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
     "clean": "rimraf build lib webapp electron/dist",
     "prepublish": "npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
@@ -95,6 +91,7 @@
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.17.0",
     "catw": "^1.0.1",
+    "chokidar": "^1.6.1",
     "cpx": "^1.3.2",
     "css-raw-loader": "^0.1.1",
     "electron-builder": "^10.4.1",
@@ -111,6 +108,7 @@
     "karma-phantomjs-launcher": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.7.0",
+    "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
diff --git a/scripts/copy-res.js b/scripts/copy-res.js
new file mode 100755
index 0000000000..826d9a96b3
--- /dev/null
+++ b/scripts/copy-res.js
@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+
+// copies the resources into the webapp directory.
+//
+
+// cpx includes globbed parts of the filename in the destination, but excludes
+// common parents. Hence, "res/{a,b}/**": the output will be "dest/a/..." and
+// "dest/b/...".
+const COPY_LIST = [
+    ["res/{media,vector-icons}/**", "webapp"],
+    ["src/skins/vector/{fonts,img}/**", "webapp"],
+    ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
+    ["./config.json", "webapp", {directwatch: 1}],
+];
+
+const parseArgs = require('minimist');
+const Cpx = require('cpx');
+const chokidar = require('chokidar');
+
+const argv = parseArgs(
+    process.argv.slice(2), {}
+);
+
+var watch = argv.w;
+var verbose = argv.v;
+
+function errCheck(err) {
+    if (err) {
+        console.error(err.message);
+        process.exit(1);
+    }
+}
+
+function next(i, err) {
+    errCheck(err);
+
+    if (i >= COPY_LIST.length) {
+        return;
+    }
+
+    const ent = COPY_LIST[i];
+    const source = ent[0];
+    const dest = ent[1];
+    const opts = ent[2] || {};
+
+    const cpx = new Cpx.Cpx(source, dest);
+
+    if (verbose) {
+        cpx.on("copy", (event) => {
+            console.log(`Copied: ${event.srcPath} --> ${event.dstPath}`);
+        });
+        cpx.on("remove", (event) => {
+            console.log(`Removed: ${event.path}`);
+        });
+    }
+
+    const cb = (err) => {next(i+1, err)};
+
+    if (watch) {
+        if (opts.directwatch) {
+            // cpx -w creates a watcher for the parent of any files specified,
+            // which in the case of config.json is '.', which inevitably takes
+            // ages to crawl. So we create our own watcher on the files
+            // instead.
+            const copy = () => {cpx.copy(errCheck)};
+            chokidar.watch(source)
+                .on('add', copy)
+                .on('change', copy)
+                .on('ready', cb)
+                .on('error', errCheck);
+        } else {
+            cpx.on('watch-ready', cb);
+            cpx.on("watch-error", cb);
+            cpx.watch();
+        }
+    } else {
+        cpx.copy(cb);
+    }
+}
+
+next(0);

From 691fe611d6141f6c43f9e966ab135a721f248482 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 10 Jan 2017 11:06:09 +0000
Subject: [PATCH 016/168] experimental postcss

---
 package.json                           |  14 ++-
 src/skins/vector/css/_components.scss  | 145 +++++++++++++------------
 src/skins/vector/css/rethemendex.sh    |   2 +-
 src/skins/vector/css/themes/dark.scss  |  76 +------------
 src/skins/vector/css/themes/light.scss |   4 +-
 src/vector/index.js                    |   2 +-
 webpack.config.js                      |   4 +-
 7 files changed, 94 insertions(+), 153 deletions(-)

diff --git a/package.json b/package.json
index c657aad641..8eb562d3c1 100644
--- a/package.json
+++ b/package.json
@@ -31,7 +31,7 @@
     "build:config": "cpx config.json webapp/",
     "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "mkdirp build && node-sass --recursive --source-map true --output build \"src/skins/vector/css\"",
+    "build:css": "mkdirp build && postcss -c postcss.config.json",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
@@ -44,7 +44,7 @@
     "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" webapp/emojione/svg/ -w",
     "start:js": "webpack-dev-server -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
-    "start:skins:css": "mkdirp build && node-sass --recursive --watch --source-map true --output build \"src/skins/vector/css\"",
+    "start:skins:css": "mkdirp build && postcss -c postcss.config.json -w",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:res\" \"npm run start:config\" \"npm run start:js\" \"npm run start:skins:css\"",
     "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
     "clean": "rimraf build lib webapp electron/dist",
@@ -80,6 +80,7 @@
     "url": "^0.11.0"
   },
   "devDependencies": {
+    "autoprefixer": "^6.6.0",
     "babel-cli": "^6.5.2",
     "babel-core": "^6.14.0",
     "babel-eslint": "^6.1.0",
@@ -116,10 +117,17 @@
     "node-sass": "^4.1.1",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
+    "postcss-cli": "^2.6.0",
+    "postcss-extend": "^1.0.5",
+    "postcss-import": "^9.0.0",
+    "postcss-mixins": "^5.4.1",
+    "postcss-nested": "^1.0.0",
+    "postcss-scss": "^0.4.0",
+    "postcss-simple-vars": "^3.0.0",
+    "postcss-strip-inline-comments": "^0.1.5",
     "react-addons-perf": "^15.4.0",
     "react-addons-test-utils": "^15.4.0",
     "rimraf": "^2.4.3",
-    "sass-loader": "^4.1.1",
     "source-map-loader": "^0.1.5",
     "webpack": "^1.12.14",
     "webpack-dev-server": "^1.16.2"
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 532e0a3657..884352366e 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -1,73 +1,74 @@
 // autogenerated by rethemendex.sh
-@import "_common";
-@import "matrix-react-sdk/structures/_ContextualMenu";
-@import "matrix-react-sdk/structures/_CreateRoom";
-@import "matrix-react-sdk/structures/_FilePanel";
-@import "matrix-react-sdk/structures/_MatrixChat";
-@import "matrix-react-sdk/structures/_NotificationPanel";
-@import "matrix-react-sdk/structures/_RoomStatusBar";
-@import "matrix-react-sdk/structures/_RoomView";
-@import "matrix-react-sdk/structures/_SearchBox";
-@import "matrix-react-sdk/structures/_UploadBar";
-@import "matrix-react-sdk/structures/_UserSettings";
-@import "matrix-react-sdk/structures/login/_Login";
-@import "matrix-react-sdk/views/avatars/_BaseAvatar";
-@import "matrix-react-sdk/views/dialogs/_ChatInviteDialog";
-@import "matrix-react-sdk/views/dialogs/_EncryptedEventDialog";
-@import "matrix-react-sdk/views/dialogs/_SetDisplayNameDialog";
-@import "matrix-react-sdk/views/elements/_AddressSelector";
-@import "matrix-react-sdk/views/elements/_AddressTile";
-@import "matrix-react-sdk/views/elements/_DirectorySearchBox";
-@import "matrix-react-sdk/views/elements/_MemberEventListSummary";
-@import "matrix-react-sdk/views/elements/_ProgressBar";
-@import "matrix-react-sdk/views/elements/_RichText";
-@import "matrix-react-sdk/views/login/_ServerConfig";
-@import "matrix-react-sdk/views/messages/_MImageBody";
-@import "matrix-react-sdk/views/messages/_MNoticeBody";
-@import "matrix-react-sdk/views/messages/_MTextBody";
-@import "matrix-react-sdk/views/messages/_TextualEvent";
-@import "matrix-react-sdk/views/messages/_UnknownBody";
-@import "matrix-react-sdk/views/rooms/_Autocomplete";
-@import "matrix-react-sdk/views/rooms/_EntityTile";
-@import "matrix-react-sdk/views/rooms/_EventTile";
-@import "matrix-react-sdk/views/rooms/_LinkPreviewWidget";
-@import "matrix-react-sdk/views/rooms/_MemberDeviceInfo";
-@import "matrix-react-sdk/views/rooms/_MemberInfo";
-@import "matrix-react-sdk/views/rooms/_MemberList";
-@import "matrix-react-sdk/views/rooms/_MessageComposer";
-@import "matrix-react-sdk/views/rooms/_PresenceLabel";
-@import "matrix-react-sdk/views/rooms/_RoomHeader";
-@import "matrix-react-sdk/views/rooms/_RoomList";
-@import "matrix-react-sdk/views/rooms/_RoomPreviewBar";
-@import "matrix-react-sdk/views/rooms/_RoomSettings";
-@import "matrix-react-sdk/views/rooms/_RoomTile";
-@import "matrix-react-sdk/views/rooms/_SearchableEntityList";
-@import "matrix-react-sdk/views/rooms/_TabCompleteBar";
-@import "matrix-react-sdk/views/rooms/_TopUnreadMessagesBar";
-@import "matrix-react-sdk/views/settings/_DevicesPanel";
-@import "matrix-react-sdk/views/settings/_IntegrationsManager";
-@import "matrix-react-sdk/views/voip/_CallView";
-@import "matrix-react-sdk/views/voip/_IncomingCallbox";
-@import "matrix-react-sdk/views/voip/_VideoView";
-@import "vector-web/_fonts";
-@import "vector-web/structures/_CompatibilityPage";
-@import "vector-web/structures/_LeftPanel";
-@import "vector-web/structures/_RightPanel";
-@import "vector-web/structures/_RoomDirectory";
-@import "vector-web/structures/_RoomSubList";
-@import "vector-web/structures/_ViewSource";
-@import "vector-web/views/context_menus/_MessageContextMenu";
-@import "vector-web/views/context_menus/_NotificationStateContextMenu";
-@import "vector-web/views/context_menus/_RoomTagContextMenu";
-@import "vector-web/views/dialogs/_ChangelogDialog";
-@import "vector-web/views/directory/_NetworkDropdown";
-@import "vector-web/views/elements/_ImageView";
-@import "vector-web/views/elements/_Spinner";
-@import "vector-web/views/globals/_GuestWarningBar";
-@import "vector-web/views/globals/_MatrixToolbar";
-@import "vector-web/views/messages/_MessageTimestamp";
-@import "vector-web/views/messages/_SenderProfile";
-@import "vector-web/views/rooms/_RoomDropTarget";
-@import "vector-web/views/rooms/_RoomTooltip";
-@import "vector-web/views/rooms/_SearchBar";
-@import "vector-web/views/settings/_Notifications";
+@import "./_common.scss";
+@import "./matrix-react-sdk/structures/_ContextualMenu.scss";
+@import "./matrix-react-sdk/structures/_CreateRoom.scss";
+@import "./matrix-react-sdk/structures/_FilePanel.scss";
+@import "./matrix-react-sdk/structures/_MatrixChat.scss";
+@import "./matrix-react-sdk/structures/_NotificationPanel.scss";
+@import "./matrix-react-sdk/structures/_RoomStatusBar.scss";
+@import "./matrix-react-sdk/structures/_RoomView.scss";
+@import "./matrix-react-sdk/structures/_SearchBox.scss";
+@import "./matrix-react-sdk/structures/_UploadBar.scss";
+@import "./matrix-react-sdk/structures/_UserSettings.scss";
+@import "./matrix-react-sdk/structures/login/_Login.scss";
+@import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
+@import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
+@import "./matrix-react-sdk/views/elements/_AddressTile.scss";
+@import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
+@import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
+@import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
+@import "./matrix-react-sdk/views/elements/_RichText.scss";
+@import "./matrix-react-sdk/views/login/_ServerConfig.scss";
+@import "./matrix-react-sdk/views/messages/_MImageBody.scss";
+@import "./matrix-react-sdk/views/messages/_MNoticeBody.scss";
+@import "./matrix-react-sdk/views/messages/_MTextBody.scss";
+@import "./matrix-react-sdk/views/messages/_TextualEvent.scss";
+@import "./matrix-react-sdk/views/messages/_UnknownBody.scss";
+@import "./matrix-react-sdk/views/rooms/_Autocomplete.scss";
+@import "./matrix-react-sdk/views/rooms/_EntityTile.scss";
+@import "./matrix-react-sdk/views/rooms/_EventTile.scss";
+@import "./matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberDeviceInfo.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberInfo.scss";
+@import "./matrix-react-sdk/views/rooms/_MemberList.scss";
+@import "./matrix-react-sdk/views/rooms/_MessageComposer.scss";
+@import "./matrix-react-sdk/views/rooms/_PresenceLabel.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomHeader.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomList.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomPreviewBar.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomSettings.scss";
+@import "./matrix-react-sdk/views/rooms/_RoomTile.scss";
+@import "./matrix-react-sdk/views/rooms/_SearchableEntityList.scss";
+@import "./matrix-react-sdk/views/rooms/_TabCompleteBar.scss";
+@import "./matrix-react-sdk/views/rooms/_TopUnreadMessagesBar.scss";
+@import "./matrix-react-sdk/views/settings/_DevicesPanel.scss";
+@import "./matrix-react-sdk/views/settings/_IntegrationsManager.scss";
+@import "./matrix-react-sdk/views/voip/_CallView.scss";
+@import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
+@import "./matrix-react-sdk/views/voip/_VideoView.scss";
+@import "./themes/_base.scss";
+@import "./vector-web/_fonts.scss";
+@import "./vector-web/structures/_CompatibilityPage.scss";
+@import "./vector-web/structures/_LeftPanel.scss";
+@import "./vector-web/structures/_RightPanel.scss";
+@import "./vector-web/structures/_RoomDirectory.scss";
+@import "./vector-web/structures/_RoomSubList.scss";
+@import "./vector-web/structures/_ViewSource.scss";
+@import "./vector-web/views/context_menus/_MessageContextMenu.scss";
+@import "./vector-web/views/context_menus/_NotificationStateContextMenu.scss";
+@import "./vector-web/views/context_menus/_RoomTagContextMenu.scss";
+@import "./vector-web/views/dialogs/_ChangelogDialog.scss";
+@import "./vector-web/views/directory/_NetworkDropdown.scss";
+@import "./vector-web/views/elements/_ImageView.scss";
+@import "./vector-web/views/elements/_Spinner.scss";
+@import "./vector-web/views/globals/_GuestWarningBar.scss";
+@import "./vector-web/views/globals/_MatrixToolbar.scss";
+@import "./vector-web/views/messages/_MessageTimestamp.scss";
+@import "./vector-web/views/messages/_SenderProfile.scss";
+@import "./vector-web/views/rooms/_RoomDropTarget.scss";
+@import "./vector-web/views/rooms/_RoomTooltip.scss";
+@import "./vector-web/views/rooms/_SearchBar.scss";
+@import "./vector-web/views/settings/_Notifications.scss";
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
index 29e3438208..915b235da0 100755
--- a/src/skins/vector/css/rethemendex.sh
+++ b/src/skins/vector/css/rethemendex.sh
@@ -4,5 +4,5 @@ echo "// autogenerated by rethemendex.sh" > _components.scss
 
 for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
 do
-    echo "@import \"`dirname $i`/`basename $i .scss`\";" >> _components.scss
+    echo "@import \"$i\";" >> _components.scss
 done
diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
index 5449b90ed6..0c51486b57 100644
--- a/src/skins/vector/css/themes/dark.scss
+++ b/src/skins/vector/css/themes/dark.scss
@@ -1,72 +1,4 @@
-@import "_base";
-
-// typical text (dark-on-white in light skin)
-$primary-fg-color: #dddddd;
-$primary-bg-color: #2d2d2d;
-
-// used for focusing form controls
-$focus-bg-color: #101010;
-
-// used for dialog box text
-$light-fg-color: #747474;
-
-// button UI (white-on-green in light skin)
-$accent-fg-color: $primary-bg-color;
-$accent-color: #76CFA6;
-
-// red warning colour
-$warning-color: #ff0064;
-
-// left-panel style muted accent color
-$secondary-accent-color: $primary-bg-color;
-
-// used by AddressSelector
-$selected-color: #eaf5f0;
-
-// selected for hoverover & selected event tiles
-$event-selected-color: #353535;
-
-// used for the hairline dividers in RoomView
-$primary-hairline-color: #474747;
-
-// used for the border of input text fields
-$input-border-color: #3a3a3a;
-
-// apart from login forms, which have stronger border
-$strong-input-border-color: #656565;
-
-// context menus
-$menu-border-color: rgba(187, 187, 187, 0.5);
-$menu-bg-color: #373737;
-
-$avatar-initial-color: #2d2d2d;
-
-// ********************
-
-$roomtile-name-color: rgba(186, 186, 186, 0.8);
-$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
-
-$roomsublist-label-fg-color: $primary-fg-color;
-$roomsublist-label-bg-color: #454545;
-
-// ********************
-
-// event tile lifecycle
-$event-encrypting-color: #abddbc;
-$event-sending-color: #ddd;
-$event-notsent-color: #f44;
-
-// event timestamp
-$event-timestamp-color: #acacac;
-
-// e2e
-$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
-$e2e-unverified-color: #e8bf37;
-$e2e-warning-color: #ba6363;
-
-/*** ImageView ***/
-$lightbox-bg-color: #454545;
-$lightbox-fg-color: #ffffff;
-$lightbox-border-color: #ffffff;
-
-@import "../_components";
\ No newline at end of file
+@import "_base.scss";
+@import "_dark.scss";
+@import "../_components.scss";
+// moofleasdadsasdadsa
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/light.scss b/src/skins/vector/css/themes/light.scss
index 8b951e27e0..ea0f93d5a3 100644
--- a/src/skins/vector/css/themes/light.scss
+++ b/src/skins/vector/css/themes/light.scss
@@ -1,2 +1,2 @@
-@import "_base";
-@import "../_components";
\ No newline at end of file
+@import "_base.scss";
+@import "../_components.scss";
\ No newline at end of file
diff --git a/src/vector/index.js b/src/vector/index.js
index 47509887b5..64b8769812 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -30,7 +30,7 @@ require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/themes/dark.css');
+require('../../build/dark.scss');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
diff --git a/webpack.config.js b/webpack.config.js
index 1c408b7068..1f2a8a60b1 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,8 +24,8 @@ module.exports = {
             { test: /\.json$/, loader: "json" },
             { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
             // css-raw-loader loads CSS but doesn't try to treat url()s as require()s
-            { test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
-            { test: /\.scss$/, loaders: ["style-loader", "css-loader?sourceMap", "sass-loader?sourceMap"] },
+            // we're assuming that postcss has already preprocessed SCSS by this point
+            { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
         ],
         noParse: [
             // don't parse the languages within highlight.js. They cause stack

From c1d4a0dd2826b8ec7dad6fcbd946c2ef4cd985b6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 10 Jan 2017 11:06:45 +0000
Subject: [PATCH 017/168] postcss experiment

---
 postcss.config.json                    | 18 +++++++
 src/skins/vector/css/themes/_dark.scss | 69 ++++++++++++++++++++++++++
 2 files changed, 87 insertions(+)
 create mode 100644 postcss.config.json
 create mode 100644 src/skins/vector/css/themes/_dark.scss

diff --git a/postcss.config.json b/postcss.config.json
new file mode 100644
index 0000000000..be3585cf7e
--- /dev/null
+++ b/postcss.config.json
@@ -0,0 +1,18 @@
+{
+    "use": [
+        "autoprefixer",
+        "postcss-import",
+        "postcss-simple-vars",
+        "postcss-extend",
+        "postcss-nested",
+        "postcss-mixins",
+        "postcss-strip-inline-comments"
+    ],
+    "parser": "postcss-scss",
+    "input": "src/skins/vector/css/themes/[^_]*.scss",
+    "dir": "build",
+    "local-plugins": true,
+    "autoprefixer": {
+        "browsers": "> 5%"
+    }
+}
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
new file mode 100644
index 0000000000..e2c33e3e7c
--- /dev/null
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -0,0 +1,69 @@
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #dddddd;
+$primary-bg-color: #2d2d2d;
+
+// used for focusing form controls
+$focus-bg-color: #101010;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: $primary-bg-color;
+$accent-color: #76CFA6;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: $primary-bg-color;
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #353535;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #474747;
+
+// used for the border of input text fields
+$input-border-color: #3a3a3a;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #656565;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #373737;
+
+$avatar-initial-color: #2d2d2d;
+
+// ********************
+
+$roomtile-name-color: rgba(186, 186, 186, 0.8);
+$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
+
+$roomsublist-label-fg-color: $primary-fg-color;
+$roomsublist-label-bg-color: #454545;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;

From c5459a2f19607a5d87a783b75cabcdfa4c0abd1d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 10 Jan 2017 18:39:21 +0000
Subject: [PATCH 018/168] Enable screen sharing easter-egg in desktop app

---
 electron/src/electron-main.js           | 2 ++
 src/vector/platform/ElectronPlatform.js | 4 ++++
 src/vector/platform/WebPlatform.js      | 8 ++++++++
 3 files changed, 14 insertions(+)

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index 2b135a03ed..675640a520 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -148,6 +148,8 @@ process.on('uncaughtException', function (error) {
 
 electron.ipcMain.on('install_update', installUpdate);
 
+electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing');
+
 electron.app.on('ready', () => {
     if (vectorConfig.update_base_url) {
         console.log("Starting auto update with base URL: " + vectorConfig.update_base_url);
diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js
index 3b41822bda..68df88b096 100644
--- a/src/vector/platform/ElectronPlatform.js
+++ b/src/vector/platform/ElectronPlatform.js
@@ -127,4 +127,8 @@ export default class ElectronPlatform extends VectorBasePlatform {
     getDefaultDeviceDisplayName() {
         return "Riot Desktop on " + platformFriendlyName();
     }
+
+    screenCaptureErrorString() {
+        return null;
+    }
 }
diff --git a/src/vector/platform/WebPlatform.js b/src/vector/platform/WebPlatform.js
index c4ed4d5550..2029822b61 100644
--- a/src/vector/platform/WebPlatform.js
+++ b/src/vector/platform/WebPlatform.js
@@ -196,4 +196,12 @@ export default class WebPlatform extends VectorBasePlatform {
         return app_name + " via " + ua.getBrowser().name +
             " on " + ua.getOS().name;
     }
+
+    screenCaptureErrorString() {
+        // it won't work at all if you're not on HTTPS so whine whine whine
+        if (!global.window || global.window.location.protocol !== "https:") {
+            return "You need to be using HTTPS to place a screen-sharing call.";
+        }
+        return null;
+    }
 }

From b71f96e4e5de520f1bbc7166b2bbd0ba1ffae4af Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 10:28:04 +0000
Subject: [PATCH 019/168] Use the role for 'toggle dev tools'

Let electron handle it rather than doing it ourselves
---
 electron/src/vectormenu.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/electron/src/vectormenu.js b/electron/src/vectormenu.js
index f4d55c15a7..70ed3ac33c 100644
--- a/electron/src/vectormenu.js
+++ b/electron/src/vectormenu.js
@@ -72,11 +72,7 @@ const template = [
                 role: 'togglefullscreen'
             },
             {
-                label: 'Toggle Developer Tools',
-                accelerator: process.platform == 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
-                click: function(item, focusedWindow) {
-                    if (focusedWindow) focusedWindow.toggleDevTools();
-                }
+                role: 'toggledevtools'
             }
         ]
     },

From 06718c580e49e4f506f01a1cf938889aaa6b371d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 16:27:40 +0000
Subject: [PATCH 020/168] Hopefully fix Windows shortcuts

 * Revert https://github.com/vector-im/riot-web/commit/79d164309f7926cb1c24008e464a516d7a872325
   as it seems to break shortcuts altogether
 * Update electron-builder (and add the squirrel windows package
   that the newer version now requires: it's been split out). This
   uses a newer version of squirrel which has some fixes for
   shortcuts.

I'm unsure exactly what was going wrong originally in
https://github.com/vector-im/riot-web/issues/2775 but #79d1643
seems to break shortcut creation as far as I can see.
---
 electron/src/squirrelhooks.js | 7 ++++++-
 package.json                  | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js
index 295ef5cfda..ca0983b66e 100644
--- a/electron/src/squirrelhooks.js
+++ b/electron/src/squirrelhooks.js
@@ -3,7 +3,12 @@ const spawn = require('child_process').spawn;
 const app = require('electron').app;
 
 function run_update_exe(args, done) {
-    const updateExe = path.resolve(path.dirname(process.execPath), 'Update.exe');
+    // Invokes Squirrel's Update.exe which will do things for us like create shortcuts
+    // Note that there's an Update.exe in the app-x.x.x directory and one in the parent
+    // directory: we need to run the one in the parent directory, because it discovers
+    // information about the app by inspecting the directory it's run from.
+    const updateExe = path.resolve(path.dirname(process.execPath), '..', 'Update.exe');
+    console.log('Spawning `%s` with args `%s`', updateExe, args);
     spawn(updateExe, args, {
       detached: true
     }).on('close', done);
diff --git a/package.json b/package.json
index 52cc41be32..b110b2aff6 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,8 @@
     "chokidar": "^1.6.1",
     "cpx": "^1.3.2",
     "css-raw-loader": "^0.1.1",
-    "electron-builder": "^10.4.1",
+    "electron-builder": "^11.2.4",
+    "electron-builder-squirrel-windows": "^11.2.1",
     "emojione": "^2.2.3",
     "expect": "^1.16.0",
     "fs-extra": "^0.30.0",

From 97fc92b1bb01758294f304bc5ef687b307eec2ca Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 16:50:09 +0000
Subject: [PATCH 021/168] Update to electron 1.4.14

This pulls in the chrome change that broke geotrust ssl when the
build hit 10 weeks old, so let's get this one out before we hit
more disasters.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 52cc41be32..59dfe1e8dd 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
   "build": {
     "appId": "im.riot.app",
     "category": "Network",
-    "electronVersion": "1.4.11",
+    "electronVersion": "1.4.14",
     "//asar=false": "https://github.com/electron-userland/electron-builder/issues/675",
     "asar": false,
     "dereference": true,

From 10f0631487589f7c0841cf049be719024150b43e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 17:20:27 +0000
Subject: [PATCH 022/168] Build the js-sdk in the CI script

now it's transpiled
---
 scripts/jenkins.sh | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh
index be8d8deebe..bd27d6e3b1 100755
--- a/scripts/jenkins.sh
+++ b/scripts/jenkins.sh
@@ -19,7 +19,8 @@ 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
+# we may be using dev branches of js-sdk and react-sdk, in which case we need to build them
+(cd node_modules/matrix-js-sdk && npm run build)
 (cd node_modules/matrix-react-sdk && npm run build)
 
 # run the mocha tests

From 5258bf9c8455e97ce59e82150c51e31c0c681a44 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 17:25:58 +0000
Subject: [PATCH 023/168] Update README now the js-sdk has a transpile step

---
 README.md | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index f775434825..57cfd5cb4f 100644
--- a/README.md
+++ b/README.md
@@ -58,8 +58,11 @@ to build.
 1. Install the prerequisites: `npm install`
 1. If you are using the `develop` branch of vector-web, 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)`
+   https://github.com/npm/npm/issues/3055:
+   ```
+   (cd node_modules/matrix-js-sdk && npm install)
+   (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 dist` to build a tarball to deploy. Untaring this file will give
@@ -241,10 +244,10 @@ Finally, build and start Riot itself:
    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 Riot.
 
-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.
+When you make changes to `matrix-react-sdk` or `matrix-js-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 Riot skin, you will need to rebuild
 the skin's index by running, `npm run reskindex`.

From 27e311f7e8dccb0f8e3774d77b612df3beb80529 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 18:15:06 +0000
Subject: [PATCH 024/168] Address PR comments

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 57cfd5cb4f..ba59ea2690 100644
--- a/README.md
+++ b/README.md
@@ -57,8 +57,9 @@ to build.
 1. Switch to the vector-web directory: `cd vector-web`
 1. Install the prerequisites: `npm install`
 1. If you are using the `develop` branch of vector-web, you will probably need
-   to rebuild one of the dependencies, due to
+   to rebuild some of the dependencies, due to
    https://github.com/npm/npm/issues/3055:
+
    ```
    (cd node_modules/matrix-js-sdk && npm install)
    (cd node_modules/matrix-react-sdk && npm install)

From f17f103d1287ce4390505a31abc13fd1484abf42 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 18:19:44 +0000
Subject: [PATCH 025/168] s/build/compile/ for js sdk

---
 scripts/jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh
index bd27d6e3b1..6ba384e1e4 100755
--- a/scripts/jenkins.sh
+++ b/scripts/jenkins.sh
@@ -20,7 +20,7 @@ rm -r node_modules/olm
 cp -r olm/package node_modules/olm
 
 # we may be using dev branches of js-sdk and react-sdk, in which case we need to build them
-(cd node_modules/matrix-js-sdk && npm run build)
+(cd node_modules/matrix-js-sdk && npm run compile)
 (cd node_modules/matrix-react-sdk && npm run build)
 
 # run the mocha tests

From 70f48343ee905f09be867207f5d8eed53f3d896d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 11 Jan 2017 19:03:52 +0000
Subject: [PATCH 026/168] It's now just build

---
 scripts/jenkins.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh
index 6ba384e1e4..bd27d6e3b1 100755
--- a/scripts/jenkins.sh
+++ b/scripts/jenkins.sh
@@ -20,7 +20,7 @@ rm -r node_modules/olm
 cp -r olm/package node_modules/olm
 
 # we may be using dev branches of js-sdk and react-sdk, in which case we need to build them
-(cd node_modules/matrix-js-sdk && npm run compile)
+(cd node_modules/matrix-js-sdk && npm run build)
 (cd node_modules/matrix-react-sdk && npm run build)
 
 # run the mocha tests

From 0d05e607f067ccc0d6d6a6740bb004262a1ff727 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 12 Jan 2017 17:24:28 +0000
Subject: [PATCH 027/168] install js-sdk in travis too

---
 .travis.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.travis.yml b/.travis.yml
index 1fbc4dccb7..af738bb429 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,4 +3,5 @@ node_js:
     - 6   # node v6, to match jenkins
 install:
     - npm install
+    - (cd node_modules/matrix-js-sdk && npm install)
     - (cd node_modules/matrix-react-sdk && npm run build)

From 40545bd48e45fa8f0b40841b89e6f20c1afa9599 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:15:55 +0000
Subject: [PATCH 028/168] Released react-sdk & js-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index fd7c3b12ee..823dd04d5a 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
+    "matrix-js-sdk": "0.7.4-rc.1",
+    "matrix-react-sdk": "0.8.5-rc.1",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 9471c30f89ded93656ac5bd3f29a296b77a8d894 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:21:08 +0000
Subject: [PATCH 029/168] Prepare changelog for v0.9.6-rc.1

---
 CHANGELOG.md | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 265cbe80fd..0077205511 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+Changes in [0.9.6-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.6-rc.1) (2017-01-13)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.5...v0.9.6-rc.1)
+
+ * Build the js-sdk in the CI script
+   [\#2920](https://github.com/vector-im/riot-web/pull/2920)
+ * Hopefully fix Windows shortcuts
+   [\#2917](https://github.com/vector-im/riot-web/pull/2917)
+ * Update README now the js-sdk has a transpile step
+   [\#2921](https://github.com/vector-im/riot-web/pull/2921)
+ * Use the role for 'toggle dev tools'
+   [\#2915](https://github.com/vector-im/riot-web/pull/2915)
+ * Enable screen sharing easter-egg in desktop app
+   [\#2909](https://github.com/vector-im/riot-web/pull/2909)
+ * make electron send email validation URLs with a nextlink of riot.im
+   [\#2808](https://github.com/vector-im/riot-web/pull/2808)
+ * add Debian Stretch install steps to readme
+   [\#2809](https://github.com/vector-im/riot-web/pull/2809)
+ * Update desktop build instructions fixes #2792
+   [\#2793](https://github.com/vector-im/riot-web/pull/2793)
+ * CSS for the delete threepid button
+   [\#2784](https://github.com/vector-im/riot-web/pull/2784)
+
 Changes in [0.9.5](https://github.com/vector-im/riot-web/releases/tag/v0.9.5) (2016-12-24)
 ==========================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.4...v0.9.5)

From e1c1937855967e0a1da57d00728b091d9dbfdec0 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 13 Jan 2017 11:21:08 +0000
Subject: [PATCH 030/168] v0.9.6-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 823dd04d5a..ab9e36c553 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.5",
+  "version": "0.9.6-rc.1",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From ccf7db7cc227b4d5a8996d485493b0b8f0c06cc2 Mon Sep 17 00:00:00 2001
From: Hubert Chathi <hubert@uhoreg.ca>
Date: Fri, 13 Jan 2017 15:06:29 -0500
Subject: [PATCH 031/168] Fix a couple more references to vector-web in
 README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index f82572fbcf..1368589e82 100644
--- a/README.md
+++ b/README.md
@@ -46,9 +46,9 @@ 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/riot-web.git`
-1. Switch to the vector-web directory: `cd vector-web`
+1. Switch to the riot-web directory: `cd riot-web`
 1. Install the prerequisites: `npm install`
-1. If you are using the `develop` branch of vector-web, you will probably need
+1. If you are using the `develop` branch of riot-web, 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)`

From 5edb5f6487404b89da45f13f3d8444dd1f533d0f Mon Sep 17 00:00:00 2001
From: Jani Mustonen <janijohannes@kapsi.fi>
Date: Fri, 6 Jan 2017 01:37:12 +0200
Subject: [PATCH 032/168] Turned divs to button-likes to comply with MDN's
 recommendations

---
 src/components/structures/BottomLeftMenu.js   | 17 ++++----
 src/components/structures/RightPanel.js       | 17 +++++---
 src/components/structures/RoomSubList.js      | 13 +++---
 src/components/structures/SearchBox.js        | 43 +++++++++++++++----
 src/components/views/elements/ImageView.js    |  3 +-
 src/components/views/globals/MatrixToolbar.js |  3 +-
 src/components/views/rooms/SearchBar.js       | 11 ++---
 7 files changed, 74 insertions(+), 33 deletions(-)

diff --git a/src/components/structures/BottomLeftMenu.js b/src/components/structures/BottomLeftMenu.js
index 0ea35b4ecb..1e352fa12a 100644
--- a/src/components/structures/BottomLeftMenu.js
+++ b/src/components/structures/BottomLeftMenu.js
@@ -20,6 +20,7 @@ var React = require('react');
 var ReactDOM = require('react-dom');
 var sdk = require('matrix-react-sdk')
 var dis = require('matrix-react-sdk/lib/dispatcher');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'BottomLeftMenu',
@@ -101,22 +102,22 @@ module.exports = React.createClass({
         return (
             <div className="mx_BottomLeftMenu">
                 <div className="mx_BottomLeftMenu_options">
-                    <div className="mx_BottomLeftMenu_people" onClick={ this.onPeopleClick } onMouseEnter={ this.onPeopleMouseEnter } onMouseLeave={ this.onPeopleMouseLeave } >
+                    <AccessibleButton 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 } >
+                    </AccessibleButton>
+                    <AccessibleButton 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 } >
+                    </AccessibleButton>
+                    <AccessibleButton 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 } >
+                    </AccessibleButton>
+                    <AccessibleButton 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>
+                    </AccessibleButton>
                 </div>
             </div>
         );
diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d1622e5f41..7bd5d3b9ed 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -23,6 +23,7 @@ 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');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'RightPanel',
@@ -207,12 +208,12 @@ module.exports = React.createClass({
 
             if (user_is_in_room) {
                 inviteGroup =
-                    <div className="mx_RightPanel_invite" onClick={ this.onInviteButtonClick } >
+                    <AccessibleButton 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>;
+                    </AccessibleButton>;
             }
 
         }
@@ -220,20 +221,26 @@ module.exports = React.createClass({
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
-                        <div className="mx_RightPanel_headerButton" title="Members" onClick={ this.onMemberListButtonClick }>
+                        <div className="mx_RightPanel_headerButton">
+                        <AccessibleButton title="Members" onClick={ this.onMemberListButtonClick }>
                             <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
                             <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
+                        </AccessibleButton>
                         </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton" title="Files" onClick={ this.onFileListButtonClick }>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
+                        <AccessibleButton title="Files" onClick={ this.onFileListButtonClick }>
                             <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
                             <TintableSvg src="img/icons-files.svg" width="25" height="25"/>
                             { filesHighlight }
+                        </AccessibleButton>
                         </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton" title="Notifications" onClick={ this.onNotificationListButtonClick }>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton">
+                        <AccessibleButton title="Notifications" onClick={ this.onNotificationListButtonClick }>
                             <div className="mx_RightPanel_headerButton_badge">&nbsp;</div>
                             <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
                             { notificationsHighlight }
+                        </AccessibleButton>
                         </div>
                     </div>;
         }
diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js
index e87f3f8a33..af8500df77 100644
--- a/src/components/structures/RoomSubList.js
+++ b/src/components/structures/RoomSubList.js
@@ -26,6 +26,7 @@ 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');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 // turn this on for drop & drag console debugging galore
 var debug = false;
@@ -417,15 +418,17 @@ var RoomSubList = React.createClass({
             }
         }
 
+        var tabindex = this.props.searchFilter === "" ? "0" : "-1";
+
         return (
             <div className="mx_RoomSubList_labelContainer" title={ title } ref="header">
-                <div onClick={ this.onClick } className="mx_RoomSubList_label">
+                <AccessibleButton onClick={ this.onClick } className="mx_RoomSubList_label" tabIndex={tabindex}>
                     { this.props.collapsed ? '' : this.props.label }
                     <div className="mx_RoomSubList_roomCount">{ roomCount }</div>
                     <div className={chevronClasses}></div>
                     { badge }
                     { incomingCall }
-                </div>
+                </AccessibleButton>
             </div>
         );
     },
@@ -447,11 +450,11 @@ var RoomSubList = React.createClass({
         });
 
         return (
-            <div className="mx_RoomSubList_ellipsis" onClick={this._showFullMemberList}>
+            <AccessibleButton 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>
+                <div className={ badgeClasses }>{ content }</div>
+            </AccessibleButton>
         );
     },
 
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 7fc5100049..036ff3f15c 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -20,6 +20,7 @@ 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');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'SearchBox',
@@ -35,6 +36,25 @@ module.exports = React.createClass({
         };
     },
 
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        switch (payload.action) {
+            // Clear up the text field when a room is selected.
+            case 'view_room':
+                if (this.refs.search) {
+                    this._clearSearch();
+                }
+                break;
+        }
+    },
+
     onChange: function() {
         if (!this.refs.search) return;
         this.setState({ searchTerm: this.refs.search.value });
@@ -61,35 +81,42 @@ module.exports = React.createClass({
         }
     },
 
+    _clearSearch: function() {
+        this.refs.search.value = "";
+        this.onChange();
+    },
+
     render: function() {
         var TintableSvg = sdk.getComponent('elements.TintableSvg');
 
+        var collapseTabIndex = this.refs.search && this.refs.search.value !== "" ? "-1" : "0";
+
         var toggleCollapse;
         if (this.props.collapsed) {
             toggleCollapse =
-                <div className="mx_SearchBox_maximise" onClick={ this.onToggleCollapse.bind(this, true) }>
+                <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
                     <TintableSvg src="img/maximise.svg" width="10" height="16" alt="&lt;"/>
-                </div>
+                </AccessibleButton>
         }
         else {
             toggleCollapse =
-                <div className="mx_SearchBox_minimise" onClick={ this.onToggleCollapse.bind(this, false) }>
+                <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
                     <TintableSvg src="img/minimise.svg" width="10" height="16" alt="&lt;"/>
-                </div>
+                </AccessibleButton>
         }
 
         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(); } }>
+                    <AccessibleButton key="button"
+                            className="mx_SearchBox_closeButton"
+                            onClick={ ()=>{ this._clearSearch(); } }>
                         <TintableSvg
                             className="mx_SearchBox_searchButton"
                             src="img/icons-close.svg" width="24" height="24"
                         />
-                    </div>
+                    </AccessibleButton>
                     :
                     <TintableSvg
                         key="button"
diff --git a/src/components/views/elements/ImageView.js b/src/components/views/elements/ImageView.js
index c47fecfed6..4a0c1663be 100644
--- a/src/components/views/elements/ImageView.js
+++ b/src/components/views/elements/ImageView.js
@@ -22,6 +22,7 @@ var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 
 var DateUtils = require('matrix-react-sdk/lib/DateUtils');
 var filesize = require('filesize');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'ImageView',
@@ -162,7 +163,7 @@ module.exports = React.createClass({
                     <img src={this.props.src} style={style}/>
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
-                            <img className="mx_ImageView_cancel" src="img/cancel-white.svg" width="18" height="18" alt="Close" onClick={ this.props.onFinished }/>
+                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt="Close"/></AccessibleButton>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">
diff --git a/src/components/views/globals/MatrixToolbar.js b/src/components/views/globals/MatrixToolbar.js
index a22e15ffc1..dbe4196aad 100644
--- a/src/components/views/globals/MatrixToolbar.js
+++ b/src/components/views/globals/MatrixToolbar.js
@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var Notifier = require("matrix-react-sdk/lib/Notifier");
 var sdk = require('matrix-react-sdk')
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'MatrixToolbar',
@@ -38,7 +39,7 @@ module.exports = React.createClass({
                 <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>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
             </div>
         );
     }
diff --git a/src/components/views/rooms/SearchBar.js b/src/components/views/rooms/SearchBar.js
index 99e7706416..1653f269a8 100644
--- a/src/components/views/rooms/SearchBar.js
+++ b/src/components/views/rooms/SearchBar.js
@@ -20,6 +20,7 @@ var React = require('react');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
 var sdk = require('matrix-react-sdk');
 var classNames = require('classnames');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
 
 module.exports = React.createClass({
     displayName: 'SearchBar',
@@ -57,12 +58,12 @@ module.exports = React.createClass({
         var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' });
 
         return (
-            <div className="mx_SearchBar">
+            <div className="mx_SearchBar"> 
                 <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder="Search..." onKeyDown={this.onSearchChange}/>
-                <div className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></div>
-                <div className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</div>
-                <div className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</div>
-                <img className="mx_SearchBar_cancel" src="img/cancel.svg" width="18" height="18" onClick={this.props.onCancelClick} />
+                <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt="Search"/></AccessibleButton>
+                <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>This Room</AccessibleButton>
+                <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>All Rooms</AccessibleButton>
+                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
             </div>
         );
     }

From 002339fb86ffcd128ba90a0508d85e22a94255fa Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 02:10:45 +0000
Subject: [PATCH 033/168] factor out some more colours

---
 src/skins/vector/css/_common.scss             |  4 +--
 .../structures/_UserSettings.scss             |  6 ++---
 .../structures/login/_Login.scss              |  2 +-
 .../views/elements/_DirectorySearchBox.scss   |  2 +-
 .../views/elements/_ProgressBar.scss          |  4 +--
 .../views/rooms/_MemberInfo.scss              |  2 +-
 .../views/rooms/_MemberList.scss              |  2 +-
 .../views/rooms/_RoomSettings.scss            |  2 +-
 src/skins/vector/css/themes/_base.scss        | 26 +++++++++++++++----
 src/skins/vector/css/themes/_dark.scss        | 20 +++++++++++++-
 .../vector-web/structures/_RoomDirectory.scss |  2 +-
 .../views/rooms/_RoomDropTarget.scss          |  2 +-
 12 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index ed96b48c22..9e2ac1f468 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -174,13 +174,13 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #e9e9e9;
+    background-color: $dialog-background-bg-color;
     opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
-    background-color: #000;
+    background-color: $lightbox-background-bg-color;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 6ba1002bf9..1379063dc9 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -58,7 +58,7 @@ limitations under the License.
     clear: both;
     margin-left: 63px;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 26px;
@@ -166,10 +166,10 @@ limitations under the License.
 {
     display: inline-block;
     border: 0px;
-    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    border-bottom: 1px solid $input-underline-color;
     padding: 0px;
     width: 240px;
-    color: rgba(74, 74, 74, 0.9);
+    color: $input-fg-color;
     font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
     font-size: 16px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 5f4164e894..75dc71806e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -147,7 +147,7 @@ limitations under the License.
 }
 
 .mx_Login_error {
-    color: #ff2020;
+    color: $warning-color;
     font-weight: bold;
     text-align: center;
 /*
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index dd953ab955..66063733a6 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
-    background-color: #efefef;
+    background-color: $plinth-bg-color;
     border-radius: 3px;
     background-image: url('img/icon-return.svg');
     background-position: 8px 70%;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
index 7b5e0c7461..a3fee232d0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_ProgressBar.scss
@@ -16,10 +16,10 @@ limitations under the License.
 
 .mx_ProgressBar {
     height: 5px;
-    border: 1px solid black;
+    border: 1px solid $progressbar-color;
 }
 
 .mx_ProgressBar_fill {
     height: 100%;
-    background-color: #000;
+    background-color: $progressbar-color;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 3b4b653e55..970c2496b4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -61,7 +61,7 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 16px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 3c7e3ec5e6..8a6f117240 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -96,7 +96,7 @@ limitations under the License.
 
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     padding-left: 3px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index 132c979232..d9de0e8a2d 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_RoomSettings h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 36px;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index b9fd2d12bc..e623372afc 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -1,5 +1,4 @@
 
-
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
 $primary-bg-color: #ffffff;
@@ -20,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: #eaf5f0;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: $secondary-accent-color;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(255,255,255,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -35,18 +40,27 @@ $input-border-color: #f0f0f0;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
 
+// used for UserSettings EditableText
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
 
 $avatar-initial-color: #ffffff;
 
+$h3-color: #3d3b39;
+
+$dialog-background-bg-color: #e9e9e9;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
 $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
 
-$roomsublist-label-fg-color: #3d3b39;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #d3efe1;
 
 // ********************
@@ -64,8 +78,10 @@ $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
 $e2e-warning-color: #ba6363;
 
-// ********************
-
+/*** ImageView ***/
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
-$lightbox-border-color: #ffffff;
\ No newline at end of file
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index e2c33e3e7c..1d93c1a4d6 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -19,6 +19,12 @@ $warning-color: #ff0064;
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
 
+// used by RoomDirectory permissions
+$plinth-bg-color: #474747;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(45,45,45,0.5);
+
 // used by AddressSelector
 $selected-color: #eaf5f0;
 
@@ -34,18 +40,27 @@ $input-border-color: #3a3a3a;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #656565;
 
+// used for UserSettings EditableText
+$input-underline-color: $primary-fg-color;
+$input-fg-color: $primary-fg-color;
+
 // context menus
 $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #373737;
 
 $avatar-initial-color: #2d2d2d;
 
+$h3-color: $primary-fg-color;
+
+$dialog-background-bg-color: #000;
+$lightbox-background-bg-color: #000;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
 $roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
 
-$roomsublist-label-fg-color: $primary-fg-color;
+$roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;
 
 // ********************
@@ -67,3 +82,6 @@ $e2e-warning-color: #ba6363;
 $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
\ No newline at end of file
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index e5df8741d1..3dd885ba47 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -110,7 +110,7 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: $secondary-accent-color;
+    background-color: $plinth-bg-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
diff --git a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
index 2fe16ca949..e91658e8a8 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss
@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 5px;
     border: 1px dashed $accent-color;
     color: $primary-fg-color;
-    background-color: rgba(255,255,255,0.5);
+    background-color: $droptarget-bg-color;
     border-radius: 4px;
 }
 

From 231306ea7ce629fe0e58cab62f038d2b6e271dc7 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:24:44 +0000
Subject: [PATCH 034/168] Update js-sdk & react-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ab9e36c553..7b2916e00b 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.4-rc.1",
-    "matrix-react-sdk": "0.8.5-rc.1",
+    "matrix-js-sdk": "0.7.4",
+    "matrix-react-sdk": "0.8.5",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 3f3a31e475598237d0a44bd53746a06a48965bda Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:26:21 +0000
Subject: [PATCH 035/168] Prepare changelog for v0.9.6

---
 CHANGELOG.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0077205511..ee745baa1b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+Changes in [0.9.6](https://github.com/vector-im/riot-web/releases/tag/v0.9.6) (2017-01-16)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6-rc.1...v0.9.6)
+
+ * Update to matrix-js-sdk 0.9.6 for video calling fix
+
 Changes in [0.9.6-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.6-rc.1) (2017-01-13)
 ====================================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.5...v0.9.6-rc.1)

From 22060ac5a44b9d4fa66b8ffd74690588ca252297 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:26:22 +0000
Subject: [PATCH 036/168] v0.9.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7b2916e00b..f169cf9b2f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.6-rc.1",
+  "version": "0.9.6",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From ae7820e8f28552ca1a19fe7612a6d1c02c5b633f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Jan 2017 13:37:18 +0000
Subject: [PATCH 037/168] Fix merge

---
 package.json | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/package.json b/package.json
index 054dedf9a0..f169cf9b2f 100644
--- a/package.json
+++ b/package.json
@@ -62,13 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-<<<<<<< HEAD
-    "matrix-js-sdk": "0.7.2",
-    "matrix-react-sdk": "0.8.4",
-=======
     "matrix-js-sdk": "0.7.4",
     "matrix-react-sdk": "0.8.5",
->>>>>>> release-v0.9.6
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From b3bff92cc2cbe0f8818f2ae1563335671d0a2733 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Mon, 16 Jan 2017 18:01:25 +0000
Subject: [PATCH 038/168] Put parent build hash in webpack output filenames

In order to better support a world where old build artifacts are available
(which is necessary to support bundle.js splitting), collect all the webpack
artifacts for the build into a single directory. Then we'll be able to clear
out old builds after a few weeks, knowing they won't be in use any more.
---
 webpack.config.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webpack.config.js b/webpack.config.js
index 3500fedcb6..9c0c6bbb9b 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -40,7 +40,8 @@ module.exports = {
     },
     output: {
         path: path.join(__dirname, "webapp"),
-        filename: "[name].[chunkhash].js",
+        filename: "[hash]/[name].js",
+        chunkFilename: "[hash]/[name].js",
         devtoolModuleFilenameTemplate: function(info) {
             // Reading input source maps gives only relative paths here for
             // everything. Until I figure out how to fix this, this is a
@@ -79,7 +80,7 @@ module.exports = {
         }),
 
         new ExtractTextPlugin(
-            "[name].[contenthash].css",
+            "[hash]/[name].css",
             {
                 allChunks: true
             }

From 906d42688eb153a10e0e8f96701af1ebf4897ee0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 18:40:29 +0000
Subject: [PATCH 039/168] make autoprefixer work by reordering it

---
 postcss.config.json | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/postcss.config.json b/postcss.config.json
index be3585cf7e..7ed32cdac1 100644
--- a/postcss.config.json
+++ b/postcss.config.json
@@ -1,7 +1,7 @@
 {
     "use": [
-        "autoprefixer",
         "postcss-import",
+        "autoprefixer",
         "postcss-simple-vars",
         "postcss-extend",
         "postcss-nested",
@@ -11,8 +11,5 @@
     "parser": "postcss-scss",
     "input": "src/skins/vector/css/themes/[^_]*.scss",
     "dir": "build",
-    "local-plugins": true,
-    "autoprefixer": {
-        "browsers": "> 5%"
-    }
-}
\ No newline at end of file
+    "local-plugins": true
+}

From dc1563d916900a1ad66af358edc26f02d25a1c8f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 18:55:29 +0000
Subject: [PATCH 040/168] strip out unneeded webkit prefixes now we're using
 autoprefixer

---
 src/skins/vector/css/_common.scss             |  5 ----
 .../structures/_FilePanel.scss                |  3 --
 .../structures/_MatrixChat.scss               | 25 ----------------
 .../structures/_NotificationPanel.scss        |  3 --
 .../structures/_RoomStatusBar.scss            |  3 --
 .../structures/_RoomView.scss                 | 29 -------------------
 .../structures/_SearchBox.scss                |  2 --
 .../structures/_UserSettings.scss             |  9 ------
 .../structures/login/_Login.scss              |  4 ---
 .../views/elements/_DirectorySearchBox.scss   |  2 --
 .../views/rooms/_LinkPreviewWidget.scss       |  4 ---
 .../views/rooms/_MemberList.scss              |  8 -----
 .../views/rooms/_MessageComposer.scss         |  1 -
 .../views/rooms/_RoomHeader.scss              | 15 ----------
 .../views/rooms/_RoomPreviewBar.scss          |  7 -----
 .../views/rooms/_SearchableEntityList.scss    |  4 ---
 .../views/voip/_IncomingCallbox.scss          |  2 --
 .../css/vector-web/structures/_LeftPanel.scss |  9 ------
 .../vector-web/structures/_RightPanel.scss    | 12 --------
 .../vector-web/structures/_RoomDirectory.scss |  9 ------
 .../vector-web/views/elements/_ImageView.scss | 14 ---------
 .../vector-web/views/elements/_Spinner.scss   |  4 ---
 .../views/globals/_GuestWarningBar.scss       |  3 --
 .../views/globals/_MatrixToolbar.scss         |  4 ---
 .../vector-web/views/rooms/_SearchBar.scss    |  3 --
 25 files changed, 184 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 9e2ac1f468..6a62385535 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -83,7 +83,6 @@ textarea {
 /* 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;
@@ -128,14 +127,10 @@ textarea {
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-justify-content: center;
     justify-content: center;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index 2f4a00ad70..6c769a3bdd 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -15,13 +15,10 @@ 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%;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index 5587a6093c..61eb017058 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -27,34 +27,27 @@ limitations under the License.
 }
 
 .mx_MatrixChat_wrapper {
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 
     width: 100%;
     height: 100%;
 }
 
 .mx_MatrixToolbar {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     height: 40px;
 }
 
 .mx_GuestWarningBar {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     height: 40px;
@@ -68,52 +61,40 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
-    -webkit-flex: 1;
     flex: 1;
 }
 
 .mx_MatrixChat .mx_LeftPanel {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     background-color: $secondary-accent-color;
 
-    -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
-    -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     padding-left: 20px;
     padding-right: 22px;
     background-color: $primary-bg-color;
 
-    -webkit-flex: 1;
     flex: 1;
 
     /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
@@ -132,25 +113,19 @@ limitations under the License.
      * point, but instead we fudge it and make the middlePanel
      * flex itself.
      */
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
-    -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 122px;
     flex: 0 0 122px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index 06dd92f315..ed81849776 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -15,13 +15,10 @@ 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%;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index d0ac5a600c..5daac88fc4 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -123,18 +123,15 @@ limitations under the License.
 
 .mx_RoomStatusBar_tabCompleteWrapper {
     display: flex;
-    display: -webkit-flex;
     height: 26px;
 }
 
 .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
     flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
 }
 
 .mx_RoomStatusBar_tabCompleteEol {
     flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;
     color: $accent-color;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 182d690c5e..dc668236b8 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -18,25 +18,19 @@ limitations under the License.
     word-wrap: break-word;
     position: relative;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     width: 100%;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RoomView .mx_RoomHeader {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
@@ -53,8 +47,6 @@ limitations under the License.
     padding-right: 12px;
     margin-left: -12px;
 
-    -webkit-border-top-left-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
     -moz-border-radius-topleft: 10px;
     -moz-border-radius-topright: 10px;
     border-top-left-radius: 10px;
@@ -77,10 +69,8 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -91,26 +81,20 @@ limitations under the License.
     overflow: auto;
     border-bottom: 1px solid $primary-hairline-color;
 
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }
 
 .mx_RoomView_topUnreadMessagesBar {
-    -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 }
 
 .mx_RoomView_messagePanel {
-    -webkit-box-ordinal-group: 4;
     -moz-box-ordinal-group: 4;
     -ms-flex-order: 4;
-    -webkit-order: 4;
     order: 4;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     width: 100%;
@@ -124,22 +108,17 @@ limitations under the License.
 
     min-height: 100%;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 
     justify-content: flex-end;
-    -webkit-justify-content: flex-end;
 }
 
 .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
     justify-content: flex-start;
-    -webkit-justify-content: flex-start;
 }
 
 .mx_RoomView_MessageList {
@@ -162,10 +141,8 @@ limitations under the License.
 }
 
 .mx_RoomView_invitePrompt {
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -193,14 +170,11 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusArea {
-    -webkit-box-ordinal-group: 5;
     -moz-box-ordinal-group: 5;
     -ms-flex-order: 5;
-    -webkit-order: 5;
     order: 5;
 
     width: 100%;
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }
 
@@ -257,14 +231,11 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView .mx_MessageComposer {
-    -webkit-box-ordinal-group: 6;
     -moz-box-ordinal-group: 6;
     -ms-flex-order: 6;
-    -webkit-order: 6;
     order: 6;
 
     width: 100%;
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
     margin-right: 2px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
index 0b5362593b..bd335f6023 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
@@ -22,7 +22,6 @@ limitations under the License.
     padding-bottom: 22px;
 
     display: flex;
-    display: -webkit-flex;
 }
 
 .mx_SearchBox_searchButton {
@@ -38,7 +37,6 @@ limitations under the License.
 
 .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;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 1379063dc9..2c62a4eceb 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -20,34 +20,25 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_UserSettings .mx_RoomHeader {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
 .mx_UserSettings_body {
-    -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;
 
     margin-top: -20px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 75dc71806e..332f313f33 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -18,14 +18,10 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-justify-content: center;
     justify-content: center;
 
     overflow: auto;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
index 66063733a6..8824c65901 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_DirectorySearchBox.scss
@@ -22,14 +22,12 @@ limitations under the License.
 
 .mx_DirectorySearchBox_container {
     display: flex;
-    display: -webkit-flex;
     padding-left: 9px;
     padding-right: 9px;
 }
 
 .mx_DirectorySearchBox_input {
     flex-grow: 1;
-    -webkit-flex-grow: 1;
     border: 0;
     padding: 0;
     font-weight: 300;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
index 2e2d9f8046..0e91154164 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
@@ -18,14 +18,12 @@ limitations under the License.
     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;
@@ -34,7 +32,6 @@ limitations under the License.
 
 .mx_LinkPreviewWidget_caption {
     margin-left: 15px;
-    -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
 }
 
@@ -56,7 +53,6 @@ limitations under the License.
 .mx_LinkPreviewWidget_cancel {
     visibility: hidden;
     cursor: pointer;
-    -webkit-flex: 0 0 40px;
     flex: 0 0 40px;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 8a6f117240..403de7f945 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -20,22 +20,17 @@ limitations under the License.
     margin-top: 12px;
     margin-right: 20px;
 
-    -webkit-flex: 1;
     flex: 1;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_MemberList .mx_Spinner {
     flex: 0;
-    -webkit-flex: 0;
 }
 
 .mx_MemberList_chevron {
@@ -48,7 +43,6 @@ limitations under the License.
     overflow-y: auto;
 
     order: 1;
-    -webkit-flex: 1 1 0;
     flex: 1 1 0px;
 }
 
@@ -80,7 +74,6 @@ limitations under the License.
 .mx_MemberList_joined {
     order: 2;
     flex: 1 0 0;
-    -webkit-flex: 1 0 0;
 
     overflow-y: auto;
 }
@@ -89,7 +82,6 @@ limitations under the License.
 .mx_MemberList_invited {
     order: 3;
     flex: 0 0 100px;
-    -webkit-flex: 0 0 100px;
     overflow-y: auto;
 }
 */
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index e5ffd22064..a4549c0f8e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -105,7 +105,6 @@ limitations under the License.
     border: 0px;
     resize: none;
     outline: none;
-    -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     color: $primary-fg-color;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index a26f12ee69..73327ea6a0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -25,36 +25,28 @@ limitations under the License.
     margin: auto;
     height: 70px;
 
-    -webkit-align-items: center;
     align-items: center;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 1;
     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;
@@ -71,16 +63,13 @@ limitations under the License.
     margin-top: -2px;
     text-align: center;
 
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     cursor: pointer;
 
 /*
-    -webkit-flex: 0 0 90px;
     flex: 0 0 90px;
 */
     padding-left: 12px;
@@ -88,10 +77,8 @@ limitations under the License.
 }
 
 .mx_RoomHeader_cancelButton {
-    -webkit-box-ordinal-group: 2;
     -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     cursor: pointer;
@@ -105,10 +92,8 @@ limitations under the License.
     background-color: $primary-bg-color;
     display: flex;
     align-items: center;
-    -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 6b71f96d2e..0d030ad774 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -18,19 +18,14 @@ limitations under the License.
     text-align: center;
     height: 176px;
 
-    -webkit-align-items: center;
     align-items: center;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 
     justify-content: center;
-    -webkit-justify-content: center;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 }
 
@@ -56,9 +51,7 @@ limitations under the License.
 }
 
 .mx_RoomPreviewBar_warning {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
     padding: 8px;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index 9a24868d14..b404da0206 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -16,10 +16,8 @@ limitations under the License.
 
 .mx_SearchableEntityList {
     display: flex;
-    display: -webkit-flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_SearchableEntityList_query {
@@ -49,7 +47,6 @@ limitations under the License.
 
 .mx_SearchableEntityList_listWrapper {
     flex: 1;
-    -webkit-flex: 1;
 
     overflow-y: auto;
 }
@@ -67,7 +64,6 @@ limitations under the License.
 .mx_SearchableEntityList_hrWrapper {
     width: 100%;
     flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;
 }
 
 .mx_SearchableEntityList hr {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index 97a82a03e8..d45c4a5816 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -41,14 +41,12 @@ limitations under the License.
 
 .mx_IncomingCallBox_buttons {
     display: flex;
-    display: -webkit-flex;
 }
 
 .mx_IncomingCallBox_buttons_cell {
     vertical-align: middle;
     padding: 6px;
     flex: 1;
-    -webkit-flex: 1;
 }
 
 .mx_IncomingCallBox_buttons_decline,
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index 4e3281716e..36a1e2988d 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -17,13 +17,10 @@ limitations under the License.
 .mx_LeftPanel {
     position: relative;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_LeftPanel_hideButton {
@@ -39,13 +36,10 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_RoomList_scrollbar {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     overflow-y: auto;
@@ -57,16 +51,13 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
-    -webkit-box-ordinal-group: 3;
     -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 
     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;
 }
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index b9dbf1cd79..000d36b31b 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -17,26 +17,20 @@ limitations under the License.
 .mx_RightPanel {
     position: relative;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RightPanel_header {
-    -webkit-box-ordinal-group: 1;
     -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     border-bottom: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
@@ -81,26 +75,20 @@ limitations under the License.
 .mx_RightPanel .mx_MemberList,
 .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 $primary-hairline-color;
     margin-right: 20px;
 
-    -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }
 
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index 3dd885ba47..c80a8d8fc5 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -22,33 +22,25 @@ limitations under the License.
     margin-bottom: 12px;
     color: $primary-fg-color;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RoomDirectory_list {
-    -webkit-flex: 1;
     flex: 1;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-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 {
@@ -72,7 +64,6 @@ limitations under the License.
 
 .mx_RoomDirectory_tableWrapper {
     overflow-y: auto;
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index d66d9c7dbd..d31a9d2785 100644
--- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -19,18 +19,14 @@ limitations under the License.
  */
 
 .mx_ImageView {
-    display: -webkit-flex;
     display: flex;
     width: 100%;
     height: 100%;
-    -webkit-align-items: center;
     align-items: center;
 }
 
 .mx_ImageView_lhs {
-    -webkit-box-ordinal-group: 1;
     order: 1;
-    -webkit-flex: 1;
     flex: 1 1 10%;
     min-width: 60px;
     /*
@@ -40,18 +36,13 @@ limitations under the License.
 }
 
 .mx_ImageView_content {
-    -webkit-box-ordinal-group: 2;
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
     height: 90%;
-    -webkit-flex: 15;
     flex: 15 15 0;
 
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
     align-items: center;
     justify-content: center;
 }
@@ -78,11 +69,8 @@ limitations under the License.
 .mx_ImageView_label {
     text-align: left;
     display: flex;
-    display: -webkit-flex;
     justify-content: center;
-    -webkit-justify-content: center;
     flex-direction: column;
-    -webkit-flex-direction: column;
     padding-left: 30px;
     padding-right: 30px;
     min-height: 100%;
@@ -141,9 +129,7 @@ limitations under the License.
 }
 
 .mx_ImageView_rhs {
-    -webkit-box-ordinal-group: 3;
     order: 3;
-    -webkit-flex: 1;
     flex: 1 1 10%;
     min-width: 300px;
     /*
diff --git a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
index 3831cc4c1c..aea5737918 100644
--- a/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_Spinner.scss
@@ -15,16 +15,12 @@ limitations under the License.
 */
 
 .mx_Spinner {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     flex: 1;
-    -webkit-flex: 1;
 }
 
 .mx_MatrixChat_middlePanel .mx_Spinner {
diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index e8b5aebbb8..2141f3a8ad 100644
--- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -18,12 +18,9 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index 9bd70bb944..9e21bcb1f2 100644
--- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -18,12 +18,9 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -webkit-box;
     display: -moz-box;
     display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
 }
 
@@ -34,7 +31,6 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar_content {
-    -webkit-flex: 1;
     flex: 1;
 }
 
diff --git a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
index 5d1953220a..079ea16c68 100644
--- a/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
+++ b/src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss
@@ -18,9 +18,7 @@ limitations under the License.
     padding-top: 5px;
     padding-bottom: 5px;
     display: flex;
-    display: -webkit-flex;
     align-items: center;
-    -webkit-align-items: center;
 }
 
 .mx_SearchBar_input {
@@ -32,7 +30,6 @@ limitations under the License.
     padding-left: 11px;
     width: auto;
     flex: 1 1 0;
-    -webkit-flex: 1 1 0;
 }
 
 .mx_SearchBar_searchButton {

From c305b72b918c08661d0b068121011e4ab7f5ae8f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 18:58:02 +0000
Subject: [PATCH 041/168] strip out unneeded -moz- prefixes

---
 src/skins/vector/css/_common.scss                     |  2 --
 .../css/matrix-react-sdk/structures/_FilePanel.scss   |  1 -
 .../css/matrix-react-sdk/structures/_MatrixChat.scss  |  9 ---------
 .../structures/_NotificationPanel.scss                |  1 -
 .../css/matrix-react-sdk/structures/_RoomView.scss    | 11 -----------
 .../matrix-react-sdk/structures/_UserSettings.scss    |  3 ---
 .../css/matrix-react-sdk/structures/login/_Login.scss |  1 -
 .../css/matrix-react-sdk/views/rooms/_MemberList.scss |  1 -
 .../views/rooms/_MessageComposer.scss                 |  1 -
 .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss |  6 ------
 .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss |  1 -
 .../vector/css/vector-web/structures/_LeftPanel.scss  |  3 ---
 .../vector/css/vector-web/structures/_RightPanel.scss |  4 ----
 .../css/vector-web/structures/_RoomDirectory.scss     |  2 --
 .../vector-web/views/globals/_GuestWarningBar.scss    |  1 -
 .../css/vector-web/views/globals/_MatrixToolbar.scss  |  1 -
 16 files changed, 48 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 6a62385535..5e0b902a85 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -83,7 +83,6 @@ textarea {
 /* applied to side-panels and messagepanel when in RoomSettings */
 .mx_fadable {
     opacity: 1;
-    -moz-transition: opacity 0.2s ease-in-out;
     -ms-transition: opacity 0.2s ease-in-out;
     -o-transition: opacity 0.2s ease-in-out;
 }
@@ -127,7 +126,6 @@ textarea {
     width: 100%;
     height: 100%;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     align-items: center;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index 6c769a3bdd..2fb1131d09 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_FilePanel {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index 61eb017058..72f1feffe9 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -27,7 +27,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat_wrapper {
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
@@ -38,7 +37,6 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -46,7 +44,6 @@ limitations under the License.
 }
 
 .mx_GuestWarningBar {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -61,11 +58,9 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -73,7 +68,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat .mx_LeftPanel {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -87,7 +81,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -113,13 +106,11 @@ limitations under the License.
      * point, but instead we fudge it and make the middlePanel
      * flex itself.
      */
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
-    -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
     order: 3;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index ed81849776..b3f724d83d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_NotificationPanel {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index dc668236b8..6a5db95a59 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -18,7 +18,6 @@ limitations under the License.
     word-wrap: break-word;
     position: relative;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     width: 100%;
@@ -27,7 +26,6 @@ limitations under the License.
 }
 
 .mx_RoomView .mx_RoomHeader {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -47,8 +45,6 @@ limitations under the License.
     padding-right: 12px;
     margin-left: -12px;
 
-    -moz-border-radius-topleft: 10px;
-    -moz-border-radius-topright: 10px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 
@@ -69,7 +65,6 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -85,13 +80,11 @@ limitations under the License.
 }
 
 .mx_RoomView_topUnreadMessagesBar {
-    -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
     order: 3;
 }
 
 .mx_RoomView_messagePanel {
-    -moz-box-ordinal-group: 4;
     -ms-flex-order: 4;
     order: 4;
 
@@ -108,7 +101,6 @@ limitations under the License.
 
     min-height: 100%;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
@@ -141,7 +133,6 @@ limitations under the License.
 }
 
 .mx_RoomView_invitePrompt {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -170,7 +161,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusArea {
-    -moz-box-ordinal-group: 5;
     -ms-flex-order: 5;
     order: 5;
 
@@ -231,7 +221,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView .mx_MessageComposer {
-    -moz-box-ordinal-group: 6;
     -ms-flex-order: 6;
     order: 6;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index 2c62a4eceb..d190e32c3a 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -20,14 +20,12 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     flex-direction: column;
 }
 
 .mx_UserSettings .mx_RoomHeader {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -35,7 +33,6 @@ limitations under the License.
 }
 
 .mx_UserSettings_body {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 332f313f33..90dd2c1e2d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -18,7 +18,6 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     align-items: center;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 403de7f945..9c1daa95b4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -22,7 +22,6 @@ limitations under the License.
 
     flex: 1;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index a4549c0f8e..5ecb344106 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -105,7 +105,6 @@ limitations under the License.
     border: 0px;
     resize: none;
     outline: none;
-    -moz-box-shadow: none;
     box-shadow: none;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 73327ea6a0..297a3f1659 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -27,7 +27,6 @@ limitations under the License.
 
     align-items: center;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 }
@@ -35,7 +34,6 @@ limitations under the License.
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -45,7 +43,6 @@ limitations under the License.
 .mx_RoomHeader_spinner {
     height: 36px;
 
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -63,7 +60,6 @@ limitations under the License.
     margin-top: -2px;
     text-align: center;
 
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -77,7 +73,6 @@ limitations under the License.
 }
 
 .mx_RoomHeader_cancelButton {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
 
@@ -92,7 +87,6 @@ limitations under the License.
     background-color: $primary-bg-color;
     display: flex;
     align-items: center;
-    -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
     order: 3;
 }
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 0d030ad774..2114e01a8e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -24,7 +24,6 @@ limitations under the License.
 
     justify-content: center;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 }
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index 36a1e2988d..030c53677f 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_LeftPanel {
     position: relative;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     flex-direction: column;
@@ -36,7 +35,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_RoomList_scrollbar {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -51,7 +49,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
-    -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
     order: 3;
 
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 000d36b31b..a76e5020bc 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -17,14 +17,12 @@ limitations under the License.
 .mx_RightPanel {
     position: relative;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     flex-direction: column;
 }
 
 .mx_RightPanel_header {
-    -moz-box-ordinal-group: 1;
     -ms-flex-order: 1;
     order: 1;
 
@@ -75,14 +73,12 @@ limitations under the License.
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
 .mx_RightPanel_blank {
-    -moz-box-ordinal-group: 2;
     -ms-flex-order: 2;
     order: 2;
     flex: 1 1 0;
 }
 
 .mx_RightPanel_footer {
-    -moz-box-ordinal-group: 3;
     -ms-flex-order: 3;
     order: 3;
 
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index c80a8d8fc5..e2b65e68ec 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -22,7 +22,6 @@ limitations under the License.
     margin-bottom: 12px;
     color: $primary-fg-color;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
@@ -32,7 +31,6 @@ limitations under the License.
 .mx_RoomDirectory_list {
     flex: 1;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
 
diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index 2141f3a8ad..d9d3cb193c 100644
--- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -18,7 +18,6 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     align-items: center;
diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index 9e21bcb1f2..a425d8cde2 100644
--- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -18,7 +18,6 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -moz-box;
     display: -ms-flexbox;
     display: flex;
     align-items: center;

From d74dfc9ee7c0affc4bc3ca7e7bf8c6befc7a46e6 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 18:58:37 +0000
Subject: [PATCH 042/168] strip out unneeded -ms- prefixes

---
 src/skins/vector/css/_common.scss                        | 2 --
 .../css/matrix-react-sdk/structures/_FilePanel.scss      | 1 -
 .../css/matrix-react-sdk/structures/_MatrixChat.scss     | 9 ---------
 .../matrix-react-sdk/structures/_NotificationPanel.scss  | 1 -
 .../css/matrix-react-sdk/structures/_RoomView.scss       | 9 ---------
 .../css/matrix-react-sdk/structures/_UserSettings.scss   | 3 ---
 .../css/matrix-react-sdk/structures/login/_Login.scss    | 1 -
 .../css/matrix-react-sdk/views/rooms/_MemberList.scss    | 1 -
 .../css/matrix-react-sdk/views/rooms/_RoomHeader.scss    | 6 ------
 .../matrix-react-sdk/views/rooms/_RoomPreviewBar.scss    | 1 -
 .../vector/css/vector-web/structures/_LeftPanel.scss     | 3 ---
 .../vector/css/vector-web/structures/_RightPanel.scss    | 4 ----
 .../vector/css/vector-web/structures/_RoomDirectory.scss | 2 --
 .../css/vector-web/views/globals/_GuestWarningBar.scss   | 1 -
 .../css/vector-web/views/globals/_MatrixToolbar.scss     | 1 -
 15 files changed, 45 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 5e0b902a85..a2b7399e01 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -83,7 +83,6 @@ textarea {
 /* applied to side-panels and messagepanel when in RoomSettings */
 .mx_fadable {
     opacity: 1;
-    -ms-transition: opacity 0.2s ease-in-out;
     -o-transition: opacity 0.2s ease-in-out;
 }
 
@@ -126,7 +125,6 @@ textarea {
     width: 100%;
     height: 100%;
 
-    display: -ms-flexbox;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
index 2fb1131d09..872085b66b 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_FilePanel {
-    -ms-flex-order: 2;
     order: 2;
 
     flex: 1 1 0;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
index 72f1feffe9..05a39ea727 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss
@@ -27,7 +27,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat_wrapper {
-    display: -ms-flexbox;
     display: flex;
 
     flex-direction: column;
@@ -37,14 +36,12 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar {
-    -ms-flex-order: 1;
     order: 1;
 
     height: 40px;
 }
 
 .mx_GuestWarningBar {
-    -ms-flex-order: 1;
     order: 1;
 
     height: 40px;
@@ -58,17 +55,14 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -ms-flexbox;
     display: flex;
 
-    -ms-flex-order: 2;
     order: 2;
 
     flex: 1;
 }
 
 .mx_MatrixChat .mx_LeftPanel {
-    -ms-flex-order: 1;
     order: 1;
 
     background-color: $secondary-accent-color;
@@ -81,7 +75,6 @@ limitations under the License.
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    -ms-flex-order: 2;
     order: 2;
 
     padding-left: 20px;
@@ -106,12 +99,10 @@ limitations under the License.
      * point, but instead we fudge it and make the middlePanel
      * flex itself.
      */
-    display: -ms-flexbox;
     display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
-    -ms-flex-order: 3;
     order: 3;
 
     flex: 0 0 235px;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
index b3f724d83d..ef75678dce 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss
@@ -15,7 +15,6 @@ limitations under the License.
 */
 
 .mx_NotificationPanel {
-    -ms-flex-order: 2;
     order: 2;
 
     flex: 1 1 0;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 6a5db95a59..919b9f9b6b 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -18,7 +18,6 @@ limitations under the License.
     word-wrap: break-word;
     position: relative;
 
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
 
@@ -26,7 +25,6 @@ limitations under the License.
 }
 
 .mx_RoomView .mx_RoomHeader {
-    -ms-flex-order: 1;
     order: 1;
 
     flex: 0 0 70px;
@@ -65,7 +63,6 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    -ms-flex-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -80,12 +77,10 @@ limitations under the License.
 }
 
 .mx_RoomView_topUnreadMessagesBar {
-    -ms-flex-order: 3;
     order: 3;
 }
 
 .mx_RoomView_messagePanel {
-    -ms-flex-order: 4;
     order: 4;
 
     flex: 1 1 0;
@@ -101,7 +96,6 @@ limitations under the License.
 
     min-height: 100%;
 
-    display: -ms-flexbox;
     display: flex;
 
     flex-direction: column;
@@ -133,7 +127,6 @@ limitations under the License.
 }
 
 .mx_RoomView_invitePrompt {
-    -ms-flex-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -161,7 +154,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusArea {
-    -ms-flex-order: 5;
     order: 5;
 
     width: 100%;
@@ -221,7 +213,6 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView .mx_MessageComposer {
-    -ms-flex-order: 6;
     order: 6;
 
     width: 100%;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index d190e32c3a..5c1b4c5c7e 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -20,20 +20,17 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 
-    display: -ms-flexbox;
     display: flex;
     flex-direction: column;
 }
 
 .mx_UserSettings .mx_RoomHeader {
-    -ms-flex-order: 1;
     order: 1;
 
     flex: 0 0 70px;
 }
 
 .mx_UserSettings_body {
-    -ms-flex-order: 2;
     order: 2;
 
     flex: 1 1 0;
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 90dd2c1e2d..30231b43da 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -18,7 +18,6 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -ms-flexbox;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
index 9c1daa95b4..d87bced43e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberList.scss
@@ -22,7 +22,6 @@ limitations under the License.
 
     flex: 1;
 
-    display: -ms-flexbox;
     display: flex;
 
     flex-direction: column;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 297a3f1659..688b8a84eb 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -27,14 +27,12 @@ limitations under the License.
 
     align-items: center;
 
-    display: -ms-flexbox;
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
 
-    -ms-flex-order: 1;
     order: 1;
 
     flex: 1;
@@ -43,7 +41,6 @@ limitations under the License.
 .mx_RoomHeader_spinner {
     height: 36px;
 
-    -ms-flex-order: 2;
     order: 2;
 
     padding-left: 12px;
@@ -60,7 +57,6 @@ limitations under the License.
     margin-top: -2px;
     text-align: center;
 
-    -ms-flex-order: 2;
     order: 2;
 
     cursor: pointer;
@@ -73,7 +69,6 @@ limitations under the License.
 }
 
 .mx_RoomHeader_cancelButton {
-    -ms-flex-order: 2;
     order: 2;
 
     cursor: pointer;
@@ -87,7 +82,6 @@ limitations under the License.
     background-color: $primary-bg-color;
     display: flex;
     align-items: center;
-    -ms-flex-order: 3;
     order: 3;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 2114e01a8e..3814f9c0ec 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -24,7 +24,6 @@ limitations under the License.
 
     justify-content: center;
 
-    display: -ms-flexbox;
     display: flex;
 }
 
diff --git a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
index 030c53677f..1ce10e51f6 100644
--- a/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_LeftPanel.scss
@@ -17,7 +17,6 @@ limitations under the License.
 .mx_LeftPanel {
     position: relative;
 
-    display: -ms-flexbox;
     display: flex;
     flex-direction: column;
 }
@@ -35,7 +34,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_RoomList_scrollbar {
-    -ms-flex-order: 1;
     order: 1;
 
     flex: 1 1 0;
@@ -49,7 +47,6 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
-    -ms-flex-order: 3;
     order: 3;
 
     border-top: 1px solid rgba(118, 207, 166, 0.2);
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index a76e5020bc..96e8698bdf 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -17,13 +17,11 @@ limitations under the License.
 .mx_RightPanel {
     position: relative;
 
-    display: -ms-flexbox;
     display: flex;
     flex-direction: column;
 }
 
 .mx_RightPanel_header {
-    -ms-flex-order: 1;
     order: 1;
 
     border-bottom: 1px solid $primary-hairline-color;
@@ -73,13 +71,11 @@ limitations under the License.
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
 .mx_RightPanel_blank {
-    -ms-flex-order: 2;
     order: 2;
     flex: 1 1 0;
 }
 
 .mx_RightPanel_footer {
-    -ms-flex-order: 3;
     order: 3;
 
     border-top: 1px solid $primary-hairline-color;
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index e2b65e68ec..f0d4c86023 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -22,7 +22,6 @@ limitations under the License.
     margin-bottom: 12px;
     color: $primary-fg-color;
 
-    display: -ms-flexbox;
     display: flex;
 
     flex-direction: column;
@@ -31,7 +30,6 @@ limitations under the License.
 .mx_RoomDirectory_list {
     flex: 1;
 
-    display: -ms-flexbox;
     display: flex;
 
     flex-direction: column;
diff --git a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
index d9d3cb193c..f5bdbaf9ca 100644
--- a/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss
@@ -18,7 +18,6 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -ms-flexbox;
     display: flex;
     align-items: center;
 }
diff --git a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
index a425d8cde2..5a0b23aeb1 100644
--- a/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
+++ b/src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss
@@ -18,7 +18,6 @@ limitations under the License.
     background-color: $accent-color;
     color: $accent-fg-color;
 
-    display: -ms-flexbox;
     display: flex;
     align-items: center;
 }

From cab5bf8849395dab0afad1439ca3ae2a1a22b25b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 19:00:44 +0000
Subject: [PATCH 043/168] fix a lone lost opera vendor prefix

---
 src/skins/vector/css/_common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index a2b7399e01..09f3fcfb56 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -83,7 +83,7 @@ textarea {
 /* applied to side-panels and messagepanel when in RoomSettings */
 .mx_fadable {
     opacity: 1;
-    -o-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 }
 
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.

From 87fd136e218000c64ed9b7369ce176dc18d1fdc0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 16 Jan 2017 23:13:47 +0000
Subject: [PATCH 044/168] factor out remaining # colours

---
 .../views/rooms/_EntityTile.scss                |  4 ++--
 .../views/rooms/_LinkPreviewWidget.scss         |  4 ++--
 .../views/rooms/_MemberInfo.scss                |  1 -
 .../views/rooms/_MessageComposer.scss           | 10 +++++-----
 .../views/rooms/_RoomHeader.scss                | 17 +++--------------
 .../views/rooms/_RoomPreviewBar.scss            |  6 +-----
 .../views/rooms/_RoomSettings.scss              |  2 +-
 .../views/rooms/_SearchableEntityList.scss      |  4 ++--
 .../views/voip/_IncomingCallbox.scss            |  4 ++--
 src/skins/vector/css/themes/_base.scss          | 13 +++++++++++++
 src/skins/vector/css/themes/_dark.scss          | 13 +++++++++++++
 .../vector-web/structures/_RoomDirectory.scss   |  4 ++--
 .../context_menus/_RoomTagContextMenu.scss      |  3 +--
 .../vector-web/views/elements/_ImageView.scss   | 13 ++++---------
 14 files changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
index 2511f07d4d..3f360e79a0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EntityTile.scss
@@ -77,12 +77,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    font-color: $primary-fg-color;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    font-color: $primary-fg-color;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
index 0e91154164..33f283e0d3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_LinkPreviewWidget.scss
@@ -19,8 +19,8 @@ limitations under the License.
     margin-right: 15px;
     margin-bottom: 15px;
     display: flex;
-    border-left: 4px solid #ddd;
-    color: #888;
+    border-left: 4px solid $preview-widget-bar-color;
+    color: $preview-widget-fg-color;
 }
 
 .mx_LinkPreviewWidget_image {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
index 970c2496b4..d6fb5a19db 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MemberInfo.scss
@@ -69,7 +69,6 @@ limitations under the License.
 }
 
 .mx_MemberInfo_profileField {
-    font-color: #999999;
     font-size: 13px;
     position: relative;
     background-color: $primary-bg-color;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index 5ecb344106..525cc1f654 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -57,7 +57,7 @@ limitations under the License.
     height: 60px;
     text-align: center;
     font-style: italic;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -90,10 +90,10 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input blockquote {
-    color: rgb(119, 119, 119);
+    color: $blockquote-fg-color;
     margin: 0 0 16px;
     padding: 0 15px;
-    border-left: 4px solid rgb(221, 221, 221);
+    border-left: 4px solid $blockquote-bar-color;
 }
 
 .mx_MessageComposer_input textarea {
@@ -151,7 +151,7 @@ limitations under the License.
 
 .mx_MessageComposer_formatbar_wrapper {
     width: 100%;
-    background-color: #f7f7f7;
+    background-color: $menu-bg-color;
     box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
 }
 
@@ -168,7 +168,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     font-size: 10px;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_formatbar * {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
index 688b8a84eb..4affc99490 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomHeader.scss
@@ -16,7 +16,6 @@ limitations under the License.
 
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
-    -webit-flex: 0 0 93px ! important;
     flex: 0 0 93px ! important;
 }
 
@@ -24,25 +23,19 @@ limitations under the License.
     max-width: 960px;
     margin: auto;
     height: 70px;
-
     align-items: center;
-
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
-
     order: 1;
-
     flex: 1;
 }
 
 .mx_RoomHeader_spinner {
     height: 36px;
-
     order: 2;
-
     padding-left: 12px;
     padding-right: 12px;
 }
@@ -56,9 +49,7 @@ limitations under the License.
     line-height: 34px;
     margin-top: -2px;
     text-align: center;
-
     order: 2;
-
     cursor: pointer;
 
 /*
@@ -70,9 +61,7 @@ limitations under the License.
 
 .mx_RoomHeader_cancelButton {
     order: 2;
-
     cursor: pointer;
-
     padding-left: 12px;
     padding-right: 12px;
 }
@@ -126,7 +115,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_settingsHint {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_searchStatus {
@@ -151,7 +140,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_placeholder {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_editable {
@@ -170,7 +159,7 @@ limitations under the License.
     vertical-align: bottom;
     float: left;
     max-height: 42px;
-    color: #A2A2A2;
+    color: $settings-grey-fg-color;
     font-weight: 300;
     font-size: 13px;
     margin-left: 19px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 3814f9c0ec..34ff3a8670 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -17,13 +17,9 @@ limitations under the License.
 .mx_RoomPreviewBar {
     text-align: center;
     height: 176px;
-
     align-items: center;
-
     flex-direction: column;
-
     justify-content: center;
-
     display: flex;
 }
 
@@ -40,7 +36,7 @@ limitations under the License.
 
 .mx_RoomPreviewBar_preview_text {
     margin-top: 25px;
-    color: #a4a4a4;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text a {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
index d9de0e8a2d..ef115f6e9e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomSettings.scss
@@ -205,7 +205,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_aliasPlaceholder {
-    color: #a2a2a2;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomSettings_buttons {
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
index b404da0206..6116dd92ca 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_SearchableEntityList.scss
@@ -69,8 +69,8 @@ limitations under the License.
 .mx_SearchableEntityList hr {
     height: 1px;
     border: 0px;
-    color: #e1dddd;
-    background-color: #e1dddd;
+    color: $primary-fg-color;
+    background-color: $primary-fg-color;
     margin-right: 15px;
     margin-top: 11px;
     margin-bottom: 11px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
index d45c4a5816..64eac25d01 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss
@@ -61,9 +61,9 @@ limitations under the License.
 }
 
 .mx_IncomingCallBox_buttons_decline {
-    background-color: #f48080;
+    background-color: $voip-decline-color;
 }
 
 .mx_IncomingCallBox_buttons_accept {
-    background-color: #80f480;
+    background-color: $voip-accept-color;
 }
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index e623372afc..4f47df64e5 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -55,6 +55,19 @@ $h3-color: #3d3b39;
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: #ddd;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
 // ********************
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 1d93c1a4d6..28b80a2034 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -55,6 +55,19 @@ $h3-color: $primary-fg-color;
 $dialog-background-bg-color: #000;
 $lightbox-background-bg-color: #000;
 
+$greyed-fg-color: #888;
+
+$preview-widget-bar-color: $menu-bg-color;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index f0d4c86023..8c8ceeaf20 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -101,7 +101,7 @@ limitations under the License.
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
-    color: #61c295;
+    color: $accent-fg-color;
 }
 
 .mx_RoomDirectory_topic {
@@ -110,7 +110,7 @@ limitations under the License.
 
 .mx_RoomDirectory_alias {
     font-size: 12px;
-    color: #b3b3b3;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomDirectory_roomMemberCount {
diff --git a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
index 0a2e7605df..16a3ab79b1 100644
--- a/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
+++ b/src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss
@@ -70,8 +70,7 @@ limitations under the License.
     border-right-style: none;
     border-top-style: solid;
     border-top-width: 1px;
-    border-color: #bbbbbb;
-    opacity: 0.4;
+    border-color: $menu-border-color;
 }
 
 .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {
diff --git a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
index d31a9d2785..66c26e129f 100644
--- a/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
+++ b/src/skins/vector/css/vector-web/views/elements/_ImageView.scss
@@ -29,10 +29,8 @@ limitations under the License.
     order: 1;
     flex: 1 1 10%;
     min-width: 60px;
-    /*
-    background-color: #080;
-    height: 20px;
-    */
+    // background-color: #080;
+    // height: 20px;
 }
 
 .mx_ImageView_content {
@@ -41,7 +39,6 @@ limitations under the License.
     min-width: 0px;
     height: 90%;
     flex: 15 15 0;
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -132,8 +129,6 @@ limitations under the License.
     order: 3;
     flex: 1 1 10%;
     min-width: 300px;
-    /*
-    background-color: #800;
-    height: 20px;
-    */
+    // background-color: #800;
+    // height: 20px;
 }

From 4f8d3b0e2b02e3c41344e86abd57aff555d7c1e0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 02:00:34 +0000
Subject: [PATCH 045/168] more factoring

---
 src/skins/vector/css/_common.scss                             | 4 ++--
 .../vector/css/matrix-react-sdk/structures/_RoomView.scss     | 2 +-
 src/skins/vector/css/themes/_base.scss                        | 2 ++
 src/skins/vector/css/themes/_dark.scss                        | 2 ++
 src/skins/vector/css/vector-web/structures/_RightPanel.scss   | 3 ++-
 .../vector/css/vector-web/structures/_RoomDirectory.scss      | 2 +-
 6 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 09f3fcfb56..01ba81d83e 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -266,12 +266,12 @@ textarea {
 
 ::-moz-selection {
     background-color: $accent-color;
-    color: white;
+    color: $selection-fg-color;
 }
 
 ::selection {
     background-color: $accent-color;
-    color: white;
+    color: $selection-fg-color;
 }
 
 /** green button with rounded corners */
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 919b9f9b6b..d1aeddec34 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -46,7 +46,7 @@ limitations under the License.
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: $droptarget-bg-color;
     border: 2px #e1dddd solid;
     border-bottom: none;
     position: absolute;
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 4f47df64e5..6488794d6c 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -13,6 +13,8 @@ $focus-bg-color: #dddddd;
 $accent-fg-color: #ffffff;
 $accent-color: #76CFA6;
 
+$selection-fg-color: $primary-bg-color;
+
 // red warning colour
 $warning-color: #ff0064;
 
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 28b80a2034..62e89a7bfb 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -13,6 +13,8 @@ $light-fg-color: #747474;
 $accent-fg-color: $primary-bg-color;
 $accent-color: #76CFA6;
 
+$selection-fg-color: $primary-bg-color;
+
 // red warning colour
 $warning-color: #ff0064;
 
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 96e8698bdf..91034e633d 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -58,7 +58,8 @@ limitations under the License.
     width: 25px;
     height: 5px;
     border-radius: 5px;
-    background-color: rgba(118, 207, 166, 0.2);
+    background-color: $accent-color;
+    opacity: 0.2;
 }
 
 .mx_RightPanel_headerButton_badge {
diff --git a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
index 8c8ceeaf20..6e508ec78f 100644
--- a/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
+++ b/src/skins/vector/css/vector-web/structures/_RoomDirectory.scss
@@ -101,7 +101,7 @@ limitations under the License.
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
-    color: $accent-fg-color;
+    color: $accent-color;
 }
 
 .mx_RoomDirectory_topic {

From 3bdb330f5bb6682764acf781cc2b25aeb834e03d Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 09:57:01 +0000
Subject: [PATCH 046/168] cheeky hack to get the ctxt menu colors right

---
 src/skins/vector/img/icon_context_message.svg | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg
index f2ceccfa78..c3d39b1e4b 100644
--- a/src/skins/vector/img/icon_context_message.svg
+++ b/src/skins/vector/img/icon_context_message.svg
@@ -4,11 +4,18 @@
     <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
     <desc>Created with sketchtool.</desc>
     <defs></defs>
+    <!-- use a filter so that the tinter doesn't have to flip black to white as well as white to black -->
+    <filter id="invert">
+        <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1
+                                                                0 -1 0 0 1
+                                                                0 0 -1 0 1
+                                                                0 0 0  1 0"/>
+    </filter>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon_context">
-            <g>
-                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#ECECEC"></path>
-                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#9B9B9B"></path>
+            <g filter="url(#invert)">
+                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
+                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#000" opacity="0.6"></path>
             </g>
         </g>
     </g>

From ef07a6035ed58184f94464abcee035592e666078 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 17 Jan 2017 10:48:38 +0000
Subject: [PATCH 047/168] Fix links to fonts and images from CSS

https://github.com/vector-im/riot-web/pull/2961 put the CSS in a subdirectory,
which meant that links from CSS to images and fonts were broken. Fix them up.
---
 .../views/elements/DirectorySearchBox.css      |  4 ++--
 .../matrix-react-sdk/views/rooms/RoomTile.css  |  2 +-
 src/skins/vector/css/vector-web/fonts.css      | 18 ++++++++++--------
 .../vector-web/views/elements/ImageView.css    |  2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
index 3a0922bcd2..5686ecd0aa 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
@@ -46,7 +46,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: #efefef;
     border-radius: 3px;
-    background-image: url('img/icon-return.svg');
+    background-image: url('../img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -63,7 +63,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('img/icon_context_delete.svg');
+    background: url('../img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index 2822d82e88..2411d61336 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -65,7 +65,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background-image: url("img/icons_ellipsis.svg");
+    background-image: url("../img/icons_ellipsis.svg");
     background-size: 25px;
     width: 24px;
     height: 24px;
diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/fonts.css
index 719eeebcb4..a57d9952bf 100644
--- a/src/skins/vector/css/vector-web/fonts.css
+++ b/src/skins/vector/css/vector-web/fonts.css
@@ -3,44 +3,46 @@
  * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
  */
 
+/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
+ */
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    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');
+    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');
+    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');
+    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');
+    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');
+    src: url('../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -52,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    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');
+    src: url('../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css
index 03223f259e..0942b59368 100644
--- a/src/skins/vector/css/vector-web/views/elements/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css
@@ -62,7 +62,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('img/trans.png'); */
+    /* background-image: url('../img/trans.png'); */
     pointer-events: all;
 }
 

From 205676a97da4a756d63eb4b050caf350668b11d4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 11:30:59 +0000
Subject: [PATCH 048/168] Back to develop js-sdk & react-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index f169cf9b2f..b79db54a10 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.4",
-    "matrix-react-sdk": "0.8.5",
+    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
+    "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 4a1b04e57be363f3c45f356c1862cf5853769e10 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 17 Jan 2017 11:58:30 +0000
Subject: [PATCH 049/168] Add another layer of directory to webpack chunks

---
 .../views/elements/DirectorySearchBox.css        |  4 ++--
 .../matrix-react-sdk/views/rooms/RoomTile.css    |  2 +-
 src/skins/vector/css/vector-web/fonts.css        | 16 ++++++++--------
 .../css/vector-web/views/elements/ImageView.css  |  2 +-
 webpack.config.js                                | 15 ++++++++++++---
 5 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
index 5686ecd0aa..c81974ebb4 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css
@@ -46,7 +46,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: #efefef;
     border-radius: 3px;
-    background-image: url('../img/icon-return.svg');
+    background-image: url('../../img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -63,7 +63,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
 .mx_DirectorySearchBox_clear {
     display: inline-block;
     vertical-align: middle;
-    background: url('../img/icon_context_delete.svg');
+    background: url('../../img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
index 2411d61336..b752d105d5 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/RoomTile.css
@@ -65,7 +65,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background-image: url("../img/icons_ellipsis.svg");
+    background-image: url("../../img/icons_ellipsis.svg");
     background-size: 25px;
     width: 24px;
     height: 24px;
diff --git a/src/skins/vector/css/vector-web/fonts.css b/src/skins/vector/css/vector-web/fonts.css
index a57d9952bf..52ac95b569 100644
--- a/src/skins/vector/css/vector-web/fonts.css
+++ b/src/skins/vector/css/vector-web/fonts.css
@@ -7,42 +7,42 @@
  */
 @font-face {
     font-family: 'Open Sans';
-    src: url('../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    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');
+    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');
+    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');
+    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');
+    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');
+    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -54,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    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');
+    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
diff --git a/src/skins/vector/css/vector-web/views/elements/ImageView.css b/src/skins/vector/css/vector-web/views/elements/ImageView.css
index 0942b59368..73aaaa86b2 100644
--- a/src/skins/vector/css/vector-web/views/elements/ImageView.css
+++ b/src/skins/vector/css/vector-web/views/elements/ImageView.css
@@ -62,7 +62,7 @@ limitations under the License.
     max-height: 100%;
     /* object-fit hack needed for Chrome due to Chrome not re-laying-out until you refresh */
     object-fit: contain;
-    /* background-image: url('../img/trans.png'); */
+    /* background-image: url('../../img/trans.png'); */
     pointer-events: all;
 }
 
diff --git a/webpack.config.js b/webpack.config.js
index 9c0c6bbb9b..2a38d1392d 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -40,8 +40,17 @@ module.exports = {
     },
     output: {
         path: path.join(__dirname, "webapp"),
-        filename: "[hash]/[name].js",
-        chunkFilename: "[hash]/[name].js",
+
+        // the generated js (and CSS, from the ExtractTextPlugin) are put in a
+        // unique subdirectory for the build. There will only be one such
+        // 'bundle' directory in the generated tarball; however, hosting
+        // servers can collect 'bundles' from multiple versions into one
+        // directory and symlink it into place - this allows users who loaded
+        // an older version of the application to continue to access webpack
+        // chunks even after the app is redeployed.
+        //
+        filename: "bundles/[hash]/[name].js",
+        chunkFilename: "bundles/[hash]/[name].js",
         devtoolModuleFilenameTemplate: function(info) {
             // Reading input source maps gives only relative paths here for
             // everything. Until I figure out how to fix this, this is a
@@ -80,7 +89,7 @@ module.exports = {
         }),
 
         new ExtractTextPlugin(
-            "[hash]/[name].css",
+            "bundles/[hash]/[name].css",
             {
                 allChunks: true
             }

From 3b109f761283d1aac5f4ff26462bd4f77ff83155 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 13:16:08 +0000
Subject: [PATCH 050/168] Include current version in update check explicitly

Hopefully fix https://github.com/vector-im/riot-web/issues/2847
---
 electron/src/electron-main.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index 675640a520..3f7c0f07f4 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -112,7 +112,15 @@ function startAutoUpdate(update_base_url) {
         // 204 No Content. On windows it takes a base path and looks for
         // files under that path.
         if (process.platform == 'darwin') {
-            electron.autoUpdater.setFeedURL(update_base_url + 'macos/');
+            // include the current version in the URL we hit. Electron doesn't add
+            // it anywhere (apart from the User-Agent) so it's up to us. We could
+            // (and previously did) just use the User-Agent, but this doesn't
+            // rely on NSURLConnection setting the User-Agent to what we expect,
+            // and also acts as a convenient cache-buster between versions.
+            electron.autoUpdater.setFeedURL(
+                update_base_url +
+                'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion())
+            );
         } else if (process.platform == 'win32') {
             electron.autoUpdater.setFeedURL(update_base_url + 'win32/' + process.arch + '/');
         } else {

From 8371006d90e37d554cc1d05e94f10f6d0f4134b7 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 17 Jan 2017 13:55:33 +0000
Subject: [PATCH 051/168] Update redeploy script to keep old bundles

... so that people using old versions of the master chunk can still load other
webpack chunks.
---
 scripts/redeploy.py | 142 ++++++++++++++++++++++++++++++++++++--------
 1 file changed, 118 insertions(+), 24 deletions(-)

diff --git a/scripts/redeploy.py b/scripts/redeploy.py
index 36585f53a0..4394f29228 100755
--- a/scripts/redeploy.py
+++ b/scripts/redeploy.py
@@ -1,13 +1,32 @@
 #!/usr/bin/env python
+#
+# auto-deploy script for https://riot.im/develop
+#
+# Listens for HTTP hits. When it gets one, downloads the artifact from jenkins
+# and deploys it as the new version.
+#
+# Requires the following python packages:
+#
+#   - requests
+#   - flask
+#
 from __future__ import print_function
 import json, requests, tarfile, argparse, os, errno
+import time
 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, arg_config_location = (
-    None, None, None, None, None
-)
+arg_jenkins_url = None
+arg_extract_path = None
+arg_bundles_path = None
+arg_should_clean = None
+arg_symlink = None
+arg_config_location = None
+
+class DeployException(Exception):
+    pass
 
 def download_file(url):
     local_filename = url.split('/')[-1]
@@ -57,6 +76,9 @@ def on_receive_jenkins_poke():
         abort(400, "Missing or bad build number")
         return
 
+    return fetch_jenkins_build(job_name, build_num)
+
+def fetch_jenkins_build(job_name, build_num):
     artifact_url = urljoin(
         arg_jenkins_url, "job/%s/%s/api/json" % (job_name, build_num)
     )
@@ -106,7 +128,31 @@ def on_receive_jenkins_poke():
         arg_jenkins_url, "job/%s/%s/artifact/%s" % (job_name, build_num, tar_gz_path)
     )
 
-    print("Retrieving .tar.gz file: %s" % tar_gz_url)
+    # we extract into a directory based on the build number. This avoids the
+    # problem of multiple builds building the same git version and thus having
+    # the same tarball name. That would lead to two potential problems:
+    #   (a) sometimes jenkins serves corrupted artifacts; we would replace
+    #       a good deploy with a bad one
+    #   (b) we'll be overwriting the live deployment, which means people might
+    #       see half-written files.
+    build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
+    try:
+        deploy_tarball(tar_gz_url, build_dir)
+    except DeployException as e:
+        abort(400, e.message)
+
+    return jsonify({})
+
+def deploy_tarball(tar_gz_url, build_dir):
+    """Download a tarball from jenkins and deploy it as the new version
+    """
+    print("Deploying %s to %s" % (tar_gz_url, build_dir))
+
+    if os.path.exists(build_dir):
+        raise DeployException(
+            "Not deploying. We have previously deployed this build."
+        )
+    os.mkdir(build_dir)
 
     # we rely on the fact that flask only serves one request at a time to
     # ensure that we do not overwrite a tarball from a concurrent request.
@@ -114,19 +160,6 @@ def on_receive_jenkins_poke():
     print("Downloaded file: %s" % filename)
 
     try:
-        # we extract into a directory based on the build number. This avoids the
-        # problem of multiple builds building the same git version and thus having
-        # the same tarball name. That would lead to two potential problems:
-        #   (a) sometimes jenkins serves corrupted artifacts; we would replace
-        #       a good deploy with a bad one
-        #   (b) we'll be overwriting the live deployment, which means people might
-        #       see half-written files.
-        build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
-        if os.path.exists(build_dir):
-            abort(400, "Not deploying. We have previously deployed this build.")
-            return
-        os.mkdir(build_dir)
-
         untar_to(filename, build_dir)
         print("Extracted to: %s" % build_dir)
     finally:
@@ -139,9 +172,47 @@ def on_receive_jenkins_poke():
     if arg_config_location:
         create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json'))
 
+    if arg_bundles_path:
+        extracted_bundles = os.path.join(extracted_dir, 'bundles')
+        move_bundles(source=extracted_bundles, dest=arg_bundles_path)
+
+        # replace the (hopefully now empty) extracted_bundles dir with a
+        # symlink to the common dir.
+        relpath = os.path.relpath(arg_bundles_path, extracted_dir)
+        os.rmdir(extracted_bundles)
+        print ("Symlink %s -> %s" % (extracted_bundles, relpath))
+        os.symlink(relpath, extracted_bundles)
+
     create_symlink(source=extracted_dir, linkname=arg_symlink)
 
-    return jsonify({})
+def move_bundles(source, dest):
+    """Move the contents of the 'bundles' directory to a common dir
+
+    We check that we will not be overwriting anything before we proceed.
+
+    Args:
+        source (str): path to 'bundles' within the extracted tarball
+        dest (str): target common directory
+    """
+
+    if not os.path.isdir(dest):
+        os.mkdir(dest)
+
+    # build a map from source to destination, checking for non-existence as we go.
+    renames = {}
+    for f in os.listdir(source):
+        dst = os.path.join(dest, f)
+        if os.path.exists(dst):
+            raise DeployException(
+                "Not deploying. The bundle includes '%s' which we have previously deployed."
+                % f
+            )
+        renames[os.path.join(source, f)] = dst
+
+    for (src, dst) in renames.iteritems():
+        print ("Move %s -> %s" % (src, dst))
+        os.rename(src, dst)
+
 
 if __name__ == "__main__":
     parser = argparse.ArgumentParser("Runs a Vector redeployment server.")
@@ -161,6 +232,13 @@ if __name__ == "__main__":
             "The location to extract .tar.gz files to."
         )
     )
+    parser.add_argument(
+        "-b", "--bundles-dir", dest="bundles_dir", help=(
+            "A directory to move the contents of the 'bundles' directory to. A \
+            symlink to the bundles directory will also be written inside the \
+            extracted tarball. Example: './bundles'."
+        )
+    )
     parser.add_argument(
         "-c", "--clean", dest="clean", action="store_true", default=False, help=(
             "Remove .tar.gz files after they have been downloaded and extracted."
@@ -179,18 +257,34 @@ if __name__ == "__main__":
             To this location."
         )
     )
+    parser.add_argument(
+        "--test", dest="tarball_uri", help=(
+            "Don't start an HTTP listener. Instead download a build from Jenkins \
+            immediately."
+        ),
+    )
+
     args = parser.parse_args()
     if args.jenkins.endswith("/"): # important for urljoin
         arg_jenkins_url = args.jenkins
     else:
         arg_jenkins_url = args.jenkins + "/"
     arg_extract_path = args.extract
+    arg_bundles_path = args.bundles_dir
     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. Config location: %s" %
-        (args.port, arg_extract_path,
-            " (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)
+
+    if not os.path.isdir(arg_extract_path):
+        os.mkdir(arg_extract_path)
+
+    if args.tarball_uri is not None:
+        build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time()))
+        deploy_tarball(args.tarball_uri, build_dir)
+    else:
+        print(
+            "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, arg_config_location)
+        )
+        app.run(host="0.0.0.0", port=args.port, debug=True)

From cf92e7f64bfc480dd860ce52d8c986c9d8c708df Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 14:04:42 +0000
Subject: [PATCH 052/168] Clarify comment

---
 electron/src/electron-main.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index 3f7c0f07f4..a03a8755bc 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -116,7 +116,8 @@ function startAutoUpdate(update_base_url) {
             // it anywhere (apart from the User-Agent) so it's up to us. We could
             // (and previously did) just use the User-Agent, but this doesn't
             // rely on NSURLConnection setting the User-Agent to what we expect,
-            // and also acts as a convenient cache-buster between versions.
+            // and also acts as a convenient cache-buster to ensure that when the
+            // app updates it always gets a fresh value to avoid update-looping.
             electron.autoUpdater.setFeedURL(
                 update_base_url +
                 'macos/?localVersion=' + encodeURIComponent(electron.app.getVersion())

From c9c58ab0ecb966aca6d3d710db149b83bb4fa5ba Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 14:10:09 +0000
Subject: [PATCH 053/168] fix up the contextual menu button

---
 .../matrix-react-sdk/views/rooms/_EventTile.scss  | 10 +++++++++-
 src/skins/vector/css/themes/_base.scss            |  2 ++
 src/skins/vector/css/themes/_dark.scss            |  2 ++
 src/skins/vector/img/icon_context_message.svg     | 13 +++----------
 .../vector/img/icon_context_message_dark.svg      | 15 +++++++++++++++
 5 files changed, 31 insertions(+), 11 deletions(-)
 create mode 100644 src/skins/vector/img/icon_context_message_dark.svg

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index a6b10e2435..b79db91911 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -146,7 +146,12 @@ limitations under the License.
     z-index: 1;
     position: relative;
     width: 90px;
-    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
+
+    /* Hack to stop the height of this pushing the messages apart.
+       Replaces margin-top: -6px. This interacts better with a read
+       marker being in between. Content overflows. */
+    height: 1px;
+
     margin-right: 10px;
 }
 
@@ -172,6 +177,9 @@ limitations under the License.
     cursor: pointer;
     top: 6px;
     right: 6px;
+    width: 19px;
+    height: 19px;
+    background-image: url($edit-button-url);
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton,
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 6488794d6c..ad18eb49c2 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -88,6 +88,8 @@ $event-notsent-color: #f44;
 // event timestamp
 $event-timestamp-color: #acacac;
 
+$edit-button-url: "/img/icon_context_message.svg";
+
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 62e89a7bfb..e3e32e8442 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -88,6 +88,8 @@ $event-notsent-color: #f44;
 // event timestamp
 $event-timestamp-color: #acacac;
 
+$edit-button-url: "/img/icon_context_message_dark.svg";
+
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
 $e2e-unverified-color: #e8bf37;
diff --git a/src/skins/vector/img/icon_context_message.svg b/src/skins/vector/img/icon_context_message.svg
index c3d39b1e4b..f2ceccfa78 100644
--- a/src/skins/vector/img/icon_context_message.svg
+++ b/src/skins/vector/img/icon_context_message.svg
@@ -4,18 +4,11 @@
     <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
     <desc>Created with sketchtool.</desc>
     <defs></defs>
-    <!-- use a filter so that the tinter doesn't have to flip black to white as well as white to black -->
-    <filter id="invert">
-        <feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1
-                                                                0 -1 0 0 1
-                                                                0 0 -1 0 1
-                                                                0 0 0  1 0"/>
-    </filter>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="icon_context">
-            <g filter="url(#invert)">
-                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
-                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#000" opacity="0.6"></path>
+            <g>
+                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#ECECEC"></path>
+                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#9B9B9B"></path>
             </g>
         </g>
     </g>
diff --git a/src/skins/vector/img/icon_context_message_dark.svg b/src/skins/vector/img/icon_context_message_dark.svg
new file mode 100644
index 0000000000..b4336cc377
--- /dev/null
+++ b/src/skins/vector/img/icon_context_message_dark.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon_context">
+            <g>
+                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
+                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#FFF" opacity="0.6"></path>
+            </g>
+        </g>
+    </g>
+</svg>

From 323c5d073289998ef4245a36032644927eaab351 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 14:54:55 +0000
Subject: [PATCH 054/168] CSS for 'searching known users'

---
 .../css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
index aa1dced80a..fe72d57d0e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/ChatInviteDialog.css
@@ -63,3 +63,9 @@ limitations under the License.
 .mx_ChatInviteDialog_cancel object {
     pointer-events: none;
 }
+
+.mx_ChatInviteDialog_addressSelectHeader {
+    font-weight: bold;
+    line-height: 150%;
+    text-indent: 4px;
+}

From 7bcd9ff3d60cb73dc45408cf7726204ae6190626 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 17 Jan 2017 15:02:31 +0000
Subject: [PATCH 055/168] Retest


From 6c88201e23b7c16a7732dea65a4009ad02efc18f Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 19:14:16 +0000
Subject: [PATCH 056/168] use ye olde rel='alternate stylesheets' for theming

---
 src/vector/index.html | 14 ++++++++++----
 src/vector/index.js   |  1 -
 webpack.config.js     |  4 ++++
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/vector/index.html b/src/vector/index.html
index 73cdd2dfc8..1895cc6b62 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -20,14 +20,20 @@
     <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
     <meta name="msapplication-config" content="vector-icons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <% for(var i=0; i<htmlWebpackPlugin.files.css.length; i++) {%>
-       <link href="<%= htmlWebpackPlugin.files.css[i] %>" rel="stylesheet">
-    <% } %>
+    <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
+        var file = htmlWebpackPlugin.files.css[i];
+        if (file.match(/^theme-(?!light\.)/)) {
+        %>
+           <link rel="alternate stylesheet" title="<%= file %>" href="<%= file %>">
+        <% } else { %>
+           <link rel="stylesheet" href="<%= file %>">
+        <% }
+    } %>
   </head>
   <body style="height: 100%;">
     <section id="matrixchat" style="height: 100%;"></section>
     <noscript>Sorry, Riot requires JavaScript to be enabled.</noscript>
-    <% for(var i=0; i<htmlWebpackPlugin.files.js.length; i++) {%>
+    <% for (var i=0; i < htmlWebpackPlugin.files.js.length; i++) {%>
        <script src="<%= htmlWebpackPlugin.files.js[i] %>"></script>
     <% } %>
     <img src="img/warning.svg" width="24" height="23" style="visibility: hidden; position: absolute; top: 0px; left: 0px;"/>
diff --git a/src/vector/index.js b/src/vector/index.js
index 64b8769812..0d25420225 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -30,7 +30,6 @@ require('babel-polyfill');
 
 // CSS requires: just putting them here for now as CSS is going to be
 // refactored "soon" anyway
-require('../../build/dark.scss');
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
diff --git a/webpack.config.js b/webpack.config.js
index 1f2a8a60b1..e05f877ae5 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -15,6 +15,10 @@ module.exports = {
         // point, so that it doesn't block the pageload, but that is a separate
         // problem)
         "olm": "./src/vector/olm-loader.js",
+
+        // CSS themes
+        "theme-light": "./build/light.scss",
+        "theme-dark": "./build/dark.scss",
     },
     module: {
         preLoaders: [

From 0cd895b417bdc1163511d993c6b24ba1fe0910f3 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Tue, 17 Jan 2017 19:19:30 +0000
Subject: [PATCH 057/168] kill the moofle

---
 src/skins/vector/css/themes/dark.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/skins/vector/css/themes/dark.scss b/src/skins/vector/css/themes/dark.scss
index 0c51486b57..5a37d0368e 100644
--- a/src/skins/vector/css/themes/dark.scss
+++ b/src/skins/vector/css/themes/dark.scss
@@ -1,4 +1,3 @@
 @import "_base.scss";
 @import "_dark.scss";
 @import "../_components.scss";
-// moofleasdadsasdadsa
\ No newline at end of file

From 5206410f2126b6b987ecb654bf13829f8a58016c Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 17 Jan 2017 22:25:02 +0000
Subject: [PATCH 058/168] Deployment script

Factor some bits out of redeploy.py, so that they can be used in a deployment
script suitable for riot.im/app.
---
 scripts/deploy.py   | 158 ++++++++++++++++++++++++++++++++++++++++++++
 scripts/redeploy.py | 107 +++++++-----------------------
 2 files changed, 182 insertions(+), 83 deletions(-)
 create mode 100755 scripts/deploy.py

diff --git a/scripts/deploy.py b/scripts/deploy.py
new file mode 100755
index 0000000000..dde13c54c9
--- /dev/null
+++ b/scripts/deploy.py
@@ -0,0 +1,158 @@
+#!/usr/bin/env python
+#
+# download and unpack a riot-web tarball.
+#
+# Allows `bundles` to be extracted to a common directory, and a link to
+# config.json to be added.
+
+from __future__ import print_function
+
+import argparse
+import os
+import os.path
+import tarfile
+import urllib
+
+class DeployException(Exception):
+    pass
+
+def create_relative_symlink(linkname, target):
+    relpath = os.path.relpath(target, os.path.dirname(linkname))
+    print ("Symlink %s -> %s" % (linkname, relpath))
+    os.symlink(relpath, linkname)
+
+
+def move_bundles(source, dest):
+    """Move the contents of the 'bundles' directory to a common dir
+
+    We check that we will not be overwriting anything before we proceed.
+
+    Args:
+        source (str): path to 'bundles' within the extracted tarball
+        dest (str): target common directory
+    """
+
+    if not os.path.isdir(dest):
+        os.mkdir(dest)
+
+    # build a map from source to destination, checking for non-existence as we go.
+    renames = {}
+    for f in os.listdir(source):
+        dst = os.path.join(dest, f)
+        if os.path.exists(dst):
+            raise DeployException(
+                "Not deploying. The bundle includes '%s' which we have previously deployed."
+                % f
+            )
+        renames[os.path.join(source, f)] = dst
+
+    for (src, dst) in renames.iteritems():
+        print ("Move %s -> %s" % (src, dst))
+        os.rename(src, dst)
+
+class Deployer:
+    def __init__(self):
+        self.packages_path = "."
+        self.bundles_path = None
+        self.should_clean = False
+        self.config_location = None
+
+    def deploy(self, tarball, extract_path):
+        """Download a tarball if necessary, and unpack it
+
+        Returns:
+            (str) the path to the unpacked deployment
+        """
+        print("Deploying %s to %s" % (tarball, extract_path))
+
+        downloaded = False
+        if tarball.startswith("http://") or tarball.startswith("https://"):
+            tarball = self.download_file(tarball)
+            print("Downloaded file: %s" % tarball)
+            downloaded = True
+
+        try:
+            with tarfile.open(tarball) as tar:
+                tar.extractall(extract_path)
+        finally:
+            if self.should_clean and downloaded:
+                os.remove(tarball)
+
+        name_str = os.path.basename(tarball).replace(".tar.gz", "")
+        extracted_dir = os.path.join(extract_path, name_str)
+        print ("Extracted into: %s" % extracted_dir)
+
+        if self.config_location:
+            create_relative_symlink(
+                target=self.config_location,
+                linkname=os.path.join(extracted_dir, 'config.json')
+            )
+
+        if self.bundles_path:
+            extracted_bundles = os.path.join(extracted_dir, 'bundles')
+            move_bundles(source=extracted_bundles, dest=self.bundles_path)
+
+            # replace the (hopefully now empty) extracted_bundles dir with a
+            # symlink to the common dir.
+            os.rmdir(extracted_bundles)
+            create_relative_symlink(
+                target=self.bundles_path,
+                linkname=extracted_bundles,
+            )
+        return extracted_dir
+
+    def download_file(self, url):
+        if not os.path.isdir(self.packages_path):
+            os.mkdir(self.packages_path)
+        local_filename = os.path.join(self.packages_path,
+                                      url.split('/')[-1])
+        urllib.urlretrieve(url, local_filename)
+        return local_filename
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser("Deploy a Riot build on a web server.")
+    parser.add_argument(
+        "-p", "--packages-dir", default="./packages", help=(
+            "The directory to download the tarball into. (Default: '%(default)s')"
+        )
+    )
+    parser.add_argument(
+        "-e", "--extract-path", default="./deploys", help=(
+            "The location to extract .tar.gz files to. (Default: '%(default)s')"
+        )
+    )
+    parser.add_argument(
+        "-b", "--bundles-dir", nargs='?', default="./bundles", help=(
+            "A directory to move the contents of the 'bundles' directory to. A \
+            symlink to the bundles directory will also be written inside the \
+            extracted tarball. Example: './bundles'. \
+            (Default: '%(default)s')"
+        )
+    )
+    parser.add_argument(
+        "-c", "--clean", action="store_true", default=False, help=(
+            "Remove .tar.gz files after they have been downloaded and extracted. \
+            (Default: %(default)s)"
+        )
+    )
+    parser.add_argument(
+        "--config", nargs='?', default='./config.json', help=(
+            "Write a symlink at config.json in the extracted tarball to this \
+            location. (Default: '%(default)s')"
+        )
+    )
+    parser.add_argument(
+        "tarball", help=(
+            "filename of tarball, or URL to download."
+        ),
+    )
+
+    args = parser.parse_args()
+
+    deployer = Deployer()
+    deployer.packages_path = args.packages_dir
+    deployer.bundles_path = args.bundles_dir
+    deployer.should_clean = args.clean
+    deployer.config_location = args.config
+
+    deployer.deploy(args.tarball, args.extract_path)
diff --git a/scripts/redeploy.py b/scripts/redeploy.py
index 4394f29228..0796b96303 100755
--- a/scripts/redeploy.py
+++ b/scripts/redeploy.py
@@ -14,32 +14,17 @@ from __future__ import print_function
 import json, requests, tarfile, argparse, os, errno
 import time
 from urlparse import urljoin
+
 from flask import Flask, jsonify, request, abort
 
+from deploy import Deployer, DeployException
+
 app = Flask(__name__)
 
 arg_jenkins_url = None
+deployer = None
 arg_extract_path = None
-arg_bundles_path = None
-arg_should_clean = None
 arg_symlink = None
-arg_config_location = None
-
-class DeployException(Exception):
-    pass
-
-def download_file(url):
-    local_filename = url.split('/')[-1]
-    r = requests.get(url, stream=True)
-    with open(local_filename, 'wb') as f:
-        for chunk in r.iter_content(chunk_size=1024):
-            if chunk: # filter out keep-alive new chunks
-                f.write(chunk)
-    return local_filename
-
-def untar_to(tarball, dest):
-    with tarfile.open(tarball) as tar:
-        tar.extractall(dest)
 
 def create_symlink(source, linkname):
     try:
@@ -137,17 +122,20 @@ def fetch_jenkins_build(job_name, build_num):
     #       see half-written files.
     build_dir = os.path.join(arg_extract_path, "%s-#%s" % (job_name, build_num))
     try:
-        deploy_tarball(tar_gz_url, build_dir)
+        extracted_dir = deploy_tarball(tar_gz_url, build_dir)
     except DeployException as e:
         abort(400, e.message)
 
+    create_symlink(source=extracted_dir, linkname=arg_symlink)
+
     return jsonify({})
 
 def deploy_tarball(tar_gz_url, build_dir):
-    """Download a tarball from jenkins and deploy it as the new version
-    """
-    print("Deploying %s to %s" % (tar_gz_url, build_dir))
+    """Download a tarball from jenkins and unpack it
 
+    Returns:
+        (str) the path to the unpacked deployment
+    """
     if os.path.exists(build_dir):
         raise DeployException(
             "Not deploying. We have previously deployed this build."
@@ -156,62 +144,8 @@ def deploy_tarball(tar_gz_url, build_dir):
 
     # we rely on the fact that flask only serves one request at a time to
     # ensure that we do not overwrite a tarball from a concurrent request.
-    filename = download_file(tar_gz_url)
-    print("Downloaded file: %s" % filename)
 
-    try:
-        untar_to(filename, build_dir)
-        print("Extracted to: %s" % build_dir)
-    finally:
-        if arg_should_clean:
-            os.remove(filename)
-
-    name_str = filename.replace(".tar.gz", "")
-    extracted_dir = os.path.join(build_dir, name_str)
-
-    if arg_config_location:
-        create_symlink(source=arg_config_location, linkname=os.path.join(extracted_dir, 'config.json'))
-
-    if arg_bundles_path:
-        extracted_bundles = os.path.join(extracted_dir, 'bundles')
-        move_bundles(source=extracted_bundles, dest=arg_bundles_path)
-
-        # replace the (hopefully now empty) extracted_bundles dir with a
-        # symlink to the common dir.
-        relpath = os.path.relpath(arg_bundles_path, extracted_dir)
-        os.rmdir(extracted_bundles)
-        print ("Symlink %s -> %s" % (extracted_bundles, relpath))
-        os.symlink(relpath, extracted_bundles)
-
-    create_symlink(source=extracted_dir, linkname=arg_symlink)
-
-def move_bundles(source, dest):
-    """Move the contents of the 'bundles' directory to a common dir
-
-    We check that we will not be overwriting anything before we proceed.
-
-    Args:
-        source (str): path to 'bundles' within the extracted tarball
-        dest (str): target common directory
-    """
-
-    if not os.path.isdir(dest):
-        os.mkdir(dest)
-
-    # build a map from source to destination, checking for non-existence as we go.
-    renames = {}
-    for f in os.listdir(source):
-        dst = os.path.join(dest, f)
-        if os.path.exists(dst):
-            raise DeployException(
-                "Not deploying. The bundle includes '%s' which we have previously deployed."
-                % f
-            )
-        renames[os.path.join(source, f)] = dst
-
-    for (src, dst) in renames.iteritems():
-        print ("Move %s -> %s" % (src, dst))
-        os.rename(src, dst)
+    return deployer.deploy(tar_gz_url, build_dir)
 
 
 if __name__ == "__main__":
@@ -270,21 +204,28 @@ if __name__ == "__main__":
     else:
         arg_jenkins_url = args.jenkins + "/"
     arg_extract_path = args.extract
-    arg_bundles_path = args.bundles_dir
-    arg_should_clean = args.clean
     arg_symlink = args.symlink
-    arg_config_location = args.config
 
     if not os.path.isdir(arg_extract_path):
         os.mkdir(arg_extract_path)
 
+    deployer = Deployer()
+    deployer.bundles_path = args.bundles_dir
+    deployer.should_clean = args.clean
+    deployer.config_location = args.config
+
     if args.tarball_uri is not None:
         build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time()))
         deploy_tarball(args.tarball_uri, build_dir)
     else:
         print(
             "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, arg_config_location)
+            (args.port,
+             arg_extract_path,
+             " (clean after)" if deployer.should_clean else "",
+             arg_symlink,
+             arg_jenkins_url,
+             deployer.config_location,
+            )
         )
         app.run(host="0.0.0.0", port=args.port, debug=True)

From 83145e80e5c17339f14dd4ec053843f5b40bbf1a Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 18 Jan 2017 10:39:59 +0000
Subject: [PATCH 059/168] Auto-hide the electron menu bar

From https://github.com/vector-im/riot-web/issues/2962

This allows all the shortcuts to still work, and the menu bar can
be un-hidden with the alt key.
---
 electron/src/electron-main.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index a03a8755bc..929b78923f 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -175,6 +175,7 @@ electron.app.on('ready', () => {
         icon: icon_path,
         width: 1024, height: 768,
         show: false,
+        autoHideMenuBar: true,
     });
     mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`);
     electron.Menu.setApplicationMenu(VectorMenu);

From 69bedf0d37384f3039a145180c4ba7834bfa45c7 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 12:42:48 +0000
Subject: [PATCH 060/168] review feedback

---
 package.json                        | 2 --
 src/skins/vector/css/rethemendex.sh | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 1e273dfe20..b8fd1574fb 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
     "babel-preset-es2017": "^6.16.0",
     "babel-preset-react": "^6.16.0",
     "babel-preset-stage-2": "^6.17.0",
-    "catw": "^1.0.1",
     "chokidar": "^1.6.1",
     "cpx": "^1.3.2",
     "css-raw-loader": "^0.1.1",
@@ -113,7 +112,6 @@
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",
     "mocha": "^2.4.5",
-    "node-sass": "^4.1.1",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
     "postcss-cli": "^2.6.0",
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
index 915b235da0..9381c5cd2a 100755
--- a/src/skins/vector/css/rethemendex.sh
+++ b/src/skins/vector/css/rethemendex.sh
@@ -2,7 +2,7 @@
 
 echo "// autogenerated by rethemendex.sh" > _components.scss
 
-for i in `find . -iname _\*.scss | fgrep -v _components.scss`;
+for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`;
 do
     echo "@import \"$i\";" >> _components.scss
 done

From 708fd640f7af9a641a5b3a66dacbb17392e8410c Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 14:06:20 +0000
Subject: [PATCH 061/168] unbreak switching after vdh's webpack changes

---
 src/vector/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/vector/index.html b/src/vector/index.html
index 1895cc6b62..a6c3092d15 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -22,9 +22,11 @@
     <meta name="theme-color" content="#ffffff">
     <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
         var file = htmlWebpackPlugin.files.css[i];
-        if (file.match(/^theme-(?!light\.)/)) {
+        var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/);
+        if (match) {
+            var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
         %>
-           <link rel="alternate stylesheet" title="<%= file %>" href="<%= file %>">
+           <link rel="alternate stylesheet" title="<%= title  %>" href="<%= file %>">
         <% } else { %>
            <link rel="stylesheet" href="<%= file %>">
         <% }

From f10bc8eef17a56b50ba4901184ad325fa181e04c Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Wed, 18 Jan 2017 16:49:20 +0100
Subject: [PATCH 062/168] Animate status bar max-height and margin-top

When collapsed, the max-height is set to 0px. When expanded, max-height is set to 50px, margin-top is set to 0px. When expanded and when the timeline is not scrolled down to the bottom, margin-top is set to -50px to offset the change in height, keeping it at the same scroll position.

Without the animation, there would be a jump when the user starts scrolling up from the bottom whilst the StatusBar is expanded.
---
 .../matrix-react-sdk/structures/RoomView.css  | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index c3f7ceed3b..3b3c396f80 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -202,6 +202,25 @@ hr.mx_RoomView_myReadMarker {
     width: 100%;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: #fff;
+    z-index: 1000;
+    overflow: hidden;
+
+    -webkit-transition: all .5s ease-in-out;
+    -moz-transition: all .5s ease-in-out;
+    -ms-transition: all .5s ease-in-out;
+    -o-transition: all .5s ease-in-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 50px;
+    margin-top: 0px;
+}
+
+.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline {
+    margin-top: -50px;
 }
 
 .mx_RoomView_statusAreaBox {

From e9884768f6fa770d6f33e9ab456688928ba50f39 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 18 Jan 2017 16:00:13 +0000
Subject: [PATCH 063/168] Persist console logs to an IndexedDB instance

---
 src/vector/index.js     |   7 ++
 src/vector/rageshake.js | 180 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 187 insertions(+)
 create mode 100644 src/vector/rageshake.js

diff --git a/src/vector/index.js b/src/vector/index.js
index 8231950b49..b965f01d7d 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -36,6 +36,13 @@ require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');
 require('draft-js/dist/Draft.css');
 
+const rageshake = require("./rageshake");
+rageshake.init().then(() => {
+    console.log("Initialised rageshake");
+}, (err) => {
+    console.error("Failed to initialise rageshake: " + err);
+});
+
 
  // add React and ReactPerf to the global namespace, to make them easier to
  // access via the console
diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
new file mode 100644
index 0000000000..fe768630b1
--- /dev/null
+++ b/src/vector/rageshake.js
@@ -0,0 +1,180 @@
+/*
+Copyright 2017 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.
+*/
+
+// This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows:
+//  - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily,
+//    without having to all depend on the same log framework / pass the logger around.
+//  - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work
+//    in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored
+//    in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in
+//    local storage, which does work in incognito mode.
+//  - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is
+//    not responsive (which may be the cause of the bug).
+
+const FLUSH_RATE_MS = 30 * 1000;
+
+// A class which monkey-patches the global console and stores log lines.
+class ConsoleLogger {
+    constructor() {
+        this.logs = "";
+
+        // Monkey-patch console logging
+        const consoleFunctionsToLevels = {
+            log: "I",
+            info: "I",
+            error: "E",
+        };
+        Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
+            const level = consoleFunctionsToLevels[fnName];
+            let originalFn = window.console[fnName].bind(window.console);
+            window.console[fnName] = (...args) => {
+                this.log(level, ...args);
+                originalFn(...args);
+            }
+        });
+    }
+
+    log(level, ...args) {
+        // We don't know what locale the user may be running so use ISO strings
+        const ts = new Date().toISOString();
+        // Some browsers support string formatting which we're not doing here
+        // so the lines are a little more ugly but easy to implement / quick to run.
+        // Example line:
+        // 2017-01-18T11:23:53.214Z W Failed to set badge count: Error setting badge. Message: Too many badges requests in queue.
+        const line = `${ts} ${level} ${args.join(' ')}\n`;
+        // Using + really is the quickest way in JS
+        // http://jsperf.com/concat-vs-plus-vs-join
+        this.logs += line;
+    }
+
+    /**
+     * Retrieve log lines to flush to disk.
+     * @return {string} \n delimited log lines to flush.
+     */
+    flush() {
+        // The ConsoleLogger doesn't care how these end up on disk, it just flushes them to the caller.
+        const logsToFlush = this.logs;
+        this.logs = "";
+        return logsToFlush;
+    }
+}
+
+// A class which stores log lines in an IndexedDB instance.
+class IndexedDBLogStore {
+    constructor(indexedDB, logger) {
+        this.indexedDB = indexedDB;
+        this.logger = logger;
+        this.db = null;
+    }
+
+    /**
+     * @return {Promise} Resolves when the store is ready.
+     */
+    connect() {
+        let req = this.indexedDB.open("logs");
+        return new Promise((resolve, reject) => {
+            req.onsuccess = (event) => {
+                this.db = event.target.result;
+                // Periodically flush logs to local storage / indexeddb
+                setInterval(this.flush.bind(this), FLUSH_RATE_MS);
+                resolve();
+            };
+
+            req.onerror = (event) => {
+                const err = "Failed to open log database: " + event.target.errorCode;
+                console.error(err);
+                reject(new Error(err));
+            };
+
+            // First time: Setup the object store
+            req.onupgradeneeded = (event) => {
+                const db = event.target.result;
+                const objectStore = db.createObjectStore("logs", {
+                    autoIncrement: true
+                })
+                objectStore.transaction.oncomplete = function(event) {
+                    objectStore.add(
+                        new Date() + " ::: Log database was created."
+                    );
+                };
+            }
+        });
+    }
+
+    /**
+     * @return {Promise} Resolved when the logs have been flushed.
+     */
+    flush() {
+        if (!this.db) {
+            // not connected yet or user rejected access for us to r/w to the db
+            return Promise.reject(new Error("No connected database"));
+        }
+        const lines = this.logger.flush();
+        if (lines.length === 0) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve, reject) => {
+            let txn = this.db.transaction("logs", "readwrite");
+            let objStore = txn.objectStore("logs");
+            objStore.add(lines);
+            txn.oncomplete = (event) => {
+                resolve();
+            };
+            txn.onerror = (event) => {
+                console.error("Failed to flush logs : " + event.target.errorCode);
+                reject(new Error("Failed to write logs: " + event.target.errorCode));
+            }
+        });
+    }
+}
+
+
+let store = null;
+let inited = false;
+module.exports = {
+
+    /**
+     * Configure rage shaking support for sending bug reports.
+     * Modifies globals.
+     */
+    init: function() {
+        if (inited || !window.indexedDB) {
+            return;
+        }
+        store = new IndexedDBLogStore(window.indexedDB, new ConsoleLogger());
+        inited = true;
+        return store.connect();
+    },
+
+    /**
+     * Force-flush the logs to storage.
+     * @return {Promise} Resolved when the logs have been flushed.
+     */
+    flush: function() {
+        if (!store) {
+            return;
+        }
+        return store.flush();
+    },
+
+    /**
+     * Send a bug report.
+     * @param {string} userText Any additional user input.
+     * @return {Promise} Resolved when the bug report is sent.
+     */
+    sendBugReport: function(userText) {
+    }
+};

From acb85b7b7227e107e4f91e8e473b2e8097eb9559 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 16:06:02 +0000
Subject: [PATCH 064/168] f1x0r CSS comment

---
 src/vector/index.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/vector/index.js b/src/vector/index.js
index 0d25420225..a389224815 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -28,8 +28,9 @@ limitations under the License.
 // https://babeljs.io/docs/plugins/transform-runtime/
 require('babel-polyfill');
 
-// CSS requires: just putting them here for now as CSS is going to be
-// refactored "soon" anyway
+// Require common CSS here; this will make webpack process it into bundle.css.
+// Our own CSS (which is themed) is imported via separate webpack entry points
+// in webpack.config.js
 require('gemini-scrollbar/gemini-scrollbar.css');
 require('gfm.css/gfm.css');
 require('highlight.js/styles/github.css');

From 5828ab107707752c76934484bad96ad8b1ff35f5 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 18 Jan 2017 16:27:11 +0000
Subject: [PATCH 065/168] Generate unique IDs for each JS runtime to accomodate
 multiple tabs

---
 src/vector/rageshake.js | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index fe768630b1..5739a93490 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -20,7 +20,8 @@ limitations under the License.
 //  - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work
 //    in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored
 //    in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in
-//    local storage, which does work in incognito mode.
+//    local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime
+//    generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines.
 //  - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is
 //    not responsive (which may be the cause of the bug).
 
@@ -77,6 +78,8 @@ class IndexedDBLogStore {
     constructor(indexedDB, logger) {
         this.indexedDB = indexedDB;
         this.logger = logger;
+        this.id = "instance-" + Date.now();
+        this.index = 0;
         this.db = null;
     }
 
@@ -103,13 +106,13 @@ class IndexedDBLogStore {
             req.onupgradeneeded = (event) => {
                 const db = event.target.result;
                 const objectStore = db.createObjectStore("logs", {
-                    autoIncrement: true
-                })
-                objectStore.transaction.oncomplete = function(event) {
-                    objectStore.add(
+                    keyPath: ["id", "index"]
+                });
+                objectStore.add(
+                    this._generateLogEntry(
                         new Date() + " ::: Log database was created."
-                    );
-                };
+                    )
+                );
             }
         });
     }
@@ -129,7 +132,7 @@ class IndexedDBLogStore {
         return new Promise((resolve, reject) => {
             let txn = this.db.transaction("logs", "readwrite");
             let objStore = txn.objectStore("logs");
-            objStore.add(lines);
+            objStore.add(this._generateLogEntry(lines));
             txn.oncomplete = (event) => {
                 resolve();
             };
@@ -139,6 +142,14 @@ class IndexedDBLogStore {
             }
         });
     }
+
+    _generateLogEntry(lines) {
+        return {
+            id: this.id,
+            lines: lines,
+            index: this.index++
+        };
+    }
 }
 
 
@@ -176,5 +187,9 @@ module.exports = {
      * @return {Promise} Resolved when the bug report is sent.
      */
     sendBugReport: function(userText) {
+        // To gather all the logs, we first query for every log entry with index "0", this will let us
+        // know all the IDs from different tabs/sessions.
+
+        // Send logs grouped by ID
     }
 };

From f20efc57f3beb4e8f0bea05c04980bc4b35b7606 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 17:05:13 +0000
Subject: [PATCH 066/168] simple doc about theming

---
 docs/theming.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)
 create mode 100644 docs/theming.md

diff --git a/docs/theming.md b/docs/theming.md
new file mode 100644
index 0000000000..defb18bc35
--- /dev/null
+++ b/docs/theming.md
@@ -0,0 +1,25 @@
+Theming Riot
+============
+
+Themes are a very basic way of providing simple alternative look & feels to the
+riot-web app via CSS & custom imagery.
+
+They are *NOT* co be confused with 'skins', which describe apps which sit on top
+of matrix-react-sdk - e.g. in theory Riot itself is a react-sdk skin.
+As of Jan 2017, skins are not fully supported; riot is the only available skin.
+
+To define a theme for Riot:
+
+ 1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
+ 2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss
+ 3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss
+ 4. Override variables in _teal.css as desired. You may wish to delete ones
+    which don't differ from _base.scss, to make it clear which are being
+    overridden. If every single colour is being changed (as per _dark.scss)
+    then you might as well keep them all.
+ 5. Add the theme to the list of entrypoints in webpack.config.js
+ 6. Add the theme to the list of themes in matrix-react-sdk's UserSettings.js
+ 7. Sit back and admire your handywork.
+
+In future, the assets for a theme will probably be gathered together into a
+single directory tree.
\ No newline at end of file

From 811086ac8ec1ea1b7cd5d5b475712d5277ce9af3 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 18 Jan 2017 17:18:02 +0000
Subject: [PATCH 067/168] Comment how we should consume logs

---
 src/vector/rageshake.js | 44 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 5739a93490..9b6106ed1f 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -23,7 +23,9 @@ limitations under the License.
 //    local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime
 //    generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines.
 //  - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is
-//    not responsive (which may be the cause of the bug).
+//    not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most
+//    recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this check
+//    on startup to prevent logs from accumulating.
 
 const FLUSH_RATE_MS = 30 * 1000;
 
@@ -143,6 +145,39 @@ class IndexedDBLogStore {
         });
     }
 
+    /**
+     * Consume the most recent logs and return them. Older logs which are not returned are deleted at the same time,
+     * so this can be called at startup to do house-keeping to keep the logs from growing too large.
+     *
+     * @param {boolean} clearAll True to clear the most recent logs returned in addition to the
+     * older logs. This is desirable when sending bug reports as we do not want to submit the
+     * same logs twice. This is not desirable when doing house-keeping at startup in case they
+     * want to submit a bug report later.
+     * @return {Promise<Object[]>} Resolves to an array of objects. The array is sorted in time (oldest first) based on
+     * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a
+     * big string with all the new-line delimited logs.
+     */
+    consume(clearAll) {
+        const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
+        // To gather all the logs, we first query for every log entry with index "0", this will let us
+        // know all the IDs from different tabs/sessions.
+        return new Promise((resolve, reject) => {
+            // let txn = this.db.transaction("logs", "readonly");
+            // let objectStore = txn.objectStore("logs");
+
+            // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs,
+            // ignoring the logs for now, and sort them to work out the correct log ID ordering.
+
+            // Starting with the most recent ID, fetch the logs (all indices) for said ID and accumulate them
+            // in order. After fetching ALL the logs for an ID, recheck the total length of the logs to work out
+            // if we have exceeded the max size cutoff for "recent" logs.
+
+            // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set).
+
+            // Return the logs that are within the cutoff.
+        });
+    }
+
     _generateLogEntry(lines) {
         return {
             id: this.id,
@@ -187,9 +222,8 @@ module.exports = {
      * @return {Promise} Resolved when the bug report is sent.
      */
     sendBugReport: function(userText) {
-        // To gather all the logs, we first query for every log entry with index "0", this will let us
-        // know all the IDs from different tabs/sessions.
-
-        // Send logs grouped by ID
+        return store.consume(true).then((data) => {
+            // Send logs grouped by ID
+        });
     }
 };

From ec1a2f6abfd73d8b181401eb37285aaf8a9cb55e Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 19:29:53 +0000
Subject: [PATCH 068/168] fix CSS regression in searchbox

---
 .../vector/css/matrix-react-sdk/structures/_SearchBox.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
index bd335f6023..382a07f9d3 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
@@ -44,7 +44,7 @@ limitations under the License.
     height: 24px;
     border: 0px ! important;
     /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
-    background-color: transparent;
+    background-color: transparent ! important;
     border: 0px;
 }
 

From 5b95986705d9958545ad5ed4f94ed169da4eefa1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 18 Jan 2017 20:05:18 +0000
Subject: [PATCH 069/168] fix various SCSS snafus

---
 src/skins/vector/css/_common.scss                             | 4 ++--
 .../vector/css/matrix-react-sdk/structures/_SearchBox.scss    | 1 -
 src/skins/vector/img/icon-call.svg                            | 2 +-
 src/skins/vector/img/icons-close-button.svg                   | 2 +-
 src/skins/vector/img/icons-search.svg                         | 2 +-
 src/skins/vector/img/icons-upload.svg                         | 2 +-
 src/skins/vector/img/icons-video.svg                          | 2 +-
 7 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 01ba81d83e..94362a2fa4 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -55,8 +55,8 @@ a:visited {
     color: $accent-color;
 }
 
-input[type=text] {
-    background-color: $primary-bg-color;
+input[type=text], input[type=password] {
+    background-color: transparent;
     color: $primary-fg-color;
 }
 
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
index 382a07f9d3..0f34f056a5 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss
@@ -44,7 +44,6 @@ limitations under the License.
     height: 24px;
     border: 0px ! important;
     /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
-    background-color: transparent ! important;
     border: 0px;
 }
 
diff --git a/src/skins/vector/img/icon-call.svg b/src/skins/vector/img/icon-call.svg
index 2d96b1456b..0ca5c29e9d 100644
--- a/src/skins/vector/img/icon-call.svg
+++ b/src/skins/vector/img/icon-call.svg
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
   <g id="Symbols">
-    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109"/>
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-109"/>
     <path d="M23,28 C21.195,28 16.807,25.624 13.122,20.524 C9.675,15.755 8,12.309 8,9.99 C8,8.164 9.225,7.293 9.883,6.825 L10.045,6.708 C10.773,6.173 11.903,6 12.337,6 C13.097,6 13.417,6.458 13.611,6.857 C13.776,7.195 15.141,10.212 15.28,10.587 C15.492,11.164 15.422,12.005 14.766,12.488 L14.65,12.571 C14.324,12.804 13.718,13.236 13.634,13.761 C13.594,14.016 13.677,14.283 13.889,14.577 C14.946,16.043 18.32,20.346 18.928,20.931 C19.405,21.389 20.009,21.455 20.42,21.098 C20.846,20.729 21.035,20.511 21.037,20.508 L21.081,20.465 C21.116,20.434 21.449,20.162 21.992,20.162 C22.385,20.162 22.783,20.302 23.178,20.576 C24.201,21.287 26.51,22.876 26.51,22.876 L26.547,22.906 C26.842,23.166 27.269,23.917 26.772,24.893 C26.256,25.907 24.655,28 23,28 L23,28 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
   </g>
 </svg>
diff --git a/src/skins/vector/img/icons-close-button.svg b/src/skins/vector/img/icons-close-button.svg
index f17940f58c..f960d73a3c 100644
--- a/src/skins/vector/img/icons-close-button.svg
+++ b/src/skins/vector/img/icons-close-button.svg
@@ -7,7 +7,7 @@
     <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Chat-People-2-Invite-modal-(similar-to-chat-group-5)" transform="translate(-909.000000, -263.000000)">
             <g id="icons_close" transform="translate(909.000000, 263.000000)">
-                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#EAF5F0"></path>
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#76CFA6" opacity="0.15"></path>
                 <polyline id="icon_close" fill="#76CFA6" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline>
             </g>
         </g>
diff --git a/src/skins/vector/img/icons-search.svg b/src/skins/vector/img/icons-search.svg
index 4f5002ab79..d85709e66c 100644
--- a/src/skins/vector/img/icons-search.svg
+++ b/src/skins/vector/img/icons-search.svg
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
   <g id="Symbols">
-    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-1-Copy-7"/>
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-1-Copy-7"/>
     <path d="M22.4,15.4 C22.4,19.266 19.266,22.4 15.4,22.4 C11.534,22.4 8.4,19.266 8.4,15.4 C8.4,11.534 11.534,8.4 15.4,8.4 C19.266,8.4 22.4,11.534 22.4,15.4 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/>
     <path d="M20.3,20.3 L25.25,25.25" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/>
   </g>
diff --git a/src/skins/vector/img/icons-upload.svg b/src/skins/vector/img/icons-upload.svg
index 9074fcf9fa..b0101e87a0 100644
--- a/src/skins/vector/img/icons-upload.svg
+++ b/src/skins/vector/img/icons-upload.svg
@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
   <g id="Symbols">
-    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109-Copy"/>
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-109-Copy"/>
     <g id="file">
       <path d="M10,10.01 C10,7.795 11.782,6 14.004,6 L18.402,6 C18.402,6 25,12.492 25,12.492 L25,24.006 C25,26.212 23.206,28 21,28 L14,28 C11.791,28 10,26.2 10,23.99 L10,10.01 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
       <path d="M25,13 L20.157,13 C18.966,13 18,12.034 18,10.843 L18,6" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-3"/>
diff --git a/src/skins/vector/img/icons-video.svg b/src/skins/vector/img/icons-video.svg
index a35df49bb1..d367f49609 100644
--- a/src/skins/vector/img/icons-video.svg
+++ b/src/skins/vector/img/icons-video.svg
@@ -7,7 +7,7 @@
     <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)">
             <g id="icons_video" transform="translate(542.000000, 366.000000)">
-                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#EAF5F0"></path>
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#76CFA6" opacity="0.15"></path>
                 <g transform="translate(9.000000, 11.500000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
                     <g transform="scale(1.0, 0.8)">
                         <rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect>

From 237f4df08eeb0333c451928d5af4adacd1000aca Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 18 Jan 2017 21:30:53 +0000
Subject: [PATCH 070/168] A couple of tweaks to the karma config

* allow the imgs to be served from the karma server to avoid 404s
* Use the source-map-loader for js
---
 karma.conf.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index 2474216916..901832c78c 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -29,12 +29,22 @@ module.exports = function (config) {
         files: [
             'node_modules/babel-polyfill/browser.js',
             testFile,
-            {pattern: 'vector/img/*', watched: false, included: false, served: true, nocache: false},
+
+            // make the images available via our httpd. They will be avaliable
+            // below http://localhost:[PORT]/base/. See also `proxies` which
+            // defines alternative URLs for them.
+            //
+            // This isn't required by any of the tests, but it stops karma
+            // logging warnings when it serves a 404 for them.
+            {
+                pattern: 'src/skins/vector/img/*',
+                watched: false, included: false, served: true, nocache: false,
+            },
         ],
 
-        // redirect img links to the karma server
         proxies: {
-            "/img/": "/base/vector/img/",
+            // redirect img links to the karma server. See above.
+            "/img/": "/base/src/skins/vector/img/",
         },
 
         // preprocess matching files before serving them to the browser
@@ -86,6 +96,12 @@ module.exports = function (config) {
 
         webpack: {
             module: {
+                preLoaders: [
+                    // use the source-map-loader for javascript. This means
+                    // that we have a better chance of seeing line numbers from
+                    // the pre-babeled source.
+                    { test: /\.js$/, loader: "source-map-loader" },
+                ],
                 loaders: [
                     { test: /\.json$/, loader: "json" },
                     {

From c5032ba1bc4a7cde6ccd69c370ab336b7d2deac8 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@arasphere.net>
Date: Wed, 18 Jan 2017 22:46:12 +0000
Subject: [PATCH 071/168] Update theming.md

---
 docs/theming.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/theming.md b/docs/theming.md
index defb18bc35..c6373e52b6 100644
--- a/docs/theming.md
+++ b/docs/theming.md
@@ -13,7 +13,7 @@ To define a theme for Riot:
  1. Pick a name, e.g. `teal`. at time of writing we have `light` and `dark`.
  2. Fork `src/skins/vector/css/themes/dark.scss` to be teal.scss
  3. Fork `src/skins/vector/css/themes/_base.scss` to be _teal.scss
- 4. Override variables in _teal.css as desired. You may wish to delete ones
+ 4. Override variables in _teal.scss as desired. You may wish to delete ones
     which don't differ from _base.scss, to make it clear which are being
     overridden. If every single colour is being changed (as per _dark.scss)
     then you might as well keep them all.
@@ -22,4 +22,4 @@ To define a theme for Riot:
  7. Sit back and admire your handywork.
 
 In future, the assets for a theme will probably be gathered together into a
-single directory tree.
\ No newline at end of file
+single directory tree.

From d1fbbf90c088f5d97a2b82882f8755dab5b03d5f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 18 Jan 2017 21:51:49 +0000
Subject: [PATCH 072/168] Verify PGP signatures on tarballs when deploying

---
 scripts/deploy.py   | 35 ++++++++++++++++++++++++++++++-----
 scripts/redeploy.py |  6 ++++++
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/scripts/deploy.py b/scripts/deploy.py
index dde13c54c9..c96b46e81f 100755
--- a/scripts/deploy.py
+++ b/scripts/deploy.py
@@ -10,8 +10,16 @@ from __future__ import print_function
 import argparse
 import os
 import os.path
+import subprocess
+import sys
 import tarfile
-import urllib
+
+try:
+    # python3
+    from urllib.request import urlretrieve
+except ImportError:
+    # python2
+    from urllib import urlretrieve
 
 class DeployException(Exception):
     pass
@@ -56,6 +64,7 @@ class Deployer:
         self.bundles_path = None
         self.should_clean = False
         self.config_location = None
+        self.verify_signature = True
 
     def deploy(self, tarball, extract_path):
         """Download a tarball if necessary, and unpack it
@@ -65,9 +74,15 @@ class Deployer:
         """
         print("Deploying %s to %s" % (tarball, extract_path))
 
+        name_str = os.path.basename(tarball).replace(".tar.gz", "")
+        extracted_dir = os.path.join(extract_path, name_str)
+        if os.path.exists(extracted_dir):
+            raise DeployException('Cannot unpack %s: %s already exists' % (
+                tarball, extracted_dir))
+
         downloaded = False
         if tarball.startswith("http://") or tarball.startswith("https://"):
-            tarball = self.download_file(tarball)
+            tarball = self.download_and_verify(tarball)
             print("Downloaded file: %s" % tarball)
             downloaded = True
 
@@ -78,8 +93,6 @@ class Deployer:
             if self.should_clean and downloaded:
                 os.remove(tarball)
 
-        name_str = os.path.basename(tarball).replace(".tar.gz", "")
-        extracted_dir = os.path.join(extract_path, name_str)
         print ("Extracted into: %s" % extracted_dir)
 
         if self.config_location:
@@ -101,12 +114,24 @@ class Deployer:
             )
         return extracted_dir
 
+    def download_and_verify(self, url):
+        tarball = self.download_file(url)
+
+        if self.verify_signature:
+            sigfile = self.download_file(url + ".asc")
+            subprocess.check_call(["gpg", "--verify", sigfile, tarball])
+
+        return tarball
+
     def download_file(self, url):
         if not os.path.isdir(self.packages_path):
             os.mkdir(self.packages_path)
         local_filename = os.path.join(self.packages_path,
                                       url.split('/')[-1])
-        urllib.urlretrieve(url, local_filename)
+        sys.stdout.write("Downloading %s -> %s..." % (url, local_filename))
+        sys.stdout.flush()
+        urlretrieve(url, local_filename)
+        print ("Done")
         return local_filename
 
 if __name__ == "__main__":
diff --git a/scripts/redeploy.py b/scripts/redeploy.py
index 0796b96303..598f6c5265 100755
--- a/scripts/redeploy.py
+++ b/scripts/redeploy.py
@@ -214,6 +214,12 @@ if __name__ == "__main__":
     deployer.should_clean = args.clean
     deployer.config_location = args.config
 
+    # we don't pgp-sign jenkins artifacts; instead we rely on HTTPS access to
+    # the jenkins server (and the jenkins server not being compromised and/or
+    # github not serving it compromised source). If that's not good enough for
+    # you, don't use riot.im/develop.
+    deployer.verify_signature = False
+
     if args.tarball_uri is not None:
         build_dir = os.path.join(arg_extract_path, "test-%i" % (time.time()))
         deploy_tarball(args.tarball_uri, build_dir)

From c3fa6ff8053f047d6d8dd8270dbb243abed5d587 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 02:48:17 +0000
Subject: [PATCH 073/168] Use the postcss-webpack-loader

Use postcss-webpack-loader instead of webpack-cli to process the scss. Doing so
mostly means that we avoid the problem that webpack-dev-server fails to start
if we haven't already built the CSS. (It also simplifies package.json somewhat,
which is no bad thing)
---
 package.json        | 14 ++++++--------
 postcss.config.js   | 13 +++++++++++++
 postcss.config.json | 15 ---------------
 webpack.config.js   | 26 +++++++++++++++++++++-----
 4 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 postcss.config.js
 delete mode 100644 postcss.config.json

diff --git a/package.json b/package.json
index 722e0cf095..84e0547890 100644
--- a/package.json
+++ b/package.json
@@ -29,21 +29,19 @@
     "reskindex": "reskindex -h src/header",
     "build:res": "node scripts/copy-res.js",
     "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
-    "build:css": "mkdirp build && postcss -c postcss.config.json",
     "build:compile": "babel --source-maps -d lib src",
     "build:bundle": "NODE_ENV=production webpack -p --progress",
     "build:bundle:dev": "webpack --optimize-occurence-order --progress",
     "build:electron": "npm run clean && npm run build && build -wml --ia32 --x64",
-    "build": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle",
-    "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:css && npm run build:bundle:dev",
+    "build": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle",
+    "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
     "start:res": "node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
-    "start:css": "mkdirp build && postcss -c postcss.config.json -w",
-    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\" \"npm run start:css\"",
-    "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\" \"npm run start:css\"",
-    "clean": "rimraf build lib webapp electron/dist",
+    "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
+    "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",
+    "clean": "rimraf lib webapp electron/dist",
     "prepublish": "npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
     "test:multi": "karma start"
@@ -114,9 +112,9 @@
     "mocha": "^2.4.5",
     "parallelshell": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.7",
-    "postcss-cli": "^2.6.0",
     "postcss-extend": "^1.0.5",
     "postcss-import": "^9.0.0",
+    "postcss-loader": "^1.2.2",
     "postcss-mixins": "^5.4.1",
     "postcss-nested": "^1.0.0",
     "postcss-scss": "^0.4.0",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..5305d9ed9e
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,13 @@
+module.exports = {
+    plugins: [
+        require("postcss-import")(),
+        require("autoprefixer")(),
+        require("postcss-simple-vars")(),
+        require("postcss-extend")(),
+        require("postcss-nested")(),
+        require("postcss-mixins")(),
+        require("postcss-strip-inline-comments")(),
+    ],
+    "parser": "postcss-scss",
+    "local-plugins": true,
+};
diff --git a/postcss.config.json b/postcss.config.json
deleted file mode 100644
index 7ed32cdac1..0000000000
--- a/postcss.config.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "use": [
-        "postcss-import",
-        "autoprefixer",
-        "postcss-simple-vars",
-        "postcss-extend",
-        "postcss-nested",
-        "postcss-mixins",
-        "postcss-strip-inline-comments"
-    ],
-    "parser": "postcss-scss",
-    "input": "src/skins/vector/css/themes/[^_]*.scss",
-    "dir": "build",
-    "local-plugins": true
-}
diff --git a/webpack.config.js b/webpack.config.js
index 3a70196596..136e0af754 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -17,8 +17,8 @@ module.exports = {
         "olm": "./src/vector/olm-loader.js",
 
         // CSS themes
-        "theme-light": "./build/light.scss",
-        "theme-dark": "./build/dark.scss",
+        "theme-light": "./src/skins/vector/css/themes/light.scss",
+        "theme-dark": "./src/skins/vector/css/themes/dark.scss"
     },
     module: {
         preLoaders: [
@@ -27,9 +27,25 @@ module.exports = {
         loaders: [
             { test: /\.json$/, loader: "json" },
             { test: /\.js$/, loader: "babel", include: path.resolve('./src') },
-            // css-raw-loader loads CSS but doesn't try to treat url()s as require()s
-            // we're assuming that postcss has already preprocessed SCSS by this point
-            { test: /\.s?css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
+            {
+                test: /\.scss$/,
+
+                // 1. postcss-loader turns the SCSS into normal CSS.
+                // 2. css-raw-loader turns the CSS into a javascript module
+                //    whose default export is a string containing the CSS.
+                //    (css-raw-loader is similar to css-loader, but the latter
+                //    would also drag in the imgs and fonts that our CSS refers to
+                //    as webpack inputs.)
+                // 3. ExtractTextPlugin turns that string into a separate asset.
+                loader: ExtractTextPlugin.extract(
+                    "css-raw-loader!postcss-loader?config=postcss.config.js"
+                ),
+            },
+            {
+                // this works similarly to the scss case, without postcss.
+                test: /\.css$/,
+                loader: ExtractTextPlugin.extract("css-raw-loader"),
+            },
         ],
         noParse: [
             // don't parse the languages within highlight.js. They cause stack

From e08f97a549925ee6bada12963dac1afdae0de714 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 11:52:15 +0100
Subject: [PATCH 074/168] Reduce animation time to 200ms

---
 .../vector/css/matrix-react-sdk/structures/RoomView.css   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index 3b3c396f80..b7fe0441cb 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1000;
     overflow: hidden;
 
-    -webkit-transition: all .5s ease-in-out;
-    -moz-transition: all .5s ease-in-out;
-    -ms-transition: all .5s ease-in-out;
-    -o-transition: all .5s ease-in-out;
+    -webkit-transition: all .2s ease-in-out;
+    -moz-transition: all .2s ease-in-out;
+    -ms-transition: all .2s ease-in-out;
+    -o-transition: all .2s ease-in-out;
 }
 
 .mx_RoomView_statusArea_expanded {

From 6b1d1389187c3a0904ae2c04097033cd7631a12d Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 12:45:26 +0100
Subject: [PATCH 075/168] Make scrolling to bottom whilst expanded seem less
 weird inertially

---
 .../css/matrix-react-sdk/structures/RoomView.css    | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index b7fe0441cb..6dc22e2fb6 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -208,10 +208,10 @@ hr.mx_RoomView_myReadMarker {
     z-index: 1000;
     overflow: hidden;
 
-    -webkit-transition: all .2s ease-in-out;
-    -moz-transition: all .2s ease-in-out;
-    -ms-transition: all .2s ease-in-out;
-    -o-transition: all .2s ease-in-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    -ms-transition: all .2s ease-out;
+    -o-transition: all .2s ease-out;
 }
 
 .mx_RoomView_statusArea_expanded {
@@ -221,6 +221,11 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline {
     margin-top: -50px;
+
+    -webkit-transition: all .2s ease-in;
+    -moz-transition: all .2s ease-in;
+    -ms-transition: all .2s ease-in;
+    -o-transition: all .2s ease-in;
 }
 
 .mx_RoomView_statusAreaBox {

From 89d514a532827f5eb576a43138228a96a1606c02 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 12:02:19 +0000
Subject: [PATCH 076/168] Query IndexedDB for all results with index=0

---
 src/vector/rageshake.js | 46 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 9b6106ed1f..65462d15a4 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -24,7 +24,7 @@ limitations under the License.
 //    generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines.
 //  - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is
 //    not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most
-//    recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this check
+//    recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this purge
 //    on startup to prevent logs from accumulating.
 
 const FLUSH_RATE_MS = 30 * 1000;
@@ -38,6 +38,7 @@ class ConsoleLogger {
         const consoleFunctionsToLevels = {
             log: "I",
             info: "I",
+            warn: "W",
             error: "E",
         };
         Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
@@ -110,6 +111,12 @@ class IndexedDBLogStore {
                 const objectStore = db.createObjectStore("logs", {
                     keyPath: ["id", "index"]
                 });
+                // Keys in the database look like: [ "instance-148938490", 0 ]
+                // Later on we need to query for everything with index=0, and query everything for an instance id.
+                // In order to do this, we need to set up indexes on both "id" and "index".
+                objectStore.createIndex("index", "index", { unique: false });
+                objectStore.createIndex("id", "id", { unique: false });
+
                 objectStore.add(
                     this._generateLogEntry(
                         new Date() + " ::: Log database was created."
@@ -161,9 +168,11 @@ class IndexedDBLogStore {
         const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
         // To gather all the logs, we first query for every log entry with index "0", this will let us
         // know all the IDs from different tabs/sessions.
-        return new Promise((resolve, reject) => {
-            // let txn = this.db.transaction("logs", "readonly");
-            // let objectStore = txn.objectStore("logs");
+        const txn = this.db.transaction("logs", "readonly");
+        const objectStore = txn.objectStore("logs");
+        return selectQuery(objectStore.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => {
+            console.log("Instances: ", res);
+        });
 
             // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs,
             // ignoring the logs for now, and sort them to work out the correct log ID ordering.
@@ -175,7 +184,6 @@ class IndexedDBLogStore {
             // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set).
 
             // Return the logs that are within the cutoff.
-        });
     }
 
     _generateLogEntry(lines) {
@@ -187,6 +195,34 @@ class IndexedDBLogStore {
     }
 }
 
+/**
+ * Helper method to collect results from a Cursor and promiseify it.
+ * @param {ObjectStore|Index} store The store to perform openCursor on.
+ * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
+ * @param {Function} resultMapper A function which is repeatedly called with a Cursor.
+ * Return the data you want to keep.
+ * @return {Promise<T[]>} Resolves to an array of whatever you returned from resultMapper.
+ */
+function selectQuery(store, keyRange, resultMapper) {
+    const query = store.openCursor(keyRange);
+    return new Promise((resolve, reject) => {
+        let results = [];
+        query.onerror = (event) => {
+            reject(new Error("Query failed: " + event.target.errorCode));
+        };
+        // collect results
+        query.onsuccess = (event) => {
+            const cursor = event.target.result;
+            if (!cursor) {
+                resolve(results);
+                return; // end of results
+            }
+            results.push(resultMapper(cursor));
+            cursor.continue();
+        }
+    });
+}
+
 
 let store = null;
 let inited = false;

From 231adbcd311359b858dbb7dd7911d4dab9b21891 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 13:02:08 +0000
Subject: [PATCH 077/168] Add copyright header

---
 electron/src/squirrelhooks.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/electron/src/squirrelhooks.js b/electron/src/squirrelhooks.js
index ca0983b66e..15ed670f0c 100644
--- a/electron/src/squirrelhooks.js
+++ b/electron/src/squirrelhooks.js
@@ -1,3 +1,19 @@
+/*
+Copyright 2017 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.
+*/
+
 const path = require('path');
 const spawn = require('child_process').spawn;
 const app = require('electron').app;

From bee4ca2b28babf3cf43ec3c744a6b4e10bf3e624 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 13:25:56 +0000
Subject: [PATCH 078/168] Fixes to electron desktop notifs

Merge the notification part of https://github.com/vector-im/riot-web/pull/2960

 * Show and focus the window when the notification is clicked,
   rather than just restoring it.
 * Implement requestNotificationPermission and return a resolved
   promise (although in practice it should never be called)
---
 src/vector/platform/ElectronPlatform.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js
index 68df88b096..47bfd9907a 100644
--- a/src/vector/platform/ElectronPlatform.js
+++ b/src/vector/platform/ElectronPlatform.js
@@ -97,7 +97,10 @@ export default class ElectronPlatform extends VectorBasePlatform {
                 room_id: room.roomId
             });
             global.focus();
-            electron.remote.getCurrentWindow().restore();
+            const currentWin = electron.remote.getCurrentWindow();
+            currentWin.show();
+            currentWin.restore();
+            currentWin.focus();
         };
 
         return notification;
@@ -131,4 +134,8 @@ export default class ElectronPlatform extends VectorBasePlatform {
     screenCaptureErrorString() {
         return null;
     }
+
+    requestNotificationPermission() : Promise {
+        return q('granted');
+    }
 }

From d11bcdad5fdd80c9eed34328a566fb707111b6b6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 14:29:07 +0000
Subject: [PATCH 079/168] Add electron tray icon

From https://github.com/vector-im/riot-web/pull/2960

Makes riot minimise to the tray on windows / linux.
---
 electron/src/electron-main.js | 10 +++++-
 electron/src/tray.js          | 67 +++++++++++++++++++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 electron/src/tray.js

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index 929b78923f..653dfd46fe 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -26,6 +26,8 @@ if (check_squirrel_hooks()) return;
 const electron = require('electron');
 const url = require('url');
 
+const tray = require('./tray');
+
 const VectorMenu = require('./vectormenu');
 
 let vectorConfig = {};
@@ -180,6 +182,12 @@ electron.app.on('ready', () => {
     mainWindow.loadURL(`file://${__dirname}/../../webapp/index.html`);
     electron.Menu.setApplicationMenu(VectorMenu);
 
+    // Create trayIcon icon
+    tray.create(mainWindow, {
+        icon_path: icon_path,
+        brand: vectorConfig.brand || 'Riot'
+    });
+
     mainWindow.once('ready-to-show', () => {
         mainWindow.show();
     });
@@ -187,7 +195,7 @@ electron.app.on('ready', () => {
         mainWindow = null;
     });
     mainWindow.on('close', (e) => {
-        if (process.platform == 'darwin' && !appQuitting) {
+        if (!appQuitting && (tray.hasTray() || process.platform == 'darwin')) {
             // On Mac, closing the window just hides it
             // (this is generally how single-window Mac apps
             // behave, eg. Mail.app)
diff --git a/electron/src/tray.js b/electron/src/tray.js
new file mode 100644
index 0000000000..2ccdf40ccc
--- /dev/null
+++ b/electron/src/tray.js
@@ -0,0 +1,67 @@
+/*
+Copyright 2017 Karl Glatz <karl@glatz.biz>
+Copyright 2017 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.
+*/
+
+const path = require('path');
+const electron = require('electron');
+
+const app = electron.app;
+const Tray = electron.Tray;
+const MenuItem = electron.MenuItem;
+
+let trayIcon = null;
+
+exports.hasTray = function hasTray() {
+    return (trayIcon !== null);
+}
+
+exports.create = function (win, config) {
+    // no trays on darwin
+    if (process.platform === 'darwin' || trayIcon) {
+        return;
+    }
+
+    const toggleWin = function () {
+        if (win.isVisible() && !win.isMinimized()) {
+            win.hide();
+        } else {
+            if (win.isMinimized()) win.restore();
+            if (!win.isVisible()) win.show();
+            win.focus();
+        }
+    };
+
+    const contextMenu = electron.Menu.buildFromTemplate([
+        {
+            label: 'Show/Hide ' + config.brand,
+            click: toggleWin
+        },
+        {
+            type: 'separator'
+        },
+        {
+            label: 'Quit',
+            click: function () {
+                app.quit();
+            }
+        }
+    ]);
+
+    trayIcon = new Tray(config.icon_path);
+    trayIcon.setToolTip(config.brand);
+    trayIcon.setContextMenu(contextMenu);
+    trayIcon.on('click', toggleWin);
+};

From 608c1b02081a75617a9d9a9ed483a962c7f0940a Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 15:03:47 +0000
Subject: [PATCH 080/168] Finish implementing consume()

- Fetches all logs in order and concatenates correctly.
- Purges old logs correctly.
---
 src/vector/index.js     |   1 +
 src/vector/rageshake.js | 133 ++++++++++++++++++++++++++++++++++------
 2 files changed, 116 insertions(+), 18 deletions(-)

diff --git a/src/vector/index.js b/src/vector/index.js
index b965f01d7d..d773db85bb 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -39,6 +39,7 @@ require('draft-js/dist/Draft.css');
 const rageshake = require("./rageshake");
 rageshake.init().then(() => {
     console.log("Initialised rageshake");
+    rageshake.sendBugReport();
 }, (err) => {
     console.error("Failed to initialise rageshake: " + err);
 });
diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 65462d15a4..6093515d5a 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -166,24 +166,120 @@ class IndexedDBLogStore {
      */
     consume(clearAll) {
         const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
-        // To gather all the logs, we first query for every log entry with index "0", this will let us
-        // know all the IDs from different tabs/sessions.
-        const txn = this.db.transaction("logs", "readonly");
-        const objectStore = txn.objectStore("logs");
-        return selectQuery(objectStore.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => {
-            console.log("Instances: ", res);
+        const db = this.db;
+
+        // Returns: a string representing the concatenated logs for this ID.
+        function fetchLogs(id) {
+            const o = db.transaction("logs", "readonly").objectStore("logs");
+            return selectQuery(o.index("id"), IDBKeyRange.only(id), (cursor) => {
+                return {
+                    lines: cursor.value.lines,
+                    index: cursor.value.index,
+                }
+            }).then((linesArray) => {
+                // We have been storing logs periodically, so string them all together *in order of index* now
+                linesArray.sort((a, b) => {
+                    return a.index - b.index;
+                })
+                return linesArray.map((l) => l.lines).join("");
+            });
+        }
+
+        // Returns: A sorted array of log IDs. (newest first)
+        function fetchLogIds() {
+            // To gather all the log IDs, query for every log entry with index "0", this will let us
+            // know all the IDs from different tabs/sessions.
+            const o = db.transaction("logs", "readonly").objectStore("logs");
+            return selectQuery(o.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => {
+                // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs,
+                // ignoring the logs for now, and sort them to work out the correct log ID ordering, newest first.
+                // E.g. [ "instance-1484827160051", "instance-1374827160051", "instance-1000007160051"]
+                return res.sort().reverse();
+            });
+        }
+
+        function deleteLogs(id) {
+            return new Promise((resolve, reject) => {
+                const txn = db.transaction("logs", "readwrite");
+                const o = txn.objectStore("logs");
+                // only load the key path, not the data which may be huge
+                const query = o.index("id").openKeyCursor(IDBKeyRange.only(id));
+                query.onsuccess = (event) => {
+                    const cursor = event.target.result;
+                    if (!cursor) {
+                        return;
+                    }
+                    o.delete(cursor.primaryKey);
+                    cursor.continue();
+                }
+                txn.oncomplete = () => {
+                    resolve();
+                };
+                txn.onerror = (event) => {
+                    reject(new Error(`Failed to delete logs for '${id}' : ${event.target.errorCode}`));
+                }
+            });
+        }
+
+        // Ideally we'd just use coroutines and a for loop but riot-web doesn't support async/await so instead
+        // recursively fetch logs up to the given threshold. We can't cheat and fetch all the logs
+        // from all time, but we may OOM if we do so.
+        // Returns: Promise<Object[]> : Each object having 'id' and 'lines'. Same ordering as logIds.
+        function fetchLogsToThreshold(logIds, threshold, logs) {
+            // Base case: check log size and return if bigger than threshold
+            let size = 0;
+            logs.forEach((l) => {
+                size += l.lines.length;
+            });
+            if (size > threshold) {
+                return Promise.resolve(logs);
+            }
+
+            // fetch logs for the first element
+            let logId = logIds.shift();
+            if (!logId) {
+                // no more entries
+                return Promise.resolve(logs);
+            }
+            return fetchLogs(logId).then((lines) => {
+                // add result to logs
+                logs.push({
+                    lines: lines,
+                    id: logId,
+                });
+                // recurse with the next log ID. TODO: Stack overflow risk?
+                return fetchLogsToThreshold(logIds, threshold, logs);
+            })
+        }
+
+        let allLogIds = [];
+        return fetchLogIds().then((logIds) => {
+            allLogIds = logIds.map((id) => id); // deep copy array as we'll modify it when fetching logs
+            return fetchLogsToThreshold(logIds, MAX_LOG_SIZE, []);
+        }).then((logs) => {
+            // Remove all logs that are beyond the threshold (not in logs), or the entire logs if clearAll was set.
+            let removeLogIds = allLogIds;
+            if (!clearAll) {
+                removeLogIds = removeLogIds.filter((id) => {
+                    for (let i = 0; i < logs.length; i++) {
+                        if (logs[i].id === id) {
+                            return false; // do not remove logs that we're about to return to the caller.
+                        }
+                    }
+                    return true;
+                });
+            }
+            if (removeLogIds.length > 0) {
+                console.log("Removing logs: ", removeLogIds);
+                // Don't promise chain this because it's non-fatal if we can't clean up logs.
+                Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => {
+                    console.log(`Removed ${removeLogIds.length} old logs.`);
+                }, (err) => {
+                    console.error(err);
+                })
+            }
+            return logs;
         });
-
-            // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs,
-            // ignoring the logs for now, and sort them to work out the correct log ID ordering.
-
-            // Starting with the most recent ID, fetch the logs (all indices) for said ID and accumulate them
-            // in order. After fetching ALL the logs for an ID, recheck the total length of the logs to work out
-            // if we have exceeded the max size cutoff for "recent" logs.
-
-            // Remove all logs that are older than the cutoff (or the entire logs if clearAll is set).
-
-            // Return the logs that are within the cutoff.
     }
 
     _generateLogEntry(lines) {
@@ -258,8 +354,9 @@ module.exports = {
      * @return {Promise} Resolved when the bug report is sent.
      */
     sendBugReport: function(userText) {
-        return store.consume(true).then((data) => {
+        return store.consume(false).then((logs) => {
             // Send logs grouped by ID
+            console.log(logs);
         });
     }
 };

From 61c5253dbf41fed7deec32d445bfa3c222833a7a Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 15:40:54 +0000
Subject: [PATCH 081/168] Give the 'Light' theme link a title too

... mostly to make it appear on the Firefox style menu.
---
 src/vector/index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/vector/index.html b/src/vector/index.html
index a6c3092d15..3ab667ccf8 100644
--- a/src/vector/index.html
+++ b/src/vector/index.html
@@ -22,11 +22,13 @@
     <meta name="theme-color" content="#ffffff">
     <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
         var file = htmlWebpackPlugin.files.css[i];
-        var match = file.match(/^bundles\/.*?\/theme-((?!light\.).*)\.css$/);
+        var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
         if (match) {
             var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+            var light = match[1] == 'light';
         %>
-           <link rel="alternate stylesheet" title="<%= title  %>" href="<%= file %>">
+           <link rel="<%= light ? '' : 'alternate ' %>stylesheet" title="<%= title %>"
+               href="<%= file %>">
         <% } else { %>
            <link rel="stylesheet" href="<%= file %>">
         <% }

From 81d437ac1e16104f32fef3c0d694a215fb7129a5 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 15:47:55 +0000
Subject: [PATCH 082/168] POST reports to localhost for now. Also send live
 console logs

---
 src/vector/index.js     |  2 +-
 src/vector/rageshake.js | 75 +++++++++++++++++++++++++++++++++++------
 2 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/vector/index.js b/src/vector/index.js
index d773db85bb..d1d457e984 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -39,7 +39,7 @@ require('draft-js/dist/Draft.css');
 const rageshake = require("./rageshake");
 rageshake.init().then(() => {
     console.log("Initialised rageshake");
-    rageshake.sendBugReport();
+    rageshake.cleanup();
 }, (err) => {
     console.error("Failed to initialise rageshake: " + err);
 });
diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 6093515d5a..1f3dbc7d4f 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -14,6 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import request from "browser-request";
+
 // This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows:
 //  - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily,
 //    without having to all depend on the same log framework / pass the logger around.
@@ -321,20 +323,27 @@ function selectQuery(store, keyRange, resultMapper) {
 
 
 let store = null;
-let inited = false;
+let logger = null;
+let initPromise = null;
 module.exports = {
 
     /**
      * Configure rage shaking support for sending bug reports.
      * Modifies globals.
+     * @return {Promise} Resolves when set up.
      */
     init: function() {
-        if (inited || !window.indexedDB) {
-            return;
+        if (initPromise) {
+            return initPromise;
         }
-        store = new IndexedDBLogStore(window.indexedDB, new ConsoleLogger());
-        inited = true;
-        return store.connect();
+        logger = new ConsoleLogger();
+        if (window.indexedDB) {
+            store = new IndexedDBLogStore(window.indexedDB, logger);
+            initPromise = store.connect();
+            return initPromise;
+        }
+        initPromise = Promise.resolve();
+        return initPromise;
     },
 
     /**
@@ -343,20 +352,66 @@ module.exports = {
      */
     flush: function() {
         if (!store) {
-            return;
+            return Promise.resolve();
         }
         return store.flush();
     },
 
+    /**
+     * Clean up old logs.
+     * @return Promise Resolves if cleaned logs.
+     */
+    cleanup: function() {
+        if (!store) {
+            return Promise.resolve();
+        }
+        return store.consume(false);
+    },
+
     /**
      * Send a bug report.
      * @param {string} userText Any additional user input.
      * @return {Promise} Resolved when the bug report is sent.
      */
     sendBugReport: function(userText) {
-        return store.consume(false).then((logs) => {
-            // Send logs grouped by ID
-            console.log(logs);
+        if (!logger) {
+            return Promise.reject(new Error("No console logger, did you forget to call init()?"));
+        }
+        // If in incognito mode, store is null, but we still want bug report sending to work going off
+        // the in-memory console logs.
+        let promise = Promise.resolve([]);
+        if (store) {
+            promise = store.consume(false); //  TODO Swap to true to remove all logs
+        }
+        return promise.then((logs) => {
+            // and add the most recent console logs which won't be in the store yet.
+            const consoleLogs = logger.flush(); // remove logs from console
+            const currentId = store ? store.id : "-";
+            logs.unshift({
+                lines: consoleLogs,
+                id: currentId,
+            });
+            return new Promise((resolve, reject) => {
+                request({
+                    method: "POST",
+                    url: "http://localhost:1337",
+                    body: {
+                        logs: logs,
+                        text: userText || "User did not supply any additional text.",
+                    },
+                    json: true,
+                }, (err, res) => {
+                    if (err) {
+                        reject(err);
+                        return;
+                    }
+                    if (res.status < 200 || res.status >= 400) {
+                        reject(new Error(`HTTP ${res.status}`));
+                        return;
+                    }
+                    resolve();
+                })
+            });
         });
     }
 };

From 789c7b60cc238d4b264d444e8e911a60d82c7b50 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Thu, 19 Jan 2017 16:51:41 +0100
Subject: [PATCH 083/168] CSS for avatars that appear when users are typing

---
 .../structures/_RoomStatusBar.scss            | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 5daac88fc4..12cecffe79 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -40,12 +40,12 @@ limitations under the License.
     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) {
@@ -70,6 +70,29 @@ limitations under the License.
     }
 }
 
+.mx_RoomStatusBar_typingIndicatorAvatars {
+    width: 24px;
+    text-align: left;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
+    margin-right: -12px;
+}
+
+.mx_RoomStatusBar_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
 .mx_RoomStatusBar_scrollDownIndicator {
     cursor: pointer;
 }

From 537194608e34676450fa916a98d8a099a89af161 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 16:01:37 +0000
Subject: [PATCH 084/168] Make riot desktop single instance

So launching a new instance will focus the old one, meaning that
if you have Riot minimised to the tray and launch it via the
desktop shortcut / start menu, you don't end up with more & more
copies of the app.

This doesn't really prevent you from running multiple copies of
the app to fake multi account support since they share a data
directory anyway.
---
 electron/src/electron-main.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/electron/src/electron-main.js b/electron/src/electron-main.js
index 929b78923f..1a6ea692d0 100644
--- a/electron/src/electron-main.js
+++ b/electron/src/electron-main.js
@@ -159,6 +159,19 @@ electron.ipcMain.on('install_update', installUpdate);
 
 electron.app.commandLine.appendSwitch('--enable-usermedia-screen-capturing');
 
+const shouldQuit = electron.app.makeSingleInstance((commandLine, workingDirectory) => {
+    // Someone tried to run a second instance, we should focus our window.
+    if (mainWindow) {
+        if (!mainWindow.isVisible()) mainWindow.show();
+        if (mainWindow.isMinimized()) mainWindow.restore();
+        mainWindow.focus();
+    }
+});
+
+if (shouldQuit) {
+    electron.app.quit()
+}
+
 electron.app.on('ready', () => {
     if (vectorConfig.update_base_url) {
         console.log("Starting auto update with base URL: " + vectorConfig.update_base_url);

From f5d7f3ca9f77f491f93a5573e916463bfb2d5634 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 19 Jan 2017 16:21:43 +0000
Subject: [PATCH 085/168] Add StartupWMClass

so GNOME doesn't get confused by the hidden windows
---
 package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 84e0547890..b7b69d0c70 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,10 @@
     ],
     "linux": {
       "target": "deb",
-      "maintainer": "support@riot.im"
+      "maintainer": "support@riot.im",
+      "desktop": {
+          "StartupWMClass": "riot-web"
+      }
     },
     "win": {
       "target": "squirrel"

From bf887e82fec360a237bb1262ed4426311b5f7b18 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 16:40:54 +0000
Subject: [PATCH 086/168] Swap to async/await rather than promise chains

Since we do in fact support coroutines!
---
 src/vector/rageshake.js | 161 ++++++++++++++++------------------------
 1 file changed, 65 insertions(+), 96 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 1f3dbc7d4f..299a8497c7 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -166,7 +166,7 @@ class IndexedDBLogStore {
      * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a
      * big string with all the new-line delimited logs.
      */
-    consume(clearAll) {
+    async consume(clearAll) {
         const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
         const db = this.db;
 
@@ -223,65 +223,36 @@ class IndexedDBLogStore {
             });
         }
 
-        // Ideally we'd just use coroutines and a for loop but riot-web doesn't support async/await so instead
-        // recursively fetch logs up to the given threshold. We can't cheat and fetch all the logs
-        // from all time, but we may OOM if we do so.
-        // Returns: Promise<Object[]> : Each object having 'id' and 'lines'. Same ordering as logIds.
-        function fetchLogsToThreshold(logIds, threshold, logs) {
-            // Base case: check log size and return if bigger than threshold
-            let size = 0;
-            logs.forEach((l) => {
-                size += l.lines.length;
+        let allLogIds = await fetchLogIds();
+        let removeLogIds = [];
+        let logs = [];
+        let size = 0;
+        for (let i = 0; i < allLogIds.length; i++) {
+            let lines = await fetchLogs(allLogIds[i]);
+            logs.push({
+                lines: lines,
+                id: allLogIds[i],
             });
-            if (size > threshold) {
-                return Promise.resolve(logs);
+            size += lines.length;
+            if (size > MAX_LOG_SIZE) {
+                // the remaining log IDs should be removed. If we go out of bounds this is just []
+                removeLogIds = allLogIds.slice(i + 1);
+                break;
             }
-
-            // fetch logs for the first element
-            let logId = logIds.shift();
-            if (!logId) {
-                // no more entries
-                return Promise.resolve(logs);
-            }
-            return fetchLogs(logId).then((lines) => {
-                // add result to logs
-                logs.push({
-                    lines: lines,
-                    id: logId,
-                });
-                // recurse with the next log ID. TODO: Stack overflow risk?
-                return fetchLogsToThreshold(logIds, threshold, logs);
-            })
         }
-
-        let allLogIds = [];
-        return fetchLogIds().then((logIds) => {
-            allLogIds = logIds.map((id) => id); // deep copy array as we'll modify it when fetching logs
-            return fetchLogsToThreshold(logIds, MAX_LOG_SIZE, []);
-        }).then((logs) => {
-            // Remove all logs that are beyond the threshold (not in logs), or the entire logs if clearAll was set.
-            let removeLogIds = allLogIds;
-            if (!clearAll) {
-                removeLogIds = removeLogIds.filter((id) => {
-                    for (let i = 0; i < logs.length; i++) {
-                        if (logs[i].id === id) {
-                            return false; // do not remove logs that we're about to return to the caller.
-                        }
-                    }
-                    return true;
-                });
-            }
-            if (removeLogIds.length > 0) {
-                console.log("Removing logs: ", removeLogIds);
-                // Don't promise chain this because it's non-fatal if we can't clean up logs.
-                Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => {
-                    console.log(`Removed ${removeLogIds.length} old logs.`);
-                }, (err) => {
-                    console.error(err);
-                })
-            }
-            return logs;
-        });
+        if (clearAll) {
+            removeLogIds = allLogIds;
+        }
+        if (removeLogIds.length > 0) {
+            console.log("Removing logs: ", removeLogIds);
+            // Don't await this because it's non-fatal if we can't clean up logs.
+            Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => {
+                console.log(`Removed ${removeLogIds.length} old logs.`);
+            }, (err) => {
+                console.error(err);
+            })
+        }console.log("async consumeeeee");
+        return logs;
     }
 
     _generateLogEntry(lines) {
@@ -350,22 +321,22 @@ module.exports = {
      * Force-flush the logs to storage.
      * @return {Promise} Resolved when the logs have been flushed.
      */
-    flush: function() {
+    flush: async function() {
         if (!store) {
-            return Promise.resolve();
+            return;
         }
-        return store.flush();
+        await store.flush();
     },
 
     /**
      * Clean up old logs.
      * @return Promise Resolves if cleaned logs.
      */
-    cleanup: function() {
+    cleanup: async function() {
         if (!store) {
-            return Promise.resolve();
+            return;
         }
-        return store.consume(false);
+        await store.consume(false);
     },
 
     /**
@@ -373,45 +344,43 @@ module.exports = {
      * @param {string} userText Any additional user input.
      * @return {Promise} Resolved when the bug report is sent.
      */
-    sendBugReport: function(userText) {
+    sendBugReport: async function(userText) {
         if (!logger) {
-            return Promise.reject(new Error("No console logger, did you forget to call init()?"));
+            throw new Error("No console logger, did you forget to call init()?");
         }
         // If in incognito mode, store is null, but we still want bug report sending to work going off
         // the in-memory console logs.
-        let promise = Promise.resolve([]);
+        let logs = [];
         if (store) {
-            promise = store.consume(false); //  TODO Swap to true to remove all logs
+            logs = await store.consume(false);
         }
-        return promise.then((logs) => {
-            // and add the most recent console logs which won't be in the store yet.
-            const consoleLogs = logger.flush(); // remove logs from console
-            const currentId = store ? store.id : "-";
-            logs.unshift({
-                lines: consoleLogs,
-                id: currentId,
-            });
-            return new Promise((resolve, reject) => {
-                request({
-                    method: "POST",
-                    url: "http://localhost:1337",
-                    body: {
-                        logs: logs,
-                        text: userText || "User did not supply any additional text.",
-                    },
-                    json: true,
-                }, (err, res) => {
-                    if (err) {
-                        reject(err);
-                        return;
-                    }
-                    if (res.status < 200 || res.status >= 400) {
-                        reject(new Error(`HTTP ${res.status}`));
-                        return;
-                    }
-                    resolve();
-                })
-            });
+        // and add the most recent console logs which won't be in the store yet.
+        const consoleLogs = logger.flush(); // remove logs from console
+        const currentId = store ? store.id : "-";
+        logs.unshift({
+            lines: consoleLogs,
+            id: currentId,
+        });
+        await new Promise((resolve, reject) => {
+            request({
+                method: "POST",
+                url: "http://localhost:1337",
+                body: {
+                    logs: logs,
+                    text: userText || "User did not supply any additional text.",
+                },
+                json: true,
+            }, (err, res) => {
+                if (err) {
+                    reject(err);
+                    return;
+                }
+                if (res.status < 200 || res.status >= 400) {
+                    reject(new Error(`HTTP ${res.status}`));
+                    return;
+                }
+                resolve();
+            })
         });
     }
 };

From 3996d23b1996434723335ed0c3be423ba7298561 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 16:49:25 +0000
Subject: [PATCH 087/168] Inject bug report endpoint URL from config.json

---
 config.sample.json      |  1 +
 src/vector/index.js     |  1 +
 src/vector/rageshake.js | 12 ++++++++++--
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/config.sample.json b/config.sample.json
index e6384221c1..a65646ac77 100644
--- a/config.sample.json
+++ b/config.sample.json
@@ -4,6 +4,7 @@
     "brand": "Riot",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
+    "bug_report_endpoint_url": "https://vector.im/bugs",
     "enableLabs": true,
     "roomDirectory": {
         "servers": [
diff --git a/src/vector/index.js b/src/vector/index.js
index d1d457e984..d1d85e06c0 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -241,6 +241,7 @@ async function loadApp() {
     let configError;
     try {
         configJson = await getConfig();
+        rageshake.setBugReportEndpoint(configJson.bug_report_endpoint_url);
     } catch (e) {
         configError = e;
     }
diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 299a8497c7..3fb9efdce0 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -251,7 +251,7 @@ class IndexedDBLogStore {
             }, (err) => {
                 console.error(err);
             })
-        }console.log("async consumeeeee");
+        }
         return logs;
     }
 
@@ -296,6 +296,7 @@ function selectQuery(store, keyRange, resultMapper) {
 let store = null;
 let logger = null;
 let initPromise = null;
+let bugReportEndpoint = null;
 module.exports = {
 
     /**
@@ -339,6 +340,10 @@ module.exports = {
         await store.consume(false);
     },
 
+    setBugReportEndpoint: function(url) {
+        bugReportEndpoint = url;
+    },
+
     /**
      * Send a bug report.
      * @param {string} userText Any additional user input.
@@ -348,6 +353,9 @@ module.exports = {
         if (!logger) {
             throw new Error("No console logger, did you forget to call init()?");
         }
+        if (!bugReportEndpoint) {
+            throw new Error("No bug report endpoint has been set.");
+        }
         // If in incognito mode, store is null, but we still want bug report sending to work going off
         // the in-memory console logs.
         let logs = [];
@@ -364,7 +372,7 @@ module.exports = {
         await new Promise((resolve, reject) => {
             request({
                 method: "POST",
-                url: "http://localhost:1337",
+                url: bugReportEndpoint,
                 body: {
                     logs: logs,
                     text: userText || "User did not supply any additional text.",

From 36450764f3a341e3b07843af6e6975d494a9a374 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 16:58:55 +0000
Subject: [PATCH 088/168] rethemendex fixes

- set cwd before doing cwd-specific operations
- don't include 'themes' directory, otherwise it's a bit circular.
---
 src/skins/vector/css/_components.scss |  1 -
 src/skins/vector/css/rethemendex.sh   | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 884352366e..880c105401 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -49,7 +49,6 @@
 @import "./matrix-react-sdk/views/voip/_CallView.scss";
 @import "./matrix-react-sdk/views/voip/_IncomingCallbox.scss";
 @import "./matrix-react-sdk/views/voip/_VideoView.scss";
-@import "./themes/_base.scss";
 @import "./vector-web/_fonts.scss";
 @import "./vector-web/structures/_CompatibilityPage.scss";
 @import "./vector-web/structures/_LeftPanel.scss";
diff --git a/src/skins/vector/css/rethemendex.sh b/src/skins/vector/css/rethemendex.sh
index 9381c5cd2a..a7d9a657ac 100755
--- a/src/skins/vector/css/rethemendex.sh
+++ b/src/skins/vector/css/rethemendex.sh
@@ -1,8 +1,13 @@
 #!/bin/bash
 
-echo "// autogenerated by rethemendex.sh" > _components.scss
+cd `dirname $0`
 
-for i in `find . -iname _\*.scss | fgrep -v _components.scss | sort`;
-do
-    echo "@import \"$i\";" >> _components.scss
-done
+{
+    echo "// autogenerated by rethemendex.sh"
+
+    find . \! \( -path ./themes -prune \) -iname _\*.scss |
+        fgrep -v _components.scss | LC_ALL=C sort |
+        while read i; do
+            echo "@import \"$i\";"
+        done
+} > _components.scss

From beba4d2ae36c4499e99a27258fb58b9a8e6e12b7 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 17:40:21 +0000
Subject: [PATCH 089/168] Add version and user agent to bug report

---
 src/vector/rageshake.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 3fb9efdce0..e3cc6661dd 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
 import request from "browser-request";
 
 // This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows:
@@ -356,6 +357,18 @@ module.exports = {
         if (!bugReportEndpoint) {
             throw new Error("No bug report endpoint has been set.");
         }
+
+        let version = "UNKNOWN";
+        try {
+            version = await PlatformPeg.get().getAppVersion();
+        }
+        catch (err) {} // PlatformPeg already logs this.
+
+        let userAgent = "UNKNOWN";
+        if (window.navigator && window.navigator.userAgent) {
+            userAgent = window.navigator.userAgent;
+        }
+
         // If in incognito mode, store is null, but we still want bug report sending to work going off
         // the in-memory console logs.
         let logs = [];
@@ -376,6 +389,8 @@ module.exports = {
                 body: {
                     logs: logs,
                     text: userText || "User did not supply any additional text.",
+                    version: version,
+                    user_agent: userAgent,
                 },
                 json: true,
             }, (err, res) => {

From 53a16158c75ff0b938b2383ad91829c9d23c891a Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 19 Jan 2017 17:41:08 +0000
Subject: [PATCH 090/168] Remove logs when submitting bug reports

---
 src/vector/rageshake.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index e3cc6661dd..2b4d0b7dde 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -373,7 +373,7 @@ module.exports = {
         // the in-memory console logs.
         let logs = [];
         if (store) {
-            logs = await store.consume(false);
+            logs = await store.consume(true);
         }
         // and add the most recent console logs which won't be in the store yet.
         const consoleLogs = logger.flush(); // remove logs from console

From 8ad0ff24f8f5422a6c15f7744227a241d789aee8 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 19 Jan 2017 18:35:43 +0000
Subject: [PATCH 091/168] Fix link to image for event options menu

This has to be relative, because we don't know if riot is going to be mounted
at the top-level of the domain or not (it's not, on riot.im).

Links are relative to the final location of the CSS, which is under
bundles/<hash>, so need ../..
---
 src/skins/vector/css/themes/_base.scss | 2 +-
 src/skins/vector/css/themes/_dark.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index ad18eb49c2..476cf7e0bb 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -88,7 +88,7 @@ $event-notsent-color: #f44;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "/img/icon_context_message.svg";
+$edit-button-url: "../../img/icon_context_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index e3e32e8442..0f3b77f52e 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -88,7 +88,7 @@ $event-notsent-color: #f44;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "/img/icon_context_message_dark.svg";
+$edit-button-url: "../../img/icon_context_message_dark.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

From fa535996ae6c979522252f2540c656f09576ebc9 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 02:22:11 +0000
Subject: [PATCH 092/168] fix textarea bg

---
 src/skins/vector/css/_common.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/_common.scss b/src/skins/vector/css/_common.scss
index 94362a2fa4..bf31bea6cb 100644
--- a/src/skins/vector/css/_common.scss
+++ b/src/skins/vector/css/_common.scss
@@ -55,7 +55,7 @@ a:visited {
     color: $accent-color;
 }
 
-input[type=text], input[type=password] {
+input[type=text], input[type=password], textarea {
     background-color: transparent;
     color: $primary-fg-color;
 }

From 4d8f5d4df1c3bb0ef27b53842f3ed1755e9039d8 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 02:29:56 +0000
Subject: [PATCH 093/168] change selection color & fix MD bg

---
 .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss   | 4 ++++
 src/skins/vector/css/themes/_dark.scss                        | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index b79db91911..29170a8305 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -294,6 +294,10 @@ limitations under the License.
     overflow-y: visible;
 }
 
+.mx_EventTile_content .markdown-body code {
+    background-color: #f8f8f8;
+}
+
 .mx_EventTile_content .markdown-body h1,
 .mx_EventTile_content .markdown-body h2,
 .mx_EventTile_content .markdown-body h3,
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 0f3b77f52e..03913ca2b0 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -73,7 +73,7 @@ $voip-accept-color: #80f480;
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
-$roomtile-selected-bg-color: rgba(0, 0, 0, 0.8);
+$roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
 
 $roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;

From 9b70e2e25f3442374a1fbaeaedf25b29b2ce0539 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 02:34:45 +0000
Subject: [PATCH 094/168] fix RTE bg color

---
 .../vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 9265d4dc12..062dd0bade 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -4,7 +4,7 @@
     z-index: 1000;
     width: 100%;
     border: 1px solid $primary-hairline-color;
-    background: white;
+    background: $primary-bg-color;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;

From ea860807c4fef075767e06aa19c33fd97f702846 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Jan 2017 11:56:11 +0000
Subject: [PATCH 095/168] Add a monkeyPatch function rather than
 monkey-patching in the constructor

---
 src/vector/rageshake.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 2b4d0b7dde..e12ee32904 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -36,7 +36,9 @@ const FLUSH_RATE_MS = 30 * 1000;
 class ConsoleLogger {
     constructor() {
         this.logs = "";
+    }
 
+    monkeyPatch(consoleObj) {
         // Monkey-patch console logging
         const consoleFunctionsToLevels = {
             log: "I",
@@ -46,8 +48,8 @@ class ConsoleLogger {
         };
         Object.keys(consoleFunctionsToLevels).forEach((fnName) => {
             const level = consoleFunctionsToLevels[fnName];
-            let originalFn = window.console[fnName].bind(window.console);
-            window.console[fnName] = (...args) => {
+            let originalFn = consoleObj[fnName].bind(consoleObj);
+            consoleObj[fnName] = (...args) => {
                 this.log(level, ...args);
                 originalFn(...args);
             }
@@ -310,6 +312,7 @@ module.exports = {
             return initPromise;
         }
         logger = new ConsoleLogger();
+        logger.monkeyPatch(window.console);
         if (window.indexedDB) {
             store = new IndexedDBLogStore(window.indexedDB, logger);
             initPromise = store.connect();

From ba1e166ac83ae0f6477d617705a3f333f8d4f74e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Jan 2017 12:02:48 +0000
Subject: [PATCH 096/168] Line length 80 like we're still in the 80s

---
 src/vector/rageshake.js | 133 ++++++++++++++++++++++++++--------------
 1 file changed, 87 insertions(+), 46 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index e12ee32904..a3d39635f5 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -17,18 +17,26 @@ limitations under the License.
 import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
 import request from "browser-request";
 
-// This module contains all the code needed to log the console, persist it to disk and submit bug reports. Rationale is as follows:
-//  - Monkey-patching the console is preferable to having a log library because we can catch logs by other libraries more easily,
-//    without having to all depend on the same log framework / pass the logger around.
-//  - We use IndexedDB to persists logs because it has generous disk space limits compared to local storage. IndexedDB does not work
-//    in incognito mode, in which case this module will not be able to write logs to disk. However, the logs will still be stored
-//    in-memory, so can still be submitted in a bug report should the user wish to: we can also store more logs in-memory than in
-//    local storage, which does work in incognito mode. We also need to handle the case where there are 2+ tabs. Each JS runtime
-//    generates a random string which serves as the "ID" for that tab/session. These IDs are stored along with the log lines.
-//  - Bug reports are sent as a POST over HTTPS: it purposefully does not use Matrix as bug reports may be made when Matrix is
-//    not responsive (which may be the cause of the bug). We send the most recent N MB of UTF-8 log data, starting with the most
-//    recent, which we know because the "ID"s are actually timestamps. We then purge the remaining logs. We also do this purge
-//    on startup to prevent logs from accumulating.
+// This module contains all the code needed to log the console, persist it to
+// disk and submit bug reports. Rationale is as follows:
+//  - Monkey-patching the console is preferable to having a log library because
+//    we can catch logs by other libraries more easily, without having to all
+//    depend on the same log framework / pass the logger around.
+//  - We use IndexedDB to persists logs because it has generous disk space
+//    limits compared to local storage. IndexedDB does not work in incognito
+//    mode, in which case this module will not be able to write logs to disk.
+//    However, the logs will still be stored in-memory, so can still be
+//    submitted in a bug report should the user wish to: we can also store more
+//    logs in-memory than in local storage, which does work in incognito mode.
+//    We also need to handle the case where there are 2+ tabs. Each JS runtime
+//    generates a random string which serves as the "ID" for that tab/session.
+//    These IDs are stored along with the log lines.
+//  - Bug reports are sent as a POST over HTTPS: it purposefully does not use
+//    Matrix as bug reports may be made when Matrix is not responsive (which may
+//    be the cause of the bug). We send the most recent N MB of UTF-8 log data,
+//    starting with the most recent, which we know because the "ID"s are
+//    actually timestamps. We then purge the remaining logs. We also do this
+//    purge on startup to prevent logs from accumulating.
 
 const FLUSH_RATE_MS = 30 * 1000;
 
@@ -60,9 +68,10 @@ class ConsoleLogger {
         // We don't know what locale the user may be running so use ISO strings
         const ts = new Date().toISOString();
         // Some browsers support string formatting which we're not doing here
-        // so the lines are a little more ugly but easy to implement / quick to run.
+        // so the lines are a little more ugly but easy to implement / quick to
+        // run.
         // Example line:
-        // 2017-01-18T11:23:53.214Z W Failed to set badge count: Error setting badge. Message: Too many badges requests in queue.
+        // 2017-01-18T11:23:53.214Z W Failed to set badge count
         const line = `${ts} ${level} ${args.join(' ')}\n`;
         // Using + really is the quickest way in JS
         // http://jsperf.com/concat-vs-plus-vs-join
@@ -74,7 +83,8 @@ class ConsoleLogger {
      * @return {string} \n delimited log lines to flush.
      */
     flush() {
-        // The ConsoleLogger doesn't care how these end up on disk, it just flushes them to the caller.
+        // The ConsoleLogger doesn't care how these end up on disk, it just
+        // flushes them to the caller.
         const logsToFlush = this.logs;
         this.logs = "";
         return logsToFlush;
@@ -105,7 +115,9 @@ class IndexedDBLogStore {
             };
 
             req.onerror = (event) => {
-                const err = "Failed to open log database: " + event.target.errorCode;
+                const err = (
+                    "Failed to open log database: " + event.target.errorCode
+                );
                 console.error(err);
                 reject(new Error(err));
             };
@@ -117,8 +129,10 @@ class IndexedDBLogStore {
                     keyPath: ["id", "index"]
                 });
                 // Keys in the database look like: [ "instance-148938490", 0 ]
-                // Later on we need to query for everything with index=0, and query everything for an instance id.
-                // In order to do this, we need to set up indexes on both "id" and "index".
+                // Later on we need to query for everything with index=0, and
+                // query everything for an instance id.
+                // In order to do this, we need to set up indexes on both "id"
+                // and "index".
                 objectStore.createIndex("index", "index", { unique: false });
                 objectStore.createIndex("id", "id", { unique: false });
 
@@ -151,23 +165,30 @@ class IndexedDBLogStore {
                 resolve();
             };
             txn.onerror = (event) => {
-                console.error("Failed to flush logs : " + event.target.errorCode);
-                reject(new Error("Failed to write logs: " + event.target.errorCode));
+                console.error(
+                    "Failed to flush logs : " + event.target.errorCode
+                );
+                reject(
+                    new Error("Failed to write logs: " + event.target.errorCode)
+                );
             }
         });
     }
 
     /**
-     * Consume the most recent logs and return them. Older logs which are not returned are deleted at the same time,
-     * so this can be called at startup to do house-keeping to keep the logs from growing too large.
+     * Consume the most recent logs and return them. Older logs which are not
+     * returned are deleted at the same time, so this can be called at startup
+     * to do house-keeping to keep the logs from growing too large.
      *
-     * @param {boolean} clearAll True to clear the most recent logs returned in addition to the
-     * older logs. This is desirable when sending bug reports as we do not want to submit the
-     * same logs twice. This is not desirable when doing house-keeping at startup in case they
-     * want to submit a bug report later.
-     * @return {Promise<Object[]>} Resolves to an array of objects. The array is sorted in time (oldest first) based on
-     * when the log file was created (the log ID). The objects have said log ID in an "id" field and "lines" which is a
-     * big string with all the new-line delimited logs.
+     * @param {boolean} clearAll True to clear the most recent logs returned in
+     * addition to the older logs. This is desirable when sending bug reports as
+     * we do not want to submit the same logs twice. This is not desirable when
+     * doing house-keeping at startup in case they want to submit a bug report
+     * later.
+     * @return {Promise<Object[]>} Resolves to an array of objects. The array is
+     * sorted in time (oldest first) based on when the log file was created (the
+     * log ID). The objects have said log ID in an "id" field and "lines" which
+     * is a big string with all the new-line delimited logs.
      */
     async consume(clearAll) {
         const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
@@ -176,13 +197,15 @@ class IndexedDBLogStore {
         // Returns: a string representing the concatenated logs for this ID.
         function fetchLogs(id) {
             const o = db.transaction("logs", "readonly").objectStore("logs");
-            return selectQuery(o.index("id"), IDBKeyRange.only(id), (cursor) => {
+            return selectQuery(o.index("id"), IDBKeyRange.only(id),
+            (cursor) => {
                 return {
                     lines: cursor.value.lines,
                     index: cursor.value.index,
                 }
             }).then((linesArray) => {
-                // We have been storing logs periodically, so string them all together *in order of index* now
+                // We have been storing logs periodically, so string them all
+                // together *in order of index* now
                 linesArray.sort((a, b) => {
                     return a.index - b.index;
                 })
@@ -192,13 +215,18 @@ class IndexedDBLogStore {
 
         // Returns: A sorted array of log IDs. (newest first)
         function fetchLogIds() {
-            // To gather all the log IDs, query for every log entry with index "0", this will let us
-            // know all the IDs from different tabs/sessions.
+            // To gather all the log IDs, query for every log entry with index
+            // "0", this will let us know all the IDs from different
+            // tabs/sessions.
             const o = db.transaction("logs", "readonly").objectStore("logs");
-            return selectQuery(o.index("index"), IDBKeyRange.only(0), (cursor) => cursor.value.id).then((res) => {
-                // we know each entry has a unique ID, and we know IDs are timestamps, so accumulate all the IDs,
-                // ignoring the logs for now, and sort them to work out the correct log ID ordering, newest first.
-                // E.g. [ "instance-1484827160051", "instance-1374827160051", "instance-1000007160051"]
+            return selectQuery(o.index("index"), IDBKeyRange.only(0),
+            (cursor) => cursor.value.id).then((res) => {
+                // we know each entry has a unique ID, and we know IDs are
+                // timestamps, so accumulate all the IDs, ignoring the logs for
+                // now, and sort them to work out the correct log ID ordering,
+                // newest first.
+                // E.g. [ "instance-1484827160051", "instance-1374827160051",
+                //        "instance-1000007160051"]
                 return res.sort().reverse();
             });
         }
@@ -221,7 +249,12 @@ class IndexedDBLogStore {
                     resolve();
                 };
                 txn.onerror = (event) => {
-                    reject(new Error(`Failed to delete logs for '${id}' : ${event.target.errorCode}`));
+                    reject(
+                        new Error(
+                            "Failed to delete logs for " +
+                            `'${id}' : ${event.target.errorCode}`
+                        )
+                    );
                 }
             });
         }
@@ -238,7 +271,8 @@ class IndexedDBLogStore {
             });
             size += lines.length;
             if (size > MAX_LOG_SIZE) {
-                // the remaining log IDs should be removed. If we go out of bounds this is just []
+                // the remaining log IDs should be removed. If we go out of
+                // bounds this is just []
                 removeLogIds = allLogIds.slice(i + 1);
                 break;
             }
@@ -248,7 +282,8 @@ class IndexedDBLogStore {
         }
         if (removeLogIds.length > 0) {
             console.log("Removing logs: ", removeLogIds);
-            // Don't await this because it's non-fatal if we can't clean up logs.
+            // Don't await this because it's non-fatal if we can't clean up
+            // logs.
             Promise.all(removeLogIds.map((id) => deleteLogs(id))).then(() => {
                 console.log(`Removed ${removeLogIds.length} old logs.`);
             }, (err) => {
@@ -271,9 +306,11 @@ class IndexedDBLogStore {
  * Helper method to collect results from a Cursor and promiseify it.
  * @param {ObjectStore|Index} store The store to perform openCursor on.
  * @param {IDBKeyRange=} keyRange Optional key range to apply on the cursor.
- * @param {Function} resultMapper A function which is repeatedly called with a Cursor.
+ * @param {Function} resultMapper A function which is repeatedly called with a
+ * Cursor.
  * Return the data you want to keep.
- * @return {Promise<T[]>} Resolves to an array of whatever you returned from resultMapper.
+ * @return {Promise<T[]>} Resolves to an array of whatever you returned from
+ * resultMapper.
  */
 function selectQuery(store, keyRange, resultMapper) {
     const query = store.openCursor(keyRange);
@@ -355,7 +392,9 @@ module.exports = {
      */
     sendBugReport: async function(userText) {
         if (!logger) {
-            throw new Error("No console logger, did you forget to call init()?");
+            throw new Error(
+                "No console logger, did you forget to call init()?"
+            );
         }
         if (!bugReportEndpoint) {
             throw new Error("No bug report endpoint has been set.");
@@ -372,8 +411,8 @@ module.exports = {
             userAgent = window.navigator.userAgent;
         }
 
-        // If in incognito mode, store is null, but we still want bug report sending to work going off
-        // the in-memory console logs.
+        // If in incognito mode, store is null, but we still want bug report
+        // sending to work going off the in-memory console logs.
         let logs = [];
         if (store) {
             logs = await store.consume(true);
@@ -391,7 +430,9 @@ module.exports = {
                 url: bugReportEndpoint,
                 body: {
                     logs: logs,
-                    text: userText || "User did not supply any additional text.",
+                    text: (
+                        userText || "User did not supply any additional text."
+                    ),
                     version: version,
                     user_agent: userAgent,
                 },

From 41c6294be2e3a6b23fad65771173819c74e35f6e Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Jan 2017 13:02:57 +0000
Subject: [PATCH 097/168] Remove clearAll from consume(): we want duplicate
 logs on multiple reports

---
 src/vector/rageshake.js | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index a3d39635f5..a96b1f2893 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -180,17 +180,12 @@ class IndexedDBLogStore {
      * returned are deleted at the same time, so this can be called at startup
      * to do house-keeping to keep the logs from growing too large.
      *
-     * @param {boolean} clearAll True to clear the most recent logs returned in
-     * addition to the older logs. This is desirable when sending bug reports as
-     * we do not want to submit the same logs twice. This is not desirable when
-     * doing house-keeping at startup in case they want to submit a bug report
-     * later.
      * @return {Promise<Object[]>} Resolves to an array of objects. The array is
      * sorted in time (oldest first) based on when the log file was created (the
      * log ID). The objects have said log ID in an "id" field and "lines" which
      * is a big string with all the new-line delimited logs.
      */
-    async consume(clearAll) {
+    async consume() {
         const MAX_LOG_SIZE = 1024 * 1024 * 50; // 50 MB
         const db = this.db;
 
@@ -277,9 +272,6 @@ class IndexedDBLogStore {
                 break;
             }
         }
-        if (clearAll) {
-            removeLogIds = allLogIds;
-        }
         if (removeLogIds.length > 0) {
             console.log("Removing logs: ", removeLogIds);
             // Don't await this because it's non-fatal if we can't clean up
@@ -378,7 +370,7 @@ module.exports = {
         if (!store) {
             return;
         }
-        await store.consume(false);
+        await store.consume();
     },
 
     setBugReportEndpoint: function(url) {
@@ -415,7 +407,7 @@ module.exports = {
         // sending to work going off the in-memory console logs.
         let logs = [];
         if (store) {
-            logs = await store.consume(true);
+            logs = await store.consume();
         }
         // and add the most recent console logs which won't be in the store yet.
         const consoleLogs = logger.flush(); // remove logs from console

From 378126e746bd78088996a82024ea5c4204955b7c Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Jan 2017 14:00:30 +0000
Subject: [PATCH 098/168] Add another store to keep last modified times

This makes it easier to get a list of all the log IDs. It also makes it possible
to order the logs by the *LAST* log line and not the first as was the case
previously, which is important in the case of long-running tabs.
---
 src/vector/rageshake.js | 69 +++++++++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index a96b1f2893..f4fe4396de 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -96,7 +96,7 @@ class IndexedDBLogStore {
     constructor(indexedDB, logger) {
         this.indexedDB = indexedDB;
         this.logger = logger;
-        this.id = "instance-" + Date.now();
+        this.id = "instance-" + Math.random() + Date.now();
         this.index = 0;
         this.db = null;
     }
@@ -125,22 +125,24 @@ class IndexedDBLogStore {
             // First time: Setup the object store
             req.onupgradeneeded = (event) => {
                 const db = event.target.result;
-                const objectStore = db.createObjectStore("logs", {
+                const logObjStore = db.createObjectStore("logs", {
                     keyPath: ["id", "index"]
                 });
                 // Keys in the database look like: [ "instance-148938490", 0 ]
-                // Later on we need to query for everything with index=0, and
-                // query everything for an instance id.
-                // In order to do this, we need to set up indexes on both "id"
-                // and "index".
-                objectStore.createIndex("index", "index", { unique: false });
-                objectStore.createIndex("id", "id", { unique: false });
+                // Later on we need to query everything based on an instance id.
+                // In order to do this, we need to set up indexes "id".
+                logObjStore.createIndex("id", "id", { unique: false });
 
-                objectStore.add(
+                logObjStore.add(
                     this._generateLogEntry(
                         new Date() + " ::: Log database was created."
                     )
                 );
+
+                const lastModifiedStore = db.createObjectStore("logslastmod", {
+                    keyPath: "id",
+                });
+                lastModifiedStore.add(this._generateLastModifiedTime());
             }
         });
     }
@@ -158,15 +160,17 @@ class IndexedDBLogStore {
             return Promise.resolve();
         }
         return new Promise((resolve, reject) => {
-            let txn = this.db.transaction("logs", "readwrite");
+            let txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
             let objStore = txn.objectStore("logs");
             objStore.add(this._generateLogEntry(lines));
+            let lastModStore = txn.objectStore("logslastmod");
+            lastModStore.put(this._generateLastModifiedTime());
             txn.oncomplete = (event) => {
                 resolve();
             };
             txn.onerror = (event) => {
                 console.error(
-                    "Failed to flush logs : " + event.target.errorCode
+                    "Failed to flush logs : ", event
                 );
                 reject(
                     new Error("Failed to write logs: " + event.target.errorCode)
@@ -210,25 +214,28 @@ class IndexedDBLogStore {
 
         // Returns: A sorted array of log IDs. (newest first)
         function fetchLogIds() {
-            // To gather all the log IDs, query for every log entry with index
-            // "0", this will let us know all the IDs from different
-            // tabs/sessions.
-            const o = db.transaction("logs", "readonly").objectStore("logs");
-            return selectQuery(o.index("index"), IDBKeyRange.only(0),
-            (cursor) => cursor.value.id).then((res) => {
-                // we know each entry has a unique ID, and we know IDs are
-                // timestamps, so accumulate all the IDs, ignoring the logs for
-                // now, and sort them to work out the correct log ID ordering,
-                // newest first.
-                // E.g. [ "instance-1484827160051", "instance-1374827160051",
-                //        "instance-1000007160051"]
-                return res.sort().reverse();
+            // To gather all the log IDs, query for all records in logslastmod.
+            const o = db.transaction("logslastmod", "readonly").objectStore(
+                "logslastmod"
+            );
+            return selectQuery(o, undefined, (cursor) => {
+                return {
+                    id: cursor.value.id,
+                    ts: cursor.value.ts,
+                };
+            }).then((res) => {
+                // Sort IDs by timestamp (newest first)
+                return res.sort((a, b) => {
+                    return b.ts - a.ts;
+                }).map((a) => a.id);
             });
         }
 
         function deleteLogs(id) {
             return new Promise((resolve, reject) => {
-                const txn = db.transaction("logs", "readwrite");
+                const txn = db.transaction(
+                    ["logs", "logslastmod"], "readwrite"
+                );
                 const o = txn.objectStore("logs");
                 // only load the key path, not the data which may be huge
                 const query = o.index("id").openKeyCursor(IDBKeyRange.only(id));
@@ -250,7 +257,10 @@ class IndexedDBLogStore {
                             `'${id}' : ${event.target.errorCode}`
                         )
                     );
-                }
+                };
+                // delete last modified entries
+                const lastModStore = txn.objectStore("logslastmod");
+                lastModStore.delete(id);
             });
         }
 
@@ -292,6 +302,13 @@ class IndexedDBLogStore {
             index: this.index++
         };
     }
+
+    _generateLastModifiedTime() {
+        return {
+            id: this.id,
+            ts: Date.now(),
+        };
+    }
 }
 
 /**

From ea063ab8b0b2ce6b2f1a5d36132757e0cb52f8ff Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Fri, 20 Jan 2017 14:46:19 +0000
Subject: [PATCH 099/168] Address race conditions when flushing logs

---
 src/vector/rageshake.js | 94 +++++++++++++++++++++++++++++------------
 1 file changed, 68 insertions(+), 26 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index f4fe4396de..7d1a93efc7 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -99,6 +99,11 @@ class IndexedDBLogStore {
         this.id = "instance-" + Math.random() + Date.now();
         this.index = 0;
         this.db = null;
+        // Promise is not null when a flush is IN PROGRESS
+        this.flushPromise = null;
+        // Promise is not null when flush() is called when one is already in
+        // progress.
+        this.flushAgainPromise = null;
     }
 
     /**
@@ -148,35 +153,80 @@ class IndexedDBLogStore {
     }
 
     /**
+     * Flush logs to disk.
+     *
+     * There are guards to protect against race conditions in order to ensure
+     * that all previous flushes have completed before the most recent flush.
+     * Consider without guards:
+     *  - A calls flush() periodically.
+     *  - B calls flush() and wants to send logs immediately afterwards.
+     *  - If B doesn't wait for A's flush to complete, B will be missing the
+     *    contents of A's flush.
+     * To protect against this, we set 'flushPromise' when a flush is ongoing.
+     * Subsequent calls to flush() during this period return a new promise
+     * 'flushAgainPromise' which is chained off the current 'flushPromise'.
+     * Subsequent calls to flush() when the first flush hasn't completed will
+     * return the same 'flushAgainPromise' as we can guarantee that we WILL
+     * do a brand new flush at some point in the future. Once the first flush
+     * has completed, 'flushAgainPromise' becomes 'flushPromise' and can be
+     * chained again.
+     *
+     * This guarantees that we will always eventually do a flush when flush() is
+     * called.
+     *
      * @return {Promise} Resolved when the logs have been flushed.
      */
     flush() {
-        if (!this.db) {
-            // not connected yet or user rejected access for us to r/w to the db
-            return Promise.reject(new Error("No connected database"));
+        if (this.flushPromise) { // a flush is ongoing
+            if (this.flushAgainPromise) { // a flush is queued up, return that.
+                return this.flushAgainPromise;
+            }
+            // queue up a new flush
+            this.flushAgainPromise = this.flushPromise.then(() => {
+                // the current flush has completed, so shuffle the promises
+                // around:
+                // flushAgainPromise => flushPromise and null flushAgainPromise.
+                // flushPromise has already nulled itself.
+                this.flushAgainPromise = null;
+                return this.flush();
+            });
+            return this.flushAgainPromise;
         }
-        const lines = this.logger.flush();
-        if (lines.length === 0) {
-            return Promise.resolve();
-        }
-        return new Promise((resolve, reject) => {
+
+        this.flushPromise = new Promise((resolve, reject) => {
+            if (!this.db) {
+                // not connected yet or user rejected access for us to r/w to
+                // the db.
+                this.flushPromise = null;
+                reject(new Error("No connected database"));
+                return;
+            }
+            const lines = this.logger.flush();
+            if (lines.length === 0) {
+                this.flushPromise = null;
+                resolve();
+                return;
+            }
             let txn = this.db.transaction(["logs", "logslastmod"], "readwrite");
             let objStore = txn.objectStore("logs");
             objStore.add(this._generateLogEntry(lines));
             let lastModStore = txn.objectStore("logslastmod");
             lastModStore.put(this._generateLastModifiedTime());
             txn.oncomplete = (event) => {
+                this.flushPromise = null;
                 resolve();
             };
             txn.onerror = (event) => {
                 console.error(
                     "Failed to flush logs : ", event
                 );
+                this.flushPromise = null;
                 reject(
                     new Error("Failed to write logs: " + event.target.errorCode)
                 );
             }
         });
+        return this.flushPromise;
     }
 
     /**
@@ -368,17 +418,6 @@ module.exports = {
         return initPromise;
     },
 
-    /**
-     * Force-flush the logs to storage.
-     * @return {Promise} Resolved when the logs have been flushed.
-     */
-    flush: async function() {
-        if (!store) {
-            return;
-        }
-        await store.flush();
-    },
-
     /**
      * Clean up old logs.
      * @return Promise Resolves if cleaned logs.
@@ -422,17 +461,20 @@ module.exports = {
 
         // If in incognito mode, store is null, but we still want bug report
         // sending to work going off the in-memory console logs.
+        console.log("Sending bug report.");
         let logs = [];
         if (store) {
+            // flush most recent logs
+            await store.flush();
             logs = await store.consume();
         }
-        // and add the most recent console logs which won't be in the store yet.
-        const consoleLogs = logger.flush(); // remove logs from console
-        const currentId = store ? store.id : "-";
-        logs.unshift({
-            lines: consoleLogs,
-            id: currentId,
-        });
+        else {
+            logs.push({
+                lines: logger.flush(),
+                id: "-",
+            });
+        }
+
         await new Promise((resolve, reject) => {
             request({
                 method: "POST",

From 956deca844505c75f03a1406a5ffd4532804cbde Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 16:59:41 +0100
Subject: [PATCH 100/168] Add bg-color border to typing avatars

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 12cecffe79..b7bdeaa052 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -71,18 +71,20 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_typingIndicatorAvatars {
-    width: 24px;
+    width: 52px;
     text-align: left;
 }
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
     margin-right: -12px;
+    border:1px solid $primary-bg-color;
 }
 
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
+    border:1px solid $primary-bg-color;
     border-radius: 40px;
     width: 24px;
     height: 24px;

From 9ffedf5e7d8b0962c1b39038ecc8e59b5fc1459c Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 17:00:59 +0100
Subject: [PATCH 101/168] space after colons

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index b7bdeaa052..44e9d983c3 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -77,14 +77,14 @@ limitations under the License.
 
 .mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
     margin-right: -12px;
-    border:1px solid $primary-bg-color;
+    border: 1px solid $primary-bg-color;
 }
 
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;
     background-color: #ddd;
-    border:1px solid $primary-bg-color;
+    border: 1px solid $primary-bg-color;
     border-radius: 40px;
     width: 24px;
     height: 24px;

From afcf9de8d47f463b83e9b40dcfb37c6f5de47215 Mon Sep 17 00:00:00 2001
From: lukebarnard <luke.barnard99@gmail.com>
Date: Fri, 20 Jan 2017 17:35:01 +0100
Subject: [PATCH 102/168] Handle avatars with initials

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss    | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index 44e9d983c3..d3f1439d14 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -75,11 +75,16 @@ limitations under the License.
     text-align: left;
 }
 
-.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar {
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
     margin-right: -12px;
     border: 1px solid $primary-bg-color;
 }
 
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+    padding-left: 1px;
+    padding-top: 1px;
+}
+
 .mx_RoomStatusBar_typingIndicatorRemaining {
     display: inline-block;
     color: #acacac;

From a9c575b4d095872687969707878f215e23a7a261 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 21:00:33 +0000
Subject: [PATCH 103/168] fix a bunch of dark-theme buttons

---
 src/skins/vector/css/themes/_dark.scss | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 03913ca2b0..776da28249 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -101,4 +101,15 @@ $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
 
 // unused?
-$progressbar-color: #000;
\ No newline at end of file
+$progressbar-color: #000;
+
+// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
+// better match the theme.  Typically applied to dark grey 'off' buttons or
+// light grey 'on' buttons.
+.mx_filterFlipColor {
+    filter: invert();
+}
+
+.gm-scrollbar .thumb {
+    filter: invert();
+}
\ No newline at end of file

From 5b1fea46cb6a0c9ec45e01a41c7222069a390507 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 21:09:49 +0000
Subject: [PATCH 104/168] fix badge color

---
 .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index 286a709d93..84f8ddded3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -171,7 +171,7 @@ limitations under the License.
 
 .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);
+    background-color: $preview-widget-bar-color;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {

From 83272f5cc58fa4a3efc5a8423642d1f4cb6886a1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 21:11:28 +0000
Subject: [PATCH 105/168] fix badge color again

---
 .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss      | 2 +-
 src/skins/vector/css/themes/_base.scss                          | 2 ++
 src/skins/vector/css/themes/_dark.scss                          | 2 ++
 3 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index 84f8ddded3..5ca4ac1788 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -171,7 +171,7 @@ limitations under the License.
 
 .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
 .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
-    background-color: $preview-widget-bar-color;
+    background-color: $neutral-badge-color;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index 476cf7e0bb..db921034de 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -59,6 +59,8 @@ $lightbox-background-bg-color: #000;
 
 $greyed-fg-color: #888;
 
+$neutral-badge-color: #dbdbdb;
+
 $preview-widget-bar-color: #ddd;
 $preview-widget-fg-color: $greyed-fg-color;
 
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 776da28249..4902724f2d 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -59,6 +59,8 @@ $lightbox-background-bg-color: #000;
 
 $greyed-fg-color: #888;
 
+$neutral-badge-color: #888;
+
 $preview-widget-bar-color: $menu-bg-color;
 $preview-widget-fg-color: $greyed-fg-color;
 

From ef519231d63f1aa765e0f1cd9ea78bb4591253b0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 20 Jan 2017 21:16:58 +0000
Subject: [PATCH 106/168] fix mute button colors

---
 .../views/context_menus/NotificationStateContextMenu.js   | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/views/context_menus/NotificationStateContextMenu.js b/src/components/views/context_menus/NotificationStateContextMenu.js
index 243275db27..d4b40d1732 100644
--- a/src/components/views/context_menus/NotificationStateContextMenu.js
+++ b/src/components/views/context_menus/NotificationStateContextMenu.js
@@ -120,22 +120,22 @@ module.exports = React.createClass({
                 </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" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" 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" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" 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" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" 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" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
                     Mute
                 </div>
             </div>

From d907421ad46b64144a8690996ad51ffc716c4e8a Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 22 Jan 2017 01:25:32 +0100
Subject: [PATCH 107/168] crappy CSS for UnknownDeviceDialog

---
 src/skins/vector/css/_components.scss         |  1 +
 .../views/dialogs/_UnknownDeviceDialog.scss   | 46 +++++++++++++++++++
 src/skins/vector/css/themes/_dark.scss        |  2 +-
 3 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 880c105401..51dd0ada77 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -15,6 +15,7 @@
 @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
+@import "./matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss";
 @import "./matrix-react-sdk/views/elements/_AddressSelector.scss";
 @import "./matrix-react-sdk/views/elements/_AddressTile.scss";
 @import "./matrix-react-sdk/views/elements/_DirectorySearchBox.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
new file mode 100644
index 0000000000..3a9b64d159
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
@@ -0,0 +1,46 @@
+/*
+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_UnknownDeviceDialog .mx_MemberDeviceInfo {
+    float: right;
+    clear: both;
+    padding: 0px;
+    padding-top: 8px;
+}
+
+.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
+    border: 0px;
+    height: 24px;
+    border-radius: 40px;
+    border: solid 1px $accent-color;
+    font-weight: 600;
+    font-size: 13px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    width: 70px;
+    outline: none;
+    cursor: pointer;
+    color: $accent-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
+    height: 40px;
+    border-bottom: 1px solid $primary-hairline-color;
+}
\ No newline at end of file
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 4902724f2d..51930433ea 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -114,4 +114,4 @@ $progressbar-color: #000;
 
 .gm-scrollbar .thumb {
     filter: invert();
-}
\ No newline at end of file
+}

From 2ecf65f05702075175b211161f05b5e2c57d9182 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 23 Jan 2017 09:28:48 +0000
Subject: [PATCH 108/168] Keep the logs if no store exists

---
 src/vector/rageshake.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 7d1a93efc7..3cc1588640 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -80,11 +80,15 @@ class ConsoleLogger {
 
     /**
      * Retrieve log lines to flush to disk.
+     * @param {boolean} keepLogs True to not delete logs after flushing.
      * @return {string} \n delimited log lines to flush.
      */
-    flush() {
+    flush(keepLogs) {
         // The ConsoleLogger doesn't care how these end up on disk, it just
         // flushes them to the caller.
+        if (keepLogs) {
+            return this.logs;
+        }
         const logsToFlush = this.logs;
         this.logs = "";
         return logsToFlush;
@@ -470,7 +474,7 @@ module.exports = {
         }
         else {
             logs.push({
-                lines: logger.flush(),
+                lines: logger.flush(true),
                 id: "-",
             });
         }

From 57126efe86db96396d921651e4d66aea4e3f4c76 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 23 Jan 2017 10:24:23 +0000
Subject: [PATCH 109/168] Reposition typing avatars relative to "is typing"

---
 .../css/matrix-react-sdk/structures/_RoomStatusBar.scss       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
index d3f1439d14..d124f9c67f 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss
@@ -21,10 +21,10 @@ limitations under the License.
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
 .mx_RoomStatusBar_indicator {
-    padding-left: 18px;
+    padding-left: 17px;
     padding-right: 12px;
     margin-left: -73px;
-    margin-top: 13px;
+    margin-top: 8px;
     float: left;
     width: 24px;
     text-align: center;

From b582cf0a5f24155f4de25320030f34b1b581dbe8 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 23 Jan 2017 13:30:39 +0000
Subject: [PATCH 110/168] Remove CSS for StatusBar mid-timeline

---
 .../css/matrix-react-sdk/structures/RoomView.css       | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
index 6dc22e2fb6..43434d3fe1 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
+++ b/src/skins/vector/css/matrix-react-sdk/structures/RoomView.css
@@ -216,16 +216,6 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_statusArea_expanded {
     max-height: 50px;
-    margin-top: 0px;
-}
-
-.mx_RoomView_statusArea_expanded.mx_RoomView_statusArea_mid_timeline {
-    margin-top: -50px;
-
-    -webkit-transition: all .2s ease-in;
-    -moz-transition: all .2s ease-in;
-    -ms-transition: all .2s ease-in;
-    -o-transition: all .2s ease-in;
 }
 
 .mx_RoomView_statusAreaBox {

From b7204bf868cdf93040afb581465b5b04712081a7 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Mon, 23 Jan 2017 13:33:39 +0000
Subject: [PATCH 111/168] Use primary bg color on statusArea

---
 src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 9e30b9f21c..8623e032d0 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -160,7 +160,7 @@ hr.mx_RoomView_myReadMarker {
     flex: 0 0 auto;
 
     max-height: 0px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     z-index: 1000;
     overflow: hidden;
 

From bc714ba3a051ec64d3726e6933c7e766ecbd92b4 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 14:22:54 +0000
Subject: [PATCH 112/168] Add eslint config

An early start that gets some linting in place.
---
 .eslintignore     | 1 +
 .eslintrc.js      | 3 +++
 package.json      | 7 ++++++-
 test/.eslintrc.js | 5 +++++
 4 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .eslintignore
 create mode 100644 .eslintrc.js
 create mode 100644 test/.eslintrc.js

diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000000..ea40ba2941
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1 @@
+src/vector/modernizr.js
diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000000..c181384fd5
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+    extends: ["./node_modules/matrix-react-sdk/.eslintrc.js"],
+}
diff --git a/package.json b/package.json
index b7b69d0c70..f14fe8e7a2 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,8 @@
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
     "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",
+    "lint": "eslint src/",
+    "lintall": "eslint src/ test/",
     "clean": "rimraf lib webapp electron/dist",
     "prepublish": "npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
@@ -95,6 +97,9 @@
     "electron-builder": "^11.2.4",
     "electron-builder-squirrel-windows": "^11.2.1",
     "emojione": "^2.2.3",
+    "eslint": "^3.14.0",
+    "eslint-plugin-flowtype": "^2.30.0",
+    "eslint-plugin-react": "^6.9.0",
     "expect": "^1.16.0",
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^2.24.0",
@@ -148,7 +153,7 @@
       "target": "deb",
       "maintainer": "support@riot.im",
       "desktop": {
-          "StartupWMClass": "riot-web"
+        "StartupWMClass": "riot-web"
       }
     },
     "win": {
diff --git a/test/.eslintrc.js b/test/.eslintrc.js
new file mode 100644
index 0000000000..4cc4659d7d
--- /dev/null
+++ b/test/.eslintrc.js
@@ -0,0 +1,5 @@
+module.exports = {
+    env: {
+        mocha: true,
+    },
+}

From 4c3ea1341370a0722c34be6551ca791480c74db6 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 23 Jan 2017 15:42:50 +0000
Subject: [PATCH 113/168] Make jenkins run the linter

---
 scripts/jenkins.sh | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh
index bd27d6e3b1..5ccc199164 100755
--- a/scripts/jenkins.sh
+++ b/scripts/jenkins.sh
@@ -26,6 +26,9 @@ cp -r olm/package node_modules/olm
 # run the mocha tests
 npm run test
 
+# run eslint
+npm run lintall -- -f checkstyle -o eslint.xml || true
+
 rm dist/vector-*.tar.gz || true # rm previous artifacts without failing if it doesn't exist
 
  # node_modules deps from 'npm install' don't have a .git dir so can't

From f3df86872b4e4bc7b4e7a489993cf3e73c6a3637 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Mon, 23 Jan 2017 17:37:57 +0000
Subject: [PATCH 114/168] Fix tightlooping when flush()ing without any logs

The promise would resolve immediately, nulling out `flushPromise`. This would
then immediately be set from `new Promise((resolve, reject) => {...})` turning
it back into non-null `flushPromise`. The resolve handler was called so the
next `flush()` would see "oh yes, there is a non-null `flushPromise`" then
promptly try to set `flushAgainPromise` which chains off the resolved
`flushPromise` which relied on `flushPromise` being `null`ed out after
`resolve()`, causing the chained `flush()` to see "oh yes, there is a non-null
`flushPromise`" which... ad infinitum.

This PR fixes it by making the nulling out asynchronous but the fact it took
me this long to debug this issue indicates to me that this is a terrible piece
of code. Will re-write.
---
 src/vector/rageshake.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 3cc1588640..a17c829a57 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -201,13 +201,11 @@ class IndexedDBLogStore {
             if (!this.db) {
                 // not connected yet or user rejected access for us to r/w to
                 // the db.
-                this.flushPromise = null;
                 reject(new Error("No connected database"));
                 return;
             }
             const lines = this.logger.flush();
             if (lines.length === 0) {
-                this.flushPromise = null;
                 resolve();
                 return;
             }
@@ -217,18 +215,20 @@ class IndexedDBLogStore {
             let lastModStore = txn.objectStore("logslastmod");
             lastModStore.put(this._generateLastModifiedTime());
             txn.oncomplete = (event) => {
-                this.flushPromise = null;
                 resolve();
             };
             txn.onerror = (event) => {
                 console.error(
                     "Failed to flush logs : ", event
                 );
-                this.flushPromise = null;
                 reject(
                     new Error("Failed to write logs: " + event.target.errorCode)
                 );
             }
+        }).then(() => {
+            this.flushPromise = null;
+        }, (err) => {
+            this.flushPromise = null;
         });
         return this.flushPromise;
     }

From 706ffbec3c2eb41d67587ace8e01dd3c7df0e03b Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Mon, 23 Jan 2017 19:01:22 +0100
Subject: [PATCH 115/168] add riot logos

---
 src/skins/vector/img/logos/riot-logo-1.svg  |  1 +
 src/skins/vector/img/logos/riot-logo-2.svg  |  1 +
 src/skins/vector/img/logos/riot-logo-3.svg  |  1 +
 src/skins/vector/img/logos/riot-logo-4.svg  |  1 +
 src/skins/vector/img/logos/riot-logo-5.svg  |  1 +
 src/skins/vector/img/logos/riot-logo-bw.svg |  1 +
 src/skins/vector/img/logos/riot-logo.svg    | 32 +++++++++++++++++++++
 7 files changed, 38 insertions(+)
 create mode 100644 src/skins/vector/img/logos/riot-logo-1.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo-2.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo-3.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo-4.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo-5.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo-bw.svg
 create mode 100644 src/skins/vector/img/logos/riot-logo.svg

diff --git a/src/skins/vector/img/logos/riot-logo-1.svg b/src/skins/vector/img/logos/riot-logo-1.svg
new file mode 100644
index 0000000000..6b79dd9e8a
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-1.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#764d80;}.cls-2{fill:#7dc8a2;}.cls-3{fill:#afdbc5;}</style></defs><title>Asset 4</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-1" d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-1" d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path class="cls-1" d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/><path class="cls-2" d="M62.33,0H21.22A20.56,20.56,0,0,0,.66,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H62.33A51.38,51.38,0,0,0,62.33,0Z"/><path class="cls-3" d="M21.22,138.81A15.45,15.45,0,0,1,5.79,123.37V20.57A15.45,15.45,0,0,1,21.09,5.14H62.33a46.26,46.26,0,0,1,0,92.51H36.65v25.71A15.45,15.45,0,0,1,21.22,138.81Z"/><path class="cls-2" d="M21.22,133.68a10.32,10.32,0,0,1-10.3-10.3V20.57A10.33,10.33,0,0,1,21,10.27H62.33a41.13,41.13,0,0,1,0,82.26H31.52v30.84A10.32,10.32,0,0,1,21.22,133.68Z"/><path class="cls-3" d="M21.22,128.55A5.18,5.18,0,0,1,16,123.37V20.57a5.2,5.2,0,0,1,5-5.17H62.33a36,36,0,0,1,0,72H26.39v36A5.18,5.18,0,0,1,21.22,128.55Z"/><path class="cls-2" d="M21.27,82.28H62.33a30.87,30.87,0,0,0,0-61.75H21.22Z"/><path class="cls-3" d="M26.39,77.15l0-51.49h36a25.75,25.75,0,0,1,0,51.49Z"/><path class="cls-2" d="M31.51,72l0-41.23H62.33a20.62,20.62,0,0,1,0,41.23Z"/><path class="cls-3" d="M36.64,66.9l0-31H62.33a15.49,15.49,0,0,1,0,31Z"/><path class="cls-2" d="M41.76,61.77l0-20.72H62.33a10.36,10.36,0,0,1,0,20.72Z"/><path class="cls-3" d="M46.89,56.64V46.18H62.33a5.23,5.23,0,0,1,0,10.47Z"/><circle class="cls-1" cx="20.56" cy="20.57" r="20.56" transform="translate(-8.08 15.51) rotate(-35)"/><path class="cls-1" d="M109.34,111.57a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.55,67.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo-2.svg b/src/skins/vector/img/logos/riot-logo-2.svg
new file mode 100644
index 0000000000..96e0bbb189
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-2.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.36 143.93"><defs><style>.cls-1{fill:#764d80;}.cls-2{fill:#f69e98;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><path class="cls-2" d="M20.56,139.54A16.19,16.19,0,0,1,4.39,123.37V20.57a16.21,16.21,0,0,1,16-16.17H61.67a47,47,0,0,1,0,94H36.73v25A16.19,16.19,0,0,1,20.56,139.54ZM20.39,5.9A14.7,14.7,0,0,0,5.89,20.57v102.8a14.67,14.67,0,0,0,29.34,0V96.9H61.67a45.49,45.49,0,0,0,0-91H20.39Z"/><path class="cls-2" d="M20.56,134.4a11,11,0,0,1-11-11V20.57a11.09,11.09,0,0,1,10.79-11H61.67a41.85,41.85,0,0,1,0,83.7H31.59v30.11A11,11,0,0,1,20.56,134.4ZM20.3,11A9.57,9.57,0,0,0,11,20.57v102.8a9.53,9.53,0,1,0,19.05,0V91.75H61.67a40.35,40.35,0,0,0,0-80.7H20.3Z"/><path class="cls-2" d="M20.56,129.25a5.89,5.89,0,0,1-5.88-5.88V20.57a5.94,5.94,0,0,1,5.61-5.88H61.67a36.71,36.71,0,0,1,0,73.42H26.44v35.25A5.89,5.89,0,0,1,20.56,129.25ZM20.31,16.19a4.42,4.42,0,0,0-4.13,4.38v102.8a4.38,4.38,0,0,0,8.77,0V86.61H61.67a35.21,35.21,0,0,0,0-70.42Z"/><path class="cls-2" d="M61.67,83H19.81V19.83H61.67a31.57,31.57,0,0,1,0,63.14Zm-40.36-1.5H61.67a30.07,30.07,0,0,0,0-60.14H21.32Z"/><path class="cls-2" d="M61.67,77.83H25V25H61.67a26.43,26.43,0,0,1,0,52.85Zm-35.22-1.5H61.67a24.93,24.93,0,0,0,0-49.85H26.46Z"/><path class="cls-2" d="M61.67,72.69H30.1V30.12H61.67a21.29,21.29,0,0,1,0,42.57ZM31.6,71.19H61.67a19.79,19.79,0,0,0,0-39.57H31.6Z"/><path class="cls-2" d="M61.67,67.55H35.24V35.26H61.67a16.14,16.14,0,0,1,0,32.29ZM36.74,66H61.67a14.64,14.64,0,0,0,0-29.29H36.74Z"/><path class="cls-2" d="M61.67,62.41H40.38v-22H61.67a11,11,0,0,1,0,22Zm-19.79-1.5H61.67a9.5,9.5,0,0,0,0-19H41.88Z"/><path class="cls-2" d="M61.67,57.26H45.52V45.54H61.67a5.86,5.86,0,0,1,0,11.72ZM47,55.76H61.67a4.36,4.36,0,0,0,0-8.72H47Z"/><path class="cls-2" d="M61.18,52.16H51.89a.75.75,0,1,1,0-1.5h9.29a.75.75,0,0,1,0,1.5Z"/><path class="cls-2" d="M20.56,124.12a.75.75,0,0,1-.75-.75v-36a.75.75,0,0,1,1.5,0v36A.75.75,0,0,1,20.56,124.12Z"/><circle class="cls-2" cx="20.59" cy="20.57" r="20.56" transform="translate(-8.07 15.53) rotate(-35)"/><path class="cls-2" d="M109.36,111.56a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/><path class="cls-2" d="M145.91,51.12h25.61a2.57,2.57,0,0,0,0-5.14H145.91a2.57,2.57,0,1,0,0,5.14Z"/><path class="cls-2" d="M145.91,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,171.51,0H145.91a2.57,2.57,0,1,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-2" d="M171.51,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23a2.57,2.57,0,0,0-2.57,2.57h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,171.51,118.28Z"/><path class="cls-2" d="M158.71,72.63a15.65,15.65,0,1,0,15.65,15.65A15.67,15.67,0,0,0,158.71,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,158.71,98.79Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo-3.svg b/src/skins/vector/img/logos/riot-logo-3.svg
new file mode 100644
index 0000000000..985b9c9f72
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-3.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#fac79e;}.cls-2{fill:#e45e5d;}.cls-3{fill:#f8a05f;}</style></defs><title>Asset 5</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-1" d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-1" d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path class="cls-1" d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/><path class="cls-2" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><polygon class="cls-3" points="47.03 0.01 40.32 0.01 0 48.06 0 56.05 47.03 0.01"/><polygon class="cls-3" points="60.45 0.01 53.74 0.01 0 64.05 0 72.04 60.45 0.01"/><path class="cls-3" d="M72.83,1.24a51,51,0,0,0-5.9-1L0,80v8Z"/><polygon class="cls-3" points="33.61 0.01 26.9 0.01 0 32.06 0 40.06 33.61 0.01"/><path class="cls-3" d="M83.27,4.78a51,51,0,0,0-5-2L0,96v8Z"/><path class="cls-3" d="M41.12,102.78h.18l64.78-77.2a51.55,51.55,0,0,0-2.94-4.49L5.55,137.38a20.62,20.62,0,0,0,3.95,3.29L41.12,103Z"/><path class="cls-3" d="M112.22,42.23l-50.8,60.54h.25a51.55,51.55,0,0,0,6.85-.47L113,49.3A51.32,51.32,0,0,0,112.22,42.23Z"/><path class="cls-3" d="M40.71,127.46l-12.59,15A20.58,20.58,0,0,0,40.71,127.46Z"/><path class="cls-3" d="M110,68.88a51,51,0,0,0,2.67-11.18L76.73,100.52a51.1,51.1,0,0,0,10.6-4.64Z"/><path class="cls-3" d="M92.22,10.1a51.58,51.58,0,0,0-4.3-2.87L0,112v8Z"/><path class="cls-3" d="M99.83,17q-1.73-1.92-3.64-3.66L.42,127.5a20.41,20.41,0,0,0,2,5.58Z"/><path class="cls-3" d="M41.12,119v-8l-26.82,32a20.53,20.53,0,0,0,5.9,1Z"/><path class="cls-3" d="M110.71,36a51,51,0,0,0-2.09-5.5L48,102.78h6.71Z"/><circle class="cls-1" cx="20.59" cy="20.57" r="20.56" transform="translate(-8.07 15.53) rotate(-35)"/><path class="cls-1" d="M109.36,111.56a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo-4.svg b/src/skins/vector/img/logos/riot-logo-4.svg
new file mode 100644
index 0000000000..24a7ddabe6
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-4.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.64 143.93"><defs><style>.cls-1{fill:#e45e5d;}.cls-2{fill:#c7bdcd;}.cls-3{fill:#f69e98;}</style></defs><title>Asset 3</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><path class="cls-2" d="M147.19,51.12h25.61a2.57,2.57,0,1,0,0-5.14H147.19a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-2" d="M147.19,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.79,0H147.19a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-2" d="M172.79,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23a2.57,2.57,0,0,0-2.57,2.57h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.79,118.28Z"/><path class="cls-2" d="M160,72.63a15.65,15.65,0,1,0,15.65,15.65A15.67,15.67,0,0,0,160,72.63Zm0,26.16A10.51,10.51,0,1,1,170.5,88.28,10.52,10.52,0,0,1,160,98.79Z"/><path class="cls-3" d="M2.77,133.64A20.62,20.62,0,0,0,7,138.77H34.14a20.62,20.62,0,0,0,4.21-5.13Z"/><path class="cls-3" d="M0,92.52v5.14H84a51.48,51.48,0,0,0,8.41-5.14Z"/><rect class="cls-3" y="102.8" width="41.12" height="5.13"/><rect class="cls-3" y="113.08" width="41.12" height="5.14"/><path class="cls-3" d="M.68,15.41H98.3a51.8,51.8,0,0,0-5.86-5.14H2.78A20.41,20.41,0,0,0,.68,15.41Z"/><path class="cls-3" d="M0,123.36H0a20.53,20.53,0,0,0,.67,5.12H40.45a20.53,20.53,0,0,0,.67-5.12H0Z"/><path class="cls-3" d="M0,56.53H112.8c.17-1.69.26-3.4.26-5.13H0Z"/><path class="cls-3" d="M0,82.24v5.14H98.32a51.79,51.79,0,0,0,4.43-5.14Z"/><path class="cls-3" d="M0,20.57V25.7H106.14a51.58,51.58,0,0,0-3.39-5.14Z"/><path class="cls-3" d="M20.81,0h-.25A20.46,20.46,0,0,0,7,5.14H84A51.07,51.07,0,0,0,61.67,0Z"/><path class="cls-3" d="M0,30.85V36H110.69a51,51,0,0,0-1.94-5.14Z"/><path class="cls-3" d="M0,72v5.13H106.14A51.24,51.24,0,0,0,108.75,72Z"/><path class="cls-3" d="M0,61.68v5.14H110.69A50.92,50.92,0,0,0,112,61.68Z"/><path class="cls-3" d="M0,41.22v5.14H112.8a51.15,51.15,0,0,0-.77-5.14Z"/><circle class="cls-2" cx="20.59" cy="20.57" r="20.56" transform="translate(-8.07 15.53) rotate(-35)"/><path class="cls-2" d="M109.36,111.56a20.56,20.56,0,0,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo-5.svg b/src/skins/vector/img/logos/riot-logo-5.svg
new file mode 100644
index 0000000000..6a2c61dfec
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-5.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#764d80;}.cls-2{fill:#afdbc5;}</style></defs><title>Asset 1</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><circle class="cls-2" cx="20.59" cy="20.57" r="20.56" transform="matrix(0.82, -0.57, 0.57, 0.82, -8.07, 15.53)"/><path class="cls-2" d="M109.36,111.56a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/><path class="cls-2" d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-2" d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,1,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-2" d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path class="cls-2" d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo-bw.svg b/src/skins/vector/img/logos/riot-logo-bw.svg
new file mode 100644
index 0000000000..cb6d77d63b
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo-bw.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 6</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/><path d="M62.33,0H21.22A20.56,20.56,0,0,0,.66,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H62.33A51.38,51.38,0,0,0,62.33,0Z"/><path class="cls-1" d="M21.22,138.81A15.45,15.45,0,0,1,5.79,123.37V20.57A15.45,15.45,0,0,1,21.09,5.14H62.33a46.26,46.26,0,0,1,0,92.51H36.65v25.71A15.45,15.45,0,0,1,21.22,138.81Z"/><path d="M21.22,133.68a10.32,10.32,0,0,1-10.3-10.3V20.57A10.33,10.33,0,0,1,21,10.27H62.33a41.13,41.13,0,0,1,0,82.26H31.52v30.84A10.32,10.32,0,0,1,21.22,133.68Z"/><path class="cls-1" d="M21.22,128.55A5.18,5.18,0,0,1,16,123.37V20.57a5.2,5.2,0,0,1,5-5.17H62.33a36,36,0,0,1,0,72H26.39v36A5.18,5.18,0,0,1,21.22,128.55Z"/><path d="M21.27,82.28H62.33a30.87,30.87,0,0,0,0-61.75H21.22Z"/><path class="cls-1" d="M26.39,77.15l0-51.49h36a25.75,25.75,0,0,1,0,51.49Z"/><path d="M31.51,72l0-41.23H62.33a20.62,20.62,0,0,1,0,41.23Z"/><path class="cls-1" d="M36.64,66.9l0-31H62.33a15.49,15.49,0,0,1,0,31Z"/><path d="M41.76,61.77l0-20.72H62.33a10.36,10.36,0,0,1,0,20.72Z"/><path class="cls-1" d="M46.89,56.64V46.18H62.33a5.23,5.23,0,0,1,0,10.47Z"/><circle cx="20.56" cy="20.57" r="20.56" transform="translate(-8.08 15.51) rotate(-35)"/><path d="M109.34,111.57a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.55,67.58Z"/></g></g></svg>
\ No newline at end of file
diff --git a/src/skins/vector/img/logos/riot-logo.svg b/src/skins/vector/img/logos/riot-logo.svg
new file mode 100644
index 0000000000..cbfaa62577
--- /dev/null
+++ b/src/skins/vector/img/logos/riot-logo.svg
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7DC8A2;}
+	.st1{fill:#AFDBC5;}
+	.st2{fill:#764D80;}
+</style>
+<g>
+	<path class="st0" d="M212.8,38.8h-91.2c-0.2,0-0.4,0-0.6,0c-25.3,0-45.9,20.5-45.9,45.9v229.5c0,25.3,20.5,45.9,45.9,45.9
+		s45.9-20.5,45.9-45.9v-45.9h45.9c63.2,0,114.7-51.5,114.7-114.7S276,38.8,212.8,38.8z"/>
+	<path class="st1" d="M121,348.6c-19,0-34.4-15.5-34.4-34.4V84.7c0-18.9,15.3-34.3,34.2-34.4c0.2,0,0.5,0,0.7,0h91.3
+		c56.9,0,103.3,46.3,103.3,103.3s-46.3,103.3-103.3,103.3h-57.3v57.4C155.4,333.2,140,348.6,121,348.6z"/>
+	<path class="st0" d="M121,337.2c-12.7,0-23-10.3-23-23V84.7c0-12.5,10.1-22.7,22.5-23c0.2,0,0.5,0,0.7,0l91.5,0
+		c50.6,0,91.8,41.2,91.8,91.8s-41.2,91.8-91.8,91.8H144v68.8C144,326.9,133.7,337.2,121,337.2z"/>
+	<path class="st1" d="M121,325.7c-6.4,0-11.6-5.2-11.6-11.6V84.7c0-6.2,5-11.3,11.1-11.5l0.5,0l91.8,0c44.3,0,80.4,36.1,80.4,80.4
+		s-36,80.4-80.4,80.4h-80.2v80.3C132.6,320.5,127.4,325.7,121,325.7z"/>
+	<path class="st0" d="M121.1,222.4h91.7c38,0,68.9-30.9,68.9-68.9s-30.9-68.9-68.9-68.9H121L121.1,222.4z"/>
+	<path class="st1" d="M132.5,211l-0.1-114.9h80.3c31.7,0,57.5,25.8,57.5,57.5S244.5,211,212.8,211H132.5z"/>
+	<path class="st0" d="M144,199.6l-0.1-92h68.9c25.4,0,46,20.6,46,46s-20.6,46-46,46H144z"/>
+	<path class="st1" d="M155.4,188.1l-0.1-69.1h57.4c19.1,0,34.6,15.5,34.6,34.6s-15.5,34.6-34.6,34.6H155.4z"/>
+	<path class="st0" d="M166.9,176.7l0-46.3h45.9c12.8,0,23.1,10.4,23.1,23.1s-10.4,23.1-23.1,23.1H166.9z"/>
+	<path class="st1" d="M178.3,165.2l0-23.4h34.5c6.4,0,11.7,5.2,11.7,11.7s-5.2,11.7-11.7,11.7H178.3z"/>
+	<g>
+		
+			<ellipse transform="matrix(0.8192 -0.5736 0.5736 0.8192 -26.9642 83.8822)" class="st2" cx="119.5" cy="84.7" rx="45.9" ry="45.9"/>
+		<path class="st2" d="M317.7,287.8c14.5,20.8,9.5,49.4-11.3,63.9c-20.8,14.5-49.4,9.5-63.9-11.3l-68.7-98.2
+			c-14.5-20.8-9.5-49.4,11.3-63.9c20.8-14.5,49.4-9.5,63.9,11.3L317.7,287.8z"/>
+	</g>
+</g>
+</svg>

From 597705716b30e0efa9cca8e5ac744bda36bf503e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 11:26:09 +0000
Subject: [PATCH 116/168] Hopefully, fix intermittent test failure

This seeks to fix the intermittent failure of the "MatrixClient rehydrated from
stored credentials" tests.

The problem appears to be that the 'load_completed' is sometimes taking a while
to come through from the dispatcher - or rather, it is taking a long time to
get *sent* to the dispatcher: the chain of `q().then().catch().done()` in
componentDidMount can take a while to happen.

As a workaround, give the test a few goes when waiting for us to start
syncing. It's not ideal to be poking into the internal state of MatrixChat like
this, but it'll do for now.
---
 test/app-tests/loading.js | 69 +++++++++++++++++++++++----------------
 1 file changed, 40 insertions(+), 29 deletions(-)

diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js
index 03a4d11e14..2fe82e51f5 100644
--- a/test/app-tests/loading.js
+++ b/test/app-tests/loading.js
@@ -94,13 +94,13 @@ describe('loading:', function () {
         loadCompletePromise = loadCompleteDefer.promise;
 
         function onNewScreen(screen) {
-            console.log("newscreen "+screen);
+            console.log(Date.now() + " newscreen "+screen);
             if (!appLoaded) {
                 lastLoadedScreen = screen;
             } else {
                 var hash = '#/' + screen;
                 windowLocation.hash = hash;
-                console.log("browser URI now "+ windowLocation);
+                console.log(Date.now() + " browser URI now "+ windowLocation);
             }
         }
 
@@ -122,22 +122,22 @@ describe('loading:', function () {
         );
 
         function routeUrl(location, matrixChat) {
-            console.log("Routing URL "+location);
+            console.log(Date.now() + " Routing URL "+location);
             var fragparts = parseQsFromFragment(location);
             matrixChat.showScreen(fragparts.location.substring(1),
                                   fragparts.params);
         }
 
         // pause for a cycle, then simulate the window.onload handler
-        q.delay(0).then(() => {
-            console.log("simulating window.onload");
+        window.setTimeout(() => {
+            console.log(Date.now() + " simulating window.onload");
             routeUrl(windowLocation, matrixChat);
             appLoaded = true;
             if (lastLoadedScreen) {
                 onNewScreen(lastLoadedScreen);
                 lastLoadedScreen = null;
             }
-        }).done();
+        }, 0);
     }
 
     describe("Clean load with no stored credentials:", function() {
@@ -243,10 +243,8 @@ describe('loading:', function () {
 
             loadApp();
 
-            q.delay(1).then(() => {
-                // we expect a spinner
-                assertAtSyncingSpinner(matrixChat);
-
+            return awaitSyncingSpinner(matrixChat).then(() => {
+                // we got a sync spinner - let the sync complete
                 return httpBackend.flush();
             }).then(() => {
                 // once the sync completes, we should have a directory
@@ -266,10 +264,8 @@ describe('loading:', function () {
                 uriFragment: "#/room/!room:id",
             });
 
-            q.delay(1).then(() => {
-                // we expect a spinner
-                assertAtSyncingSpinner(matrixChat);
-
+            return awaitSyncingSpinner(matrixChat).then(() => {
+                // we got a sync spinner - let the sync complete
                 return httpBackend.flush();
             }).then(() => {
                 // once the sync completes, we should have a room view
@@ -300,12 +296,9 @@ describe('loading:', function () {
 
                 return httpBackend.flush();
             }).then(() => {
-                // Wait for another trip around the event loop for the UI to update
-                return q.delay(1);
+                return awaitSyncingSpinner(matrixChat);
             }).then(() => {
-                // now we should have a spinner with a logout link
-                assertAtSyncingSpinner(matrixChat);
-
+                // we got a sync spinner - let the sync complete
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
             }).then(() => {
@@ -338,12 +331,8 @@ describe('loading:', function () {
 
                 return httpBackend.flush();
             }).then(() => {
-                // Wait for another trip around the event loop for the UI to update
-                return q.delay(1);
+                return awaitSyncingSpinner(matrixChat);
             }).then(() => {
-                // now we should have a spinner with a logout link
-                assertAtSyncingSpinner(matrixChat);
-
                 httpBackend.when('GET', '/sync').check(function(req) {
                     expect(req.path).toMatch(new RegExp("^https://homeserver/"));
                 }).respond(200, {});
@@ -377,12 +366,8 @@ describe('loading:', function () {
 
                 return httpBackend.flush();
             }).then(() => {
-                // Wait for another trip around the event loop for the UI to update
-                return q.delay(1);
+                return awaitSyncingSpinner(matrixChat);
             }).then(() => {
-                // now we should have a spinner with a logout link
-                assertAtSyncingSpinner(matrixChat);
-
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
             }).then(() => {
@@ -448,6 +433,32 @@ function assertAtLoadingSpinner(matrixChat) {
 
 // we've got login creds, and are waiting for the sync to finish.
 // the page includes a logout link.
+function awaitSyncingSpinner(matrixChat, retryLimit, retryCount) {
+    if (retryLimit === undefined) {
+        retryLimit = 5;
+    }
+    if (retryCount === undefined) {
+        retryCount = 0;
+    }
+
+    if (matrixChat.state.loading) {
+        console.log(Date.now() + " Awaiting sync spinner: still loading.");
+        if (retryCount >= retryLimit) {
+            throw new Error("MatrixChat still not loaded after " +
+                            retryCount + " tries");
+        }
+        return q.delay(0).then(() => {
+            return awaitSyncingSpinner(matrixChat, retryLimit, retryCount + 1);
+        });
+    }
+
+    console.log(Date.now() + " Awaiting sync spinner: load complete.");
+
+    // state looks good, check the rendered output
+    assertAtSyncingSpinner(matrixChat);
+    return q();
+}
+
 function assertAtSyncingSpinner(matrixChat) {
     var domComponent = ReactDOM.findDOMNode(matrixChat);
     expect(domComponent.className).toEqual("mx_MatrixChat_splash");

From 6f3b70dbb02bb6edb614209592546fb3ba28854b Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 12:43:18 +0000
Subject: [PATCH 117/168] Use Q promises and isPending to make logic simpler

---
 src/vector/rageshake.js | 52 ++++++++++++++++-------------------------
 1 file changed, 20 insertions(+), 32 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index a17c829a57..28f901a30a 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -16,6 +16,7 @@ limitations under the License.
 
 import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
 import request from "browser-request";
+import q from "q";
 
 // This module contains all the code needed to log the console, persist it to
 // disk and submit bug reports. Rationale is as follows:
@@ -105,9 +106,6 @@ class IndexedDBLogStore {
         this.db = null;
         // Promise is not null when a flush is IN PROGRESS
         this.flushPromise = null;
-        // Promise is not null when flush() is called when one is already in
-        // progress.
-        this.flushAgainPromise = null;
     }
 
     /**
@@ -115,7 +113,7 @@ class IndexedDBLogStore {
      */
     connect() {
         let req = this.indexedDB.open("logs");
-        return new Promise((resolve, reject) => {
+        return q.Promise((resolve, reject) => {
             req.onsuccess = (event) => {
                 this.db = event.target.result;
                 // Periodically flush logs to local storage / indexeddb
@@ -167,13 +165,10 @@ class IndexedDBLogStore {
      *  - If B doesn't wait for A's flush to complete, B will be missing the
      *    contents of A's flush.
      * To protect against this, we set 'flushPromise' when a flush is ongoing.
-     * Subsequent calls to flush() during this period return a new promise
-     * 'flushAgainPromise' which is chained off the current 'flushPromise'.
-     * Subsequent calls to flush() when the first flush hasn't completed will
-     * return the same 'flushAgainPromise' as we can guarantee that we WILL
-     * do a brand new flush at some point in the future. Once the first flush
-     * has completed, 'flushAgainPromise' becomes 'flushPromise' and can be
-     * chained again.
+     * Subsequent calls to flush() during this period will chain another flush.
+     * This guarantees that we WILL do a brand new flush at some point in the
+     * future. Once the flushes have finished, it's  safe to clobber the promise
+     * with a new one to prevent very deep promise chains from building up.
      *
      * This guarantees that we will always eventually do a flush when flush() is
      * called.
@@ -181,23 +176,20 @@ class IndexedDBLogStore {
      * @return {Promise} Resolved when the logs have been flushed.
      */
     flush() {
-        if (this.flushPromise) { // a flush is ongoing
-            if (this.flushAgainPromise) { // a flush is queued up, return that.
-                return this.flushAgainPromise;
-            }
-            // queue up a new flush
-            this.flushAgainPromise = this.flushPromise.then(() => {
-                // the current flush has completed, so shuffle the promises
-                // around:
-                // flushAgainPromise => flushPromise and null flushAgainPromise.
-                // flushPromise has already nulled itself.
-                this.flushAgainPromise = null;
+        // check if a flush() operation is ongoing
+        if (this.flushPromise && this.flushPromise.isPending()) {
+            // chain a flush operation after this one has completed to guarantee
+            // that a complete flush() is done. This does mean that if there are
+            // 3 calls to flush() in one go, the 2nd and 3rd promises will run
+            // concurrently, but this is fine since they can safely race when
+            // collecting logs.
+            return this.flushPromise.then(() => {
                 return this.flush();
             });
-            return this.flushAgainPromise;
         }
-
-        this.flushPromise = new Promise((resolve, reject) => {
+        // there is no flush promise or there was but it has finished, so do
+        // a brand new one, destroying the chain which may have been built up.
+        this.flushPromise = q.Promise((resolve, reject) => {
             if (!this.db) {
                 // not connected yet or user rejected access for us to r/w to
                 // the db.
@@ -225,10 +217,6 @@ class IndexedDBLogStore {
                     new Error("Failed to write logs: " + event.target.errorCode)
                 );
             }
-        }).then(() => {
-            this.flushPromise = null;
-        }, (err) => {
-            this.flushPromise = null;
         });
         return this.flushPromise;
     }
@@ -286,7 +274,7 @@ class IndexedDBLogStore {
         }
 
         function deleteLogs(id) {
-            return new Promise((resolve, reject) => {
+            return q.Promise((resolve, reject) => {
                 const txn = db.transaction(
                     ["logs", "logslastmod"], "readwrite"
                 );
@@ -377,7 +365,7 @@ class IndexedDBLogStore {
  */
 function selectQuery(store, keyRange, resultMapper) {
     const query = store.openCursor(keyRange);
-    return new Promise((resolve, reject) => {
+    return q.Promise((resolve, reject) => {
         let results = [];
         query.onerror = (event) => {
             reject(new Error("Query failed: " + event.target.errorCode));
@@ -479,7 +467,7 @@ module.exports = {
             });
         }
 
-        await new Promise((resolve, reject) => {
+        await q.Promise((resolve, reject) => {
             request({
                 method: "POST",
                 url: bugReportEndpoint,

From 31878d8a448ddab39c17306a648bded4176b22c3 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 24 Jan 2017 13:07:34 +0000
Subject: [PATCH 118/168] Also need eslint-config-google

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index f14fe8e7a2..2aff185945 100644
--- a/package.json
+++ b/package.json
@@ -98,6 +98,7 @@
     "electron-builder-squirrel-windows": "^11.2.1",
     "emojione": "^2.2.3",
     "eslint": "^3.14.0",
+    "eslint-config-google": "^0.7.1",
     "eslint-plugin-flowtype": "^2.30.0",
     "eslint-plugin-react": "^6.9.0",
     "expect": "^1.16.0",

From fe64b043390cbbe135f795d2337ae44093c84474 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Tue, 24 Jan 2017 13:35:41 +0000
Subject: [PATCH 119/168] More test resilience

Give the tests more than one chance for the roomview to load.
---
 test/app-tests/loading.js | 45 ++++++++++++++++++++++++++++-----------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js
index 2fe82e51f5..4504d00b8d 100644
--- a/test/app-tests/loading.js
+++ b/test/app-tests/loading.js
@@ -209,14 +209,11 @@ describe('loading:', function () {
                 httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' });
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
-            }).then(() => {
-                // Wait for another trip around the event loop for the UI to update
-                return q.delay(1);
             }).then(() => {
                 // once the sync completes, we should have a room view
+                return awaitRoomView(matrixChat);
+            }).then(() => {
                 httpBackend.verifyNoOutstandingExpectation();
-                ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.RoomView'));
                 expect(windowLocation.hash).toEqual("#/room/!room:id");
 
                 // and the localstorage should have been updated
@@ -269,9 +266,9 @@ describe('loading:', function () {
                 return httpBackend.flush();
             }).then(() => {
                 // once the sync completes, we should have a room view
+                return awaitRoomView(matrixChat);
+            }).then(() => {
                 httpBackend.verifyNoOutstandingExpectation();
-                ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.RoomView'));
                 expect(windowLocation.hash).toEqual("#/room/!room:id");
             }).done(done, done);
 
@@ -370,14 +367,11 @@ describe('loading:', function () {
             }).then(() => {
                 httpBackend.when('GET', '/sync').respond(200, {});
                 return httpBackend.flush();
-            }).then(() => {
-                // Wait for another trip around the event loop for the UI to update
-                return q.delay(1);
             }).then(() => {
                 // once the sync completes, we should have a room view
+                return awaitRoomView(matrixChat);
+            }).then(() => {
                 httpBackend.verifyNoOutstandingExpectation();
-                ReactTestUtils.findRenderedComponentWithType(
-                    matrixChat, sdk.getComponent('structures.RoomView'));
                 expect(windowLocation.hash).toEqual("#/room/!room:id");
             }).done(done, done);
         });
@@ -469,3 +463,30 @@ function assertAtSyncingSpinner(matrixChat) {
         matrixChat, 'a');
     expect(logoutLink.text).toEqual("Logout");
 }
+
+function awaitRoomView(matrixChat, retryLimit, retryCount) {
+    if (retryLimit === undefined) {
+        retryLimit = 5;
+    }
+    if (retryCount === undefined) {
+        retryCount = 0;
+    }
+
+    if (!matrixChat.state.ready) {
+        console.log(Date.now() + " Awaiting room view: not ready yet.");
+        if (retryCount >= retryLimit) {
+            throw new Error("MatrixChat still not ready after " +
+                            retryCount + " tries");
+        }
+        return q.delay(0).then(() => {
+            return awaitRoomView(matrixChat, retryLimit, retryCount + 1);
+        });
+    }
+
+    console.log(Date.now() + " Awaiting room view: now ready.");
+
+    // state looks good, check the rendered output
+    ReactTestUtils.findRenderedComponentWithType(
+        matrixChat, sdk.getComponent('structures.RoomView'));
+    return q();
+}

From 307c4f3dd152c47ecc9aca9164db403ba0df623e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Tue, 24 Jan 2017 14:02:44 +0000
Subject: [PATCH 120/168] Increase the max-height of the expanded status bar

This will ensure that errors, unsent messages, etc. will be allowed enough height to display their contents from within the status bar without being chopped.

Fixes #3041
---
 src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 8623e032d0..55771f7945 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -171,7 +171,7 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_statusArea_expanded {
-    max-height: 50px;
+    max-height: 100px;
 }
 
 .mx_RoomView_statusAreaBox {

From efbea0e942a40ab38389740fb42dd8cba1e441de Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 14:45:16 +0000
Subject: [PATCH 121/168] Add css for bug report dialog

---
 src/skins/vector/css/_components.scss         |  1 +
 .../views/dialogs/_BugReportDialog.scss       | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss

diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 51dd0ada77..323c22e0b0 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -12,6 +12,7 @@
 @import "./matrix-react-sdk/structures/_UserSettings.scss";
 @import "./matrix-react-sdk/structures/login/_Login.scss";
 @import "./matrix-react-sdk/views/avatars/_BaseAvatar.scss";
+@import "./matrix-react-sdk/views/dialogs/_BugReportDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss";
 @import "./matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss
new file mode 100644
index 0000000000..0f47e974da
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss
@@ -0,0 +1,20 @@
+/*
+Copyright 2017 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_BugReportDialog_input {
+    width: 100%;
+    box-sizing: border-box;
+}

From e225d3e3708bccf6cd458453206d076841011630 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Tue, 24 Jan 2017 17:05:01 +0000
Subject: [PATCH 122/168] Preserve ordering of flush()es by not letting
 subsequent flush()es race

---
 src/vector/rageshake.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 28f901a30a..086ab15520 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -104,8 +104,9 @@ class IndexedDBLogStore {
         this.id = "instance-" + Math.random() + Date.now();
         this.index = 0;
         this.db = null;
-        // Promise is not null when a flush is IN PROGRESS
         this.flushPromise = null;
+        // set if flush() is called whilst one is ongoing
+        this.flushAgainPromise = null;
     }
 
     /**
@@ -165,10 +166,8 @@ class IndexedDBLogStore {
      *  - If B doesn't wait for A's flush to complete, B will be missing the
      *    contents of A's flush.
      * To protect against this, we set 'flushPromise' when a flush is ongoing.
-     * Subsequent calls to flush() during this period will chain another flush.
-     * This guarantees that we WILL do a brand new flush at some point in the
-     * future. Once the flushes have finished, it's  safe to clobber the promise
-     * with a new one to prevent very deep promise chains from building up.
+     * Subsequent calls to flush() during this period will chain another flush,
+     * then keep returning that same chained flush.
      *
      * This guarantees that we will always eventually do a flush when flush() is
      * called.
@@ -178,14 +177,17 @@ class IndexedDBLogStore {
     flush() {
         // check if a flush() operation is ongoing
         if (this.flushPromise && this.flushPromise.isPending()) {
-            // chain a flush operation after this one has completed to guarantee
-            // that a complete flush() is done. This does mean that if there are
-            // 3 calls to flush() in one go, the 2nd and 3rd promises will run
-            // concurrently, but this is fine since they can safely race when
-            // collecting logs.
-            return this.flushPromise.then(() => {
+            if (this.flushAgainPromise && this.flushAgainPromise.isPending()) {
+                // this is the 3rd+ time we've called flush() : return the same
+                // promise.
+                return this.flushAgainPromise;
+            }
+            // queue up a flush to occur immediately after the pending one
+            // completes.
+            this.flushAgainPromise = this.flushPromise.then(() => {
                 return this.flush();
             });
+            return this.flushAgainPromise;
         }
         // there is no flush promise or there was but it has finished, so do
         // a brand new one, destroying the chain which may have been built up.

From 2ca871a0286358cb6f7708b4e849cbd4ea19832e Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Tue, 24 Jan 2017 18:18:56 +0000
Subject: [PATCH 123/168] Don't use hash-named directory for dev server

Otherwise Chrome thinks you're working on a new file every time
you refresh and therefore closes source tabs and removes
breakpoints which is very annoying. It also allegedly makes
webpack-dev-server run out of memory because it has to remember
all the different files.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2aff185945..5528c7c797 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
     "start:res": "node scripts/copy-res.js -w",
-    "start:js": "webpack-dev-server -w --progress",
+    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
     "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",

From eaff0abfb07fddc1f657a1c942c72968e7b47619 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 25 Jan 2017 10:28:04 +0000
Subject: [PATCH 124/168] Add link to Chrome issue status for fixing line
 numbers

---
 src/vector/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/vector/index.js b/src/vector/index.js
index d1d85e06c0..c40edd7e19 100644
--- a/src/vector/index.js
+++ b/src/vector/index.js
@@ -38,7 +38,7 @@ require('draft-js/dist/Draft.css');
 
 const rageshake = require("./rageshake");
 rageshake.init().then(() => {
-    console.log("Initialised rageshake");
+    console.log("Initialised rageshake: See https://bugs.chromium.org/p/chromium/issues/detail?id=583193 to fix line numbers on Chrome.");
     rageshake.cleanup();
 }, (err) => {
     console.error("Failed to initialise rageshake: " + err);

From 1c926941d34ea328d4505122fe7e72b1a87f2e4c Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 11:28:59 +0000
Subject: [PATCH 125/168] Add --output-chunk-file too

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5528c7c797..915056e636 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "build:dev": "node scripts/babelcheck.js && npm run build:res && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
     "start:res": "node scripts/copy-res.js -w",
-    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js -w --progress",
+    "start:js": "webpack-dev-server --output-filename=bundles/_dev_/[name].js --output-chunk-file=bundles/_dev_/[name].js -w --progress",
     "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
     "start": "node scripts/babelcheck.js && parallelshell \"npm run start:res\" \"npm run start:js\"",
     "start:prod": "parallelshell \"npm run start:res\" \"npm run start:js:prod\"",

From 0021fb37f3c26692a7906a6503cc26a0409a1a0b Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 25 Jan 2017 14:27:25 +0000
Subject: [PATCH 126/168] Set BaseAvatar_image bg colour = #fff

---
 .../vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
index d481e5c177..f23b929b81 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss
@@ -31,4 +31,5 @@ limitations under the License.
 .mx_BaseAvatar_image {
     border-radius: 40px;
     vertical-align: top;
+    background-color: #fff;
 }

From 0a9f02abcc527d64f2f7bbdd1d296008d4e94ca6 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Wed, 25 Jan 2017 16:51:26 +0000
Subject: [PATCH 127/168] Glue the dialog to rageshake: honour sendLogs flag.

---
 src/component-index.js                        |  60 +++++----
 .../views/dialogs/BugReportDialog.js          | 126 ++++++++++++++++++
 src/vector/rageshake.js                       |  25 ++--
 3 files changed, 171 insertions(+), 40 deletions(-)
 create mode 100644 src/components/views/dialogs/BugReportDialog.js

diff --git a/src/component-index.js b/src/component-index.js
index 3141087ce6..456f8176fc 100644
--- a/src/component-index.js
+++ b/src/component-index.js
@@ -27,60 +27,62 @@ limitations under the License.
 module.exports.components = require('matrix-react-sdk/lib/component-index').components;
 
 import structures$BottomLeftMenu from './components/structures/BottomLeftMenu';
-module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu;
+structures$BottomLeftMenu && (module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu);
 import structures$CompatibilityPage from './components/structures/CompatibilityPage';
-module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage;
+structures$CompatibilityPage && (module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage);
 import structures$LeftPanel from './components/structures/LeftPanel';
-module.exports.components['structures.LeftPanel'] = structures$LeftPanel;
+structures$LeftPanel && (module.exports.components['structures.LeftPanel'] = structures$LeftPanel);
 import structures$RightPanel from './components/structures/RightPanel';
-module.exports.components['structures.RightPanel'] = structures$RightPanel;
+structures$RightPanel && (module.exports.components['structures.RightPanel'] = structures$RightPanel);
 import structures$RoomDirectory from './components/structures/RoomDirectory';
-module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory;
+structures$RoomDirectory && (module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory);
 import structures$RoomSubList from './components/structures/RoomSubList';
-module.exports.components['structures.RoomSubList'] = structures$RoomSubList;
+structures$RoomSubList && (module.exports.components['structures.RoomSubList'] = structures$RoomSubList);
 import structures$SearchBox from './components/structures/SearchBox';
-module.exports.components['structures.SearchBox'] = structures$SearchBox;
+structures$SearchBox && (module.exports.components['structures.SearchBox'] = structures$SearchBox);
 import structures$ViewSource from './components/structures/ViewSource';
-module.exports.components['structures.ViewSource'] = structures$ViewSource;
+structures$ViewSource && (module.exports.components['structures.ViewSource'] = structures$ViewSource);
 import views$context_menus$MessageContextMenu from './components/views/context_menus/MessageContextMenu';
-module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu;
+views$context_menus$MessageContextMenu && (module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu);
 import views$context_menus$NotificationStateContextMenu from './components/views/context_menus/NotificationStateContextMenu';
-module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu;
+views$context_menus$NotificationStateContextMenu && (module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu);
 import views$context_menus$RoomTagContextMenu from './components/views/context_menus/RoomTagContextMenu';
-module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu;
+views$context_menus$RoomTagContextMenu && (module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu);
+import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
+views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
 import views$dialogs$ChangelogDialog from './components/views/dialogs/ChangelogDialog';
-module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog;
+views$dialogs$ChangelogDialog && (module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog);
 import views$directory$NetworkDropdown from './components/views/directory/NetworkDropdown';
-module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown;
+views$directory$NetworkDropdown && (module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown);
 import views$elements$ImageView from './components/views/elements/ImageView';
-module.exports.components['views.elements.ImageView'] = views$elements$ImageView;
+views$elements$ImageView && (module.exports.components['views.elements.ImageView'] = views$elements$ImageView);
 import views$elements$Spinner from './components/views/elements/Spinner';
-module.exports.components['views.elements.Spinner'] = views$elements$Spinner;
+views$elements$Spinner && (module.exports.components['views.elements.Spinner'] = views$elements$Spinner);
 import views$globals$GuestWarningBar from './components/views/globals/GuestWarningBar';
-module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar;
+views$globals$GuestWarningBar && (module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar);
 import views$globals$MatrixToolbar from './components/views/globals/MatrixToolbar';
-module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar;
+views$globals$MatrixToolbar && (module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar);
 import views$globals$NewVersionBar from './components/views/globals/NewVersionBar';
-module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar;
+views$globals$NewVersionBar && (module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar);
 import views$login$VectorCustomServerDialog from './components/views/login/VectorCustomServerDialog';
-module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog;
+views$login$VectorCustomServerDialog && (module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog);
 import views$login$VectorLoginFooter from './components/views/login/VectorLoginFooter';
-module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter;
+views$login$VectorLoginFooter && (module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter);
 import views$login$VectorLoginHeader from './components/views/login/VectorLoginHeader';
-module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader;
+views$login$VectorLoginHeader && (module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader);
 import views$messages$DateSeparator from './components/views/messages/DateSeparator';
-module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator;
+views$messages$DateSeparator && (module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator);
 import views$messages$MessageTimestamp from './components/views/messages/MessageTimestamp';
-module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp;
+views$messages$MessageTimestamp && (module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp);
 import views$rooms$DNDRoomTile from './components/views/rooms/DNDRoomTile';
-module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile;
+views$rooms$DNDRoomTile && (module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile);
 import views$rooms$RoomDropTarget from './components/views/rooms/RoomDropTarget';
-module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget;
+views$rooms$RoomDropTarget && (module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget);
 import views$rooms$RoomTooltip from './components/views/rooms/RoomTooltip';
-module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip;
+views$rooms$RoomTooltip && (module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip);
 import views$rooms$SearchBar from './components/views/rooms/SearchBar';
-module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar;
+views$rooms$SearchBar && (module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar);
 import views$settings$IntegrationsManager from './components/views/settings/IntegrationsManager';
-module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager;
+views$settings$IntegrationsManager && (module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager);
 import views$settings$Notifications from './components/views/settings/Notifications';
-module.exports.components['views.settings.Notifications'] = views$settings$Notifications;
+views$settings$Notifications && (module.exports.components['views.settings.Notifications'] = views$settings$Notifications);
diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
new file mode 100644
index 0000000000..e3c8945a18
--- /dev/null
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -0,0 +1,126 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import rageshake from '../../../vector/rageshake';
+
+export default class BugReportDialog extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            sendLogs: true,
+            busy: false,
+            err: null,
+            text: "",
+        };
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onCancel = this._onCancel.bind(this);
+        this._onTextChange = this._onTextChange.bind(this);
+        this._onSendLogsChange = this._onSendLogsChange.bind(this);
+    }
+
+    _onCancel(ev) {
+        this.props.onFinished(false);
+    }
+
+    _onSubmit(ev) {
+        const sendLogs = this.state.sendLogs;
+        const userText = this.state.text;
+        if (!sendLogs && userText.trim().length === 0) {
+            this.setState({
+                err: "Please describe the bug and/or send logs.",
+            });
+            return;
+        }
+        this.setState({ busy: true, err: null });
+        rageshake.sendBugReport(userText, sendLogs).then(() => {
+            this.setState({ busy: false });
+        }, (err) => {
+            this.setState({ busy: false, err: `Failed: ${err.message}` });
+        });
+    }
+
+    _onTextChange(ev) {
+        this.setState({ text: ev.target.value });
+    }
+
+    _onSendLogsChange(ev) {
+        this.setState({ sendLogs: ev.target.checked });
+    }
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        const okLabel = this.state.busy ? <Loader /> : 'Send';
+
+        let cancelButton = null;
+        if (!this.state.busy) {
+            cancelButton = <button onClick={this._onCancel}>
+                Cancel
+            </button>;
+        }
+
+        return (
+            <div className="mx_BugReportDialog">
+                <div className="mx_Dialog_title">
+                    Report a bug
+                </div>
+                <div className="mx_Dialog_content">
+                    <p>Please describe the bug. What did you do?
+                    What did you expect to happen?
+                    What actually happened?</p>
+                    <textarea
+                        className="mx_BugReportDialog_input"
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder="Describe your problem here."
+                    />
+                    <p>In order to diagnose problems, logs from this client will be sent with
+                    this bug report.
+                    If you would prefer to only send the text above, please untick:</p>
+                    <input type="checkbox" checked={this.state.sendLogs}
+                        onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
+                    <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
+                    {error}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button
+                        className="mx_Dialog_primary danger"
+                        onClick={this._onSubmit}
+                        autoFocus={true}
+                    >
+                        {okLabel}
+                    </button>
+
+                    {cancelButton}
+                </div>
+            </div>
+        );
+    }
+}
+
+BugReportDialog.propTypes = {
+    onFinished: React.PropTypes.func.isRequired,
+};
diff --git a/src/vector/rageshake.js b/src/vector/rageshake.js
index 086ab15520..61e29a312d 100644
--- a/src/vector/rageshake.js
+++ b/src/vector/rageshake.js
@@ -430,9 +430,10 @@ module.exports = {
     /**
      * Send a bug report.
      * @param {string} userText Any additional user input.
+     * @param {boolean} sendLogs True to send logs
      * @return {Promise} Resolved when the bug report is sent.
      */
-    sendBugReport: async function(userText) {
+    sendBugReport: async function(userText, sendLogs) {
         if (!logger) {
             throw new Error(
                 "No console logger, did you forget to call init()?"
@@ -457,16 +458,18 @@ module.exports = {
         // sending to work going off the in-memory console logs.
         console.log("Sending bug report.");
         let logs = [];
-        if (store) {
-            // flush most recent logs
-            await store.flush();
-            logs = await store.consume();
-        }
-        else {
-            logs.push({
-                lines: logger.flush(true),
-                id: "-",
-            });
+        if (sendLogs) {
+            if (store) {
+                // flush most recent logs
+                await store.flush();
+                logs = await store.consume();
+            }
+            else {
+                logs.push({
+                    lines: logger.flush(true),
+                    id: "-",
+                });
+            }
         }
 
         await q.Promise((resolve, reject) => {

From 4e41accc563d4283e4d6375e797a82e66078c630 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Wed, 25 Jan 2017 18:52:21 +0000
Subject: [PATCH 128/168] CSS tweak for email address lookup

CSS tweak for https://github.com/matrix-org/matrix-react-sdk/pull/653
---
 .../css/matrix-react-sdk/views/elements/_AddressTile.scss       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
index 59c0b68d3b..0ecfb17c83 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_AddressTile.scss
@@ -106,7 +106,7 @@ limitations under the License.
 }
 
 .mx_AddressTile_email.mx_AddressTile_justified {
-    width: 380px; /* name + id width */
+    width: 200px; /* same as id width */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

From 972a3912968752180d72bcbece3c18b8f433a476 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 26 Jan 2017 00:28:22 +0100
Subject: [PATCH 129/168] only recalculate favicon if it changes

---
 src/vector/platform/WebPlatform.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/vector/platform/WebPlatform.js b/src/vector/platform/WebPlatform.js
index 2029822b61..dda22f3c04 100644
--- a/src/vector/platform/WebPlatform.js
+++ b/src/vector/platform/WebPlatform.js
@@ -60,11 +60,13 @@ export default class WebPlatform extends VectorBasePlatform {
     }
 
     setNotificationCount(count: number) {
+        if (this.notificationCount === number) return;
         super.setNotificationCount(count);
         this._updateFavicon();
     }
 
     setErrorStatus(errorDidOccur: boolean) {
+        if (this.errorDidOccur === errorDidOccur) return;
         super.setErrorStatus(errorDidOccur);
         this._updateFavicon();
     }

From 9797c2fb4b8807c31847216ea04fa16341f93feb Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 26 Jan 2017 00:31:52 +0100
Subject: [PATCH 130/168] fix electron too

---
 src/vector/platform/ElectronPlatform.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js
index 47bfd9907a..18ad4a5d5b 100644
--- a/src/vector/platform/ElectronPlatform.js
+++ b/src/vector/platform/ElectronPlatform.js
@@ -58,6 +58,7 @@ function platformFriendlyName() {
 
 export default class ElectronPlatform extends VectorBasePlatform {
     setNotificationCount(count: number) {
+        if (this.notificationCount === number) return;
         super.setNotificationCount(count);
         // this sometimes throws because electron is made of fail:
         // https://github.com/electron/electron/issues/7351

From ba5e7d40138905d4a741a4dc9d8189dc107f2838 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 26 Jan 2017 00:54:00 +0100
Subject: [PATCH 131/168] fix event-encrypting-color in dark theme

---
 src/skins/vector/css/themes/_dark.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index 51930433ea..f00578cdf6 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -83,7 +83,7 @@ $roomsublist-label-bg-color: #454545;
 // ********************
 
 // event tile lifecycle
-$event-encrypting-color: #abddbc;
+$event-encrypting-color: rgba(171, 221, 188, 0.4);
 $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 

From 3c91f90dc9d325bcf2c8e80fb40067f257ed90d3 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 26 Jan 2017 09:47:01 +0000
Subject: [PATCH 132/168] Tweak desktop instructions (#3069)

to make it clear you need to do all the things in 'building from
source', including the build-react-sdk dance if you're building
develop.
---
 README.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index e4f043394a..fd6acfd778 100644
--- a/README.md
+++ b/README.md
@@ -113,12 +113,14 @@ pre-built version from https://riot.im/desktop.html or, if you prefer,
 built it yourself.
 
 To run as a desktop app:
-```
-npm install
-npm install electron
-npm run build
-node_modules/.bin/electron .
-```
+
+1. Follow the instructions in 'Building From Source' above
+2. Install electron and run it:
+
+   ```
+   npm install electron
+   node_modules/.bin/electron .
+   ```
 
 To build packages, use electron-builder. This is configured to output:
  * dmg + zip for macOS
@@ -141,11 +143,9 @@ npm run build:electron
 
 For other packages, use electron-builder manually. For example, to build a package
 for 64 bit Linux:
-```
-npm install
-npm run build
-node_modules/.bin/build -l --x64
-```
+
+ 1. Follow the instructions in 'Building From Source' above
+ 2. `node_modules/.bin/build -l --x64`
 
 All electron packages go into `electron/dist/`
 

From baed5bec466f8a8a80ed440a8130613c7714033d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 26 Jan 2017 10:18:24 +0000
Subject: [PATCH 133/168] Don't lint the autogenned file

---
 .eslintignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.eslintignore b/.eslintignore
index ea40ba2941..fabbe10497 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1 +1,2 @@
 src/vector/modernizr.js
+src/component-index.js

From f29e0bfe6d526af6643f3410fa569b8daa3c1f8e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 26 Jan 2017 12:16:44 +0000
Subject: [PATCH 134/168] Revert "Merge pull request #3067 from
 vector-im/matthew/fix-badge-spam"

This reverts commit f9db7f017d64e6bb4021fd04bfb99162b008bd79, reversing
changes made to 71b149de760724d8329b260de222aea507b70fe8.

This caused `number is not defined`
---
 src/vector/platform/ElectronPlatform.js | 1 -
 src/vector/platform/WebPlatform.js      | 2 --
 2 files changed, 3 deletions(-)

diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js
index 18ad4a5d5b..47bfd9907a 100644
--- a/src/vector/platform/ElectronPlatform.js
+++ b/src/vector/platform/ElectronPlatform.js
@@ -58,7 +58,6 @@ function platformFriendlyName() {
 
 export default class ElectronPlatform extends VectorBasePlatform {
     setNotificationCount(count: number) {
-        if (this.notificationCount === number) return;
         super.setNotificationCount(count);
         // this sometimes throws because electron is made of fail:
         // https://github.com/electron/electron/issues/7351
diff --git a/src/vector/platform/WebPlatform.js b/src/vector/platform/WebPlatform.js
index dda22f3c04..2029822b61 100644
--- a/src/vector/platform/WebPlatform.js
+++ b/src/vector/platform/WebPlatform.js
@@ -60,13 +60,11 @@ export default class WebPlatform extends VectorBasePlatform {
     }
 
     setNotificationCount(count: number) {
-        if (this.notificationCount === number) return;
         super.setNotificationCount(count);
         this._updateFavicon();
     }
 
     setErrorStatus(errorDidOccur: boolean) {
-        if (this.errorDidOccur === errorDidOccur) return;
         super.setErrorStatus(errorDidOccur);
         this._updateFavicon();
     }

From 7850f7e505d450fce42c13d3673d719ad93e6692 Mon Sep 17 00:00:00 2001
From: David Baker <dbkr@users.noreply.github.com>
Date: Thu, 26 Jan 2017 12:58:29 +0000
Subject: [PATCH 135/168] Fix badge spam: attempt 2 (#3073)

---
 src/vector/platform/ElectronPlatform.js | 1 +
 src/vector/platform/WebPlatform.js      | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/vector/platform/ElectronPlatform.js b/src/vector/platform/ElectronPlatform.js
index 47bfd9907a..c10f2f83c0 100644
--- a/src/vector/platform/ElectronPlatform.js
+++ b/src/vector/platform/ElectronPlatform.js
@@ -58,6 +58,7 @@ function platformFriendlyName() {
 
 export default class ElectronPlatform extends VectorBasePlatform {
     setNotificationCount(count: number) {
+        if (this.notificationCount === count) return;
         super.setNotificationCount(count);
         // this sometimes throws because electron is made of fail:
         // https://github.com/electron/electron/issues/7351
diff --git a/src/vector/platform/WebPlatform.js b/src/vector/platform/WebPlatform.js
index 2029822b61..bf4175132e 100644
--- a/src/vector/platform/WebPlatform.js
+++ b/src/vector/platform/WebPlatform.js
@@ -60,11 +60,13 @@ export default class WebPlatform extends VectorBasePlatform {
     }
 
     setNotificationCount(count: number) {
+        if (this.notificationCount === count) return;
         super.setNotificationCount(count);
         this._updateFavicon();
     }
 
     setErrorStatus(errorDidOccur: boolean) {
+        if (this.errorDidOccur === errorDidOccur) return;
         super.setErrorStatus(errorDidOccur);
         this._updateFavicon();
     }

From b16fa4171acd7ae61f861e94bd634fc723d60f79 Mon Sep 17 00:00:00 2001
From: Kegan Dougal <kegan@matrix.org>
Date: Thu, 26 Jan 2017 13:42:26 +0000
Subject: [PATCH 136/168] Close the dialog box after sending bugs

---
 src/components/views/dialogs/BugReportDialog.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/views/dialogs/BugReportDialog.js b/src/components/views/dialogs/BugReportDialog.js
index e3c8945a18..dcc0850ef7 100644
--- a/src/components/views/dialogs/BugReportDialog.js
+++ b/src/components/views/dialogs/BugReportDialog.js
@@ -49,6 +49,7 @@ export default class BugReportDialog extends React.Component {
         this.setState({ busy: true, err: null });
         rageshake.sendBugReport(userText, sendLogs).then(() => {
             this.setState({ busy: false });
+            this.props.onFinished(false);
         }, (err) => {
             this.setState({ busy: false, err: `Failed: ${err.message}` });
         });

From 5aa9592c71aef071bfbc2025a3fd113710edebc7 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Jan 2017 16:02:33 +0000
Subject: [PATCH 137/168] Add CSS for a support box in login

This box can be used to provide useful hints during registration/login.
---
 .../css/matrix-react-sdk/structures/login/_Login.scss      | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 30231b43da..0b73d7e545 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -44,6 +44,13 @@ limitations under the License.
     text-align: center;
 }
 
+.mx_Login_support {
+    text-align: center;
+    font-size: 13px;
+    margin-top: 0px;
+    opacity: 0.7;
+}
+
 .mx_Login_field {
     width: 100%;
     border-radius: 3px;

From 029602fc738085d1772607e702f06abd3b21c69a Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Jan 2017 16:04:24 +0000
Subject: [PATCH 138/168] Fix the width of input fields within login/reg box

This is so they do not expand outside of the login area. (280px = 300px - 2px - 18px, 2px for borders, 18px for padding)
---
 .../vector/css/matrix-react-sdk/structures/login/_Login.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 30231b43da..888f979d6d 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -45,7 +45,7 @@ limitations under the License.
 }
 
 .mx_Login_field {
-    width: 100%;
+    width: 280px;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
     font-weight: 300;

From 02d6a10f67818be7919a4237fb48f0d1d771a269 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Jan 2017 16:08:14 +0000
Subject: [PATCH 139/168] Allow a custom login logo to be displayed on login

This is to allow team logos to be shown when a user registers with a team email.
---
 src/components/views/login/VectorLoginHeader.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js
index 328672300d..b08c4fa609 100644
--- a/src/components/views/login/VectorLoginHeader.js
+++ b/src/components/views/login/VectorLoginHeader.js
@@ -23,11 +23,14 @@ module.exports = React.createClass({
     statics: {
         replaces: 'LoginHeader',
     },
+    propTypes: {
+        icon: React.PropTypes.string,
+    },
 
     render: function() {
         return (
             <div className="mx_Login_logo">
-                <img src="img/logo.png" width="195" height="195" alt="Riot"/>
+                <img src={this.props.icon || "img/logo.png"} width="195" height="195" alt="Riot"/>
             </div>
         );
     }

From 87db89b67a21a77c2535dc971022d77645cd4581 Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Fri, 27 Jan 2017 16:30:44 +0000
Subject: [PATCH 140/168] Replace inline styles for logos with css

Also, give .mx_Login_logo a height so that if the image has not loaded yet, it will not change height (thanks @dbkr)
---
 src/components/views/login/VectorLoginHeader.js              | 2 +-
 .../vector/css/matrix-react-sdk/structures/login/_Login.scss | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/views/login/VectorLoginHeader.js b/src/components/views/login/VectorLoginHeader.js
index b08c4fa609..daa2b09c67 100644
--- a/src/components/views/login/VectorLoginHeader.js
+++ b/src/components/views/login/VectorLoginHeader.js
@@ -30,7 +30,7 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_logo">
-                <img src={this.props.icon || "img/logo.png"} width="195" height="195" alt="Riot"/>
+                <img src={this.props.icon || "img/logo.png"} alt="Riot"/>
             </div>
         );
     }
diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 30231b43da..ca861c07b7 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -42,6 +42,11 @@ limitations under the License.
 
 .mx_Login_logo {
     text-align: center;
+    height: 195px;
+}
+
+.mx_Login_logo img {
+    height: 100%
 }
 
 .mx_Login_field {

From 6369d76a748fa919c9d26b30aa7d08e5e2519867 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 27 Jan 2017 18:18:14 +0100
Subject: [PATCH 141/168] poor man's dark theme for MD codeblocks

---
 src/skins/vector/css/themes/_dark.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index f00578cdf6..cf6d6effb8 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -115,3 +115,12 @@ $progressbar-color: #000;
 .gm-scrollbar .thumb {
     filter: invert();
 }
+
+.mx_EventTile_content .markdown-body pre,
+.mx_EventTile_content .markdown-body code {
+    filter: invert();
+}
+
+.mx_EventTile_content .markdown-body pre code {
+    filter: none;
+}
\ No newline at end of file

From 3404521d5d06687273ad16dd0c27512efb8f3e2e Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Wed, 1 Feb 2017 16:11:11 +0000
Subject: [PATCH 142/168] Fix jenkins build

Do `npm install` on js-sdk rather than `npm run build`, which will hopefully
mean that `browserify` gets installed before we try to run it.

The README says we should use `npm install` for the react-sdk too, so let's do
that, and bring the travis and jenkins builds into sync with the README.
---
 .travis.yml        | 2 +-
 scripts/jenkins.sh | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index af738bb429..9720d8872f 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -4,4 +4,4 @@ node_js:
 install:
     - npm install
     - (cd node_modules/matrix-js-sdk && npm install)
-    - (cd node_modules/matrix-react-sdk && npm run build)
+    - (cd node_modules/matrix-react-sdk && npm install)
diff --git a/scripts/jenkins.sh b/scripts/jenkins.sh
index 5ccc199164..0f4fac2513 100755
--- a/scripts/jenkins.sh
+++ b/scripts/jenkins.sh
@@ -20,8 +20,8 @@ rm -r node_modules/olm
 cp -r olm/package node_modules/olm
 
 # we may be using dev branches of js-sdk and react-sdk, in which case we need to build them
-(cd node_modules/matrix-js-sdk && npm run build)
-(cd node_modules/matrix-react-sdk && npm run build)
+(cd node_modules/matrix-js-sdk && npm install)
+(cd node_modules/matrix-react-sdk && npm install)
 
 # run the mocha tests
 npm run test

From 23060a683353fadf7e0f9ec83d64fc8ee250eb75 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Wed, 1 Feb 2017 22:24:14 +0000
Subject: [PATCH 143/168] fix ugly blue border on roomtiles

---
 .../vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss   | 5 +++++
 src/skins/vector/css/themes/_base.scss                       | 1 +
 src/skins/vector/css/themes/_dark.scss                       | 1 +
 3 files changed, 7 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
index 5ca4ac1788..34cc21d4a3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomTile.scss
@@ -190,6 +190,11 @@ limitations under the License.
     background-color: $roomtile-selected-bg-color;
 }
 
+.mx_RoomTile:focus {
+    outline: 0;
+    background-color: $roomtile-focused-bg-color;
+}
+
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {
     width: 140px;
 }
diff --git a/src/skins/vector/css/themes/_base.scss b/src/skins/vector/css/themes/_base.scss
index db921034de..7612c68144 100644
--- a/src/skins/vector/css/themes/_base.scss
+++ b/src/skins/vector/css/themes/_base.scss
@@ -76,6 +76,7 @@ $voip-accept-color: #80f480;
 
 $roomtile-name-color: rgba(69, 69, 69, 0.8);
 $roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
+$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
 
 $roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #d3efe1;
diff --git a/src/skins/vector/css/themes/_dark.scss b/src/skins/vector/css/themes/_dark.scss
index cf6d6effb8..54a117ea08 100644
--- a/src/skins/vector/css/themes/_dark.scss
+++ b/src/skins/vector/css/themes/_dark.scss
@@ -76,6 +76,7 @@ $voip-accept-color: #80f480;
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
 $roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
+$roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
 
 $roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;

From b137c82a7a05b8eba0859cb6a3ccf8b94f973ea0 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 00:25:18 +0000
Subject: [PATCH 144/168] tweak CSS for UnknownDeviceDialog to support
 scrollable content

---
 .../views/dialogs/_UnknownDeviceDialog.scss   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
index 3a9b64d159..579e385249 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
@@ -14,6 +14,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+// CSS voodoo to support a gemini-scrollbar for the contents of the dialog
+.mx_Dialog_unknownDevice .mx_Dialog {
+    // ideally we'd shrink the height to fit when needed, but in practice this
+    // is a pain in the ass. plus might as well make the dialog big given how
+    // important it is.
+    height: 100%;
+
+    // position the gemini scrollbar nicely
+    padding-right: 58px;
+}
+
+.mx_UnknownDeviceDialog {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.mx_UnknownDeviceDialog .mx_Dialog_content {
+    margin-bottom: 24px;
+}
+
 .mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
     float: right;
     clear: both;

From 874e32699ab6233f8b5e9957eb934931a008a27e Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Thu, 2 Feb 2017 11:30:14 +0000
Subject: [PATCH 145/168] Handle icons with width > height

Icons with width > height will now only assume a max-height of 100% as opposed to a height of 100%. This is so they don't overflow the width of 300px.
---
 .../vector/css/matrix-react-sdk/structures/login/_Login.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
index 39c65e5d18..a359627af3 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/login/_Login.scss
@@ -46,7 +46,7 @@ limitations under the License.
 }
 
 .mx_Login_logo img {
-    height: 100%
+    max-height: 100%
 }
 
 .mx_Login_support {

From c6def48fe087663319c57ac1a693fb1dea7189c1 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 13:32:36 +0000
Subject: [PATCH 146/168] try to make joining rooms more obvious

---
 .../vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
index 34ff3a8670..cc2e42787c 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss
@@ -17,6 +17,7 @@ limitations under the License.
 .mx_RoomPreviewBar {
     text-align: center;
     height: 176px;
+    background-color: $event-selected-color;
     align-items: center;
     flex-direction: column;
     justify-content: center;

From c4a590f6afd0468e6e124e443d73c300739b4e36 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 16:18:12 +0000
Subject: [PATCH 147/168] CSS for empty timelinepanels

---
 .../css/matrix-react-sdk/structures/_RoomView.scss     | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
index 55771f7945..37c68ad9e6 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss
@@ -107,6 +107,16 @@ limitations under the License.
     justify-content: flex-start;
 }
 
+.mx_RoomView_empty {
+    flex: 1 1 auto;
+    font-size: 13px;
+    padding-left: 3em;
+    padding-right: 3em;
+    margin-right: 20px;
+    margin-top: 33%;
+    text-align: center;
+}
+
 .mx_RoomView_MessageList {
     width: 100%;
     list-style-type: none;

From 4c3a723aa8c7dc219e8699a1a9315648d162b756 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Thu, 2 Feb 2017 18:42:03 +0000
Subject: [PATCH 148/168] make TopRightMenu more intuitive

should fix https://github.com/vector-im/riot-web/issues/2827
---
 src/components/structures/RightPanel.js       | 45 +++++--------------
 src/components/structures/SearchBox.js        |  4 +-
 .../vector-web/structures/_RightPanel.scss    | 11 ++++-
 3 files changed, 23 insertions(+), 37 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index d1622e5f41..1adc31649e 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -69,45 +69,21 @@ module.exports = React.createClass({
     },
 
     onMemberListButtonClick: function() {
-        if (this.props.collapsed || this.state.phase !== this.Phase.MemberList) {
-            this.setState({ phase: this.Phase.MemberList });
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
-        }
-        else {
-            dis.dispatch({
-                action: 'hide_right_panel',
-            });
-        }
+        this.setState({ phase: this.Phase.MemberList });
     },
 
     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',
-            });
-        }
+        this.setState({ phase: this.Phase.FilePanel });
     },
 
     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',
-            });
-        }
+        this.setState({ phase: this.Phase.NotificationPanel });
+    },
+
+    onCollapseClick: function() {
+        dis.dispatch({
+            action: 'hide_right_panel',
+        });
     },
 
     onInviteButtonClick: function() {
@@ -235,6 +211,9 @@ module.exports = React.createClass({
                             <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
                             { notificationsHighlight }
                         </div>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
+                            <TintableSvg src="img/minimise.svg" width="10" height="16"/>
+                        </div>
                     </div>;
         }
 
diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js
index 7fc5100049..20181f75b4 100644
--- a/src/components/structures/SearchBox.js
+++ b/src/components/structures/SearchBox.js
@@ -68,13 +68,13 @@ module.exports = React.createClass({
         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;"/>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
                 </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;"/>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
                 </div>
         }
 
diff --git a/src/skins/vector/css/vector-web/structures/_RightPanel.scss b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
index 91034e633d..c0872e82d7 100644
--- a/src/skins/vector/css/vector-web/structures/_RightPanel.scss
+++ b/src/skins/vector/css/vector-web/structures/_RightPanel.scss
@@ -34,14 +34,15 @@ limitations under the License.
 
 .mx_RightPanel_headerButtonGroup {
     margin-top: 6px;
-    float: left;
+    display: flex;
+    width: 100%;
     background-color: $primary-bg-color;
     margin-left: 0px;
 }
 
 .mx_RightPanel_headerButton {
     cursor: pointer;
-    display: table-cell;
+    flex: 0;
     vertical-align: top;
     padding-left: 4px;
     padding-right: 5px;
@@ -69,6 +70,12 @@ limitations under the License.
     padding-bottom: 2px;
 }
 
+.mx_RightPanel_collapsebutton {
+    flex: 1;
+    text-align: right;
+    margin-top: 20px;
+}
+
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
 .mx_RightPanel_blank {

From 3903954bf22290ac133e7972d71752ab67d21504 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Thu, 2 Feb 2017 19:35:36 +0000
Subject: [PATCH 149/168] Allow mxc: URLs for icons in the NetworkDropdown

For https://github.com/vector-im/riot-web/issues/3086
---
 src/components/views/directory/NetworkDropdown.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/views/directory/NetworkDropdown.js b/src/components/views/directory/NetworkDropdown.js
index 4ce094bc37..c891ee5b29 100644
--- a/src/components/views/directory/NetworkDropdown.js
+++ b/src/components/views/directory/NetworkDropdown.js
@@ -181,7 +181,10 @@ export default class NetworkDropdown extends React.Component {
             span_class = 'mx_NetworkDropdown_menu_network';
         } else {
             key = server + '_inst_' + instance.instance_id;
-            icon = <img src={instance.icon || DEFAULT_ICON_URL} />;
+            const imgUrl = instance.icon ?
+                MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
+                DEFAULT_ICON_URL;
+            icon = <img src={imgUrl} />;
             name = instance.desc;
             span_class = 'mx_NetworkDropdown_menu_network';
         }

From 1c2de1e483210f93ebe8163a36fd1468403b725d Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 2 Feb 2017 23:31:22 +0000
Subject: [PATCH 150/168] Refactor karma config

- rename test:multi npm target to test-multi, for consistency with react-sdk
- base karma webpack config on the distribution one
- include Olm if we have it
- don't use the karma source loader - it's pointless given we webpack
  everything.
- turn off module listing in the webpack stats to shorten the console output
---
 karma.conf.js | 105 ++++++++++++++++++++++++--------------------------
 package.json  |   3 +-
 2 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/karma.conf.js b/karma.conf.js
index 901832c78c..b0a48c92ba 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -2,13 +2,14 @@
 
 var path = require('path');
 var webpack = require('webpack');
+var webpack_config = require('./webpack.config');
 
 /*
  * 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
+ * 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.
  */
@@ -19,8 +20,41 @@ var testFile = process.env.KARMA_TEST_FILE || 'test/all-tests.js';
 process.env.PHANTOMJS_BIN = 'node_modules/.bin/phantomjs';
 process.env.Q_DEBUG = 1;
 
+/* the webpack config is based on the real one, to (a) try to simulate the
+ * deployed environment as closely as possible, and (b) to avoid a shedload of
+ * cut-and-paste.
+ */
+
+// find out if we're shipping olm, and where it is, if so.
+const olm_entry = webpack_config.entry['olm'];
+
+// remove the default entries - karma provides its own (via the 'files' and
+// 'preprocessors' config below)
+delete webpack_config['entry'];
+
+// add ./test as a search path for js
+webpack_config.module.loaders.unshift({
+    test: /\.js$/, loader: "babel",
+    include: [path.resolve('./src'), path.resolve('./test')],
+});
+
+// disable parsing for sinon, because it
+// tries to do voodoo with 'require' which upsets
+// webpack (https://github.com/webpack/webpack/issues/304)
+webpack_config.module.noParse.push(/sinon\/pkg\/sinon\.js$/);
+
+// ?
+webpack_config.resolve.alias['sinon'] = 'sinon/pkg/sinon.js';
+
+webpack_config.resolve.root = [
+    path.resolve('./src'),
+    path.resolve('./test'),
+];
+
+webpack_config.devtool = 'inline-source-map';
+
 module.exports = function (config) {
-    config.set({
+    const myconfig = {
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
         frameworks: ['mocha'],
@@ -51,7 +85,7 @@ module.exports = function (config) {
         // available preprocessors:
         // https://npmjs.org/browse/keyword/karma-preprocessor
         preprocessors: {
-            'test/**/*.js': ['webpack', 'sourcemap']
+            '{src,test}/**/*.js': ['webpack'],
         },
 
         // test results reporter to use
@@ -94,59 +128,20 @@ module.exports = function (config) {
             outputDir: 'karma-reports',
         },
 
-        webpack: {
-            module: {
-                preLoaders: [
-                    // use the source-map-loader for javascript. This means
-                    // that we have a better chance of seeing line numbers from
-                    // the pre-babeled source.
-                    { test: /\.js$/, loader: "source-map-loader" },
-                ],
-                loaders: [
-                    { test: /\.json$/, loader: "json" },
-                    {
-                        test: /\.js$/, loader: "babel",
-                        include: [path.resolve('./src'),
-                                  path.resolve('./test'),
-                                 ]
-                    },
-                ],
-                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/,
+        webpack: webpack_config,
 
-                    // 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$/,
-                ],
+        webpackMiddleware: {
+            stats: {
+                // don't fill the console up with a mahoosive list of modules
+                chunks: false,
             },
-            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',
         },
-    });
+    };
+
+    // include the olm loader if we have it.
+    if (olm_entry) {
+        myconfig.files.unshift(olm_entry);
+    }
+
+    config.set(myconfig);
 };
diff --git a/package.json b/package.json
index 915056e636..d48eaffe62 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "clean": "rimraf lib webapp electron/dist",
     "prepublish": "npm run build:compile",
     "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
-    "test:multi": "karma start"
+    "test-multi": "karma start"
   },
   "dependencies": {
     "babel-polyfill": "^6.5.0",
@@ -111,7 +111,6 @@
     "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",
     "minimist": "^1.2.0",
     "mkdirp": "^0.5.1",

From 5368c87dc142b42f60fb9e6b7cad3c876a11e374 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Thu, 2 Feb 2017 23:41:49 +0000
Subject: [PATCH 151/168] Fix tests to run crypto code

Return a device_id from /login requests, so that all the crypto logic works.
---
 test/app-tests/loading.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/test/app-tests/loading.js b/test/app-tests/loading.js
index 4504d00b8d..d2cb78d04b 100644
--- a/test/app-tests/loading.js
+++ b/test/app-tests/loading.js
@@ -193,6 +193,7 @@ describe('loading:', function () {
                     expect(req.data.password).toEqual('pass');
                 }).respond(200, {
                     user_id: '@user:id',
+                    device_id: 'DEVICE_ID',
                     access_token: 'access_token',
                 });
                 login.onPasswordLogin("user", "pass")
@@ -393,6 +394,7 @@ describe('loading:', function () {
                     expect(req.data.token).toEqual("secretToken");
                 }).respond(200, {
                     user_id: "@user:localhost",
+                    device_id: 'DEVICE_ID',
                     access_token: "access_token",
                 });
 

From 654a025a9fdefd366882e23d308b13e6e40defd5 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 3 Feb 2017 01:57:54 +0000
Subject: [PATCH 152/168] fix button width for unkdevdialog

---
 .../matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
index 579e385249..804b3f419e 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss
@@ -54,7 +54,7 @@ limitations under the License.
     margin-right: 8px;
     padding-left: 0.5em;
     padding-right: 0.5em;
-    width: 70px;
+    width: 85px;
     outline: none;
     cursor: pointer;
     color: $accent-color;

From 0050e1557d128f04ff184293e8dac5e947307016 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Fri, 3 Feb 2017 01:58:01 +0000
Subject: [PATCH 153/168] fix darktheme for close button

---
 src/skins/vector/img/icons-close.svg | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/skins/vector/img/icons-close.svg b/src/skins/vector/img/icons-close.svg
index 6feb660aff..453b51082f 100644
--- a/src/skins/vector/img/icons-close.svg
+++ b/src/skins/vector/img/icons-close.svg
@@ -3,7 +3,7 @@
 <svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-11 13 24 24" xml:space="preserve">
 <style type="text/css">
-	.st1{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+	.st1{fill:none;stroke-width:2;stroke-linecap:round;}
 </style>
 <title>icons_create_room</title>
 <desc>Created with sketchtool.</desc>
@@ -13,8 +13,8 @@
 			<g id="Room-list_x2F_Footer" transform="translate(0.000000, 708.000000)" sketch:type="MSShapeGroup">
 				<g id="icons_create_room" transform="translate(20.000000, 18.000000)">
 					<circle id="Oval-1-Copy-7" fill="#76CFA6" cx="1" cy="25" r="12"/>
-					<path id="Line" class="st1" d="M-2.5,28.5l7.1-7.1"/>
-					<path id="Line_1_" class="st1" d="M-2.5,21.5l7.1,7.1"/>
+					<path id="Line" class="st1" stroke="#FFFFFF" d="M-2.5,28.5l7.1-7.1"/>
+					<path id="Line_1_" class="st1" stroke="#FFFFFF" d="M-2.5,21.5l7.1,7.1"/>
 				</g>
 			</g>
 		</g>

From b20f6ff8c17d2b659d10bf43378f59a7a7802db3 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 11:40:07 +0000
Subject: [PATCH 154/168] Silence webpack dev server

Configure the dev server not to spew module lists all over the console.

(Arguably the fact our module list is so long that I have to do this is a bug,
but my life is too short)
---
 webpack.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/webpack.config.js b/webpack.config.js
index 136e0af754..f3cffa0ea7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -132,6 +132,11 @@ module.exports = {
     devServer: {
         // serve unwebpacked assets from webapp.
         contentBase: './webapp',
+
+        stats: {
+            // don't fill the console up with a mahoosive list of modules
+            chunks: false,
+        },
     },
 };
 

From 7ceaabb166fe1c07357e0d7d99f23cbc62c07c93 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 12:00:33 +0000
Subject: [PATCH 155/168] RightPanel: remove superfluous divs

---
 src/components/structures/RightPanel.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/structures/RightPanel.js b/src/components/structures/RightPanel.js
index f609a4cd46..04a981196b 100644
--- a/src/components/structures/RightPanel.js
+++ b/src/components/structures/RightPanel.js
@@ -197,27 +197,26 @@ module.exports = React.createClass({
         if (this.props.roomId) {
             buttonGroup =
                     <div className="mx_RightPanel_headerButtonGroup">
-                        <div className="mx_RightPanel_headerButton">
-                        <AccessibleButton title="Members" onClick={ this.onMemberListButtonClick }>
+                        <AccessibleButton className="mx_RightPanel_headerButton"
+                                title="Members" onClick={ this.onMemberListButtonClick }>
                             <div className="mx_RightPanel_headerButton_badge">{ membersBadge ? membersBadge : <span>&nbsp;</span>}</div>
                             <TintableSvg src="img/icons-people.svg" width="25" height="25"/>
                             { membersHighlight }
                         </AccessibleButton>
-                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_filebutton">
-                        <AccessibleButton title="Files" onClick={ this.onFileListButtonClick }>
+                        <AccessibleButton
+                                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 }
                         </AccessibleButton>
-                        </div>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_notificationbutton">
-                        <AccessibleButton title="Notifications" onClick={ this.onNotificationListButtonClick }>
+                        <AccessibleButton
+                                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 }
                         </AccessibleButton>
-                        </div>
                         <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
                             <TintableSvg src="img/minimise.svg" width="10" height="16"/>
                         </div>
@@ -262,4 +261,3 @@ module.exports = React.createClass({
         );
     }
 });
-

From cad2d72bfe90759dd9719a30c255456ce016fb9d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 12:15:36 +0000
Subject: [PATCH 156/168] Release js-sdk & react-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index d48eaffe62..c0fc62bc82 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
-    "matrix-react-sdk": "matrix-org/matrix-react-sdk#develop",
+    "matrix-js-sdk": "0.7.5-rc.1",
+    "matrix-react-sdk": "0.8.6-rc.1",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 8f86cfa2d3a89ed2394a7e9d314f9f7954ab4734 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 12:17:28 +0000
Subject: [PATCH 157/168] Prepare changelog for v0.9.7-rc.1

---
 CHANGELOG.md | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee745baa1b..aa131ff5c9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,84 @@
+Changes in [0.9.7-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.1) (2017-02-03)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6...v0.9.7-rc.1)
+
+ * Better user interface for screen readers and keyboard navigation
+   [\#2946](https://github.com/vector-im/riot-web/pull/2946)
+ * Allow mxc: URLs for icons in the NetworkDropdown
+   [\#3118](https://github.com/vector-im/riot-web/pull/3118)
+ * make TopRightMenu more intuitive
+   [\#3117](https://github.com/vector-im/riot-web/pull/3117)
+ * Handle icons with width > height
+   [\#3110](https://github.com/vector-im/riot-web/pull/3110)
+ * Fix jenkins build
+   [\#3105](https://github.com/vector-im/riot-web/pull/3105)
+ * Add CSS for a support box in login
+   [\#3081](https://github.com/vector-im/riot-web/pull/3081)
+ * Allow a custom login logo to be displayed on login
+   [\#3082](https://github.com/vector-im/riot-web/pull/3082)
+ * Fix the width of input fields within login/reg box
+   [\#3080](https://github.com/vector-im/riot-web/pull/3080)
+ * Set BaseAvatar_image bg colour = #fff
+   [\#3057](https://github.com/vector-im/riot-web/pull/3057)
+ * only recalculate favicon if it changes
+   [\#3067](https://github.com/vector-im/riot-web/pull/3067)
+ * CSS tweak for email address lookup
+   [\#3064](https://github.com/vector-im/riot-web/pull/3064)
+ * Glue the dialog to rageshake: honour sendLogs flag.
+   [\#3061](https://github.com/vector-im/riot-web/pull/3061)
+ * Don't use hash-named directory for dev server
+   [\#3049](https://github.com/vector-im/riot-web/pull/3049)
+ * Implement bug reporting logic
+   [\#3000](https://github.com/vector-im/riot-web/pull/3000)
+ * Add css for bug report dialog
+   [\#3045](https://github.com/vector-im/riot-web/pull/3045)
+ * Increase the max-height of the expanded status bar
+   [\#3043](https://github.com/vector-im/riot-web/pull/3043)
+ * Hopefully, fix intermittent test failure
+   [\#3040](https://github.com/vector-im/riot-web/pull/3040)
+ * CSS for 'searching known users'
+   [\#2971](https://github.com/vector-im/riot-web/pull/2971)
+ * Animate status bar max-height and margin-top
+   [\#2981](https://github.com/vector-im/riot-web/pull/2981)
+ * Add eslint config
+   [\#3032](https://github.com/vector-im/riot-web/pull/3032)
+ * Re-position typing avatars relative to "is typing"
+   [\#3030](https://github.com/vector-im/riot-web/pull/3030)
+ * CSS for avatars that appear when users are typing
+   [\#2998](https://github.com/vector-im/riot-web/pull/2998)
+ * Add StartupWMClass
+   [\#3001](https://github.com/vector-im/riot-web/pull/3001)
+ * Fix link to image for event options menu
+   [\#3002](https://github.com/vector-im/riot-web/pull/3002)
+ * Make riot desktop single instance
+   [\#2999](https://github.com/vector-im/riot-web/pull/2999)
+ * Add electron tray icon
+   [\#2997](https://github.com/vector-im/riot-web/pull/2997)
+ * Fixes to electron desktop notifs
+   [\#2994](https://github.com/vector-im/riot-web/pull/2994)
+ * Auto-hide the electron menu bar
+   [\#2975](https://github.com/vector-im/riot-web/pull/2975)
+ * A couple of tweaks to the karma config
+   [\#2987](https://github.com/vector-im/riot-web/pull/2987)
+ * Deploy script
+   [\#2974](https://github.com/vector-im/riot-web/pull/2974)
+ * Use the postcss-webpack-loader
+   [\#2990](https://github.com/vector-im/riot-web/pull/2990)
+ * Switch CSS to using postcss, and implement a dark theme.
+   [\#2973](https://github.com/vector-im/riot-web/pull/2973)
+ * Update redeploy script to keep old bundles
+   [\#2969](https://github.com/vector-im/riot-web/pull/2969)
+ * Include current version in update check explicitly
+   [\#2967](https://github.com/vector-im/riot-web/pull/2967)
+ * Add another layer of directory to webpack chunks
+   [\#2966](https://github.com/vector-im/riot-web/pull/2966)
+ * Fix links to fonts and images from CSS
+   [\#2965](https://github.com/vector-im/riot-web/pull/2965)
+ * Put parent build hash in webpack output filenames
+   [\#2961](https://github.com/vector-im/riot-web/pull/2961)
+ * update README to point to new names/locations
+   [\#2846](https://github.com/vector-im/riot-web/pull/2846)
+
 Changes in [0.9.6](https://github.com/vector-im/riot-web/releases/tag/v0.9.6) (2017-01-16)
 ==========================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6-rc.1...v0.9.6)

From 3d45aa7455d23c6c31195fcda4e1295c586f2409 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 12:17:28 +0000
Subject: [PATCH 158/168] v0.9.7-rc.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index c0fc62bc82..dd333b0009 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.6",
+  "version": "0.9.7-rc.1",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From 51de4a3347711130f5f1798a52637461304f904f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 13:08:20 +0000
Subject: [PATCH 159/168] Bump js-sdk & react-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index dd333b0009..4610acb8f2 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.5-rc.1",
-    "matrix-react-sdk": "0.8.6-rc.1",
+    "matrix-js-sdk": "0.7.5-rc.2",
+    "matrix-react-sdk": "0.8.6-rc.2",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 4d8bdfa07e7bb93d4998533da415b0953474129d Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 13:19:22 +0000
Subject: [PATCH 160/168] Prepare changelog for v0.9.7-rc.2

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa131ff5c9..81b8553a69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+Changes in [0.9.7-rc.2](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.2) (2017-02-03)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.1...v0.9.7-rc.2)
+
+ * Update matrix-js-sdk to get new device change
+   notifications interface for more reliable e2e crypto
+
+
 Changes in [0.9.7-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.1) (2017-02-03)
 ====================================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6...v0.9.7-rc.1)

From c2d2287541ae6e812c3b789e280f5adbdded0381 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 13:19:22 +0000
Subject: [PATCH 161/168] v0.9.7-rc.2

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4610acb8f2..a62109490a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.7-rc.1",
+  "version": "0.9.7-rc.2",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From d176e83e94c1c7a1240397f77da95a1d8bdad1df Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 15:34:15 +0000
Subject: [PATCH 162/168] Bump matrix-js-sdk and react-sdk

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index a62109490a..146a5d36c5 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.5-rc.2",
-    "matrix-react-sdk": "0.8.6-rc.2",
+    "matrix-js-sdk": "0.7.5-rc.3",
+    "matrix-react-sdk": "0.8.6-rc.3",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From e0be012737ccfc8b314a8503c160c77e246c8012 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 3 Feb 2017 13:51:02 +0000
Subject: [PATCH 163/168] Bump olm version

Looks like this is causing pickle errors on packaged builds.
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 146a5d36c5..f3ded26929 100644
--- a/package.json
+++ b/package.json
@@ -133,7 +133,7 @@
     "webpack-dev-server": "^1.16.2"
   },
   "optionalDependencies": {
-    "olm": "https://matrix.org/packages/npm/olm/olm-2.1.0.tgz"
+    "olm": "https://matrix.org/packages/npm/olm/olm-2.2.1.tgz"
   },
   "build": {
     "appId": "im.riot.app",

From 961f279a822bc18d7a7815c9e539f6500e66c46b Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 15:44:37 +0000
Subject: [PATCH 164/168] Prepare changelog for v0.9.7-rc.3

---
 CHANGELOG.md | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 81b8553a69..7593166c4f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+Changes in [0.9.7-rc.3](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.3) (2017-02-03)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.2...v0.9.7-rc.3)
+ * Update to latest Olm to fix key import/export and use of megolm sessions
+   created on more recent versions
+ * Update to latest matrix-react-sdk and matrix-js-sdk to fix e2e device
+   handling
+
 Changes in [0.9.7-rc.2](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.2) (2017-02-03)
 ====================================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.1...v0.9.7-rc.2)
@@ -5,7 +13,6 @@ Changes in [0.9.7-rc.2](https://github.com/vector-im/riot-web/releases/tag/v0.9.
  * Update matrix-js-sdk to get new device change
    notifications interface for more reliable e2e crypto
 
-
 Changes in [0.9.7-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.1) (2017-02-03)
 ====================================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.6...v0.9.7-rc.1)

From dea557619c0d85999447b03fa80e3bb49d979739 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Fri, 3 Feb 2017 15:44:37 +0000
Subject: [PATCH 165/168] v0.9.7-rc.3

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index f3ded26929..44d6e67cfd 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.7-rc.2",
+  "version": "0.9.7-rc.3",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {

From cd7bc3bfd3d131ef505102e3c89bfab16da1e117 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Sat, 4 Feb 2017 10:52:41 +0000
Subject: [PATCH 166/168] Bump to js-sdk 0.7.5 and react-sdk 0.8.6

---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 44d6e67cfd..4b0e5d234b 100644
--- a/package.json
+++ b/package.json
@@ -62,8 +62,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.7.5-rc.3",
-    "matrix-react-sdk": "0.8.6-rc.3",
+    "matrix-js-sdk": "0.7.5",
+    "matrix-react-sdk": "0.8.6",
     "modernizr": "^3.1.0",
     "q": "^1.4.1",
     "react": "^15.4.0",

From 08cdf21aeedc67ec43b53d369fad34872c9d2308 Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Sat, 4 Feb 2017 10:55:46 +0000
Subject: [PATCH 167/168] Prepare changelog for v0.9.7

---
 CHANGELOG.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7593166c4f..659a3742c6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+Changes in [0.9.7](https://github.com/vector-im/riot-web/releases/tag/v0.9.7) (2017-02-04)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.3...v0.9.7)
+
+ * Update to matrix-js-sdk 0.7.5 (no changes from 0.7.5-rc.3)
+ * Update to matrix-react-sdk 0.8.6 (no changes from 0.8.6-rc.3)
+
 Changes in [0.9.7-rc.3](https://github.com/vector-im/riot-web/releases/tag/v0.9.7-rc.3) (2017-02-03)
 ====================================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.9.7-rc.2...v0.9.7-rc.3)

From dc1a0c554f7a7ec74e95be3d63a58a93c3cc438f Mon Sep 17 00:00:00 2001
From: Richard van der Hoff <richard@matrix.org>
Date: Sat, 4 Feb 2017 10:55:46 +0000
Subject: [PATCH 168/168] v0.9.7

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b0e5d234b..155523af6c 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron/src/electron-main.js",
-  "version": "0.9.7-rc.3",
+  "version": "0.9.7",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {