From d4b13c461df483c4c43f4a1532b0db42e8b26ac4 Mon Sep 17 00:00:00 2001 From: Danny Murphy Date: Thu, 7 Oct 2021 23:47:32 +0100 Subject: [PATCH] Further Dark Theme QA Fixes (#1217) * Add webAuthn logo for dark theme * Add alt tags to 2FA logo images --- .../two-factor-authenticator.component.html | 4 ++-- .../settings/two-factor-duo.component.html | 4 ++-- .../settings/two-factor-email.component.html | 2 +- .../settings/two-factor-setup.component.html | 2 +- .../two-factor-webauthn.component.html | 2 +- .../two-factor-yubikey.component.html | 2 +- src/images/two-factor/7-w.png | Bin 0 -> 3340 bytes src/images/two-factor/7.png | Bin 1620 -> 3513 bytes src/scss/plugins.scss | 14 ++++++++++++++ src/scss/tables.scss | 12 +++++++----- src/scss/variables.scss | 6 ++++++ 11 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 src/images/two-factor/7-w.png diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html index 7393fbfa2b..4bbdf00d38 100644 --- a/src/app/settings/two-factor-authenticator.component.html +++ b/src/app/settings/two-factor-authenticator.component.html @@ -16,7 +16,7 @@
- + Authenticator app logo

{{'twoStepAuthenticatorDesc' | i18n}}

1. {{'twoStepAuthenticatorDownloadApp' | i18n}} @@ -27,7 +27,7 @@

{{'twoStepLoginProviderEnabled' | i18n}}

{{'twoStepAuthenticatorReaddDesc' | i18n}} - + Authenticator app logo

{{'twoStepAuthenticatorNeedApp' | i18n}}
    diff --git a/src/app/settings/two-factor-duo.component.html b/src/app/settings/two-factor-duo.component.html index b911270331..baa5fe07a8 100644 --- a/src/app/settings/two-factor-duo.component.html +++ b/src/app/settings/two-factor-duo.component.html @@ -20,7 +20,7 @@ {{'twoStepLoginProviderEnabled' | i18n}} - + Duo logo {{'twoFactorDuoIntegrationKey' | i18n}}: {{ikey}}
    {{'twoFactorDuoSecretKey' | i18n}}: {{skey}} @@ -28,7 +28,7 @@ {{'twoFactorDuoApiHostname' | i18n}}: {{host}} - + Duo logo

    {{'twoFactorDuoDesc' | i18n}}

    diff --git a/src/app/settings/two-factor-email.component.html b/src/app/settings/two-factor-email.component.html index 9e6c78de3a..424c8ff64c 100644 --- a/src/app/settings/two-factor-email.component.html +++ b/src/app/settings/two-factor-email.component.html @@ -24,7 +24,7 @@

    {{'twoFactorEmailDesc' | i18n}} - + Email logo

    diff --git a/src/app/settings/two-factor-setup.component.html b/src/app/settings/two-factor-setup.component.html index 04fe750e13..f7a5d871ab 100644 --- a/src/app/settings/two-factor-setup.component.html +++ b/src/app/settings/two-factor-setup.component.html @@ -21,7 +21,7 @@
    • - +

      diff --git a/src/app/settings/two-factor-webauthn.component.html b/src/app/settings/two-factor-webauthn.component.html index 69f68114b8..e887afce75 100644 --- a/src/app/settings/two-factor-webauthn.component.html +++ b/src/app/settings/two-factor-webauthn.component.html @@ -24,7 +24,7 @@
    • {{'twoFactorWebAuthnSupportWeb' | i18n}}

    - + FIDO2 WebAuthn logo'
    • diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html index 70675be857..b94dc68a23 100644 --- a/src/app/settings/two-factor-yubikey.component.html +++ b/src/app/settings/two-factor-yubikey.component.html @@ -26,7 +26,7 @@
    • {{'twoFactorYubikeySupportMobile' | i18n}}
    - + YubiKey OTP security key logo

    {{'twoFactorYubikeyAdd' | i18n}}:

    1. {{'twoFactorYubikeyPlugIn' | i18n}}
      2. diff --git a/src/images/two-factor/7-w.png b/src/images/two-factor/7-w.png new file mode 100644 index 0000000000000000000000000000000000000000..1620ff76674d1eeb493b1e20a769b63b3713dfdb GIT binary patch literal 3340 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 GBL544P@OFR literal 0 HcmV?d00001 diff --git a/src/images/two-factor/7.png b/src/images/two-factor/7.png index 7098e4c76843820c156cc6045ab73c113bd161ea..d998ae664dbfd81697b52dc389f212f2c74830bf 100644 GIT binary patch literal 3513 zcmb_fcQ70b^S;AzCwlKr@4ZJmLUb=j98QVu^cr0dHBnAYh~7m>^cK8&2|-TpQQ{@~ zMGf)un|J2>^ZVl{ zLZ3$%e2gnpZ!7nN=_V`mFx^$-UK8SvA$Fy(Kl7*r?6zoq$yTzFO&E^FL7p(N^b?JlQLlrwmc`k1NfC!+areYkpbeM+}CiU3bIYk>gS=MRHQo!c)^kWSsx+QcoO*!^CbEIAasTvJ-Pu5oRj zc_&|%Lg$d#FZj`jBt+yc+j(@t@aYuS>**gU1OvZ3DCH1PMA1qIpLIaCfjuel04Zb0 zE@5fHYOtY4a`CO=%*C;U0t@<9L~X4it;$KY?Yw<{Cu^B2%JWq+!N3sg=u!^*bjh zI$i-OA`5qvHGR*gfh#_*3H9I7jU-!q%v00F{nQK?Vtisul}y07gSRy73ra(``Kt+k z&b8;?oG1bAxvD_TAF4-If|Hrb_`Stt#-<|-80`y2zyHQDY_O&ECZ{W78%trX^^t@| zx9uGum4lq1YVmlwaaP2M;v8csd9FLoFc#)=u1PBJ_c=$8W=V}e~C+r_jwIRrDWk84rLD)v!-zsq#8b)-(#>A}1A67nQ?VfL601m{abIMZLJ zf?mE&Hkj(ik~nhCxR)4xEWUi?>HBQu{%_L8>zxQtn&<4P1maDNF4^hP!NrmNDBBtX zPOBAwM_Zjd5Uu7wXhB;hZihXRSA`}~*>O7zn_@F&)t;I8y!&p(xSkhWamY_Hr7ej* zbr7}m{h*sC9900JmRbZidQoNe(mr>LJadMdQn=7`P6fhopuEHuQ;mJ@WbV3;PDcZP z#VHF)A{J2Rp$lQ7dN`znOAzj^W*>^0Lbs@WBX3}C%WQ}Jq7PM9rJ^uKG1~}|uU`jz5E&37|*&G z8eRh-^s74gLV)w_kdT&%oKB@7ng6TX8c1{Mt9ImqLTkPQ-i)M_t8{f#{a9FJy!;p+ z^K4GcN|dRR6cDY>-w~zco@lSMB=+B{8vJfL7q|Swy640 z;Y@;ko{&pZrQ$1WE#1~PdZX3&Ek@fIw*`>91=)zDSh*TP7*Z?kEncimkw-;WUy>?n zO-zcn*pk%ssSAZm6aP4|9;EmRw={e!$l@*;DQvK()*rA?f?r!nf&%ebZO!v+;ZfNi@pG$K;ZZ`B}SDJ{E zm=roOF*pB(vMTXoE{K(=(=W+T=F{IYW#L$y0cAQ(e{-LdH;MBp8{Ld?uSx%~R5h>@ znh?^6)k&jsgIl${$W-x4K@vGJ~!w`=o;M~DGRD@~JB`B*JK z%4W<@z&Sq7aIaK_ZI|E2R*tnhL5L#?m%vLN4yP)b_iYKYjF^Twlv^5XoO2n4|%gn*1#?Zph|F zJUmB_9}0i;cn}vyOqLRYTOT-0W#{x^VDVH|lNAY8zdXM;O#0aK+I;!&dJA~w=`GM{2%Gh+nVk!2_Q_giLEMi`IerEcM_Wn$1~n`|G{Xp> zHSF}ev42IC_}WC$)zt_4iv%LO@9I6Qv#h%Xdph24F3X54jBRPd0Gh*)b)Psqigk!) z00Fd;zq*ATb)F)S8U<4lDnR6K_hTAUEu~6tE&klr1JABe)y}o`8NhU@Wnlb^$FL^m z2(-wqn=?b`ut=r3og1I!)YOuxVpvdk@QsHjb^Koi-7jB6eilXyxov&76y&%_nW&Zr z6tQ64BBo*>(mRd+Utx3!zlXu5K*S~IW{-Mv>lU}P0yE>VdX6AeT)1HtfrA_ZS zG=PUB`o&LJW*v{5N`ps0A430~wD9k)bMDl*n#eX)yVyMR>jHvV%i2K94K4~Gk`19HpwT`4`63=U^d@#BY z8E2Inie8Y^E&w(i|DmQG`SMg}yrP)7pVzEh%G5KRN?vE6I)!UGLGOwzvgc@DFFA(y zp>N~MT2R%qtx%LB^jo)e?xTkzQYS#&IE9!pZ(^vCPE@Mp?HHOf5j}h3755L$pg*Nj zRn;#Q;AJJOIEph`h{4wy4!<^BxEZbcog3Ai%IX0cbe}s$D~r<;)&Io6#Ph zJ~lK8NI2n=>*&K9{w&#SRahCmBXXDzdAi&cRp+@9%`FRWo$# zhceBoM2bo;vSG*Z9*H7#?VaKJW_ixZp>0PS(Ghgtngf`*f2LEXjBKgce7#6(LGjCf z9jVXPsw4z9C;F(u6cX}YuHCBmEM-Y!3YVPtI)QAgJl*~HY&)%iBb#%0c~s~k$@Qg! z%Y-Y;SaVi9!R{w1glH4FWb};!9vOQk*9)%KSXPh1Tq?9)%UW8F!{WZ%3N}t*$2rI7 zE65B_*h4Wx_wXHunWb4hOgfGZ1>9GD@D|YwcP5sz&1+2 zX2*Gx-$YFCD~r)-O>>z8h~*P(j=ZhJbDjO2>J2fD)#I9&yYSVi9$PBo0!Eo$tk@w{ z6A3F$N?gUlZ$9GfvEMQLzrUNOoE!`1dV1qE`$!Zi4>0Iuw3ZwVVq}Vxz$F!9Kbw&~ zIy^tdY>;e5Yo?t-a4aYwz{gd#`hoBL(eKR*#3Qc~oFDf7aY&{Gg!8Czv=IxJ&et z=GdM#4;|9cYT{_)9uaHalr~3>CMlaC>NPse`fH$PWWtiPRSu2mh;*H6-3^82B^Zaz zL5&7GWV5K-XqKoRIz+Q%@QG=&6!(kJ)7IDDxhwQE9yg0xway#T=Fx>FIc~4`ducN` zv>v)d$BC{Ff2{)KfHtv9(pIw0ctfEzu#0a`TgiOmBZl-&6wQOIYt-O($n(ZqG-=KG zYkf1)RtQWPt~O49m!@LF!9C=cY+IQvhX`~&0Ubu2rLcfBy{4amR8Af+9wQDyjiG9@ z;9JvHveI^4Lt$$uW^kD;M>Ik}`ueZiFXqS0jOk~*e>l!$2lqk@-z|>IMH5poSz|m0 z95&qS()d$MJQ(=y_(9~yRrhe`90`VNBjZiX5SP7+jE}EYnr}3jmvAXrGD~?;5|%=_hD09u#4~4$(BdKRIfnJC{Wf$UrK#vqUYTWg>tfIkdI* zR>U~2z*0-BAR8xn?lgJ$s8sjp*G~XIf|doDZ?u+bl5pI=AA0Indf4BhwX*h}(37sS zefUU)Mi66(qM&H+S{t$~3?E~p9 zCf?qpn)EQ|$NimyYCn>8*TteCUsd9df9=*>K(_6kgHhS#F3Kt=g|;>_l~ERl;x7RWAl(G{tfP!$gNiN=ap%iki987U`|G=6^_ z2p+i6K<3bqq9!2b@Xyj#z`N=z{tZ$rZOc9c<3-Mwj+rre-{SSlcAl_saKW54OZIR5 zcG{KqZJ2k_#m}x-aLo%_c3%42f2y~Y=KD1EXVHZy5(7S8J zJSZ5Bv0T)=H^0(Uy<5Bpe@a4v&HWUAUvR{QQd`bLhnM3kxAk}aW^z4HJvxF8vvHcp z?PF~|*G+m}yXzYO%F0s6=-@ytEIyuc(3oyLk1Mdc&{!OZP8`57hv7NcoWWV<^s_~L z2h@!Bv7k&>8DjmR!!Vq+f%y4<=&b2Kkd7otl79gXD>r$m5~#-j3jhEBNkvXXu0mjf D?&==k diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss index fd953646c1..7c911499c1 100644 --- a/src/scss/plugins.scss +++ b/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'); diff --git a/src/scss/tables.scss b/src/scss/tables.scss index b796cfdee3..6b9cf59d6f 100644 --- a/src/scss/tables.scss +++ b/src/scss/tables.scss @@ -10,12 +10,14 @@ } & > a { - @include themify($themes) { - color: themed('tableLinkColor'); - } - &:hover { + &:not(.badge) { @include themify($themes) { - color: themed('tableLinkColorHover'); + color: themed('tableLinkColor'); + } + &:hover { + @include themify($themes) { + color: themed('tableLinkColorHover'); + } } } } diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 8e375a4eb1..9e6e264c35 100644 --- a/src/scss/variables.scss +++ b/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' ), );