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/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