v0.13.2

CHANGELOG.md

@@ -1,3 +1,161 @@
+Changes in [0.13.2](https://github.com/vector-im/riot-web/releases/tag/v0.13.2) (2017-11-28)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.1...v0.13.2)
+
+
+Changes in [0.13.1](https://github.com/vector-im/riot-web/releases/tag/v0.13.1) (2017-11-17)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.0...v0.13.1)
+
+ * SECURITY UPDATE: Fix the force TURN option for inbound calls. This option forced the use
+   of TURN but only worked for outbound calls and not inbound calls. This means that if you
+   enabled this option expecting it to mask your IP address in calls, your IP would still
+   have been revealed to the room if you accepted an incoming call.
+ * Also adds the Slovak translation.
+
+Changes in [0.13.0](https://github.com/vector-im/riot-web/releases/tag/v0.13.0) (2017-11-15)
+============================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.0-rc.3...v0.13.0)
+
+
+Changes in [0.13.0-rc.3](https://github.com/vector-im/riot-web/releases/tag/v0.13.0-rc.3) (2017-11-14)
+======================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.0-rc.2...v0.13.0-rc.3)
+
+
+Changes in [0.13.0-rc.2](https://github.com/vector-im/riot-web/releases/tag/v0.13.0-rc.2) (2017-11-10)
+======================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.13.0-rc.1...v0.13.0-rc.2)
+
+ * Make groups a fully-fleged baked-in feature
+   [\#5566](https://github.com/vector-im/riot-web/pull/5566)
+
+Changes in [0.13.0-rc.1](https://github.com/vector-im/riot-web/releases/tag/v0.13.0-rc.1) (2017-11-10)
+======================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.12.7...v0.13.0-rc.1)
+
+ * Fix app tile margins.
+   [\#5561](https://github.com/vector-im/riot-web/pull/5561)
+ * Fix wrapping of long room topics (and overlap with apps)
+   [\#5549](https://github.com/vector-im/riot-web/pull/5549)
+ * Don't display widget iframes whilst loading.
+   [\#5555](https://github.com/vector-im/riot-web/pull/5555)
+ * Update from Weblate.
+   [\#5558](https://github.com/vector-im/riot-web/pull/5558)
+ * Adjust CSS for GroupView
+   [\#5543](https://github.com/vector-im/riot-web/pull/5543)
+ * CSS for adding rooms to a group with visibility
+   [\#5546](https://github.com/vector-im/riot-web/pull/5546)
+ * CSS for pinned indicators
+   [\#5511](https://github.com/vector-im/riot-web/pull/5511)
+ * Implement general-purpose tooltip "(?)"-style
+   [\#5540](https://github.com/vector-im/riot-web/pull/5540)
+ * CSS for improving group creation UX, namely setting long description
+   [\#5535](https://github.com/vector-im/riot-web/pull/5535)
+ * CSS for room notif pills in composer
+   [\#5531](https://github.com/vector-im/riot-web/pull/5531)
+ * Do not init a group store when no groupId specified
+   [\#5520](https://github.com/vector-im/riot-web/pull/5520)
+ * CSS for new pinned events indicator
+   [\#5293](https://github.com/vector-im/riot-web/pull/5293)
+ * T3chguy/devtools 1
+   [\#5471](https://github.com/vector-im/riot-web/pull/5471)
+ * Use margin to separate "perms" in the room directory
+   [\#5498](https://github.com/vector-im/riot-web/pull/5498)
+ * Add CSS for CreateGroupDialog to give group ID input suffix and prefix style
+   [\#5505](https://github.com/vector-im/riot-web/pull/5505)
+ * Fix group invites such that they look similar to room invites
+   [\#5504](https://github.com/vector-im/riot-web/pull/5504)
+ * CSS for Your Communities scrollbar
+   [\#5501](https://github.com/vector-im/riot-web/pull/5501)
+ * Add toggle to alter visibility of room-group association
+   [\#5497](https://github.com/vector-im/riot-web/pull/5497)
+ * CSS for room notification pills
+   [\#5494](https://github.com/vector-im/riot-web/pull/5494)
+ * Implement simple GroupRoomInfo
+   [\#5493](https://github.com/vector-im/riot-web/pull/5493)
+ * Add back bottom border to widget title bar
+   [\#5458](https://github.com/vector-im/riot-web/pull/5458)
+ * Prevent group name looking clickable for non-members
+   [\#5478](https://github.com/vector-im/riot-web/pull/5478)
+ * Fix instanceof check, was checking against the Package rather than class
+   [\#5472](https://github.com/vector-im/riot-web/pull/5472)
+ * Use correct group store state when rendering "Invite to this community"
+   [\#5455](https://github.com/vector-im/riot-web/pull/5455)
+ * Leverages ES6 in Notifications
+   [\#5453](https://github.com/vector-im/riot-web/pull/5453)
+ * Re-PR #4412
+   [\#5437](https://github.com/vector-im/riot-web/pull/5437)
+ * fix comma error of features example
+   [\#5410](https://github.com/vector-im/riot-web/pull/5410)
+ * Devtools: make filtering case-insensitive
+   [\#5387](https://github.com/vector-im/riot-web/pull/5387)
+ * Highlight group members icon in group member info
+   [\#5432](https://github.com/vector-im/riot-web/pull/5432)
+ * Use CSS to stop greyed Right/LeftPanel UI from being interactable
+   [\#5422](https://github.com/vector-im/riot-web/pull/5422)
+ * CSS for preventing editing of UI requiring user privilege if user
+   unprivileged
+   [\#5417](https://github.com/vector-im/riot-web/pull/5417)
+ * Only show UI for adding rooms/users to groups to privileged users
+   [\#5409](https://github.com/vector-im/riot-web/pull/5409)
+ * Only show "Invite to this community" when viewing group members
+   [\#5407](https://github.com/vector-im/riot-web/pull/5407)
+ * Add trash can icon for delete widget
+   [\#5397](https://github.com/vector-im/riot-web/pull/5397)
+ * CSS to improve MyGroups in general, and add placeholder
+   [\#5375](https://github.com/vector-im/riot-web/pull/5375)
+ * Rxl881/parallelshell
+   [\#4881](https://github.com/vector-im/riot-web/pull/4881)
+ * Custom server text was i18ned by key
+   [\#5371](https://github.com/vector-im/riot-web/pull/5371)
+ * Run prunei18n
+   [\#5370](https://github.com/vector-im/riot-web/pull/5370)
+ * Update from Weblate.
+   [\#5369](https://github.com/vector-im/riot-web/pull/5369)
+ * Add script to prune unused translations
+   [\#5339](https://github.com/vector-im/riot-web/pull/5339)
+ * CSS for improved MyGroups page
+   [\#5360](https://github.com/vector-im/riot-web/pull/5360)
+ * Add padding-right to Dialogs
+   [\#5346](https://github.com/vector-im/riot-web/pull/5346)
+ * Add div.warning and use the scss var
+   [\#5344](https://github.com/vector-im/riot-web/pull/5344)
+ * Groups->Communities
+   [\#5343](https://github.com/vector-im/riot-web/pull/5343)
+ * Make the 'add rooms' button clickable
+   [\#5342](https://github.com/vector-im/riot-web/pull/5342)
+ * Switch to gen-i18n script
+   [\#5338](https://github.com/vector-im/riot-web/pull/5338)
+ * Use _t as _t
+   [\#5334](https://github.com/vector-im/riot-web/pull/5334)
+ * fix groupview header editing visuals (pt 1)
+   [\#5330](https://github.com/vector-im/riot-web/pull/5330)
+ * bump version to prevent eslint errors
+   [\#5316](https://github.com/vector-im/riot-web/pull/5316)
+ * CSS for invited group members section
+   [\#5303](https://github.com/vector-im/riot-web/pull/5303)
+ * Handle long names in EntityTiles by overflowing correctly
+   [\#5302](https://github.com/vector-im/riot-web/pull/5302)
+ * Disable labs in electron
+   [\#5296](https://github.com/vector-im/riot-web/pull/5296)
+ * CSS for Modifying GroupView UI matrix-org/matrix-react-sdk#1475
+   [\#5295](https://github.com/vector-im/riot-web/pull/5295)
+ * Message/event pinning
+   [\#5142](https://github.com/vector-im/riot-web/pull/5142)
+ * Sorting of networks within a protocol based on name
+   [\#4054](https://github.com/vector-im/riot-web/pull/4054)
+ * allow hiding of notification body for privacy reasons
+   [\#4988](https://github.com/vector-im/riot-web/pull/4988)
+ * Don't use MXIDs on the lightbox if possible
+   [\#5281](https://github.com/vector-im/riot-web/pull/5281)
+ * CSS for lonely room message
+   [\#5267](https://github.com/vector-im/riot-web/pull/5267)
+ * Bring back dark theme code block border
+   [\#5037](https://github.com/vector-im/riot-web/pull/5037)
+ * CSS for remove avatar buttons
+   [\#5282](https://github.com/vector-im/riot-web/pull/5282)
+
 Changes in [0.12.7](https://github.com/vector-im/riot-web/releases/tag/v0.12.7) (2017-10-16)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.12.7-rc.3...v0.12.7)

config.sample.json

@@ -1,10 +1,6 @@
 {
     "default_hs_url": "https://matrix.org",
     "default_is_url": "https://vector.im",
-    "disable_custom_urls": false,
-    "disable_guests": false,
-    "disable_login_language_selector": false,
-    "disable_3pid_login": false,
     "brand": "Riot",
     "integrations_ui_url": "https://scalar.vector.im/",
     "integrations_rest_url": "https://scalar.vector.im/api",
@@ -14,8 +10,6 @@
         "feature_pinning": "labs"
     },
     "default_federate": true,
-    "welcomePageUrl": "home.html",
-    "default_theme": "light",
     "roomDirectory": {
         "servers": [
             "matrix.org"

docs/skinning thoughts.md

@@ -1,68 +0,0 @@
-== Skinning refactor ==
-
-matrix-react-sdk
-  - base images
-  - base CSS
-  - all the components needed to build a workable app (including the top layer)
-
-riot-web: the riot skin
-  - riot-specific classes (e.g. login header/footer)
-  - riot-specific themes
-    - light
-    - dark
-
-i.e. the only things which should go into riot-web are bits which apply vector-specific skinning
-specifically "Stuff that any other brand would not want to use. (e.g. riot logos, links, T&Cs)"
- - Questions:
-   - Electron app?  (should probably be a separate repo in its own right?  but might as well go here for now)
-   - index.html & index.js?  (should be in matrix-react-sdk, given the SDK is useless without them?)
-
-ideally matrix-react-sdk itself should ship with a default skin which actually works built in.
-
-status skin (can go in the same app for now)
-  - has status theme
-    - which inherits from riot light theme
-    - how do we share graphics between skins?
-      - shove them into react-sdk, or...
-      - guess we do ../../vector/img 
-      - this means keeping the skin name in the images (unless /img is a shortcut to the right skin's images)
-
-out of scope:
-  - making the components more independent, so they can be used in isolation.
-  - that said, the bits which should probably be used by being embeded into a different app:
-    - login/reg
-    - RoomView + RoomSettings
-    - MessageComposer
-    - RoomList
-    - MemberList
-    - MemberInfo
-    - Voip UI
-    - UserSettings
-  - sharing different js-sdks between the different isolated modules
-
-other changes:
-  - how do we handle i18n?
-    - each skin should really be its own i18n project.  As long as all the commonality stuff is in matrix-react-sdk this shouldn't be too bad.
-  - ability to associate components with a given skin
-    - skins/vector/src <-- components
-    - skins/vector/css
-    - skins/vector/img
-    - skins/vector/fonts
-  - gather together themes (per skin) into a single place too
-    - skins/vector/themes/foo/css
-    - skins/vector/themes/foo/img
-    - skins/vector/themes/foo/fonts
-  - ideally riot-web would contain almost nothing but skins/vector directory. 
-  - ability to entirely replace CSS rather than override it for a given theme
-    - e.g. if we replace `Login.js` with `StatusLogin.js`, then we should similarly be able to replace `_Login.scss` with `_StatusLogin.scss`.
-
-random thoughts;
-   - should we be able to change the entire skin at runtime (more like wordpress) - to the extent of replacing entire components?
-     - might pose security issues if a theme can be swapped out to replace MatrixChat or other fundamental functionality at runtime
-   - if so, perhaps skins & themes should converge...
-
------------------
-
-Immediate plan for Status:
- * Implement it as a theme for the riot skin
- * Ideally move skins to a sensible level (possibly even including src?)

electron_app/package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "src/electron-main.js",
-  "version": "0.13.0-rc.1",
+  "version": "0.13.2",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "dependencies": {

package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron_app/src/electron-main.js",
-  "version": "0.12.7",
+  "version": "0.13.2",
   "description": "A feature-rich client for Matrix.org",
   "author": "Vector Creations Ltd.",
   "repository": {
@@ -68,8 +68,8 @@
     "gfm.css": "^1.1.1",
     "highlight.js": "^9.0.0",
     "linkifyjs": "^2.1.3",
-    "matrix-js-sdk": "0.9.0-rc.1",
-    "matrix-react-sdk": "0.11.0-rc.1",
+    "matrix-js-sdk": "0.9.1",
+    "matrix-react-sdk": "0.11.2",
     "modernizr": "^3.1.0",
     "pako": "^1.0.5",
     "prop-types": "^15.5.10",

res/home-status.html

@@ -1,192 +0,0 @@
-<style type="text/css">
-
-/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
- * voodoo where we have to set display: none by default
- */
-
-.mx_HomePage_container {
-    text-align: center;
-    display: block ! important;
-    width: 690px;
-    margin: 20px;
-}
-
-.mx_HomePage_header {
-    margin-top: 37px;
-    margin-left: 10px;
-    width: 670px;
-    box-sizing: border-box;
-    font-size: 18px;
-    background-color: #fff;
-    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
-    border-radius: 5px;
-    padding: 20px 80px 20px 80px;
-    align-items: center;
-}
-
-.mx_HomePage_header h1 {
-    font-size: 29px;
-    margin-bottom: 10px;
-}
-
-.mx_HomePage_intro h2 {
-    margin-top: 32px;
-    font-size: 25px;
-    color: #49555F;
-}
-
-.mx_HomePage_intro {
-    margin: auto;
-    width: 600px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-    font-size: 18px;
-}
-
-.mx_HomePage_coc {
-    font-size: 16px;
-}
-
-.mx_HomePage_coc a {
-    color: #4360DF;
-}
-
-.mx_HomePage_room, .mx_HomePage_telegram {
-    float: left;
-    background-color: #fff;
-    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
-    border-radius: 5px;
-    margin: 10px;
-    width: 210px;
-    height: 250px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.mx_HomePage_telegram {
-    background-color: transparent;
-    border: 1px solid rgba(113, 129, 142, 0.2);
-    box-shadow: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    font-size: 16px;
-    line-height: 25px;
-    box-sizing: border-box;
-}
-
-.mx_HomePage_telegram a {
-    text-transform: uppercase;
-    color: #4360DF;
-    font-size: 13px;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    opacity: 1.0;
-    transition: opacity .2s ease;
-}
-
-.mx_HomePage_telegram a:hover {
-    opacity: 0.5;
-}
-
-.mx_HomePage_room .mx_HomePage_icon {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    width: 50px;
-    height: 50px;
-}
-
-.mx_HomePage_room .mx_HomePage_name {
-    display: block;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    font-size: 15px;
-    color: #49555F;
-    line-height: 25px;
-    margin: 0px 12px 0px 12px;
-}
-
-.mx_HomePage_room .mx_HomePage_desc {
-    flex: 1;
-    display: block;
-    margin: 0px 12px 0px 12px;
-    font-size: 14px;
-    line-height: 20px;
-}
-
-.mx_HomePage_button {
-    align-self: normal;
-    margin: 12px;
-    border-radius: 8px;
-    border: 1px solid rgba(199, 206, 209, 0.12);
-    background-color: #6CC1F6;
-    font-size: 13px;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #fff ! important;
-    cursor: pointer;
-    outline: none;
-    padding: 14px;
-    box-sizing: border-box;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-}
-
-</style>
-
-<div class="mx_HomePage_container">
-    <div class="mx_HomePage_header">
-        <div>
-            <h1>Welcome to Status Community Chat, powered by Riot.</h1>
-            <p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
-        </div>
-    </div>
-
-    <div class="mx_HomePage_intro">
-        <h2>Our rooms</h2>
-        <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
-        <p class="mx_HomePage_coc">Before posting please refer to our <a href="https://wiki.status.im/Code_of_conduct">Code of Conduct</a></p>
-    </div>
-
-
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/a.png">
-        <span class="mx_HomePage_name">#announcements</span>
-        <span class="mx_HomePage_desc">Company wide announcements.</span>
-        <a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/i.png">
-        <span class="mx_HomePage_name">#introductions</span>
-        <span class="mx_HomePage_desc">Newcomer introductions.</span>
-        <a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/g.png">
-        <span class="mx_HomePage_name">#general</span>
-        <span class="mx_HomePage_desc">General discussions of Status.</span>
-        <a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/d.png">
-        <span class="mx_HomePage_name">#dev-status</span>
-        <span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
-        <a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/n.png">
-        <span class="mx_HomePage_name">#news-articles</span>
-        <span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
-        <a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_telegram">
-        <p>
-            Interested in market and cryptocurrency type discussions?
-        </p>
-        <a href="https://t.me/StatusNetworkChat">Join Telegram</a>
-    </div>
-</div>

scripts/copy-res.js

@@ -29,6 +29,7 @@ const INCLUDE_LANGS = [
     {'value': 'pt_BR', 'label': 'Português do Brasil'},
     {'value': 'ru', 'label': 'Русский'},
     {'value': 'sv', 'label': 'Svenska'},
+    {'value': 'sk', 'label': 'Slovenčina'},
     {'value': 'th', 'label': 'ไทย'},
     {'value': 'te', 'label': 'తెలుగు'},
     {'value': 'tr', 'label': 'Türk'},
@@ -42,11 +43,10 @@ const INCLUDE_LANGS = [
 const COPY_LIST = [
     ["res/manifest.json", "webapp"],
     ["res/home.html", "webapp"],
-    ["res/home-status.html", "webapp"],
     ["res/home/**", "webapp/home"],
     ["res/{media,vector-icons}/**", "webapp"],
     ["res/flags/*", "webapp/flags/"],
-    ["src/skins/vector/{fonts,img,themes}/**", "webapp"],
+    ["src/skins/vector/{fonts,img}/**", "webapp"],
     ["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
     ["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
     ["./config.json", "webapp", { directwatch: 1 }],

src/components/views/globals/NewVersionBar.js

@@ -42,7 +42,7 @@ export default React.createClass({
         const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
         Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
             title: _t("What's New"),
-            description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>,
+            description: <pre className="changelog_text">{releaseNotes}</pre>,
             button: _t("Update"),
             onFinished: (update) => {
                 if(update && PlatformPeg.get()) {

src/components/views/login/VectorLoginFooter.js

@@ -18,7 +18,6 @@ limitations under the License.
 
 var React = require('react');
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 
 module.exports = React.createClass({
     displayName: 'VectorLoginFooter',
@@ -27,9 +26,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        // FIXME: replace this with a proper Status skin
-        if (UserSettingsStore.getTheme() === 'status') return <div/>;
-        
         return (
             <div className="mx_Login_links">
                 <a href="https://medium.com/@RiotChat">blog</a>&nbsp;&nbsp;&middot;&nbsp;&nbsp;

src/components/views/login/VectorLoginHeader.js

@@ -33,10 +33,8 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_Login_header">
-                <div className="mx_Login_logo">
-                    <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
-                </div>
+            <div className="mx_Login_logo">
+                <img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
             </div>
         );
     }

src/header

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd
+Copyright 2015, 2016 OpenMarket Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/skins/vector/css/_common.scss

@@ -1,7 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,7 +23,12 @@ html {
 }
 
 body {
-    font-family: $font-family;
+    /* Open Sans lacks combining diacritics, so these will fall through
+       to the next font.  Helevetica's diacritics however do not combine
+       nicely with Open Sans (on OSX, at least) and result in a huge
+       horizontal mess.  Arial empirically gets it right, hence prioritising
+       Arial here. */
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 15px;
     background-color: $primary-bg-color;
     color: $primary-fg-color;
@@ -69,7 +73,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
 
 /* Required by Firefox */
 textarea {
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 }
 
 /* Prevent ugly dotted highlight around selected elements in Firefox */
@@ -119,19 +123,6 @@ textarea {
     transition: height 120ms ease-out ! important;
 }
 
-// These are magic constants which are excluded from tinting, to let themes
-// (which only have CSS, unlike skins) tell the app what their non-tinted
-// colourscheme is by inspecting the stylesheet DOM.
-//
-// They are not used for layout!!
-#mx_theme_accentColor {
-    color: $accent-color;
-}
-
-#mx_theme_secondaryAccentColor {
-    color: $secondary-accent-color;
-}
-
 .mx_Dialog_wrapper {
     position: fixed;
     z-index: 4000;
@@ -219,19 +210,24 @@ textarea {
 }
 
 .mx_Dialog button, .mx_Dialog input[type="submit"] {
-    @mixin mx_DialogButton;
+    border: 0px;
+    height: 36px;
+    border-radius: 40px;
+    border: solid 1px $accent-color;
+    font-weight: 600;
+    font-size: 14px;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     margin-left: 0px;
     margin-right: 8px;
-
-    // flip colours for the secondary ones
-    font-weight: 600;
-    border: 1px solid $accent-color ! important;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    outline: none;
+    cursor: pointer;
     color: $accent-color;
-    background-color: $accent-fg-color;
-}
+    background-color: $primary-bg-color;
 
-.mx_Dialog button:hover, .mx_Dialog input[type="submit"]:hover {
-    @mixin mx_DialogButton_hover;
+    /* align images in buttons (eg spinners) */
+    vertical-align: middle;
 }
 
 .mx_Dialog button:focus, .mx_Dialog input[type="submit"]:focus {
@@ -296,18 +292,26 @@ textarea {
     color: $selection-fg-color;
 }
 
+/** green button with rounded corners */
 .mx_textButton {
-    @mixin mx_DialogButton_small;    
-}
-
-.mx_textButton:hover {
-    @mixin mx_DialogButton_hover;
+    color: $accent-fg-color;
+    background-color: $accent-color;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    cursor: pointer;
+    display: inline;
 }
 
 .mx_button_row {
     margin-top: 69px;
 }
 
+.changelog_text {
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+}
+
 .mx_Beta {
     color: red;
     margin-right: 10px;

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

@@ -38,7 +38,7 @@ limitations under the License.
 .mx_SearchBox_search {
     flex: 1 1 auto;
     width: 0px;
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 12px;
     margin-top: -2px;
     height: 24px;

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

@@ -64,13 +64,30 @@ limitations under the License.
 }
 
 .mx_UserSettings_button {
-    @mixin mx_DialogButton;
     display: inline;
+    vertical-align: middle;
+    border: 0px;
+    border-radius: 36px;
+    font-weight: 400;
+    font-size: 16px;
+    color: $accent-fg-color;
+    background-color: $accent-color;
+    width: auto;
     margin: auto;
+    padding: 7px;
+    padding-left: 1.5em;
+    padding-right: 1.5em;
+    cursor: pointer;
 }
 
-.mx_UserSettings_button:hover {
-    @mixin mx_DialogButton_hover;
+.mx_UserSettings_button.mx_UserSettings_buttonSmall {
+    height: 36px;
+    padding: 4px;
+    padding-left: 7px;
+    padding-right: 7px;
+    font-size: 12px;
+    margin-right: 5px;
+    line-height: 12px;
 }
 
 .mx_UserSettings_button.danger {

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

@@ -26,6 +26,7 @@ limitations under the License.
 }
 
 .mx_Login h2 {
+    color: $primary-fg-color;
     font-weight: 300;
     margin-top: 32px;
     margin-bottom: 20px;
@@ -79,14 +80,15 @@ limitations under the License.
 }
 
 .mx_Login_submit {
-    @mixin mx_DialogButton;
-    width: 100%;
     margin-top: 35px;
     margin-bottom: 24px;
-}
-
-.mx_Login_submit:hover {
-    @mixin mx_DialogButton_hover;
+    width: 100%;
+    border-radius: 40px;
+    height: 40px;
+    border: 0px;
+    background-color: $accent-color;
+    font-size: 15px;
+    color: $accent-fg-color;
 }
 
 .mx_Login_submit:disabled {
@@ -135,7 +137,8 @@ limitations under the License.
 }
 
 .mx_Login_forgot {
-    font-size: 15px;
+    font-size: 13px;
+    opacity: 0.8;
 }
 
 .mx_Login_forgot:link {
@@ -221,6 +224,7 @@ limitations under the License.
     height: 16px;
     flex-shrink: 1;
     min-width: 0px;
+    border-radius: 3px;
 }
 
 .mx_Login_phoneNumberField {

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

@@ -31,5 +31,5 @@ limitations under the License.
 .mx_BaseAvatar_image {
     border-radius: 40px;
     vertical-align: top;
-    background-color: $avatar-bg-color;
+    background-color: #fff;
 }

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

@@ -28,7 +28,7 @@ limitations under the License.
 {
     height: 26px;
     font-size: 14px;
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     padding-left: 12px;
     padding-right: 12px;
     margin: 0 !important;

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

@@ -34,7 +34,7 @@ limitations under the License.
 }
 
 .mx_ConfirmUserActionDialog_reasonField {
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     font-size: 14px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;

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

@@ -27,7 +27,7 @@ limitations under the License.
     border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 14px;
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     margin-left: 0px;
     margin-right: 8px;
     padding-left: 1.5em;

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

@@ -49,7 +49,7 @@ limitations under the License.
     border: solid 1px $accent-color;
     font-weight: 600;
     font-size: 13px;
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     margin-left: 0px;
     margin-right: 8px;
     padding-left: 0.5em;

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

@@ -156,17 +156,18 @@ limitations under the License.
 .mx_EventTile_redacted .mx_EventTile_line .mx_UnknownBody {
     display: block;
     width: 100%;
-    height: 22px;
-    width: 250px;
-    border-radius: 11px;
-    background: repeating-linear-gradient(
-        -45deg,
-        $event-redacted-fg-color,
-        $event-redacted-fg-color 3px,
-        transparent 3px,
-        transparent 6px
-    );
-    box-shadow: 0px 0px 3px $event-redacted-border-color inset;
+    height: 36px;
+    background-image: $event-redacted-img;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.mx_EventTile.mx_EventTile_redacted .mx_EventTile_line {
+    /*
+       Prevent changing colour of the background because
+       $event-redacted-img matches $primary-bg-color
+    */
+    background-color: initial !important;
 }
 
 .mx_EventTile_highlight,

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

@@ -26,15 +26,19 @@ limitations under the License.
 }
 
 .mx_MemberDeviceInfo_textButton {
-    @mixin mx_DialogButton_small;
+    color: $accent-fg-color;
+    background-color: $accent-color;
+    border-radius: 17px;
+    text-align: center;
+    padding-left: 1em;
+    padding-right: 1em;
+    border: 0px;
+    font-size: 14px;
+    cursor: pointer;
     margin: 2px;
     flex: 1;
 }
 
-.mx_MemberDeviceInfo_textButton:hover {
-    @mixin mx_DialogButton_hover;
-}
-
 .mx_MemberDeviceInfo_deviceId {
     font-size: 13px;
 }

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

@@ -49,7 +49,7 @@ limitations under the License.
 .mx_MemberList_query,
 .mx_GroupMemberList_query,
 .mx_GroupRoomList_query {
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;

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

@@ -55,11 +55,9 @@ limitations under the License.
 .mx_MessageComposer_noperm_error {
     width: 100%;
     height: 60px;
+    text-align: center;
     font-style: italic;
     color: $greyed-fg-color;
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 .mx_MessageComposer_input_wrapper {
@@ -140,7 +138,7 @@ limitations under the License.
     max-height: 120px;
     overflow: auto;
     /* needed for FF */
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 }
 
 /* hack for FF as vertical alignment of custom placeholder text is broken */
@@ -177,8 +175,6 @@ limitations under the License.
 .mx_MessageComposer_formatting {
     cursor: pointer;
     margin: 0 11px;
-    width: 24px;
-    height: 18px;
 }
 
 .mx_MessageComposer_formatbar_wrapper {

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

@@ -42,14 +42,22 @@ limitations under the License.
 }
 
 .mx_RoomHeader_textButton {
-    @mixin mx_DialogButton;
+    height: 36px;
+    background-color: $accent-color;
+    border-radius: 36px;
     margin-right: 8px;
-    margin-top: -5px;
+    color: $accent-fg-color;
+    line-height: 34px;
+    margin-top: -2px;
+    text-align: center;
     order: 2;
-}
+    cursor: pointer;
 
-.mx_RoomHeader_textButton:hover {
-    @mixin mx_DialogButton_hover;
+/*
+    flex: 0 0 90px;
+*/
+    padding-left: 12px;
+    padding-right: 12px;
 }
 
 .mx_RoomHeader_textButton_danger {

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

@@ -50,11 +50,10 @@ limitations under the License.
     color: $primary-fg-color;
     background-color: $droptarget-bg-color;
     border-radius: 4px;
-    line-height: 16px;
 }
 
 .mx_RoomList_emptySubListTip .mx_RoleButton {
-    vertical-align: -2px;
+    vertical-align: -3px;
 }
 
 .mx_RoomList_headerButtons {

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

@@ -22,16 +22,18 @@ limitations under the License.
 
 .mx_RoomSettings_leaveButton,
 .mx_RoomSettings_unbanButton {
-    @mixin mx_DialogButton;
     position: relative;
+    height: 36px;
+    background-color: $accent-color;
+    border-radius: 36px;
     margin-right: 8px;
+    color: $accent-fg-color;
+    line-height: 34px;
+    text-align: center;
+    cursor: pointer;
+    padding-left: 12px;
+    padding-right: 12px;
 }
-
-.mx_RoomSettings_leaveButton:hover,
-.mx_RoomSettings_unbanButton:hover {
-    @mixin mx_DialogButton_hover;
-}
-
 .mx_RoomSettings_integrationsButton_error {
     position: relative;
     cursor: not-allowed;

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

@@ -21,7 +21,7 @@ limitations under the License.
 }
 
 .mx_SearchableEntityList_query {
-    font-family: $font-family;
+    font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
     border-radius: 3px;
     border: 1px solid $input-border-color;
     padding: 9px;

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

@@ -1,9 +1,3 @@
-/* Open Sans lacks combining diacritics, so these will fall through
-   to the next font.  Helevetica's diacritics however do not combine
-   nicely with Open Sans (on OSX, at least) and result in a huge
-   horizontal mess.  Arial empirically gets it right, hence prioritising
-   Arial here. */
-$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
@@ -71,7 +65,6 @@ $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #f6f6f6;
 
 $avatar-initial-color: #ffffff;
-$avatar-bg-color: #ffffff;
 
 $h3-color: #3d3b39;
 
@@ -105,9 +98,6 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
 
 $roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #d3efe1;
-$roomsublist-chevron-color: $accent-color;
-
-$panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
@@ -117,8 +107,7 @@ $event-sending-color: #ddd;
 $event-notsent-color: #f44;
 
 // event redaction
-$event-redacted-fg-color: #e2e2e2;
-$event-redacted-border-color: #cccccc;
+$event-redacted-img: url('../../img/redacted.jpg');
 
 // event timestamp
 $event-timestamp-color: #acacac;
@@ -138,31 +127,3 @@ $lightbox-border-color: #ffffff;
 
 // unused?
 $progressbar-color: #000;
-
-// ***** Mixins! *****
-
-@define-mixin mx_DialogButton {
-    /* align images in buttons (eg spinners) */
-    vertical-align: middle;
-    border: 0px;
-    border-radius: 36px;
-    font-family: $font-family;
-    font-size: 14px;
-    color: $accent-fg-color;
-    background-color: $accent-color;
-    width: auto;
-    padding: 7px;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    cursor: pointer;
-    display: inline-block;
-}
-
-@define-mixin mx_DialogButton_hover {
-}
-
-@define-mixin mx_DialogButton_small {
-    @mixin mx_DialogButton;
-    font-size: 15px;
-    padding: 0px 1.5em 0px 1.5em;
-}

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

@@ -30,13 +30,6 @@ $preview-bar-bg-color: #333;
 // left-panel style muted accent color
 $secondary-accent-color: $primary-bg-color;
 
-// stop the tinter trying to change the secondary accent color
-// by overriding the key to something untintable
-// XXX: this is a bit of a hack.
-#mx_theme_secondaryAccentColor {
-    color: #2d2d2e ! important; // deliberately off by one
-}
-
 // used by RoomDirectory permissions
 $plinth-bg-color: #474747;
 
@@ -67,7 +60,6 @@ $menu-border-color: rgba(187, 187, 187, 0.5);
 $menu-bg-color: #373737;
 
 $avatar-initial-color: #2d2d2d;
-$avatar-bg-color: #ffffff;
 
 $h3-color: $primary-fg-color;
 
@@ -100,9 +92,6 @@ $roomtile-focused-bg-color: rgba(255, 255, 255, 0.2);
 
 $roomsublist-label-fg-color: $h3-color;
 $roomsublist-label-bg-color: #454545;
-$roomsublist-chevron-color: $accent-color;
-
-$panel-divider-color: rgba(118, 207, 166, 0.2);
 
 // ********************
 
@@ -112,8 +101,7 @@ $event-sending-color: #888;
 $event-notsent-color: #f44;
 
 // event redaction
-$event-redacted-fg-color: #606060;
-$event-redacted-border-color: #000000;
+$event-redacted-img: url('../../img/redacted-dark.jpg');
 
 // event timestamp
 $event-timestamp-color: #acacac;

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

@@ -49,7 +49,7 @@ limitations under the License.
 .mx_LeftPanel .mx_BottomLeftMenu {
     order: 3;
 
-    border-top: 1px solid $panel-divider-color;
+    border-top: 1px solid rgba(118, 207, 166, 0.2);
     margin-left: 16px; /* gutter */
     margin-right: 16px; /* gutter */
     flex: 0 0 60px;

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

@@ -129,7 +129,7 @@ limitations under the License.
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 6px solid $roomsublist-chevron-color;
+    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 $roomsublist-chevron-color;
+    border-bottom: 6px solid $accent-color;
 }
 
 .mx_RoomSubList_chevronRight {
     width: 0;
     height: 0;
     border-top: 5px solid transparent;
-    border-left: 6px solid $roomsublist-chevron-color;
+    border-left: 6px solid $accent-color;
     border-bottom: 5px solid transparent;
 }
 

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

@@ -56,7 +56,3 @@ limitations under the License.
 .mx_MatrixToolbar_action {
     margin-right: 16px;
 }
-
-.mx_MatrixToolbar_changelog {
-    white-space: pre;
-}

src/skins/vector/img/button-text-formatting.svg

@@ -1,21 +1,18 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 18" style="enable-background:new 0 0 24 18;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#F6F6F6;}
-	.st1{enable-background:new    ;}
-	.st2{fill:#4A4A4A;}
-</style>
-<path id="Rectangle-111" class="st0" d="M9,0h6c5,0,9,4,9,9l0,0c0,5-4,9-9,9H9c-5,0-9-4-9-9l0,0C0,4,4,0,9,0z"/>
-<g class="st1">
-	<path class="st2" d="M11.3,13l-0.6-2H7.6L7,13H5l3-8.6h2.2l3,8.6H11.3z M10.3,9.4c-0.6-1.8-0.9-2.9-1-3.1S9.2,5.9,9.1,5.7
-		C9,6.2,8.6,7.5,8,9.4H10.3z"/>
-</g>
-<g class="st1">
-	<path class="st2" d="M15.8,6.5c0.4,0,0.7,0.1,1,0.3s0.5,0.5,0.7,0.8h0.1l0.4-1h0.7L17.3,13h-0.8l0.2-1.2h0
-		c-0.7,0.9-1.4,1.3-2.2,1.3c-0.5,0-1-0.2-1.3-0.6s-0.5-0.9-0.5-1.6c0-0.8,0.1-1.6,0.4-2.3s0.7-1.2,1.1-1.6S15.2,6.5,15.8,6.5z
-		 M14.7,12.3c0.4,0,0.8-0.2,1.1-0.5s0.7-0.8,0.9-1.4s0.4-1.2,0.4-1.7c0-0.4-0.1-0.7-0.3-1s-0.5-0.4-0.9-0.4c-0.4,0-0.8,0.2-1.1,0.5
-		S14.2,8.6,14,9.2s-0.3,1.2-0.3,1.8c0,0.4,0.1,0.8,0.3,1S14.4,12.3,14.7,12.3z"/>
-</g>
-</svg>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="18px" viewBox="0 0 24 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: sketchtool 39 (31667) - http://www.bohemiancoding.com/sketch -->
+    <title>F69CBF5F-0BEC-47E8-B1DF-125D6376C0C9</title>
+    <desc>Created with sketchtool.</desc>
+    <defs></defs>
+    <g id="Screens-revised" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="02_x-Chat-text-input-" transform="translate(-829.000000, -729.000000)">
+            <g id="button_text_formatting" transform="translate(829.000000, 729.000000)">
+                <rect id="Rectangle-111" fill="#F6F6F6" x="0" y="0" width="24" height="18" rx="9"></rect>
+                <text id="Aa" font-family="OpenSans-Bold, Open Sans" font-size="12" font-weight="bold" letter-spacing="-1.20000005" fill="#4A4A4A">
+                    <tspan x="5" y="13">A</tspan>
+                    <tspan x="12.0792968" y="13" font-family="OpenSans-Italic, Open Sans" font-style="italic" font-weight="normal">a</tspan>
+                </text>
+            </g>
+        </g>
+    </g>
+</svg>

src/skins/vector/themes/status/css/_StatusLogin.scss

@@ -1,232 +0,0 @@
-/*
-Copyright 2017 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-// overrides for mx_Login* specific to Status.
-// Ideally this would be all Status prefixes for a Status specific version of the component
-// but given we're not doing Status as a dedicated 'skin' yet...
-
-.mx_StatusLogin {
-
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    overflow: auto;
-
-    .mx_StatusLogin_brand {
-        position: absolute;
-        top: 30px;
-        left: 30px;
-    }
-
-    .mx_StatusLogin_content {
-        margin: auto;
-    }
-
-    .mx_StatusLogin_header {
-        text-align: center;
-        margin-top: 70px;
-        margin-bottom: 50px;
-    }
-
-    .mx_StatusLogin_header h1 {
-        font-size: 29px;
-        margin-bottom: 3px;
-    }
-
-    .mx_StatusLogin_subtitle {
-        font-size: 18px;
-    }
-
-    .mx_StatusLogin_subtitle a {
-        color: $riot-link-color;
-    }
-
-    .mx_StatusLogin_footer {
-        margin-top: 30px;
-        margin-bottom: 30px;
-        text-align: center;
-        font-size: 16px;
-        color: $footer-color;
-    }
-
-    .mx_StatusLogin_footer p {
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-    }
-
-    .mx_StatusLogin_footer_cta {
-        color: $callout-color;
-        font-family: $header-font-family;
-        letter-spacing: 1px;
-        font-size: 13px;
-        text-transform: uppercase;
-        opacity: 1.0;
-        transition: opacity .2s ease;        
-    }
-
-    .mx_StatusLogin_footer_cta:hover {
-        opacity: 0.5;
-        text-decoration: none;
-    }
-
-    // overrides of .mx_Login
-
-    .mx_Login_box {
-        width: 330px;
-        min-height: initial;
-        padding-top: 40px;
-        padding-bottom: 20px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 8px;
-        color: $form-fg-color;
-        font-size: 16px;
-        line-height: 25px;
-        background-color: $form-bg-color;
-        background-image: url(../../themes/status/img/dot.svg);
-        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);    
-        position: relative;
-        text-align: center;
-    }
-
-    .mx_Login_logo {
-        background-color: #fff;
-        width: 74px;
-        height: 74px;
-        border-radius: 37px;
-        box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2);
-        position: absolute;
-        top: -36px;
-        left: 50%;
-        margin-left: -36px;
-    }
-
-    .mx_Login_logo img {
-        width: 36px;
-        height: 36px;
-        padding: 19px;
-    }
-
-    .mx_Login_box h2 {
-        text-align: center;
-        color: $form-fg-color;
-        font-size: 25px;
-        margin-bottom: 24px;
-    }
-
-    .mx_Login_field {
-        width: 260px;
-        height: 27px;
-        padding: 8px 20px 10px 20px;
-        border-radius: 10px;
-        text-align: left;
-        border: 1px solid transparent;
-        background-color: $form-field-bg-color;
-        color: $form-field-fg-color;
-        font-weight: 300;
-        font-size: 15px;
-        margin-bottom: 14px;
-        transition: background-color .2s ease;
-    }
-
-    .mx_Login_field:focus {
-        border: 1px solid transparent;
-        background-color: $form-field-bg-hover-color;
-    }
-
-    .mx_Login_field::-webkit-input-placeholder {
-        font-family: $font-family;
-        color: $form-field-fg-color;
-        opacity: 0.6;
-    }
-
-    .mx_Login_field::-moz-placeholder {
-        font-family: $font-family;
-        color: $form-field-fg-color;
-        opacity: 0.6;        
-    }
-
-    .mx_Login_field_disabled {
-        opacity: 0.3;
-    }
-
-    .mx_Login_prompt {
-        font-size: 16px;
-    }
-
-    .mx_Login_submit {
-        min-width: 200px;
-        width: auto;
-        margin-top: 13px;
-        margin-bottom: 10px;
-    }
-
-    .mx_Login_submit:disabled {
-        opacity: 0.3;
-    }
-
-    .mx_Login_create {
-        margin-top: 10px;
-        display: block;
-        text-align: center;
-        width: 100%;
-        font-size: 15px;
-        opacity: 1.0;
-    }
-
-    .mx_Login_create:link,
-    .mx_Login_create:hover,
-    .mx_Login_create:visited
-    {
-        color: $form-fg-color;
-    }
-
-    .mx_Login_forgot {
-        display: block;
-        font-size: 15px;
-    }
-
-    .mx_Login_forgot:link,
-    .mx_Login_forgot:hover,
-    .mx_Login_forgot:visited
-    {
-        color: $form-fg-color;
-    }
-
-    .mx_Login_error {
-        color: $warning-color;
-        font-size: 18px;
-        width: 300px;
-        height: 44px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: auto;
-        text-align: center;
-        margin-top: 12px;
-        margin-bottom: 16px;
-    }
-
-    .mx_Login_smallError {
-        font-size: 13px;
-        line-height: initial;
-    }
-
-}

src/skins/vector/themes/status/css/_status.scss

@@ -1,276 +0,0 @@
-@font-face {
-    font-family:PostGrotesk-Medium;
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family:PostGrotesk-Book;
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot');
-    src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
-    font-weight: 400;
-    font-style: normal;
-}
-
-// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
-// N.B. that the status.im website uses:
-// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now.
-
-$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
-
-// typical text (dark-on-white in light skin)
-$primary-fg-color: #70808D;
-$primary-bg-color: #EEF2F5;
-
-// ***** Start of Status theme specifics ******
-$header-color: #49555F;
-$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-
-$footer-color: #8D99A4;
-
-$riot-link-color: #A26988;
-
-a {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-h1,h2,h3,h4,h5 {
-    color: $header-color;
-    font-family: $header-font-family;
-    font-weight: 400 ! important;
-}
-
-$callout-color: #4360DF; // or #4957b8 from status.im homepage
-
-$form-bg-color: $callout-color;
-$form-fg-color: #ffffff;
-
-$form-field-bg-color: rgba(244, 242, 247, 0.12);
-$form-field-bg-hover-color: rgba(255, 255, 255, 0.2);
-$form-field-fg-color: #ffffff;
-
-// ***** End of Status theme specifics ******
-
-
-// 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: #6CC1F6;
-$accent-hover-color: #84cfff;
-
-$selection-fg-color: $primary-bg-color;
-
-$focus-brightness: 125%;
-
-// red warning colour
-$warning-color: #F69E98;
-$mention-user-pill-bg-color: #ff0064;
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
-
-$group-alert-color: #774f7e;
-
-$preview-bar-bg-color: #f7f7f7;
-
-// left-panel style muted accent color
-$secondary-accent-color: #586C7B;
-
-// stop the tinter trying to change the secondary accent color
-// by overriding the key to something untintable
-// XXX: this is a bit of a hack.
-#mx_theme_secondaryAccentColor {
-    color: #586C7C ! important; // deliberately off by one
-}
-
-// 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: #c9cfd4;
-
-// 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;
-$avatar-bg-color: transparent;
-
-$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;
-
-$rte-bg-color: #e9e9e9;
-$rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
-
-// ********************
-
-$roomtile-name-color: #ffffff;
-$roomtile-selected-bg-color: #465561;
-$roomtile-focused-bg-color: #6d8597;
-
-$roomsublist-label-fg-color: #ffffff;
-$roomsublist-label-bg-color: $secondary-accent-color;
-$roomsublist-chevron-color: #ffffff;
-
-$panel-divider-color: rgba(0, 0, 0, 0.2);
-
-// ********************
-
-// event tile lifecycle
-$event-encrypting-color: #abddbc;
-$event-sending-color: #ddd;
-$event-notsent-color: #f44;
-
-// event redaction
-$event-redacted-fg-color: #e2e2e2;
-$event-redacted-border-color: #cccccc;
-
-// event timestamp
-$event-timestamp-color: #acacac;
-
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_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;
-
-@define-mixin mx_DialogButton {
-    /* align images in buttons (eg spinners) */
-    vertical-align: middle;
-    border-radius: 8px;
-    border: 1px solid rgba(199, 206, 209, 0.12);
-    background-color: $accent-color;
-    font-size: 13px;
-    font-family: $header-font-family;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: $accent-fg-color;
-    cursor: pointer;
-    outline: none;
-    padding: 14px;
-    box-sizing: border-box;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    display: inline-block;
-    transition: background-color .2s ease;
-}
-
-@define-mixin mx_DialogButton_hover {
-    background-color: $accent-hover-color;
-}
-
-@define-mixin mx_DialogButton_small {
-    @mixin mx_DialogButton;
-    height: auto;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-.mx_RoomSubList_label {
-    font-size: 13px;
-    font-family: $header-font-family;
-    letter-spacing: 1px;    
-}
-
-// FIXME: all these ! importants are horrid - we should instead go and define
-// variables or something.
-.mx_SearchBox_search {
-    color: #fff ! important;
-}
-
-.mx_SearchBox_search::-webkit-input-placeholder  {
-    color: rgba(255, 255, 255, 0.6) ! important;
-}
-
-.mx_SearchBox_search::-moz-placeholder  {
-    color: rgba(255, 255, 255, 0.6) ! important;
-}
-
-.mx_RoomList_emptySubListTip,
-.mx_RoomDropTarget {
-    font-size: 14px ! important;
-    border: 1.5px dashed rgba(0,0,0,0.2) ! important;
-    color: #fff ! important;
-    background-color: transparent ! important;
-    border-radius: 6px ! important;
-    margin-left: 6px ! important;
-    margin-right: 6px ! important;
-    margin-top: 8px ! important;
-    margin-bottom: 7px ! important;
-    padding: 8px ! important;
-}
-
-.mx_RoomDirectory_perm {
-    font-family: $header-font-family ! important;
-    background-color: #fff ! important;
-}
-
-.mx_RoomTile_badge,
-.mx_RoomSubList_badge {
-    height: 12px ! important;
-    padding-top: 1px ! important;
-    padding-bottom: 1px ! important;
-}
-
-.mx_RoomSubList_chevron {
-    top: 8px ! important;
-}

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

@@ -1,4 +0,0 @@
-@import "../../../css/themes/_base.scss";
-@import "_status.scss";
-@import "../../../css/_components.scss";
-@import "_StatusLogin.scss";

src/skins/vector/themes/status/fonts/README

@@ -1 +0,0 @@
-We link out to status.im for fonts, although ideally we'd put them here.

src/skins/vector/themes/status/img/dot.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg>

src/vector/index.html

@@ -20,14 +20,15 @@
     <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
     <meta name="msapplication-config" content="vector-icons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <meta property="og:image" content="https://chat.status.im/img/logos/riot-im-logo-1.png" />
     <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
         var file = htmlWebpackPlugin.files.css[i];
         var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
         if (match) {
             var title = match[1].charAt(0).toUpperCase() + match[1].slice(1);
+            var light = match[1] == 'light';
         %>
-           <link rel="stylesheet" disabled title="<%= title %>" href="<%= file %>">
+           <link rel="<%= light ? '' : 'alternate ' %>stylesheet" title="<%= title %>"
+               href="<%= file %>">
         <% } else { %>
            <link rel="stylesheet" href="<%= file %>">
         <% }
@@ -72,7 +73,5 @@
         <source src="media/busy.mp3" type="audio/mpeg" />
     </audio>
     <audio id="remoteAudio"/>
-    <!-- let CSS themes pass constants to the app -->
-    <div id="mx_theme_accentColor"></div><div id="mx_theme_secondaryAccentColor"/></div>
   </body>
 </html>

src/vector/index.js

@@ -78,7 +78,6 @@ import {parseQs, parseQsFromFragment} from './url_utils';
 import Platform from './platform';
 
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
-import Tinter from 'matrix-react-sdk/lib/Tinter';
 
 var lastLocationHashSet = null;
 
@@ -251,30 +250,16 @@ async function loadApp() {
 
     if (!preventRedirect) {
         if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
-            // FIXME: ugly status hardcoding
-            if (UserSettingsStore.getTheme() === 'status') {
-                window.location = "https://status.im/join-riot.html";
+            if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
+                window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
                 return;
             }
-            else {
-                if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
-                    window.location = "https://itunes.apple.com/us/app/vector.im/id1083446067";
-                    return;
-                }
-            }
         }
         else if (/Android/.test(navigator.userAgent)) {
-            // FIXME: ugly status hardcoding
-            if (UserSettingsStore.getTheme() === 'status') {
-                window.location = "https://status.im/join-riot.html";
+            if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
+                window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
                 return;
             }
-            else {
-                if (confirm(_t("Riot is not supported on mobile web. Install the app?"))) {
-                    window.location = "https://play.google.com/store/apps/details?id=im.vector.alpha";
-                    return;
-                }
-            }
         }
     }
 
@@ -296,29 +281,6 @@ async function loadApp() {
         configError = e;
     }
 
-    // as quickly as we possibly can, set a default theme...
-    const styleElements = Object.create(null);
-    let a;
-    const theme = configJson.default_theme || 'light';
-    for (let i = 0; (a = document.getElementsByTagName("link")[i]); i++) {
-        const href = a.getAttribute("href");
-        // shouldn't we be using the 'title' tag rather than the href?
-        const match = href.match(/^bundles\/.*\/theme-(.*)\.css$/);
-        if (match) {
-            if (match[1] === theme) {
-                // remove the disabled flag off the stylesheet
-                a.removeAttribute("disabled");
-
-                // in case the Tinter.tint() in MatrixChat fires before the
-                // CSS has actually loaded (which in practice happens)
-                a.onload = () => { 
-                    Tinter.setTheme(theme);
-                    Tinter.tint();
-                };
-            }
-        }
-    }
-
     if (window.localStorage && window.localStorage.getItem('mx_accepts_unsupported_browser')) {
         console.log('User has previously accepted risks in using an unsupported browser');
         validBrowser = true;
@@ -342,7 +304,7 @@ async function loadApp() {
                 config={configJson}
                 realQueryParams={params}
                 startingFragmentQueryParams={fragparts.params}
-                enableGuest={!configJson.disable_guests}
+                enableGuest={true}
                 onTokenLoginCompleted={onTokenLoginCompleted}
                 initialScreenAfterLogin={getScreenFromLocation(window.location)}
                 defaultDeviceDisplayName={platform.getDefaultDeviceDisplayName()}

test/app-tests/loading.js

@@ -546,8 +546,6 @@ describe('loading:', function () {
                 );
             });
 
-            /*
-            // ILAG renders this obsolete. I think.
             it('should allow us to return to the app', function() {
                 const login = ReactTestUtils.findRenderedComponentWithType(
                     matrixChat, sdk.getComponent('structures.login.Login')
@@ -570,7 +568,6 @@ describe('loading:', function () {
                         matrixChat, sdk.getComponent('structures.HomePage'));
                 });
             });
-            */
         });
     });
 

webpack.config.js

@@ -20,7 +20,6 @@ module.exports = {
         // CSS themes
         "theme-light": "./src/skins/vector/css/themes/light.scss",
         "theme-dark": "./src/skins/vector/css/themes/dark.scss",
-        "theme-status": "./src/skins/vector/themes/status/css/status.scss",
     },
     module: {
         preLoaders: [