Merge remote-tracking branch 'origin/experimental' into dbkr/sas

.eslintignore.errorfiles

@@ -1,11 +1,9 @@
 # autogenerated file: run scripts/generate-eslint-error-ignore-file to update.
 
 src/component-index.js
+src/components/structures/auth/ForgotPassword.js
 src/components/structures/BottomLeftMenu.js
-src/components/structures/CompatibilityPage.js
 src/components/structures/CreateRoom.js
-src/components/structures/LoggedInView.js
-src/components/structures/login/ForgotPassword.js
 src/components/structures/MessagePanel.js
 src/components/structures/NotificationPanel.js
 src/components/structures/RoomDirectory.js
@@ -15,6 +13,11 @@ src/components/structures/ScrollPanel.js
 src/components/structures/SearchBox.js
 src/components/structures/TimelinePanel.js
 src/components/structures/UploadBar.js
+src/components/views/auth/CountryDropdown.js
+src/components/views/auth/InteractiveAuthEntryComponents.js
+src/components/views/auth/PasswordLogin.js
+src/components/views/auth/RegistrationForm.js
+src/components/views/auth/ServerConfig.js
 src/components/views/avatars/BaseAvatar.js
 src/components/views/avatars/MemberAvatar.js
 src/components/views/create_room/RoomAlias.js
@@ -31,11 +34,6 @@ src/components/views/elements/UserSelector.js
 src/components/views/globals/MatrixToolbar.js
 src/components/views/globals/NewVersionBar.js
 src/components/views/globals/UpdateCheckBar.js
-src/components/views/login/CountryDropdown.js
-src/components/views/login/InteractiveAuthEntryComponents.js
-src/components/views/login/PasswordLogin.js
-src/components/views/login/RegistrationForm.js
-src/components/views/login/ServerConfig.js
 src/components/views/messages/MFileBody.js
 src/components/views/messages/RoomAvatarEvent.js
 src/components/views/messages/TextualBody.js
@@ -98,12 +96,12 @@ src/VectorConferenceHandler.js
 src/Velociraptor.js
 src/WhoIsTyping.js
 src/wrappers/withMatrixClient.js
-test/components/structures/login/Registration-test.js
+test/components/structures/auth/Registration-test.js
 test/components/structures/MessagePanel-test.js
 test/components/structures/ScrollPanel-test.js
 test/components/structures/TimelinePanel-test.js
+test/components/views/auth/RegistrationForm-test.js
 test/components/views/dialogs/InteractiveAuthDialog-test.js
-test/components/views/login/RegistrationForm-test.js
 test/components/views/rooms/MessageComposerInput-test.js
 test/components/views/rooms/RoomSettings-test.js
 test/mock-clock.js

.eslintrc.js

@@ -42,9 +42,8 @@ module.exports = {
 
         // bind or arrow function in props causes performance issues
         // (but we currently use them in some places)
-        "react/jsx-no-bind": ["warn", {
+        // It's disabled here, but we should using it sparingly.
-            "ignoreRefs": true,
+        "react/jsx-no-bind": "off",
-        }],
         "react/jsx-key": ["error"],
 
         // Components in JSX should always be defined.

karma.conf.js

@@ -168,6 +168,10 @@ module.exports = function (config) {
                                   path.resolve('./test'),
                                  ]
                     },
+                    {
+                        test: /\.(gif|png|svg|ttf)$/,
+                        loader: 'file-loader',
+                    },
                 ],
                 noParse: [
                     // for cross platform compatibility use [\\\/] as the path separator

package.json

@@ -37,6 +37,7 @@
   "scripts": {
     "reskindex": "node scripts/reskindex.js -h header",
     "reskindex:watch": "node scripts/reskindex.js -h header -w",
+    "rethemendex": "res/css/rethemendex.sh",
     "i18n": "matrix-gen-i18n",
     "prunei18n": "matrix-prune-i18n",
     "build": "npm run reskindex && npm run start:init",
@@ -47,7 +48,7 @@
     "start:init": "babel src -d lib --source-maps --copy-files",
     "lint": "eslint src/",
     "lintall": "eslint src/ test/",
-    "lintwithexclusions": "eslint --max-warnings 18 --ignore-path .eslintignore.errorfiles src test",
+    "lintwithexclusions": "eslint --max-warnings 13 --ignore-path .eslintignore.errorfiles src test",
     "clean": "rimraf lib",
     "prepublish": "npm run clean && npm run build && git rev-parse HEAD > git-revision.txt",
     "test": "karma start --single-run=true --browsers ChromeHeadless",
@@ -125,6 +126,7 @@
     "eslint-plugin-react": "^7.7.0",
     "estree-walker": "^0.5.0",
     "expect": "^23.6.0",
+    "file-loader": "^3.0.1",
     "flow-parser": "^0.57.3",
     "jest-mock": "^23.2.0",
     "karma": "^3.0.0",

res/css/_common.scss

@@ -160,7 +160,7 @@ textarea {
     padding: 0 58px 36px;
     width: 60%;
     max-width: 704px;
-    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
     max-height: 80%;
     overflow-y: auto;
 }
@@ -171,7 +171,7 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: $dialog-background-bg-color;
+    background-color: $dialog-backdrop-color;
     opacity: 0.8;
 }
 

res/css/_components.scss

@@ -8,7 +8,6 @@
 @import "./structures/_GroupView.scss";
 @import "./structures/_HomePage.scss";
 @import "./structures/_LeftPanel.scss";
-@import "./structures/_LoginBox.scss";
 @import "./structures/_MatrixChat.scss";
 @import "./structures/_MyGroups.scss";
 @import "./structures/_NotificationPanel.scss";
@@ -18,12 +17,21 @@
 @import "./structures/_RoomSubList.scss";
 @import "./structures/_RoomView.scss";
 @import "./structures/_SearchBox.scss";
+@import "./structures/_TabbedView.scss";
 @import "./structures/_TagPanel.scss";
 @import "./structures/_TopLeftMenuButton.scss";
 @import "./structures/_UploadBar.scss";
 @import "./structures/_UserSettings.scss";
 @import "./structures/_ViewSource.scss";
-@import "./structures/login/_Login.scss";
+@import "./structures/auth/_Login.scss";
+@import "./views/auth/_AuthBody.scss";
+@import "./views/auth/_AuthButtons.scss";
+@import "./views/auth/_AuthFooter.scss";
+@import "./views/auth/_AuthHeader.scss";
+@import "./views/auth/_AuthHeaderLogo.scss";
+@import "./views/auth/_AuthPage.scss";
+@import "./views/auth/_InteractiveAuthEntryComponents.scss";
+@import "./views/auth/_ServerConfig.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_MemberStatusMessageAvatar.scss";
 @import "./views/context_menus/_MessageContextMenu.scss";
@@ -49,6 +57,7 @@
 @import "./views/dialogs/_SetPasswordDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
+@import "./views/dialogs/_UserSettingsDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
 @import "./views/dialogs/keybackup/_KeyBackupFailedDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
@@ -59,6 +68,7 @@
 @import "./views/elements/_DirectorySearchBox.scss";
 @import "./views/elements/_Dropdown.scss";
 @import "./views/elements/_EditableItemList.scss";
+@import "./views/elements/_Field.scss";
 @import "./views/elements/_HexVerify.scss";
 @import "./views/elements/_ImageView.scss";
 @import "./views/elements/_InlineSpinner.scss";
@@ -75,8 +85,6 @@
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
 @import "./views/groups/_GroupUserSettings.scss";
-@import "./views/login/_InteractiveAuthEntryComponents.scss";
-@import "./views/login/_ServerConfig.scss";
 @import "./views/messages/_CreateEvent.scss";
 @import "./views/messages/_DateSeparator.scss";
 @import "./views/messages/_MEmoteBody.scss";
@@ -95,6 +103,7 @@
 @import "./views/rooms/_AuxPanel.scss";
 @import "./views/rooms/_EntityTile.scss";
 @import "./views/rooms/_EventTile.scss";
+@import "./views/rooms/_JumpToBottomButton.scss";
 @import "./views/rooms/_LinkPreviewWidget.scss";
 @import "./views/rooms/_MemberDeviceInfo.scss";
 @import "./views/rooms/_MemberInfo.scss";
@@ -122,6 +131,8 @@
 @import "./views/settings/_IntegrationsManager.scss";
 @import "./views/settings/_KeyBackupPanel.scss";
 @import "./views/settings/_Notifications.scss";
+@import "./views/settings/tabs/_GeneralSettingsTab.scss";
+@import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_IncomingCallbox.scss";
 @import "./views/voip/_VideoView.scss";

res/css/structures/_MyGroups.scss

@@ -54,7 +54,7 @@ limitations under the License.
 
     &:before {
         background-color: $accent-fg-color;
-        mask: url('../../img/icons-create-room.svg');
+        mask: url('$(res)/img/icons-create-room.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 80%;

res/css/structures/_RoomSubList.scss

@@ -105,7 +105,7 @@ limitations under the License.
 .mx_RoomSubList_addRoom {
     background-color: $roomheader-addroom-color;
     color: $roomsublist-background;
-    background-image: url('../../img/icons-room-add.svg');
+    background-image: url('$(res)/img/icons-room-add.svg');
     background-repeat: no-repeat;
     background-position: center;
     border-radius: 10px; // 16/2 + 2 padding
@@ -120,7 +120,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    background-image: url('../../img/topleft-chevron.svg');
+    background-image: url('$(res)/img/topleft-chevron.svg');
     background-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;
@@ -155,7 +155,7 @@ limitations under the License.
         position: sticky;
         left: 0;
         right: 0;
-        height: 30px;
+        height: 35px;
         content: "";
         display: block;
         z-index: 100;
@@ -163,10 +163,10 @@ limitations under the License.
     }
 
     &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
-        margin-top: -30px;
+        margin-top: -35px;
     }
     &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
-        margin-bottom: -30px;
+        margin-bottom: -35px;
     }
 
     &.mx_IndicatorScrollbar_topOverflow::before {

res/css/structures/_RoomView.scss

@@ -116,7 +116,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner {
     flex: 1;
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-position: center 367px;
     background-size: 25px;
     background-repeat: no-repeat;
@@ -125,7 +125,7 @@ limitations under the License.
 
 .mx_RoomView_messagePanelSearchSpinner:before {
     background-color: $greyed-fg-color;
-    mask: url('../../img/feather-icons/search-input.svg');
+    mask: url('$(res)/img/feather-icons/search-input.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: 50px;
@@ -171,6 +171,10 @@ limitations under the License.
 .mx_RoomView_MessageList {
     list-style-type: none;
     padding: 18px;
+    margin: 0;
+    /* needed as min-height is set to clientHeight in ScrollPanel
+    to prevent shrinking when WhoIsTypingTile is hidden */
+    box-sizing: border-box;
 }
 
 .mx_RoomView_MessageList li {

res/css/structures/_SearchBox.scss

@@ -16,7 +16,7 @@ limitations under the License.
 
 .mx_SearchBox_closeButton {
     cursor: pointer;
-    background-image: url('../../img/icons-close.svg');
+    background-image: url('$(res)/img/icons-close.svg');
     background-repeat: no-repeat;
     width: 16px;
     height: 16px;

res/css/structures/_TabbedView.scss

@@ -0,0 +1,92 @@
+/*
+Copyright 2017 Travis Ralston
+Copyright 2019 New Vector 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_TabbedView {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+
+.mx_TabbedView_tabLabels {
+  width: 136px;
+  height: 100%;
+  color: $tab-label-fg-color;
+}
+
+.mx_TabbedView_tabLabel {
+  vertical-align: text-top;
+  cursor: pointer;
+  display: block;
+  border-radius: 3px;
+  font-size: 12px;
+  font-weight: 600;
+  height: 20px;
+  margin-bottom: 6px;
+  position: relative;
+}
+
+.mx_TabbedView_tabLabel_active {
+  background-color: $tab-label-active-bg-color;
+  color: $tab-label-active-fg-color;
+}
+
+// TODO: Remove temporary hack alongside "visit old settings" tab
+.mx_TabbedView_tabLabel_TEMP_HACK {
+  background-color: orange;
+}
+
+.mx_TabbedView_maskedIcon {;
+  margin-left: 6px;
+  margin-right: 9px;
+  width: 14px;
+  height: 14px;
+  display: inline-block;
+}
+
+.mx_TabbedView_maskedIcon:before {
+  display: inline-block;
+  background-color: $tab-label-icon-bg-color;
+  mask-repeat: no-repeat;
+  mask-size: 14px;
+  width: 14px;
+  height: 14px;
+  mask-position: center;
+  content: '';
+  vertical-align: middle;
+}
+
+.mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon:before {
+  background-color: $tab-label-active-icon-bg-color;
+}
+
+.mx_TabbedView_tabLabel_text {
+  vertical-align: middle;
+}
+
+.mx_TabbedView_tabPanel {
+  width: calc(100% - 320px);
+  display: inline-block;
+  margin-left: 70px;
+  flex-grow: 1;
+}
+
+.mx_TabbedView_tabPanelContent {
+  flex-grow: 1;
+  min-width: 560px;
+}

res/css/structures/_TagPanel.scss

@@ -130,12 +130,12 @@ limitations under the License.
 }
 
 .mx_TagPanel_groupsButton > .mx_GroupsButton:before {
-    mask: url('../../img/feather-icons/users.svg');
+    mask: url('$(res)/img/feather-icons/users.svg');
     mask-position: center 11px;
 }
 
 .mx_TagPanel_groupsButton > .mx_TagPanel_report:before {
-    mask: url('../../img/feather-icons/life-buoy.svg');
+    mask: url('$(res)/img/feather-icons/life-buoy.svg');
     mask-position: center 9px;
 }
 

res/css/structures/_UserSettings.scss

@@ -173,7 +173,7 @@ limitations under the License.
     padding: 0px;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/structures/auth/_Login.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,41 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_Login {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    overflow: auto;
-}
-
-.mx_Login h2 {
-    font-weight: 300;
-    margin-top: 32px;
-    margin-bottom: 20px;
-}
-
-.mx_Login_box {
-    width: 300px;
-    min-height: 450px;
-    padding-top: 50px;
-    padding-bottom: 50px;
-    margin: auto;
-}
-
-.mx_Login_logo {
-    text-align: center;
-    height: 150px;
-    margin-bottom: 45px;
-}
-
-.mx_Login_logo img {
-    max-height: 100%
-}
-
 .mx_Login_support {
     text-align: center;
     font-size: 13px;
@@ -115,19 +81,6 @@ limitations under the License.
     color: $primary-fg-color;
 }
 
-.mx_Login_links {
-    display: block;
-    text-align: center;
-    margin-top: 15px;
-    width: 100%;
-    font-size: 13px;
-    opacity: 0.8;
-}
-
-.mx_Login_links a:link {
-   color: $primary-fg-color;
-}
-
 .mx_Login_prompt {
     padding-top: 15px;
     padding-bottom: 15px;

res/css/views/auth/_AuthBody.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2019 New Vector 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_AuthBody {
+    width: 500px;
+    background-color: $authpage-body-bg-color;
+    border-radius: 0 4px 4px 0;
+    padding: 25px 60px;
+    box-sizing: border-box;
+}

res/css/views/auth/_AuthButtons.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_LoginBox {
+.mx_AuthButtons {
     min-height: 24px;
     height: unset !important;
     padding-top: 13px !important;
@@ -22,13 +23,13 @@ limitations under the License.
     order: 4;
 }
 
-.mx_LoginBox_loginButton_wrapper {
+.mx_AuthButtons_loginButton_wrapper {
     text-align: center;
     width: 100%;
 }
 
-.mx_LoginBox_loginButton,
+.mx_AuthButtons_loginButton,
-.mx_LoginBox_registerButton {
+.mx_AuthButtons_registerButton {
     margin-top: 3px;
     height: 40px;
     border: 0px;

res/css/views/auth/_AuthFooter.scss

@@ -0,0 +1,30 @@
+/*
+Copyright 2019 New Vector 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_AuthFooter {
+    text-align: center;
+    width: 100%;
+    font-size: 14px;
+    opacity: 0.72;
+    margin: 20px 0;
+}
+
+.mx_AuthFooter a:link,
+.mx_AuthFooter a:hover,
+.mx_AuthFooter a:visited {
+    color: $accent-fg-color;
+    margin: 0 22px;
+}

res/css/views/auth/_AuthHeader.scss

@@ -0,0 +1,21 @@
+/*
+Copyright 2019 New Vector 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_AuthHeader {
+    width: 206px;
+    padding: 25px 50px;
+    box-sizing: border-box;
+}

res/css/views/auth/_AuthHeaderLogo.scss

@@ -0,0 +1,23 @@
+/*
+Copyright 2019 New Vector 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_AuthHeaderLogo {
+    margin-top: 15px;
+}
+
+.mx_AuthHeaderLogo img {
+    width: 100%;
+}

res/css/views/auth/_AuthPage.scss

@@ -0,0 +1,40 @@
+/*
+Copyright 2019 New Vector 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_AuthPage {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    background-color: $authpage-bg-color;
+}
+
+.mx_AuthPage h2 {
+    font-weight: 300;
+    margin-top: 32px;
+    margin-bottom: 20px;
+}
+
+.mx_AuthPage_modal {
+    display: flex;
+    margin: 100px auto auto;
+    border-radius: 4px;
+    // Not currently supported in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1178765
+    backdrop-filter: blur(10px);
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.33);
+    background-color: $authpage-modal-bg-color;
+}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -61,7 +61,7 @@ limitations under the License.
     padding: 0;
     width: 240px;
     color: $input-fg-color;
-    font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
+    font-family: $font-family;
     font-size: 16px;
 }
 

res/css/views/dialogs/_UserSettingsDialog.scss

@@ -0,0 +1,63 @@
+.mx_UserSettingsDialog_header {
+  font-size: 24px;
+  display: block;
+  text-align: center;
+  color: $dialog-title-fg-color;
+  margin-top: 16px;
+  margin-bottom: 24px;
+  padding: 0;
+}
+
+.mx_UserSettingsDialog_close {
+  position: absolute;
+  top: 16px;
+  right: 25px;
+}
+
+.mx_UserSettingsDialog_closeIcon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+
+.mx_UserSettingsDialog_closeIcon:before {
+  mask: url('$(res)/img/feather-icons/cancel.svg');
+  background-color: $dialog-close-fg-color;
+  mask-repeat: no-repeat;
+  mask-size: 16px;
+  mask-position: center;
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+// ICONS
+// ==========================================================
+
+.mx_UserSettingsDialog_settingsIcon:before {
+  mask-image: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_UserSettingsDialog_voiceIcon:before {
+  mask-image: url('$(res)/img/feather-icons/phone.svg');
+}
+
+.mx_UserSettingsDialog_bellIcon:before {
+  mask-image: url('$(res)/img/feather-icons/notifications.svg');
+}
+
+.mx_UserSettingsDialog_preferencesIcon:before {
+  mask-image: url('$(res)/img/feather-icons/sliders.svg');
+}
+
+.mx_UserSettingsDialog_securityIcon:before {
+  mask-image: url('$(res)/img/feather-icons/lock.svg');
+}
+
+.mx_UserSettingsDialog_helpIcon:before {
+  mask-image: url('$(res)/img/feather-icons/help-circle.svg');
+}

res/css/views/dialogs/keybackup/_KeyBackupFailedDialog.scss

@@ -24,7 +24,7 @@ limitations under the License.
     padding-bottom: 10px;
 
     &:before {
-        mask: url("../../img/e2e/lock-warning.svg");
+        mask: url("$(res)/img/e2e/lock-warning.svg");
         mask-repeat: no-repeat;
         background-color: $primary-fg-color;
         content: "";

res/css/views/elements/_AccessibleButton.scss

@@ -21,3 +21,24 @@ limitations under the License.
 .mx_AccessibleButton {
     cursor: pointer;
 }
+
+.mx_AccessibleButton_disabled {
+    cursor: default;
+}
+
+.mx_AccessibleButton_hasKind {
+    padding: 10px 25px;
+    text-align: center;
+    border-radius: 4px;
+    display: inline-block;
+}
+
+.mx_AccessibleButton_kind_primary {
+    color: $button-primary-fg-color;
+    background-color: $button-primary-bg-color;
+}
+
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
+    color: $button-primary-disabled-fg-color;
+    background-color: $button-primary-disabled-bg-color;
+}

res/css/views/elements/_DirectorySearchBox.scss

@@ -44,7 +44,7 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding-right: 10px;
     background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('../../img/icon-return.svg');
+    background-image: url('$(res)/img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -61,7 +61,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('$(res)/img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;

res/css/views/elements/_Field.scss

@@ -0,0 +1,81 @@
+/*
+Copyright 2019 New Vector 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.
+*/
+
+/* TODO: Consider unifying with general input styles in _dharma.scss */
+
+.mx_Field {
+    position: relative;
+    margin: 1em 0;
+}
+
+.mx_Field input,
+.mx_Field select {
+    font-weight: normal;
+    border-radius: 4px;
+    transition: border-color 0.25s;
+    border: 1px solid $input-border-color;
+    padding: 8px 9px;
+}
+
+.mx_Field input:focus,
+.mx_Field select:focus {
+    outline: 0;
+    border-color: $input-focused-border-color;
+}
+
+.mx_Field input::placeholder {
+    transition: color 0.25s ease-in 0s;
+    color: transparent;
+}
+
+.mx_Field input:placeholder-shown:focus::placeholder {
+    transition: color 0.25s ease-in 0.1s;
+    color: $greyed-fg-color;
+}
+
+.mx_Field label {
+    transition:
+        font-size 0.25s ease-out 0.1s,
+        color 0.25s ease-out 0.1s,
+        top 0.25s ease-out 0.1s,
+        background-color 0.25s ease-out 0.1s;
+    color: $primary-fg-color;
+    background-color: transparent;
+    font-size: 14px;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    margin: 7px 8px;
+    padding: 2px;
+}
+
+.mx_Field input:focus + label,
+.mx_Field input:not(:placeholder-shown) + label,
+.mx_Field select:focus + label {
+    transition:
+        font-size 0.25s ease-out 0s,
+        color 0.25s ease-out 0s,
+        top 0.25s ease-out 0s,
+        background-color 0.25s ease-out 0s;
+    font-size: 10px;
+    top: -14px;
+    background-color: $field-focused-label-bg-color;
+}
+
+.mx_Field input:focus + label,
+.mx_Field select:focus + label {
+    color: $input-focused-border-color;
+}

res/css/views/elements/_ImageView.scss

@@ -50,7 +50,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('$(res)/img/trans.png'); */
     pointer-events: all;
 }
 

res/css/views/rooms/_EntityTile.scss

@@ -22,7 +22,7 @@ limitations under the License.
 }
 
 .mx_EntityTile:hover {
-    background-image: url('../../img/member_chevron.png');
+    background-image: url('$(res)/img/member_chevron.png');
     background-position: center right 10px;
     background-repeat: no-repeat;
     padding-right: 30px;

res/css/views/rooms/_EventTile.scss

@@ -291,8 +291,8 @@ limitations under the License.
 }
 
 /* always override hidden attribute for blocked and warning */
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-blocked.svg"],
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-blocked.svg"],
-.mx_EventTile_e2eIcon_hidden[src="img/e2e-warning.svg"] {
+.mx_EventTile_e2eIcon_hidden[src*="img/e2e-warning.svg"] {
     display: block;
 }
 

res/css/views/rooms/_JumpToBottomButton.scss

@@ -0,0 +1,69 @@
+/*
+Copyright 2019 New Vector 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.
+*/
+
+@charset "utf-8";
+
+.mx_JumpToBottomButton {
+    z-index: 1000;
+    position: absolute;
+    // 12 because height is 50 but button is only 38 = 12+(50-38) = 24
+    bottom: 12px;
+    right: 24px;
+    width: 38px;
+    // give it a fixed height so the badge doesn't make
+    // it taller and pop upwards when visible
+    height: 50px;
+    text-align: center;
+}
+
+.mx_JumpToBottomButton_badge {
+    position: relative;
+    top: -12px;
+    border-radius: 16px;
+    font-weight: bold;
+    font-size: 12px;
+    line-height: 14px;
+    text-align: center;
+    // to be able to get it centered
+    // with text-align in parent
+    display: inline-block;
+    padding: 0 4px;
+    color: $secondary-accent-color;
+    background-color: $warning-color;
+}
+
+.mx_JumpToBottomButton_scrollDown {
+    position: relative;
+    height: 38px;
+    border-radius: 19px;
+    box-sizing: border-box;
+    background: $primary-bg-color;
+    border: 1.3px solid $roomtile-name-color;
+    cursor: pointer;
+}
+
+.mx_JumpToBottomButton_scrollDown:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    mask: url('$(res)/img/icon-jump-to-bottom.svg');
+    mask-repeat: no-repeat;
+    mask-position: 9px 14px;
+    background: $roomtile-name-color;
+}

res/css/views/rooms/_MemberList.scss

@@ -83,7 +83,7 @@ limitations under the License.
 
 .mx_MemberList_invite span {
     margin: 0 auto;
-    background-image: url('../../img/feather-icons/user-add.svg');
+    background-image: url('$(res)/img/feather-icons/user-add.svg');
     background-repeat: no-repeat;
     background-position: center left;
     padding-left: 25px;

res/css/views/rooms/_RoomSettings.scss

@@ -66,15 +66,16 @@ limitations under the License.
 .mx_RoomSettings_integrationsButton_errorPopup {
     position: absolute;
     top: 110%;
-    left: -125%;
+    left: -275%;
-    width: 348%;
+    width: 550%;
-    padding: 2%;
+    padding: 30%;
     font-size: 10pt;
     line-height: 1.5em;
     border-radius: 5px;
     background-color: $accent-color;
     color: $accent-fg-color;
     text-align: center;
+    z-index: 1000;
 }
 .mx_RoomSettings_unbanButton {
     display: inline;

res/css/views/rooms/_RoomTile.scss

@@ -29,7 +29,7 @@ limitations under the License.
     display: none;
     flex: 0 0 16px;
     height: 16px;
-    background-image: url('../../img/icon_context.svg');
+    background-image: url('$(res)/img/icon_context.svg');
     background-repeat: no-repeat;
     background-position: center;
 }

res/css/views/rooms/_SearchBar.scss

@@ -32,7 +32,7 @@ limitations under the License.
         width: 37px;
         height: 37px;
         background-color: $accent-color;
-        mask: url('../../img/feather-icons/search-input.svg');
+        mask: url('$(res)/img/feather-icons/search-input.svg');
         mask-repeat: no-repeat;
         mask-position: center;
     }
@@ -55,7 +55,7 @@ limitations under the License.
 
     .mx_SearchBar_cancel {
         background-color: $warning-color;
-        mask: url('../../img/cancel.svg');
+        mask: url('$(res)/img/cancel.svg');
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: 14px;

res/css/views/rooms/_TopUnreadMessagesBar.scss

@@ -54,7 +54,7 @@ limitations under the License.
     position: absolute;
     width: 38px;
     height: 38px;
-    mask: url('../../img/icon-jump-to-first-unread.svg');
+    mask: url('$(res)/img/icon-jump-to-first-unread.svg');
     mask-repeat: no-repeat;
     mask-position: 9px 13px;
     background: $roomtile-name-color;

res/css/views/rooms/_WhoIsTypingTile.scss

@@ -61,7 +61,7 @@ limitations under the License.
 }
 
 .mx_WhoIsTypingTile_label > span {
-    background-image: url('../../img/typing-indicator-2x.gif');
+    background-image: url('$(res)/img/typing-indicator-2x.gif');
     background-size: 25px;
     background-position: left bottom;
     background-repeat: no-repeat;

res/css/views/settings/tabs/_GeneralSettingsTab.scss

@@ -0,0 +1,25 @@
+.mx_GeneralSettingsTab_profile {
+  display: flex;
+}
+
+.mx_GeneralSettingsTab_profileControls {
+  flex-grow: 1;
+}
+
+.mx_GeneralSettingsTab_profileControls .mx_Field #profileDisplayName {
+  width: calc(100% - 20px); // subtract 10px padding on left and right
+}
+
+.mx_GeneralSettingsTab_profileAvatar {
+  width: 88px;
+  height: 88px;
+  margin-left: 13px;
+}
+
+.mx_GeneralSettingsTab_profileAvatar div {
+  display: block;
+  width: 88px;
+  height: 88px;
+  border-radius: 4px;
+  background-color: #ccc;
+}

res/css/views/settings/tabs/_SettingsTab.scss

@@ -0,0 +1,17 @@
+.mx_SettingsTab_heading {
+  font-size: 20px;
+  font-weight: 600;
+  color: $primary-fg-color;
+}
+
+.mx_SettingsTab_subheading {
+  font-size: 14px;
+  display: block;
+  font-family: $font-family-semibold;
+  color: $primary-fg-color;
+  margin-bottom: 10px;
+}
+
+.mx_SettingsTab_section {
+  margin-top: 10px;
+}

res/img/feather-icons/cancel.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="#" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#9fa9ba" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>

res/img/feather-icons/help-circle.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <circle cx="6" cy="6" r="6"/>
+        <path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
+    </g>
+</svg>

res/img/feather-icons/lock.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <rect width="11" height="6.6" y="5.4" rx="1.2"/>
+        <path d="M2.444 5.4V3c0-1.657 1.368-3 3.056-3s3.056 1.343 3.056 3v2.4"/>
+    </g>
+</svg>

res/img/feather-icons/sliders.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2.636 11V7.111M2.636 4.889V1M7 11V6M7 3.778V1M11.364 11V8.222M11.364 6V1M1 7.111h3.273M5.364 3.778h3.272M9.727 8.222H13"/>
+    </g>
+</svg>

res/img/icon-jump-to-bottom.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   id="svg4"
+   width="18.666187"
+   height="8.7375822"
+   viewBox="0 0 18.666187 8.7375818"
+   version="1.1"
+   style="fill:none">
+  <metadata
+     id="metadata8">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <path
+     id="path2-8-3"
+     style="fill:none;stroke:#000000;stroke-width:1.29999995;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="M 17.909095,0.75599092 9.3330939,7.987602 0.75709259,0.75599092" />
+</svg>

res/themes/dark/css/_dark.scss

@@ -149,8 +149,8 @@ $event-redacted-border-color: #000000;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message_dark.svg";
+$edit-button-url: "$(res)/img/icon_context_message_dark.svg";
-$copy-button-url: "../../img/icon_copy_message_dark.svg";
+$copy-button-url: "$(res)/img/icon_copy_message_dark.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color

res/themes/dark/css/dark.scss

@@ -1,4 +1,5 @@
+@import "../../light/css/_paths.scss";
+@import "../../light/css/_fonts.scss";
 @import "../../light/css/_base.scss";
 @import "_dark.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/dharma/css/_dharma.scss

@@ -1,5 +1,3 @@
-@import "_fonts.scss";
-
 // XXX: check this?
 /* Nunito lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
@@ -7,6 +5,7 @@
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
+$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
@@ -73,6 +72,10 @@ $input-darker-bg-color: rgba(193, 201, 214, 0.29);
 $input-darker-fg-color: #9fa9ba;
 $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
+$input-focused-border-color: #238cf5;
+$input-valid-border-color: #7ac9a1;
+
+$field-focused-label-bg-color: #ffffff;
 
 $button-bg-color: #7ac9a1;
 $button-fg-color: white;
@@ -94,6 +97,11 @@ $avatar-bg-color: #ffffff;
 
 $h3-color: #3d3b39;
 
+$dialog-title-fg-color: #454545;
+$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
+$dialog-close-fg-color: #9fa9ba;
+
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 
@@ -171,8 +179,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -184,6 +192,20 @@ $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
 
+// Tabbed views
+$tab-label-fg-color: #45474a;
+$tab-label-active-fg-color: #ffffff;
+$tab-label-bg-color: transparent;
+$tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
+
+// Buttons
+$button-primary-fg-color: #ffffff;
+$button-primary-bg-color: #7ac9a1;
+$button-primary-disabled-fg-color: #ffffff;
+$button-primary-disabled-bg-color: #bce4d0;
+
 // unused?
 $progressbar-color: #000;
 
@@ -191,6 +213,10 @@ $room-warning-bg-color: #fff8e3;
 
 $memberstatus-placeholder-color: $roomtile-name-color;
 
+$authpage-bg-color: #2e3649;
+$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
+$authpage-body-bg-color: #ffffff;
+
 /*** form elements ***/
 
 // .mx_textinput is a container for a text input
@@ -200,8 +226,8 @@ $memberstatus-placeholder-color: $roomtile-name-color;
 
 .mx_MatrixChat {
 
-    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         display: block;
         margin: 9px;
@@ -245,8 +271,8 @@ input[type=password] {
 }
 
 .dark-panel {
-    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         color: $input-darker-fg-color;
         background-color: $input-darker-bg-color;
@@ -255,8 +281,8 @@ input[type=password] {
 }
 
 .light-panel {
-    :not(.mx_textinput) > input[type=text],
+    :not(.mx_textinput):not(.mx_Field) > input[type=text],
-    :not(.mx_textinput) > input[type=search],
+    :not(.mx_textinput):not(.mx_Field) > input[type=search],
     .mx_textinput {
         color: $input-lighter-fg-color;
         background-color: $input-lighter-bg-color;
@@ -275,7 +301,7 @@ input[type=search].mx_textinput_icon {
 // FIXME THEME - Tint by CSS rather than referencing a duplicate asset
 input[type=text].mx_textinput_icon.mx_textinput_search,
 input[type=search].mx_textinput_icon.mx_textinput_search {
-    background-image: url('../../img/feather-icons/search-input.svg');
+    background-image: url('$(res)/img/feather-icons/search-input.svg');
 }
 
 // dont search UI as not all browsers support it,
@@ -293,6 +319,13 @@ input[type=search]::-webkit-search-results-decoration {
 .input[type=search]::-moz-placeholder {
     color: #a5aab2;
 }
+
+// Override Firefox's UA style so we get a consistent look across browsers
+input::placeholder,
+textarea::placeholder {
+    opacity: initial;
+}
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/dharma/css/_fonts.scss

@@ -11,37 +11,37 @@
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXX3I6Li01BKofIMNaDRss.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN5cYtvKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXQ3I6Li01BKofIMN44Y9vKUTo.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400;
-  src: url('../../fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXV3I6Li01BKofINeaE.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 600;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofA6sKUYevN.ttf') format('truetype');
 }
 @font-face {
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 700;
-  src: url('../../fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
+  src: url('$(res)/fonts/Nunito/XRXW3I6Li01BKofAjsOUYevN.ttf') format('truetype');
 }
 
 /*
@@ -51,14 +51,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('$(res)/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('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

res/themes/dharma/css/dharma.scss

@@ -1,3 +1,4 @@
+@import "../../light/css/_paths.scss";
+@import "_fonts.scss";
 @import "_dharma.scss";
 @import "../../../../res/css/_components.scss";
-

res/themes/light/css/_base.scss

@@ -1,11 +1,10 @@
-@import "_fonts.scss";
-
 /* Open Sans lacks combining diacritics, so these will fall through
    to the next font.  Helevetica's diacritics however do not combine
    nicely with Open Sans (on OSX, at least) and result in a huge
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
@@ -68,6 +67,7 @@ $primary-hairline-color: #e5e5e5;
 
 // used for the border of input text fields
 $input-border-color: #f0f0f0;
+$input-border-dark-color: #b8b8b8;
 
 $input-darker-bg-color: #c1c9d6;
 $input-darker-fg-color: #9fa9ba;
@@ -75,6 +75,10 @@ $button-bg-color: #7ac9a1;
 $button-fg-color: white;
 // apart from login forms, which have stronger border
 $strong-input-border-color: #c7c7c7;
+$input-focused-border-color: #238cf5;
+$input-valid-border-color: #7ac9a1;
+
+$field-focused-label-bg-color: #ffffff;
 
 // used for UserSettings EditableText
 $input-underline-color: rgba(151, 151, 151, 0.5);
@@ -90,6 +94,11 @@ $avatar-bg-color: #ffffff;
 
 $h3-color: #3d3b39;
 
+$dialog-title-fg-color: #454545;
+$dialog-backdrop-color: rgba(46, 48, 51, 0.38);
+$dialog-shadow-color: rgba(0, 0, 0, 0.48);
+$dialog-close-fg-color: #9fa9ba;
+
 $dialog-background-bg-color: #e9e9e9;
 $lightbox-background-bg-color: #000;
 
@@ -162,8 +171,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
@@ -179,6 +188,20 @@ $imagebody-giflabel: rgba(0, 0, 0, 0.7);
 $imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
 $imagebody-giflabel-color: rgba(255, 255, 255, 1);
 
+// Tabbed views
+$tab-label-fg-color: #45474a;
+$tab-label-active-fg-color: #ffffff;
+$tab-label-bg-color: transparent;
+$tab-label-active-bg-color: #7ac9a1;
+$tab-label-icon-bg-color: #454545;
+$tab-label-active-icon-bg-color: #ffffff;
+
+// Buttons
+$button-primary-fg-color: #ffffff;
+$button-primary-bg-color: #7ac9a1;
+$button-primary-disabled-fg-color: #ffffff;
+$button-primary-disabled-bg-color: #bce4d0;
+
 // unused?
 $progressbar-color: #000;
 
@@ -186,6 +209,10 @@ $room-warning-bg-color: #fff8e3;
 
 $memberstatus-placeholder-color: $roomtile-name-color;
 
+$authpage-bg-color: #2e3649;
+$authpage-modal-bg-color: rgba(255, 255, 255, 0.59);
+$authpage-body-bg-color: #ffffff;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {

res/themes/light/css/_fonts.scss

@@ -7,42 +7,42 @@
  */
 @font-face {
     font-family: 'Open Sans';
-    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    src: url('$(res)/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('$(res)/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('$(res)/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('$(res)/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('$(res)/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('$(res)/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('$(res)/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('$(res)/fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

res/themes/light/css/_paths.scss

@@ -0,0 +1,3 @@
+// Path from root SCSS file (such as `light.scss`) to `res` dir in the source tree
+// This value is overridden by external themes in `riot-web`.
+$res: ../../..;

res/themes/light/css/light.scss

@@ -1,3 +1,4 @@
+@import "_paths.scss";
+@import "_fonts.scss";
 @import "_base.scss";
 @import "../../../../res/css/_components.scss";
-

src/Avatar.js

@@ -56,6 +56,6 @@ module.exports = {
         for (let i = 0; i < s.length; ++i) {
             total += s.charCodeAt(i);
         }
-        return 'img/' + images[total % images.length] + '.png';
+        return require('../res/img/' + images[total % images.length] + '.png');
     },
 };

src/Rooms.js

@@ -159,6 +159,10 @@ export function setDMRoom(roomId, userId) {
 /**
  * Given a room, estimate which of its members is likely to
  * be the target if the room were a DM room and return that user.
+ *
+ * @param {Object} room Target room
+ * @param {string} myUserId User ID of the current user
+ * @returns {string} User ID of the user that the room is probably a DM with
  */
 function guessDMRoomTargetId(room, myUserId) {
     let oldestTs;
@@ -173,7 +177,7 @@ function guessDMRoomTargetId(room, myUserId) {
             oldestTs = user.events.member.getTs();
         }
     }
-    if (oldestUser) return oldestUser;
+    if (oldestUser) return oldestUser.userId;
 
     // if there are no joined members other than us, use the oldest member
     for (const user of room.currentState.getMembers()) {
@@ -186,5 +190,5 @@ function guessDMRoomTargetId(room, myUserId) {
     }
 
     if (oldestUser === undefined) return myUserId;
-    return oldestUser;
+    return oldestUser.userId;
 }

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -252,9 +252,7 @@ export default React.createClass({
                 for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
                     suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
                 }
-                const suggestionBlock = suggestions.length > 0 ? <div>
+                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
-                    {suggestions}
-                </div> : null;
 
                 helpText = <div>
                     {this.state.zxcvbnResult.feedback.warning}

src/components/structures/CompatibilityPage.js

@@ -41,10 +41,15 @@ module.exports = React.createClass({
             <div className="mx_CompatibilityPage_box">
                 <p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
                 <p>
-                { _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
+                { _t(
+                    "Riot uses many advanced browser features, some of which are not available " +
+                    "or experimental in your current browser.",
+                ) }
                 </p>
                 <p>
-                { _t('Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.',
+                { _t(
+                    'Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> ' +
+                    'for the best experience.',
                     {},
                     {
                         'chromeLink': (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
@@ -60,7 +65,12 @@ module.exports = React.createClass({
                 )}
                 </p>
                 <p>
-                { _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
+                { _t(
+                    "With your current browser, the look and feel of the application may be " +
+                    "completely incorrect, and some or all features may not function. " +
+                    "If you want to try it anyway you can continue, but you are on your own in terms " +
+                    "of any issues you may encounter!",
+                ) }
                 </p>
                 <button onClick={this.onAccept}>
                     { _t("I understand the risks and wish to continue") }

src/components/structures/GroupView.js

@@ -125,7 +125,7 @@ const CategoryRoomList = React.createClass({
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -226,7 +226,7 @@ const FeaturedRoom = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -300,7 +300,7 @@ const RoleUserList = React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                 <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                  <div className="mx_GroupView_featuredThings_addButton_label">
                      { _t('Add a User') }
                  </div>
@@ -379,7 +379,7 @@ const FeaturedUser = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -855,7 +855,7 @@ export default React.createClass({
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
+                    <TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1189,7 +1189,7 @@ export default React.createClass({
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                                <img src="img/camera.svg"
+                                <img src={require("../../../res/img/camera.svg")}
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
@@ -1255,7 +1255,7 @@ export default React.createClass({
                 );
                 rightButtons.push(
                     <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
-                        <img src="img/cancel.svg" className="mx_filterFlipColor"
+                        <img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
                             width="18" height="18" alt={_t("Cancel")} />
                     </AccessibleButton>,
                 );
@@ -1265,13 +1265,13 @@ export default React.createClass({
                         <AccessibleButton className="mx_GroupHeader_button"
                             onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
                         >
-                            <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
+                            <TintableSvg src={require("../../../res/img/icons-settings-room.svg")} width="16" height="16" />
                         </AccessibleButton>,
                     );
                 }
                 rightButtons.push(
                     <AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
-                        <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                        <TintableSvg src={require("../../../res/img/icons-share.svg")} width="16" height="16" />
                     </AccessibleButton>,
                 );
             }

src/components/structures/HomePage.js

@@ -108,7 +108,7 @@ class HomePage extends React.Component {
         if (this.context.matrixClient.isGuest()) {
             guestWarning = (
                 <div className="mx_HomePage_guest_warning">
-                    <img src="img/warning.svg" width="24" height="23" />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" />
                     <div>
                         <div>
                             { _t("You are currently using Riot anonymously as a guest.") }

src/components/structures/IndicatorScrollbar.js

@@ -66,7 +66,11 @@ export default class IndicatorScrollbar extends React.Component {
     }
 
     render() {
-        return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
+        return (<AutoHideScrollbar
+            ref={this._collectScrollerComponent}
+            wrappedRef={this._collectScroller}
+            {... this.props}
+        >
             { this.props.children }
         </AutoHideScrollbar>);
     }

src/components/structures/InteractiveAuth.js

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
+import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
 
 export default React.createClass({
     displayName: 'InteractiveAuth',

src/components/structures/LoggedInView.js

@@ -35,7 +35,7 @@ import RoomListStore from "../../stores/RoomListStore";
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
-import {Resizer, CollapseDistributor} from '../../resizer'
+import {Resizer, CollapseDistributor} from '../../resizer';
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -160,7 +160,7 @@ const LoggedInView = React.createClass({
         const classNames = {
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse"
+            reverse: "mx_ResizeHandle_reverse",
         };
         const collapseConfig = {
             toggleSize: 260 - 50,
@@ -183,10 +183,13 @@ const LoggedInView = React.createClass({
     },
 
     _loadResizerPreferences() {
-        const lhsSize = window.localStorage.getItem("mx_lhs_size");
+        let lhsSize = window.localStorage.getItem("mx_lhs_size");
         if (lhsSize !== null) {
-            this.resizer.forHandleAt(0).resize(parseInt(lhsSize, 10));
+            lhsSize = parseInt(lhsSize, 10);
+        } else {
+            lhsSize = 350;
         }
+        this.resizer.forHandleAt(0).resize(lhsSize);
     },
 
     onAccountData: function(event) {
@@ -201,7 +204,11 @@ const LoggedInView = React.createClass({
     },
 
     onSync: function(syncState, oldSyncState, data) {
-        const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
+        const oldErrCode = (
+            this.state.syncErrorData &&
+            this.state.syncErrorData.error &&
+            this.state.syncErrorData.error.errcode
+        );
         const newErrCode = data && data.error && data.error.errcode;
         if (syncState === oldSyncState && oldErrCode === newErrCode) return;
 
@@ -310,7 +317,10 @@ const LoggedInView = React.createClass({
         }
     },
 
-    /** dispatch a page-up/page-down/etc to the appropriate component */
+    /**
+     * dispatch a page-up/page-down/etc to the appropriate component
+     * @param {Object} ev The key event
+     */
     _onScrollKeyPressed: function(ev) {
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
@@ -424,11 +434,11 @@ const LoggedInView = React.createClass({
         const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
         const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
-        let page_element;
+        let pageElement;
 
         switch (this.props.page_type) {
             case PageTypes.RoomView:
-                page_element = <RoomView
+                pageElement = <RoomView
                         ref='roomView'
                         autoJoin={this.props.autoJoin}
                         onRegistered={this.props.onRegistered}
@@ -444,7 +454,7 @@ const LoggedInView = React.createClass({
                 break;
 
             case PageTypes.UserSettings:
-                page_element = <UserSettings
+                pageElement = <UserSettings
                     onClose={this.props.onCloseAllSettings}
                     brand={this.props.config.brand}
                     referralBaseUrl={this.props.config.referralBaseUrl}
@@ -453,11 +463,11 @@ const LoggedInView = React.createClass({
                 break;
 
             case PageTypes.MyGroups:
-                page_element = <MyGroups />;
+                pageElement = <MyGroups />;
                 break;
 
             case PageTypes.RoomDirectory:
-                page_element = <RoomDirectory
+                pageElement = <RoomDirectory
                     ref="roomDirectory"
                     config={this.props.config.roomDirectory}
                 />;
@@ -471,7 +481,7 @@ const LoggedInView = React.createClass({
                     const teamServerUrl = this.props.config.teamServerConfig ?
                         this.props.config.teamServerConfig.teamServerURL : null;
 
-                    page_element = <HomePage
+                    pageElement = <HomePage
                         teamServerUrl={teamServerUrl}
                         teamToken={this.props.teamToken}
                         homePageUrl={this.props.config.welcomePageUrl}
@@ -480,12 +490,12 @@ const LoggedInView = React.createClass({
                 break;
 
             case PageTypes.UserView:
-                page_element = null; // deliberately null for now
+                pageElement = null; // deliberately null for now
                 // TODO: fix/remove UserView
                 // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
                 break;
             case PageTypes.GroupView:
-                page_element = <GroupView
+                pageElement = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
                     collapsedRhs={this.props.collapsedRhs}
@@ -525,7 +535,10 @@ const LoggedInView = React.createClass({
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
         } else if (this.state.userHasGeneratedPassword) {
             topBar = <PasswordNagBar />;
-        } else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
+        } else if (
+            !isGuest && Notifier.supportsDesktopNotifications() &&
+            !Notifier.isEnabled() && !Notifier.isToolbarHidden()
+        ) {
             topBar = <MatrixToolbar />;
         }
 
@@ -546,8 +559,8 @@ const LoggedInView = React.createClass({
                             collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
                             disabled={this.props.leftDisabled}
                         />
-                        <ResizeHandle/>
+                        <ResizeHandle />
-                        { page_element }
+                        { pageElement }
                     </div>
                 </DragDropContext>
             </div>

src/components/structures/MatrixChat.js

@@ -183,7 +183,7 @@ export default React.createClass({
             register_is_url: null,
             register_id_sid: null,
 
-            // Parameters used for setting up the login/registration views
+            // Parameters used for setting up the authentication views
             defaultServerName: this.props.config.default_server_name,
             defaultHsUrl: this.props.config.default_hs_url,
             defaultIsUrl: this.props.config.default_is_url,
@@ -302,7 +302,10 @@ export default React.createClass({
             // will check their settings.
             this.setState({
                 defaultServerName: null, // To un-hide any secrets people might be keeping
-                defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
+                defaultServerDiscoveryError: _t(
+                    "Invalid configuration: Cannot supply a default homeserver URL and " +
+                    "a default server name",
+                ),
             });
         }
 
@@ -607,7 +610,17 @@ export default React.createClass({
             case 'view_indexed_room':
                 this._viewIndexedRoom(payload.roomIndex);
                 break;
-            case 'view_user_settings':
+            case 'view_user_settings': {
+                if (SettingsStore.isFeatureEnabled("feature_tabbed_settings")) {
+                    const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
+                    Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {});
+                } else {
+                    this._setPage(PageTypes.UserSettings);
+                    this.notifyNewScreen('settings');
+                }
+                break;
+            }
+            case 'view_old_user_settings':
                 this._setPage(PageTypes.UserSettings);
                 this.notifyNewScreen('settings');
                 break;
@@ -1840,7 +1853,11 @@ export default React.createClass({
     render: function() {
         // console.log(`Rendering MatrixChat with view ${this.state.view}`);
 
-        if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
+        if (
+            this.state.view === VIEWS.LOADING ||
+            this.state.view === VIEWS.LOGGING_IN ||
+            this.state.loadingDefaultHomeserver
+        ) {
             const Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
@@ -1851,7 +1868,7 @@ export default React.createClass({
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.view === VIEWS.POST_REGISTRATION) {
-            const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
+            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
             return (
                 <PostRegistration
                     onComplete={this.onFinishPostRegistration} />
@@ -1906,7 +1923,7 @@ export default React.createClass({
         }
 
         if (this.state.view === VIEWS.REGISTER) {
-            const Registration = sdk.getComponent('structures.login.Registration');
+            const Registration = sdk.getComponent('structures.auth.Registration');
             return (
                 <Registration
                     clientSecret={this.state.register_client_secret}
@@ -1935,7 +1952,7 @@ export default React.createClass({
 
 
         if (this.state.view === VIEWS.FORGOT_PASSWORD) {
-            const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
+            const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
             return (
                 <ForgotPassword
                     defaultServerName={this.getDefaultServerName()}
@@ -1951,7 +1968,7 @@ export default React.createClass({
         }
 
         if (this.state.view === VIEWS.LOGIN) {
-            const Login = sdk.getComponent('structures.login.Login');
+            const Login = sdk.getComponent('structures.auth.Login');
             return (
                 <Login
                     onLoggedIn={Lifecycle.setLoggedIn}

src/components/structures/MessagePanel.js

@@ -631,13 +631,29 @@ module.exports = React.createClass({
         }
     },
 
-    _scrollDownIfAtBottom: function() {
+    _onTypingVisible: function() {
         const scrollPanel = this.refs.scrollPanel;
-        if (scrollPanel) {
+        if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
+            scrollPanel.blockShrinking();
+            // scroll down if at bottom
             scrollPanel.checkScroll();
         }
     },
 
+    updateTimelineMinHeight: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        const whoIsTyping = this.refs.whoIsTyping;
+        const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
+
+        if (scrollPanel) {
+            if (isTypingVisible) {
+                scrollPanel.blockShrinking();
+            } else {
+                scrollPanel.clearBlockShrinking();
+            }
+        }
+    },
+
     onResize: function() {
         dis.dispatch({ action: 'timeline_resize' }, true);
     },
@@ -666,7 +682,7 @@ module.exports = React.createClass({
 
         let whoIsTyping;
         if (this.props.room) {
-            whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />);
+            whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._onTypingVisible} ref="whoIsTyping" />);
         }
 
         return (

src/components/structures/MyGroups.js

@@ -107,7 +107,7 @@ export default withMatrixClient(React.createClass({
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
                 </div>
                 {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                        <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">

src/components/structures/RoomDirectory.js

@@ -571,7 +571,7 @@ module.exports = React.createClass({
         const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
         return (
             <div className="mx_RoomDirectory">
-                <SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
+                <SimpleRoomHeader title={ _t('Directory') } icon={require("../../../res/img/icons-directory.svg")} />
                 <div className="mx_RoomDirectory_list">
                     <div className="mx_RoomDirectory_listheader">
                         <DirectorySearchBox

src/components/structures/RoomStatusBar.js

@@ -45,14 +45,6 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-
-        // the number of messages which have arrived since we've been scrolled up
-        numUnreadMessages: PropTypes.number,
-
-        // this is true if we are fully scrolled-down, and are looking at
-        // the end of the live timeline.
-        atEndOfLiveTimeline: PropTypes.bool,
-
         // This is true when the user is alone in the room, but has also sent a message.
         // Used to suggest to the user to invite someone
         sentMessageAndIsAlone: PropTypes.bool,
@@ -82,9 +74,6 @@ module.exports = React.createClass({
         // 'you are alone' bar
         onStopWarningClick: PropTypes.func,
 
-        // callback for when the user clicks on the 'scroll to bottom' button
-        onScrollToBottomClick: PropTypes.func,
-
         // callback for when we do something that changes the size of the
         // status bar. This is used to trigger a re-layout in the parent
         // component.
@@ -180,8 +169,6 @@ module.exports = React.createClass({
     // indicate other sizes.
     _getSize: function() {
         if (this._shouldShowConnectionError() ||
-            this.props.numUnreadMessages ||
-            !this.props.atEndOfLiveTimeline ||
             this.props.hasActiveCall ||
             this.props.sentMessageAndIsAlone
         ) {
@@ -194,32 +181,10 @@ module.exports = React.createClass({
 
     // return suitable content for the image on the left of the status bar.
     _getIndicator: function() {
-        if (this.props.numUnreadMessages) {
-            return (
-                <div className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/newmessages.svg" width="24" height="24"
-                        alt="" />
-                </div>
-            );
-        }
-
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        if (!this.props.atEndOfLiveTimeline) {
-            return (
-                <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/scrolldown.svg" width="24" height="24"
-                        alt={_t("Scroll to bottom of page")}
-                        title={_t("Scroll to bottom of page")} />
-                </AccessibleButton>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
+                <TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
             );
         }
 
@@ -231,9 +196,7 @@ module.exports = React.createClass({
     },
 
     _shouldShowConnectionError: function() {
-        // no conn bar trumps unread count since you can't get unread messages
+        // no conn bar trumps the "some not sent" msg since you can't resend without
-        // without a connection! (technically may already have some but meh)
-        // It also trumps the "some not sent" msg since you can't resend without
         // a connection!
         // There's one situation in which we don't show this 'no connection' bar, and that's
         // if it's a resource limit exceeded error: those are shown in the top bar.
@@ -327,7 +290,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
+            <img src={require("../../../res/img/warning.svg")} width="24" height="23" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -346,7 +309,7 @@ module.exports = React.createClass({
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
+                    <img src={require("../../../res/img/warning.svg")} width="24" height="23" title="/!\ " alt="/!\ " />
                     <div>
                         <div className="mx_RoomStatusBar_connectionLostBar_title">
                             { _t('Connectivity to the server has been lost.') }
@@ -363,20 +326,6 @@ module.exports = React.createClass({
             return this._getUnsentMessageContent();
         }
 
-        // unread count trumps who is typing since the unread count is only
-        // set when you've scrolled up
-        if (this.props.numUnreadMessages) {
-            // MUST use var name "count" for pluralization to kick in
-            const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
-
-            return (
-                <div className="mx_RoomStatusBar_unreadMessagesBar"
-                        onClick={this.props.onScrollToBottomClick}>
-                    { unreadMsgs }
-                </div>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">

src/components/structures/RoomView.js

@@ -1473,11 +1473,10 @@ module.exports = React.createClass({
 
     onStatusBarHidden: function() {
         // This is currently not desired as it is annoying if it keeps expanding and collapsing
-        // TODO: Find a less annoying way of hiding the status bar
+        if (this.unmounted) return;
-        /*if (this.unmounted) return;
         this.setState({
             statusBarVisible: false,
-        });*/
+        });
     },
 
     /**
@@ -1651,14 +1650,11 @@ module.exports = React.createClass({
             isStatusAreaExpanded = this.state.statusBarVisible;
             statusBar = <RoomStatusBar
                 room={this.state.room}
-                numUnreadMessages={this.state.numUnreadMessages}
-                atEndOfLiveTimeline={this.state.atEndOfLiveTimeline}
                 sentMessageAndIsAlone={this.state.isAlone}
                 hasActiveCall={inCall}
                 isPeeking={myMembership !== "join"}
                 onInviteClick={this.onInviteButtonClick}
                 onStopWarningClick={this.onStopAloneWarningClick}
-                onScrollToBottomClick={this.jumpToLiveTimeline}
                 onResize={this.onChildResize}
                 onVisible={this.onStatusBarVisible}
                 onHidden={this.onStatusBarHidden}
@@ -1757,8 +1753,8 @@ module.exports = React.createClass({
         }
 
         if (MatrixClientPeg.get().isGuest()) {
-            const LoginBox = sdk.getComponent('structures.LoginBox');
+            const AuthButtons = sdk.getComponent('views.auth.AuthButtons');
-            messageComposer = <LoginBox />;
+            messageComposer = <AuthButtons />;
         }
 
         // TODO: Why aren't we storing the term/scope/count in this format
@@ -1777,20 +1773,20 @@ module.exports = React.createClass({
             if (call.type === "video") {
                 zoomButton = (
                     <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={_t("Fill screen")}>
-                        <TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
+                        <TintableSvg src={require("../../../res/img/fullscreen.svg")} width="29" height="22" style={{ marginTop: 1, marginRight: 4 }} />
                     </div>
                 );
 
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
-                        <TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
+                        <TintableSvg src={call.isLocalVideoMuted() ? require("../../../res/img/video-unmute.svg") : require("../../../res/img/video-mute.svg")}
                              alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
                              width="31" height="27" />
                     </div>;
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
-                    <TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
+                    <TintableSvg src={call.isMicrophoneMuted() ? require("../../../res/img/voice-unmute.svg") : require("../../../res/img/voice-mute.svg")}
                          alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                          width="21" height="26" />
                 </div>;
@@ -1802,7 +1798,7 @@ module.exports = React.createClass({
                     { videoMuteButton }
                     { zoomButton }
                     { statusBar }
-                    <TintableSvg className="mx_RoomView_voipChevron" src="img/voip-chevron.svg" width="22" height="17" />
+                    <TintableSvg className="mx_RoomView_voipChevron" src={require("../../../res/img/voip-chevron.svg")} width="22" height="17" />
                 </div>;
         }
 
@@ -1864,6 +1860,14 @@ module.exports = React.createClass({
                                        onCloseClick={this.forgetReadMarker}
                                     />);
         }
+        let jumpToBottom;
+        if (!this.state.atEndOfLiveTimeline) {
+            const JumpToBottomButton = sdk.getComponent('rooms.JumpToBottomButton');
+            jumpToBottom = (<JumpToBottomButton
+                numUnreadMessages={this.state.numUnreadMessages}
+                onScrollToBottomClick={this.jumpToLiveTimeline}
+            />);
+        }
         const statusBarAreaClass = classNames(
             "mx_RoomView_statusArea",
             {
@@ -1901,6 +1905,7 @@ module.exports = React.createClass({
                         { auxPanel }
                         <div className="mx_RoomView_timeline">
                             { topUnreadMessagesBar }
+                            { jumpToBottom }
                             { messagePanel }
                             { searchResultsPanel }
                         </div>

src/components/structures/ScrollPanel.js

@@ -223,6 +223,8 @@ module.exports = React.createClass({
 
     onResize: function() {
         this.props.onResize();
+        // clear min-height as the height might have changed
+        this.clearBlockShrinking();
         this.checkScroll();
         if (this._gemScroll) this._gemScroll.forceUpdate();
     },
@@ -372,6 +374,8 @@ module.exports = React.createClass({
             }
             this._unfillDebouncer = setTimeout(() => {
                 this._unfillDebouncer = null;
+                // if timeline shrinks, min-height should be cleared
+                this.clearBlockShrinking();
                 this.props.onUnfillRequest(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
@@ -678,6 +682,29 @@ module.exports = React.createClass({
         this._gemScroll = gemScroll;
     },
 
+    /**
+     * Set the current height as the min height for the message list
+     * so the timeline cannot shrink. This is used to avoid
+     * jumping when the typing indicator gets replaced by a smaller message.
+     */
+    blockShrinking: function() {
+        const messageList = this.refs.itemlist;
+        if (messageList) {
+            const currentHeight = messageList.clientHeight;
+            messageList.style.minHeight = `${currentHeight}px`;
+        }
+    },
+
+    /**
+     * Clear the previously set min height
+     */
+    clearBlockShrinking: function() {
+        const messageList = this.refs.itemlist;
+        if (messageList) {
+            messageList.style.minHeight = null;
+        }
+    },
+
     render: function() {
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to

src/components/structures/TabbedView.js

@@ -0,0 +1,118 @@
+/*
+Copyright 2017 Travis Ralston
+Copyright 2019 New Vector 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 * as React from "react";
+import {_t} from '../../languageHandler';
+import PropTypes from "prop-types";
+
+/**
+ * Represents a tab for the TabbedView.
+ */
+export class Tab {
+    /**
+     * Creates a new tab.
+     * @param {string} tabLabel The untranslated tab label.
+     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
+     * @param {string} tabJsx The JSX for the tab container.
+     */
+    constructor(tabLabel, tabIconClass, tabJsx) {
+        this.label = tabLabel;
+        this.icon = tabIconClass;
+        this.body = tabJsx;
+    }
+}
+
+export class TabbedView extends React.Component {
+    static propTypes = {
+        // The tabs to show
+        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            activeTabIndex: 0,
+        };
+    }
+
+    _getActiveTabIndex() {
+        if (!this.state || !this.state.activeTabIndex) return 0;
+        return this.state.activeTabIndex;
+    }
+
+    /**
+     * Shows the given tab
+     * @param {Tab} tab the tab to show
+     * @private
+     */
+    _setActiveTab(tab) {
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx !== -1) {
+            this.setState({activeTabIndex: idx});
+        } else {
+            console.error("Could not find tab " + tab.label + " in tabs");
+        }
+    }
+
+    _renderTabLabel(tab) {
+        let classes = "mx_TabbedView_tabLabel ";
+
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
+        if (tab.label === "Visit old settings") classes += "mx_TabbedView_tabLabel_TEMP_HACK";
+
+        let tabIcon = null;
+        if (tab.icon) {
+            tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
+        }
+
+        const onClickHandler = () => this._setActiveTab(tab);
+
+        return (
+            <span className={classes} key={"tab_label_" + tab.label}
+                  onClick={onClickHandler}>
+                {tabIcon}
+                <span className="mx_TabbedView_tabLabel_text">
+                    {_t(tab.label)}
+                </span>
+            </span>
+        );
+    }
+
+    _renderTabPanel(tab) {
+        return (
+            <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
+                {tab.body}
+            </div>
+        );
+    }
+
+    render() {
+        const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
+        const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
+
+        return (
+            <div className="mx_TabbedView">
+                <div className="mx_TabbedView_tabLabels">
+                    {labels}
+                </div>
+                {panel}
+            </div>
+        );
+    }
+}

src/components/structures/TagPanel.js

@@ -136,7 +136,7 @@ const TagPanel = React.createClass({
         let clearButton;
         if (itemsSelected) {
             clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                <TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
                              alt={_t("Clear filter")}
                              title={_t("Clear filter")}
                 />

src/components/structures/TimelinePanel.js

@@ -455,7 +455,7 @@ var TimelinePanel = React.createClass({
                 //
                 const myUserId = MatrixClientPeg.get().credentials.userId;
                 const sender = ev.sender ? ev.sender.userId : null;
-                var callback = null;
+                var callRMUpdated = false;
                 if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
                     updatedState.readMarkerVisible = true;
                 } else if (lastEv && this.getReadMarkerPosition() === 0) {
@@ -465,11 +465,16 @@ var TimelinePanel = React.createClass({
                     this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
                     updatedState.readMarkerVisible = false;
                     updatedState.readMarkerEventId = lastEv.getId();
-                    callback = this.props.onReadMarkerUpdated;
+                    callRMUpdated = true;
                 }
             }
 
-            this.setState(updatedState, callback);
+            this.setState(updatedState, () => {
+                this.refs.messagePanel.updateTimelineMinHeight();
+                if (callRMUpdated) {
+                    this.props.onReadMarkerUpdated();
+                }
+            });
         });
     },
 

src/components/structures/TopLeftMenuButton.js

@@ -89,7 +89,7 @@ export default class TopLeftMenuButton extends React.Component {
                     resizeMethod="crop"
                 />
                 { nameElement }
-                <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
+                <img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
             </AccessibleButton>
         );
     }

src/components/structures/UploadBar.js

@@ -91,8 +91,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
                 <div className="mx_UploadBar_uploadProgressOuter">
                     <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
                 </div>
-                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
+                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
-                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
+                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
                     onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
                 />
                 <div className="mx_UploadBar_uploadBytes">

src/components/structures/UserSettings.js

@@ -1227,7 +1227,7 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <AccessibleButton element="img" src="img/cancel-small.svg" width="14" height="14" alt={_t("Remove")}
+                        <AccessibleButton element="img" src={require("../../../res/img/cancel-small.svg")} width="14" height="14" alt={_t("Remove")}
                             onClick={onRemoveClick} />
                     </div>
                 </div>
@@ -1252,7 +1252,7 @@ module.exports = React.createClass({
                             onValueChanged={this._onAddEmailEditFinished} />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <AccessibleButton element="img" src="img/plus.svg" width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
+                         <AccessibleButton element="img" src={require("../../../res/img/plus.svg")} width="14" height="14" alt={_t("Add")} onClick={this._addEmail} />
                     </div>
                 </div>
             );
@@ -1322,7 +1322,7 @@ module.exports = React.createClass({
 
                     <div className="mx_UserSettings_avatarPicker">
                         <AccessibleButton className="mx_UserSettings_avatarPicker_remove" onClick={this.onAvatarRemoveClick}>
-                            <img src="img/cancel.svg"
+                            <img src={require("../../../res/img/cancel.svg")}
                                 width="15" height="15"
                                 className="mx_filterFlipColor"
                                 alt={_t("Remove avatar")}
@@ -1334,7 +1334,7 @@ module.exports = React.createClass({
                         </div>
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
-                                <img src="img/camera.svg" className="mx_filterFlipColor"
+                                <img src={require("../../../res/img/camera.svg")} className="mx_filterFlipColor"
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>

src/components/structures/auth/ForgotPassword.js

@@ -183,10 +183,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const LoginPage = sdk.getComponent("login.LoginPage");
+        const AuthPage = sdk.getComponent("auth.AuthPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const Spinner = sdk.getComponent("elements.Spinner");
 
         let resetPasswordJsx;
@@ -234,7 +234,7 @@ module.exports = React.createClass({
                 errorText = <div className="mx_Login_error">{ err }</div>;
             }
 
-            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+            const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
             resetPasswordJsx = (
             <div>
@@ -272,7 +272,6 @@ module.exports = React.createClass({
                         { _t('Create an account') }
                     </a>
                     <LanguageSelector />
-                    <LoginFooter />
                 </div>
             </div>
             );
@@ -280,12 +279,12 @@ module.exports = React.createClass({
 
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                <AuthBody>
-                    { resetPasswordJsx }
+                    {resetPasswordJsx}
-                </div>
+                </AuthBody>
-            </LoginPage>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Login.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,7 +24,6 @@ import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import { AutoDiscovery } from "matrix-js-sdk";
 
@@ -487,7 +486,7 @@ module.exports = React.createClass({
     },
 
     _renderPasswordStep: function() {
-        const PasswordLogin = sdk.getComponent('login.PasswordLogin');
+        const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
         return (
             <PasswordLogin
                onSubmit={this.onPasswordLogin}
@@ -516,10 +515,10 @@ module.exports = React.createClass({
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
-        const LoginPage = sdk.getComponent("login.LoginPage");
+        const AuthPage = sdk.getComponent("auth.AuthPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -533,7 +532,6 @@ module.exports = React.createClass({
         }
 
         let serverConfig;
-        let header;
 
         if (!SdkConfig.get()['disable_custom_urls']) {
             serverConfig = <ServerConfig ref="serverConfig"
@@ -546,15 +544,7 @@ module.exports = React.createClass({
                 delayTimeMs={1000} />;
         }
 
-        // FIXME: remove status.im theme tweaks
+        const header = <h2>{ _t('Sign in') } { loader }</h2>;
-        const theme = SettingsStore.getValue("theme");
-        if (theme !== "status") {
-            header = <h2>{ _t('Sign in') } { loader }</h2>;
-        } else {
-            if (!errorText) {
-                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
-            }
-        }
 
         let errorTextSection;
         if (errorText) {
@@ -565,26 +555,23 @@ module.exports = React.createClass({
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+        const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                <AuthBody>
-                    <div>
+                    { header }
-                        { header }
+                    { errorTextSection }
-                        { errorTextSection }
+                    { this.componentForStep(this.state.currentFlow) }
-                        { this.componentForStep(this.state.currentFlow) }
+                    { serverConfig }
-                        { serverConfig }
+                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
-                        <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
+                        { _t('Create an account') }
-                            { _t('Create an account') }
+                    </a>
-                        </a>
+                    { loginAsGuestJsx }
-                        { loginAsGuestJsx }
+                    <LanguageSelector />
-                        <LanguageSelector />
+                </AuthBody>
-                        <LoginFooter />
+            </AuthPage>
-                    </div>
-                </div>
-            </LoginPage>
         );
     },
 });

src/components/structures/auth/PostRegistration.js

@@ -60,12 +60,13 @@ module.exports = React.createClass({
     render: function() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        const LoginPage = sdk.getComponent('login.LoginPage');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader />
-                    <LoginHeader />
+                <AuthBody>
                     <div className="mx_Login_profile">
                         { _t('Set a display name:') }
                         <ChangeDisplayName />
@@ -75,8 +76,8 @@ module.exports = React.createClass({
                         <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
                         { this.state.errorString }
                     </div>
-                </div>
+                </AuthBody>
-            </LoginPage>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Registration.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,11 +24,10 @@ import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import RegistrationForm from '../../views/login/RegistrationForm';
+import RegistrationForm from '../../views/auth/RegistrationForm';
 import RtsClient from '../../../RtsClient';
 import { _t, _td } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 
 const MIN_PASSWORD_LENGTH = 6;
@@ -397,14 +396,12 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
-        const LoginFooter = sdk.getComponent('login.LoginFooter');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
-        const LoginPage = sdk.getComponent('login.LoginPage');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent("elements.Spinner");
-        const ServerConfig = sdk.getComponent('views.login.ServerConfig');
+        const ServerConfig = sdk.getComponent('views.auth.ServerConfig');
-
-        const theme = SettingsStore.getValue("theme");
 
         let registerBody;
         if (this.state.doingUIAuth) {
@@ -458,47 +455,40 @@ module.exports = React.createClass({
             );
         }
 
-        let header;
         let errorText;
-        // FIXME: remove hardcoded Status team tweaks at some point
         const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-        if (theme === 'status' && err) {
+        const header = <h2>{ _t('Create an account') }</h2>;
-            header = <div className="mx_Login_error">{ err }</div>;
+        if (err) {
-        } else {
+            errorText = <div className="mx_Login_error">{ err }</div>;
-            header = <h2>{ _t('Create an account') }</h2>;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
-            }
         }
 
         let signIn;
         if (!this.state.doingUIAuth) {
             signIn = (
                 <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
-                    { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
+                    { _t('I already have an account') }
                 </a>
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
+        const LanguageSelector = sdk.getComponent('structures.auth.LanguageSelector');
 
         return (
-            <LoginPage>
+            <AuthPage>
-                <div className="mx_Login_box">
+                <AuthHeader
-                    <LoginHeader
+                    icon={this.state.teamSelected ?
-                        icon={this.state.teamSelected ?
+                        this.props.teamServerConfig.teamServerURL + "/static/common/" +
-                            this.props.teamServerConfig.teamServerURL + "/static/common/" +
+                        this.state.teamSelected.domain + "/icon.png" :
-                            this.state.teamSelected.domain + "/icon.png" :
+                        null}
-                            null}
+                />
-                    />
+                <AuthBody>
                     { header }
                     { registerBody }
                     { signIn }
                     { errorText }
                     <LanguageSelector />
-                    <LoginFooter />
+                </AuthBody>
-                </div>
+            </AuthPage>
-            </LoginPage>
         );
     },
 });

src/components/views/auth/AuthBody.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthBody extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/auth/AuthButtons.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,12 +18,12 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
-import { _t } from '../../languageHandler';
+import { _t } from '../../../languageHandler';
-const dis = require('../../dispatcher');
+const dis = require('../../../dispatcher');
-const AccessibleButton = require('../../components/views/elements/AccessibleButton');
+const AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
-    displayName: 'LoginBox',
+    displayName: 'AuthButtons',
 
     propTypes: {
     },
@@ -38,18 +38,18 @@ module.exports = React.createClass({
 
     render: function() {
         const loginButton = (
-            <div className="mx_LoginBox_loginButton_wrapper">
+            <div className="mx_AuthButtons_loginButton_wrapper">
-                <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
+                <AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
                     { _t("Login") }
                 </AccessibleButton>
-                <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                <AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
                     { _t("Register") }
                 </AccessibleButton>
             </div>
         );
 
         return (
-            <div className="mx_LoginBox">
+            <div className="mx_AuthButtons">
                 { loginButton }
             </div>
         );

src/components/views/auth/AuthFooter.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -20,11 +21,11 @@ import { _t } from '../../../languageHandler';
 import React from 'react';
 
 module.exports = React.createClass({
-    displayName: 'LoginFooter',
+    displayName: 'AuthFooter',
 
     render: function() {
         return (
-            <div className="mx_Login_links">
+            <div className="mx_AuthFooter">
                 <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
             </div>
         );

src/components/views/auth/AuthHeader.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,14 +18,17 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import sdk from '../../../index';
 
 module.exports = React.createClass({
-    displayName: 'LoginHeader',
+    displayName: 'AuthHeader',
 
     render: function() {
+        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
+
         return (
-            <div className="mx_Login_logo">
+            <div className="mx_AuthHeader">
-                Matrix
+                <AuthHeaderLogo />
             </div>
         );
     },

src/components/views/auth/AuthHeaderLogo.js

@@ -0,0 +1,27 @@
+/*
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthHeaderLogo extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthHeaderLogo">
+            Matrix
+        </div>;
+    }
+}

src/components/views/auth/AuthPage.js

@@ -0,0 +1,38 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+const React = require('react');
+import sdk from '../../../index';
+
+module.exports = React.createClass({
+    displayName: 'AuthPage',
+
+    render: function() {
+        const AuthFooter = sdk.getComponent('auth.AuthFooter');
+
+        return (
+            <div className="mx_AuthPage">
+                <div className="mx_AuthPage_modal">
+                    { this.props.children }
+                </div>
+                <AuthFooter />
+            </div>
+        );
+    },
+});

src/components/views/auth/CountryDropdown.js

@@ -70,7 +70,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={`img/flags/${iso2}.png`} />;
+        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
     }
 
     _getShortOption(iso2) {

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
             return <Loader />;
         }
 
-        const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
+        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         const sitePublicKey = this.props.stageParams.public_key;
 
         let errorSection;

src/components/views/auth/PasswordLogin.js

@@ -201,7 +201,7 @@ class PasswordLogin extends React.Component {
                     disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
-                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+                const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
                 classes.mx_Login_phoneNumberField = true;
                 classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;

src/components/views/auth/RegistrationForm.js

@@ -323,7 +323,7 @@ module.exports = React.createClass({
             }
         }
 
-        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
         let phoneSection;
         if (!SdkConfig.get().disable_3pid_login) {
             const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ? _t("Mobile phone number") : _t("Mobile phone number (optional)");

src/components/views/auth/ServerConfig.js

@@ -138,7 +138,7 @@ module.exports = React.createClass({
     },
 
     showHelpPopup: function() {
-        const CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
+        const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
     },
 

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -79,7 +79,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
-                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Reject') }
             </div>
         </div>;

src/components/views/context_menus/RoomTileContextMenu.js

@@ -245,26 +245,26 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomTileContextMenu">
                 <div className="mx_RoomTileContextMenu_notif_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
+                    <img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
                 </div>
                 <div className={alertMeClasses} onClick={this._onClickAlertMe} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
                     { _t('All messages (noisy)') }
                 </div>
                 <div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
                     { _t('All messages') }
                 </div>
                 <div className={mentionsClasses} onClick={this._onClickMentions} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
                     { _t('Mentions only') }
                 </div>
                 <div className={muteNotifsClasses} onClick={this._onClickMute} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
                     { _t('Mute') }
                 </div>
             </div>
@@ -298,7 +298,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                     { leaveText }
                 </div>
             </div>
@@ -327,18 +327,18 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className={favouriteClasses} onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
                     { _t('Favourite') }
                 </div>
                 <div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
                     { _t('Low Priority') }
                 </div>
                 <div className={dmClasses} onClick={this._onClickDM} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
                     { _t('Direct Chat') }
                 </div>
             </div>

src/components/views/context_menus/TagTileContextMenu.js

@@ -59,7 +59,7 @@ export default class TagTileContextMenu extends React.Component {
             <div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
                 <TintableSvg
                     className="mx_TagTileContextMenu_item_icon"
-                    src="img/icons-groups.svg"
+                    src={require("../../../../res/img/icons-groups.svg")}
                     width="15"
                     height="15"
                 />
@@ -67,7 +67,7 @@ export default class TagTileContextMenu extends React.Component {
             </div>
             <hr className="mx_TagTileContextMenu_separator" />
             <div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
-                <img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Remove') }
             </div>
         </div>;

src/components/views/dialogs/BaseDialog.js

@@ -111,7 +111,7 @@ export default React.createClass({
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
-                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
+                <TintableSvg src={require("../../../../res/img/icons-close-button.svg")} width="35" height="35" />
             </AccessibleButton>;
         }
 

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 onClick={this.props.onNewDMClick}
             >
                 <div className="mx_RoomTile_avatar">
-                    <img src="img/create-big.svg" width="26" height="26" />
+                    <img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;

src/components/views/dialogs/ShareDialog.js

@@ -26,11 +26,11 @@ import * as ContextualMenu from "../../structures/ContextualMenu";
 const socials = [
     {
         name: 'Facebook',
-        img: 'img/social/facebook.png',
+        img: require("../../../../res/img/social/facebook.png"),
         url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
     }, {
         name: 'Twitter',
-        img: 'img/social/twitter-2.png',
+        img: require("../../../../res/img/social/twitter-2.png"),
         url: (url) => `https://twitter.com/home?status=${url}`,
     }, /* // icon missing
         name: 'Google Plus',
@@ -38,15 +38,15 @@ const socials = [
         url: (url) => `https://plus.google.com/share?url=${url}`,
     },*/ {
         name: 'LinkedIn',
-        img: 'img/social/linkedin.png',
+        img: require("../../../../res/img/social/linkedin.png"),
         url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
     }, {
         name: 'Reddit',
-        img: 'img/social/reddit.png',
+        img: require("../../../../res/img/social/reddit.png"),
         url: (url) => `http://www.reddit.com/submit?url=${url}`,
     }, {
         name: 'email',
-        img: 'img/social/email-1.png',
+        img: require("../../../../res/img/social/email-1.png"),
         url: (url) => `mailto:?body=${url}`,
     },
 ];
@@ -202,7 +202,7 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {