diff --git a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
index c591973c94..b073bac93c 100644
--- a/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
+++ b/res/css/views/dialogs/secretstorage/_CreateSecretStorageDialog.scss
@@ -48,6 +48,25 @@ limitations under the License.
margin-bottom: 1em;
}
+.mx_CreateSecretStorageDialog_titleWithIcon::before {
+ content: '';
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ margin-right: 8px;
+ position: relative;
+ top: 5px;
+ background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_secureBackupTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
+}
+
+.mx_CreateSecretStorageDialog_securePhraseTitle::before {
+ mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
.mx_CreateSecretStorageDialog_centeredTitle, .mx_CreateSecretStorageDialog_centeredBody {
text-align: center;
}
@@ -75,10 +94,21 @@ limitations under the License.
}
.mx_CreateSecretStorageDialog_optionIcon {
+ display: inline-block;
width: 24px;
+ height: 24px;
margin-right: 8px;
position: relative;
top: 5px;
+ background-color: $primary-fg-color;
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_securePhrase {
+ mask-image: url('$(res)/img/feather-customised/secure-phrase.svg');
+}
+
+.mx_CreateSecretStorageDialog_optionIcon_secureBackup {
+ mask-image: url('$(res)/img/feather-customised/secure-backup.svg');
}
.mx_CreateSecretStorageDialog_passPhraseContainer {
diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index bd751f7e74..ebef30ad1f 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -446,9 +446,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_KEY}
>
-
})
+
{_t("Generate a Security Key")}
{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}
@@ -460,9 +458,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
>
-
})
+
{_t("Enter a Security Phrase")}
{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}
@@ -781,20 +777,18 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
}
}
- let headerImage = null;
+ let titleClass = null;
switch (this.state.phase) {
case PHASE_PASSPHRASE:
case PHASE_PASSPHRASE_CONFIRM:
- headerImage = require("../../../../../res/img/feather-customised/secure-phrase.svg");
+ titleClass = ['mx_CreateSecretStorageDialog_titleWithIcon', 'mx_CreateSecretStorageDialog_securePhraseTitle'];
break;
case PHASE_SHOWKEY:
- headerImage = require("../../../../../res/img/feather-customised/secure-backup.svg");
+ titleClass = ['mx_CreateSecretStorageDialog_titleWithIcon', 'mx_CreateSecretStorageDialog_secureBackupTitle'];
+ break;
+ case PHASE_CHOOSE_KEY_PASSPHRASE:
+ titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
break;
- }
-
- let titleClass = null;
- if (this.state.phase === PHASE_CHOOSE_KEY_PASSPHRASE) {
- titleClass = 'mx_CreateSecretStorageDialog_centeredTitle';
}
return (
@@ -802,7 +796,6 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
onFinished={this.props.onFinished}
title={this._titleForPhase(this.state.phase)}
titleClass={titleClass}
- headerImage={headerImage}
hasCancel={this.props.hasCancel && [PHASE_PASSPHRASE].includes(this.state.phase)}
fixedWidth={false}
>
diff --git a/src/components/views/dialogs/BaseDialog.js b/src/components/views/dialogs/BaseDialog.js
index e59b6bbaf5..353298032c 100644
--- a/src/components/views/dialogs/BaseDialog.js
+++ b/src/components/views/dialogs/BaseDialog.js
@@ -75,8 +75,12 @@ export default createReactClass({
// If provided, this is used to add a aria-describedby attribute
contentId: PropTypes.string,
- // optional additional class for the title element
- titleClass: PropTypes.string,
+ // optional additional class for the title element (basically anything that can be passed to classnames)
+ titleClass: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.object,
+ PropTypes.arrayOf(PropTypes.string),
+ ]),
},
getDefaultProps: function() {