From 7d898f89a9ff3835c6fc35d4b6427c6aee4ef76f Mon Sep 17 00:00:00 2001 From: bosiraphael <71827178+bosiraphael@users.noreply.github.com> Date: Wed, 31 Jan 2024 12:18:47 +0100 Subject: [PATCH] 3696 add emails tab empty state on shows (#3702) * empty inbox * fix No Files alignment * add animation when exiting the screen * update calendar settings to be singular --- .../background/empty_inbox_bg.png | Bin 0 -> 5855 bytes .../placeholders/moving-image/empty_inbox.png | Bin 0 -> 11642 bytes .../emails/components/EmailThreads.tsx | 24 ++++++++++++++++-- .../components/AnimatedPlaceholder.tsx | 16 ++++++++++++ .../components/EmptyPlaceholderStyled.tsx | 1 - .../constants/AnimatedImages.ts | 2 ++ .../__stories__/NavigationDrawer.stories.tsx | 2 +- 7 files changed, 41 insertions(+), 4 deletions(-) create mode 100644 packages/twenty-front/public/images/placeholders/background/empty_inbox_bg.png create mode 100644 packages/twenty-front/public/images/placeholders/moving-image/empty_inbox.png diff --git a/packages/twenty-front/public/images/placeholders/background/empty_inbox_bg.png b/packages/twenty-front/public/images/placeholders/background/empty_inbox_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..7668b8e8fd707db4ad9767070791c14eed8cc92a GIT binary patch literal 5855 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 literal 0 HcmV?d00001 diff --git a/packages/twenty-front/public/images/placeholders/moving-image/empty_inbox.png b/packages/twenty-front/public/images/placeholders/moving-image/empty_inbox.png new file mode 100644 index 0000000000000000000000000000000000000000..7c9fb25765d6bc4d1be0e00ff26c43573a6a7772 GIT binary patch literal 11642 zcmV-=ErrsFP)Rq6jJ2nW>N??kib)t*lv?9 z;`BXY(ERhQWEajw1HM?8X9ntwJG7cO&Hsf?~+F|qq#_P+4q0uoY9%1bIx2e zmoqcp&(A!XyJqC`KkxN>KN|@Ib%59F_3#gmeADmq`TSHyY$OoWFc3^KIek|uW#34Y z^2|PBW8tLs@s)iJhwTNQZ*+u8h!BpTW?8muDGP?SWDCX+A78c}JUF(CN`MfKpyu#; zmkuTpshzm0+}CNh)0G{a()H2!3eAxlwRs@YRdT@WAQjW z?4QsI$j5Hprh^9$Jx>K9gd?yd2>KI==|Mh3FXx*>>c>uRZlMPjETHpTtyBmJz6^(_ z=+BNFr6dPO3N~A6%Yg%jwo(B&NFcBf5KKph`@f}9sa=#7%qs13P9zfa?({UZ*lir! zIHdR{7ZA;R(=mE*e4I`s6O_t&)HdkxbkO8v@LwoTgm46w!Rzf`l}IFq`RZr*;xcJmx z;RvdZ$K&z3-EDjAcAF%cD?2*qYdxpvX2}#_WquS2&~w3%lzvuN)8^**=aj63L5KzS zAX}TKg8|A1E|{*)RWKESqBeolu)LULe@+f6Bc>YK5c zbpP*WX6O~RNNe2f8P^S#>hC5`((y!s@_~)gU{BA27yOLTb8<&j0znyZyWKMx<&#=A0V^=_Xj5m0Z-k)ss)JW^VqdwM|NU?TJRE+rNxP==Yq>bR-d{0&%5M32z_} zd|LZ}aMc8r1j-nu*>y9dxM}^);#@Q%(7SeHSC@1hDS_Wi$EY}L>(KI}y;lfFP)Y70 zRY!AE)2zeOVJrQih@=5h+W-jyyREqDi`*xdg%FOQQh51d7;N`Dom37UVDX^04J3;f z&!E=o2;m4S#UQC%v`T@5!J~`%GD(MI;n_6_t<@325mbuHsY)PKeP?%f)_pw=^Sqc% ze$MjdX63Fdt5e#DOdv33(Copn!U~iHGt}v!SEs_#!Zz@+78jk$?&1H9Md|(NX^P0H zYKNTR`=rYy)r7*F+P?Y7Vd*j1>WtvJ=v5O`ia9=#o!zJY{>9RDG-p1vu$S_|=5~|) z3tu3|>eV#8VFS_BR9>%BItox6ZDoNxvt%h3M^iMFOp&tC0K)0w&joAKZFfj6*$sye zWd!GNIJ+@HN7QiymB33niGdWy8=ajUQc4>CuIuc~=e?-uo_i$G5Zows!BTtn(HVG*FBvw&T=&$-)a3I9a94lcO9fJM{BSw6+8jB@>FPgLo~P9B|{48AU696?oy z$J33M>JH~zBwl_wa~%S*oq1;Fw(YdjOkX?H*_BBY?4I=J)lGocD6rP0SWQ?QK_x&o zO*a+Y($Y*$jx}O@L}L9-UM)Arj*+dmHzN}J8D~iMHQjwTIX?F}O1}1*q5FoeYsKo| zcb>u)W>t&nnmOq;uZF|Y;yHYmo}LAd3yUMDD$~=mmgbFUB=6V7pLl{&vN#~3ru*+t z3yI^OraSL6eXZJpyqafxbZ%>Az5$;E;;V#k1XU%XTFJR5lD}{ef20g1JK5L*sogg% z%32-(vF0P#^IWr5DVa6#%r$JEG+n$Y0nwm`O>xy=={j;GCYEv%W0VWEoIXEQxM~ds1hZ_} zlFf-k{KHhrwk6MjSS7rC+_lW_OOZ#UqZV ze8H%t^?ct2ZEe!1*-nR@&&nyuwUL2f)}>O(YrDESCj)_CE;r6A|6W5{<;)d+#~Kq? z48XG3&pVHj&pu1>M;?)~Y4+vIrN?aiGdVm=l%tIY>1fQA1`F90lNP|4usblRe1E@a zxoH5a;TV{(DYJ^*w{<-|U2ppR0iWh&=;%D(=sjoHwL+2r&7X*K@OhPyPx+Ag-~-9> zB%XYd670g|11uNqgFGdb*sb>oaD>*H^-`tvMWq?GwVOad1!~u0R|^s>NbBkc*9D ziUkKD;vei?GkfN?txF_k_NwBZ-MQXpV&Y_`n_ySKUr-O*d^pq*-Ws>KURWgn#6o}`A?0O8uv$wy$AH`B% zuGa?w0V&f4(&9N(a`C7;vX^S+R^xYmbK(U5%oI|0`FuxwxFUp81Ek%u{%wf_amr{m zjzOa$1XIa4rcfYk6f;#x0}tQzoZIcrX?5VToj5U033+=CWWP!+9wnoO?q}t1i1r)I z85lgcKU3&MY~yewGM`zbqb-iAO=eKJPpQY;=INf-kn&1`l=WC5uGD)xt*x$AoIUgL zcQY;5b1h18+uGV%rTPw5VZJ;S%G&>?SkM9SV}37iL2Daza=Pq(j;9{+Ph`bZHk-}Q z$%@+#960=X<~|Zw5~DU5xMc{wYZdjx7#4;9@Zlq#WF8g-<8pg@7iL;=;09vQU_os; z8U_y@$hcv6KWzd6HKk}YG7^i;Y>h^vBkIS5a4ZIbXL(bjLG}G;ld-Z(mM=){LOhC# z6b?uHs1uZ>Db?Xs}O><%*w2v*_CNiiy3E@}-_4*iftH0!y zac!j74VSD4&g>A6GT8>(&nOwRT)@PADKL@vdr*9CRiG0wD^8LZpeYe0*6= zInw1qI8^{{8OJefVX_+@>m`mU1nkqPROUGtf1bsIWQezbx5x;{;0>mAqcbsM2{`_Bj!h$w)T8MMiCbaeiJPk38M9*+e78ym%bd*Py- z<5wF2^s}jUigvNZhz0_|>nOeOZ50&>tPJ88ojTD7rClf&_|}=FculFKZZ~c_M^U2GAyxwlE@&DFiGQ z`w}M$0RR2=jgF3eOn%7Amo0p`kqQSf3*wjUlxO^s55iR|A&6tz+dJT!50Ps8(!D)B z^cM>jmVDWAz3~xeGwtD83ksw*8})fS?UR#}A@qmgfJfjCYk`rQ9?EY&(GkAD<@?{1 zUbbB_gvBWVMr|_aD=T#TQlkUWpetF%?{GLz!wzUVPhBTp&Zg`*2+u{9tf-(rUxaYx zK_j)vRFa4NC#4EMu-R-|4;&cXlH(<63*@5;AcRvSjo2nrDUc{w%~nU5nrUKns)mSh z3IuUXM@I+TGGxm#aSYPSk1kp);+PVk-ZhP+zi}$Yh077L5W?c*iD;9lELOKV!s6sW zH5C(?namW*QclGb%*Et&Z?7bjUSLMu?^|;BS6KN2hWV zuJSsv2tqh2YI&MWy>eB1yZUA^odab-xN0(@O~$&Y2YkrxnvbeX!zTwsn~e2A=k&iu z!t$-uq!p3`4Qp{kn@sJXNfP)D9vsWPYgCzOIN^vkncBo^?pi~+YDSwbeRolx6!_Q5 zRLq9NrrtFmxqosp_&QaQhB&=uPm@XSyV6M0Waw>{Z+{(I!(LtZZ)1Tu&tIusT9G^Tli`rbsW>2dArqlS(D4>aNwiaE#&@F-@la z=vNh^ZMKw`sz^;ARr2PsS#b;)>hefK{)A}i3wRJqolY8+hO^twrYcf%N7ifs)5bL! zbS|gnJZIOWU%CJ!0uWSUM=-Ui7YODL*(UFa_NX@Fg5eL!J}S}_dtr?P z^Pnb<9(ma^8Zig;EKI&&^w53Bk4e|z%0WazK!Rehe5y$f{8-D-9t{NbBL-4RvLbD z{Depx2n?~Ba6D~ouFZD4H5R5KaUjGa(8E%~VN0{FrKQD776Rf?YCi&jf~ADxay4(Z zS#X>zQq@8{0yS0=&R|Q6%S#po;t_6}K*37FS?6-Kkd+ZJk3hjP!r|EFLMysyS|FZh zgQClz(Xo=nsrmqheEHVI31#iOph2;UaJ)@TwKL)kb)MUg9ue(14UA=kLp6qaiGrZ< z5ECrs!7Je@(VEks2;t0=hfhw3rqBjN2xp!k-VrWa;~|7o0x;7+xNMDu5Kf7J%OYTS&2uA^N%p)3? zOxdewWpm4%IHwj6!YKp7>ZExi8kI&5tK&YnW!Tw!sMAAF1p;&{yKG^NVDKEPi%7&c zWulQ|9R&4=VQx4)mL(c&AvrQ|DxKc!lH!~#>7KN|{>)e*ueBfI$^Y82tXEkhPe$&>+DkO#T0g}(s=b%X!V z92cxsH!>E&DI@5f##y+Yw^2lT8KZ->^($n{up{0()6=w;>owYif3?1mu@Fv~*%_GR zGio>08%F767oQ}e{MZ>SEmEAL6;!=!WGsYJW_C~dX??` zz<#8)ESz-r^4#e@2<)E^1|>oL!2utgNF=fzH;ZEw5#q%1(87h1#i}KQa4G=K(6yK( z$S1x0%2b&AY++(5&A=@~90Nc%lfu~97}gi|4Kpjp{nQ`|DGMSyid zJqCQ01%-7qYLsl6UL2z*LI5FN+0iM*ezl4aPKAI=^A3y0iUmKj^s-U+vbtGQi&1Q( zfRjh9r=*2&D#)uG1Y1csxw@B?RhruLvRRu9R&ai6{6v;ul-3)>ILhy;^^saaI2GjG zm^J22!ytYoe$7q{3AEEl`7#G5+Ak`k!ZsbBaY&J@yQnZ@m z8ND_db+e`xvl>q=HgD#O5KaZb!CI}Qz((oiJGr9&^GJk#G8LjbG=t=|7DJ6$ji;8I zH}gdZr^39)>D)>RC!h54v3QW;Y;l5oQ82R@h<&~}K5kg!X#|9DD$J-R&@LB7>19}i z7Iw}4JsP90#^$D%^J$YY5@D&_vay-U{Eg;A!waXgql2!wY%P87`%h)=d+oA(FR zz4f!7Q%7fK=CP~SuBD|*me9rx8zcciRHY=KX@o2#IPj1S!@;MBCfzr-fQAQ7+(Y8Ih$^~J#!rb`s=^=OG#w+Z2r3R-1#z=D80ogHoa_S zG0c()dd-`K0IRFEyxPxgmiD#^buSzo{MTG|IsMn`ug{1@&31Oj6hUmdZG-fDEfAdA zeJh24O2s2``q*e@nO=I?ERNAz3SFu==3;l7X}_9T+FSWtqZWyO>QXom2oCm}{^SPf zrx6gqGb{!G!N9VZ0XGisxBan4>6w>aq-v7OA|NsFB~CAE+hmN|{f(AFE4^x^IQyd; zVNF}RWF67;s{UL?!Zi9^Hk)lXRgt<9&dL=l=syo$WN2NqY*z*U8`(wEvo=~3_if{b z+u42l2EG2PUs5G8N-tmPZl}9gG{2jf>z3uy?q8{T3oI+FNdtu0srP#fqU& z_e~0{`*I6Zi&?=D@c_U!BYNp&vo;y6)iP_|tQ7cM$O@`EEmB-#3WdTWe!qV!-yEST zQ?nKa76q!m(G&|IW!l!xKjn<{by`5Bi+_v?jw@SQ==Dg1 zKA4%F)4iOl-QOr#P|Ylsku{y3p7Bpk`gcU5)7$x`r55khjH`wN{A$jQmEs`(!_Qut z5e{6md}5nIc%9uqqx5w?uA0#SuB4X_uu%T=aA8w1&DPvhv#$)+^kHcesaf$SxYji} z8Qe8BH3hfKM;62~7RTYx|0u=8FJ^3e{ISddtrR;;&3w|=MuGYj?habzausYb^x_4p z#4%cHiZ~_`iH$%oR&vYqsJd{xOd>IJqxSw%3kH}KJIg^K>1(4v9qHpPyMs0yJv`?% zx!V2p;)QCr`x{wPj$!s>m?R%R!M zSY9^J(tQZ@VF3{ImxDr!ot0!%r|}bQD0?E&f-Ht!9AjpcDutdkg%wa!T8RD8lJ?I(6Iqt-5SkuUM-}FK?n6iet%Wn$41&IlmAUCpu9y0}%ITJ=K^E;Dwm1O2Y*w~5`Jh+#uu2?blwKYmAGbuCOerag zaF8)eB&N6V-)%?<{wr-|6i~NO!0)eBDz$96P>j|Bg+fz)zHH+3@-C`FN-mu2j9HpW zTNwp)YYl2DusBwv(>~k40dWKqvu+Nq-*@7e?y_aH`&V;?q+WU%aZDr<-BD}lAX%I#`d834hkt<5G2$2MqvL3_P2$U|Km#Ms<-R8@Z~#4&p5WyCQY!_;hg zxll?XoY@2b4J!9tvU;^7no3(41r!|1-C9#hh6k2O@e9u4dXsQUwQPAl=%ttCcK@1B zFBi(Zg)=a)WF02}*fmQh0Lop+%m)YtZ7u+Uv9h&M15v<|s3&7uC63V>HC0dP8aZZo@T0EQ6S)5(Lls)7M} z>17W1ku7WJ^m3u-3diH|NTMN{D;lj8DI{RW>)~F(iVR3@*NU2|vFL&LW&7igS=Jp> z5b5R8q9+_rOG|S`Gyn(qEq8C6mlc6PYQfdYms$~w(PB5Gm(jgEJw5$A2?}P8aC&+? z+nSr5UiE!H9UeA(gV~JMa*jnlS{GKt45^*x@kcX7R;yx`UY?pl)jurK%kw}hoS~+s zrXjs2)CtE0C^C(_G)f8hCWIE+=8J`&6et#AhQo&<6H&3CrZr#L=o zL=?eTIp_x>y<9owxN6B{YR;2zz+8LF%~E^*rW%+KQz{V0+`IW3mfA>450PH3JPyt6 zRn5&UgPa`DeKIm=Pkf)xyrCfdzW21cb<-de%zl38;fG6ZWtKXfC0$b^Z6I~*NS2ks zkiTFsw1cx{SH$Cq5fYS~Ea9}aww~SH-SrvecDLO@(bQZEwD+yIq>4C%gM>gmf!(L? zy#Kz;fR9pBD&Zi#j2+jo_$?;?A1UeO@$rc(I9s-h?~0P3EU0%Y@Ge}qVA$nydDTz2 zhQ;xW$yrxw-M?)EU1Ooin8l!2nR2I>i``gCp_cZLsb?}4r@6U#o5#~Ni0j=BN9HW{ z?S;K`tEZa+sU!!V({tVct_-XXx|cuxpU$dD_f4@fzxDa3+!SkZ5XbzD-!BdB_?>D4 zS)`XICMF&V2B+4?(&>i=hyUgE;1XcFT4JCMAmllp%kCKyW>$n0JsUVpauZ`oo3ns!3OHM$`_4*c*$| zwTH%N?V(Yc;{Q1O$3MAvi8Mq)kMyvN$E2Olo>A>bV->dk^|$GkyEo0rn8C{6dp*#T zo>z7+AGBXTah%UCHtBwhaH<3l3FPdU=Nw2M~`nBA0J;WVwvh9Da7G$cx|?{ z*VeDIGn(ShIaJrNCjM)DfQ<~CO8>>(uKVT?5b7Y8Ui*1V)I#tX@LBY#|FAMI_77yu zE3>P9;(m;9f*V^-0U^CScyNDKO$O=ZlP4#4aJKBUTG@E1-jQ_RbUHrl>+AF4I;;r} z4lUSs(!=TLPJ9@Gs&Ri=hbT zK^Bg5hcu3r|8qaj@yzoa;9txlTBvc~p60XmJ;#sIbNu*CT^_Ql&c=BC%i$0m)!AiC z0a>h<{_!6wQb0vKgLq5JT0VFm>0Lyps1hLCPEOE+6XWz2TbZj_6k66FJxotb`e}ww z9Dm4(1Bh!43&`wbp+yl+uJkh2`iu0kb&*c1@p!_QlIu1&10sIGe=vT+(rEbzKZXNt z1t%1mY;$*fKa0iV;)CigjBGWi>nQOL5(woOW&xMXD4y~1=fAsq?#4^Y`1?Bf`<&C_ z(tXd<*{b4uebkw4DItXavvhz?bLJQOAiaz@=3&)JOr)15Cj7gO9zAxNJQ-7184IHv z^?UpJ7OiqRo20WS0)Dt*2^N#l*j1b{;kq^J2nWF8ERxgPW;2l$N*Vt^lwY{zra1`- ze7El|>Z6q`Y@_dm&)v(P+h*|I>hGl`%zv-_Gt*M~_}M&r-0FD`nR-SsC#O4|&hwFy zM#sPfZEe!oQymcR=7ZrNyA&&$(`Q>e=8zws;Irj-*@Z#PLx~OARR?B>-*Yh^Y^(Ww zf6MP-7XQq*ffVn9`ixdINHssRWU1szs=wD`{JER>W}hqud~W4Y#5DNc*dBx8o9^xDF%78a(?AN* zz|tJ&?4Fjt;!NSkG%nc7p%85zKTfYqh3Qt0XU=PGls`8zirVi5L987crJqH@Tqtg$ zvo(p1UvqNhhar8dgY+_j{>jP7>ypXj>m;Z-6yf;U$KK#_wYbnd0O25Qs?;lb_$>Qt z4w#p-MY={OXl}FH=r=5cE8QJ*x=yC-C<_WU<~BY!@t$jPWTce-w;#UrV%`EmCxBj2 z6Q5@VU#{cdr%k2za-6n@t;Xdn3VdHJ3BDXpCiwBW-wUzbI9pCw-CH=DsE!5U#y%Yk z(7(rGS+9X$!r`friHVb|W3d?4`it)68bxh7wy?$7+|!dD^ovQf$dK_H z@&|k-Zqc}Ahve4w-*O_z6xV+{OjJ|6tLb$p`0hxkpYZypFOc z)pZRu+6Gc1(SSitM4YSH?(ZG`om@9eBdLdxxRC5AKq7#@5O>x zBX6OetANRYKeA;#@$<>CG_b^uEcX+y`*P?)V`>`XE zcoakdvoX*sR}9+i_Tj$1UNnD7cck5(1ypJBiGS4G$wI|WX643cmoj;M3{uOYcv?p$21pmrTqPwxfwJp zmRomdls+?hFw4~e%JPM_Jodi4ma}GB(V(a9rXz>xvz#^_PbTKP2A1NYg9qsA?7r!- zlLhjr1HR1nQsS6zO`OPxCf$fRHFD_Ck<~03G-C?UGyq0ND7iVvg_&6rgMq-NprL10=&XX5l997`e5@S#p@Gt4!lFu(UQcK?jpcaR#^ z6IXy^te^8|+t2U&W;8bE@x3erxPz$Y=<&i-P!jV~9M9d(ag26-4A%J{J$ih--|xqE zbR#5a7#t>#y?}U!FP>Ia=B$~$J8dS->ue?*@*CLq*UO>}aBP5>0j>MmRu{}S=;8~q zTzbV*RQwS^+{`r~?7WQn&uC&cfp7^2>7U}5Wr%}$ZJh>%+Fp*wR`BP$f<>q8s~g~? zM-qih{#<%lG;~3uk@YBxUfYNn2m~HNyT2%4HYTK}tSocMkj=$3PJ1J$Y zCBbpW)rZEUnCI>3x$e^e7Q;FFeYA#Sk0~9u@PGPGO7A^tAet|7400aFC9mtag~#~7 zzi9M;)R{b~Q!n~aC?LJ}WgHW!7nR|Ahr>~>`1@D0Xs#e3nuaGIli}mb>PRHA@5qs( z(pgvGXB>YZ>!oEM3t|SH!a8emCKE|%y$gz{2X!9*kYk-m4&;4&&?a<*^RE2fh<)@x z3lEx3-<_E&%9DIQ8dYJb{-37R2eHiV$$<3U@2LbW*7*zc$mObO+1}LTxC?HZdi5sO z?O-Kkzg+vkf%)rLlrCkL&Z)EP0Eqwy=YrNY-Cr`o0euhGf6mg0JMi9b@_T<;UPz|p z01E@zJEcIW1<3-$I_Ilaed=w8fi{_FG`3ajwk*)2P~iaVJiV>6vy-~Iva?)BAES8K zuPGkl;6!HYOoOG;2)^MC^%<;lffd0LZnusIL#ZTLlzXVubA?miRXf7MI?Q#SpNAv5aSR9lVz*^M!IVNc3aj|CjRiD_f+?ovICP4k zSm%SuIfyy1lv)pD>-xBGxm-sK=s-Yhf+Fk!9U&oGhHT!&{N6}eKNk$n5sYfLWz=K# zkw8!&r4)_=1cU^_jaZ)GW|0_eRE4YID% zRyo-PYi)I5PaeWZs&W9aaL~^&OxVx$m>uzWTnI)`GAbn;HC{>!3750&b~_8n$s%$} zF%iUM$A~7b*|5m+dPC0cNkW<7TG2FHpP89B+%asEfPokzBoLICY6wRQ<}$5P{XCV@ z;!+-y<~B7oHF?!9Vqy94lf{CcxV$O<93f#@1ZC#`0}l+uC;IAU(*OVf07*qoM6N<$ Ef^B4wD*ylh literal 0 HcmV?d00001 diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index 879bda969..0d2567234 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -17,6 +17,13 @@ import { H1TitleFontColor, } from '@/ui/display/typography/components/H1Title'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; +import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder'; +import { + StyledEmptyContainer, + StyledEmptySubTitle, + StyledEmptyTextContainer, + StyledEmptyTitle, +} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled'; import { Card } from '@/ui/layout/card/components/Card'; import { Section } from '@/ui/layout/section/components/Section'; import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; @@ -141,14 +148,27 @@ export const EmailThreads = ({ const { totalNumberOfThreads, timelineThreads }: TimelineThreadsWithTotal = data?.[queryName] ?? []; + if (!firstQueryLoading && !timelineThreads?.length) { + return ( + + + + Empty Inbox + + No email exchange has occurred with this record yet. + + + + ); + } + return (
- Inbox{' '} - {totalNumberOfThreads ?? 0} + Inbox {totalNumberOfThreads} } fontColor={H1TitleFontColor.Primary} diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx index 0c8a6691a..6bb58a61c 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/AnimatedPlaceholder.tsx @@ -1,6 +1,7 @@ import { useEffect } from 'react'; import styled from '@emotion/styled'; import { motion, useMotionValue, useTransform } from 'framer-motion'; +import { animate } from 'framer-motion'; import { Background, @@ -56,12 +57,27 @@ const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => { y.set(clientY); }; + const handleLeave = () => { + animate(x, window.innerWidth / 2, { + type: 'spring', + stiffness: 100, + damping: 10, + }); + animate(y, window.innerHeight / 2, { + type: 'spring', + stiffness: 100, + damping: 10, + }); + }; + window.addEventListener('mousemove', handleMove); window.addEventListener('touchmove', handleMove); + window.document.addEventListener('mouseleave', handleLeave); return () => { window.removeEventListener('mousemove', handleMove); window.removeEventListener('touchmove', handleMove); + window.document.removeEventListener('mouseleave', handleLeave); }; }, [x, y]); diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx index 84c4f76da..bbc1dac1e 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled.tsx @@ -9,7 +9,6 @@ export const StyledEmptyContainer = styled.div` gap: ${({ theme }) => theme.spacing(6)}; justify-content: center; text-align: center; - margin: ${({ theme }) => theme.spacing(16)} 0px; `; export const StyledEmptyTextContainer = styled.div` diff --git a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts index 5185a6683..ac941cff2 100644 --- a/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts +++ b/packages/twenty-front/src/modules/ui/layout/animated-placeholder/constants/AnimatedImages.ts @@ -5,6 +5,7 @@ export const Background: Record = { noTask: '/images/placeholders/background/no_task_bg.png', errorIndex: '/images/placeholders/background/error_index_bg.png', emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png', + emptyInbox: '/images/placeholders/background/empty_inbox_bg.png', error404: '/images/placeholders/background/404_bg.png', error500: '/images/placeholders/background/500_bg.png', }; @@ -16,6 +17,7 @@ export const MovingImage: Record = { noTask: '/images/placeholders/moving-image/no_task.png', errorIndex: '/images/placeholders/moving-image/error_index.png', emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png', + emptyInbox: '/images/placeholders/moving-image/empty_inbox.png', error404: '/images/placeholders/moving-image/404.png', error500: '/images/placeholders/moving-image/500.png', }; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx index e33dfe1e9..c7d04d18f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx @@ -114,7 +114,7 @@ export const Submenu: Story = { />