Fix jumbo sized WebAuthn logo (#1251)

* Fix jumbo sized WebAuthn logo

* Fix styling on 2FA modals

* Fix so that text does not go below image

* Rearrange items in modal and add new icons

* make spacing a little wider

* Remove 1 from mfaTypes, we now have both versions

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

src/app/accounts/two-factor-options.component.html

@@ -1,5 +1,5 @@
 <div class="modal fade" role="dialog" aria-modal="true" aria-labelledby="twoStepOptionsTitle">
-    <div class="modal-dialog modal-dialog-scrollable" role="document">
+    <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <h2 class="modal-title" id="twoStepOptionsTitle">{{'twoStepOptions' | i18n}}</h2>
@@ -8,21 +8,46 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div class="list-group list-group-flush">
-                    <a href="#" appStopClick *ngFor="let p of providers" (click)="choose(p)"
-                        class="list-group-item list-group-item-action">
-                        <img [src]="'images/two-factor/' + p.type + '.png'" alt="" class="pull-right">
-                        <h3>{{p.name}}</h3>
-                        {{p.description}}
-                    </a>
-                    <a href="#" appStopClick class="list-group-item list-group-item-action" (click)="recover()">
-                        <h3>{{'recoveryCodeTitle' | i18n}}</h3>
-                        {{'recoveryCodeDesc' | i18n}}
-                    </a>
+                <div class="list-group list-group-flush-2fa">
+                    <div *ngFor="let p of providers" class="list-group-item list-group-item-action">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{p.name}}</h3>
+                                {{p.description}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-describedby]="p.name" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="choose(p)">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="list-group-item list-group-item-action" (click)="recover()">
+                        <div class="two-factor-content">
+                            <div class="logo-col">
+                                <img class="recovery-code-img" alt="rc logo">
+                            </div>
+                            <div class="text-col">
+                                <h3>{{'recoveryCodeTitle' | i18n}}</h3>
+                                {{'recoveryCodeDesc' | i18n}}
+                            </div>
+                            <div class="btn-col">
+                                <button [attr.aria-descibedby]="'recoveryCodeTitle' | i18n" type="button"
+                                    class="btn btn-outline-secondary btn-sm" (click)="recover()">
+                                    {{'select' | i18n}}
+                                </button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' |
+                    i18n}}</button>
             </div>
         </div>
     </div>

src/scss/forms.scss

@@ -160,9 +160,33 @@ input[type="radio"], input[type="checkbox"] {
     @include themify($themes) {
         background-color: themed('foregroundColor');
         border-color: themed('listItemBorder');
-        color: themed('listItemColor');
-        font-weight: themed('linkWeight');
+        color: themed('textColor');
     }
+    >.two-factor-content {
+        justify-content: center;
+        flex-direction: row;
+        display: flex;
+        >.text-col {
+            flex-direction: column;
+            flex: 1;
+        }
+        >.logo-col {
+            min-width: 100px; 
+            margin-right: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            img {
+                height: fit-content;
+            }
+        }
+        >.btn-col {
+            width: 85px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }      
 }
 
 .list-group-item.active {

src/scss/modals.scss

@@ -52,6 +52,20 @@
     }
 }
 
+.modal .list-group-flush-2fa {
+    div {
+        border-left: none;
+        border-right: none;
+    }
+    div:first-child {
+        border-top: none;
+    }
+    
+    div:last-child {
+        border-bottom: none;
+    }
+}
+
 .modal-footer {
     border-radius: 0.3rem 0.3rem 0 0;
     justify-content: flex-start;

src/scss/plugins.scss

@@ -43,6 +43,14 @@
     }
 }
 
+.mfaType1 {
+    @include themify($themes) {
+        content: url('../images/two-factor/1' + themed('mfaLogoSuffix'));
+        max-width: 100px;
+        max-height: 45px;
+    }
+}
+
 .mfaType7 {
     @include themify($themes) {
         content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
@@ -50,6 +58,14 @@
     }
 }
 
+.recovery-code-img {
+    @include themify($themes) {
+        content: url('../images/two-factor/rc' + themed('mfaLogoSuffix'));
+        max-width: 100px;
+        max-height: 45px; 
+    }
+}
+
 .progress {
     @include themify($themes) {
         background-color: themed('pwStrengthBackground');

src/scss/variables.scss

@@ -79,7 +79,7 @@ $fa-font-path: "~font-awesome/fonts";
 
 // MFA Types for logo styling with no dark theme alternative
 
-$mfaTypes: 0, 1, 2, 3, 4, 6;
+$mfaTypes: 0, 2, 3, 4, 6;
 
 // Theme Variables