Merge branch 'develop' into travis/room-list/sticky

Author: turt2live

res/css/structures/auth/_CompleteSecurity.scss

@@ -98,3 +98,7 @@ limitations under the License.
         }
     }
 }
+
+.mx_CompleteSecurity_resetText {
+    padding-top: 20px;
+}

res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss

@@ -73,33 +73,42 @@ limitations under the License.
     margin-left: 20px;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyHeader {
-    margin-bottom: 1em;
-}
-
 .mx_CreateSecretStorageDialog_recoveryKeyContainer {
-    display: flex;
+    width: 380px;
+    margin-left: auto;
+    margin-right: auto;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKey {
-    width: 262px;
+    font-weight: bold;
+    text-align: center;
     padding: 20px;
     color: $info-plinth-fg-color;
     background-color: $info-plinth-bg-color;
-    margin-right: 12px;
+    border-radius: 6px;
+    word-spacing: 1em;
+    margin-bottom: 20px;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons {
-    flex: 1;
     display: flex;
+    justify-content: space-between;
     align-items: center;
 }
 
 .mx_CreateSecretStorageDialog_recoveryKeyButtons .mx_AccessibleButton {
-    margin-right: 10px;
+    width: 160px;
+    padding-left: 0px;
+    padding-right: 0px;
+    white-space: nowrap;
 }
 
-.mx_CreateSecretStorageDialog_recoveryKeyButtons button {
-    flex: 1;
-    white-space: nowrap;
+.mx_CreateSecretStorageDialog_continueSpinner {
+    margin-top: 33px;
+    text-align: right;
+}
+
+.mx_CreateSecretStorageDialog_continueSpinner img {
+    width: 20px;
+    height: 20px;
 }

res/css/views/elements/_StyledCheckbox.scss

@@ -25,6 +25,8 @@ limitations under the License.
 
     input[type=checkbox] {
         appearance: none;
+        margin: 0;
+        padding: 0;
 
         & + label {
             display: flex;

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -44,6 +44,83 @@ limitations under the License.
     padding-right: 5px;
 }
 
+.mx_AppearanceUserSettingsTab {
+    > .mx_SettingsTab_SubHeading {
+        margin-bottom: 32px;
+    }
+}
+
+.mx_AppearanceUserSettingsTab_themeSection {
+    $radio-bg-color: $input-darker-bg-color;
+    color: $primary-fg-color;
+
+    > .mx_ThemeSelectors {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        margin-top: 4px;
+        margin-bottom: 30px;
+
+        > .mx_RadioButton {
+            padding: $font-16px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            width: 180px;
+
+            background: $radio-bg-color;
+            opacity: 0.4;
+
+            flex-shrink: 1;
+            flex-grow: 0;
+
+            margin-right: 15px;
+            margin-top: 10px;
+
+            font-weight: 600;
+            color: $muted-fg-color;
+
+            > span {
+                justify-content: center;
+            }
+        }
+
+        > .mx_RadioButton_enabled {
+            opacity: 1;
+
+            // These colors need to be hardcoded because they don't change with the theme
+            &.mx_ThemeSelector_light {
+                background-color: #f3f8fd;
+                color: #2e2f32;
+            }
+
+            &.mx_ThemeSelector_dark {
+                background-color: #181b21;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+
+            &.mx_ThemeSelector_black {
+                background-color: #000000;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+        }
+    }
+}
+
 .mx_SettingsTab_customFontSizeField {
     margin-left: calc($font-16px + 10px);
 }

src/CrossSigningManager.js

@@ -30,6 +30,8 @@ import {encodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
 // operation ends.
 let secretStorageKeys = {};
 let secretStorageBeingAccessed = false;
+// Stores the 'passphraseOnly' option for the active storage access operation
+let passphraseOnlyOption = null;
 
 function isCachingAllowed() {
     return (
@@ -99,6 +101,7 @@ async function getSecretStorageKey({ keys: keyInfos }, ssssItemName) {
                 const key = await inputToKey(input);
                 return await MatrixClientPeg.get().checkSecretStorageKey(key, info);
             },
+            passphraseOnly: passphraseOnlyOption,
         },
         /* className= */ null,
         /* isPriorityModal= */ false,
@@ -213,19 +216,27 @@ export async function promptForBackupPassphrase() {
  *
  * @param {Function} [func] An operation to perform once secret storage has been
  * bootstrapped. Optional.
- * @param {bool} [forceReset] Reset secret storage even if it's already set up
+ * @param {object} [opts] Named options
+ * @param {bool} [opts.forceReset] Reset secret storage even if it's already set up
+ * @param {object} [opts.withKeys] Map of key ID to key for SSSS keys that the client
+ *     already has available. If a key is not supplied here, the user will be prompted.
+ * @param {bool} [opts.passphraseOnly] If true, do not prompt for recovery key or to reset keys
  */
-export async function accessSecretStorage(func = async () => { }, forceReset = false) {
+export async function accessSecretStorage(
+    func = async () => { }, opts = {},
+) {
     const cli = MatrixClientPeg.get();
     secretStorageBeingAccessed = true;
+    passphraseOnlyOption = opts.passphraseOnly;
+    secretStorageKeys = Object.assign({}, opts.withKeys || {});
     try {
-        if (!await cli.hasSecretStorageKey() || forceReset) {
+        if (!await cli.hasSecretStorageKey() || opts.forceReset) {
             // This dialog calls bootstrap itself after guiding the user through
             // passphrase creation.
             const { finished } = Modal.createTrackedDialogAsync('Create Secret Storage dialog', '',
                 import("./async-components/views/dialogs/secretstorage/CreateSecretStorageDialog"),
                 {
-                    force: forceReset,
+                    force: opts.forceReset,
                 },
                 null, /* priority = */ false, /* static = */ true,
             );
@@ -263,5 +274,6 @@ export async function accessSecretStorage(func = async () => { }, forceReset = f
         if (!isCachingAllowed()) {
             secretStorageKeys = {};
         }
+        passphraseOnlyOption = null;
     }
 }