Merge branch 'develop' into matthew/homepages

Conflicts:
	src/component-index.js
	src/skins/vector/css/matrix-react-sdk/views/rooms/_RoomPreviewBar.scss

src/component-index.js

@@ -27,62 +27,64 @@ limitations under the License.
 module.exports.components = require('matrix-react-sdk/lib/component-index').components;
 
 import structures$BottomLeftMenu from './components/structures/BottomLeftMenu';
-module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu;
+structures$BottomLeftMenu && (module.exports.components['structures.BottomLeftMenu'] = structures$BottomLeftMenu);
 import structures$CompatibilityPage from './components/structures/CompatibilityPage';
-module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage;
+structures$CompatibilityPage && (module.exports.components['structures.CompatibilityPage'] = structures$CompatibilityPage);
 import structures$LeftPanel from './components/structures/LeftPanel';
-module.exports.components['structures.LeftPanel'] = structures$LeftPanel;
+structures$LeftPanel && (module.exports.components['structures.LeftPanel'] = structures$LeftPanel);
 import structures$RightPanel from './components/structures/RightPanel';
-module.exports.components['structures.RightPanel'] = structures$RightPanel;
+structures$RightPanel && (module.exports.components['structures.RightPanel'] = structures$RightPanel);
 import structures$HomePage from './components/structures/HomePage';
-module.exports.components['structures.HomePage'] = structures$HomePage;
+structures$HomePage && (module.exports.components['structures.HomePage'] = structures$HomePage);
 import structures$RoomDirectory from './components/structures/RoomDirectory';
-module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory;
+structures$RoomDirectory && (module.exports.components['structures.RoomDirectory'] = structures$RoomDirectory);
 import structures$RoomSubList from './components/structures/RoomSubList';
-module.exports.components['structures.RoomSubList'] = structures$RoomSubList;
+structures$RoomSubList && (module.exports.components['structures.RoomSubList'] = structures$RoomSubList);
 import structures$SearchBox from './components/structures/SearchBox';
-module.exports.components['structures.SearchBox'] = structures$SearchBox;
+structures$SearchBox && (module.exports.components['structures.SearchBox'] = structures$SearchBox);
 import structures$ViewSource from './components/structures/ViewSource';
-module.exports.components['structures.ViewSource'] = structures$ViewSource;
+structures$ViewSource && (module.exports.components['structures.ViewSource'] = structures$ViewSource);
 import views$context_menus$MessageContextMenu from './components/views/context_menus/MessageContextMenu';
-module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu;
+views$context_menus$MessageContextMenu && (module.exports.components['views.context_menus.MessageContextMenu'] = views$context_menus$MessageContextMenu);
 import views$context_menus$NotificationStateContextMenu from './components/views/context_menus/NotificationStateContextMenu';
-module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu;
+views$context_menus$NotificationStateContextMenu && (module.exports.components['views.context_menus.NotificationStateContextMenu'] = views$context_menus$NotificationStateContextMenu);
 import views$context_menus$RoomTagContextMenu from './components/views/context_menus/RoomTagContextMenu';
-module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu;
+views$context_menus$RoomTagContextMenu && (module.exports.components['views.context_menus.RoomTagContextMenu'] = views$context_menus$RoomTagContextMenu);
+import views$dialogs$BugReportDialog from './components/views/dialogs/BugReportDialog';
+views$dialogs$BugReportDialog && (module.exports.components['views.dialogs.BugReportDialog'] = views$dialogs$BugReportDialog);
 import views$dialogs$ChangelogDialog from './components/views/dialogs/ChangelogDialog';
-module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog;
+views$dialogs$ChangelogDialog && (module.exports.components['views.dialogs.ChangelogDialog'] = views$dialogs$ChangelogDialog);
 import views$directory$NetworkDropdown from './components/views/directory/NetworkDropdown';
-module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown;
+views$directory$NetworkDropdown && (module.exports.components['views.directory.NetworkDropdown'] = views$directory$NetworkDropdown);
 import views$elements$ImageView from './components/views/elements/ImageView';
-module.exports.components['views.elements.ImageView'] = views$elements$ImageView;
+views$elements$ImageView && (module.exports.components['views.elements.ImageView'] = views$elements$ImageView);
 import views$elements$Spinner from './components/views/elements/Spinner';
-module.exports.components['views.elements.Spinner'] = views$elements$Spinner;
+views$elements$Spinner && (module.exports.components['views.elements.Spinner'] = views$elements$Spinner);
 import views$globals$GuestWarningBar from './components/views/globals/GuestWarningBar';
-module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar;
+views$globals$GuestWarningBar && (module.exports.components['views.globals.GuestWarningBar'] = views$globals$GuestWarningBar);
 import views$globals$MatrixToolbar from './components/views/globals/MatrixToolbar';
-module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar;
+views$globals$MatrixToolbar && (module.exports.components['views.globals.MatrixToolbar'] = views$globals$MatrixToolbar);
 import views$globals$NewVersionBar from './components/views/globals/NewVersionBar';
-module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar;
+views$globals$NewVersionBar && (module.exports.components['views.globals.NewVersionBar'] = views$globals$NewVersionBar);
 import views$login$VectorCustomServerDialog from './components/views/login/VectorCustomServerDialog';
-module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog;
+views$login$VectorCustomServerDialog && (module.exports.components['views.login.VectorCustomServerDialog'] = views$login$VectorCustomServerDialog);
 import views$login$VectorLoginFooter from './components/views/login/VectorLoginFooter';
-module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter;
+views$login$VectorLoginFooter && (module.exports.components['views.login.VectorLoginFooter'] = views$login$VectorLoginFooter);
 import views$login$VectorLoginHeader from './components/views/login/VectorLoginHeader';
-module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader;
+views$login$VectorLoginHeader && (module.exports.components['views.login.VectorLoginHeader'] = views$login$VectorLoginHeader);
 import views$messages$DateSeparator from './components/views/messages/DateSeparator';
-module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator;
+views$messages$DateSeparator && (module.exports.components['views.messages.DateSeparator'] = views$messages$DateSeparator);
 import views$messages$MessageTimestamp from './components/views/messages/MessageTimestamp';
-module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp;
+views$messages$MessageTimestamp && (module.exports.components['views.messages.MessageTimestamp'] = views$messages$MessageTimestamp);
 import views$rooms$DNDRoomTile from './components/views/rooms/DNDRoomTile';
-module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile;
+views$rooms$DNDRoomTile && (module.exports.components['views.rooms.DNDRoomTile'] = views$rooms$DNDRoomTile);
 import views$rooms$RoomDropTarget from './components/views/rooms/RoomDropTarget';
-module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget;
+views$rooms$RoomDropTarget && (module.exports.components['views.rooms.RoomDropTarget'] = views$rooms$RoomDropTarget);
 import views$rooms$RoomTooltip from './components/views/rooms/RoomTooltip';
-module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip;
+views$rooms$RoomTooltip && (module.exports.components['views.rooms.RoomTooltip'] = views$rooms$RoomTooltip);
 import views$rooms$SearchBar from './components/views/rooms/SearchBar';
-module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar;
+views$rooms$SearchBar && (module.exports.components['views.rooms.SearchBar'] = views$rooms$SearchBar);
 import views$settings$IntegrationsManager from './components/views/settings/IntegrationsManager';
-module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager;
+views$settings$IntegrationsManager && (module.exports.components['views.settings.IntegrationsManager'] = views$settings$IntegrationsManager);
 import views$settings$Notifications from './components/views/settings/Notifications';
-module.exports.components['views.settings.Notifications'] = views$settings$Notifications;
+views$settings$Notifications && (module.exports.components['views.settings.Notifications'] = views$settings$Notifications);

src/components/structures/CompatibilityPage.js

@@ -45,10 +45,8 @@ module.exports = React.createClass({
                 available or experimental in your current browser.
                 </p>
                 <p>
-                Please install <a href="https://www.google.com/chrome">Chrome</a> or
-                <a href="https://getfirefox.com">Firefox</a> for the best experience.
-                <a href="http://apple.com/safari">Safari</a> and
-                <a href="http://opera.com">Opera</a> work too.
+                Please install <a href="https://www.google.com/chrome">Chrome</a> or <a href="https://getfirefox.com">Firefox</a> for
+                the best experience. <a href="http://apple.com/safari">Safari</a> and <a href="http://opera.com">Opera</a> work too.
                 </p>
                 <p>
                 With your current browser, the look and feel of the application may

src/components/structures/RoomDirectory.js

@@ -31,6 +31,8 @@ var linkifyMatrix = require('matrix-react-sdk/lib/linkify-matrix');
 var sanitizeHtml = require('sanitize-html');
 var q = require('q');
 
+import {instanceForInstanceId, protocolNameForInstanceId} from '../../utils/DirectoryUtils';
+
 linkifyMatrix(linkify);
 
 module.exports = React.createClass({
@@ -42,9 +44,7 @@ module.exports = React.createClass({
 
     getDefaultProps: function() {
         return {
-            config: {
-                networks: [],
-            },
+            config: {},
         }
     },
 
@@ -52,36 +52,26 @@ module.exports = React.createClass({
         return {
             publicRooms: [],
             loading: true,
-            network: null,
+            protocolsLoading: true,
+            instanceId: null,
+            includeAll: false,
             roomServer: null,
             filterString: null,
         }
     },
 
     componentWillMount: function() {
-        // precompile Regexps
-        this.portalRoomPatterns = {};
-        this.nativePatterns = {};
-        if (this.props.config.networks) {
-            for (const network of Object.keys(this.props.config.networks)) {
-                const network_info = this.props.config.networks[network];
-                if (network_info.portalRoomPattern) {
-                    this.portalRoomPatterns[network] = new RegExp(network_info.portalRoomPattern);
-                }
-                if (network_info.nativePattern) {
-                    this.nativePatterns[network] = new RegExp(network_info.nativePattern);
-                }
-            }
-        }
-
         this.nextBatch = null;
         this.filterTimeout = null;
         this.scrollPanel = null;
         this.protocols = null;
 
+        this.setState({protocolsLoading: true});
         MatrixClientPeg.get().getThirdpartyProtocols().done((response) => {
             this.protocols = response;
+            this.setState({protocolsLoading: false});
         }, (err) => {
+            this.setState({protocolsLoading: false});
             if (MatrixClientPeg.get().isGuest()) {
                 // Guests currently aren't allowed to use this API, so
                 // ignore this as otherwise this error is literally the
@@ -131,6 +121,11 @@ module.exports = React.createClass({
         if (my_server != MatrixClientPeg.getHomeServerName()) {
             opts.server = my_server;
         }
+        if (this.state.instanceId) {
+            opts.third_party_instance_id = this.state.instanceId;
+        } else if (this.state.includeAll) {
+            opts.include_all_networks = true;
+        }
         if (this.nextBatch) opts.since = this.nextBatch;
         if (my_filter_string) opts.filter = { generic_search_term: my_filter_string } ;
         return MatrixClientPeg.get().publicRooms(opts).then((data) => {
@@ -231,7 +226,7 @@ module.exports = React.createClass({
         }
     },
 
-    onOptionChange: function(server, network) {
+    onOptionChange: function(server, instanceId, includeAll) {
         // clear next batch so we don't try to load more rooms
         this.nextBatch = null;
         this.setState({
@@ -240,7 +235,8 @@ module.exports = React.createClass({
             // to clear the list anyway.
             publicRooms: [],
             roomServer: server,
-            network: network,
+            instanceId: instanceId,
+            includeAll: includeAll,
         }, this.refreshRoomList);
         // We also refresh the room list each time even though this
         // filtering is client-side. It hopefully won't be client side
@@ -271,7 +267,7 @@ module.exports = React.createClass({
         this.filterTimeout = setTimeout(() => {
             this.filterTimeout = null;
             this.refreshRoomList();
-        }, 300);
+        }, 700);
     },
 
     onFilterClear: function() {
@@ -286,14 +282,19 @@ module.exports = React.createClass({
     },
 
     onJoinClick: function(alias) {
-        // If we're on the 'Matrix' network (or all networks),
-        // just show that rooms alias
-        if (this.state.network == null || this.state.network == '_matrix') {
+        // If we don't have a particular instance id selected, just show that rooms alias
+        if (!this.state.instanceId) {
+            // If the user specified an alias without a domain, add on whichever server is selected
+            // in the dropdown
+            if (alias.indexOf(':') == -1) {
+                alias = alias + ':' + this.state.roomServer;
+            }
             this.showRoomAlias(alias);
         } else {
-            // This is a 3rd party protocol. Let's see if we
-            // can join it
-            const fields = this._getFieldsForThirdPartyLocation(alias, this.state.network);
+            // This is a 3rd party protocol. Let's see if we can join it
+            const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+            const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+            const fields = protocolName ? this._getFieldsForThirdPartyLocation(alias, this.protocols[protocolName], instance) : null;
             if (!fields) {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
@@ -302,8 +303,7 @@ module.exports = React.createClass({
                 });
                 return;
             }
-            const protocol = this._protocolForThirdPartyNetwork(this.state.network);
-            MatrixClientPeg.get().getThirdpartyLocation(protocol, fields).done((resp) => {
+            MatrixClientPeg.get().getThirdpartyLocation(protocolName, fields).done((resp) => {
                 if (resp.length > 0 && resp[0].alias) {
                     this.showRoomAlias(resp[0].alias);
                 } else {
@@ -372,13 +372,7 @@ module.exports = React.createClass({
 
         if (!this.state.publicRooms) return [];
 
-        var rooms = this.state.publicRooms.filter((a) => {
-            if (this.state.network) {
-                if (!this._isRoomInNetwork(a, this.state.roomServer, this.state.network)) return false;
-            }
-
-            return true;
-        });
+        var rooms = this.state.publicRooms;
         var rows = [];
         var self = this;
         var guestRead, guestJoin, perms;
@@ -440,119 +434,46 @@ module.exports = React.createClass({
         this.scrollPanel = element;
     },
 
-    /**
-     * Terrible temporary function that guess what network a public room
-     * entry is in, until synapse is able to tell us
-     */
-    _isRoomInNetwork: function(room, server, network) {
-        // We carve rooms into two categories here. 'portal' rooms are
-        // rooms created by a user joining a bridge 'portal' alias to
-        // participate in that room or a foreign network. A room is a
-        // portal room if it has exactly one alias and that alias matches
-        // a pattern defined in the config. Its network is the key
-        // of the pattern that it matches.
-        // All other rooms are considered 'native matrix' rooms, and
-        // go into the special '_matrix' network.
-
-        let roomNetwork = '_matrix';
-        if (room.aliases && room.aliases.length == 1) {
-            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
-                for (const n of this.props.config.serverConfig[server].networks) {
-                    const pat = this.portalRoomPatterns[n];
-                    if (pat && pat.test(room.aliases[0])) {
-                        roomNetwork = n;
-                    }
-                }
-            }
-        }
-        return roomNetwork == network;
-    },
-
-    _stringLooksLikeId: function(s, network) {
+    _stringLooksLikeId: function(s, field_type) {
         let pat = /^#[^\s]+:[^\s]/;
-        if (
-            network && network != '_matrix' &&
-            this.nativePatterns[network]
-        ) {
-            pat = this.nativePatterns[network];
+        if (field_type && field_type.regexp) {
+            pat = new RegExp(field_type.regexp);
         }
 
         return pat.test(s);
     },
 
-    _protocolForThirdPartyNetwork: function(network) {
-        if (
-            this.props.config.networks &&
-            this.props.config.networks[network] &&
-            this.props.config.networks[network].protocol
-        ) {
-            return this.props.config.networks[network].protocol;
-        }
-    },
-
-    _getFieldsForThirdPartyLocation: function(user_input, network) {
-        if (!this.props.config.networks || !this.props.config.networks[network]) return null;
-
-        const network_info = this.props.config.networks[network];
-        if (!network_info.protocol) return null;
-
-        if (!this.protocols) return null;
-
-        let matched_instance;
-        // Try to find which instance in the 'protocols' response
-        // matches this network. We look for a matching protocol
-        // and the existence of a 'domain' field and if present,
-        // its value.
-        if (
-            this.protocols[network_info.protocol] &&
-            this.protocols[network_info.protocol].instances &&
-            this.protocols[network_info.protocol].instances.length == 1
-        ) {
-            const the_instance = this.protocols[network_info.protocol].instances[0];
-            // If there's only one instance in this protocol, use it
-            // as long as it has no domain (which we assume to mean it's
-            // there is only one possible instance).
-            if (
-                (
-                    the_instance.fields.domain === undefined &&
-                    network_info.domain === undefined
-                ) ||
-                (
-                    the_instance.fields.domain !== undefined &&
-                    the_instance.fields.domain == network_info.domain
-                )
-            ) {
-                matched_instance = the_instance;
-            }
-        } else if (network_info.domain) {
-            // otherwise, we look for one with a matching domain.
-            for (const this_instance of this.protocols[network_info.protocol].instances) {
-                if (this_instance.fields.domain == network_info.domain) {
-                    matched_instance = this_instance;
-                }
-            }
-        }
-
-        if (matched_instance === undefined) return null;
-
-        // now make an object with the fields specified by that protocol. We
+    _getFieldsForThirdPartyLocation: function(userInput, protocol, instance) {
+        // make an object with the fields specified by that protocol. We
         // require that the values of all but the last field come from the
         // instance. The last is the user input.
-        const required_fields = this.protocols[network_info.protocol].location_fields;
+        const requiredFields = protocol.location_fields;
+        if (!requiredFields) return null;
         const fields = {};
-        for (let i = 0; i < required_fields.length - 1; ++i) {
-            const this_field = required_fields[i];
-            if (matched_instance.fields[this_field] === undefined) return null;
-            fields[this_field] = matched_instance.fields[this_field];
+        for (let i = 0; i < requiredFields.length - 1; ++i) {
+            const thisField = requiredFields[i];
+            if (instance.fields[thisField] === undefined) return null;
+            fields[thisField] = instance.fields[thisField];
         }
-        fields[required_fields[required_fields.length - 1]] = user_input;
+        fields[requiredFields[requiredFields.length - 1]] = userInput;
         return fields;
     },
 
     render: function() {
+        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        if (this.state.protocolsLoading) {
+            return (
+                <div className="mx_RoomDirectory">
+                    <SimpleRoomHeader title="Directory" />
+                    <Loader />
+                </div>
+            );
+        }
+
         let content;
         if (this.state.loading) {
-            const Loader = sdk.getComponent("elements.Spinner");
             content = <div className="mx_RoomDirectory">
                 <Loader />
             </div>;
@@ -583,26 +504,35 @@ module.exports = React.createClass({
             </ScrollPanel>;
         }
 
-        let placeholder = 'Search for a room';
-        if (this.state.network === null || this.state.network === '_matrix') {
-            placeholder = '#example:' + this.state.roomServer;
-        } else if (
-            this.props.config.networks &&
-            this.props.config.networks[this.state.network] &&
-            this.props.config.networks[this.state.network].example &&
-            this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network)
+        const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+        let instance_expected_field_type;
+        if (
+            protocolName &&
+            this.protocols &&
+            this.protocols[protocolName] &&
+            this.protocols[protocolName].location_fields.length > 0 &&
+            this.protocols[protocolName].field_types
         ) {
-            placeholder = this.props.config.networks[this.state.network].example;
+            const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
+            instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
         }
 
-        let showJoinButton = this._stringLooksLikeId(this.state.filterString, this.state.network);
-        if (this.state.network && this.state.network != '_matrix') {
-            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.state.network) === null) {
+
+        let placeholder = 'Search for a room';
+        if (!this.state.instanceId) {
+            placeholder = '#example:' + this.state.roomServer;
+        } else if (instance_expected_field_type) {
+            placeholder = instance_expected_field_type.placeholder;
+        }
+
+        let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
+        if (protocolName) {
+            const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
                 showJoinButton = false;
             }
         }
 
-        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
         const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
         return (
@@ -615,7 +545,7 @@ module.exports = React.createClass({
                             onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
                             placeholder={placeholder} showJoinButton={showJoinButton}
                         />
-                        <NetworkDropdown config={this.props.config} onOptionChange={this.onOptionChange} />
+                        <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
                     </div>
                     {content}
                 </div>

src/components/structures/ViewSource.js

@@ -22,7 +22,8 @@ module.exports = React.createClass({
     displayName: 'ViewSource',
 
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired
+        content: React.PropTypes.object.isRequired,
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     componentDidMount: function() {
@@ -45,10 +46,9 @@ module.exports = React.createClass({
         return (
             <div className="mx_ViewSource">
                 <pre>
-                    {JSON.stringify(this.props.mxEvent.event, null, 2)}
+                    {JSON.stringify(this.props.content, null, 2)}
                 </pre>
             </div>
         );
     }
 });
-

src/components/views/context_menus/MessageContextMenu.js

@@ -47,7 +47,16 @@ module.exports = React.createClass({
     onViewSourceClick: function() {
         var ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createDialog(ViewSource, {
-            mxEvent: this.props.mxEvent
+            content: this.props.mxEvent.event,
+        }, 'mx_Dialog_viewsource');
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
+    onViewClearSourceClick: function() {
+        const ViewSource = sdk.getComponent('structures.ViewSource');
+        Modal.createDialog(ViewSource, {
+            // FIXME: _clearEvent is private
+            content: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
         if (this.props.onFinished) this.props.onFinished();
     },
@@ -97,6 +106,7 @@ module.exports = React.createClass({
         var eventStatus = this.props.mxEvent.status;
         var resendButton;
         var viewSourceButton;
+        var viewClearSourceButton;
         var redactButton;
         var cancelButton;
         var permalinkButton;
@@ -133,6 +143,14 @@ module.exports = React.createClass({
             </div>
         );
 
+        if (this.props.mxEvent.getType() !== this.props.mxEvent.getWireType()) {
+            viewClearSourceButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
+                    View Decrypted Source
+                </div>
+            );
+        }
+
         if (this.props.eventTileOps) {
             if (this.props.eventTileOps.isWidgetHidden()) {
                 unhidePreviewButton = (
@@ -174,6 +192,7 @@ module.exports = React.createClass({
                 {redactButton}
                 {cancelButton}
                 {viewSourceButton}
+                {viewClearSourceButton}
                 {unhidePreviewButton}
                 {permalinkButton}
                 {UserSettingsStore.isFeatureEnabled('rich_text_editor') ? quoteButton : null}

src/components/views/context_menus/NotificationStateContextMenu.js

@@ -120,22 +120,22 @@ module.exports = React.createClass({
                 </div>
                 <div className={ alertMeClasses } onClick={this._onClickAlertMe} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
                     All messages (loud)
                 </div>
                 <div className={ allNotifsClasses } onClick={this._onClickAllNotifs} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
                     All messages
                 </div>
                 <div className={ mentionsClasses } onClick={this._onClickMentions} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
                     Mentions only
                 </div>
                 <div className={ muteNotifsClasses } onClick={this._onClickMute} >
                     <img className="mx_NotificationStateContextMenu_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_NotificationStateContextMenu_icon" src="img/icon-context-mute.svg" width="16" height="12" />
+                    <img className="mx_NotificationStateContextMenu_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
                     Mute
                 </div>
             </div>

src/components/views/dialogs/BugReportDialog.js

@@ -0,0 +1,127 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import rageshake from '../../../vector/rageshake';
+
+export default class BugReportDialog extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            sendLogs: true,
+            busy: false,
+            err: null,
+            text: "",
+        };
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onCancel = this._onCancel.bind(this);
+        this._onTextChange = this._onTextChange.bind(this);
+        this._onSendLogsChange = this._onSendLogsChange.bind(this);
+    }
+
+    _onCancel(ev) {
+        this.props.onFinished(false);
+    }
+
+    _onSubmit(ev) {
+        const sendLogs = this.state.sendLogs;
+        const userText = this.state.text;
+        if (!sendLogs && userText.trim().length === 0) {
+            this.setState({
+                err: "Please describe the bug and/or send logs.",
+            });
+            return;
+        }
+        this.setState({ busy: true, err: null });
+        rageshake.sendBugReport(userText, sendLogs).then(() => {
+            this.setState({ busy: false });
+            this.props.onFinished(false);
+        }, (err) => {
+            this.setState({ busy: false, err: `Failed: ${err.message}` });
+        });
+    }
+
+    _onTextChange(ev) {
+        this.setState({ text: ev.target.value });
+    }
+
+    _onSendLogsChange(ev) {
+        this.setState({ sendLogs: ev.target.checked });
+    }
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        const okLabel = this.state.busy ? <Loader /> : 'Send';
+
+        let cancelButton = null;
+        if (!this.state.busy) {
+            cancelButton = <button onClick={this._onCancel}>
+                Cancel
+            </button>;
+        }
+
+        return (
+            <div className="mx_BugReportDialog">
+                <div className="mx_Dialog_title">
+                    Report a bug
+                </div>
+                <div className="mx_Dialog_content">
+                    <p>Please describe the bug. What did you do?
+                    What did you expect to happen?
+                    What actually happened?</p>
+                    <textarea
+                        className="mx_BugReportDialog_input"
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder="Describe your problem here."
+                    />
+                    <p>In order to diagnose problems, logs from this client will be sent with
+                    this bug report.
+                    If you would prefer to only send the text above, please untick:</p>
+                    <input type="checkbox" checked={this.state.sendLogs}
+                        onChange={this._onSendLogsChange} id="mx_BugReportDialog_logs"/>
+                    <label htmlFor="mx_BugReportDialog_logs">Send logs</label>
+                    {error}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button
+                        className="mx_Dialog_primary danger"
+                        onClick={this._onSubmit}
+                        autoFocus={true}
+                    >
+                        {okLabel}
+                    </button>
+
+                    {cancelButton}
+                </div>
+            </div>
+        );
+    }
+}
+
+BugReportDialog.propTypes = {
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/dialogs/ChangelogDialog.js

@@ -31,9 +31,10 @@ export default class ChangelogDialog extends React.Component {
         const version = this.props.newVersion.split('-');
         const version2 = this.props.version.split('-');
         if(version == null || version2 == null) return;
+        // parse versions of form: [vectorversion]-react-[react-sdk-version]-js-[js-sdk-version]
         for(let i=0; i<REPOS.length; i++) {
-            const oldVersion = version2[2*i+1];
-            const newVersion = version[2*i+1];
+            const oldVersion = version2[2*i];
+            const newVersion = version[2*i];
             request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
                 if(body == null) return;
                 this.setState({[REPOS[i]]: JSON.parse(body).commits});

src/components/views/directory/NetworkDropdown.js

@@ -16,6 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+
+const DEFAULT_ICON_URL = "img/network-matrix.svg";
 
 export default class NetworkDropdown extends React.Component {
     constructor(props) {
@@ -35,20 +38,11 @@ export default class NetworkDropdown extends React.Component {
         this.inputTextBox = null;
 
         const server = MatrixClientPeg.getHomeServerName();
-        let defaultNetwork = null;
-        if (
-            this.props.config.serverConfig &&
-            this.props.config.serverConfig[server] &&
-            this.props.config.serverConfig[server].networks &&
-            this.props.config.serverConfig[server].networks.indexOf('_matrix') > -1
-        ) {
-            defaultNetwork = '_matrix';
-        }
-
         this.state = {
             expanded: false,
             selectedServer: server,
-            selectedNetwork: defaultNetwork,
+            selectedInstance: null,
+            includeAllNetworks: false,
         };
     }
 
@@ -58,7 +52,7 @@ export default class NetworkDropdown extends React.Component {
         document.addEventListener('click', this.onDocumentClick, false);
 
         // fire this now so the defaults can be set up
-        this.props.onOptionChange(this.state.selectedServer, this.state.selectedNetwork);
+        this.props.onOptionChange(this.state.selectedServer, this.state.selectedInstance, this.state.includeAllNetworks);
     }
 
     componentWillUnmount() {
@@ -98,13 +92,14 @@ export default class NetworkDropdown extends React.Component {
         ev.preventDefault();
     }
 
-    onMenuOptionClick(server, network, ev) {
+    onMenuOptionClick(server, instance, includeAll) {
         this.setState({
             expanded: false,
             selectedServer: server,
-            selectedNetwork: network,
+            selectedInstanceId: instance ? instance.instance_id : null,
+            includeAll: includeAll,
         });
-        this.props.onOptionChange(server, network);
+        this.props.onOptionChange(server, instance ? instance.instance_id : null, includeAll);
     }
 
     onInputKeyUp(e) {
@@ -144,11 +139,22 @@ export default class NetworkDropdown extends React.Component {
             servers.unshift(MatrixClientPeg.getHomeServerName());
         }
 
+        // For our own HS, we can use the instance_ids given in the third party protocols
+        // response to get the server to filter the room list by network for us.
+        // We can't get thirdparty protocols for remote server yet though, so for those
+        // we can only show the default room list.
         for (const server of servers) {
-            options.push(this._makeMenuOption(server, null));
-            if (this.props.config.serverConfig && this.props.config.serverConfig[server] && this.props.config.serverConfig[server].networks) {
-                for (const network of this.props.config.serverConfig[server].networks) {
-                    options.push(this._makeMenuOption(server, network));
+            options.push(this._makeMenuOption(server, null, true));
+            if (server == MatrixClientPeg.getHomeServerName()) {
+                options.push(this._makeMenuOption(server, null, false));
+                if (this.props.protocols) {
+                    for (const proto of Object.keys(this.props.protocols)) {
+                        if (!this.props.protocols[proto].instances) continue;
+                        for (const instance of this.props.protocols[proto].instances) {
+                            if (!instance.instance_id) continue;
+                            options.push(this._makeMenuOption(server, instance, false));
+                        }
+                    }
                 }
             }
         }
@@ -156,50 +162,36 @@ export default class NetworkDropdown extends React.Component {
         return options;
     }
 
-    _makeMenuOption(server, network, wire_onclick) {
-        if (wire_onclick === undefined) wire_onclick = true;
+    _makeMenuOption(server, instance, includeAll, handleClicks) {
+        if (handleClicks === undefined) handleClicks = true;
+
         let icon;
         let name;
         let span_class;
+        let key;
 
-        if (network === null) {
+        if (!instance && includeAll) {
+            key = server;
             name = server;
             span_class = 'mx_NetworkDropdown_menu_all';
-        } else if (network == '_matrix') {
+        } else if (!instance) {
+            key = server + '_all';
             name = 'Matrix';
-            icon = <img src="img/network-matrix.svg" width="16" height="16" />;
+            icon = <img src="img/network-matrix.svg" />;
             span_class = 'mx_NetworkDropdown_menu_network';
         } else {
-            if (this.props.config.networks[network] === undefined) {
-                throw new Error(network + ' network missing from config');
-            }
-            if (this.props.config.networks[network].name) {
-                name = this.props.config.networks[network].name;
-            } else {
-                name = network;
-            }
-            if (this.props.config.networks[network].icon) {
-                // omit height here so if people define a non-square logo in the config, it
-                // will keep the aspect when it scales
-                icon = <img src={this.props.config.networks[network].icon} width="16" />;
-            } else {
-                icon = <img src={iconPath} width="16" height="16" />;
-            }
-
+            key = server + '_inst_' + instance.instance_id;
+            icon = <img src={instance.icon || DEFAULT_ICON_URL} />;
+            name = instance.desc;
             span_class = 'mx_NetworkDropdown_menu_network';
         }
 
-        const click_handler = wire_onclick ? this.onMenuOptionClick.bind(this, server, network) : null;
-
-        let key = server;
-        if (network !== null) {
-            key += '_' + network;
-        }
+        const click_handler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
 
         return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
             {icon}
-            <span className={span_class}>{name}</span>
-        </div>;
+            <span className="mx_NetworkDropdown_menu_network">{name}</span>
+        </div>
     }
 
     render() {
@@ -216,8 +208,9 @@ export default class NetworkDropdown extends React.Component {
                 placeholder="matrix.org" // 'matrix.org' as an example of an HS name
             />
         } else {
+            const instance = instanceForInstanceId(this.props.protocols, this.state.selectedInstanceId);
             current_value = this._makeMenuOption(
-                this.state.selectedServer, this.state.selectedNetwork, false
+                this.state.selectedServer, instance, this.state.includeAll, false
             );
         }
 
@@ -233,12 +226,12 @@ export default class NetworkDropdown extends React.Component {
 
 NetworkDropdown.propTypes = {
     onOptionChange: React.PropTypes.func.isRequired,
+    protocols: React.PropTypes.object,
+    // The room directory config. May have a 'servers' key that is a list of server names to include in the dropdown
     config: React.PropTypes.object,
 };
 
 NetworkDropdown.defaultProps = {
-    config: {
-        networks: [],
-    }
+    protocols: {},
+    config: {},
 };
-

src/components/views/globals/NewVersionBar.js

@@ -23,11 +23,11 @@ import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
 
 /**
  * Check a version string is compatible with the Changelog
- * dialog
+ * dialog ([vectorversion]-react-[react-sdk-version]-js-[js-sdk-version])
  */
 function checkVersion(ver) {
     const parts = ver.split('-');
-    return parts[0] == 'vector' && parts[2] == 'react' && parts[4] == 'js';
+    return parts.length == 5 && parts[1] == 'react' && parts[3] == 'js';
 }
 
 export default React.createClass({

src/components/views/login/VectorLoginHeader.js

@@ -23,11 +23,14 @@ module.exports = React.createClass({
     statics: {
         replaces: 'LoginHeader',
     },
+    propTypes: {
+        icon: React.PropTypes.string,
+    },
 
     render: function() {
         return (
             <div className="mx_Login_logo">
-                <img src="img/logo.png" width="195" height="195" alt="Riot"/>
+                <img src={this.props.icon || "img/logo.png"} alt="Riot"/>
             </div>
         );
     }

src/skins/vector/css/_common.scss

@@ -29,7 +29,8 @@ body {
        Arial here. */
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 15px;
-    color: #454545;
+    background-color: $primary-bg-color;
+    color: $primary-fg-color;
     border: 0px;
     margin: 0px;
     /* This should render the fonts the same accross browsers */
@@ -41,7 +42,7 @@ div.error {
 }
 
 h2 {
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     font-size: 18px;
     margin-top: 16px;
@@ -51,15 +52,20 @@ h2 {
 a:hover,
 a:link,
 a:visited {
-    color: #76cfa6;
+    color: $accent-color;
+}
+
+input[type=text], input[type=password], textarea {
+    background-color: transparent;
+    color: $primary-fg-color;
 }
 
 input[type=text].error, input[type=password].error {
-    border: 1px solid red;
+    border: 1px solid $warning-color;
 }
 
 input[type=text]:focus, textarea:focus {
-    border: 1px solid #76CFA6;
+    border: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -77,10 +83,7 @@ textarea {
 /* applied to side-panels and messagepanel when in RoomSettings */
 .mx_fadable {
     opacity: 1;
-    -webkit-transition: opacity 0.2s ease-in-out;
-    -moz-transition: opacity 0.2s ease-in-out;
-    -ms-transition: opacity 0.2s ease-in-out;
-    -o-transition: opacity 0.2s ease-in-out;
+    transition: opacity 0.2s ease-in-out;
 }
 
 /* XXX: critical hack to GeminiScrollbar to allow them to work in FF 42 and Chrome 48.
@@ -122,14 +125,8 @@ textarea {
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-justify-content: center;
     justify-content: center;
 }
 
@@ -148,8 +145,8 @@ textarea {
 }
 
 .mx_Dialog {
-    background-color: #fff;
-    color: #747474;
+    background-color: $primary-bg-color;
+    color: $light-fg-color;
     z-index: 4010;
     font-weight: 300;
     font-size: 15px;
@@ -168,13 +165,13 @@ textarea {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: #e9e9e9;
+    background-color: $dialog-background-bg-color;
     opacity: 0.8;
 }
 
 .mx_Dialog_lightbox .mx_Dialog_background {
     opacity: 0.85;
-    background-color: #000;
+    background-color: $lightbox-background-bg-color;
 }
 
 .mx_Dialog_lightbox .mx_Dialog {
@@ -190,7 +187,7 @@ textarea {
 .mx_Dialog_content {
     margin: 24px 58px 68px 0;
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     word-wrap: break-word;
 }
 
@@ -202,7 +199,7 @@ textarea {
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -212,26 +209,26 @@ textarea {
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 
     /* align images in buttons (eg spinners) */
     vertical-align: middle;
 }
 
 .mx_Dialog button.mx_Dialog_primary, .mx_Dialog  input[type="submit"].mx_Dialog_primary {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
 }
 
 .mx_Dialog button.danger, .mx_Dialog input[type="submit"].danger {
-    background-color: #ff0064;
-    border: solid 1px #ff0064;
+    background-color: $warning-color;
+    border: solid 1px $warning-color;
 }
 
 .mx_Dialog button:disabled, .mx_Dialog input[type="submit"]:disabled {
-    background-color: #777777;
-    border: solid 1px #777777;
+    background-color: $light-fg-color;
+    border: solid 1px $light-fg-color;
     opacity: 0.7;
 }
 
@@ -241,11 +238,11 @@ textarea {
     font-weight: bold;
     font-size: 22px;
     line-height: 1.4;
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_Dialog_title.danger {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_TextInputDialog_label {
@@ -256,10 +253,10 @@ textarea {
 .mx_TextInputDialog_input {
     font-size: 15px;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
 }
 
 .mx_emojione {
@@ -268,19 +265,19 @@ textarea {
 }
 
 ::-moz-selection {
-    background-color: #76CFA6;
-    color: white;
+    background-color: $accent-color;
+    color: $selection-fg-color;
 }
 
 ::selection {
-    background-color: #76CFA6;
-    color: white;
+    background-color: $accent-color;
+    color: $selection-fg-color;
 }
 
 /** green button with rounded corners */
 .mx_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;

src/skins/vector/css/_components.scss

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

src/skins/vector/css/matrix-react-sdk/structures/_ContextualMenu.scss

@@ -30,10 +30,10 @@ limitations under the License.
 }
 
 .mx_ContextualMenu {
-    border: solid 1px rgba(187, 187, 187, 0.5);
+    border: solid 1px $menu-border-color;
     border-radius: 4px;
-    background-color: #f6f6f6;
-    color: #4a4a4a;
+    background-color: $menu-bg-color;
+    color: $primary-fg-color;
     position: absolute;
     padding: 6px;
 	font-size: 14px;
@@ -51,7 +51,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-left: 8px solid rgba(187, 187, 187, 0.5);
+    border-left: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -60,7 +60,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-left: 7px solid #f6f6f6;
+    border-left: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -78,7 +78,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
@@ -87,7 +87,7 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #f6f6f6;
+    border-right: 7px solid $menu-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;

src/skins/vector/css/matrix-react-sdk/structures/_CreateRoom.scss

@@ -18,13 +18,13 @@ limitations under the License.
     width: 960px;
     margin-left: auto;
     margin-right: auto;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_CreateRoom input,
 .mx_CreateRoom textarea  {
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;

src/skins/vector/css/matrix-react-sdk/structures/_FilePanel.scss

@@ -15,13 +15,8 @@ limitations under the License.
 */
 
 .mx_FilePanel {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     width: 100%;
@@ -58,12 +53,12 @@ limitations under the License.
 .mx_FilePanel .mx_EventTile .mx_MImageBody_download {
     display: flex;
     font-size: 14px;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_downloadLink {
     flex: 1 1 auto;
-    color: #747474;
+    color: $light-fg-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MImageBody_size {
@@ -90,7 +85,7 @@ limitations under the License.
     padding: 0px;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 .mx_FilePanel .mx_EventTile .mx_MessageTimestamp {
@@ -100,7 +95,7 @@ limitations under the License.
     position: initial;
     font-size: 11px;
     opacity: 1.0;
-    color: #acacac;
+    color: $event-timestamp-color;
 }
 
 /* Overrides for the wrappers around the body tile */
@@ -111,7 +106,7 @@ limitations under the License.
 }
 
 .mx_FilePanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_FilePanel .mx_EventTile_selected .mx_EventTile_line {

src/skins/vector/css/matrix-react-sdk/structures/_MatrixChat.scss

@@ -27,34 +27,21 @@ limitations under the License.
 }
 
 .mx_MatrixChat_wrapper {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 
     width: 100%;
     height: 100%;
 }
 
 .mx_MatrixToolbar {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     height: 40px;
 }
 
 .mx_GuestWarningBar {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
     height: 40px;
@@ -68,52 +55,32 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
-    -webkit-flex: 1;
     flex: 1;
 }
 
 .mx_MatrixChat .mx_LeftPanel {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    background-color: #eaf5f0;
+    background-color: $secondary-accent-color;
 
-    -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_LeftPanel.collapsed {
-    -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }
 
 .mx_MatrixChat .mx_MatrixChat_middlePanel {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     padding-left: 20px;
     padding-right: 22px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 
-    -webkit-flex: 1;
     flex: 1;
 
     /* Experimental fix for https://github.com/vector-im/vector-web/issues/947
@@ -132,25 +99,15 @@ limitations under the License.
      * point, but instead we fudge it and make the middlePanel
      * flex itself.
      */
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 }
 
 .mx_MatrixChat .mx_RightPanel {
-    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 
-    -webkit-flex: 0 0 235px;
     flex: 0 0 235px;
 }
 
 .mx_MatrixChat .mx_RightPanel.collapsed {
-    -webkit-flex: 0 0 122px;
     flex: 0 0 122px;
 }

src/skins/vector/css/matrix-react-sdk/structures/_NotificationPanel.scss

@@ -15,13 +15,8 @@ limitations under the License.
 */
 
 .mx_NotificationPanel {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     width: 100%;
@@ -51,7 +46,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile_roomName a {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_avatar {
@@ -61,8 +56,7 @@ limitations under the License.
 
 .mx_NotificationPanel .mx_EventTile .mx_SenderProfile, 
 .mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
-    color: #000;
-    opacity: 0.3;
+    color: $primary-fg-color;
     font-size: 12px;
     display: inline;
     padding-left: 0px;
@@ -94,7 +88,7 @@ limitations under the License.
 }
 
 .mx_NotificationPanel .mx_EventTile:hover .mx_EventTile_line {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_NotificationPanel .mx_EventTile_selected .mx_EventTile_line {

src/skins/vector/css/matrix-react-sdk/structures/_RoomStatusBar.scss

@@ -21,10 +21,10 @@ limitations under the License.
 
 /* position the indicator in the same place horizontally as .mx_EventTile_avatar. */
 .mx_RoomStatusBar_indicator {
-    padding-left: 18px;
+    padding-left: 17px;
     padding-right: 12px;
     margin-left: -73px;
-    margin-top: 13px;
+    margin-top: 8px;
     float: left;
     width: 24px;
     text-align: center;
@@ -36,16 +36,16 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_placeholderIndicator span {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     position: relative;
     top: -4px;
-/*    
+/*
     animation-duration: 1s;
     animation-name: bounce;
     animation-direction: alternate;
     animation-iteration-count: infinite;
-*/    
+*/
 }
 
 .mx_RoomStatusBar_placeholderIndicator span:nth-child(1) {
@@ -70,13 +70,43 @@ limitations under the License.
     }
 }
 
+.mx_RoomStatusBar_typingIndicatorAvatars {
+    width: 52px;
+    text-align: left;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_image {
+    margin-right: -12px;
+    border: 1px solid $primary-bg-color;
+}
+
+.mx_RoomStatusBar_typingIndicatorAvatars .mx_BaseAvatar_initial {
+    padding-left: 1px;
+    padding-top: 1px;
+}
+
+.mx_RoomStatusBar_typingIndicatorRemaining {
+    display: inline-block;
+    color: #acacac;
+    background-color: #ddd;
+    border: 1px solid $primary-bg-color;
+    border-radius: 40px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    font-size: 0.8em;
+    vertical-align: top;
+    text-align: center;
+    position: absolute;
+}
+
 .mx_RoomStatusBar_scrollDownIndicator {
     cursor: pointer;
 }
 
 .mx_RoomStatusBar_unreadMessagesBar {
     padding-top: 10px;
-    color: #ff0064;
+    color: $warning-color;
     cursor: pointer;
 }
 
@@ -93,29 +123,29 @@ limitations under the License.
 }
 
 .mx_RoomStatusBar_connectionLostBar_title {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomStatusBar_connectionLostBar_desc {
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 13px;
     opacity: 0.5;
 }
 
 .mx_RoomStatusBar_resend_link {
-    color: #454545 ! important;
+    color: $primary-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }
 
 .mx_RoomStatusBar_tabCompleteBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_RoomStatusBar_typingBar {
     padding-top: 10px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     opacity: 0.5;
     overflow-y: hidden;
     display: block;
@@ -123,19 +153,16 @@ limitations under the License.
 
 .mx_RoomStatusBar_tabCompleteWrapper {
     display: flex;
-    display: -webkit-flex;
     height: 26px;
 }
 
 .mx_RoomStatusBar_tabCompleteWrapper .mx_TabCompleteBar {
     flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
 }
 
 .mx_RoomStatusBar_tabCompleteEol {
     flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;
-    color: #76CFA6;
+    color: $accent-color;
 }
 
 .mx_RoomStatusBar_tabCompleteEol object {

src/skins/vector/css/matrix-react-sdk/structures/_RoomView.scss

@@ -18,25 +18,15 @@ limitations under the License.
     word-wrap: break-word;
     position: relative;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     width: 100%;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RoomView .mx_RoomHeader {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
@@ -53,14 +43,10 @@ limitations under the License.
     padding-right: 12px;
     margin-left: -12px;
 
-    -webkit-border-top-left-radius: 10px;
-    -webkit-border-top-right-radius: 10px;
-    -moz-border-radius-topleft: 10px;
-    -moz-border-radius-topright: 10px;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 
-    background-color: rgba(255, 255, 255, 0.9);
+    background-color: $droptarget-bg-color;
     border: 2px #e1dddd solid;
     border-bottom: none;
     position: absolute;
@@ -77,10 +63,6 @@ limitations under the License.
 }
 
 .mx_RoomView_auxPanel {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -89,28 +71,18 @@ limitations under the License.
     margin: auto;
 
     overflow: auto;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }
 
 .mx_RoomView_topUnreadMessagesBar {
-    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 }
 
 .mx_RoomView_messagePanel {
-    -webkit-box-ordinal-group: 4;
-    -moz-box-ordinal-group: 4;
-    -ms-flex-order: 4;
-    -webkit-order: 4;
     order: 4;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     width: 100%;
@@ -124,22 +96,15 @@ limitations under the License.
 
     min-height: 100%;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 
     justify-content: flex-end;
-    -webkit-justify-content: flex-end;
 }
 
 .mx_RoomView_searchResultsPanel .mx_RoomView_messageListWrapper {
     justify-content: flex-start;
-    -webkit-justify-content: flex-start;
 }
 
 .mx_RoomView_MessageList {
@@ -158,14 +123,10 @@ limitations under the License.
     margin-bottom: 8px;
     margin-left: 63px;
     padding-bottom: 6px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_RoomView_invitePrompt {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
     min-width: 0px;
@@ -185,23 +146,32 @@ li.mx_RoomView_myReadMarker_container {
 }
 
 hr.mx_RoomView_myReadMarker {
-    border-top: solid 1px #76cfa6;
-    border-bottom: solid 1px #76cfa6;
+    border-top: solid 1px $accent-color;
+    border-bottom: solid 1px $accent-color;
     margin-top: 0px;
     position: relative;
     top: 5px;
 }
 
 .mx_RoomView_statusArea {
-    -webkit-box-ordinal-group: 5;
-    -moz-box-ordinal-group: 5;
-    -ms-flex-order: 5;
-    -webkit-order: 5;
     order: 5;
 
     width: 100%;
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
+
+    max-height: 0px;
+    background-color: $primary-bg-color;
+    z-index: 1000;
+    overflow: hidden;
+
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+    -ms-transition: all .2s ease-out;
+    -o-transition: all .2s ease-out;
+}
+
+.mx_RoomView_statusArea_expanded {
+    max-height: 100px;
 }
 
 .mx_RoomView_statusAreaBox {
@@ -212,16 +182,16 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_statusAreaBox_line {
     margin-left: 65px;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     height: 1px;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadProgressInner {
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_RoomView_callStatusBar .mx_UploadBar_uploadFilename {
-    color: #fff;
+    color: $accent-fg-color;
     opacity: 1.0;
 }
 
@@ -234,8 +204,8 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView_inCall .mx_RoomView_statusAreaBox {
-    background-color: #76CFA6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     position: relative;
 }
 
@@ -257,14 +227,9 @@ hr.mx_RoomView_myReadMarker {
 }
 
 .mx_RoomView .mx_MessageComposer {
-    -webkit-box-ordinal-group: 6;
-    -moz-box-ordinal-group: 6;
-    -ms-flex-order: 6;
-    -webkit-order: 6;
     order: 6;
 
     width: 100%;
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
     margin-right: 2px;
 }
@@ -272,13 +237,13 @@ hr.mx_RoomView_myReadMarker {
 .mx_RoomView_ongoingConfCallNotification {
     width: 100%;
     text-align: center;
-    background-color: #ff0064;
-    color: #fff;
+    background-color: $warning-color;
+    color: $accent-fg-color;
     font-weight: bold;
     padding: 6px 0;
     cursor: pointer;
 }
 
 .mx_RoomView_ongoingConfCallNotification a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
 }

src/skins/vector/css/matrix-react-sdk/structures/_SearchBox.scss

@@ -22,7 +22,6 @@ limitations under the License.
     padding-bottom: 22px;
 
     display: flex;
-    display: -webkit-flex;
 }
 
 .mx_SearchBox_searchButton {
@@ -38,7 +37,6 @@ limitations under the License.
 
 .mx_SearchBox_search {
     flex: 1 1 auto;
-    -webkit-flex: 1 1 auto;
     width: 0px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 12px;
@@ -46,7 +44,6 @@ limitations under the License.
     height: 24px;
     border: 0px ! important;
     /* border-bottom: 1px solid rgba(0, 0, 0, 0.1) ! important; */
-    background-color: transparent;
     border: 0px;
 }
 

src/skins/vector/css/matrix-react-sdk/structures/_UploadBar.scss

@@ -26,7 +26,7 @@ limitations under the License.
 }
 
 .mx_UploadBar_uploadProgressInner {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     height: 5px;
 }
 
@@ -34,7 +34,7 @@ limitations under the License.
     margin-top: 5px;
     margin-left: 65px;
     opacity: 0.5;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_UploadBar_uploadIcon {
@@ -57,5 +57,5 @@ limitations under the License.
     float: right;
     margin-top: 5px;
     margin-right: 30px;
-    color: #76cfa6;
+    color: $accent-color;
 }

src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss

@@ -20,34 +20,19 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_UserSettings .mx_RoomHeader {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
 .mx_UserSettings_body {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     margin-top: -20px;
@@ -58,7 +43,7 @@ limitations under the License.
     clear: both;
     margin-left: 63px;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 26px;
@@ -84,8 +69,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 16px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 7px;
@@ -95,7 +80,7 @@ limitations under the License.
 }
 
 .mx_UserSettings_button.danger {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_UserSettings_section {
@@ -166,15 +151,15 @@ limitations under the License.
 {
     display: inline-block;
     border: 0px;
-    border-bottom: 1px solid rgba(151, 151, 151, 0.5);
+    border-bottom: 1px solid $input-underline-color;
     padding: 0px;
     width: 240px;
-    color: rgba(74, 74, 74, 0.9);
+    color: $input-fg-color;
     font-family: 'Open Sans', Helvetica, Arial, Sans-Serif;
     font-size: 16px;
 }
 
-.mx_UserSettings_addThreepid {
+.mx_UserSettings_threepidButton {
     display: table-cell;
     padding-left: 0.5em;
     position: relative;

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

@@ -18,21 +18,15 @@ limitations under the License.
     width: 100%;
     height: 100%;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-justify-content: center;
     justify-content: center;
 
     overflow: auto;
 }
 
 .mx_Login h2 {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     font-weight: 300;
     margin-top: 32px;
     margin-bottom: 20px;
@@ -48,12 +42,24 @@ limitations under the License.
 
 .mx_Login_logo {
     text-align: center;
+    height: 195px;
+}
+
+.mx_Login_logo img {
+    height: 100%
+}
+
+.mx_Login_support {
+    text-align: center;
+    font-size: 13px;
+    margin-top: 0px;
+    opacity: 0.7;
 }
 
 .mx_Login_field {
-    width: 100%;
+    width: 280px;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     padding: 9px;
@@ -75,9 +81,9 @@ limitations under the License.
     border-radius: 40px;
     height: 40px;
     border: 0px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     font-size: 15px;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_Login_label {
@@ -99,7 +105,7 @@ limitations under the License.
 }
 
 .mx_Login_create:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_links {
@@ -112,7 +118,7 @@ limitations under the License.
 }
 
 .mx_Login_links a:link {
-   color: #4a4a4a;
+   color: $primary-fg-color;
 }
 
 .mx_Login_prompt {
@@ -127,7 +133,7 @@ limitations under the License.
 }
 
 .mx_Login_forgot:link {
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Login_loader {
@@ -147,7 +153,7 @@ limitations under the License.
 }
 
 .mx_Login_error {
-    color: #ff2020;
+    color: $warning-color;
     font-weight: bold;
     text-align: center;
 /*

src/skins/vector/css/matrix-react-sdk/views/avatars/_BaseAvatar.scss

@@ -21,7 +21,7 @@ limitations under the License.
 .mx_BaseAvatar_initial {
     position: absolute;
     z-index: 1;
-    color: #fff;
+    color: $avatar-initial-color;
     text-align: center;
     speak: none;
     pointer-events: none;
@@ -31,4 +31,5 @@ limitations under the License.
 .mx_BaseAvatar_image {
     border-radius: 40px;
     vertical-align: top;
+    background-color: #fff;
 }

src/skins/vector/css/matrix-react-sdk/views/dialogs/_BugReportDialog.scss

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

src/skins/vector/css/matrix-react-sdk/views/dialogs/_ChatInviteDialog.scss

@@ -36,7 +36,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_inputContainer {
     border-radius: 3px;
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 36px;
     padding-left: 4px;
     padding-right: 4px;
@@ -49,7 +49,7 @@ limitations under the License.
 
 .mx_ChatInviteDialog_error {
     position: absolute;
-    color: #ff0064;
+    color: $warning-color;
     line-height: 36px;
 }
 
@@ -63,3 +63,9 @@ limitations under the License.
 .mx_ChatInviteDialog_cancel object {
     pointer-events: none;
 }
+
+.mx_ChatInviteDialog_addressSelectHeader {
+    font-weight: bold;
+    line-height: 150%;
+    text-indent: 4px;
+}

src/skins/vector/css/matrix-react-sdk/views/dialogs/_EncryptedEventDialog.scss

@@ -24,7 +24,7 @@ limitations under the License.
     border: 0px;
     height: 36px;
     border-radius: 40px;
-    border: solid 1px #76cfa6;
+    border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
@@ -34,6 +34,6 @@ limitations under the License.
     padding-right: 1.5em;
     outline: none;
     cursor: pointer;
-    color: #76cfa6;
-    background-color: #fff;
+    color: $accent-color;
+    background-color: $primary-bg-color;
 }

src/skins/vector/css/matrix-react-sdk/views/dialogs/_SetDisplayNameDialog.scss

@@ -16,9 +16,9 @@ limitations under the License.
 
 .mx_SetDisplayNameDialog_input {
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 15px;
 }

src/skins/vector/css/matrix-react-sdk/views/dialogs/_UnknownDeviceDialog.scss

@@ -0,0 +1,46 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_UnknownDeviceDialog .mx_MemberDeviceInfo {
+    float: right;
+    clear: both;
+    padding: 0px;
+    padding-top: 8px;
+}
+
+.mx_UnknownDeviceDialog .mx_MemberDeviceInfo_textButton {
+    border: 0px;
+    height: 24px;
+    border-radius: 40px;
+    border: solid 1px $accent-color;
+    font-weight: 600;
+    font-size: 13px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+    margin-left: 0px;
+    margin-right: 8px;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    width: 70px;
+    outline: none;
+    cursor: pointer;
+    color: $accent-color;
+    background-color: $primary-bg-color;
+}
+
+.mx_UnknownDeviceDialog .mx_UnknownDeviceDialog_deviceList li {
+    height: 40px;
+    border-bottom: 1px solid $primary-hairline-color;
+}

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

@@ -16,13 +16,13 @@ limitations under the License.
 
 .mx_AddressSelector {
     position: absolute;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     width: 485px;
     max-height: 116px;
     overflow-y: auto;
 	border-radius: 3px;
-	background-color: #fff;
-	border: solid 1px #76cfa6;
+	background-color: $primary-bg-color;
+	border: solid 1px $accent-color;
     cursor: pointer;
 }
 
@@ -31,15 +31,15 @@ limitations under the License.
 }
 
 .mx_AddressSelector_addressListElement .mx_AddressTile {
-    background-color: #fff;
-    border: solid 1px #fff;
+    background-color: $primary-bg-color;
+    border: solid 1px $primary-bg-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected {
-     background-color: #eaf5f0; /* selected colour */
+    background-color: $selected-color;
 }
 
 .mx_AddressSelector_addressListElement.mx_AddressSelector_selected .mx_AddressTile {
-    background-color: #eaf5f0; /* selected colour */
-    border: solid 1px #eaf5f0; /* selected colour */
+    background-color: $selected-color;
+    border: solid 1px $selected-color;
 }

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

@@ -18,9 +18,9 @@ limitations under the License.
     display: inline-block;
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
-    border: solid 1px #f0f0f0;
+    border: solid 1px $input-border-color;
     line-height: 26px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 14px;
     font-weight: normal;
     margin-right: 4px;
@@ -28,8 +28,8 @@ limitations under the License.
 
 .mx_AddressTile.mx_AddressTile_error {
     background-color: rgba(255, 0, 100, 0.1);
-    color: #ff0064;
-    border-color: #ff0064;
+    color: $warning-color;
+    border-color: $warning-color;
 }
 
 .mx_AddressTile_network {
@@ -106,7 +106,7 @@ limitations under the License.
 }
 
 .mx_AddressTile_email.mx_AddressTile_justified {
-    width: 380px; /* name + id width */
+    width: 200px; /* same as id width */
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;

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

@@ -17,19 +17,17 @@ limitations under the License.
 .mx_DirectorySearchBox {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
 }
 
 .mx_DirectorySearchBox_container {
     display: flex;
-    display: -webkit-flex;
     padding-left: 9px;
     padding-right: 9px;
 }
 
 .mx_DirectorySearchBox_input {
     flex-grow: 1;
-    -webkit-flex-grow: 1;
     border: 0;
     padding: 0;
     font-weight: 300;
@@ -44,9 +42,9 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     padding: 3px;
     padding-left: 10px;
     padding-right: 10px;
-    background-color: #efefef;
+    background-color: $plinth-bg-color;
     border-radius: 3px;
-    background-image: url('img/icon-return.svg');
+    background-image: url('../../img/icon-return.svg');
     background-position: 8px 70%;
     background-repeat: no-repeat;
     text-indent: 18px;
@@ -63,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('../../img/icon_context_delete.svg');
     background-position: 0 50%;
     background-repeat: no-repeat;
     width: 15px;

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

@@ -31,6 +31,6 @@ limitations under the License.
 }
 
 .mx_MemberEventListSummary_toggle {
-    color:#76cfa6;
+    color:$accent-color;
     cursor:pointer;
 }

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

@@ -16,10 +16,10 @@ limitations under the License.
 
 .mx_ProgressBar {
     height: 5px;
-    border: 1px solid black;
+    border: 1px solid $progressbar-color;
 }
 
 .mx_ProgressBar_fill {
     height: 100%;
-    background-color: #000;
+    background-color: $progressbar-color;
 }

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

@@ -1,14 +1,14 @@
 .mx_UserPill {
     color: white;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }
 
 .mx_RoomPill {
     background-color: white;
-    color: #76cfa6;
-    border: 1px solid #76cfa6;
+    color: $accent-color;
+    border: 1px solid $accent-color;
     padding: 2px 8px;
     border-radius: 16px;
 }

src/skins/vector/css/matrix-react-sdk/views/login/_ServerConfig.scss

@@ -27,5 +27,5 @@ limitations under the License.
     opacity: 0.8;
     font-size: 13px;
     font-weight: 300;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }

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

@@ -22,18 +22,18 @@ limitations under the License.
 .mx_MImageBody_thumbnail {
     max-width: 100%;
 /*
-    background-color: #fff;
-    border: 2px solid #fff;
+    background-color: $primary-bg-color;
+    border: 2px solid $primary-bg-color;
     border-radius: 1px;
 */
 }
 
 .mx_MImageBody_download {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MImageBody_download a {
-    color: #76cfa6;
+    color: $accent-color;
     text-decoration: none;
 }
 
@@ -44,3 +44,17 @@ limitations under the License.
     vertical-align: middle;
     pointer-events: none;
 }
+
+/* Remove the border and padding for iframes for download links. */
+.mx_MImageBody_download iframe {
+    margin: 0px;
+    padding: 0px;
+    border: none;
+    width: 100%;
+    /* Set the height of the iframe to be 1 line of text.
+     * Iframes don't automatically size themselves to fit their content.
+     * So either we have to fix the height of the iframe using CSS or
+     * use javascript's cross-origin postMessage API to communicate how
+     * big the content of the iframe is. */
+    height: 1.5em;
+}

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

@@ -3,8 +3,8 @@
     bottom: 0;
     z-index: 1000;
     width: 100%;
-    border: 1px solid #e5e5e5;
-    background: white;
+    border: 1px solid $primary-hairline-color;
+    background: $primary-bg-color;
     border-bottom: none;
     border-radius: 4px 4px 0 0;
     max-height: 50vh;
@@ -12,7 +12,7 @@
 }
 
 .mx_Autocomplete_ProviderSection {
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_Autocomplete_Completion_container_pill {
@@ -28,7 +28,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_block * {
@@ -42,7 +42,7 @@
     user-select: none;
     cursor: pointer;
     align-items: center;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 }
 
 .mx_Autocomplete_Completion_pill * {
@@ -57,13 +57,13 @@
 }
 
 .mx_Autocomplete_Completion.selected {
-    background: #f6f6f6;
+    background: $menu-bg-color;
     outline: none;
 }
 
 .mx_Autocomplete_provider_name {
     margin: 12px;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: 400;
     opacity: 0.4;
 }

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

@@ -17,7 +17,7 @@ limitations under the License.
 .mx_EntityTile {
     display: table-row;
     position: relative;
-    color: #454545;
+    color: $primary-fg-color;
     cursor: pointer;
 }
 
@@ -77,12 +77,12 @@ limitations under the License.
 
 .mx_EntityTile_ellipsis .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_invitePlaceholder .mx_EntityTile_name {
     font-style: italic;
-    font-color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_EntityTile_unavailable .mx_EntityTile_avatar,

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

@@ -44,7 +44,7 @@ limitations under the License.
 }
 
 .mx_EventTile .mx_SenderProfile {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
     display: block; /* anti-zalgo, with overflow hidden */
@@ -61,7 +61,7 @@ limitations under the License.
     display: block;
     visibility: hidden;
     white-space: nowrap;
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     left: 8px;
     position: absolute;
@@ -93,20 +93,20 @@ limitations under the License.
  * TODO: ultimately we probably want some transition on here.
  */
 .mx_EventTile_selected .mx_EventTile_line {
-    border-left: #76cfa6 5px solid;
+    border-left: $accent-color 5px solid;
     padding-left: 60px;
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile:hover .mx_EventTile_line,
 .mx_EventTile.menu .mx_EventTile_line
 {
-    background-color: #f7f7f7;
+    background-color: $event-selected-color;
 }
 
 .mx_EventTile_searchHighlight {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     border-radius: 5px;
     padding-left: 2px;
     padding-right: 2px;
@@ -114,26 +114,26 @@ limitations under the License.
 }
 
 .mx_EventTile_searchHighlight a {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_EventTile_encrypting {
-    color: #abddbc ! important;
+    color: $event-encrypting-color ! important;
 }
 
 .mx_EventTile_sending {
-    color: #ddd;
+    color: $event-sending-color;
 }
 
 .mx_EventTile_notSent {
-    color: #f44;
+    color: $event-notsent-color;
 }
 
 .mx_EventTile_highlight,
 .mx_EventTile_highlight .markdown-body
  {
-    color: #FF0064;
+    color: $warning-color;
 }
 
 .mx_EventTile_contextual {
@@ -146,7 +146,12 @@ limitations under the License.
     z-index: 1;
     position: relative;
     width: 90px;
-    height: 1px; /* Hack to stop the height of this pushing the messages apart. Replaces marigin-top: -6px. This interacts better with a read marker being in between. Content overflows. */
+
+    /* Hack to stop the height of this pushing the messages apart.
+       Replaces margin-top: -6px. This interacts better with a read
+       marker being in between. Content overflows. */
+    height: 1px;
+
     margin-right: 10px;
 }
 
@@ -172,6 +177,9 @@ limitations under the License.
     cursor: pointer;
     top: 6px;
     right: 6px;
+    width: 19px;
+    height: 19px;
+    background-image: url($edit-button-url);
 }
 
 .mx_EventTile:hover .mx_EventTile_editButton,
@@ -204,7 +212,7 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatarRemainder {
-    color: #acacac;
+    color: $event-timestamp-color;
     font-size: 11px;
     position: absolute;
 }
@@ -244,10 +252,10 @@ limitations under the License.
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_EventTile_line {
-    border-left: #76cfa5 5px solid;
+    border-left: $e2e-verified-color 5px solid;
 }
 .mx_EventTile:hover.mx_EventTile_unverified .mx_EventTile_line {
-    border-left: #e8bf37 5px solid;
+    border-left: $e2e-unverified-color 5px solid;
 }
 
 .mx_EventTile:hover.mx_EventTile_verified .mx_MessageTimestamp,
@@ -286,6 +294,10 @@ limitations under the License.
     overflow-y: visible;
 }
 
+.mx_EventTile_content .markdown-body code {
+    background-color: #f8f8f8;
+}
+
 .mx_EventTile_content .markdown-body h1,
 .mx_EventTile_content .markdown-body h2,
 .mx_EventTile_content .markdown-body h3,
@@ -297,7 +309,7 @@ limitations under the License.
 }
 
 .mx_EventTile_content .markdown-body a {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_EventTile_content .markdown-body .hljs {

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

@@ -18,14 +18,12 @@ limitations under the License.
     margin-top: 15px;
     margin-right: 15px;
     margin-bottom: 15px;
-    display: -webkit-flex;
     display: flex;
-    border-left: 4px solid #ddd;
-    color: #888;
+    border-left: 4px solid $preview-widget-bar-color;
+    color: $preview-widget-fg-color;
 }
 
 .mx_LinkPreviewWidget_image {
-    -webkit-flex: 0 0 100px;
     flex: 0 0 100px;
     margin-left: 15px;
     text-align: center;
@@ -34,7 +32,6 @@ limitations under the License.
 
 .mx_LinkPreviewWidget_caption {
     margin-left: 15px;
-    -webkit-flex: 1 1 auto;
     flex: 1 1 auto;
 }
 
@@ -56,7 +53,6 @@ limitations under the License.
 .mx_LinkPreviewWidget_cancel {
     visibility: hidden;
     cursor: pointer;
-    -webkit-flex: 0 0 40px;
     flex: 0 0 40px;
 }
 

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

@@ -20,8 +20,8 @@ limitations under the License.
 
 
 .mx_MemberDeviceInfo_textButton {
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     border-radius: 17px;
     text-align: center;
     padding-left: 1em;
@@ -44,26 +44,35 @@ limitations under the License.
     border-bottom: 1px solid rgba(0,0,0,0.1);
 }
 
-.mx_MemberDeviceInfo_block,
-.mx_MemberDeviceInfo_unblock {
+.mx_MemberDeviceInfo_blacklist,
+.mx_MemberDeviceInfo_unblacklist {
     float: right;
 }
 
+/* "Unblacklist" is too long for a regular button: make it wider and
+   reduce the padding. */
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_blacklist,
+.mx_EncryptedEventDialog .mx_MemberDeviceInfo_unblacklist {
+    width: 8em;
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified,
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified,
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
     float: right;
     padding-left: 1em;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_verified {
-    color: #76cfa5;
+    color: $e2e-verified-color;
 }
 
 .mx_MemberDeviceInfo div.mx_MemberDeviceInfo_unverified {
-    color: #e8bf37;
+    color: $e2e-unverified-color;
 }
 
-.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blocked {
-    color: #ba6363;
+.mx_MemberDeviceInfo div.mx_MemberDeviceInfo_blacklisted {
+    color: $e2e-warning-color;
 }

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

@@ -61,7 +61,7 @@ limitations under the License.
 
 .mx_MemberInfo h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 16px;
@@ -69,10 +69,9 @@ limitations under the License.
 }
 
 .mx_MemberInfo_profileField {
-    font-color: #999999;
     font-size: 13px;
     position: relative;
-    background-color: #fff;
+    background-color: $primary-bg-color;
 }
 
 .mx_MemberInfo_buttons {
@@ -82,7 +81,7 @@ limitations under the License.
 .mx_MemberInfo_field {
     cursor: pointer;
     font-size: 13px;
-    color: #76cfa6;
+    color: $accent-color;
     margin-left: 8px;
     line-height: 23px;
 }

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

@@ -20,22 +20,15 @@ limitations under the License.
     margin-top: 12px;
     margin-right: 20px;
 
-    -webkit-flex: 1;
     flex: 1;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_MemberList .mx_Spinner {
     flex: 0;
-    -webkit-flex: 0;
 }
 
 .mx_MemberList_chevron {
@@ -48,17 +41,16 @@ limitations under the License.
     overflow-y: auto;
 
     order: 1;
-    -webkit-flex: 1 1 0;
     flex: 1 1 0px;
 }
 
 .mx_MemberList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 14px;
     margin-bottom: 8px;
@@ -66,13 +58,13 @@ limitations under the License.
 }
 
 .mx_MemberList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
 
 .mx_MemberList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 14px;
 }
@@ -80,7 +72,6 @@ limitations under the License.
 .mx_MemberList_joined {
     order: 2;
     flex: 1 0 0;
-    -webkit-flex: 1 0 0;
 
     overflow-y: auto;
 }
@@ -89,14 +80,13 @@ limitations under the License.
 .mx_MemberList_invited {
     order: 3;
     flex: 0 0 100px;
-    -webkit-flex: 0 0 100px;
     overflow-y: auto;
 }
 */
 
 .mx_MemberList_invited h2 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     padding-left: 3px;

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

@@ -18,7 +18,7 @@ limitations under the License.
     max-width: 960px;
     vertical-align: middle;
     margin: auto;
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     position: relative;
 }
 
@@ -57,7 +57,7 @@ limitations under the License.
     height: 60px;
     text-align: center;
     font-style: italic;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -90,10 +90,10 @@ limitations under the License.
 }
 
 .mx_MessageComposer_input blockquote {
-    color: rgb(119, 119, 119);
+    color: $blockquote-fg-color;
     margin: 0 0 16px;
     padding: 0 15px;
-    border-left: 4px solid rgb(221, 221, 221);
+    border-left: 4px solid $blockquote-bar-color;
 }
 
 .mx_MessageComposer_input textarea {
@@ -105,11 +105,9 @@ limitations under the License.
     border: 0px;
     resize: none;
     outline: none;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
     box-shadow: none;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     font-size: 14px;
     max-height: 120px;
     overflow: auto;
@@ -120,11 +118,11 @@ limitations under the License.
 /* hack for FF as vertical alignment of custom placeholder text is broken */
 .mx_MessageComposer_input textarea::-moz-placeholder {
     line-height: 100%;
-    color: #76cfa6;
+    color: $accent-color;
     opacity: 1.0;
 }
 .mx_MessageComposer_input textarea::-webkit-input-placeholder {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_MessageComposer_upload,
@@ -153,7 +151,7 @@ limitations under the License.
 
 .mx_MessageComposer_formatbar_wrapper {
     width: 100%;
-    background-color: #f7f7f7;
+    background-color: $menu-bg-color;
     box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.08);
 }
 
@@ -170,7 +168,7 @@ limitations under the License.
     flex-direction: row;
     align-items: center;
     font-size: 10px;
-    color: #888;
+    color: $greyed-fg-color;
 }
 
 .mx_MessageComposer_formatbar * {

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

@@ -16,7 +16,6 @@ limitations under the License.
 
 /* add 20px to the height of the header when editing */
 .mx_RoomHeader_editing {
-    -webit-flex: 0 0 93px ! important;
     flex: 0 0 93px ! important;
 }
 
@@ -24,63 +23,36 @@ limitations under the License.
     max-width: 960px;
     margin: auto;
     height: 70px;
-
-    -webkit-align-items: center;
     align-items: center;
-
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 }
 
 .mx_RoomHeader_leftRow {
     margin-left: -2px;
-
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
-
-    -webkit-flex: 1;
     flex: 1;
 }
 
 .mx_RoomHeader_spinner {
     height: 36px;
-
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
-
     padding-left: 12px;
     padding-right: 12px;
 }
 
 .mx_RoomHeader_textButton {
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     margin-top: -2px;
     text-align: center;
-
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
-
     cursor: pointer;
 
 /*
-    -webkit-flex: 0 0 90px;
     flex: 0 0 90px;
 */
     padding-left: 12px;
@@ -88,27 +60,17 @@ limitations under the License.
 }
 
 .mx_RoomHeader_cancelButton {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
-
     cursor: pointer;
-
     padding-left: 12px;
     padding-right: 12px;
 }
 
 .mx_RoomHeader_rightRow {
     margin-top: 4px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     display: flex;
     align-items: center;
-    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 }
 
@@ -120,7 +82,7 @@ limitations under the License.
 
 .mx_RoomHeader_simpleHeader {
     line-height: 70px;
-    color: #454545;
+    color: $primary-fg-color;
     font-size: 22px;
     font-weight: bold;
     overflow: hidden;
@@ -138,7 +100,7 @@ limitations under the License.
     width: 100%;
     height: 31px;
     overflow: hidden;
-    color: #454545;
+    color: $primary-fg-color;
     font-weight: bold;
     font-size: 22px;
     padding-left: 19px;
@@ -153,7 +115,7 @@ limitations under the License.
 }
 
 .mx_RoomHeader_settingsHint {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_searchStatus {
@@ -174,21 +136,21 @@ limitations under the License.
 }
 
 .mx_RoomHeader_name:hover div:not(.mx_RoomHeader_editable) {
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_RoomHeader_placeholder {
-    color: #a2a2a2 ! important;
+    color: $settings-grey-fg-color ! important;
 }
 
 .mx_RoomHeader_editable {
-    border-bottom: 1px solid #c7c7c7 ! important;
+    border-bottom: 1px solid $strong-input-border-color ! important;
     min-width: 150px;
     cursor: text;
 }
 
 .mx_RoomHeader_editable:focus {
-    border-bottom: 1px solid #76CFA6 ! important;
+    border-bottom: 1px solid $accent-color ! important;
     outline: none;
     box-shadow: none;
 }
@@ -197,7 +159,7 @@ limitations under the License.
     vertical-align: bottom;
     float: left;
     max-height: 42px;
-    color: #A2A2A2;
+    color: $settings-grey-fg-color;
     font-weight: 300;
     font-size: 13px;
     margin-left: 19px;

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

@@ -18,38 +18,30 @@ limitations under the License.
     text-align: center;
     height: 176px;
 
-    background-color: #f7f7f7;
-
-    -webkit-align-items: center;
     align-items: center;
-
     flex-direction: column;
-    -webkit-flex-direction: column;
-
     justify-content: center;
-    -webkit-justify-content: center;
-
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
+
+    /* For welcome pages */
+    background-color: #f7f7f7;
+    -webkit-align-items: center;
 }
 
 .mx_RoomPreviewBar_wrapper {
 }
 
 .mx_RoomPreviewBar_invite_text {
-    color: #454545;
+    color: $primary-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text {
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomPreviewBar_preview_text {
     margin-top: 25px;
-    color: #a4a4a4;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomPreviewBar_join_text a {
@@ -58,9 +50,7 @@ limitations under the License.
 }
 
 .mx_RoomPreviewBar_warning {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
     padding: 8px;
 }

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

@@ -24,10 +24,10 @@ limitations under the License.
 .mx_RoomSettings_integrationsButton_error {
     position: relative;
     height: 36px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border-radius: 36px;
     margin-right: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     line-height: 34px;
     text-align: center;
     float: right;
@@ -47,8 +47,8 @@ limitations under the License.
     font-size: 10pt;
     line-height: 1.5em;
     border-radius: 5px;
-    background-color: #000;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 }
 
 .mx_RoomSettings_e2eIcon {
@@ -81,7 +81,7 @@ limitations under the License.
 
 .mx_RoomSettings h3 {
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $h3-color;
     font-weight: 600;
     font-size: 13px;
     margin-top: 36px;
@@ -174,7 +174,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_warning {
-    color: #ff0064;
+    color: $warning-color;
     font-weight: bold;
     margin-top: 8px;
     margin-bottom: 8px;
@@ -182,13 +182,13 @@ limitations under the License.
 
 .mx_RoomSettings_editable {
     border: 0px;
-    border-bottom: 1px solid #c7c7c7;
+    border-bottom: 1px solid $strong-input-border-color;
     padding: 0px;
     min-width: 240px;
 }
 
 .mx_RoomSettings_editable:focus {
-    border-bottom: 1px solid #76CFA6;
+    border-bottom: 1px solid $accent-color;
     outline: none;
     box-shadow: none;
 }
@@ -205,7 +205,7 @@ limitations under the License.
 }
 
 .mx_RoomSettings_aliasPlaceholder {
-    color: #a2a2a2;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomSettings_buttons {
@@ -220,8 +220,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     padding: 6px;

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

@@ -65,7 +65,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background-image: url("img/icons_ellipsis.svg");
+    background-image: url("../../img/icons_ellipsis.svg");
     background-size: 25px;
     width: 24px;
     height: 24px;
@@ -78,7 +78,7 @@ limitations under the License.
     position: absolute;
     content: "";
     border-radius: 40px;
-    background: #4A4A4A;
+    background: $primary-fg-color;
     bottom: 0;
     width: 24px;
     height: 24px;
@@ -103,7 +103,7 @@ limitations under the License.
     padding-right: 6px;
     padding-top: 2px;
     padding-bottom: 3px;
-    color: rgba(69, 69, 69, 0.8);
+    color: $roomtile-name-color;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -142,7 +142,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -154,7 +154,7 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 9px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
@@ -171,15 +171,15 @@ limitations under the License.
 
 .mx_RoomTile.mx_RoomTile_noBadges .mx_RoomTile_badge.mx_RoomTile_badgeButton,
 .mx_RoomTile.mx_RoomTile_notificationStateMenu.mx_RoomTile_noBadges .mx_RoomTile_badge {
-    background-color: rgb(214, 214, 214);
+    background-color: $neutral-badge-color;
 }
 
 .mx_RoomTile_unreadNotify .mx_RoomTile_badge {
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 .mx_RoomTile_highlight .mx_RoomTile_badge {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 .mx_RoomTile_unread, .mx_RoomTile_highlight {
@@ -187,7 +187,7 @@ limitations under the License.
 }
 
 .mx_RoomTile_selected {
-    background-color: rgba(255, 255, 255, 0.8);
+    background-color: $roomtile-selected-bg-color;
 }
 
 .mx_RoomTile .mx_RoomTile_name.mx_RoomTile_badgeShown {

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

@@ -16,19 +16,17 @@ limitations under the License.
 
 .mx_SearchableEntityList {
     display: flex;
-    display: -webkit-flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_SearchableEntityList_query {
     font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     padding: 9px;
-    color: #454545;
-    background-color: #fff;
+    color: $primary-fg-color;
+    background-color: $primary-bg-color;
     margin-left: 3px;
     font-size: 15px;
     margin-bottom: 8px;
@@ -36,20 +34,19 @@ limitations under the License.
 }
 
 .mx_SearchableEntityList_query::-moz-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
 
 .mx_SearchableEntityList_query::-webkit-input-placeholder {
-    color: #454545;
+    color: $primary-fg-color;
     opacity: 0.5;
     font-size: 12px;
 }
 
 .mx_SearchableEntityList_listWrapper {
     flex: 1;
-    -webkit-flex: 1;
 
     overflow-y: auto;
 }
@@ -67,14 +64,13 @@ limitations under the License.
 .mx_SearchableEntityList_hrWrapper {
     width: 100%;
     flex: 0 0 auto;
-    -webkit-flex: 0 0 auto;
 }
 
 .mx_SearchableEntityList hr {
     height: 1px;
     border: 0px;
-    color: #e1dddd;
-    background-color: #e1dddd;
+    color: $primary-fg-color;
+    background-color: $primary-fg-color;
     margin-right: 15px;
     margin-top: 11px;
     margin-bottom: 11px;

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

@@ -27,7 +27,7 @@ limitations under the License.
 
 .mx_TabCompleteBar_command {
     margin-right: 8px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 2px;
@@ -41,7 +41,7 @@ limitations under the License.
 .mx_TabCompleteBar_command .mx_TabCompleteBar_text {
     opacity: 1.0;
     vertical-align: initial;
-    color: #fff;
+    color: $accent-fg-color;
 }
 
 .mx_TabCompleteBar_item img {
@@ -50,7 +50,7 @@ limitations under the License.
 }
 
 .mx_TabCompleteBar_text {
-    color: #4a4a4a;
+    color: $primary-fg-color;
     vertical-align: middle;
     opacity: 0.5;
 }

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

@@ -19,7 +19,7 @@ limitations under the License.
     max-width: 960px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
 }
 
 .mx_TopUnreadMessagesBar_scrollUp {

src/skins/vector/css/matrix-react-sdk/views/settings/_IntegrationsManager.scss

@@ -24,7 +24,7 @@ limitations under the License.
 }
 
 .mx_IntegrationsManager iframe {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border: 0px;
     width: 100%;
     height: 100%;

src/skins/vector/css/matrix-react-sdk/views/voip/_CallView.scss

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 .mx_CallView_voice {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
     cursor: pointer;
     text-align: center;
     padding: 6px;

src/skins/vector/css/matrix-react-sdk/views/voip/_IncomingCallbox.scss

@@ -18,7 +18,7 @@ limitations under the License.
     text-align: center;
     border: 1px solid #a4a4a4;
     border-radius: 8px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     position: fixed;
     z-index: 1000;
     padding: 6px;
@@ -41,14 +41,12 @@ limitations under the License.
 
 .mx_IncomingCallBox_buttons {
     display: flex;
-    display: -webkit-flex;
 }
 
 .mx_IncomingCallBox_buttons_cell {
     vertical-align: middle;
     padding: 6px;
     flex: 1;
-    -webkit-flex: 1;
 }
 
 .mx_IncomingCallBox_buttons_decline,
@@ -58,14 +56,14 @@ limitations under the License.
     height: 36px;
     line-height: 36px;
     border-radius: 36px;
-    color: #fff;
+    color: $accent-fg-color;
     margin: auto;
 }
 
 .mx_IncomingCallBox_buttons_decline {
-    background-color: #f48080;
+    background-color: $voip-decline-color;
 }
 
 .mx_IncomingCallBox_buttons_accept {
-    background-color: #80f480;
+    background-color: $voip-accept-color;
 }

src/skins/vector/css/rethemendex.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+cd `dirname $0`
+
+{
+    echo "// autogenerated by rethemendex.sh"
+
+    find . \! \( -path ./themes -prune \) -iname _\*.scss |
+        fgrep -v _components.scss | LC_ALL=C sort |
+        while read i; do
+            echo "@import \"$i\";"
+        done
+} > _components.scss

src/skins/vector/css/themes/_base.scss

@@ -0,0 +1,106 @@
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #454545;
+$primary-bg-color: #ffffff;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// used for focusing form controls
+$focus-bg-color: #dddddd;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: #ffffff;
+$accent-color: #76CFA6;
+
+$selection-fg-color: $primary-bg-color;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: #eaf5f0;
+
+// used by RoomDirectory permissions
+$plinth-bg-color: $secondary-accent-color;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(255,255,255,0.5);
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #f7f7f7;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #e5e5e5;
+
+// used for the border of input text fields
+$input-border-color: #f0f0f0;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #c7c7c7;
+
+// used for UserSettings EditableText
+$input-underline-color: rgba(151, 151, 151, 0.5);
+$input-fg-color: rgba(74, 74, 74, 0.9);
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #f6f6f6;
+
+$avatar-initial-color: #ffffff;
+
+$h3-color: #3d3b39;
+
+$dialog-background-bg-color: #e9e9e9;
+$lightbox-background-bg-color: #000;
+
+$greyed-fg-color: #888;
+
+$neutral-badge-color: #dbdbdb;
+
+$preview-widget-bar-color: #ddd;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
+// ********************
+
+$roomtile-name-color: rgba(69, 69, 69, 0.8);
+$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
+
+$roomsublist-label-fg-color: $h3-color;
+$roomsublist-label-bg-color: #d3efe1;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: #abddbc;
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+$edit-button-url: "../../img/icon_context_message.svg";
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;

src/skins/vector/css/themes/_dark.scss

@@ -0,0 +1,126 @@
+
+// typical text (dark-on-white in light skin)
+$primary-fg-color: #dddddd;
+$primary-bg-color: #2d2d2d;
+
+// used for focusing form controls
+$focus-bg-color: #101010;
+
+// used for dialog box text
+$light-fg-color: #747474;
+
+// button UI (white-on-green in light skin)
+$accent-fg-color: $primary-bg-color;
+$accent-color: #76CFA6;
+
+$selection-fg-color: $primary-bg-color;
+
+// red warning colour
+$warning-color: #ff0064;
+
+// left-panel style muted accent color
+$secondary-accent-color: $primary-bg-color;
+
+// used by RoomDirectory permissions
+$plinth-bg-color: #474747;
+
+// used by RoomDropTarget
+$droptarget-bg-color: rgba(45,45,45,0.5);
+
+// used by AddressSelector
+$selected-color: #eaf5f0;
+
+// selected for hoverover & selected event tiles
+$event-selected-color: #353535;
+
+// used for the hairline dividers in RoomView
+$primary-hairline-color: #474747;
+
+// used for the border of input text fields
+$input-border-color: #3a3a3a;
+
+// apart from login forms, which have stronger border
+$strong-input-border-color: #656565;
+
+// used for UserSettings EditableText
+$input-underline-color: $primary-fg-color;
+$input-fg-color: $primary-fg-color;
+
+// context menus
+$menu-border-color: rgba(187, 187, 187, 0.5);
+$menu-bg-color: #373737;
+
+$avatar-initial-color: #2d2d2d;
+
+$h3-color: $primary-fg-color;
+
+$dialog-background-bg-color: #000;
+$lightbox-background-bg-color: #000;
+
+$greyed-fg-color: #888;
+
+$neutral-badge-color: #888;
+
+$preview-widget-bar-color: $menu-bg-color;
+$preview-widget-fg-color: $greyed-fg-color;
+
+$blockquote-bar-color: #ddd;
+$blockquote-fg-color: #777;
+
+$settings-grey-fg-color: #a2a2a2;
+
+$voip-decline-color: #f48080;
+$voip-accept-color: #80f480;
+
+// ********************
+
+$roomtile-name-color: rgba(186, 186, 186, 0.8);
+$roomtile-selected-bg-color: rgba(255, 255, 255, 0.05);
+
+$roomsublist-label-fg-color: $h3-color;
+$roomsublist-label-bg-color: #454545;
+
+// ********************
+
+// event tile lifecycle
+$event-encrypting-color: rgba(171, 221, 188, 0.4);
+$event-sending-color: #ddd;
+$event-notsent-color: #f44;
+
+// event timestamp
+$event-timestamp-color: #acacac;
+
+$edit-button-url: "../../img/icon_context_message_dark.svg";
+
+// e2e
+$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
+$e2e-unverified-color: #e8bf37;
+$e2e-warning-color: #ba6363;
+
+/*** ImageView ***/
+$lightbox-bg-color: #454545;
+$lightbox-fg-color: #ffffff;
+$lightbox-border-color: #ffffff;
+
+// unused?
+$progressbar-color: #000;
+
+// Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
+// better match the theme.  Typically applied to dark grey 'off' buttons or
+// light grey 'on' buttons.
+.mx_filterFlipColor {
+    filter: invert();
+}
+
+.gm-scrollbar .thumb {
+    filter: invert();
+}
+
+.mx_EventTile_content .markdown-body pre,
+.mx_EventTile_content .markdown-body code {
+    filter: invert();
+}
+
+.mx_EventTile_content .markdown-body pre code {
+    filter: none;
+}

src/skins/vector/css/themes/dark.scss

@@ -0,0 +1,3 @@
+@import "_base.scss";
+@import "_dark.scss";
+@import "../_components.scss";

src/skins/vector/css/themes/light.scss

@@ -0,0 +1,2 @@
+@import "_base.scss";
+@import "../_components.scss";

src/skins/vector/css/vector-web/_fonts.scss

@@ -3,44 +3,46 @@
  * Includes extended Latin, Greek, Cyrillic and Vietnamese character sets
  */
 
+/* the 'src' links are relative to the bundle.css, which is in a subdirectory.
+ */
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
     font-weight: 400;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-Semibold.ttf') format('truetype');
     font-weight: 600;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-SemiboldItalic.ttf') format('truetype');
     font-weight: 600;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Open Sans';
-    src: url('fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+    src: url('../../fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
     font-weight: 700;
     font-style: italic;
 }
@@ -52,14 +54,14 @@
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
+    src: url('../../fonts/Fira_Mono/FiraMono-Regular.ttf') format('truetype');
     font-weight: 400;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'Fira Mono';
-    src: url('fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
+    src: url('../../fonts/Fira_Mono/FiraMono-Bold.ttf') format('truetype');
     font-weight: 700;
     font-style: normal;
 }

src/skins/vector/css/vector-web/structures/_LeftPanel.scss

@@ -17,13 +17,8 @@ limitations under the License.
 .mx_LeftPanel {
     position: relative;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_LeftPanel_hideButton {
@@ -39,13 +34,8 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_RoomList_scrollbar {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 
     overflow-y: auto;
@@ -57,16 +47,11 @@ limitations under the License.
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu {
-    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 
     border-top: 1px solid rgba(118, 207, 166, 0.2);
     margin-left: 16px; /* gutter */
     margin-right: 16px; /* gutter */
-    -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
     z-index: 1;
 }

src/skins/vector/css/vector-web/structures/_RightPanel.scss

@@ -17,26 +17,16 @@ limitations under the License.
 .mx_RightPanel {
     position: relative;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RightPanel_header {
-    -webkit-box-ordinal-group: 1;
-    -moz-box-ordinal-group: 1;
-    -ms-flex-order: 1;
-    -webkit-order: 1;
     order: 1;
 
-    border-bottom: 1px solid #e5e5e5;
+    border-bottom: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
-    -webkit-flex: 0 0 70px;
     flex: 0 0 70px;
 }
 
@@ -45,7 +35,7 @@ limitations under the License.
 .mx_RightPanel_headerButtonGroup {
     margin-top: 6px;
     float: left;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     margin-left: 0px;
 }
 
@@ -68,12 +58,13 @@ limitations under the License.
     width: 25px;
     height: 5px;
     border-radius: 5px;
-    background-color: rgba(118, 207, 166, 0.2);
+    background-color: $accent-color;
+    opacity: 0.2;
 }
 
 .mx_RightPanel_headerButton_badge {
     font-size: 11px;
-    color: #76cfa6;
+    color: $accent-color;
     font-weight: bold;
     padding-bottom: 2px;
 }
@@ -81,33 +72,23 @@ limitations under the License.
 .mx_RightPanel .mx_MemberList,
 .mx_RightPanel .mx_MemberInfo,
 .mx_RightPanel_blank {
-    -webkit-box-ordinal-group: 2;
-    -moz-box-ordinal-group: 2;
-    -ms-flex-order: 2;
-    -webkit-order: 2;
     order: 2;
     flex: 1 1 0;
-    -webkit-flex: 1 1 0;
 }
 
 .mx_RightPanel_footer {
-    -webkit-box-ordinal-group: 3;
-    -moz-box-ordinal-group: 3;
-    -ms-flex-order: 3;
-    -webkit-order: 3;
     order: 3;
 
-    border-top: 1px solid #e5e5e5;
+    border-top: 1px solid $primary-hairline-color;
     margin-right: 20px;
 
-    -webkit-flex: 0 0 60px;
     flex: 0 0 60px;
 }
 
 .mx_RightPanel_footer .mx_RightPanel_invite {
     line-height: 35px;
     font-size: 14px;
-	color: #4A4A4A;
+	color: $primary-fg-color;
     padding-top: 13px;
     padding-left: 5px;
     cursor: pointer;

src/skins/vector/css/vector-web/structures/_RoomDirectory.scss

@@ -20,35 +20,23 @@ limitations under the License.
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 12px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RoomDirectory_list {
-    -webkit-flex: 1;
     flex: 1;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
 
     flex-direction: column;
-    -webkit-flex-direction: column;
 }
 
 .mx_RoomDirectory_list .mx_RoomView_messageListWrapper {
     justify-content: flex-start;
-    -webkit-justify-content: flex-start;
 }
 
 .mx_RoomDirectory_listheader {
@@ -72,13 +60,12 @@ limitations under the License.
 
 .mx_RoomDirectory_tableWrapper {
     overflow-y: auto;
-    -webkit-flex: 1 1 0;
     flex: 1 1 0;
 }
 
 .mx_RoomDirectory_table {
     font-size: 14px;
-    color: #4a4a4a;
+    color: $primary-fg-color;
     width: 100%;
     text-align: left;
     table-layout: fixed;
@@ -110,11 +97,11 @@ limitations under the License.
     padding-right: 5px;
     height: 15px;
     border-radius: 11px;
-    background-color: #eaf5f0;
+    background-color: $plinth-bg-color;
     text-transform: uppercase;
     font-weight: 600;
     font-size: 11px;
-    color: #61c295;
+    color: $accent-color;
 }
 
 .mx_RoomDirectory_topic {
@@ -123,7 +110,7 @@ limitations under the License.
 
 .mx_RoomDirectory_alias {
     font-size: 12px;
-    color: #b3b3b3;
+    color: $settings-grey-fg-color;
 }
 
 .mx_RoomDirectory_roomMemberCount {

src/skins/vector/css/vector-web/structures/_RoomSubList.scss

@@ -29,7 +29,7 @@ limitations under the License.
 .mx_RoomSubList_label {
     position: relative;
     text-transform: uppercase;
-    color: #3d3b39;
+    color: $roomsublist-label-fg-color;
     font-weight: 600;
     font-size: 12px;
     width: 203px; /* padding + width = LHS Panel width */
@@ -39,8 +39,8 @@ limitations under the License.
     padding-top: 6px;
     padding-bottom: 6px;
     cursor: pointer;
-    background-color: #d3efe1;
-    border-top: solid 2px #eaf5f0;
+    background-color: $roomsublist-label-bg-color;
+    border-top: solid 2px $secondary-accent-color;
 }
 
 .mx_RoomSubList_label.mx_RoomSubList_fixed {
@@ -63,7 +63,7 @@ limitations under the License.
     display: inline-block;
     font-size: 12px;
     font-weight: normal;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 5px;
     text-transform: none;
 }
@@ -80,14 +80,14 @@ limitations under the License.
     right: 8px; /*gutter */
     top: 7px;
     border-radius: 8px;
-    color: #fff;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 4px;
     padding-right: 4px;
-    background-color: #76cfa6;
+    background-color: $accent-color;
 }
 
 /*
@@ -97,7 +97,7 @@ limitations under the License.
 */
 
 .mx_RoomSubList_badgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
 }
 
 /* This is the bottom of the speech bubble */
@@ -108,7 +108,7 @@ limitations under the License.
     width: 0;
     height: 0;
     margin-left: 5px;
-    border-top: 5px solid #ff0064;
+    border-top: 5px solid $warning-color;
     border-right: 7px solid transparent;
 }
 
@@ -129,7 +129,7 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 6px solid #76cfa6;
+    border-top: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronUp {
@@ -137,14 +137,14 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-bottom: 6px solid #76cfa6;
+    border-bottom: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronRight {
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
-    border-left: 6px solid #76cfa6;
+    border-left: 6px solid $accent-color;
     border-bottom: 5px solid transparent;
 }
 
@@ -165,7 +165,7 @@ limitations under the License.
 .mx_RoomSubList_line {
     display: inline-block;
     width: 159px;
-    border-top: dotted 2px #76cfa6;
+    border-top: dotted 2px $accent-color;
     vertical-align: middle;
 }
 
@@ -179,7 +179,7 @@ limitations under the License.
     font-size: 10px;
     font-weight: 600;
     text-align: left;
-    color: #76cfa6;
+    color: $accent-color;
     padding-left: 7px;
     padding-right: 7px;
     padding-left: 7px;
@@ -198,20 +198,20 @@ limitations under the License.
     right: 8px; /*gutter */
     top: -2px;
     border-radius: 8px;
-    border: solid 1px #76cfa6;
-    color: #fff;
+    border: solid 1px $accent-color;
+    color: $accent-fg-color;
     font-weight: 600;
     font-size: 10px;
     text-align: center;
     padding-top: 1px;
     padding-left: 3px;
     padding-right: 3px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     vertical-align: middle;
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeNotify {
-    background-color: #76cfa6;
+    background-color: $accent-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;
@@ -219,7 +219,7 @@ limitations under the License.
 }
 
 .mx_RoomSubList_moreBadge.mx_RoomSubList_moreBadgeHighlight {
-    background-color: #ff0064;
+    background-color: $warning-color;
     border: 0;
     padding-top: 3px;
     padding-left: 4px;

src/skins/vector/css/vector-web/views/context_menus/_RoomTagContextMenu.scss

@@ -31,7 +31,7 @@ limitations under the License.
 
 .mx_RoomTagContextMenu_field:last-child {
     padding-bottom: 4px;
-    color: #ff0064;
+    color: $warning-color;
 }
 
 .mx_RoomTagContextMenu_field.mx_RoomTagContextMenu_fieldSet {
@@ -70,8 +70,7 @@ limitations under the License.
     border-right-style: none;
     border-top-style: solid;
     border-top-width: 1px;
-    border-color: #bbbbbb;
-    opacity: 0.4;
+    border-color: $menu-border-color;
 }
 
 .mx_RoomTagContextMenu_fieldSet .mx_RoomTagContextMenu_icon {

src/skins/vector/css/vector-web/views/directory/_NetworkDropdown.scss

@@ -21,14 +21,14 @@ limitations under the License.
 .mx_NetworkDropdown_input {
     position: relative;
     border-radius: 3px;
-    border: 1px solid #c7c7c7;
+    border: 1px solid $strong-input-border-color;
     font-weight: 300;
     font-size: 13px;
     user-select: none;
 }
 
 .mx_NetworkDropdown_arrow {
-    border-color: #4a4a4a transparent transparent;
+    border-color: $primary-fg-color transparent transparent;
     border-style: solid;
     border-width: 5px 5px 0;
     display: block;
@@ -67,12 +67,12 @@ input.mx_NetworkDropdown_networkoption, input.mx_NetworkDropdown_networkoption:f
     margin: 0;
     padding: 0px;
     border-radius: 3px;
-    border: 1px solid #76cfa6;
-    background-color: white;
+    border: 1px solid $accent-color;
+    background-color: $primary-bg-color;
 }
 
 .mx_NetworkDropdown_menu .mx_NetworkDropdown_networkoption:hover {
-    background-color: #ddd;
+    background-color: $focus-bg-color;
 }
 
 .mx_NetworkDropdown_menu_network {

src/skins/vector/css/vector-web/views/elements/_ImageView.scss

@@ -19,39 +19,27 @@ limitations under the License.
  */
 
 .mx_ImageView {
-    display: -webkit-flex;
     display: flex;
     width: 100%;
     height: 100%;
-    -webkit-align-items: center;
     align-items: center;
 }
 
 .mx_ImageView_lhs {
-    -webkit-box-ordinal-group: 1;
     order: 1;
-    -webkit-flex: 1;
     flex: 1 1 10%;
     min-width: 60px;
-    /*
-    background-color: #080;
-    height: 20px;
-    */
+    // background-color: #080;
+    // height: 20px;
 }
 
 .mx_ImageView_content {
-    -webkit-box-ordinal-group: 2;
     order: 2;
     /* min-width hack needed for FF */
     min-width: 0px;
     height: 90%;
-    -webkit-flex: 15;
     flex: 15 15 0;
-
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
     align-items: center;
     justify-content: center;
 }
@@ -62,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('../../img/trans.png'); */
     pointer-events: all;
 }
 
@@ -78,16 +66,13 @@ limitations under the License.
 .mx_ImageView_label {
     text-align: left;
     display: flex;
-    display: -webkit-flex;
     justify-content: center;
-    -webkit-justify-content: center;
     flex-direction: column;
-    -webkit-flex-direction: column;
     padding-left: 30px;
     padding-right: 30px;
     min-height: 100%;
     max-width: 240px;
-    color: #fff;
+    color: $lightbox-fg-color;
 }
 
 .mx_ImageView_cancel {
@@ -114,10 +99,10 @@ limitations under the License.
     margin-top: 24px;
     margin-bottom: 6px;
     border-radius: 5px;
-    background-color: #454545;
+    background-color: $lightbox-bg-color;
     font-size: 14px;
     padding: 9px;
-    border: 1px solid #fff;
+    border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
@@ -125,7 +110,7 @@ limitations under the License.
 }
 
 .mx_ImageView_link {
-    color: #fff ! important;
+    color: $lightbox-fg-color ! important;
     text-decoration: none ! important;
 }
 
@@ -141,13 +126,9 @@ limitations under the License.
 }
 
 .mx_ImageView_rhs {
-    -webkit-box-ordinal-group: 3;
     order: 3;
-    -webkit-flex: 1;
     flex: 1 1 10%;
     min-width: 300px;
-    /*
-    background-color: #800;
-    height: 20px;
-    */
+    // background-color: #800;
+    // height: 20px;
 }

src/skins/vector/css/vector-web/views/elements/_Spinner.scss

@@ -15,16 +15,12 @@ limitations under the License.
 */
 
 .mx_Spinner {
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
-    -webkit-justify-content: center;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     flex: 1;
-    -webkit-flex: 1;
 }
 
 .mx_MatrixChat_middlePanel .mx_Spinner {

src/skins/vector/css/vector-web/views/globals/_GuestWarningBar.scss

@@ -15,15 +15,10 @@ limitations under the License.
 */
 
 .mx_GuestWarningBar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
 }
 
@@ -34,7 +29,7 @@ limitations under the License.
 }
 
 .mx_GuestWarningBar a {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }

src/skins/vector/css/vector-web/views/globals/_MatrixToolbar.scss

@@ -15,15 +15,10 @@ limitations under the License.
 */
 
 .mx_MatrixToolbar {
-    background-color: #76cfa6;
-    color: #fff;
+    background-color: $accent-color;
+    color: $accent-fg-color;
 
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
 }
 
@@ -34,13 +29,12 @@ limitations under the License.
 }
 
 .mx_MatrixToolbar_content {
-    -webkit-flex: 1;
     flex: 1;
 }
 
 .mx_MatrixToolbar_link
 {
-    color: #fff ! important;
+    color: $accent-fg-color ! important;
     text-decoration: underline ! important;
     cursor: pointer;
 }

src/skins/vector/css/vector-web/views/rooms/_RoomDropTarget.scss

@@ -22,9 +22,9 @@ limitations under the License.
     margin-bottom: 7px;
     padding-top: 5px;
     padding-bottom: 5px;
-    border: 1px dashed #76cfa6;
-    color: #454545;
-    background-color: rgba(255,255,255,0.5);
+    border: 1px dashed $accent-color;
+    color: $primary-fg-color;
+    background-color: $droptarget-bg-color;
     border-radius: 4px;
 }
 
@@ -39,7 +39,7 @@ limitations under the License.
 }
 
 .mx_RoomDropTarget_avatar {
-    background-color: #fff;
+    background-color: $primary-bg-color;
     border-radius: 24px;
     width: 24px;
     height: 24px;

src/skins/vector/css/vector-web/views/rooms/_RoomTooltip.scss

@@ -21,16 +21,16 @@ limitations under the License.
     width: 0;
     height: 0;
     border-top: 8px solid transparent;
-    border-right: 8px solid rgba(187, 187, 187, 0.5);
+    border-right: 8px solid $menu-border-color;
     border-bottom: 8px solid transparent;
 }
 
-.mx_RoomTooltip_chevron:after{
+.mx_RoomTooltip_chevron:after {
     content:'';
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid #fff;
+    border-right: 7px solid $primary-bg-color;
     border-bottom: 7px solid transparent;
     position:absolute;
     top: -7px;
@@ -40,14 +40,14 @@ limitations under the License.
 .mx_RoomTooltip {
     display: none;
     position: fixed;
-    border: 1px solid rgba(187, 187, 187, 0.5);
+    border: 1px solid $menu-border-color;
     border-radius: 5px;
-    background-color: #fff;
+    background-color: $primary-bg-color;
     z-index: 2000;
     padding: 5px;
     pointer-events: none;
     line-height: 14px;
     font-size: 13px;
-    color: rgba(0, 0, 0, 0.7);
+    color: $primary-fg-color;
 }
 

src/skins/vector/css/vector-web/views/rooms/_SearchBar.scss

@@ -18,21 +18,18 @@ limitations under the License.
     padding-top: 5px;
     padding-bottom: 5px;
     display: flex;
-    display: -webkit-flex;
     align-items: center;
-    -webkit-align-items: center;
 }
 
 .mx_SearchBar_input {
     display: inline block;
     border-radius: 3px 0px 0px 3px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid $input-border-color;
     font-size: 15px;
     padding: 9px;
     padding-left: 11px;
     width: auto;
     flex: 1 1 0;
-    -webkit-flex: 1 1 0;
 }
 
 .mx_SearchBar_searchButton {
@@ -41,7 +38,7 @@ limitations under the License.
     width: 37px;
     height: 37px;
     border-radius: 0px 3px 3px 0px;
-    background-color: #76CFA6;
+    background-color: $accent-color;
 }
 
 @keyframes pulsate {
@@ -61,8 +58,8 @@ limitations under the License.
     border-radius: 36px;
     font-weight: 400;
     font-size: 15px;
-    color: #fff;
-    background-color: #76cfa6;
+    color: $accent-fg-color;
+    background-color: $accent-color;
     width: auto;
     margin: auto;
     margin-left: 7px;
@@ -74,9 +71,9 @@ limitations under the License.
 }
 
 .mx_SearchBar_unselected {
-    background-color: #fff;
-    color: #76CFA6;
-    border: #76CFA6 1px solid;
+    background-color: $primary-bg-color;
+    color: $accent-color;
+    border: $accent-color 1px solid;
 }
 
 .mx_SearchBar_cancel {

src/skins/vector/css/vector-web/views/settings/_Notifications.scss

@@ -58,7 +58,7 @@ limitations under the License.
 
 .mx_UserNotifSettings_keywords {
     cursor: pointer;
-    color: #76cfa6;
+    color: $accent-color;
 }
 
 .mx_UserSettings_devicesTable td {

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

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

src/skins/vector/img/icon_context_message_dark.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19px" height="19px" viewBox="0 0 19 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>ED5D3E59-2561-4AC1-9B43-82FBC51767FC</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon_context">
+            <g>
+                <path d="M9.5,19 C14.7467051,19 19,14.7467051 19,9.5 C19,4.25329488 14.7467051,0 9.5,0 C4.25329488,0 0,4.25329488 0,9.5 C0,14.7467051 4.25329488,19 9.5,19 Z" id="Oval-69" fill="#000" opacity="0.2"></path>
+                <path d="M4.5,9.50063771 C4.5,9.13148623 4.59887838,8.85242947 4.7966381,8.66345907 C4.99439782,8.47448867 5.28224377,8.38000488 5.66018457,8.38000488 C6.0249414,8.38000488 6.3072941,8.47668596 6.50725115,8.67005103 C6.70720821,8.86341609 6.80718523,9.14027555 6.80718523,9.50063771 C6.80718523,9.84781589 6.70610956,10.1213794 6.50395517,10.3213365 C6.30180079,10.5212935 6.02054674,10.6212705 5.66018457,10.6212705 C5.29103309,10.6212705 5.00538444,10.5234908 4.80323006,10.3279284 C4.60107568,10.132366 4.5,9.85660521 4.5,9.50063771 L4.5,9.50063771 Z M8.3431114,9.50063771 C8.3431114,9.13148623 8.44198978,8.85242947 8.63974951,8.66345907 C8.83750923,8.47448867 9.12755247,8.38000488 9.50988794,8.38000488 C9.87464476,8.38000488 10.1569975,8.47668596 10.3569545,8.67005103 C10.5569116,8.86341609 10.6568886,9.14027555 10.6568886,9.50063771 C10.6568886,9.84781589 10.5558129,10.1213794 10.3536585,10.3213365 C10.1515042,10.5212935 9.8702501,10.6212705 9.50988794,10.6212705 C9.13634179,10.6212705 8.84849585,10.5234908 8.64634146,10.3279284 C8.44418708,10.132366 8.3431114,9.85660521 8.3431114,9.50063771 L8.3431114,9.50063771 Z M12.1928148,9.50063771 C12.1928148,9.13148623 12.2916931,8.85242947 12.4894529,8.66345907 C12.6872126,8.47448867 12.9750585,8.38000488 13.3529993,8.38000488 C13.7177562,8.38000488 14.0001089,8.47668596 14.2000659,8.67005103 C14.400023,8.86341609 14.5,9.14027555 14.5,9.50063771 C14.5,9.84781589 14.3989243,10.1213794 14.1967699,10.3213365 C13.9946156,10.5212935 13.7133615,10.6212705 13.3529993,10.6212705 C12.9838479,10.6212705 12.6981992,10.5234908 12.4960448,10.3279284 C12.2938904,10.132366 12.1928148,9.85660521 12.1928148,9.50063771 L12.1928148,9.50063771 Z" id="…" fill="#FFF" opacity="0.6"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/img/icons-close-button.svg

@@ -7,7 +7,7 @@
     <g id="1:1-chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Chat-People-2-Invite-modal-(similar-to-chat-group-5)" transform="translate(-909.000000, -263.000000)">
             <g id="icons_close" transform="translate(909.000000, 263.000000)">
-                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#EAF5F0"></path>
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-1-Copy-7" fill="#76CFA6" opacity="0.15"></path>
                 <polyline id="icon_close" fill="#76CFA6" opacity="0.9" transform="translate(17.468897, 17.470577) rotate(-315.000000) translate(-17.468897, -17.470577) " points="18.2115394 5.97057742 16.674774 5.97057742 16.674774 16.7275762 5.9688975 16.7275762 5.9688975 18.2642903 16.674774 18.2642903 16.674774 28.9705774 18.2115394 28.9705774 18.2115394 18.2642903 28.9688975 18.2642903 28.9688975 16.7275762 18.2115394 16.7275762 18.2115394 5.97057742"></polyline>
             </g>
         </g>

src/skins/vector/img/icons-search.svg

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
   <g id="Symbols">
-    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-1-Copy-7"/>
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-1-Copy-7"/>
     <path d="M22.4,15.4 C22.4,19.266 19.266,22.4 15.4,22.4 C11.534,22.4 8.4,19.266 8.4,15.4 C8.4,11.534 11.534,8.4 15.4,8.4 C19.266,8.4 22.4,11.534 22.4,15.4 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="path-1" opacity="0.7"/>
     <path d="M20.3,20.3 L25.25,25.25" fill-opacity="0" stroke="#76CFA6" stroke-width="1" stroke-linecap="round" id="Line" opacity="0.7"/>
   </g>

src/skins/vector/img/icons-upload.svg

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="35" height="35" viewBox="0, 0, 35, 35">
   <g id="Symbols">
-    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#EAF5F0" id="Oval-109-Copy"/>
+    <path d="M17.5,35 C27.165,35 35,27.165 35,17.5 C35,7.835 27.165,0 17.5,0 C7.835,0 0,7.835 0,17.5 C0,27.165 7.835,35 17.5,35 z" fill="#76CFA6" opacity="0.15" id="Oval-109-Copy"/>
     <g id="file">
       <path d="M10,10.01 C10,7.795 11.782,6 14.004,6 L18.402,6 C18.402,6 25,12.492 25,12.492 L25,24.006 C25,26.212 23.206,28 21,28 L14,28 C11.791,28 10,26.2 10,23.99 L10,10.01 z" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-1"/>
       <path d="M25,13 L20.157,13 C18.966,13 18,12.034 18,10.843 L18,6" fill-opacity="0" stroke="#76CFA6" stroke-width="1" id="path-3"/>

src/skins/vector/img/icons-video.svg

@@ -7,7 +7,7 @@
     <g id="Extra-icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Extra-icons-sheet" transform="translate(-542.000000, -366.000000)">
             <g id="icons_video" transform="translate(542.000000, 366.000000)">
-                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#EAF5F0"></path>
+                <path d="M17.5,35 C27.1649831,35 35,27.1649831 35,17.5 C35,7.83501688 27.1649831,0 17.5,0 C7.83501688,0 0,7.83501688 0,17.5 C0,27.1649831 7.83501688,35 17.5,35 Z" id="Oval-109-Copy-2" fill="#76CFA6" opacity="0.15"></path>
                 <g transform="translate(9.000000, 11.500000)" id="Rectangle-20-+-Path-16" stroke="#76CFA6">
                     <g transform="scale(1.0, 0.8)">
                         <rect id="Rectangle-20" x="0" y="0" width="13" height="17" rx="4"></rect>

src/skins/vector/img/logos/riot-logo-1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#764d80;}.cls-2{fill:#7dc8a2;}.cls-3{fill:#afdbc5;}</style></defs><title>Asset 4</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-1" d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-1" d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path class="cls-1" d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/><path class="cls-2" d="M62.33,0H21.22A20.56,20.56,0,0,0,.66,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H62.33A51.38,51.38,0,0,0,62.33,0Z"/><path class="cls-3" d="M21.22,138.81A15.45,15.45,0,0,1,5.79,123.37V20.57A15.45,15.45,0,0,1,21.09,5.14H62.33a46.26,46.26,0,0,1,0,92.51H36.65v25.71A15.45,15.45,0,0,1,21.22,138.81Z"/><path class="cls-2" d="M21.22,133.68a10.32,10.32,0,0,1-10.3-10.3V20.57A10.33,10.33,0,0,1,21,10.27H62.33a41.13,41.13,0,0,1,0,82.26H31.52v30.84A10.32,10.32,0,0,1,21.22,133.68Z"/><path class="cls-3" d="M21.22,128.55A5.18,5.18,0,0,1,16,123.37V20.57a5.2,5.2,0,0,1,5-5.17H62.33a36,36,0,0,1,0,72H26.39v36A5.18,5.18,0,0,1,21.22,128.55Z"/><path class="cls-2" d="M21.27,82.28H62.33a30.87,30.87,0,0,0,0-61.75H21.22Z"/><path class="cls-3" d="M26.39,77.15l0-51.49h36a25.75,25.75,0,0,1,0,51.49Z"/><path class="cls-2" d="M31.51,72l0-41.23H62.33a20.62,20.62,0,0,1,0,41.23Z"/><path class="cls-3" d="M36.64,66.9l0-31H62.33a15.49,15.49,0,0,1,0,31Z"/><path class="cls-2" d="M41.76,61.77l0-20.72H62.33a10.36,10.36,0,0,1,0,20.72Z"/><path class="cls-3" d="M46.89,56.64V46.18H62.33a5.23,5.23,0,0,1,0,10.47Z"/><circle class="cls-1" cx="20.56" cy="20.57" r="20.56" transform="translate(-8.08 15.51) rotate(-35)"/><path class="cls-1" d="M109.34,111.57a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.55,67.58Z"/></g></g></svg>

src/skins/vector/img/logos/riot-logo-2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.36 143.93"><defs><style>.cls-1{fill:#764d80;}.cls-2{fill:#f69e98;}</style></defs><title>Asset 2</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><path class="cls-2" d="M20.56,139.54A16.19,16.19,0,0,1,4.39,123.37V20.57a16.21,16.21,0,0,1,16-16.17H61.67a47,47,0,0,1,0,94H36.73v25A16.19,16.19,0,0,1,20.56,139.54ZM20.39,5.9A14.7,14.7,0,0,0,5.89,20.57v102.8a14.67,14.67,0,0,0,29.34,0V96.9H61.67a45.49,45.49,0,0,0,0-91H20.39Z"/><path class="cls-2" d="M20.56,134.4a11,11,0,0,1-11-11V20.57a11.09,11.09,0,0,1,10.79-11H61.67a41.85,41.85,0,0,1,0,83.7H31.59v30.11A11,11,0,0,1,20.56,134.4ZM20.3,11A9.57,9.57,0,0,0,11,20.57v102.8a9.53,9.53,0,1,0,19.05,0V91.75H61.67a40.35,40.35,0,0,0,0-80.7H20.3Z"/><path class="cls-2" d="M20.56,129.25a5.89,5.89,0,0,1-5.88-5.88V20.57a5.94,5.94,0,0,1,5.61-5.88H61.67a36.71,36.71,0,0,1,0,73.42H26.44v35.25A5.89,5.89,0,0,1,20.56,129.25ZM20.31,16.19a4.42,4.42,0,0,0-4.13,4.38v102.8a4.38,4.38,0,0,0,8.77,0V86.61H61.67a35.21,35.21,0,0,0,0-70.42Z"/><path class="cls-2" d="M61.67,83H19.81V19.83H61.67a31.57,31.57,0,0,1,0,63.14Zm-40.36-1.5H61.67a30.07,30.07,0,0,0,0-60.14H21.32Z"/><path class="cls-2" d="M61.67,77.83H25V25H61.67a26.43,26.43,0,0,1,0,52.85Zm-35.22-1.5H61.67a24.93,24.93,0,0,0,0-49.85H26.46Z"/><path class="cls-2" d="M61.67,72.69H30.1V30.12H61.67a21.29,21.29,0,0,1,0,42.57ZM31.6,71.19H61.67a19.79,19.79,0,0,0,0-39.57H31.6Z"/><path class="cls-2" d="M61.67,67.55H35.24V35.26H61.67a16.14,16.14,0,0,1,0,32.29ZM36.74,66H61.67a14.64,14.64,0,0,0,0-29.29H36.74Z"/><path class="cls-2" d="M61.67,62.41H40.38v-22H61.67a11,11,0,0,1,0,22Zm-19.79-1.5H61.67a9.5,9.5,0,0,0,0-19H41.88Z"/><path class="cls-2" d="M61.67,57.26H45.52V45.54H61.67a5.86,5.86,0,0,1,0,11.72ZM47,55.76H61.67a4.36,4.36,0,0,0,0-8.72H47Z"/><path class="cls-2" d="M61.18,52.16H51.89a.75.75,0,1,1,0-1.5h9.29a.75.75,0,0,1,0,1.5Z"/><path class="cls-2" d="M20.56,124.12a.75.75,0,0,1-.75-.75v-36a.75.75,0,0,1,1.5,0v36A.75.75,0,0,1,20.56,124.12Z"/><circle class="cls-2" cx="20.59" cy="20.57" r="20.56" transform="translate(-8.07 15.53) rotate(-35)"/><path class="cls-2" d="M109.36,111.56a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/><path class="cls-2" d="M145.91,51.12h25.61a2.57,2.57,0,0,0,0-5.14H145.91a2.57,2.57,0,1,0,0,5.14Z"/><path class="cls-2" d="M145.91,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,171.51,0H145.91a2.57,2.57,0,1,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-2" d="M171.51,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23a2.57,2.57,0,0,0-2.57,2.57h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,171.51,118.28Z"/><path class="cls-2" d="M158.71,72.63a15.65,15.65,0,1,0,15.65,15.65A15.67,15.67,0,0,0,158.71,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,158.71,98.79Z"/></g></g></svg>

src/skins/vector/img/logos/riot-logo-3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.99 143.93"><defs><style>.cls-1{fill:#fac79e;}.cls-2{fill:#e45e5d;}.cls-3{fill:#f8a05f;}</style></defs><title>Asset 5</title><g id="Layer_2" data-name="Layer 2"><g id="Design"><path class="cls-1" d="M146.53,51.12h25.61a2.57,2.57,0,0,0,0-5.14H146.53a2.57,2.57,0,0,0,0,5.14Z"/><path class="cls-1" d="M146.53,5.14h7.66v7.79l-.05,0-9,6.32a2.57,2.57,0,0,0,2.95,4.21l7.23-5.06a10.24,10.24,0,0,0,19.42-4.59V2.64s0,0,0-.07A2.57,2.57,0,0,0,172.14,0H146.53a2.57,2.57,0,0,0,0,5.14Zm23,8.71a5.12,5.12,0,1,1-10.23,0V5.14h10.23Z"/><path class="cls-1" d="M172.14,118.28a2.57,2.57,0,0,0-2.57,2.57v7.6h-23A2.57,2.57,0,0,0,144,131h0a2.57,2.57,0,0,0,2.57,2.57h23v7.78a2.57,2.57,0,0,0,5.14,0V131h0V120.85A2.57,2.57,0,0,0,172.14,118.28Z"/><path class="cls-1" d="M159.34,72.63A15.65,15.65,0,1,0,175,88.28,15.67,15.67,0,0,0,159.34,72.63Zm0,26.16a10.51,10.51,0,1,1,10.51-10.51A10.52,10.52,0,0,1,159.34,98.79Z"/><path class="cls-2" d="M61.67,0H20.56A20.56,20.56,0,0,0,0,20.57v102.8a20.56,20.56,0,0,0,41.12,0V102.79H61.67A51.38,51.38,0,0,0,61.67,0Z"/><polygon class="cls-3" points="47.03 0.01 40.32 0.01 0 48.06 0 56.05 47.03 0.01"/><polygon class="cls-3" points="60.45 0.01 53.74 0.01 0 64.05 0 72.04 60.45 0.01"/><path class="cls-3" d="M72.83,1.24a51,51,0,0,0-5.9-1L0,80v8Z"/><polygon class="cls-3" points="33.61 0.01 26.9 0.01 0 32.06 0 40.06 33.61 0.01"/><path class="cls-3" d="M83.27,4.78a51,51,0,0,0-5-2L0,96v8Z"/><path class="cls-3" d="M41.12,102.78h.18l64.78-77.2a51.55,51.55,0,0,0-2.94-4.49L5.55,137.38a20.62,20.62,0,0,0,3.95,3.29L41.12,103Z"/><path class="cls-3" d="M112.22,42.23l-50.8,60.54h.25a51.55,51.55,0,0,0,6.85-.47L113,49.3A51.32,51.32,0,0,0,112.22,42.23Z"/><path class="cls-3" d="M40.71,127.46l-12.59,15A20.58,20.58,0,0,0,40.71,127.46Z"/><path class="cls-3" d="M110,68.88a51,51,0,0,0,2.67-11.18L76.73,100.52a51.1,51.1,0,0,0,10.6-4.64Z"/><path class="cls-3" d="M92.22,10.1a51.58,51.58,0,0,0-4.3-2.87L0,112v8Z"/><path class="cls-3" d="M99.83,17q-1.73-1.92-3.64-3.66L.42,127.5a20.41,20.41,0,0,0,2,5.58Z"/><path class="cls-3" d="M41.12,119v-8l-26.82,32a20.53,20.53,0,0,0,5.9,1Z"/><path class="cls-3" d="M110.71,36a51,51,0,0,0-2.09-5.5L48,102.78h6.71Z"/><circle class="cls-1" cx="20.59" cy="20.57" r="20.56" transform="translate(-8.07 15.53) rotate(-35)"/><path class="cls-1" d="M109.36,111.56a20.56,20.56,0,1,1-33.69,23.59l-30.79-44A20.56,20.56,0,0,1,78.58,67.57Z"/></g></g></svg>