From 50458901d6a132531d8a5c43427d1f7b77870237 Mon Sep 17 00:00:00 2001
From: ben <ben@arc.wales>
Date: Wed, 25 Jan 2023 16:55:08 +0000
Subject: [PATCH] Added generic icon for iconless plugiins

---
 lnbits/core/static/extension.png           | Bin 0 -> 8913 bytes
 lnbits/core/static/js/extensions.js        |   8 ++-
 lnbits/core/templates/core/extensions.html |  39 +++++++++--
 lnbits/core/templates/core/install.html    |  75 +++++++++++++--------
 lnbits/static/js/components.js             |   2 +-
 5 files changed, 89 insertions(+), 35 deletions(-)
 create mode 100644 lnbits/core/static/extension.png

diff --git a/lnbits/core/static/extension.png b/lnbits/core/static/extension.png
new file mode 100644
index 0000000000000000000000000000000000000000..78378fd7679c93434adca5d0cbb64bae0e3c72a2
GIT binary patch
literal 8913
zcmeAS@N?(olHy`uVBq!ia0y~yU}ykg4mJh`hQoG=rx_Udu2zLalmsP~D-;yvr)B1(
zDwI?fq$;FVWTr7NRNUG+D{|Unt97pbExV+cswW&y+#PoI0q=e@jhh!O^UMn4Epk1#
z@HA!c@vSg<{r}(Yv-Ll^O;d#@Pl+ks_UEY7>ijt()ql5sewkx4|M~lmqSxh*o&C&x
zKH!1GJNYNS{~g~^&9#HCck`FH3p@6|kl(-J<Ft4?&RyzUt0q2Ax!3ecSL4TP?sD#o
z>zi`cx!%)Xxc;?;ytd}`+b`TFDF4=c^0`!Gjk$31!QY}W8*17Lv<1G%`ee+pu&ecm
zJ8$&-VNc70d|!hT+Sa!JwWM-GP5142*&IGE{oU6cKi{l<@jm*Hy7KeqAD`|he7QBe
z@8$ioGN)^w+4tRk`Df`x_1CYf-$#CnG+v!ynEa|n|JBAR#m8#rYL>i83eb&yI9EXN
zd1$5RqN)d5Guz+pX<L2n@w&H*X0O}%_L?Q1d4S=s)I9}{{(gAKGfiRNuR<HiuTQs4
z4>-)jy1(!7H;F&N;^oWMmd!AZPJH%q$5rbV%eqg;^*=ASzY!gL&@y`7HYfe}S8uFX
zIPbE5-eKju`)<C+5A<JuZvQp=K(puCHJU+&Is09{Jh?YPLB^du&qro`Nug0b<BX1#
z!l!mLuz#4veKIxuXmuf<vzW}4fV=H4tmO(ce|Ao?Yn$-V_oJ1my<mCX*OSIM66|L_
zxG0@wxqszCL0C`ckBJc-3#U1CX)c|kGBqUlwBqqOMdv1oip*x|beohSs2Q|$YCw{w
zs<`ITE0<QSXT0EJ8oqMrwOdlfW-8`&cXuq@`mXxLM)k|Z)8ne%<_g#;_nCZ}5a=eG
z`%6;ohvDZbk!f>tce-k<-ErxZcUWZUR^JtG6Uy#nKG)s-X4mb@+1sP{@A-Ei``x!$
z_VX@DKYeNH<|?N&=a6U6{D%hliw-|tq^Gc8@2@jr;)}!2uRNc_`tN|v6rWd{UtUSB
zFwlE`xs3n5WPN3b?RVw<lAZE@p8da8>=ygIecta^+r#5#N3|XMcw=g7R*3WoyM6IX
ze_q;hqt<d(KeO)Q_*G{bHJ{HiK9M19TD4U%;p$dF$=U7)=lp)5x=Et5So;3-C)*au
zo=$sN{mbrcU+ScuJ<l^_w!ha}!29ND)%HTx*z#j@g<mI6NSk1FDoZ)#dQev8(Klgh
zPh0-YJQTazJGzEv=ESd!3l}8Btz6r5aO15HnG=*YKMxG%SmVhdb4RM`?j?tmDcQa|
zY>&=d&Aqv3>UmMUv#Za(32=#sF>n34b3?-`QSQ^xJ$}ANdV@;k_D<_r>%LxF$N2k8
zA;y5k=d+XV%vo)&dsFJy3cK#RMn6rxc^AKb7wP<3{g}?wn&XO`{l?B-$-X6iLcczx
zsM(wBWmmNMxl8R*Z|K{Qg;Lswf*aB!W0j9hPP(dpZL4cpX?&Ycsj`pw<ilr58&_5N
zHT`>eQDI^09nT}vmOKkR`gE?k7Wc2`I}=owoQ+yDdFRHE&Y3-zH}7Iz;5hA#s880~
z##3v}r(HkobJEl<-KYAIlj-X#@{u+d`(GZOboNou4Q1u`)3Uz_dWXd{Ek5J&DTAeK
zN7VMU`AOAl|8OsSw)e_>4%7Q9f8BOcRqK^xE@Cd*`CYc7`DROFYw5F`l^#*nhL-aL
z`JR-lE)Y>S)M4;_n5XGyKKsl^n-^bh&UZPg#~`wy<zeRo!)JGP_Ssg6yDymbWZ4(b
zfMuc0nc3S6mo{xto>-xquVlP_CfkaIf6}tn^yx^y5}vS!{q(gXjNM;fNG*Kp<LY|<
zmQ0Fc?B3uV4(!&p0(ZO5cl9rxwEyL~eKOyo-<dLeJmvn`%C3rchFNEp`SFMsFXn~o
zKYg_IuippVuP0QB<k#iYsuhK9bNCn6ZIW+PuXagcvut@l?yP`GW$#?u+?-!*(m1vt
zOYFsRjr}jLsO>RoT)fbGnH`tgGMUKMTK?Wzk%n9Q7=CldyuZ@QkY~WU`S64@cMeW|
zn9O{7-U7ZO8>O`m)C8C9W?5ntaPV`{pBabPYqV|FKUjG!H?cXg-DsPr#9TX}pzMa*
zM}t&Zz3!~ou=#v+q{5_EkM?Wk9;=W4T=)Kl_JaKFii|6pw|<wq9Qx<mqCIc!9$O^(
zK_&Q_*Xpb7UiKZa{Bcv?YQB8^_Rxok9BeC&yeVjBOmb%Ko0utOQeNG<^jgZ*Q#;$Q
zHD=bhp4F&*_`q@s?*%7~$9qNAp6OSW{qgX-<LsKF;m6Vqdbzxn_IB_tY<-}|6`Q{~
z*Csimuu9(P&Q-rUK6QbI3}U^7p79!nb-9M0jf3;KR&p~q87iMJ+*B67yxi}BM$O8Q
zAP%_;w^z!9JuumEBHf4O@=fJ~ryV>EmTI<}_P@^Nvk8<-ONuiM*{AS$@yvz?%NNd&
z3!Zs9%zgfRiPL{f<m8VT`Dfeqv<AmZy%J9|O5b~5`qlQwC%>30|J9gxW`BxO#W!`~
zzqvLu-5vfW+VpN!7M{DH@o{XZ3fDwGSy#Tu_or?gu#;i5xUufioI}x5ca*K{E2|3(
zpII<X^h8;gt}pu<v!93dJKp2Jdvrzig(tfNW_Rl{hz6IG*hR=5*|{$z_gQ|%z4E3z
zLJI@pzjFWTDSf+g@7oEr2WFL}-;!HCO)R(G>-_R<7p5K*o_i@w*-|5M!Sh8`Tf8=3
z;r~-Pqsdy%C-vJ4O)(!%si5=(-n&bMqK~(%H7q^VX16wE7Q+oIT^7R&RU5*^x9FtR
zxNzC1ZLtc!w%w<~GSI)b<-?T@cAhy?H<=}xZCKM0C-%)@x#8QFIt?#17N29jv)qo2
zE4ZN`&|Um&$OS8|6VjshUT9QrD_345(7(r1-NSX+l&k=U;APj^L=yKu3E-2`O)cit
zT=YP>BTnCBhJu*??x1(Z>LDv8ZnVAEuBXMCGHqG)hM76j#cCEUIyUd~$C#k?vFW>B
z|Cqe^=dV^4_e~;N_AArMlWk?w4-`$?#ymmEJpJZ6hs2KpmJQKIE*#$?;p|;}q+@F7
z@wT)+70%ni$<xcsf7o0UynJ)p<s+`{S!x=G1uTTZUS1S2l6<|}npLRRw^HD?<dohu
z&$_l<t2?xKj(qS<52==orAy_^oVbGfMA#GOv#YIB+OXKQIp}iKjJfanChU3T`tj1j
zl;(i+w#jp^Z#n7n>G6FJv(LY{Z-qT@Fngl3j?4YnbM*<X;cSv6Vym{v_{g1NknVA_
zJi5kIhR<<YsYL8q@y$w`!mA#A(ULvomvw5<dvV?!J9qOrq^x4x$91w*yDB`T<*4xT
z=<j+TY~S=<OEJx2)3L~CGLSZ#f9KkZ?DEftefN9b>QE{;y<%xg!QG#hMdAE+gMQYh
zDz|?QG-P<7c5g$|sXy6H>8q1i|MF~+y;PkMcf~C$^~ze~mulw=lHW;m$<)PNd-yyx
zJh;5?gL!F}bKEw@1I@C=av4{*s9y@2q&GqO>6NQ4%Nx|4gKm~^8aM>Uuowlog?5w*
z?pkE&u$xbs-Bs~taPm~KIe!-LU3PR(U;Qq;+S_|#k$u(7?p^n*G9MRw`6Q+7uD^*#
zW9e0{$n7x!sy?4q=v`mSK5P1wrAzO`gxE|Hwb#D=Z2G*H-nGpW8*L>v2WWZh;rsSz
zHrs^eJ)c9O*1z+7Qsco?c-(dhySMxvW<M6`YOV(DqcixddskXS%}jW0HZRZ3SHr^l
z_O68&Z*P^|wx#suF4?dZ>`!yrr?&2wj#wP=UnA$!n(S|1d^QLw=B)c?HkIxFeB0yu
zIu|?-xVkVtQ2#UUbpN^kk`v|bzP@~nY0XXM`p>@$zE*tsv^swIFM(HupDsU6cVxUG
z^HF2{22WF|ZwbmLW@k0LsW~ik##J~=a)ZkB^Z(pAzS!5=>y_I7it4s&%lN$2@J!d=
z>Nq#PS`*RAPbODyvt;Qc|5sJ6)qat==KHc=87sc0T@v}3r7~sTS(m?i-+sI5BQGso
zeEU`6s_75E^)K7C+(7>DtKZ7I4os8Ly&ANN_3F#yk_{K%`ng#zF4)0+*6uRfu55!H
z4*h!;+>u)Pe$COebB<MKB@;Y@#J<gZl-Oh0cwM)H<K6S`yKX;xFUaPy{ZK<$g4wz3
z*PJ;q7v)diFuQy7z;f@scX{sQczkm`n7iIv`rS#B0_PVo!R0THZQ=V-&b%nPM6+!9
zR|y;SwzE>E3|qNxDIH+H!#`o-6NPubHrI4SG2d>Pe|&rQ>=m|^vwlwNczJ7I_Mf2t
zllq^<I=y?~b@O!p=9^O<a!=`d{?xQlOLgVt(442Um#;kOv_Ad7b(V&(g)8y{L`2oh
z*B06z+;Cx+?Q<(zg?;K19=5*gTH(FJDc<aU&>7`9LZXI>2{BtVJ2sRYeYnnG&5GQ)
zb|;y4XuqveI}<j!yFugU34W$UE}g|o6&z~9xtRWQcr5yp=<tGz@!6I)7gG-hNfccV
z*gaKO<o4HPcT~I#4PDvhzxI<Tm>(>-M?i69z`=wI6T|d>$K9E}?ZNDI4E}-28qu>)
z3B2?Eykp*$`n4%jOXLFYO!~rkbYjW8fE6ltf8NzS(m7k{+=6<AxA|w-T<Z49e?I?q
z^UuG3XRLp_d0NgSnMu=Ub7pzvrap)c&=ou@=zZa3pRUYr^J}-*U2kZ-4odp0V7}G<
zr0*v4otj>G3TsU+-)ivoYjOHpurnd2;`ZxDisIGB3UUpSMKz*B4o&k9Te@0Z;%UrT
zrp0R+4nFv&a5``C-RL{3%Uu#oqmEqp?`BeHa<}?qjo?4GH9r@9itjSrzu|~|=UJtt
zn%RrWo8{)4=~%4zyzKA-=l1=Keyth)zh0zwsV#rUnj@q6<$2|e&FKmk-itge`C^t(
zHY4yv8Iwus(=}Cv%@K85_PsBdd`^-<QTKACiuYCt<(sBwoqK0-zFek}nEv5`^vc;=
zO7EzzbF=4nNtnUxlUZ$h<IiE0XT>D}50##3O?mls=QY2OoFmh}$gFYDcVwxP`>?xp
z=5)4eS88^-%4@ZJ=5U<dRS+Hjzxd*=+g+~g31S=A)%d<wa!swzoBhi^rSHr1iAR*K
z%x{}jd{M{h&wLKk_e<-vLkg43f6WmSmXYqb>aLuX!dh9eSC_3_y!O+?t<f3F7gf*t
zyo`TI#!H(!b@Q6|yfozeID;p#NxsdS(cHh3KeFfb)?_!Q0~gD#9CmNAQ=Pf?8Cwry
z@j2Cu=Ih6=-EUh_DZe;fU+GJan=KE+oQmDfmtJpvyYj#I>-xic%i5SEvfUUM7+W))
zodZ0bonakZ28N0`wG(YU4hM*|`Ufvn5@of{C_E7`SEoa?@QRkmLZ=m?QKbfzFXc@#
zJ%VCnSg$uV+jobui>JrR#;`hmU_Wy8sOLpjuRZHEw{(0w^tg6T`T2)?e={tMOPh7o
zlrdvh?lPf5!^yFt%<DfSN-%RMs~Ml3F?orK&Fk0mcCCE3$maC!_vc>)7mG31D1Fp1
z_L*JLTv2t|%;LRpdqiMZ=lRa#zPl7YDqk0!e&0fTmd=MW6K49I6>jf1>cp-sd!}od
zn~keXpy}LCtv#o;p6i~A+IcGK`xAYhXJ4kKuDdMd$kZLt#3IPGN@F39bl|PhAe|*I
zY~DTOH~%ZNQ>19>ffE}WxJ*v?+W(OMGjHwGe&1c52Q4oAePkiO*dakY<BH7l-!}@S
z)EoXw?znXOpO@^6pDKH=T~l&*_-|HFc=y^A+XqGL5>-Yi!FgVFQBHRJd*)v>Pi;IH
zy`cQ;-00Ub%lRE<rA^(#$j8^Xktub3^`70!i}U_}+w$x?^Q?zO+jG2v<}onvAI=Pk
zD2ed(u}aR*)k{ptPfFFR$Sq(10UP^@g2d$P)DnfH)bz|eTc!8A_bVx6rr0WloBA5~
z7C5J7WO`H;r3P2|g(O#HCtIc{+1qj1R9IEy7UZUuBq~(o=HwMyRoE(l&9%xawgL(3
zD=C1Llw{i~Mfe6NIOi9oDwyb*=o#p`R%DhLDcNx;*c7FtSp~VcL5(O%NwZbTC@Cqh
z($_C9FV`zK*2^zS*Eh7ZwA42+(l;{FElNq#Ew0QfNvzP#D^>;>0WrfRwK%ybv!En1
zKTiQ<W@1u)X^E|p5|@I40@Uz|+yY-;xbb<#&`?Ou&(*I;EYLU9Gtke?)koG*T;f_*
zf?r2*NM%8)eo$(0erZv1s%u$lUWqcY5h=-V{RO2(IbiRkB<rW<q~@mPl@#k6>KUR~
z>F((p0M`Kug7nPX0<f-%+yWGpC7Ef6z(Vm2NCxa3WQSDb7QoF#Q4RAuSTQ(^tX%Sw
zOF_=_bg@+e*>9DSpPZRu1!kt1nkO2VCa3BqTBaH4nxq;V=q4E%TIw1nCYl+hCR&=B
z8m1u`<(XGpl9-pA3Nor9w?Hp5GsP;+z|hP*#nMREGRf3f*Cf>>Q8&pvElJnV(9$T)
z(j+a_%qR)T2>+tY^vt}(9AsC4j7rH&u`*3IO*6B!G}lc@GfvVqF}F<8wMa}f(={?l
zO-V5}PP8;kF#{Wwl5FLcUzD3zVyl#yo0y)eUyzp$mH-8~m1BUXt&)+R0YW4oC$S_g
zzbMyM$tN?fv;rX!l9`(tT#^V1O+zzt6EiatBTEwt6JtwLON64Z)S}|d{5+7Eh6Z}Z
z5OYD%V&z|ynVMIU2ui26N`_z^6}bgg&PAz-CHX}m`T04vN+2gG80i@rfRnd^4J1-L
zGK)*{iz@BFDH@z_f>R42JV+ME$plL&D1ei#Rbn#4lH$a&)D*Bq3NWeUjKsY3)D&AK
zXo7-?XJU!0B%>q)v&0lL-Be4nL|qf(6iZzTv*aXQ19Ni|(-b2!bBjcX_u!@%=ckpF
zCl;kTrl;nW*ebba<`#f`qo4r}N=;O^lxL)Z!pXqMNY~Iv*Vr(`z|zXt(#ps{+rYre
zz(7f#_FgnHGD<cxFtgM(N;F8;HL)<X(6ux+GS@XVNl7(JNi|6}PPRaGG=*L?G_o==
zurjrzpBF6?(-Mu6jM8*dObpU=O$?GPbS+ZN4RjOJl9SBLO;b`W6HTe&MPpq9LtO*o
z5F=3J(KQwm%~R7X4bqHt4NZ*=bWO}HEOnC%lg)HfO%u(`Q_akcEYggr=S3sa5JNL7
zV?!%r6VzC=(FavO!O*N}qmPk!AqtS{D?2U)h**$|n;n;pKDg2ZRiMz6530dvh@piB
z4Q)_RP#Cp@r0^XLuF>EkDFjGTJes;jgNvjPAW89P>Y`e3aUpu<sd*{3O65xSb{ey!
zycrl6*pj^6T^Rm@;DWu&Co?cGa29w(7Bet#3xhBt!>l<H3=9nHC7!;n?9Uk`1>}`3
z|A;YVU|^E<ba4!+xb^n#MPDXIk=Dd_Epa)=m2^%k<s8rYa+2lZ119G?JD>l)?{Q&*
z?SI?Jk!H@aQlEc)`BwPr*VDf{`F^;S^3`y^3<}Bm;F6(mpy$D5SB;11-T{ZsPg~G3
zU)Pb-KDtS$ZX3(vhKy5R(ziFTU0_&dzmwI(!GdK2%bL)`D{ZoVY935K9ngf(z_goT
zH^b%mcbKFUWS9gPSQr=`7)YU3Kd5O)i>VH42tIVk^~Yyll^41PpY2j`^5<M<7v09O
z*Ja1c0!5)O6CXUgywu}@bCcm^HJuuH2jP@$2c~GM9o!|fLo|nTMzdJNW>yoBgIN?D
zb*3>eH83bJa4;|(FuNcYz}&#Vk#MV=@l`x?!oipGl^S01-(%&dfBSO3H^amA^8e0y
zH+*QG&hYU2j6bVc1#0$xFy~bGvG3u3t%d`}P5%`e9&B#<|LDb}r>%A0%>-%{2>Ec!
z!ne)~r^`+G!cr2<xXn(s`q#b^$v)46@xN||2)Y&hc>Z7gWBG(*rw-aHZ7|_<`*daU
z0kaFW443EMWpe&;Qz(K-hY=L&Zm+(vbDJKhKfUw$!yVr@_g?v%&z|<gG-$j1q5T_J
tCM4Xyp7JdH=3mRk>Rlh!u{OljFdaU6dvBYU`&Q7nkf*Dk%Q~loCIG=%XZ!#F

literal 0
HcmV?d00001

diff --git a/lnbits/core/static/js/extensions.js b/lnbits/core/static/js/extensions.js
index c51af4b8..ad9745e7 100644
--- a/lnbits/core/static/js/extensions.js
+++ b/lnbits/core/static/js/extensions.js
@@ -4,7 +4,8 @@ new Vue({
     return {
       searchTerm: '',
       filteredExtensions: null,
-      maxStars: 5
+      maxStars: 5,
+      user: null
     }
   },
   mounted() {
@@ -33,5 +34,10 @@ new Vue({
       }
     }
   },
+  created() {
+    if (window.user) {
+      this.user = LNbits.map.user(window.user)
+    }
+  },
   mixins: [windowMixin]
 })
diff --git a/lnbits/core/templates/core/extensions.html b/lnbits/core/templates/core/extensions.html
index 1db58a00..bf41e276 100644
--- a/lnbits/core/templates/core/extensions.html
+++ b/lnbits/core/templates/core/extensions.html
@@ -3,9 +3,19 @@
 <script src="/core/static/js/extensions.js"></script>
 {% endblock %} {% block page %}
 <div class="row q-col-gutter-md q-mb-md">
-  <div class="col-sm-9 col-xs-12 mt-lg">
-    <p class="text-h4">Extensions</p>
+  <div class="col-sm-9 gt-sm col-xs-12 mt-lg">
+    <p class="text-h4">
+      Extensions
+      <q-btn
+        flat
+        color="primary"
+        type="a"
+        :href="['/install?usr=', user.id].join('')"
+        >Add Extensions</q-btn
+      >
+    </p>
   </div>
+
   <div class="col-sm-3 col-xs-12 q-ml-auto">
     <q-input v-model="searchTerm" label="Search extensions">
       <q-icon
@@ -25,18 +35,39 @@
     :key="extension.code"
   >
     <q-card>
-      <q-card-section>
+      <q-card-section style="min-height: 140px">
         <div class="row">
           <div class="col-3">
             <q-img
+              v-if="extension.tile"
               :src="extension.tile"
               spinner-color="white"
               style="max-width: 100%"
             ></q-img>
+            <div v-else>
+              <q-icon
+                class="gt-sm"
+                name="extension"
+                color="primary"
+                size="70px"
+              ></q-icon>
+              <q-icon
+                class="lt-md"
+                name="extension"
+                color="primary"
+                size="35px"
+              ></q-icon>
+            </div>
           </div>
           <div class="col-9 q-pl-sm">
             {% raw %}
-            <div class="text-h5 gt-sm q-mt-sm q-mb-xs">
+            <div class="text-h5 gt-sm q-mt-sm q-mb-xs gt-sm">
+              {{ extension.name }}
+            </div>
+            <div
+              class="text-h5 gt-sm q-mt-sm q-mb-xs lt-md"
+              style="min-height: 60px"
+            >
               {{ extension.name }}
             </div>
             <div
diff --git a/lnbits/core/templates/core/install.html b/lnbits/core/templates/core/install.html
index a9fd933a..5aba9fb3 100644
--- a/lnbits/core/templates/core/install.html
+++ b/lnbits/core/templates/core/install.html
@@ -2,7 +2,7 @@
 %} {% block page %}
 <div class="row q-col-gutter-md q-mb-md">
   <div class="col-sm-9 col-xs-12">
-    <p class="text-h4">
+    <p class="text-h4 gt-sm">
       Add Extensions <small v-if="!g.user.admin">(admin only)</small>
     </p>
   </div>
@@ -58,22 +58,29 @@
     :key="extension.id + extension.hash"
   >
     <q-card>
-      <q-card-section>
+      <q-card-section style="min-height: 140px">
         <div class="row">
           <div class="col-3">
             <q-img
-              v-if="extension.iconUrl"
-              :src="extension.iconUrl"
+              v-if="extension.tile"
+              :src="extension.tile"
               spinner-color="white"
-              style="max-width: 64px"
-              class="rounded-borders"
+              style="max-width: 100%"
             ></q-img>
-            <q-icon
-              v-else
-              :name="extension.icon"
-              color="grey-5"
-              size="lg"
-            ></q-icon>
+            <div v-else>
+              <q-icon
+                class="gt-sm"
+                name="extension"
+                color="primary"
+                size="70px"
+              ></q-icon>
+              <q-icon
+                class="lt-md"
+                name="extension"
+                color="primary"
+                size="35px"
+              ></q-icon>
+            </div>
           </div>
           <div class="col-9 q-pl-sm">
             <q-badge
@@ -84,7 +91,13 @@
               <small>New Version</small>
             </q-badge>
             {% raw %}
-            <div class="text-h5 gt-sm q-mt-sm q-mb-xs">
+            <div class="text-h5 gt-sm q-mt-sm q-mb-xs gt-sm">
+              {{ extension.name }}
+            </div>
+            <div
+              class="text-h5 gt-sm q-mt-sm q-mb-xs lt-md"
+              style="min-height: 60px"
+            >
               {{ extension.name }}
             </div>
             <div
@@ -118,21 +131,25 @@
             </q-badge>
           </div>
         </div>
-        <div class="row q-pt-sm">
-          <div class="col">
-            <q-rating
-              max="5"
-              disable
-              v-model="maxStars"
-              size="1.5em"
-              color="primary"
-              icon-selected="star"
-              readonly
-              no-dimming
-            >
-            </q-rating>
-            <q-tooltip>Ratings coming soon</q-tooltip>
-          </div>
+      </q-card-section>
+      <q-card-section>
+        <div>
+          <q-rating
+            class="gt-sm"
+            v-model="maxStars"
+            disable
+            size="1.5em"
+            :max="5"
+            color="primary"
+          ></q-rating>
+          <q-rating
+            v-model="maxStars"
+            class="lt-md"
+            size="1.5em"
+            :max="5"
+            color="primary"
+          ></q-rating
+          ><q-tooltip>Ratings coming soon</q-tooltip>
         </div>
       </q-card-section>
       <q-separator v-if="g.user.admin"></q-separator>
@@ -309,7 +326,7 @@
         showUpgradeDialog: false,
         selectedExtension: null,
         selectedExtensionRepos: null,
-        maxStars: 0
+        maxStars: 5
       }
     },
     watch: {
diff --git a/lnbits/static/js/components.js b/lnbits/static/js/components.js
index b67380ad..0911ea4a 100644
--- a/lnbits/static/js/components.js
+++ b/lnbits/static/js/components.js
@@ -145,7 +145,7 @@ Vue.component('lnbits-extension-list', {
           <q-icon name="playlist_add" color="grey-5" size="md"></q-icon>
         </q-item-section>
         <q-item-section>
-          <q-item-label lines="1" class="text-caption">Add extensions</q-item-label>
+          <q-item-label lines="1" class="text-caption">Add Extensions</q-item-label>
         </q-item-section>
       </q-item>
     </q-list>