ui review feedback (other mfa options were a little too small to read)

Author: Billy Clark

dictionaries/mfa.definition.json

@@ -12,25 +12,25 @@
 		"fr": "TODO",
 		"ko": "TODO"
 	},
-	"backup_code_header": {
+	"backupcode_header": {
 		"en": "Backup code",
 		"es": "TODO",
 		"fr": "TODO",
 		"ko": "TODO"
 	},
-	"backup_code_icon": {
+	"backupcode_icon": {
 		"en": "Backup code icon",
 		"es": "TODO",
 		"fr": "TODO",
 		"ko": "TODO"
 	},
-	"backup_code_reminder": {
+	"backupcode_reminder": {
 		"en": "Each code can only be used once, so the code you enter this time will be used up and will not be available again.",
 		"es": "TODO",
 		"fr": "TODO",
 		"ko": "TODO"
 	},
-	"backup_code_input": {
+	"backupcode_input": {
 		"en": "Enter code",
 		"es": "TODO",
 		"fr": "TODO",

themes/material/mfa/other_mfas.php

@@ -16,10 +16,17 @@ function excludeSelf($others, $selfId) {
     }
 
     foreach (excludeSelf($mfaOptions, $currentMfaId) as $otherOption) {
+        $type = $otherOption['type'];
+
+        //TODO: is there an svg of the u2f icon?
+        $image = 'mfa-'.$type.($type === 'u2f' ? '.png' : '.svg');
     ?>
     <li class="mdl-menu__item" onclick="location.href += '&mfaId=<?= $otherOption['id'] ?>'">
-        <span class="mdl-typography--caption">
-            <?= $this->t('{material:mfa:use_'.$otherOption['type'].'}') ?>
+        <span class="mdl-list__item-primary-content">
+            <img class="mdl-list__item-icon" src="<?= $image ?>"
+                 alt="<?= $this->t('{material:mfa:'.$type.'_icon}') ?>">
+
+            <?= $this->t('{material:mfa:use_'.$type.'}') ?>
         </span>
     </li>
     <?php

themes/material/mfa/prompt-for-mfa-backupcode.php

@@ -26,26 +26,26 @@
             ?>
             <div class="mdl-card mdl-shadow--8dp">
                 <div class="mdl-card__media white-bg margin" layout-children="column">
-                    <img src="mfa-backup-codes.svg"
-                         alt="<?= $this->t('{material:mfa:backup_code_icon}') ?>">
+                    <img src="mfa-backupcode.svg"
+                         alt="<?= $this->t('{material:mfa:backupcode_icon}') ?>">
                 </div>
 
                 <div class="mdl-card__title center">
                     <h1 class="mdl-card__title-text">
-                        <?= $this->t('{material:mfa:backup_code_header}') ?>
+                        <?= $this->t('{material:mfa:backupcode_header}') ?>
                     </h1>
                 </div>
 
                 <div class="mdl-card__title center" >
                     <p class="mdl-card__subtitle-text">
-                        <?= $this->t('{material:mfa:backup_code_reminder}') ?>
+                        <?= $this->t('{material:mfa:backupcode_reminder}') ?>
                     </p>
                 </div>
 
                 <div class="mdl-card__supporting-text" layout-children="column">
                     <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                         <label for="mfaSubmission" class="mdl-textfield__label">
-                            <?= $this->t('{material:mfa:backup_code_input}') ?>
+                            <?= $this->t('{material:mfa:backupcode_input}') ?>
                         </label>
                         <input name="mfaSubmission" class="mdl-textfield__input" autofocus
                                id="mfaSubmission"/>

themes/material/mfa/prompt-for-mfa-totp.php

@@ -26,7 +26,7 @@
             ?>
             <div class="mdl-card mdl-shadow--8dp">
                 <div class="mdl-card__media white-bg margin" layout-children="column">
-                    <img src="mfa-totp-app.svg" alt="<?= $this->t('{material:mfa:totp_icon}') ?>">
+                    <img src="mfa-totp.svg" alt="<?= $this->t('{material:mfa:totp_icon}') ?>">
                 </div>
 
                 <div class="mdl-card__title center">