From f67f205fa934853a7c37ad9edd6cc3ec21018e1c Mon Sep 17 00:00:00 2001 From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com> Date: Fri, 10 Mar 2023 18:01:54 +0800 Subject: [PATCH] Status Tag UI and usage update (#15282) * [Feature][#15267] Status Tag UI Update * [Fix] Typo in comment * [Fix] Feedback from PR * [Fix] Feedback from PR * [Fix] Blur Type on Preview Screen * [Fix] Blur Type on Preview Screen --- .../images/icons2/12x12/negative-state@2x.png | Bin 0 -> 898 bytes .../images/icons2/12x12/negative-state@3x.png | Bin 0 -> 1284 bytes .../icons2/12x12/pending-dark-blur@2x.png | Bin 0 -> 591 bytes .../icons2/12x12/pending-dark-blur@3x.png | Bin 0 -> 884 bytes .../images/icons2/12x12/pending-dark@2x.png | Bin 0 -> 864 bytes .../images/icons2/12x12/pending-dark@3x.png | Bin 0 -> 1282 bytes .../images/icons2/12x12/pending-light@2x.png | Bin 0 -> 946 bytes .../images/icons2/12x12/pending-light@3x.png | Bin 0 -> 1398 bytes .../images/icons2/12x12/positive-state@2x.png | Bin 0 -> 927 bytes .../images/icons2/12x12/positive-state@3x.png | Bin 0 -> 1332 bytes .../images/icons2/20x20/negative-state@2x.png | Bin 0 -> 1083 bytes .../images/icons2/20x20/negative-state@3x.png | Bin 0 -> 1636 bytes .../icons2/20x20/pending-dark-blur@2x.png | Bin 0 -> 768 bytes .../icons2/20x20/pending-dark-blur@3x.png | Bin 0 -> 1113 bytes .../images/icons2/20x20/pending-dark@2x.png | Bin 0 -> 1073 bytes .../images/icons2/20x20/pending-dark@3x.png | Bin 0 -> 1487 bytes .../images/icons2/20x20/pending-light@2x.png | Bin 0 -> 1138 bytes .../images/icons2/20x20/pending-light@3x.png | Bin 0 -> 1649 bytes .../images/icons2/20x20/positive-state@2x.png | Bin 0 -> 1208 bytes .../images/icons2/20x20/positive-state@3x.png | Bin 0 -> 1676 bytes .../notifications/activity_log/view.cljs | 9 +- .../__tests__/status_tags_component_spec.cljs | 33 +++++++ src/quo2/components/tags/status_tags.cljs | 84 ++++++++++-------- src/quo2/core_spec.cljs | 3 +- src/quo2/foundations/colors.cljs | 8 +- .../notification/admin/view.cljs | 2 + .../notification/contact_requests/view.cljs | 4 + .../notifications/activity_logs.cljs | 43 +++++---- .../contexts/quo_preview/preview.cljs | 37 +++++++- .../quo_preview/tags/status_tags.cljs | 42 +++++---- 30 files changed, 185 insertions(+), 80 deletions(-) create mode 100644 resources/images/icons2/12x12/negative-state@2x.png create mode 100644 resources/images/icons2/12x12/negative-state@3x.png create mode 100644 resources/images/icons2/12x12/pending-dark-blur@2x.png create mode 100644 resources/images/icons2/12x12/pending-dark-blur@3x.png create mode 100644 resources/images/icons2/12x12/pending-dark@2x.png create mode 100644 resources/images/icons2/12x12/pending-dark@3x.png create mode 100644 resources/images/icons2/12x12/pending-light@2x.png create mode 100644 resources/images/icons2/12x12/pending-light@3x.png create mode 100644 resources/images/icons2/12x12/positive-state@2x.png create mode 100644 resources/images/icons2/12x12/positive-state@3x.png create mode 100644 resources/images/icons2/20x20/negative-state@2x.png create mode 100644 resources/images/icons2/20x20/negative-state@3x.png create mode 100644 resources/images/icons2/20x20/pending-dark-blur@2x.png create mode 100644 resources/images/icons2/20x20/pending-dark-blur@3x.png create mode 100644 resources/images/icons2/20x20/pending-dark@2x.png create mode 100644 resources/images/icons2/20x20/pending-dark@3x.png create mode 100644 resources/images/icons2/20x20/pending-light@2x.png create mode 100644 resources/images/icons2/20x20/pending-light@3x.png create mode 100644 resources/images/icons2/20x20/positive-state@2x.png create mode 100644 resources/images/icons2/20x20/positive-state@3x.png create mode 100644 src/quo2/components/tags/__tests__/status_tags_component_spec.cljs diff --git a/resources/images/icons2/12x12/negative-state@2x.png b/resources/images/icons2/12x12/negative-state@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a1fb88e6f0f3823f425202e1c463fb89bdeea0c4 GIT binary patch literal 898 zcmV-|1AY97P)J{66;RCY(zOa<6v+0$(WC(glPJL z9lO5KE$KL$U639xT>z6ZzF$znDGI=hbppbp!x}@i>RL|+?ee3N0VuJKfUc*U`pu=q zO^A{2<@q}bOeu6E$w{vEqH)FnN8UC5gpCHpy4%@ay}hz>2nhts<_y=jtRHoPom&?h@H+&}!|L{|$BoX_#EN*9KHOhE2xcaozIQ`2A?y~-j4G(#N$enjr6)jUthy44AR z40EY2iCafT=w7eA`V0v~if9Kc78Ha$*13nIhkE45qiI4yLDSm-i-Ty9#|=uQhb#PH z2n5(ruO7go(s#d9(^DH4UW{K4&?)JUs% z2Yzst?FWj-B|R&NTj<^FWt3m4@;?CyB&AK>r>z9-U8%wwmnso+CXudCMXL}noU3rK zwgdeoMQHjqH(%&QZmqdWQEGV4`au`&kG!o$mZ?4abkrEn&JC57P08JdLReU(jGpA~ zi!#(21}LH;KN$z^MeSi*jlN}Lo)OGN7DeiptXn=OSY<8`jz<~as8v520gw5~^&rE6 z^x!x(Y*z5)(g5PM<4fBrSMCz0kB8pfpULUkj#fI{1f1p(T@Rn6>rggn;HYrm2-sHw z8@bmn*W(Uv)4geflOmYcng&iGYT%sAgxInab~roIMsM^JmH0u2I)w8Bg0;iQ3#f+6 zLg_Y!<3{FjR7Bx+Mg%FJCkzsmk@ZAF|Fk3BXNt6|C@E45vXa#Oni|wl4|Uv~PjPqk Y8{LjV8( literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/negative-state@3x.png b/resources/images/icons2/12x12/negative-state@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..347592a41f6158bdd96ef238f0e0ee1bb6f2541c GIT binary patch literal 1284 zcmV+f1^fDmP)iTo_t1m`l~8jkm%^n|B|u26DW_sA@jLhl{DUZG9l8KNO?AK8nbfg?XjvDw1|#0uVx7B5jQ#Hk8m`*RLnfrsgiU0WbA;!lpJeSGrwG z$eGR zv&7x<&HP7Z*DZRD#wAXtGM7#1k^f#`A>P)u1G8l^8>^de!tlnlECrx0{cU!#Ukfax zsJ-kv6ah6H*ZFnS;NENjezV(5{o}b26A_2)vrAk?B}uvBcFNgPH__U0Bq42lNCeSS5(G`7(wS3jYHQRsi|z#pVvsjNkdGW z+gQz;M;^vRS6z0>N;HI>3&eJss93uM?EZC2XlH1U(n(fC7`Vm%FKRi|~f9E6!x? zx^zWJ@X2c*awe8!AqFZp@}KYA%>P@-<)7~4@*l+M%aX_XZjBX&==>pq)WkdFx>6t# z5WY1YaK?Cd*8IMU+AS=3+NA#Er$@+>0)RnKY-{l$pS)29#xY`#mq=LFu_aFs7@JaT z`epVd7T{3^R}Oq_Sl#2FSB?NqvBHATFZZNDmE7$sVC!mWME=^z>guYIz1kP~&{?X5 zjXS^l^`5Nb9XQz9!Bg|l6>LJ$V&#jk(jp}v#=SJ?BhpPiHBk`jc&T2#sPzcK!HHs0 zf7+MSMaavCk}(cU)V|{1lK5n#>)a1dbZ9CaCS?=b+plg%Nu|@L=Px!%T?ps-oMLfS z6DgGrK5nAu4$LgWfXjvsIV`iFONvC@+!Zw(qZA}fCF<&6R+=M70G_oi;)8vLmnqg| zgN;FX`8ePuYD#DG-L;ihs?x|8R!q!6^*)4dL`D)ZmNYS^7&WzuOvp#qzp^Mq21vOq ufvKxH`Idy`Oj}SH71Z|3+4Nq_-T6O6Wl*846NN+o0000+1EOooCxbU(V6|FZ;&KNmL5dP0fqX!wlqiapc`>4#zzh^Ca0o__K^9Sz5xj;=15%J` z0hvh>=?Wq*+wZFSAQ|QoAb4HD31-uU!_4*oK2==mDI$^#{tzhh2OYso zt_*pVR4k_wT)H}z*ygODEX5KABl{=R6bl_|X@aSp58in07y7FNz#_; z(bVrd@FBS%(_D(s$w{I%GH1WXxPQwq@y?vEf_ELR;B*WL$4Prvui@u|Z+fA>&)X{2 zk~s7hvEB_-tO>M<`ZB5_lcOr3Eq!b|)B3*Mb{7suwwFkQ z!J+x2?-twkz0=2&4O*Eb;+)D_nUpK(4zJ7yk2JFEF>LDo7A%m9;Mbou^;k|Rwy>mYxUHbw3impY04jJkpLyf>g0>pz2 z#Dj+faPCPb=g3eJX-Rp&K@vqCACJf5kr4%Ax7+pjF=9zrhAdr{SbjgSY(-Wq%P5Mr z6oAOLA`=<&kQ#IAiRR}x|(ATVL+Q9Zy?^D1Id2@y=iG0TzTH>L(7zmw;^ zl=Va~h(Uqsg%G>ca{>2{?gYE z96HAiVop+#)exilU^T>)T!gL`2Pv1;H$rM}?T*#X9tEc6cU>|7bU+usYAYwwCp{x1 zX4MY7VFmxFVX)2_WtPctBrDk@L?%;MXSh0?ts=4npaoaO~yphi< zZuh6E4Rmw6OGTsy4p=m~h4fTy16R{~mZ`{@ZzJhrrHZf%P)EF9d;XkW4omeu1Q%Fn zR8pyJz)ISeMj)g&%XL)*ZW7!V$lR%-J_u=NUeU`#hk$`isCEE60Gd!2gkn`tm(YYA z^A&|byGU$r9bKviERY{eY8uc+J9QeVbwNzw_{s9iDw{H?FP_#ivI-E=CQB#~yi$-i zp9?XKk1XFjNEtp1LhCw&6fqF`L|Fot15^09qUpdUWW)i+mo-_WwEvar#=dvTax(&?NKyeE6i*}zXp0PV8wp{a^60=gQ}6JlQ)&;;Z6t*G%bpN3gdb^V zPIx2}Y8awZhZp0RZAa$+lr6)&!I%~Fsl8)Rdc4;4d=H9V=kgLVaA1TMdm}GDC{~c# z6Qk^!#pfuEn1(Q7-6t8^LWEve!CIjkFsyjp*oBo1b)^Tt$nS&nl^z6Ez@{C1rS}LoMk0epHfxLk0000< KMNUMnLSTXiOn90A literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/pending-dark@2x.png b/resources/images/icons2/12x12/pending-dark@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..5d752740e251df0a1095972f02377fdf40213b97 GIT binary patch literal 864 zcmV-m1E2hfP)8$IvCG|vItW(QKaD8q zrIi#>V<0$`N*$m_RS9m>H`$Jg$RsLEX$Nsb0!n|A<$P}9OHYEO!d6=Ur2PYMtkY1M zn|V-$04x-?Zje6HCekR+=Eln%1RS~a8e{&I#cplD-FY@S*??Hz?`095luVRpF8#g*q@kEh|n4$}z^e z-$bF%6t@EjS`7(OCJ4eJ21h!#6uhvnB~0?-rMuU?K~{6e;8Jtn=$^P&MM_{ zH=DX%O<7sCbB~7%^a(zzCC67|JtI!FNXDWi1=!@WN}OC7g+7ruu}9el`{Dt_wo|!Y zENtIG5TkAO+Q6UCa?O#m^PY0u#@T_Ri@m02Z~5ue-Q6JPM%;92Ir5gN`@lJS6P>hl zyTh4CDzVQ}((ZQd87^y*y7CYP{it<{!3!Rlr&00H*E0f@8io+yBH?!oHS{}(8X~2; qFvX(y?^deD4az;FHUDeSTm1zh1$x2x8sc*R0000M95+WkEJ|7X+a;m0G)rA9L^NJrmFP+VNv1cJfJ4u4nG!yXT&B?sotQ0~XOX{%Pf1PVr) zh!Fj!XDk$lo^N)V(A?1RQZgd|CiNmiO)s^zq+{P|=U>>KjQ62=L~IcSbT2#e{y%U4 zpOaua_)VTV z!;!p?kWOxsVH=>t#{`E2nRHkDNUg(9D|PrjV>u^M{oaBR`&54xnN#RI5X?A)(R4%{~A?cmiG<`{=cQeAPRbC4ounBu*;6Y+$ z<_-S}3Li*&LRiIE|R7qJKg_xM1Jzuy!ePK?M_}qL>1am^F)n24n&;@N2 zSQJDe%$C?9$YK$jzPO+~aY}Eq&{z#JmPh$+<5*n=Z7vRkWw~M4amHp%1P3Lht)-+m zA0DA5Cq10+)PHgDZ`YK%h_GdIsbYC>ZjTST>5{`*Wdr&krT@)o-BZvLuFcPWQ0UZm z*M5=#ukl+Yjuiw8C-ag65*Zi(_y~LHDO2*WdSots*ek@aG+`669DzfIzlI@|rGoo= zyr3=xwCo68DzAFZR{@6vp1V~L29hUCj7oZIL7RQaFM|#VdnJ}xNHio*NGLmdX$wI# zoLQ%U{L<Yl(&3aEE-8ThcQ`K<{UR~dz|HlKthC~xzF5elEj=M6DGN`5aY~);oltk+w}Y=F0U4EWf9hH&b|qyHdzvghj8aOUC=b6bYvog| zb$++vv*X7G&Z4{UXtLeM1_tLY7IbKDDju2P?mhB6zc@HjhF?TapuR)Y2+4p^%vGUoxXF!ZDq^(ky`k s)ydk507*qoM6N<$g22~ASpWb4 literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/pending-light@2x.png b/resources/images/icons2/12x12/pending-light@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..5a7706fc6a1c3cfb43e27ad61b3b91ba1e8c0692 GIT binary patch literal 946 zcmV;j15NyiP)_Ahd!Y=ovH-*v255C~Q#^L?i@3yLKT4Ewb!~Ec%=NDTt!#-;nnQ5(%*`q# zbzA{Nd9M&gbqK>z3NwBPKA*V)+^iBFIT%CGWmb?zAJIuazJKmhL4vx|*W#ckZj}O@ z)IreI)||{h5!9Zzz7dJyc_JVu-FokQI)Cr{rMbfGd6P48`KxEmjbpF?KECf9J+N~j$W2d!I-@Yd9&E?5NW8m=b{NhP~Wy5c#V7H`*|(ES^p?? zeqg?Lwa1bkMZ|ty4~5^JkgLLVykX`-!v6)F6lgM!*A=c;MS;}ot@fw~V2MCPHuJbZ ziL{BlK~y;zSR!EP58JPXGU9;n#t+FaRe*wUbFq8h%@w4{(Q<+kF$LK%1RTf_;ETG3 zn^#Ktk4$uJ|8RwJi#=>lCC40~-DcU9JJHFyh8vxnU9;c1K3G{?55`3>$(t-m4;BEY zW^3xAA<NT-zi~;*1iKvcVOy#Lj78Dm`h$SfZBHh4$I^GE_1CIv@rx znM}H0$HigG7(`ySH8=iOHXS*2t5WNnRVosBN`}DK05+{i1iNbL>!Ywp@PN`v*>21| zZKfCLNTiDc!f93EtgePdq9Qt8%`y!v3;{{{&2Ua|F Uc9KT;0000007*qoM6N<$g62uA=>Px# literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/pending-light@3x.png b/resources/images/icons2/12x12/pending-light@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..12778ca12acb386d27171770dd16c132900a1c0e GIT binary patch literal 1398 zcmV-+1&R8JP)Q18t&M18O3YQc&7IA;uK^!Dy(W7!5s%RVq@?#vcl{ z7yMZSL7^yW&L1Q-kS~z_Vi0@P#w(H&+dGxp-I?ioo9y0Ra+mC0l78TBXZB|HKKtgq zH=j2QBBKBGv#q9b_B)Q+1%f5H0#gCR={F8gaTt_^WMvV9MT;BPvmd-sit>CGcHqfV z?;TKD9mEMqhycZ)D1gs@dTw|j%=irnp+(xbWj}=@TVXTMP-2`TFJIXmK2)L|1JwNm&e8`p$U9Tl28z!@_#rx7cP&zT=#*&7fSM5DYQx_1Kk3(4=O1$_H{k~V)e-25_$qsD_)lmOvp-K14?lS{&$Vj9 z?hf}RgSf{2?nfT_?boR(>5Vml6PJA^;JjKdjAw>(umxDL#1{iYqupro19XpTNbD2I z4s1?(|G9BnMjzdM3kE;QtR(?foyEZCgV~E7j?@ft8slzJYCmG-BT} z%`BgUfoWw0u2YkBa6P-dn@Z^)!#eN_L!&3~A&01qQ8;%gGxBAadF1GvvnmnBbCjc2 zEL2@8vQCs}V!%$|_i6fY;K#$xqyL~Z;`M14pev^^*SeZ-aOtMuE+Hn^HLp#H)J-|G zQ3eMU)L(hHOW56FF9dzbuyu-8Y}n)7AQLu9>Dz&HI&CSY{fNWuD8UU;&7O>lrjuW@ zFa%$!_GFTyKB#UHT1V0@TLGo2ISB(K&Nb7fcSBmD44Xsui$m|HqD&yA;I)Yh5B_Kx z%7jfogHAahuMG^HIURP6Wr7v#^PrbYt|JpNK&0{VS?yh&J~?z|JdCx3V^)0_x#0e$ z{it#Pb#g>p$h?`qn0dPoNxV}-33Q(XHL(#X5_Eot>k>ydFI4-rf-DMf(@dka9ze&; z2T0Kpj;}Y5)TQ6S;(!~Vma2qU;@IF|9GV1K3k7`-tSljsLz2%o8jpF%3`$)}I|h|1 zT-seOTlDh1#valt^RNk0c5m;4~OU6u-8ia1jvLWM_`-b{zp(M zOMR8DE}>;9z^X}6=`OeO*e19NW0fHEBu`Z_+IG%wQ}%Z3Uf3>Ri50X?Q1bXy$Lv(D z^yrap6Z69T)W@aU(Q%}wbt6BBih z)j|KMcN2gbIO?InYIwyb$bcBcrMjtGYXo6UU6#w`Kw zv1TT}FG3R_2NqJ+E)$ZWdhhd(Ui~jPwqYsFZ0EUpB`_Tr+^}1&hbg7^$4d{|(tWv_ zI-g1`s%k=&(jF*_7XIO#lJWL>zmvM8%*sq%l2Viv$HEwc!TDG1;sO$A`un_dqZ%^k zGdJ};(~Vwe9TRT}!hiiiop9@Y^zV6r47-ms-rXhJ?Q^e@A% zq;P6-Svuf(kY3hNbV`Cbtb$HbK%rH1ZpHK2Y_#aS1JUnMHJn4l#{d8T07*qoM6N<$ Ef(W0GG5`Po literal 0 HcmV?d00001 diff --git a/resources/images/icons2/12x12/positive-state@2x.png b/resources/images/icons2/12x12/positive-state@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b40a50e26c7b22a7da3c0318dd13305091f8ae9b GIT binary patch literal 927 zcmV;Q17Q4#P)dxA|sr^^RsuR9S_JW1%7K;P1vApjl*=BTcT z;iqA<8?IrQ!MOe*ic~`!C&GjQ?D0>s%MKK`#xq}93iK7`hrz(G{T=vE*fq;*kEY7d z27~#zLF3Tykq|*~Gc{Q}CSWaRGa9%I-TNyWcb-(B16eh1^Wzz9xlc zp5>GpA~fDrT}bRpa0ZZv1=W#rlg*w;L~Q11ff6HJ(nUCgPy~ zc>9*;o+9w9Jq-L@()lHv0wMz2Kkx!Ynk^TSNqwyv{MfgU9T$szLgrT+_cODtNGpc{ z7rVrs<}Es-a0#UazYt(UPCFU906v&L-$-(yr4D?K(hTUIva+A2<>&x%uMO#N+jLNjTt|Bt`5-TKGN%|XV8v>o$zDsxh)0s>5l0U%NA zI}+|cx_)CTP5(qfWRYprHLfZU6JiJ;il&gTnM5p>(9AF2X2tPK?;zsa5yN+Y{+!=7Q%4DE3;=f9Xh8%Bh z#SN(ckkPuBQ-+*Z0>%TsL)Nk^=WdjLK@6D>gG+=R<*0i*OUrd}1{Bs-3t?h$q#*oP zaQNbNoeVhYKO>934jL`bk&3W7J3LDpj3OWK$tc{~UixA~i~y%URGs;u zbPXlUaT}8Znv;t6e3D*)!&-M>w#@dY#SJlH@R)2Fug-H8zF(bwj*y{n-tQ!^#mgkl z3DRxdCxwpO~*Rj`wub+fn_-?6IwYFQLpy=-RJ(4Q#@s9XJgcL&5J{^xCArgQ&iLEiJi6 zkl(K>CME5lz1`D*JuxJt<60)?)j{B`?Zx6s{0H)}S5&lY610sF5r&Gae64(&{PBv` zwBDDDaCc_kLc}FYQAPsm6js}Ai3G5-Mz!awm7Ac%*IHAUSpy7L?j@4K_}$yLp?9=U_2q$0^X#EWsekF zj3Vh9t?Lse^Y=orAyNPwQUnQgf4WA3j_xmT9(PkR*27PV>tX<~y7bDlDYqn| z;fEd4j_pd<0Z8d&k|HXMH`mrOy3|!B>`6{lv|%%k@ zK6wL&oGo%m1BFPX3hyZBl1ECh&s^lm3*|d9o6wU2iKGx0(uQ{!Vaa26od^8%!)CTx z`n)H?Df~=TJugiZP9#|JJX$P%$7O$GlpVFv`-FUn1i3gToQnN`AoO{7h5Bd9d*DzK z=Y7NxM}l087&EofwLre7)B{}*2C|NenNnM(}JPz!@G|{{MEy*bv%Tz!2O%(f)(uv8jgWWW#G#yoyz+EDWWDcHw{Ze08xx}RLR`^CF32aG+Hr}+URcb;$G4ii&o3jI$;so#HF2GZr q*kL(?HeK70c(2T!$ literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/negative-state@2x.png b/resources/images/icons2/20x20/negative-state@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..2f694036e17ddf91f49bec88fc04ea837cf333f3 GIT binary patch literal 1083 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 literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/pending-dark-blur@3x.png b/resources/images/icons2/20x20/pending-dark-blur@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..40f1495d71c4280e8f6a500ae24bdc6d0d220da4 GIT binary patch literal 1113 zcmV-f1g86mP)Fkdw~jpW09$l$!JZAA{|V4j~WxvDbxrYmq=f#*TL!?M3^1am3mDo`~VGrReY>o z--kG|cix5^dPeH?tSPbt9&4svk9ck_xCuk1PBQe&>sI3;@R(AfG^ermdlzBOprn%` zZ#;v;VajvJamI5r;gzs<7L|MB5a8I9glG?a>G`&AH4v+v9P1Rj#r|%vy5`3T_VpDa zK(QYCT8g>7O4-T*JQCI+C@Hn87}~5%we}D`7k_V>^vV`knp^Sell4t0VOD49@>kG4 zNC6D25M@bNC-0BYKCIPqsajivPtA%x8&B?6z(t6oDo+*#kD34g$HL)lj%arbJ;A|ciI2&%y^ zcuOsF(DOBto?!hQ9nl2BAPJXB+afGK?o&`t-73ZJzhOVO_~#d>fH?1XO03J;TZD^( zdU9&XL?*1pWyF8b4`g(w)j5f9P*4wrgZQnZn{)MCnk)2;32ksPq{8{HNSgrBd%`8- z6cL{|ZCR$08_VQ8o_7Ini|f8;%^3?t{I}JfH}#}So4LLxENODCorM$-aV$R_O@r6! zCSjJQB<9tn}%}G$i{AkudNXj`oD( zCM3;c=)`0mdO-d!9GB(}N{66D#3G}X1M$iZ*f{*rI67aBB1@?2$^#|v^H}1>ZJ@(k zdB|a0Y9WbJxS*8pdEX|Wy1X`o{TE~od#NRdI6F3X{vrDjsE}>;MO_9u0GRaJaBWF~ zRgs9FLN!Rb4OE1>t{#%aN!4ks8hZ7Rww1{CmvyYlnz~#{wt2#}&cR7dDU_97UhB}I fLx&C>{zLo$R4$0hX+C;D00000NkvXXu0mjfIq3w? literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/pending-dark@2x.png b/resources/images/icons2/20x20/pending-dark@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d96d724e18019dc12d43ecbaa79c5206890c6a57 GIT binary patch literal 1073 zcmV-11kU@3P)aO)QFTCq7O86x zQpx~J+ktjKEwo9~*s<@p=k!9F*p8i~bjf$IWnb=n{NlU!eFo^Oud@|_9x0bwi<{^6 zG?hfcP>vR}+3Q8>NG~&+u;;;c~~oC?{)?p7!biIRZ?zH zZbDcV(N=?k`UZTuysQnCqSrXEWIZSl1323SqHco4iVUiTyhjyngb)}7ZY53xRB2&9 zQvULIW=8iD*B4;!-CA6!nzw3kR{vdb>dQU<0K{f&!#Ouvm?r7OjxFtU(aWcbeY5)O4dM{OQ4_fSQ|@Q^DY{v~oja6*3c0;an=FYt0|W)66@Aj4 z0HDOep`O7>or4Q`dl$f1V%u^X=lBlV3qv>N@Z19UoJ~)Ehc;SxwK7S8t=Iv9O+B2w zx!UeGjqjsnnM>KZTieZJ95blu=7c;yj8!(_loW-F1(`*xN={=O0U5W>A0M}ZZYM#M zPG7BU^k7$-G2ei)jEPFH4W}$66xnEu*{l{oeE;M*v-mEYvMk*w)nn)W#g=N#V7VNJ z|ER|Ljdrd1ehZ+TCo};8 zG(R`B`Dpe=#tBq4&4kl$%&LCrL`*+`V#(LG7Xl;bXds}PK?#smr^>Rp_$^EcT($v4 zYv44O>U2?*ogJ~W3qBGaEJd)YbX1EGR2(vH_m9-Q1empR>|311IA#!QqD(mlp6n!x z?PR+pX4!QZW4ReuS2x3$WoHeu*v_+cB6QbvmoAzq*Kuw)FpG_z?bvzrL^zkU{@6lz z*?vz)UGr=pOHry9kc}1#=f?iVYrLP6gAuQfM_83`;|~hfHDI%B rvl%VNRc%N&e^-rOeSYh!ud~))ITZ4$DvXGW00000NkvXXu0mjff_vsQ literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/pending-dark@3x.png b/resources/images/icons2/20x20/pending-dark@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..2d98e3d97b4044f955d7e12f3f1fe063662e23ec GIT binary patch literal 1487 zcmV;=1u*)FP)bI=bQQUehffH zMn*Td3D3i`=(0R8KBnFmz#WFxrpVzIXSuENJFjiS02zqj%GW=f zvn+c8n3x2PW3ehTw#|k2r^t`24?=vZf=MW2Rsj(wAO(aF8=QOf^0hbrf|N)_aOKv6 zF}B+(>VyhF2N`dHhmHW@parK)Mu0$U@O-YGMvwO`_{PeQQ-Zq%!M&02JrXF8H!MqR zy8n!Bl*`>4ytMMmIB)HYfeq(nx1N)YI(772!U5p*h0>*U=!3olFI8)=%0*{7T;A_c ztW;MoSOTVG>&Cj-Cxe-$Y=YtqB41WCNJiHxf)16bjKqx<9iGX0|@pco24A&anP_I4DIUDtSq+l)}Q2C?x z-rj^EgMtF;Joe*e5k&Veh{MV<)&xU}A4O>s3KE7fHZ6tc4c&0=;3+G$24lf!VIERO z8XzyxE~BOBwDaCZ@UHQk|0q0cBD+2ntcgZ zBA*o4k9stE9~RhI49E@BZR#e>U%mK=6gNY5bogEp;a_~U7T8HBixKsFbPvbe)J<8K zyW~3!df|6J)4eN?p#Yyu*+e}bDLC$?9v7W(1b$2V68q5BCn!G^^?0OUKhn=cXC9*f zt#O`&Zo=vJeOa!ntGb82bEC;l=vQfuotTwBj}0RWNl=A*!u?eD{L;$(N!7WL3*sYP z9b5N+bgDO`pV_%Sh%5}$Yg#bqSwigXO{*ac$~fxkXnWZAIc4gkeH|x$G)Vm3RZ=n3 zMw4Wlk>PP9vXINa@%ioBsqD*1pl?gNAQ)#0wXqjQg2TN`^XByKv#-Djak?qL9hke= zFwJKfo0fcZq^7!I6!kwye;h0HO*Q*LZKB+VwX>~ViP zli^*8c=iecs)yGsv|sFXK!z5m6Ft<@#y_?s)2V8Pu_w|Q5gs)6Lq-Y2nnr==yPdg;gxpc-p^?*)rqDKnKU_+~U8ZdOECyQRg1f=t p%jG<`xuZM0mXVQ>k&*EP@*ihhyQ!tUKbQaj002ovPDHLkV1m*o#Q*>R literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/pending-light@2x.png b/resources/images/icons2/20x20/pending-light@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..e9ded33b35446bf4c11762241e4b49bb2d84a736 GIT binary patch literal 1138 zcmV-&1daQNP)JN z6iF1vUsX-_7|ASR7G#pe9WQ$_uw-^&VJ}%05kWz`c?%(emuNsx{7Fzm^dK?uAUKTp z4|q}Vq8Lx2Fi{vU3StzKRw1HJWSs75b{d0nV}i+rxy|D8vE-oTUOQwhOj@FJ;gk*&~ZU za*cMFpyij`nz=bORf{leG(a`KsO@Z*y)!*0|D!X!BR&KZVqDT(!}A}!o;y5J*eJR&4E5> z7&8(eq3DGdDoD?^(a|)-lm>KKx3b7MXfi5(S8XJqjTkB2MXaGk4GMB0H~Y+9wW=gq zixsFm3W<_Sb^9adunC9Z+ljBs4f zYs!mZIa?Cdv+H`Usfwwfeu4Sm!w1uq#++^7-z_k6@3sXUke9^(^@=Z5LR>k2;E_ORyY?70Fy$_}ow`@(a^^sBaN}{a~85vXvi}PGNn@1V(+3BYYdRlEB$v8TX zh*n&%wgHyVwbe|QFl*H+vx~*fY`?8)RX2l2 z`3D#uOicRHhI`RclcO5?Ql3x~&om`z0*z(&X2zM5J9h7m-MPJ8xHR`k2-(@0VL!}w zzVn^W_Y2TK0}V9LKm&CHgox2|=~^?TtTp$TAE89V1Y)!EJ>h5xgFMWcuueExPknKD z10qBugeA!~!gwnH>i`bTRSg!f!8rVZ2h5cy$cIW;5k=dM%Sl@y1PFkvFwKl4{x^h# zPzWotl|&PML=mO=qS!(K7MDLr;GmWT2(ijzu}l~%UNhkjhCVyanTT_Mrn1Q;!CX$P z8gh@aM>LyCRsP`f=O<`6Yd?lngE6!&NczKDQr6(lxQgw zaU>*Ow&K#n7p6wj5C9Ycpb}Ze;9iy=y7m3+~Mb7Z&ko@daW_ z*Qqnj%S(%EP$jBf;fiL=Xl7yhlMF#pd{{W3u4|?t*~-XjER%ZHnd23VRrZ) zM2zJ-i`f$|o!OL*u)WYGJ^s;?-LG4jrJE0Q=OMZs)zPE8v8z$8?EKfmtFT8%eKmR? z7xUe^$mq*74Y<2xYnjKR*Nv&hRc)%=b0Nb7q?)akW3~mb^JNo(6r+^ zV|~4}+8@NW&lR3I!g}iZ$PW+@z5U~h@>gQ}F}*M~as~q8oq_Q;o#8CE&7V@U-f_3@ z3Y(lAcQr5(xkuK8isqcpq>1}pT6_t!9B(iF0l9DTp0ZA$B03dg7aJJs@EhYvIPdOp z=Qe|ahjvX13&g;k1(4tBcSLy-j#>Y@f_DRqHK;Ri4(rZmnq!`3?MXOCn_PrBH8-Ko zzzmvoKIecR@#^nMSnglf;JGh{9zvZ#i2}}jOgW8t_4g!9r077q z`+5>aN{jmz0h=HMNV(?s3eAa{h&y5hCG2~3^(0JP&OpSfxp(e{`Ki%8H za}YoJ&7rhx=d%?f!3pP;e#iN1aP$q%gJ2ipX+0?xi&mGv-1uZC{Jk{gMa?R|k2RHr zAaD|wPIADn|GOVebT}OrN3rHN#_;RFw|JJAJO7t$Wg*gAlfKCAmW$CaebX?$E3EFE zDs@tvvLlB=0*^9f!LU!C?duEWTn>V>ebY@+S99xZwy7m5Y7s77 zWwmdP(bg{5Cmd_q>~ij1m22|TvI@`-Elo4+yoNF4oxOvfYbk|cqIYmC?o9Qll&s1f z>yFn>wcP#rru9O1f)T)Hi;Y6Gsq}|Rdchtb@0A6->}(@8|8-&V)4z1*s4BPg+tT8L z7f&T(&P<-l^>n@R8Z6(wm4yhQR<@L^%6@!1Gg?(bAW(idALpVw2vM25KUsG9#>`Bp z0=;rjYR{HsECc3+jr_o@a`X8hgs$S)8OH5awKJuud33K~~oXW7eq94@lC1IAj+HaB+@0iDHb zCWYsAE095pW#(qD>|aq!0r~usOsAHacqI_nkm|{%)W~8=HX>30z^YVs{dX?Uib-JRvOrY`)4l&xT2~fITTLRVf>l#UMP_ v!b-F;6k>x(9m=nGt$_v_XrO@xoJR z8$}ey-mj&f2mHRc)dHX@9lb1H(h(zj;l&lzLK@$-JN+K&wKOcjR8(| zsuxJvA4+NYzzBsfq|X2Jb&3wp&Y^K$L#?KafhWNbTWH){M(G;~?cCh@V6_QDXkb8@ zA=g$pQaC?IKQy$hlcqi>=s*mGvBG$Vpof&-nO*AEO{u)S&S2 z%t8Q1ZLAFoC)&-g)GgP&CT(v__DWQrzJRmUbzTgR3E=iVy1Wf1)K-3VD}a=cnfZS0 z0t^G_s{5 z1$mBKb0WA*b?t1gXNog{XM=5dnIbM=+qI6;$qjY~3=fyl2LG6;mal|8_tO-4xzpI` z`PhJ}?Vj_l24dy8UQ#Yrg_C!Y;#_6zt+00xl{W#(q3O^u!fuk~CuGZl1`Mg0@5)yY z!Gl7etN-K+n_=%+yaUPAfSQ81fD*V~CvES;FmToKXAD*Bd|lu9uu$yvt~ors>sdrd z#{%qL@<>+XR&-nvcjD5{*M_U;i+=Cp#A6#_=_Yz7>7%*olW`?0mKVjZ+?17jKcQ%; zv0S(hC(u)X-Q^IWlj_w`V$2*{p$zw>a7vqJ@#^2pg$6{39zM1aR*G3+os@#66rheX zCV_kV_;Z;l23YBU6lXWq7YSjLBi+Bpi(=tCn55=+fJHR$xz{Av?6)Y6i!(*Wvqf|hVgn|u|NN)Dt7e95>|R`15?6NLPHI|) z0fe0z(>2t9xPW8MSf?<+WcJ%qXaWtyt}HU-lECq`5GU>e&1{tCO((r1Q{kIJDBxfD zye(%4X}1%40V2eZHFo*ia)kk;4S7X^*y?pw>6vEafFsc;3H1C%`5lPRpy@4(t2SOkOIeJE=rqMej}>Z zjND05X5wc#-~^E38W>U%Do1cGr?QC$*P{BwI(EKMsU%x?uy}MnA!u?6s_$KlcMRY? zcG|S{LJ)JFSH_#ajO5tat?pxE0IJxSlx0%+1jU7HkxGwEwGTMaYdzO}(3iND(1~mF z#ro@`TV83@f@v4^>!hR__G`#MvY(R!cMQ+4nrv>zapyBvw#0wGl}7vb+o?|Vy!8mc WvjCDbC&1hQ0000kHO+Nt@w;qra4j@HJ z0~8^_1#X-oRZ5ZCkhJcl&4Hjo0*Tk&dAzr-?OEH|o&Dpa2mdbi&d$HzzBg~)yf*-S z^wCEjef06%K)@kj;`^H?rIj11I+zzV%@Au7~nOG)dY%>Dgn=CWJbPiCQGbVWun7peVS+-gw z$?rf)NQJN&QFJ7V9YomS|IbFx3lO#vtmeW#Z~zIbo6~cvkOC4DK6`8Ngsbq9qRDr3 zj`&0=DBBtN_};r8Zin^b)YOQSP(UGu+u!qt%4Xdkl1e)f;qhBvkwn#N9i1v%msRKP z`UfBX2{CZyyD#&uBd1V`iS~DB;cpM#DXu|G#3nqxvM>b-rhJ`|M6Im)HLW%05wFVE zJ0zY!#bXifMiyQA^0V>3eBgLXG@j)jFD~iGggez3os6S?zW;u2_fTHrRa94W;}%D~ zWt7USV(nzJLf-B*Sq2+D9;<2L3BnZ@CceITGD0`e2&<}fS%2mUgjwG-!DF#D>18#0 z;0@juP5Uq=%W((Mq;=Cv>7HIGohPZ?ppi;M z{90Ijc3t(gENd-IJP4tL>44sJ>r@8H&?6L9N(H6FO5>S`&yOvaJ_~Dybarn37jPo1 zejs78&Lg@yXQcB4dIafuWDAXFIvw44FjKq{*3R1B+iE=to1-g%;{?5|{3o?DDmv?L z#XJ3kVQhKv8ttd&wW6|Z;j~HH`iZRNebs8Yp`iMKgsq%ts)&@LCu^4tlmML9%cR8V zd(*|TVHczgt+@$-`JlRiglQtp#^l{NkTQ7P(kP#|jd}f#>Ea!T0O_jTX8T$K!ajJR zne;$pk6TLoLVu5I#S0rV#d(MdTNnrXA{`#0fC&Y?C$cQrf>u;^C0>Od!$cdJ&O+NS@QY0=1|+7YsI1v~Cw5 z0qT~y9=zc!Mo`^A39J46zqD>cH+4o`EwRXdeUqY(@XSaR8fENU#4=JE>Jbl3!uu+4 zHwh%%v8gM27!0sU5+eh25un2rEolFZor@s2xnrkVPw0e&n?jA2KxnFniF4inNxHl_ zGdD_-z20@;h|a}<^HcuAO<4W#!-LN`7sDoMtz+XoR$0G_$8j#Yfg>?`%$hPF<*+uP zgmbmrx~|r$VjIVg8fa7Tg{14Y0e>V09c%F4a#)*C!oSbXIv_wcmMmon*gBO^)c?#k93VJcaLPpw86(XpO32ulFiY7I@+ZBlX3I-aQyod* z<(B~b*^i964G|FOw8WVPJ?hUMjyqsqJ`Bc(Tjt){dR>?sj#%)I!$SCZm}&W0~4Lt*-0ZHDPfpSx*XR7>?@TI===pQ-}xT^S)=q7C%y>Y=s!V!;*G z%P4WgoIE;w9Ob)Ra&Tw;xxadN5ZEIl)wQb>*zbC|v>r&`K8hO!ee}^sAAR(3g!msZ W (h/expect (h/get-all-by-label-text :status-tag-positive)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Positive")) + (.toBeTruthy))) + (h/test "renders status tag with negative type" + (render-status-tag {:status {:type :negative} + :label "Negative" + :size :small}) + (-> (h/expect (h/get-all-by-label-text :status-tag-negative)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Negative")) + (.toBeTruthy))) + (h/test "renders status tag with pending type" + (render-status-tag {:status {:type :pending} + :label "Pending" + :size :small}) + (-> (h/expect (h/get-all-by-label-text :status-tag-pending)) + (.toBeTruthy)) + (-> (h/expect (h/get-by-text "Pending")) + (.toBeTruthy)))) diff --git a/src/quo2/components/tags/status_tags.cljs b/src/quo2/components/tags/status_tags.cljs index 2d9f525a5e..b5fbeb28ea 100644 --- a/src/quo2/components/tags/status_tags.cljs +++ b/src/quo2/components/tags/status_tags.cljs @@ -27,15 +27,18 @@ background-color icon text-color - label]}] + label + accessibility-label]}] (let [paragraph-size (if (= size :small) :paragraph-2 :paragraph-1)] [rn/view - (assoc (if (= size :small) - small-container-style - large-container-style) - :border-width 1 - :border-color border-color - :background-color background-color) + {:accessible true + :accessibility-label accessibility-label + :style (assoc (if (= size :small) + small-container-style + large-container-style) + :border-width 1 + :border-color border-color + :background-color background-color)} [rn/view {:flex-direction :row :flex 1} @@ -45,7 +48,7 @@ [icon/icon icon {:no-color true - :size 12}]] + :size (if (= size :large) 20 12)}]] [text/text {:size paragraph-size :weight :medium @@ -53,41 +56,51 @@ :color text-color}} label]]]))) (defn- positive - [size theme label] + [size theme label _] [base-tag - {:size size - :icon :verified - :background-color colors/success-50-opa-10 - :border-color colors/success-50-opa-20 - :label label - :text-color (if (= theme :light) - colors/success-50 - colors/success-60)}]) + {:accessibility-label :status-tag-positive + :size size + :icon :i/positive-state + :background-color colors/success-50-opa-10 + :border-color colors/success-50-opa-20 + :label label + ;; The positive tag uses the same color for `light` and `dark blur` variant + :text-color (if (= theme :dark) colors/success-60 colors/success-50)}]) (defn- negative - [size theme label] + [size theme label _] [base-tag - {:size size - :icon :untrustworthy - :background-color colors/danger-50-opa-10 - :border-color colors/danger-50-opa-20 - :label label - :text-color (if (= theme :light) - colors/danger-50 - colors/danger-60)}]) + {:accessibility-label :status-tag-negative + :size size + :icon :i/negative-state + :background-color colors/danger-50-opa-10 + :border-color colors/danger-50-opa-20 + :label label + ;; The negative tag uses the same color for `dark` and `dark blur` variant + :text-color (if (= theme :light) colors/danger-50 colors/danger-60)}]) (defn- pending - [size _ label] + [size theme label blur?] [base-tag - {:size size - :icon :pending - :label label - :background-color colors/white-opa-5 - :border-color colors/white-opa-5 - :text-color colors/white-opa-70}]) + {:accessibility-label :status-tag-pending + :size size + :label label + :icon (if blur? + :i/pending-dark-blur + (if (= theme :light) :i/pending-light :i/pending-dark)) + :background-color (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-10 colors/neutral-80-opa-40 theme)) + :border-color (if blur? + colors/white-opa-5 + (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)) + + :text-color (if blur? + colors/white-opa-70 + (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}]) (defn status-tag - [{:keys [status size override-theme label]}] + [{:keys [status size override-theme label blur?]}] (when status (when-let [status-component (case (:type status) :positive positive @@ -97,4 +110,5 @@ [status-component size (or override-theme (quo2.theme/get-theme)) - label]))) + label + blur?]))) diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index 4c8a624307..24af045a4a 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -16,4 +16,5 @@ [quo2.components.record-audio.soundtrack.--tests--.soundtrack-component-spec] [quo2.components.profile.select-profile.component-spec] [quo2.components.selectors.--tests--.selectors-component-spec] - [quo2.components.selectors.filter.component-spec])) + [quo2.components.selectors.filter.component-spec] + [quo2.components.tags.--tests--.status-tags-component-spec])) diff --git a/src/quo2/foundations/colors.cljs b/src/quo2/foundations/colors.cljs index b136b1ab60..6044e0ca26 100644 --- a/src/quo2/foundations/colors.cljs +++ b/src/quo2/foundations/colors.cljs @@ -139,8 +139,8 @@ ;;;;Success ;;Solid -(def success-50 "#26A69A") -(def success-60 "#208B81") +(def success-50 "#23ADA0") +(def success-60 "#1C8A80") ;;50 with transparency (def success-50-opa-5 (alpha success-50 0.05)) @@ -162,8 +162,8 @@ (def danger-opa-40 (alpha danger 0.4)) ;;Solid -(def danger-50 "#E65F5C") -(def danger-60 "#C1504D") +(def danger-50 "#E95460") +(def danger-60 "#BA434D") ;;50 with transparency (def danger-50-opa-5 (alpha danger-50 0.05)) diff --git a/src/status_im2/contexts/activity_center/notification/admin/view.cljs b/src/status_im2/contexts/activity_center/notification/admin/view.cljs index 46cd18c86d..b453cdf965 100644 --- a/src/status_im2/contexts/activity_center/notification/admin/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/admin/view.cljs @@ -49,12 +49,14 @@ [{:type :status :subtype :positive :key :status-accepted + :blur? true :label (i18n/label :t/accepted)}] constants/activity-center-membership-status-declined [{:type :status :subtype :negative :key :status-declined + :blur? true :label (i18n/label :t/declined)}] constants/activity-center-membership-status-pending diff --git a/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs b/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs index f1e433c778..9dbe83c65d 100644 --- a/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs +++ b/src/status_im2/contexts/activity_center/notification/contact_requests/view.cljs @@ -63,12 +63,14 @@ {:type :status :subtype :pending :key :status-pending + :blur? true :label (i18n/label :t/pending)}] constants/contact-request-message-state-declined [{:type :status :subtype :pending :key :status-pending + :blur? true :label (i18n/label :t/pending)}] nil)}]))) @@ -92,12 +94,14 @@ [{:type :status :subtype :positive :key :status-accepted + :blur? true :label (i18n/label :t/accepted)}] constants/contact-request-message-state-declined [{:type :status :subtype :negative :key :status-declined + :blur? true :label (i18n/label :t/declined)}] constants/contact-request-message-state-pending diff --git a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs index 1cb3c4e498..16648d0c40 100644 --- a/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs +++ b/src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs @@ -47,8 +47,8 @@ :key :danger} {:value "Primary" :key :primary} - {:value "Success" - :key :success}]} + {:value "Positive" + :key :positive}]} {:label "Button 1 label" :key :button-1-label :type :text} @@ -59,8 +59,8 @@ :key :danger} {:value "Primary" :key :primary} - {:value "Success" - :key :success}]} + {:value "Positive" + :key :positive}]} {:label "Button 2 label" :key :button-2-label :type :text} @@ -122,25 +122,33 @@ :message :with-title :timestamp "Today 00:00" :title "Activity Title" - :unread? true})] + :unread? true + :items []})] (fn [] (let [{:keys [button-1-type button-1-label button-2-type - button-2-label]} + button-2-label + status]} @state props (cond-> @state (and (seq button-1-label) button-1-type) - (assoc :button-1 - {:label button-1-label - :type button-1-type}) + (update :items + conj + {:type :button + :label button-1-label + :subtype button-1-type + :on-press #(js/alert "Button 1 Clicked")}) (and (seq button-2-label) button-2-type) - (assoc :button-2 - {:label button-2-label - :type button-2-type}) + (update :items + conj + {:type :button + :label button-2-label + :subtype button-2-type + :on-press #(js/alert "Button 2 Clicked")}) (= (:message @state) :simple) (assoc :message {:body "The quick brown fox forgot to jump."}) @@ -148,10 +156,13 @@ (= (:message @state) :with-mention) (assoc :message message-with-mention) - (some? (:status @state)) - (update :status - (fn [status] - {:label (name status) :type status})) + (some? status) + (update :items + conj + {:type :status + :subtype status + :blur? true + :label (name status)}) (= (:message @state) :with-title) (assoc :message message-with-title) diff --git a/src/status_im2/contexts/quo_preview/preview.cljs b/src/status_im2/contexts/quo_preview/preview.cljs index 2270f58e74..2e04250d85 100644 --- a/src/status_im2/contexts/quo_preview/preview.cljs +++ b/src/status_im2/contexts/quo_preview/preview.cljs @@ -1,8 +1,10 @@ (ns status-im2.contexts.quo-preview.preview (:require [clojure.string :as string] [quo2.foundations.colors :as colors] + [react-native.blur :as blur] [react-native.core :as rn] - [reagent.core :as reagent]) + [reagent.core :as reagent] + [status-im2.common.resources :as resources]) (:require-macros status-im2.contexts.quo-preview.preview)) (def container @@ -212,3 +214,36 @@ :type :select :options [{:key :primary :value "Primary"} {:key :secondary :value "Secondary"}]}]) + +(defn blur-view + [{:keys [show-blur-background? image height blur-view-props style]} children] + [rn/view + {:style {:flex 1 + :padding-horizontal 16 + :padding-vertical 16}} + (when show-blur-background? + [rn/view + {:style {:height (or height 100) + :border-radius 16 + :overflow :hidden}} + [rn/image + {:source (or image (resources/get-mock-image :community-cover)) + :style {:height "100%" + :width "100%"}}] + [blur/view + (merge {:style {:position :absolute + :top 0 + :bottom 0 + :left 0 + :right 0} + :blur-amount 10 + :overlay-color (colors/theme-colors + colors/white-opa-70 + colors/neutral-80-opa-80)} + blur-view-props)]]) + [rn/view + {:style (merge {:position :absolute + :top 32 + :padding-horizontal 16} + style)} + children]]) diff --git a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs index 9198322121..b9fe3172d1 100644 --- a/src/status_im2/contexts/quo_preview/tags/status_tags.cljs +++ b/src/status_im2/contexts/quo_preview/tags/status_tags.cljs @@ -3,8 +3,8 @@ [quo2.foundations.colors :as colors] [react-native.core :as rn] [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im2.contexts.quo-preview.preview :as preview])) + [status-im2.contexts.quo-preview.preview :as preview] + [utils.i18n :as i18n])) (def status-tags-options {:label "Status" @@ -25,32 +25,36 @@ :options [{:value "Small" :key :small} {:value "Large" - :key :large}]}]) + :key :large}]} + {:label "Blur?" + :key :blur? + :type :boolean}]) (defn cool-preview [] (let [state (reagent/atom {:status :positive - :size :small})] + :size :small + :blur? false})] (fn [] - (let [props (cond-> @state - (= :positive (:status @state)) (assoc :status - {:label (i18n/label :positive) - :type :positive}) - (= :negative (:status @state)) (assoc :status - {:label (i18n/label :negative) - :type :negative}) - (= :pending (:status @state)) (assoc :status - {:label (i18n/label :pending) - :type :pending}))] + (let [props (case (:status @state) + :positive (-> @state + (assoc :status {:type :positive}) + (assoc :label (i18n/label :t/positive))) + :negative (-> @state + (assoc :status {:type :negative}) + (assoc :label (i18n/label :t/negative))) + :pending (-> @state + (assoc :status {:type :pending}) + (assoc :label (i18n/label :t/pending))))] [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} [rn/view {:padding-bottom 150} [rn/view {:flex 1} [preview/customizer state descriptor]] - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/status-tag props]]]])))) + [preview/blur-view + {:show-blur-background? (:blur? @state) + :blur-view-props {:blur-type :dark + :overlay-color colors/neutral-80-opa-80} + :style {:align-self :center}} [quo2/status-tag props]]]])))) (defn preview-status-tags []