From e9666458c483d4b895e01b241d0207e6047fb00c Mon Sep 17 00:00:00 2001
From: Linus Aarnio <42450444+linusaarnio@users.noreply.github.com>
Date: Thu, 16 Dec 2021 18:41:37 +0100
Subject: [PATCH] Select an image to display for credit cards based on the
 brand. (#537)

Co-authored-by: Hinton <oscar@oscarhinton.com>
---
 angular/src/components/icon.component.ts      |  23 +++++++++
 angular/src/images/cards/amex-dark.png        | Bin 0 -> 773 bytes
 angular/src/images/cards/amex-light.png       | Bin 0 -> 773 bytes
 angular/src/images/cards/diners_club-dark.png | Bin 0 -> 783 bytes
 .../src/images/cards/diners_club-light.png    | Bin 0 -> 713 bytes
 angular/src/images/cards/discover-dark.png    | Bin 0 -> 808 bytes
 angular/src/images/cards/discover-light.png   | Bin 0 -> 830 bytes
 angular/src/images/cards/jcb-dark.png         | Bin 0 -> 836 bytes
 angular/src/images/cards/jcb-light.png        | Bin 0 -> 798 bytes
 angular/src/images/cards/maestro-dark.png     | Bin 0 -> 752 bytes
 angular/src/images/cards/maestro-light.png    | Bin 0 -> 820 bytes
 angular/src/images/cards/mastercard-dark.png  | Bin 0 -> 737 bytes
 angular/src/images/cards/mastercard-light.png | Bin 0 -> 757 bytes
 angular/src/images/cards/union_pay-dark.png   | Bin 0 -> 1255 bytes
 angular/src/images/cards/union_pay-light.png  | Bin 0 -> 1245 bytes
 angular/src/images/cards/visa-dark.png        | Bin 0 -> 548 bytes
 angular/src/images/cards/visa-light.png       | Bin 0 -> 590 bytes
 angular/src/scss/icons.scss                   |  44 ++++++++++++++++++
 18 files changed, 67 insertions(+)
 create mode 100644 angular/src/images/cards/amex-dark.png
 create mode 100644 angular/src/images/cards/amex-light.png
 create mode 100644 angular/src/images/cards/diners_club-dark.png
 create mode 100644 angular/src/images/cards/diners_club-light.png
 create mode 100644 angular/src/images/cards/discover-dark.png
 create mode 100644 angular/src/images/cards/discover-light.png
 create mode 100644 angular/src/images/cards/jcb-dark.png
 create mode 100644 angular/src/images/cards/jcb-light.png
 create mode 100644 angular/src/images/cards/maestro-dark.png
 create mode 100644 angular/src/images/cards/maestro-light.png
 create mode 100644 angular/src/images/cards/mastercard-dark.png
 create mode 100644 angular/src/images/cards/mastercard-light.png
 create mode 100644 angular/src/images/cards/union_pay-dark.png
 create mode 100644 angular/src/images/cards/union_pay-light.png
 create mode 100644 angular/src/images/cards/visa-dark.png
 create mode 100644 angular/src/images/cards/visa-light.png
 create mode 100644 angular/src/scss/icons.scss

diff --git a/angular/src/components/icon.component.ts b/angular/src/components/icon.component.ts
index a32948cbae1..d30ce20e8ca 100644
--- a/angular/src/components/icon.component.ts
+++ b/angular/src/components/icon.component.ts
@@ -18,6 +18,21 @@ const IconMap: any = {
   "fa-apple": String.fromCharCode(0xf179),
 };
 
+/**
+ * Provides a mapping from supported card brands to
+ * the filenames of icon that should be present in images/cards folder of clients.
+ */
+const cardIcons: Record<string, string> = {
+  Visa: "card-visa",
+  Mastercard: "card-mastercard",
+  Amex: "card-amex",
+  Discover: "card-discover",
+  "Diners Club": "card-diners-club",
+  JCB: "card-jcb",
+  Maestro: "card-maestro",
+  UnionPay: "card-union-pay",
+};
+
 @Component({
   selector: "app-vault-icon",
   templateUrl: "icon.component.html",
@@ -59,6 +74,7 @@ export class IconComponent implements OnChanges {
         break;
       case CipherType.Card:
         this.icon = "fa-credit-card";
+        this.setCardIcon();
         break;
       case CipherType.Identity:
         this.icon = "fa-id-card-o";
@@ -102,4 +118,11 @@ export class IconComponent implements OnChanges {
       this.image = null;
     }
   }
+
+  private setCardIcon() {
+    const brand = this.cipher.card.brand;
+    if (this.imageEnabled && brand in cardIcons) {
+      this.icon = "credit-card-icon " + cardIcons[brand];
+    }
+  }
 }
diff --git a/angular/src/images/cards/amex-dark.png b/angular/src/images/cards/amex-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac1b075975dbcdcd2f24465c3718497d2999758f
GIT binary patch
literal 773
zcmV+g1N!`lP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001HP)t-s00000
zan1m7&H!-F0C3L$an1m7&j4`E0CLX&an6~>>;Q4j|NsABrr;oh)PT6=-|hK8l-j@C
z^B{uM5PH$?_WYp9?Vrl*&*b(ni`Rd+=Wws&kiqG%)9_H8-A|p}&*k-x!0H5^x&i<I
z01I?dPE!EizaU`mpFoe#P&hBtrvLx~LrFwIR9M5k*V&TVFc1Y$!E8x%W$nhSN&f#Q
zV|BX?Ayb1!QO$h-+Abfo+GSPpynWH_`TqK*C{J7czxhVaM(Zxp>~zSRde&X?s<wTg
zjnbX+rI3*%t@q{{uXS1rRpCHlwYIn>-=3?091tkTsX)KDa=@Si@{V$T40&LuDFL=X
zo~sLB;(Bg)3<Y2>WWIq?#>oIbYoQ2)YbQNHoD-%APS-*sVC1(&xPd(8>}sJ1{!<gV
zH-VwV4WyzDGE0Ld%S~FY^@%G-O{;+%+`!{pE=?<Rq>6eLZ3SeOQ5b<EO`$-6Dw@w@
z4Kx7*j}*_H7l;W*jb^B7F(%$=bAmvY4%5#HXaxKnEl@61u}6U_7o#M@i^s_VRW3$}
z73d_>@feB@j=lru%v)@Ma^kHhP{m>#!QtLmhL-IbQ2{yRfxkICV1qz`*b2x1&dwRJ
z=2YsF94mz@VmbH$6!4j-59YoTlp@CgcU|UB5q4A_lzx<dpzwQHP?R$}Xn}CJN)xT7
zBkG|vNCFmV1l%CqtcDD(5ouz_1DF~izRe|a_PMmI8roY4OJ-dr<miUMhDfrrX(zQq
zj;k~HN!$)yxJnb?KLhzuayLfFA<s=}nl*9ap6)9SF1A8Pa$Jt9)U-ulWpo@%8LkPk
z^6;Fcw5-V%h@Bm<o8)=r>!9JU82UT_QyCqMTvkEvXG)qRPCMiV9_MQ4V&2c}khGNQ
zMfZu?_JW@KI8k+KlIiqLyZNEINZTjX;k|!D@BM!O8;ZSS7+?&300000NkvXXu0mjf
D##w7Z

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/amex-light.png b/angular/src/images/cards/amex-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..ac1b075975dbcdcd2f24465c3718497d2999758f
GIT binary patch
literal 773
zcmV+g1N!`lP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001HP)t-s00000
zan1m7&H!-F0C3L$an1m7&j4`E0CLX&an6~>>;Q4j|NsABrr;oh)PT6=-|hK8l-j@C
z^B{uM5PH$?_WYp9?Vrl*&*b(ni`Rd+=Wws&kiqG%)9_H8-A|p}&*k-x!0H5^x&i<I
z01I?dPE!EizaU`mpFoe#P&hBtrvLx~LrFwIR9M5k*V&TVFc1Y$!E8x%W$nhSN&f#Q
zV|BX?Ayb1!QO$h-+Abfo+GSPpynWH_`TqK*C{J7czxhVaM(Zxp>~zSRde&X?s<wTg
zjnbX+rI3*%t@q{{uXS1rRpCHlwYIn>-=3?091tkTsX)KDa=@Si@{V$T40&LuDFL=X
zo~sLB;(Bg)3<Y2>WWIq?#>oIbYoQ2)YbQNHoD-%APS-*sVC1(&xPd(8>}sJ1{!<gV
zH-VwV4WyzDGE0Ld%S~FY^@%G-O{;+%+`!{pE=?<Rq>6eLZ3SeOQ5b<EO`$-6Dw@w@
z4Kx7*j}*_H7l;W*jb^B7F(%$=bAmvY4%5#HXaxKnEl@61u}6U_7o#M@i^s_VRW3$}
z73d_>@feB@j=lru%v)@Ma^kHhP{m>#!QtLmhL-IbQ2{yRfxkICV1qz`*b2x1&dwRJ
z=2YsF94mz@VmbH$6!4j-59YoTlp@CgcU|UB5q4A_lzx<dpzwQHP?R$}Xn}CJN)xT7
zBkG|vNCFmV1l%CqtcDD(5ouz_1DF~izRe|a_PMmI8roY4OJ-dr<miUMhDfrrX(zQq
zj;k~HN!$)yxJnb?KLhzuayLfFA<s=}nl*9ap6)9SF1A8Pa$Jt9)U-ulWpo@%8LkPk
z^6;Fcw5-V%h@Bm<o8)=r>!9JU82UT_QyCqMTvkEvXG)qRPCMiV9_MQ4V&2c}khGNQ
zMfZu?_JW@KI8k+KlIiqLyZNEINZTjX;k|!D@BM!O8;ZSS7+?&300000NkvXXu0mjf
D##w7Z

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/diners_club-dark.png b/angular/src/images/cards/diners_club-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5d23233eb868ab2853671392b7aabcd55d6a0b9
GIT binary patch
literal 783
zcmV+q1MvKbP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001%P)t-s0000l
zGd(XfJufsoE;2nZFhDLeJTNdoFfceUG(0XeJ})#q2YJ5#|Nr3c_asGLCW^-I_xoh4
z))#@olEmW}TZO^h?+kFR8&!KOI7On(<`HO~gS_7kY^KrX^F^A@33Rp~PHieYO>?x`
z5oetiUye1B%E8|6qRi)myxvu!(kDSxqRr<vlgbu>!V_ec7GI5Yv)ZT^<?a9g01I?d
zPE!Ei&%a*~fFK}%e^WtB#sB~U9Z5t%R9M69*X?ebFcb!0Hy_;x2W$)kNPqxo(k0p2
z?*4CXOn96#3^o-=lcv6ZA}7kju?@CijBUTJomp9J*zbILaAxP>a|59>N7}NDvq&D<
zY8hzFoQ3iM&45xKy~ZVA%KSCq?}m8P7{NtKc{>I~i_i6Yp!(1#+0IodLP0E~tWZ*d
zXcU@ngo>+)Py~><S~9>Slb|yxho%sudlR4tgy#;%BT{6A5(v=gO9APf1*!qQcYX2O
zPrs9Q2$i)NdIRaU@g*q01F1;&gwnwXaS&cNAP9Be`lNH*1iisebPz%*BPAK2wEMGw
zzacoPk^sZUAr41+VG6;%Z5$Cw#-Rwp_PU}6VM!tB+c<Q9_MYBD55m?CFzF~1Lp#rM
z2nw}9x{pEtI1n0iYFh;2R_MnNBsHkALlY~SJ4SXWheFM<4yg$(=&afAqX9^?jXgTK
zGYVCIMpWw16@O7Vo1V27pDbY%5^5z0%+DI$+M(Jt`cR?uEVisixM?7S%cel6GC^39
zyAvIR+e%0aGD3HF@w!dXS5W2;tp41#i*&=P#~1cpgm&&SCf(3^a;#9A!^In{=Yme2
znjn<Kfb=X#J=CF)eu|Ji%0B@nntVR0;)Z%A)tmxS4tI=@PKn!f-{dM$LB<AQc$7mg
z<x_%;6{5Lwn)-h^Xa75By^OPBkIO(Cwq53(cEPvoCY#kfX8mQ$*e}2i#I&5_7EJ&E
N002ovPDHLkV1jTETg?Cf

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/diners_club-light.png b/angular/src/images/cards/diners_club-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..e2e33a24acd44a42adfcdcc42a8e1a9e4359ea50
GIT binary patch
literal 713
zcmV;)0yh1LP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001EP)t-s0002q
z;^yAs=HKGx-s0xo<LBSs=iA@k|Ns97dA{D_=J)vd;P3ar-tX`C`(&%uqRr<;n$8x1
z!X}EwCW*##wAwY2%7eV$>+bN9#Nvaz-qGgslf>gyqSE>L`_Sg|veoOM(@A3h000Pd
zQchC<-_O5*Umy^g&-vK^00Iq3L_t(o!|m5=bE_Z_24I>?;}W?DqN$g*|NmDWJ44tV
zP)QD%IWuSaeoG8bc2N--W0%vB7v*qfKY4%S#d&*QpvAdei*j3}3p;cESrz7!^AkJp
zTUDGJKQhj*<<OP$U#I|*!p*G#jOpe<JPiqFeugTg=7wrk)z3h6vnYM|`*CWCg;W-r
z4A`g%O(?4$gd9L$CFub(JOn9H4$Vl4QV&25Y+bFUCX&lS6Bu-2$)NO+focF9dXfH$
z3bH`R)ccSM?Mnsq9al2+9n$PV0&E>71flS)B+ZFENP$BKA(VPj(helU;1(!^!z5tD
zHuMb*`C|%&bI>3(Y(vhURoO-mmNb#xwxPzCt098$lK_m|gj#=0twA5jBz<i{05}l|
z<os_i-&v?zgH!_PJoHpW<#Qx9q0Z0W6hk=di$F4e9j!ptues=S)h49xGpbT(z#~3t
z?_M*KEMXL~z7LbR*L<4$%BN#!Oggif^#~st6w=|mhUg6lOY&wLAbhM$w4hyRB#W_@
z9_r=F>MvFyOdqB-jcn7!D21@OZcCc!T9k!k2VLkcIuO#yJqQQb6-l(D9{JdA#HD)|
z=^%PuXCU0fC=qSDLOG(!Krv<KK`$8;D#+v^tfGS`rs>7s?P^CsQ~xjf?0*LxU-Q0p
vV5ir-L7v&=HSe@9e9K;PK9n)X(}l4=&6Si7S+2pm00000NkvXXu0mjfGeTH0

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/discover-dark.png b/angular/src/images/cards/discover-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..2ed6f6f942264a62e11813df4e2ed85411705f81
GIT binary patch
literal 808
zcmV+@1K0eCP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001-P)t-s0000l
zGd(XfJ??iSE;2nZFg-9ZK<;)U?sg(CG(0XeJTEjp?RF#WbtEn{KI?NN?{FY5G(GNi
zBme*Z<>u#OXKj6ehL@S1%goNPv$pc`^GQxsUPLxYO;tQWNxr|rzGW$nRWMdsVLLcG
z;&LR|+1qwaGn!d0)@~-t%+HF9l1Mx`aCCX5T`Z)gs%l9!f>AQEVJymOC~HYIN0}H2
z0000HbW%=J0N=lrU?33h*Ux~@uYi9*5C%cQNdN!>DoI2^R9M69*I9GgKnw@)4JG90
zDQhp*HU?9h`$+ozzgs1F92aIN>8u}`8U7E9VLiW<<n;qesnNFqMCJ2PaqjORI(PR3
zu@f(i)DU{fvwG?W8Yt)~H|Pf4pc~W!R65EQC~KF(#QDMkW#WqFD%&kzUus@0fs#81
zj$>iXpDDP!fh=-#3ZT*C8YyGqgZv6GOC$?$=ouQ*Dson!<(6^_E#!@@Fr*CaNzB(N
z<N*tl+LbtsG(ntz>_(6=rj(7x!Z#2X00nwpD6oKbU+!<dOxk1~9p9~iAfSl3MSTkK
zezf2ay_Ih%a1O~^W(F$&kCq{8tr5uK>I7mwl?7=#M-7r$2kjuBp@j)UGDwY8g}6O~
zuz?`A8bgkufsTJd4hw0yt0-V)-~^K18KM|6LvsmP2i4SY(A;u2BO5|_3YmbGAxqa=
z8kdvv02ZdLvz+sQWFj48*3@bT>7t^RWkI9%p&2UrB52sOkL_1et8F0f{a!loxbGm!
z%0hP_r5G0w`7CUvQcnh)N&}@kkcJQ3x`ED9ni85A!yr+0oxT0^q2B)g3Yzx>Wy@Zm
z`7TLR56tXm(g$?llOGRd?W?HbnRrN;c&H{O9+D>&4`mBtqM`Ybdy0mnm}n@I$;3jN
z*)+MF2ld`sUX#D(Q4Ow7_ds*GmQU*WN-5IN^?X;OyNi`%$7x&2)q*bl%ih!rLEi01
mhEHe4%Rd+ok6*t2Amlgxq9NYlwX%u;0000<MNUMnLSTXmUS^B{

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/discover-light.png b/angular/src/images/cards/discover-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..755c6957c6322d695cec7bb1788771c1130c87be
GIT binary patch
literal 830
zcmV-E1Ht@>P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<00027P)t-s0002q
z;^yDt=HK7v+uz^b;^y7q<=o-t-{j}s;pN}s=l}oz-s0x&b|W7oF8BBN`1twikyBS&
zV&mlHb9Q|3^76;X%d4%hJ3mN|k(WtLRV^|*``yUZ*4TlBiJhRN{`d0om|E-Z@b$8T
z@P|I{elYmLo@Hon{qE%Y)Vlb~t@EL1@QzElyT10ik%5DW^r?0J_wn`T-Tda(`P90r
ztgz*_m&eG;@y)aCt9|L1U#wE>X8-^I3v^OWQvlz;AP~=hU|-LFw=t%^0006pNkl<Z
zSi|ktYj4^x6b9gwQrhh}2WmTsbA<xsPU&sk<^TV%y$8a^sAwyhX`00Q0Zv5x#6A|0
z90Wo0b3=LM(^VijKU3a0I|l@(-|qON52+bkD%By+bd+iZ7phO*>8nPdRNEhFD|LcS
z&<Q$0e*ub2U6?o`$)qUWP|OabnK|o{6ox8XSO{M;6cy3aO&Es58KrVT__7I0$jYe1
zShEXdu(C*?F1yOQ2m@GKt?4=3<SybIJUKQAJFPV!Yjeh|cOgSYb0tN_U$8nd%rS;7
zX&BZiwEVJUO$n!jSlrQNOM4JSIY*k|IT2Q1C9`mw`xpj|c?qa8#vFw38KWp2vrFWH
zB!gejka8{!I|76_KvkM^atOkGpiq^2&;o5sQ%(fRtX<X3rdN>JERB#cS1V5UmNv)Y
zbB7y#_Xryky@H~QtrTgOWYQ()GNt(8b_-4A0n(D4W~XfTpz%1bw?AjCS=uPupJ|%b
z&Oq4BR&KW+7a4c|gqU55S=P<Q6F04r2Tq4zZbu~1j@FQ54PoNu;9sPSqq-<JMKLWN
zXdPqz?|=V4gdUFr^#<2Rfu4uqF`z<Td;ZX54#ppv+yn82YQ`TbWKsT*wAdf&-Qj)U
z4;2Hv>U<$gW`S|OP;Vri@r8P`8!X8es^{Vf6$9zZyHMlJ^V-u03wl2<>LO?zIzje|
z(HzJ}vQX+OXs*w+`+5BK{raQ%@q#n$5l`93<%J*9Xf=c2Ck1=YrAl7PApigX07*qo
IM6N<$g0_C7tN;K2

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/jcb-dark.png b/angular/src/images/cards/jcb-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..1cb484d91e5a7302b07365ebbfe47e8cd06f4633
GIT binary patch
literal 836
zcmV-K1H1f*P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002$P)t-s0000l
zGd(XfJufsoE;2nZFhDLeJTNdoFfceUG(0XeJ})#q|NsBKAT$kUut26rNlsNOdb-|^
znMqAmaJ+WrtFu_KUZlq1&*{;^+3WAe%;)sz_v7ZD(xc8;XNI%aNsYww)!A6FU&cI5
z!Y)A^akb-}riaIk(q?q<_4?uL_4E4lSeMD`xxYGtzmv_F)^mW$N?J^-Q~UAq+wa_H
zpw7GCzVh<(cd65$)1=yhjD3KHe8Pcbw`$H;XVK&E<>u$J(B_rB+}PRMcB#|L%+5)T
z!?Clr=c}`qnVyP`lG0^#V`ptVK}o7<>d^oI01I?dPE!Ei&%a*~fFK}%e^WtB#sB~T
z{z*hZR9M69*Vl5JKoo%CwTe?X0z-rWv9>}-y~~bUdQaZ}b+Sv5V8<v+;36LTzdBdn
zuncF0MF_QDHib$xT8Q@SNT}S=a{^JPy3|H3p_YzOqaLV<gqnIZ(67%IP^Oat=sSS%
z>2=x|NGm@)Pg8+p&bqsbplcXx#C<XVSWai30swEMOhwQ~7>jubyPYgV9UcfYk%8_y
zdB~J_pjYsPfpCX`W}J}6Kob_~azY{lsZY=Yf;JjyOd&T^EsSw*;{S9Av^`4;xF8Kk
zeHkXo3U>7fl*wF{fTC8)!dZkqPN0Bn{gw{1k`PY!|2&3H$&qY2oRx&;owPkPqk~-%
zav4b1^)-D(H&P`iZKMZ0(EAK@chAx65gE1|&=5$MG34I^N$Y4ThK!9zoj%ay7y>0i
z+$)87BIp)Fq_>7P0NSM}gN5mYC#q`gK1h=U(Qx2snh_%~{4kAoZEislR`OrAZXbYT
zQS{{LRQ57U>xA>GdAM++cNBD!Zpnfih7NE4skG|}suh~DkpGX+n1y-_bjt~84CDX<
z1@M~(l7WE~2C~g}0tX}y8AyRVv|PjW-yyF*fE={=203VXW5QRV2r|-!5QTe57EU%b
z%^bnSkHWv&lTtmfANKzOYS!a4&~ZIb3$^RH)7E#(rnMT?nC6Q%LVo~LqTQs{{F>_k
O0000<MNUMnLSTXxy^fp!

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/jcb-light.png b/angular/src/images/cards/jcb-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..2b89f5b9af2c93d5fe4079be75d8c6d84a4a140c
GIT binary patch
literal 798
zcmV+(1L6FMP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002hP)t-s0002q
z;^yDt=HK7v+uz^a;pN`p=G@`u-{j}s<L2Js<=^Ay|NsBq;^w{}G!194K&D9d_xSku
z`73(5-jA8)tFu_KUeD>#@5ju-+3QJ-!_HS{hO^jkymjaF=)x{Rq{iWJymsO2_4niE
zh{ufc_W1kp^7GZ%x8Az*`t<DY@#^jGcd64@mdSj=fyzo+!{o;6xxXB7wV%?X)^mW;
zWpqrdQ^q_^*6HT6(B|Wvr<Bc@+JcPQfsACgYR*_^#yn1Epw2pjzqj7Itk|!s*sn~i
zQ`Ajx>;M1&40KXXQvlz;AP|7hU|-MAf0kZ9oB#j;>`6pHR9M69*I9F_FciS?XtnLV
z_e4=-5f@qn#9iywy}et%|3~VHk)~z_3ylx$wEq_d9)6QB90mv>g<pB9)X!7GI?7Sy
zaz_ZE(+{dD4NxkO6H2R~Se4Qu`9TMuT%YC%r4@B3p!6_M<!eEKSC8Wt!mhoo!!NY0
zxIK_Jx+ur#fXyCCFV*n8H(zNlB}12-5m0R-2&io`;7!QW%e#<Kk|1=_K)=fp^e91*
zmJa$OL3T-k#wnq)1Q{}P{tbN&$ek<~jfwj{=nSwXgO)b%Li-LOku}Z&ZRZ`wKLoHj
z)W(2yo&nl)z1h~})?g5ywmD$)jF7nD0=fsx&j>XnsAZbwlx@+>2)Po(>qRR~5t>F(
z)K0sitK_ZmS6h!st7J&$4i`rJ(21Ay_zJQByHAFoK6La8#{<kmk4p;|AMZQc=FpAr
z`~QKH$<QlOM`%_95r;(o_S_?9)V!)=XG3Q@YwLv_vQ>4B+XsX$t+=VL?Sb^Srr*>=
z-_VDI92qhs=qV*Ml%cK!wNgT!1g$}W{-%SPunV~z2^zy*NI1LDx(mCI-%Ex@PTa5#
z*sKw^ybb{yx8iQB&-Z!!5uo5OP@eYHp#eQ6#l!qTo{~b2(m_R~pigP;aDUmXlVdd|
cUn~&v3^hLOTPN|%xBvhE07*qoM6N<$f=djcb^rhX

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/maestro-dark.png b/angular/src/images/cards/maestro-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a4879b56fc47f68985a2e8e49a4cccbce928393
GIT binary patch
literal 752
zcmV<M0uTL(P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002nP)t-sFf=>>
z001vDJuomkFfc$bG(0afJuWmnFEc$aGd(ahIxjRmFfu(YGCeRbIxjRm>i`=7q2G3M
zz(y@O29wLY4I?8@Wzz;91De$=J4fIH9!rDEG>y?aiqHm=%5QeU35~!Heyo#MmmOVs
zDMC?!9WK-d9}k<`9hKKuf5;4mwh?%u6mggrYK|IXgrZ1-sX%wo8bCTQJ6<O=bs#W}
z8Z4L=Dx?!Aun;B42_cMKp_@;P8f1jLE?y=`Tig#YLx;|UWvdl&m{?VSWKw+~R&TI6
zZpS1}QYtpb9|q6>000kkQchDq0N)@G&%c20pD^!WU@)amw738O0kug)K~z}7?bnA=
z!Y}~F@un0I9O=fQGHe0avWJL!y#EtP^`I5L){c0dcl;mVcOjz*93etFMdOsrBnTlK
zN$@moeAb3|8o$E?;f^VbQiMxVCJ7v6Q<fFP?V&%124k%%isEcqQRq6oQ&uHOQX7wY
zK&U^;i%!~*+L;Z>NnKb0po-17%PCY>rSGZcPmrRCyFE+0H4R@#$pNP;UjRw90Oadj
z%QBV>Z)gUbSK00yNM%oG1e`nhvtkWM3lB&UL38=5I)F|M3{8O3lh<7Vsf{2!pqmYJ
zkA?)HA)KL2MG2%MXbPY=2ZFz?g`gSSLr!Q1ln^9>E?v+Wnj`=zQ6MQO^x%T(aiDnw
zs1LVMggK(s2&>ir5IiBb;r9{V+4(3tyPrqv?>j{WeEP?}r@t2X^iu^6$!|bbh%aQ%
z=L>0iezP^SaGq=5r20#kTcqo8ixdnt_gcvcf73pNxM`g#+k?{H>9VkW#ySCBBg({0
zX#;9!mfTF+2=zY7SKaTUWv6UoYPqHV=cnHu`W-061`@b56DLDBfoI?xB-s4RJ~$yO
ih>)XXEQU`DE93*8%LLh0NtU<(0000<MNUMnLSTa3&Ms;I

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/maestro-light.png b/angular/src/images/cards/maestro-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..2329738a19730fc5c6df5903f946eb210eee8eb0
GIT binary patch
literal 820
zcmV-41Izr0P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002_P)t-s+u!2=
z007?N=HK7v+27yZ;^yAs=HKGx-rwfm;^*Dr<=o-t-{a^1|NrX%8vvo--s0wVbHMlb
z`5>+1?I1V(-{bt>;_yIJzvuVw`TY>5;Y)+d><}sZ{Qcka`}OwspxpE8?(pK~=}^Au
zFtg<}jnO-b&~J9a_K=&CSC^|kb^h=1kk;`)xaSX>+Z~nH`oG5YfQ_O^g7j~H@lRs!
zFh<ZCK;H~3&+Yl|@$-Ms?{LcPZ_4dp#Oqjp$oHSAj9sCdPmJ<kaJ(*Fui^EN*71<l
z@qp0pU&QPC&(uSQ&RBlPnU%emgsy~TtM{O(@?detBu?!hI6%@Ang9R*4RlgYQ$PUU
zAQ11*zc8PGV1J~xn9cwI0o_SNK~z}7?bp{*!ax)T;H)6nl5E(7B#MB76;P2PA}C_-
z<^3N<62=hWPl3g8oZ-LB#WyG0k3dLtB~Ez~TZ|Aw1QMB}yqR0Dpq{glNpR$Jlg>wo
zuuN$}<jeXdjT0e8H$>hfD2)nsLA)hVx?n@xp;VYbe-0g0bXAh1T6I@*z8S?FlVzEe
zT1H5yP)<pM=x_GNY)Kx371JT0U5jz&Qxgp){|w6pL7Fa&=0zS&+w_Gr6*$MrHjr2v
zK)%ktqF~ANhHB8UvIV4^CsYQ`iDGBx07yj-NRvQ1N<U8kS~W4$1x{W0&LNQQ5QGc5
zbf8C65`-?`2szo2K@0>{0rcTG_}|VDgy-G~Tmg9mNg#VJXblY#fRe!wNLc9A1)cLi
zoe7`<Tt*X&k*H2EYb6A|1L!Jf9sTOcE~L=>`wkJqyT9VQ`_X~a#848J<X2F7j1#i%
zb3$f4&ukq{oafxPMdR87O2XSH{4EkBK_`#zHAg~!_Y9nSGw|*oE=qq88*F%w-Gq3J
zB)h7cIqJVg@@}SSj`coDsqXht<2GkuEY~vr^V4qz4M7?H?#P1TQ|Q++R=>71l@4-|
y2vMu2O>iV*_q5aLvghqCn~>!gU$edx?IB;CRP+I%fo)a*0000<MNUMnLSTXusHCg_

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/mastercard-dark.png b/angular/src/images/cards/mastercard-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd8062635def18132130eb09ba65c93a54c2aed8
GIT binary patch
literal 737
zcmV<70v`Q|P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002PP)t-sFf=>>
z001vDJuomkFfc$bGd(XfJuovmFEl(aGd(UeJuWgmFEl<dG(0afJ?j7)_nsU7UjRr!
zIK_h_ybU8eJ3FKkCq^wf_?8#`WddF&G<sVwjT$Vhb|^Y9JAoZ8>X#ixEjV=`Fq3I4
zpl~YQkss3rAKwEV?F<+ChY|Wm2mNmb{Zj+}Spi{AG=^d>xqBtB5GC;$6I4ewpKmJC
ziXrnR5c+}-_A(6ocnkMC3T;&~Y9un57b?gKA?<_}<slVN6TkET000hjQchDq0N)@G
z@4qn5pMYS`fRW8ReE<Lfzez+vR9M69*V%G{Fcb!0qPVvK!lI(!f|YJ=wYB^5{!dk4
zs#fz8t)$cGjQ?dWzTup3GKoTnS}oEnIjQ6cAqvUoXx8LPF_fd(Q^*sgMrEW(lrohP
zRiScHk_9P8=+7bF?Km^bX}|Q=YpgZ!Ow$X-_TG@|gxWGzKUuOTroM_d-V3T*+D3*E
z)#~aSG1+dY6KdOWraG5k7u43coL@H^ymSj8v11re5<wk}&!rLNO6N04hw8w2Fp}H@
zX`TwrKw+bp!Nr+rkgM@|GQRSt^BJc=4uGOg3qA=$K5%Y~RW5j_YeUGztrpex452pO
z`&DfK8UP5lXk@GdAP+(ofDAEY9t5FnlU3RjLa*pII;7cs(T|Piwgn(OvWq2y$Ce=o
zcU#!&I|?Cu8i^~zkRO6!6O7s!MUeQD@CT(r)Ji+qnhiJ~ww(g`Ls%Rxj0qrG2ht+d
z0i_A0k9V;1jABS|ELlA^-D0}IK9`8Pv%$FWTFd;-3>ZZap!&177zwSmyIh+GW;f}L
zH?e<q(dzYlZjG^jfAu>;zXKKJK&n!e;#7#D%6Zeud1V)pS2iKFawaBssz%5sH5Bsn
TcbISa00000NkvXXu0mjfUKKLh

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/mastercard-light.png b/angular/src/images/cards/mastercard-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..f87ae25911d375f66a2f00dd473a6392abfee7fa
GIT binary patch
literal 757
zcmV<R0t)?!P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0002VP)t-s0002q
z;^yAs=HBDy-{0rk-{0Qi=H21t-{R)q<LCeX|LXu7_nsTx;^z1G`Tt)4{`2Gcwp8#y
zRQ~z#^I&lJmlytL1N`6P`oG5f+o}7=fBM33`h^hw@A3WL<M^a0?Ftw9`up|v_w4WS
z>h16MpsDtdoArQ=_^LPUAUEs~Dfc!D`bP)-ZwCES1O8b7{pZH~)tmdyjqy-o`nzHC
zDHib=6aMYg^?!}|utxlN3;p4^_^-J3kDL3?jr4GT^JZ`FFh=^2AqhP(q5uE@3UpFV
zQvl!3Umy^_fWLpPic@C*00GfSL_t(o!|m7EQo=A42H*e!N_%L!XbZJPcEN>Ra9`g4
zp=_A}g#HOgxX>B?%UpbubJC;<V=Q}?Bc-G>EY3-al#@D%pvbA$iYjSDQkG?iss+VV
ziSjH>je>IObjpZ|>QIg7Fi`Ob{Q)TOTF%IF+Ara1jF-y3Y5K#yy))!FU2PGoIUlkI
zroN2d-w6sWZ7rRMDpmBgn0!0b>S~+$80(1)w?S<!k*oWQ^Q2UUklZm0D9NCfmdvdY
z<xWp#AcjKV+!*s*0%<CQMxd}>%;4fo5#)&`6z54#rZ0dT07adaObJ5)a2{eq*rke%
zAbDlDwr2>n@!BtI15g=2xJ5l<6#)4VvH)brA#*QCylm>FjUn`oKBIk_-IOgq-nS(P
zxd56-KS-Se2zUER+UrNWMeu1PuM9&$7i>03W!J*<=oL*#Iw1_<F7@ysGT$GzEr5a!
zEDjgOB~ZZy(nRQh(&W+?Sb4tnmp$8bESHZrn9AEOmk8HcW4w5*Wd3Bze8+2z+Z=ty
zNY|Qqi?Qj@tjv4k5A5Gvw8Ah*jB)<&uYN~p1F9Vc%28b%YEYWx5A%Y|uxyH`QB+B-
nPLw*_D?3gmt;Xc?S;oEr60*e2#R%7(00000NkvXXu0mjffpLX)

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/union_pay-dark.png b/angular/src/images/cards/union_pay-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..248be7c3307c6847b305cc163b71f72c49769c3b
GIT binary patch
literal 1255
zcmV<D1Q`2?P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<00045P)t-s0000l
zGd(XfJuWmnE;2nZFhDOfJuompFfceTG(0afJrsR-2rp>v7a#uq{xOY+8fs}MMoYuq
z++Hm;z8)q{otfe8?IMMMB{N47FkSHW_R{9%z{=Q(y}LzXjkVU)n8m|YZ<iN5ao^<Y
zqOitYrJ?%7#%ryrHdci1@%7Nx;jz8Xrp?QGwX<Y>p!b=a9$#R?8!e{I%%;xEK$Vdv
zOM4S`b@Xm?3`}koEn_26Rf!=#J2E?imb3V$s&tB~4_|WfQC3hVQSm}aD?de!B`%sH
zEdB8C`_t5Ht*Rr1fE{pdB`jYpIYI9wEu<kV{Nduz*W!|+ykvZ!_KS}7e1VNycM@)O
z4p?vrIBFqST4g0l@H9J@AUabnH?$ow;us*Ky2qig#rd|l%a5E-otaf}moS5eHAi;y
zUt|_dV^KC=K`B-)EmSixLq{+<QZ6^q8YtEqBXcWYCjbBd3UpFVQvl!3fL{>5ARxcJ
zu$I~Y00T2gL_t(o!|j(>bJIW+Mg>VIS?OD|uo9@tE$#+vV_FhQ=)L#ed-?wlteAmo
z%Zn)X3k+w*^4l5j@m{TD7{<cfhQ+B^KX0ULT(>wi>ozG7d8RQf81suWVa`}T8_@=1
zaYp<X{ekG<$E_p0-#*Tk4Cj6*y8qB3cAYiHxXC8C{Ugz5YlMtvFVnC^FWNfld0>un
zNGH0j7aboJ9mt6G=tTSVqHUw1x8t5$?AMoe&>Cf5HjxgBJzb&#iKa`mGb7R^I`Yej
zNJNQ_R;%Z&!_}+0L>1xLBI0ABb0iv1)I~MD4Ar)tNE9OqZ1hGwXJ|w+iK^(Pm!p%3
zZZHAK0z{LENJNQF;IO(}wC=vTo|s8#)hs5VX%3R`Ib#5GY%FokxWgsm6}25nlt~1f
zSC=P;p}5lVYe~HUKZN3xgezRc0bIDJVfPU*wnn1yMAvZAvW6HA@wAN4N3B#cQA)5}
zh791f0x8j}Krq{mY{vFv?njiUt3>B7;_eEr`zY4yA(}NbFQ-mNK&?d;m!}Xg4_IQX
zkP%U$Ye4k`u39JY28|m08ZI?aYbdA3TsTU!8?g<kzHFLU649UyS5~?z_e%F=c{MC2
z=Bi%~&GO~qqc(4~n1YK)2#3Ysv>iz_IcU4`2aVf3n%J!9n10ZT;Xr*}I8yc*mz?*d
z{Pu$i8BzYAJ%(TIz(ZPBxE@>^?Fs_gjuRsNy{J)NUcS<FpPkwbej2^gh@}Wxu|pF}
zqTECc-}hJRUaRGLtODCbfD}#>OQO6)#bq=*YGuMxE8C5J<T^ZZIj4ywQEsB-5*mIJ
zOQIe1nQaU7Y$)24h(x)G!cwV|l!S!safvwo`nw`JKuGkHL`9U%TKYFh#v%j}WE%pU
zrL1K{nnd@$i$b8(0R*tbg%EH(1Qo=L(ZrG{_jWxP6wLv59PTg$chb&|LkGx&$ojoQ
zpAwPi=Yw`L{{SJ8J`r&v=ZqzhCefXYNb4!+MHjT9pP#WL(mknt`h~}bGiy4L;=_e)
z#D#Y|#&})GvUBb4dp!P!L>p$~S#QkEMl^3M%;ueThHu%5`6=IPH_t5?#uwCV?}T=F
Ra!&vN002ovPDHLkV1lCmMkoLP

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/union_pay-light.png b/angular/src/images/cards/union_pay-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..2d75aa9070de5b32bc5efc83b242ddec1ba135af
GIT binary patch
literal 1245
zcmV<31S0#1P)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0003&P)t-s0002q
z;^yAs=HBAw-{0rk-{0Qi=HKM!-{R)n;^*Ao=l}oz-s0vIeRv2jXzmvu_xSiuoteYl
z+(l!K;qLCl-`z2di1JZaB87m#%-Qhw_n5}RK$Vg3G&{A{)TYkN`^Cr8=jCjzs?gWs
zrp?R1%Gjc?#(K50CrNwsZgc(O<B7eygO;=486^0qt6ip|7d&wcPjC3As$_kjF^!2M
zg@8dRR(rOybcw3>n4C6Ngl#2A?<Fnx`1<bg^z85P>h15}<m>y>)UmzK`ozYPqrCaH
zxK(eK5o&Y_J!|t{WwaeJ{_yeq)YVmQm-T#s6L@!~9yXJsy@|fNWPG4SVvRD5iD_7S
z5M*;RDq4dnNc`dA-pJ6Sy2p~Fyy~g0N`RC1i;uc<g)Vx8CrEqrZFALBU?nVH@j^*^
zBSX;|C<&f*Jpcdz3v^OWQvl!3fFKaRU%y~rAeb|p0009(Nkl<ZSi|ktSy$6Q90l+Q
zg3HaMWIBYHgv2&Yx@s$JrBq~J6ct=p6!(4k{vW_ekB3R(P=WBG$NMm+Fa4eLCjU%F
zQIxUKaWzv$E-6tiUQjdV!bJ{oXK^A^mbf&gTv64#$e6pTI;xDQOURr>^|GR>6WO5&
zRs9d0394O><<+%h=wve1u~2O~C-URAmdLHgB%RsgAnu5yoclx)PYykbJ2$k{1<9bM
z9J(2Yo}{3AGN>qrw&Kv86!iGdKTTfIixX5t3IfVhQ5OQrRFNKoGF4<JAyLuv+FG>C
z$SUek9@j}glSxQaRK?3^nUhsi1g$d^5)hJ*sAvWo(K7XWMbAkIMUEvPT@F=qxfOhl
zmig(e!|hfjXlSi`Uei8px3*1EfWxt}sT0FA9b)PxnN32XqIuvOU)JWq)9457%EAKt
z7I^FqKpE()Wmzy7I`9Z_rBE%Go5I6rnVZ7fr|5;)^if&H9>NC7O|X)!cR;&fgu;VC
z2unhuq8$!J746_dh<t!Pf)@N9dh5__ln1j_*5Q&8P$y&`Nk~+*1+1*_d$xfC9~%4$
zme;Ynio6eAk<OtqY?q65FoTbN8WMw6o!OY<w`^|acDUXTds;hK-PIbQ_Sz<;k{QiJ
z$#tniiYP`CD}`#O88pTQ6PtjfgZAKvXyyBwmj7rP`rwWmhNBz5E~pDBRFw}}1Ae#(
z2EdCd1}u0@=84BqKto^Gs|!yXjdeIh8%@Frgi(i<O0E$>&yvvair%b-Vb5ojS|APz
z7V3ziA5E-)hF8=^(B4D@*`y4;4#TL!F-R0k3dt+l^RXN>P^NWTClsz#aKR%gia|pw
z>icN714dw3P6uusHgATC%`pxQe~Oj^tp%@xV)RAZM%e*{K7ia5G_;}$u&@af0Iy4V
zQ5J*EsR6`NkhCHpRVrG=FipcGJceQNp3TAMeWai>Zu+E|hE6wVBAyi5kX0mJ*Rm9(
z&`uosev+-R3n}zI4jrBZ(&f;@`FKZPPtcJohfu3diF`T8C-P2Dr#bl-{yqL@pmB9E
zJG7*ZD5K|dg1n@R@iXnxM5ZkAGwnH^vU#qKWMjrh#}wr!|Gozv9!)d500000NkvXX
Hu0mjfHGyZg

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/visa-dark.png b/angular/src/images/cards/visa-dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..0705b68e7d47f7c94d982aa8ba2d26eab61b4054
GIT binary patch
literal 548
zcmV+<0^9wGP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<00012P)t-s0000l
zGd(XfJT5dmE;2nZFg!3YKrb{tFEl(aG(G?S|4B_%<>u!+K}pNZ&#|+%V`pvh^7D#}
zlBA}pmzkb@fQ8uE+rGcUeSn5mT48W>d2n-i*xA~Ghql`Q000SeQchC<-@kxgAP~>b
zB|4OJ0004VNkl<ZSi|j?%W{J-3`HFvB*HJ=hP40xot3UzZ=D&u>BM(ojF65jiDU+)
zRNppqNsms6?l-!u+nqt+TqgCZqate6vka(FR7e$6K^0U%ML||W6vaD>1&?0aHrn(c
z2U_=mW#BjRZlh@!0*AT*vVxg-GiFOW1G~+#^GviFcN`0uXooG^Bg<}H665+pb~&f>
zVGpp2d>%v&nUPr2!fRqfb2?iNw8mZ-J_M)^hxm^Dg&iJw(1>adw3>Kb5X|9%g5C1{
zR~{sTnkCi<6d@WUbH>8G6ujg?@Wt$7LnK^dRFfqQ@`185AVlx6)f70IpqIhWJsY$>
zVa|f|kS4sR)Tna73l(){L1+>hj=8U7y==V{dkjg(8z3}fPXm+{GBSe6vH0rW03q*|
zUa9quqvHrz3le2PmU9O9JI9I7#hJ;3nUTi){-Akd|J5H`1yxW5eGsTA!+EH-45(9m
mnQz*1U)iGWc@5LFy;462ua(aA6>O;h0000<MNUMnLSTXpmG9~R

literal 0
HcmV?d00001

diff --git a/angular/src/images/cards/visa-light.png b/angular/src/images/cards/visa-light.png
new file mode 100644
index 0000000000000000000000000000000000000000..3dc8ae5093a74d8f3193be96f63549240a817da1
GIT binary patch
literal 590
zcmV-U0<ryxP)<h;3K|Lk000e1NJLTq002k;0021%0{{R3qD`F<0001HP)t-s0002q
z;^yDt=HK7v+uz^b;pW}p<=^Dz-s9%q<LBJs=iJ}t|NsBq;^q|@TKD+*GB$4T@%2wr
zgW}@qZEu+3<Lkx7)~Bh#BPV2;nz!rj@QRGAdw!xoM0s9dj?>iOwztgq`TC|okMaNj
z01R|ePE!EizaS9LfM3slU|=QdAB6w_0gFjQK~z}7?U&1zgCGos8Ef0QfaO+Et7zZ<
zB`5i5-Lk;VoZ(+E5XqN>Fg*t$MEljKBAu^-b^1`n`Zy7YIMc026Omf+t<+N%>Z#O4
ze5y$nYf_C+>Q)ZADOEugR6!MVD9GHQ*NSEa13qmb^k)B%13i|Gq#ZAMnguy@U6j(<
z4q}oUXwqj(TO(~7dFF{|99HBD>12m3dq#$~c@B)f8=`Zb*2g8n&hmMXw1|wrPR=y$
zY-oJtmIpo3S!hZEREs1QhmWvhM;_Fpnt-F0G|q4)cSgZ(Xuah@+^CU#HACUzK+<a}
z+;hQm9)!K<eL4_!cWBjMQ02yH*(?a&OFC*9$y-93M$<hR?)MeuEXZ|xhnGDxs+@75
zlGZ#(rrmwIQx9o8PdyhKx?Ld;N_Tg8HxMJFxdnqIX(XHl1w?#bDU9H_{+-E;Kv|HX
zm=XJ}rNHZK^`PTONUdN0&@?fB>W8g@DyV|~5vV!ly>=FtV_uL~(H`@rJ?@pw`Z<?j
cnoBFhF9c}Ku(87E9{>OV07*qoM6N<$f@Y&2-T(jq

literal 0
HcmV?d00001

diff --git a/angular/src/scss/icons.scss b/angular/src/scss/icons.scss
new file mode 100644
index 00000000000..4d2ea4594e4
--- /dev/null
+++ b/angular/src/scss/icons.scss
@@ -0,0 +1,44 @@
+$card-icons-base: "~@bitwarden/jslib-angular/src/images/cards/";
+$card-icons: (
+  "visa": $card-icons-base + "visa-light.png",
+  "amex": $card-icons-base + "amex-light.png",
+  "diners-club": $card-icons-base + "diners_club-light.png",
+  "discover": $card-icons-base + "discover-light.png",
+  "jcb": $card-icons-base + "jcb-light.png",
+  "maestro": $card-icons-base + "maestro-light.png",
+  "mastercard": $card-icons-base + "mastercard-light.png",
+  "union-pay": $card-icons-base + "union_pay-light.png",
+);
+
+$card-icons-dark: (
+  "visa": $card-icons-base + "visa-dark.png",
+  "amex": $card-icons-base + "amex-dark.png",
+  "diners-club": $card-icons-base + "diners_club-dark.png",
+  "discover": $card-icons-base + "discover-dark.png",
+  "jcb": $card-icons-base + "jcb-dark.png",
+  "maestro": $card-icons-base + "maestro-dark.png",
+  "mastercard": $card-icons-base + "mastercard-dark.png",
+  "union-pay": $card-icons-base + "union_pay-dark.png",
+);
+
+.credit-card-icon {
+  display: block; // Resolves the parent container being slighly to big
+  height: 19px;
+  width: 24px;
+  background-size: contain;
+  background-repeat: no-repeat;
+}
+
+@each $name, $url in $card-icons {
+  .card-#{$name} {
+    background-image: url("#{$url}");
+  }
+}
+
+@each $theme in $dark-icon-themes {
+  @each $name, $url in $card-icons-dark {
+    .#{$theme} .card-#{$name} {
+      background-image: url("#{$url}");
+    }
+  }
+}