Further Dark Theme QA Fixes (#1217)

* Add webAuthn logo for dark theme

* Add alt tags to 2FA logo images

src/app/settings/two-factor-authenticator.component.html

@@ -16,7 +16,7 @@
             <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate *ngIf="authed">
                 <div class="modal-body">
                     <ng-container *ngIf="!enabled">
-                        <img src="../../images/two-factor/0.png" class="float-right" alt="">
+                        <img class="float-right mfaType0" alt="Authenticator app logo">
                         <p>{{'twoStepAuthenticatorDesc' | i18n}}</p>
                         <p>
                             <strong>1. {{'twoStepAuthenticatorDownloadApp' | i18n}}</strong>
@@ -27,7 +27,7 @@
                             <p>{{'twoStepLoginProviderEnabled' | i18n}}</p>
                             {{'twoStepAuthenticatorReaddDesc' | i18n}}
                         </app-callout>
-                        <img src="../../images/two-factor/0.png" class="float-right" alt="">
+                        <img class="float-right mfaType0" alt="Authenticator app logo">
                         <p>{{'twoStepAuthenticatorNeedApp' | i18n}}</p>
                     </ng-container>
                     <ul class="fa-ul">

src/app/settings/two-factor-duo.component.html

@@ -20,7 +20,7 @@
                         <app-callout type="success" title="{{'enabled' | i18n}}" icon="fa-check-circle">
                             {{'twoStepLoginProviderEnabled' | i18n}}
                         </app-callout>
-                        <img src="../../images/two-factor/2.png" class="float-right ml-3" alt="">
+                        <img class="float-right ml-3 mfaType2" alt="Duo logo">
                         <strong>{{'twoFactorDuoIntegrationKey' | i18n}}:</strong> {{ikey}}
                         <br>
                         <strong>{{'twoFactorDuoSecretKey' | i18n}}:</strong> {{skey}}
@@ -28,7 +28,7 @@
                         <strong>{{'twoFactorDuoApiHostname' | i18n}}:</strong> {{host}}
                     </ng-container>
                     <ng-container *ngIf="!enabled">
-                        <img src="../../images/two-factor/2.png" class="float-right ml-3" alt="">
+                        <img class="float-right ml-3 mfaType2" alt="Duo logo">
                         <p>{{'twoFactorDuoDesc' | i18n}}</p>
                         <div class="form-group">
                             <label for="ikey">{{'twoFactorDuoIntegrationKey' | i18n}}</label>

src/app/settings/two-factor-email.component.html

@@ -24,7 +24,7 @@
                     <ng-container *ngIf="!enabled">
                         <p class="d-flex">
                             <span class="mr-3">{{'twoFactorEmailDesc' | i18n}}</span>
-                            <img src="../../images/two-factor/1.png" class="float-right ml-auto" alt="">
+                            <img class="float-right ml-auto mfaType1" alt="Email logo">
                         </p>
                         <div class="form-group">
                             <label for="email">1. {{'twoFactorEmailEnterEmail' | i18n}}</label>

src/app/settings/two-factor-setup.component.html

@@ -21,7 +21,7 @@
 <ul class="list-group list-group-2fa">
     <li *ngFor="let p of providers" class="list-group-item d-flex align-items-center">
         <div class="logo-2fa d-flex justify-content-center">
-            <img [src]="'images/two-factor/' + p.type + '.png'" alt="">
+            <img [class]="'mfaType' + p.type" [alt]="p.name + ' logo'">
         </div>
         <div class="mx-4">
             <h3 class="mb-0">

src/app/settings/two-factor-webauthn.component.html

@@ -24,7 +24,7 @@
                             <li>{{'twoFactorWebAuthnSupportWeb' | i18n}}</li>
                         </ul>
                     </app-callout>
-                    <img src="../../images/two-factor/7.png" class="float-right ml-5" alt="">
+                    <img class="float-right ml-5 mfaType7" alt="FIDO2 WebAuthn logo'">
                     <ul class="fa-ul">
                         <li *ngFor="let k of keys; let i = index" #removeKeyBtn [appApiAction]="k.removePromise">
                             <i class="fa-li fa fa-key"></i>

src/app/settings/two-factor-yubikey.component.html

@@ -26,7 +26,7 @@
                             <li>{{'twoFactorYubikeySupportMobile' | i18n}}</li>
                         </ul>
                     </app-callout>
-                    <img src="../../images/two-factor/3.png" class="float-right" alt="">
+                    <img class="float-right mfaType3" alt="YubiKey OTP security key logo">
                     <p>{{'twoFactorYubikeyAdd' | i18n}}:</p>
                     <ol>
                         <li>{{'twoFactorYubikeyPlugIn' | i18n}}</li>

src/scss/plugins.scss

@@ -36,6 +36,20 @@
     }
 }
 
+@each $mfaType in $mfaTypes {
+    .mfaType#{$mfaType} {
+        content: url('../images/two-factor/' + $mfaType + '.png');
+        max-width: 100px;
+    }
+}
+
+.mfaType7 {
+    @include themify($themes) {
+        content: url('../images/two-factor/7' + themed('mfaLogoSuffix'));
+        max-width: 100px;
+    }
+}
+
 .progress {
     @include themify($themes) {
         background-color: themed('pwStrengthBackground');

src/scss/tables.scss

@@ -10,12 +10,14 @@
         }
 
         & > a {
-            @include themify($themes) {
+            &:not(.badge) {
-                color: themed('tableLinkColor');
-            }
-            &:hover {
                 @include themify($themes) {
-                    color: themed('tableLinkColorHover');
+                    color: themed('tableLinkColor');
+                }
+                &:hover {
+                    @include themify($themes) {
+                        color: themed('tableLinkColorHover');
+                    }
                 }
             }
         }

src/scss/variables.scss

@@ -77,6 +77,10 @@ $border-color: $secondary;
 
 $fa-font-path: "~font-awesome/fonts";
 
+// MFA Types for logo styling with no dark theme alternative
+
+$mfaTypes: 0, 1, 2, 3, 4, 6;
+
 // Theme Variables
 
 $lightDangerHover: #C43421;
@@ -216,6 +220,7 @@ $themes: (
         tableRowHover: rgba(0,0,0,0.03),
         tableSeparator: #DEE2E6,
         browserInputIconsFilter: invert(0),
+        mfaLogoSuffix: '.png'
     ),
     dark: (
         logoSuffix: 'white',
@@ -331,6 +336,7 @@ $themes: (
         tableRowHover: rgba(255, 255, 255, 0.03),
         tableSeparator: $darkBlue1,
         browserInputIconsFilter: invert(1),
+        mfaLogoSuffix: '-w.png'
     ),
 );