Convert icons to masks

so they're a sensible colour in other themes

Author: dbkr

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 {

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}
                 >
                     <div className="mx_CreateSecretStorageDialog_optionTitle">
-                        <img className="mx_CreateSecretStorageDialog_optionIcon"
-                            src={require("../../../../../res/img/feather-customised/secure-backup.svg")}
-                        />
+                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_secureBackup"></span>
                         {_t("Generate a Security Key")}
                     </div>
                     <div>{_t("We’ll generate a Security Key for you to store somewhere safe, like a password manager or a safe.")}</div>
@@ -460,9 +458,7 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
                     checked={this.state.passPhraseKeySelected === CREATE_STORAGE_OPTION_PASSPHRASE}
                 >
                     <div className="mx_CreateSecretStorageDialog_optionTitle">
-                        <img className="mx_CreateSecretStorageDialog_optionIcon"
-                            src={require("../../../../../res/img/feather-customised/secure-phrase.svg")}
-                        />
+                        <span className="mx_CreateSecretStorageDialog_optionIcon mx_CreateSecretStorageDialog_optionIcon_securePhrase"></span>
                         {_t("Enter a Security Phrase")}
                     </div>
                     <div>{_t("Use a secret phrase only you know, and optionally save a Security Key to use for backup.")}</div>
@@ -781,28 +777,25 @@ 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 (
             <BaseDialog className='mx_CreateSecretStorageDialog'
                 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}
             >

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() {