From 32a718953b67bab4bc7760897acb0aa5e6ed9b6e Mon Sep 17 00:00:00 2001 From: Dejan Date: Tue, 17 Dec 2024 11:31:50 +0100 Subject: [PATCH] - Added todo completed animation when child completes a todo --- assets/animations/todoCompletedAnimation.gif | Bin 0 -> 19210 bytes components/pages/todos/ToDoItem.tsx | 50 ++++++++++++++++++- 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 assets/animations/todoCompletedAnimation.gif diff --git a/assets/animations/todoCompletedAnimation.gif b/assets/animations/todoCompletedAnimation.gif new file mode 100644 index 0000000000000000000000000000000000000000..02e52230c89aeb70d96477696a130c693d0530d6 GIT binary patch literal 19210 zcmdVC1yq!6*ET%T-5moA0}LrGq98+ew{)k1fP_*5Gjuo70ulxwAT8Y@AR$T(rG%&m z2q?~XfqLKG&-1+B_x}I-*LuGnuEiSGtSioQ*RhYi_obqyEOps76O;-1iUIxp!GOXr zAmCpNhNA2gR`&z;48z-i;RB9m82(0#P$TAI2S&6BBieQ`>VlQQdx{_O?+C^Hy`UU-NKCYpF$RxkGF1xz@&0?X_O*^&aj0F`bo8os}+~l^&hd zF5Q*xUkC7cwO4neUw3y*@5uv$if;xh-3IRljHaiJ*4m7|y)yd#$@oi?$=hc0l>v*) zE$fjX>-UqkFPiM1jXNx$9KJ3%VMbm0qFsG3Zflh{kuPsOf9h8->)%-AKML{x+8Njl z4IE_;9E0AO;Jy125xgXW7HTFk$0-VY9rz1^^$!Fc{zn@5l|G z;6%)DBfiN-gp5Z{!XnY}$SPxGrwnrGD(W>Xc3dc7Bt7vBPvWw1B4$7JNqyGnwd}Ne z*##eRo?Ogb3Cg$ocz+94HW5%h9$cZZU7`EE!n3zZ{Gictc3~+RYC-tym`ouB)tlNXSm?80l zVXfg2=i4vVtY4~zO}J&ga;Tf0W|;-I&MnF>L?$dQf)~+jOH1IT6@fLjytSmTb*UTc zx!xPg;P;OmKJeWB)S$D+<8rtHK3ZcxX7WCs5I%V&{Ov98k5%xGb?BKQfQ-&{;!G{h z4tfg=y)TB*2E%BJVYI_A*Z+)z2&Yh)NEM*@?lfO$ZPsRH%}gJ~DTbmL=&xiJfz zm=!Q)mG%4pKCod{*)eP2e>>PPYwVbHFlL<{v&D`1z<~L{jQPlp`OJ2#nzqNrs4dB12@qep3pzA-C{{O{a0vymBF3!1O-~iY8 z%P>H|7nomPVE;e<;`~xNARQ1chzJBCUT(xEh%LCBPZX4y!Vu+j}phNtB(?g?u=l;iEeCMM@G zOV4Kbd5iN^UIxj7U?2!^3-_P5D1sxJ(pfDAYdGN6Es2-&RBKE6;uyr-=3PV}D)GZ! z!M|@&Rj)d_svg0?in{Z4vZ&Qd!e?uK=rc$so$}5pi+a7wusvY{-}?LTJ{>x)O!ZTS zo(K|hX_I7A$_6{Rzn3Tpx(X5o@d5X5`*r`W2>k2p!2QwPRAij$iZJ^UB~(k|0o5R) zw=W4V1Fg?Jjy;%$6G&~BCx}tLiI3Sf)sCRxJUKBN$JQ*N)2LCD z{`7hfDRNuX&!uEzDw_FfZ_^e9eq52oHPoF;k{)VMnNjK9vc^XWmP*%ECGJr^ej5P^ zHuvx<>RN~(V))J)pNxy{i6)oTnjbOg?@i{^K($GU)DC5fMSZ9^t|B2vQ9jY#qICFU zL1MsiBtVye1p#UeC_zn8R|Jk@fJ=ByaZeNlrWQsCY$ys$V>Lerh&+*WS0F zZZmW@V~eGBGVWU1KgD)^NTEqx2WMop^R1arjx-)CQiubeCWWtOk&%lFU(XcpqN{jv zSap)rI~ehZc=tsmiT6%yCCR(1Guz81QNa%pk9Jy`zaWANG206bffwy2pSmxBTb}LD z&G*DnCbbx!#4fFxWV*DzYVJ?_Wh&=tCjycNNr6OwUE2R^mk2Ou^}(}U>hP6e3GgUU ziX;}~8wp6kiH&1dAag*&QTQn^!A#X5sAudPw%c#38-GZ z8aDmmS{gMoi>XZp!}WwvK{9636?>b=A+l@r{1i%rbg{TW41N?BCwur$bk*N$Z;K4$ z$e3aUe-fQB42Hb(t&%RSvwS3Ce7DN|_6|bo=Jw)?)@L`fSOT~A4z7H?xd2-`5elrk z6i3A$q97ZR0UZtd9mxToaS_A`x&l)Bhq@3@|KKk^+X#G_nosNsklr{3(mGfz1Tb+7 zAA%(?1$QWoOsT{oFd1hg3sw!60PQFkbYD-OhwUrD1%Fa`1Zd#Hxs;>Y__~z(exH1_uA`;B3F$YnHtf=1A9Q zL7_)TCsaf;0e6!>da->+Ll=>ff}Tf;4eXJ3iQ_X|1y^Qst%l#DBA)Ua-MuzKm~m=U zH8R`PS&myJ8!dgi`z1z|ph2+a@OccMXU~QfGy00WUnKJ+jryxjwKTBk(KDM0Zq-nd zQ{L}M={Fh(VF@C$5G#`FyQD8b!P}4d5`{3u)%^w0ref3Z)!V8uE--j#S}{WdvCl z1;C1PVbv0A5JN8MwXwT+3og3x?i~I0NeXnw<02A!uQd{3TtigJ(1Vo`l#;Y7G|7?H zOwUqavvHE>&ZGKu)1B}kF4aH1y&xbtIgrM`NRCXP7ST(Df||n4JSUtE><~~hSj(wI z$E6#?{)g~%!Do{l?4gonK&%XUM@CWvaiCIorv%vRS|U8`D8pQ-rqB(^w>K&!_`c_jt~ zJsCVYM+#Tg+Ig87)~~Y5aw$Z_?7z?Hjd=xapreQB$_Zb%)Vz&Pc4quW>7i0q{E-wd|n8+`;ty)G9kRH9(!RyLMjy9I@O%@vD zSkn$;2Je%_Hio!!<-N8`-Vy3ytYF3ZW?uH}}$7x|PB?#4H(l!tDjPP}~cmbg=4 z7~Y9t3W98Et?=gUIci}SA~#O;cc(M&!`W&1jD3;D<_2;5#b%5=2t1>Ei%37qwoq;QgSS4!%f3xl@};lX8()Z@flM3^$GbYGU zX~H~!ATv z@Rj|)3zANNx4vTHzN9zDi$KlU$$RRB>ZdUpbCdEYq8C%s=~;4?9eG%m`!6Z9EC%rS z;!eb><(?YY{s_O4Wi#ExO-jhrl(j6BkM3@7<%Lbi)yXX(dn*0dEegZEWq*8CaaJuf zWu-SvPR3Qwl=0t*hRdUpE@LyZ$OSNdd>#e6&GH!zk#t2;d`{(7pBv8?E^*xUmeGAE zha#*Un+wOf{J9>Z3^BCOZE=6VmB(peA>67oJ421YFk7_y$?wY87fD^Xj*dm)wd)*= zuUMb#Ksp6OT`!B<;Ew)>r2ta?xl1f zlh>nJvx(x75gETgrFp?d@5q)W@d{xeJeeA62u6csA}rU9#(~32)IutxaA~jp$kvl8 zW8kH@^1hhHIBKoTkoLOwX2n_tQ$|>s+R3!Tkb&S0-i>T|GbL{2;UiH4EGq5kxE$Cc zE?xS2FuHYpt*&DoQTlKRU7KA+RF=>!tI~LH9J9cUYn)UxE_y*7Q%)uRGy4?sEfimL z406l&ZQ+QG$oudC7?Li7X>KUL>I$zZg^7sBRYDgVEg@+Nsm6_}?Z^7XE&LDL-q7x7 zBU2fzyxj^aS>ak}an~9O*(*EsSVlA(a+dk71(s#{aql($R46E*Pjt_DqQj=?e){#)>A-|2zhR$G8mL1=(O4iZ$El*%`~b+ zz#R5)oC-#QT0K^IbUoLTl-tH@Jh|vOAsQ?h&{!)hJnbzk9^WML8^O(&e>;!Uqh zdPkABbREX-66Ro&Y56c3=Ib4GMb65J%J57ovz|)iMFurfC!$zxR1C}QupU^eK8gI2 z7=u&Lq|Q@j6HRgH3A8kp9?J-Ar>e`6o^NsqoPJ;K8j)|jP`TF3vZ}>`i%}A<<$!}c zPU=CaJP#Gku=$f|@pwa;#Zp%Ibucd2Xh?HtE!D{i>X=LOXlO&e8r`d(@BFYfE|uqd5$!>a!;l z;xlkGI`hmvLABDwecVdbM4h$MWFy9UVf8NRRLW_5mg)vs7t3{N`Qp?Yw)8EGpKeK) z^Ybe?HkFs-+!?J_w7Y(19V$8OVW@u7Vc)xz249hdpa*$>nI%xGmw$ITdpwaHJf+54)pmcFyQmkUYbtLHMasFctPy+YiSGBxn>q$k5M%woMrQ4_ z6BH_v+R&{_p-KF8vk65yEi>mDDoFV8g5l+gv_v?g1srn>L`7^I<%A;l%Wm0dj~p}7 z33ZmDG|V(NMNRbDN|7-6biOjCV)k`BK2_bsEj{z{p#4g9#qwc_=pfcxGY_hT-bf`s zs<)G}dyJhsv>n#kGE<=&>TgBv?6vMI~=2LeT z>C&CB(V6bM%~pKxCQ9D_FtBUIo*vLG|0Lbw)@m_b{jtM{V<0~_kDItE>=xqsxN%!~ zj^QsgJSR%PASlQjWbmgNBEY6BKtc{ABov%f7H~TxkdTPE(Y%NE_XC^*k%OK*z&TLT zmRJm($3%&(ST%!<+8hZV*{L#;EYW;9=EFVO`U<@$DXlH(ne7V2LfD-jzC@olhQYLz zbe)q1IwnL;GaW9}M-O>`Z^&W(<*Y8~HhS@6@B3R$aZ-F6IIE}hDNZf6!Th}n*I zP*Mj~s6n_R;!v)`raLrw6I~=pA7VEXJ$32QNe{1P9y&Jp3p29|RqWYR=~1bTcQTCm z=#q=j-6mP^@>iZx(i68b6!vfIN$-cFCH zCn1v_>?BcZEFUZp@k>L`vpRgeIe(B`M811NFuA$&8@p@Nf-COe!FxNtIKDo%C1 zdDtX7F}!$HLyv+3okTW$NI^GANk|!v!>B(_k6C**eu3nna_Qx-g!;OP1d{2U_Ub=+ z)((M(E8x7^jGizuP`5no`l`K`8de!o<0=?0~5`AzxD<)UQay10IC``cso<3L{ zDatnqNmSl4;z&h6UCP4ksw(vm0xgvaoFPFI*0ACOP7#5H$gBzqnW7%vvI~ZNOY;5~ z`1G+^}x}(5r`-DLsNWMFt7NdtV2o zhQmBGlI<8A<6Q4Nm92Lx>#)ShXqwVL{_XF6DHtaBEodesPP& zXDR{TXB-9(xQ(_f9cFBk3@MkCa2`GzSFjwoO?Xw(-&V@s^?*uXUUx^XICBXZL16r} zsDoSOfnY*b&0-c8t#D_y(M_YaP~F*t%DH6Yw-4cblCPJ;;0k#$`W~O3I;;9rv2CHR zjI+QK`59TVEt6Ne?VF$|40DK)PEmMCu%uMB$ux=$y??HVjcB=Fe zm1jygGqK>VqogQ~3>Q5e(Xn(+WnRbnRrTd@)6@iJp>(Shk3N8sbKw|DrFsE0iw@TTkXbnB!_%qHa`t9JaDu(#D zm8FW^bb)WI8bo?GiirJ&U2jCn4|?Y9YF2NQOxsPNn+D$R8ONiuuRK=SW?GwTqqO9H zBG*oElAcdec2BPz|6vrpCMDc>E-d@DD|3gf+W>1X6RihJAJ{ebRT+bGZ-vq&KY_hL zC^gh;h%6^ow88qZy0<)I!xgSxCaXx|r$;{;>f)|siHrOOedp;Q7{mdx1VZ=USp*!x zMaK8bW0D8ioH2d?h4Yv_<&34pl^F!7)j24|avN0r@|Zvtah#g{*k0Vn3ZS{(btxfl z-AJ#Xnia7ijj&Q2)`fP($dLEzx>7qUDAGR?h1Plla8fInjArUqsY1FPTL^7MoT+-E zD~8c6`p`wa-usnug2qgVXgPit9Os^itCD304ax`K`{tVt+7EoFXpN;%kZSgY4mb4NzK`__hekpg%7EQ$x#740buYcemFp z$6?DeeD?GL6Zav6=<%MA^pxhWnmd6#ycqh|j~&0Zee8G6B1~KeiqJNz3dJNT$)AXa zx6;I8mhR@R6lWProgBQQvd7_avQhso_&W76S-GNlq(HH9u{xdJoxMJU;}krfA=adJh)9Gx|of@MT#r-(d)CFeSeLJ2Z)Q|8L=dHlfU zQni)m;eq=jrq+U7_cqtn0~?LkGfbqRt9j(K3=@T(LM_W8tzkIO`*dB1O{GL8-&f_h zt}Wx%`?Rro53-H+O;U(lacK1zjG$R_ZgKFaXM)PE5?EPn73c(nJjVsh8q{Da;FVZJO9!A5eES+1d^!6ItIC|j zzM|qs0;eUN1DPf^4Kmq5>qwaGk)@|__-diT&=8HaCM}%r^l4!}qI6a(IN)Dma3;bUN~TeH0?D`Mq|jj;9YdKKr0(lnNPYpkLQ#wC zB>5gn8v5SvZU~NsV?apLxRCt8afN~=*Bc6B1vhEEEFU^PZbSx0i*BM!ZXgx5xOpVs zy_$7#U#K!`aSUBPeaySf$8CpO)kyfJyk^|X=19{xjhHR|G&MxaHjyzm(}yRdyfqt7 zW)U=hRF0TIV30lFmHzNa5#Yak5?iL}PoKmbWRoI%rbx7@rXr#MietPyEH_lQu0SXB zH?z@VA(9fQo!jASnLgpY{xXdff2G?L!6i~GlC(+WmJC%T7xDUWA!eIF$dMo+ND=*| zVk8wT6aB&rR&Jgo{G!owC=IF-BvTWaA#vqV_S6nu%j_Q`UR;!YHWaY3vP$t>Rj>V-h+@fNa~y_Vwa<3#v(R(lcnjwC zp}lPP2%n2ys{=4{pI4Y?-Lk5@Z*3ddv|~u4(=OvJiZ3bYaxqLGC^sP)5tLlz*A<3+ z%cvcs;B;i}q{lPMTJ-uZ5Jfb5z-!3${P+4C!c6+n96}}g_;ILtQ%()UplLL_7@@OG zqQLN!oGuH`6*PQG53w~^RaNu;0+NDkU1 z{i2(s(a4j0nGGzilqE$}S{Q~c1Mj2upb}pQ6aLYIRyc~GDTt7+I-W4+9+u)(b)Hdt z6C#Xt*}zNfN7uTh>MqYl={;T*KIaEc>9$o234?BmjvaTICPZ2*8n^VyZ%Afn%WrlQ zSJTO++dixWzZrjAw}Hozv)`PX5_PZLal)k8&H){W5J62u@-SA@m(pIiKknH?wr;JF zXP&;R@?1%r@>YrEiC#n9jQhv-BUxX~i^r0s=nylk^@joThu_@H@UGzB=r*=9Wa+_0 z68%Pd=RuMQC}cVUc<*n8>_Q0qrH~v!$!Lyq&n63yZ^*N>Li!=>Up!lh13a~;E{R`y z=6k?s*<<@&5^jMC4Nj$S75GZa5WtWY;QFHk;1sxoIgEbCeCEQ=YUB#|+-JMHAClt}5@CL*=@1XWt7MH}u!>|Ok(Pu*V8gv?e~KUp^UFEeO_2;@98 zC?_K~ym9=>LjjLSQfy{NH1B<1x{0K`cu5D$ZU($vp-0s{1IptSBI-1s=`rRGd+p2A`+^U$ zlOUl)-@hGwc}n)A(9t2j-DA2?;XB;$Z5S!ie#|}^xjN<=%Mm>ZP_ADJBY7;NO*oJY z-No!Eo1+Of4mw3U4oG?AiUtYPYl$sJa~9%&ACDr?`|xcbSfZR!2&0{TkY(XgeQe!xadhI5cmyYC*KdSHgsEZFD~1rMEUJwPUOjxJG<0BW>Jz3_3br9yZgGYC|KQuH z=@r_b5f;LQ@wuA|-k~ae%WAq)CN4Xal0qjEwVKrEL?`f%@(UxNP|pAKa0r;{U!hX{ z`v5@M#+((dU+Z!J9`5hjc$I_8M9***BxaM()DEeV&6tGNZ`7yPLC{{LnmVTD0nmO> zrJ{5iJ0Trcyn053hclcJY^u3Xl@j@a)`9~(`YNl-N=ULqVxXSTsy-U5-OK{T@${U1zIlS$1>ympI2cDoLQFh4pOEgg7hA7 zEIh=k(?FedtiAQ?M}u&Q&$v31^agv-U~{FH9j7YmyKp;1y|Gu*lm+o-Qmgfi@6oQO zDT8tsX1=m1crzl{E%1fXqs_?jC2S&aKI1cB-K2!*!@ZkDEPpBgYZseQIf z7c&0w)Xcf*y@R2Vjq>GECsEhKH95NiS4fE44{VKuB}ydV3&vPE=mtKpV}5cWS#Y_?D^YmgP-tC$9TmnBYFW5{^IHIv7B# zAXkv}A8rL60sG6XaFYE_A_3%75_#@c(m8&+l}g~|m~DuVryuWZ0{$Nets56jJ_bkC&N6KG z18y&)JqIRTjD-=iq265Nt7}SKffT}bnE)-QT_?~l`0T2@sO0-2t<$xY!pGTPtGE>G z8lsFtt(h;%H(pV`m)Yr388l;GRnyNUou+jaPBd?LZK8ClyzL-0Jxy$mh~dd(Z$ z`wOgkVp%mBAI?2>Ax%{sIV@7j`1l63|LM@a$?KL1lVu?LO)EU2?{%JDVd2ZAs^s^A zb6$H$`NJ2GV)(UL2DNhd9mLP(-fc9+;%>DFB!5{Lx3s>cq}3?m{@mO;=}~qH94o?* zY375v|4rR)QnD&r)k^|>3ywX(dysoOX&aLnCm}J947}_Afrvt{;j(QHs z?4BvJbYUbx^)@Ib!ETOlHn&LIXnN0V8fR#E#Y(Ke?b#*u_MA)FT2zfLs|ivYsxxlV zbmG$rgbd0MF-l5Qrn~G1tb8}8uC)S-`=?TLB3!J84oRj?m1U||bKkvHc|hZxolXwW zKdOOp?@h9uB^DcjdRe{^xh`W!WAgm6Gt%{F>&qh=qTpEVl;qW*9 zlhULEMD6)cQHP8EomHt@sM__NQ=0QYr5!>P3VbZ^Otwy`Q(YRVxoRok@qE+=Ot_5omy)Bm`8VKTD$tLJki)G5N$g- z6E#rZ<+tyZ~(^#u1fNLNM zazW}2mtg_@O zO;mL{Fi0gosAEVYFT-D#7uL#2&0su0%*l~Jm#4Kfw5JWS9W5K@4D?g|s53npH_ZaS zHuF*>so1S8D%grJq>^>i<7lghd=Q=RREkwJ;k&(nGl~$cQH{^zT)^8bO_%oXyq(TH z?pT&L6FH?HmavhnuanqVc8{^&1fgQ7th$h7g?r&=tKfOAO$%tnO(5I;8m6!vNYw%?l!r6tG9kbA90?PL%MG@AV_e z(vAlU{9rLp28bL*eDDXQnzf-)HD3AC2k{U3tMnhZEu7rsoqb~Smjm$mA+pai@g_8G za@fO|H|0H9SZKH=h)u;4)l*};CO@}Y$vax@Rb3e^K8szceVC@T4)FH*D+3= zLYEiF>QRZjRxfY@L}HtIeq*%8exyLq2f3V~S3Z8ouy3cy-Qu4{3Qp-YeQrlC%szPh zir$EVI=11FiGY2?>i2*-DPx#AWA^|PhFqtk&BF`z!hK=h?9}j8#ezbxAe-CCiNfUp z{|bKokc6+7ea-X}PgM-<@VG0M5hRioR6!?YePHL%_Ejb+p9K5di0dUR0&7whkf|l=dl|?kwD+J`J>Wz3r1`}Y0;&Z0lKMe58@;A`mbj0U z(_Ol2xhM@E6Y{7gD24czCc+xt*>J#1BEg0_FOUwIE=)%`p{|lsajM#lbIC@x?8No+ z1GI5@9E^q}C|zPVA^HVaSn3tH254DGh)=yg;`9P$8~g6gF}oh*a_OStAI5LBB_Bzm}t8KEt4U zY$BG}w3!w;dW<9SqE^Gc0h;u+Ikdbh^J+DmLIo^I=v##Ku&y+4AVevUvU1`9bH-_} zlrP^@^;P%9-r{vW<`>fI+cQ`~eWcnvdPQ zLObEO*Pm%NcVK@Nx<6hG-FnPkyvKH_FOv9L@Q&0*r%M`794gnVVSCn1q6crgxNqle z({pe#f6ZRsfaNyAar|pxv)3-2iN}j+1(Fm`$CI%SHDU+b5C!{C^BdocycUbK_sPj= z=#Ia{opGQ7fg4BKrD=z7WfjiT7LlL?n2&e%Hm;wL_ zSdIZUK<&1hmP-KWqWuJ5O)QOv%c`k%@iANmLV)L3xkd*wI%_0>5YkEbh)$JhK2VC0 zjkrD4rvcRcY0My}v$uca_XUjrk6HG?t{Pudu1dQ~~MO@btYaH&I>6-wrR;t&eES40g61I4O@6VFC%YTEyWk zT;awCVPfl+8SWTlwS``((KJ-zRV04^w`V?78Rd8B&a+MAN4FocV=Vi78?rCph1%^W z`u#JmA*H!z$q1Y=>}_F8P}?yA-I+m}b=C7`?P@_`p$;3L=KKM_-RR3&zlG-So;26P zaOhl?!wK+=qK%g+qH;L!Z0TvFJ}Tj%<=Ua9<7_yr_c`E*(kZZhV}g+?gsawn5y1xb zEjA|abIE4E*r-YoC0S==nux77xSAApAWxEvxvE$y1TN_747(;I2Mwng{#vTs;iW=J zTsYC&c>#wpCsV;X=F)n$gMJiO%EP|>RiY;un@%P{7YNyXjZp7sQd>=NHyp{i2&Y9D z$uc`LF+1|{8BAkCdAZW-xU3;pb8Y^CC}=>;An*Sq?=$C*rB-t$?=!>y(E}7f|oFC{gQQVeBbD|F`tj$;$&i2LwOl>vg!l8K;NgZUQKm8epdYgUbzOg_-X z2Y+E`aMLSbWIL=IHgZ;pw(RL%;{w2A3UaLKMfUAS*JC}GhP9ep07OAU5ABSb*ckQt zNF^!NISV1C5*tAJWa+|f<3wHXLRh9))xU-vs$yRFF^Nvhdj-nO!@ig!mz`XYf4i&SyGlF&=l zqor0avFAG5yO$SsR<D|O{=F0Q6evJnYchw@qPv1X`>mX zb_QKmqeJJjbveA}kO;4vrzz3OOYrr3*HQZc6H-(Vm*_+S!aZm@u3+lwb(PP3tJlfG zk+T`@lt!=94S}>H$K}MiBuB7-ARFn5N-I>xGoE6(!NZzt0lz;tonlH{%KN@3QmDx? zCz=*WJK~ks*~9EM>NoBVJe+}9M;v5T=q7IBr&|8%^Epo*s6kAiTL7Q+H+J}C@8j&m z~KM^Hq&MlyQnFPboJ)BWo^vJRYJjK^2(DlUWRh8gt8&5Ml{CUZA zZ?X9+k>2Z)^^9T`Qtf^pu{uutYtS|AcO9>i&~m9aH=&eI?>wYmEhOKRJ{8SYdXdN_ z7b0*OS9l~fM=Qkk)*NJL<_tRo*L%&;LN&oQMV%1B4qVTV`$ddU#Wd1Mg5B*`U#1q( zuZMh9uA{HCj#l%qJUFxW<({|~*43J`0r_z+mmXIAOgq1d57d8<-*L;LM^=wp_#Ow$ zWsUotG`wR8qsvE~VTadL*o4B%Hj1rUE@&i!Qw3cxlld$G!)E75C(5-CHD9H7I!4572=1opfCxSYp4T$ruryJf< zvQfYiVn__-revImZei`UGE4GP(#&uvuPpcIQzP8S_3Gz+ph+YL;|kT^ST~5o*w8pe zllF2M`W0*C7?}Rq$#o`SpZ_Fb-DMFAY#H%ia}l^DgM*aCBr&W&Xb-IIB}zR*hi7dN zNPs=KqxN(IZZYh!HE;Hm{;bE7=(O3rVj}r+IFt0S`08Z2E)QL-dIq|%>a0OMwzliS zV}+g^jY0McuVcUtMR)0i(6diT%{-tCyR0fcp6GIi>MXaWwqWd=36~9O^zu;dnZko) z7IwJ;lR-ANHM{m%{His=l{u?JBXrl4e`Jd&n~&3K)Ub2xiEYi+U`P18lWNpzyxrhL z78n-p9I@Oz-Dp`89@(CGU0=3pnQi$gd(Ix0c6-ag_Ukixi9*CbRn#x|waR92+gWI@ zrq5~JYDJs9ed{sibr=*uvM8i^qvOlznT50Kk{n6?vhbMC12*tiGA`p%FN=)}BC-1- zr*D|YL`}O^AQkRuj})Vr)jOew>3SU`QyOs=f_nq8nlkC>#>h2>3{4wGplruLWe9XN z;qvN2#F%(>6P1`YIg`~LiXKikm&r)#d+I?9_sq@yWRa*qj38ft zP5d`=280dJK!ouVKXIJZ8O#?Ahl>B2vmurl1ga%v8VEu4ynwT|y$BY-oO6UBfUsp2 zX^76-_JG!_H~J8LxTXg9j$4K9R5inyIXBo&1Lh3TgaYn74xb@U;!aVQdHM2Ui37TL z{YtZBPi+ssB+F9G>JOpsu%jxS4sBu;uK1}ZD-|DEu5~mcaDZ_FGIguyz&hm&KT1^V zNb;`wOEt41s~0T?=8VOb#M*LobvtpSZ(EM@8R@xNS_?)_;@GqTaUE?2_k|~ z!TC6Oc0cp-lb>8-{!Xg@kYGsWUDNjUOJ96Pa>d8%m(=Q#be?ydep7q5y7cn-^U$uX zQ-56tEIu0TFkC7JEBD@PT77qdMH*(eU553yZYx}a1{X<**5XhEXsi_n)c4xKXdGI7 z+E{GC652Q{S_o%6COrTWXFYMG0||Zqp3}c7rx%2c&yJgThoG`-T!Fs$lZ{$4S8qzR zgd=RykUqaWO~~}e`?FRAv)4#*JT*>2!S}DbBkdZG4N}I{{Hao|h!l0|8`j~x(-~eH zfgaV85Ygs1Gp~{-9}r=rkm?QRvnG;PivX0Kx!WDQKDe^n8iyWB zY)~!nfY-XOnlEsD<#}xH7rHSz^6aL3Q-~+RfH`0-mWuyPsuV#JI<}kWY~-V-)Xa-Y zP(j)K@eTX@!sn>Pw#kKQIwO^v+MQwcc9TLpA1z4UI<6OeG&B+95YO9uBj7`g2L$WS ztAoU{n%bhAUs47XWdU&3a!|bCOFq3QCOCtB-HiW$mE?fcsk+(34LlfDZT*>L*1AyV zx$NM~Ay3OoK)Pqa8m}-E`_RNj?S|eov4|m8=CZ-W1kSW)u%9ut-N$C}S8{b1qGzwQ zx+sp@Um&Zuje(srJwNExfnW_=g%f>R&r_`T^Od_pB(nbM0;vGBSW)zD5SivHI(u`pMd)O;wxH zqDF%D7mOcYRikjA-{m*W6D2@=36d<<&PLBSD4F`)(6zk%WozMHy5Lf}fcirUci~;7 zq)^J?Po3Qg<`E(MnOEH;y+?;Lt?jhcO)Hy6i$cv$qowLchRO}T+{M?H81X8!td19G zZT#@I$!A;n==N8Y!j1@HHtn|cjnaXbjyuEVuD6DF%o}Tnm27=7^W!3}j?3Lq!dvW# zOQ6370P8b1eDQ=O_}c+3a}SRy0@uK%lfJ{bS?Z=)L0JRs*e&4+hq(|=%81#!B$Dr! zBPezO!X{4KG@64{|41bQMKie!3AK@83xG5N;-$+Frt;U4&@Ip-GNeVvi_ZWoolmi( zb=a59XrLgTo8GCVfS0ipyF3TAk02EHibaIVY^269{^>gz0PAx4556-Sn3uG{lKBmV zd4F}kuq(LH{F+g$VhMOSJDeqqK?BxR{vxgS#uiPCJ1`8vM}L9Uyf&G=gey2-d>@~8 zsDPXJaz0>PMyVu^^<~bi>xpGg?KcLpodJKx7u^=N6nSs5!Hc^B@QCR7h^9n%`^dA4 z;}>r&oFv51+0S>;_2l#n9&XvCeZ;wb)k9+bN}4MrIZ2k8*zlP2r691@iSz0t7chGn z-qN5xVq}t@ElpPMp0q5qbT-NLu}eG@;4?J>`g8h48Z`mmdGoEwgltFUH-3+I{Ji!i z42adkc#G#e!B;!k!vi8o$;72zF8UoE0_0j@C}q&M!F`Nnq4g<*_`|cgXUU2-YLbOv zFj^jZ1owKwY+x^GsZ9ut@lPmp*8Sq5i?y9mPNTM|HC<>x2(!t=G7CJ1!m!md3EkHs zsdq7mbxV0*5VN0RqNu%Zwr2zX6P!|k=s?CMJ=~ET zH^>HE``c#pS7S5Jry8g?YOT&kI-ddsv3B2MV5IY`2|bPPk($RZy0c3B0`?hnDI>a3 zJ>iXRBLi5@{MWfqO&VYSMkiu&+@8iqjE*;6Uc4PR^J3)LlcjVo3=_bsE5$_K;_9HW z7>|fgA$*}tGTHDk zlsq4oI=vsrv%3#lF<#$fYa?BEIeFcA z^5`#XGQPbd@uA~-+bK|L-ClaR^k94!5zQ0Lf%KT|ycYM}R`oi^i{4HO9HG~l7dwW0 zJF$sGr;60?Pn0g2?VhHE1&rzOEc%?50nGMS!Tz)4PzJ zmqPGj7ycb|`oe(>;b+jntm%JZyI7c=v>{k=OvcR63)ZC9?X-P$6P>$81O~i z=t@edRRq84Lsf=dk6tQ{A58n~Js;scv1WS-n$3Hiota|pivZ{Ru2n>x0% ztr~z74co0PR@R2x`sa>IMe|Ymvl|gLA;eh({!O2o2pL#(vi+LBG?5l)oG}77wlUlq z9`kSVZz8#L>kWStjMv+5@{eT&<7+=SDQln(8qj9j5ZMvi288f4=)6w8H7%0dY1!V( zv#d&7=O>5#LIQ@4q^Uc!I?E7>Q8@jywwi1=UYmzZFR1*3dZ7lqN7PLSec<^)KV*)v9*5F_FvTc7F6@EWo^%1N1I_;zy}YW z`JbiE2p!9=>!_&y8b%^+tG5dA4~9%cZw5(UTF7dNCR`e0%o5!NQZZ3BfW|%kVn|6l z%+%sga;baLF7$6>eWfA)r_*2noQCsxzO(oDKrX;w zow@N}PU9z)2{?_P<*#&}r8_~<*UZ^}^d{Ufu->)xvqL&7v}+ccZc%F9B30G5GFh4qzLJ4+Yg4 zU7Gq~OMYB#{-0GxuCVDS$6pq)yjWnsO(6IQwE3#S;7nir7RR}?oBEq`#Mb73Kzr`S zfo&vy^15^X)9N5~tJXOL9>1?~>9vjRAJg0Hz&044N3*eiY{St~d2hU;WZFAt9!Bob9L5Z8a< zKy7huwzD-ig~DQ_o&K>zL11cC8!(v6zn4fXulBRSpExAu7k70Q9{!T_+JM(T+Esr| zFWx4J(tp?I_3`fS8Kpm#n6K{V8gZW40!uV00e8f*-l3)k3ZK^CS4PtwZ=QLr4(FdQ zQH9*%Q7#Br;+dqG|9Ck8JBSx(5I-A^&i(sQsekx9_&JLJxy$qW zjTN#dB5~F(AN3;ee)D_K^6y7oaM6AT&}@I(w%bBb+An_no9_kSQO~3?!yiZG`TJ1= z0Q7e*jdP{U4DSv5ITw0fQKAA|(e?8lr_w(j7hr+Cihc*)|Dz54+gvE{xQ6!WCBKx% zAZDjPordFQqVaDm@Y&-wJ_2m$*W&^#LZqYK$}bzzY^nilh??IDa7FB8f07;Sz#9wj zfVmG40T|SC%6$ILf^+)%=RO0;?I$_xSSoC+zhATg1tyg)04+Em0#Xq9_g|;rtIdDwjPo7;PiOr9>{9>naj*O@9D>~) literal 0 HcmV?d00001 diff --git a/components/pages/todos/ToDoItem.tsx b/components/pages/todos/ToDoItem.tsx index 5cef00e..9498ac2 100644 --- a/components/pages/todos/ToDoItem.tsx +++ b/components/pages/todos/ToDoItem.tsx @@ -19,6 +19,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers"; import RepeatIcon from "@/assets/svgs/RepeatIcon"; import { ProfileType, useAuthContext } from "@/contexts/AuthContext"; import { format } from "date-fns"; +import { Image } from "react-native"; const ToDoItem = (props: { item: IToDo; @@ -29,7 +30,9 @@ const ToDoItem = (props: { const { data: members } = useGetFamilyMembers(); const { profileData } = useAuthContext(); const isParent = profileData?.userType === ProfileType.PARENT; + const isChild = profileData?.userType === ProfileType.CHILD; + const [showAnimation, setShowAnimation] = useState(false); const [visible, setVisible] = useState(false); const [points, setPoints] = useState(props.item.points); const [pointsModalVisible, setPointsModalVisible] = useState(false); @@ -66,6 +69,15 @@ const ToDoItem = (props: { isTodoEditable = props.item.creatorId === profileData?.uid; } + const handleTodoClickAnimation = () => { + setShowAnimation(true); + + // Optionally hide animation after 2 seconds + setTimeout(() => { + setShowAnimation(false); + }, 2000); + }; + return ( + {showAnimation && ( + + + + + + )} {visible && ( { + onValueChange={() => { updateToDo({ id: props.item.id, done: !props.item.done }); + if (!props.item.done && isChild) { + handleTodoClickAnimation(); + } }} /> @@ -303,4 +329,26 @@ const styles = StyleSheet.create({ checked: { borderRadius: 50, }, + animation: { + width: 100, + height: 100, + marginTop: 10, + }, + animationContainer: { + flex: 1, + justifyContent: "center", + alignItems: "center", + backgroundColor: "#FFF", + }, + animationOverlay: { + position: "absolute", // Overlay on top of everything + top: 0, + left: 0, + right: 0, + bottom: 0, + justifyContent: "center", + alignItems: "center", + backgroundColor: "rgba(0, 0, 0, 0.5)", // Semi-transparent background + zIndex: 10, + }, });