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

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -88,7 +88,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
 
     _onResetRecoveryClick = () => {
         this.props.onFinished(false);
-        accessSecretStorage(() => {}, /* forceReset = */ true);
+        accessSecretStorage(() => {}, {forceReset: true});
     }
 
     _onRecoveryKeyChange = (e) => {

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -32,6 +32,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         keyInfo: PropTypes.object.isRequired,
         // Function from one of { passphrase, recoveryKey } -> boolean
         checkPrivateKey: PropTypes.func.isRequired,
+        // If true, only prompt for a passphrase and do not offer to restore with
+        // a recovery key or reset keys.
+        passphraseOnly: PropTypes.bool,
     }
 
     constructor(props) {
@@ -58,7 +61,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     _onResetRecoveryClick = () => {
         // Re-enter the access flow, but resetting storage this time around.
         this.props.onFinished(false);
-        accessSecretStorage(() => {}, /* forceReset = */ true);
+        accessSecretStorage(() => {}, {forceReset: true});
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -164,7 +167,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
                 </form>
-                {_t(
+                {this.props.passphraseOnly ? null : _t(
                     "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
                     "<button2>set up new recovery options</button2>."
@@ -234,7 +237,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
                 </form>
-                {_t(
+                {this.props.passphraseOnly ? null : _t(
                     "If you've forgotten your recovery key you can "+
                     "<button>set up new recovery options</button>."
                 , {}, {

src/components/views/elements/StyledRadioButton.tsx

@@ -29,9 +29,16 @@ export default class StyledRadioButton extends React.PureComponent<IProps, IStat
     }
 
     public render() {
-        const { children, className, ...otherProps } = this.props;
-        return <label className={classnames('mx_RadioButton', className)}>
-            <input type='radio' {...otherProps} />
+        const { children, className, disabled, ...otherProps } = this.props;
+        const _className = classnames(
+            'mx_RadioButton',
+            className,
+            {
+                "mx_RadioButton_disabled": disabled,
+                "mx_RadioButton_enabled": !disabled,
+            });
+        return <label className={_className}>
+            <input type='radio' disabled={disabled} {...otherProps} />
             {/* Used to render the radio button circle */}
             <div><div></div></div>
             <span>{children}</span>

src/components/views/settings/CrossSigningPanel.js

@@ -113,7 +113,7 @@ export default class CrossSigningPanel extends React.PureComponent {
     _bootstrapSecureSecretStorage = async (forceReset=false) => {
         this.setState({ error: null });
         try {
-            await accessSecretStorage(() => undefined, forceReset);
+            await accessSecretStorage(() => undefined, {forceReset});
         } catch (e) {
             this.setState({ error: e });
             console.error("Error bootstrapping secret storage", e);

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -103,14 +103,14 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         };
     }
 
-    private onThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
+    private onThemeChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
         const newTheme = e.target.value;
         if (this.state.theme === newTheme) return;
 
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.ACCOUNT, newTheme).catch(() => {
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
             dis.dispatch<RecheckThemePayload>({action: Action.RecheckTheme});
             this.setState({theme: oldTheme});
         });
@@ -199,17 +199,19 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     private renderThemeSection() {
         const SettingsFlag = sdk.getComponent("views.elements.SettingsFlag");
-        const LabelledToggleSwitch = sdk.getComponent("views.elements.LabelledToggleSwitch");
+        const StyledCheckbox = sdk.getComponent("views.elements.StyledCheckbox");
+        const StyledRadioButton = sdk.getComponent("views.elements.StyledRadioButton");
 
         const themeWatcher = new ThemeWatcher();
         let systemThemeSection: JSX.Element;
         if (themeWatcher.isSystemThemeSupported()) {
             systemThemeSection = <div>
-                <LabelledToggleSwitch
-                    value={this.state.useSystemTheme}
-                    label={SettingsStore.getDisplayName("use_system_theme")}
-                    onChange={this.onUseSystemThemeChanged}
-                />
+                <StyledCheckbox
+                    checked={this.state.useSystemTheme}
+                    onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
+                >
+                    {SettingsStore.getDisplayName("use_system_theme")}
+                </StyledCheckbox>
             </div>;
         }
 
@@ -256,17 +258,22 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
             <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
                 <span className="mx_SettingsTab_subheading">{_t("Theme")}</span>
                 {systemThemeSection}
-                <Field
-                    id="theme" label={_t("Theme")} element="select"
-                    value={this.state.theme} onChange={this.onThemeChange}
-                    disabled={this.state.useSystemTheme}
-                >
+                <div className="mx_ThemeSelectors" onChange={this.onThemeChange}>
                     {orderedThemes.map(theme => {
-                        return <option key={theme.id} value={theme.id}>{theme.name}</option>;
+                        return <StyledRadioButton
+                            key={theme.id}
+                            value={theme.id}
+                            name={"theme"}
+                            disabled={this.state.useSystemTheme}
+                            checked={!this.state.useSystemTheme && theme.id === this.state.theme}
+                            className={"mx_ThemeSelector_" + theme.id}
+                        >
+                            {theme.name}
+                        </StyledRadioButton>;
                     })}
-                </Field>
+                </div>
                 {customThemeForm}
-                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} />
+                <SettingsFlag name="useCompactLayout" level={SettingLevel.ACCOUNT} useCheckbox={true} />
            </div>
         );
     }
@@ -309,8 +316,11 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
 
     render() {
         return (
-            <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Appearance")}</div>
+            <div className="mx_SettingsTab mx_AppearanceUserSettingsTab">
+                <div className="mx_SettingsTab_heading">{_t("Customise your appearance")}</div>
+                <div className="mx_SettingsTab_SubHeading">
+                    {_t("Appearance Settings only affect this Riot session.")}
+                </div>
                 {this.renderThemeSection()}
                 {SettingsStore.isFeatureEnabled("feature_font_scaling") ? this.renderFontSection() : null}
             </div>