From b8171cf909f5c7590c86c61ecde6aa957a422aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 11 May 2023 19:01:08 +0100
Subject: [PATCH] fix: interactive demo guide adjustments (#3747)

https://linear.app/unleash/issue/2-1027/adjustments
https://linear.app/unleash/issue/2-989/add-imagegif-to-some-of-the-steps

Includes small adjustments from the tasks above:
 - Adjust zIndex values for the demo guide;
- Add a screenshot to better guide the users to their `userId` in the
demo website;

Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item:
#3537
---
 frontend/src/assets/img/userId-image.png      | Bin 0 -> 6394 bytes
 frontend/src/component/demo/Demo.tsx          |   9 ++++++
 .../component/demo/DemoBanner/DemoBanner.tsx  |   2 +-
 .../component/demo/DemoSteps/DemoSteps.tsx    |   2 +-
 .../component/demo/DemoTopics/DemoTopics.tsx  |   2 +-
 frontend/src/component/demo/demo-topics.tsx   |  27 ++++++++++++++++--
 frontend/src/themes/dark-theme.ts             |   3 ++
 frontend/src/themes/theme.ts                  |   3 ++
 8 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/assets/img/userId-image.png

diff --git a/frontend/src/assets/img/userId-image.png b/frontend/src/assets/img/userId-image.png
new file mode 100644
index 0000000000000000000000000000000000000000..8ecbbb82836f0012ec460d0aae0afe4b296529ca
GIT binary patch
literal 6394
zcmcI}WmFVi&^{m_ow7>`OG>*U0#eeAG)s4PBc*gncZV$9xzy5KN~ge*(v9?szw`h6
zKkt|K%ba`8+?csDXYTXN4Odc>!o?!TLPA2qm5~-#K|(_2eIC1Dpg&8Tl-Ev3NTgjd
z;v#CE$cI@kJzuE<Lq30Gpa&7iVidbd7ptgw?Me{*X%7pVBoTo!vtZ>v2E1uU6UA@8
z=8&)^prsPUCQz}oI+^h3kvFenXf@YKJ{OuWKOSx8=WkuOxvKY`8{+wz2JC%{v+<3W
zxaaNnz;2X*x8HmIzf$6j3XC9lG=uiY4h@^K=PdyAfg?HqMQ$p+`pf3wmPF$>v}hyJ
zNCFCq&nsTIK2}2tj5=%aD^tfd#-t%NNXp9B%!))U*@7RHbae%&?(SY`5d(NbjM#>2
zHj3z3$8*r}?_)pM|7I4S(B?hWReRP%HF<C>whPKbT-?apKF<cQ|C_ETDoPui6BSzy
z6EeQ*?D}Df%RAKh_PaW-<4M?N{!y-<Z>vs)YtTPi%D~PSF_Wvn_dbxXwde==?{G}G
zjiK_Tp`oGGh_%AsFsB4IOeV5t>sX|DGkII0x_c&6N3Ol&8H|8Q&&vZ))~vWhi~IR!
zddK3c(JWs2a2pe#p(hg^2IsL_O>JkP4@_iS3Ol=a5FaX=F#Swoox6<o-H4*SSmB`)
zzx(xL;Nllk4>K3)T$v2@#UA~l&8%IX*~lDGPilm1AG>~Sx@7cC99u9e_(PFV;72vM
zF4?c~oQa9tP7%Z3cE6+-;9vIfaGwx5?Hk^1$Db6)XNV7(K4+_#TTQ~UodxhcJOI4g
z!pN+6h}jYon{?hk_+W<_qUuQNm*uN41*;Se_2spBMXKLZ^Oc;K*`U3dioE)m99{(+
z6HY^oz$Q(Oz4=qY+E;9j?nuijX$K2+WaWgV>OWfguWTex2K)LXj{hS1R+SdZ=Ij|m
zYJf_>P@QweE>mX6+QGM0k7LXPy+XYu54Y%%q>+UC`!mY}7iZ`EWR?_lg_8Kb!Id$E
z1^q^2D)4u~8j)H=tYx*@Iwy8!R<6ETp3%eN$AJQm&t?~x#&_=QNgo(_h5hb>Nc*!P
zwXR7phsAm!EffGRzmWta-Him&m^cnTZm`X-pE)wWv`%u1#;?o(<Sey5aaQ<20;ir*
zrPrC<e^uBp^&aM^dRum74!u$;rg_j@dxw8tz(d7X9apK(E866cNkmqcHpQsCuc5%@
zBfvHR&71nO{HI-e2Q5Vx=!x%cug78kLkf?i@-fWlp%2wT;1O{nR{zEK4GHU2%NZ%X
z4CB)+RhB?wmc5>^3~-#PAW6<bdFfim)HB*no2SUPRbvVo*3rA)O6in}cc}AurL~c+
z-*c@w6I0j$%#$=Cet@cL%LBzG<Y2-mRg1A-g_nUD&xW0x)&puu_I`%b=}4%<+Hf^B
zaXD<8JM0GVt>%ti$Qo3n&sfcz@eQ9tclsiM(<S=@^>zdLQ4hplDHW(M<k^Y4P91f*
z33e3r0m|c<eA3iKiaF2_1%4G-*$9o*>7k7h6Yn08oszHPQ1I$~LCtZXewGyi|A+Wp
zci+h7!Dczg{M|&3aM5pHVQ3_<>Sv>ZT+%g{V8??{WWVoq<hW3nW$>AQL5#}|r_xwU
zMHo2xc)%A_Tar}z{=N5yBz9hY5D2WC=rdTK#D>akCYz$f(Z3rC79E|ox0@Tcd*A=#
zQ324jx%mp$$@`(9yWaK`2iK`5I3@$<7BHT}QqFAR@7Cb5kHzlfeS4ACUjxGXO8uKw
zTu)(enOPeVG9Y3*bMXWNJ_wxJOiG0#BuJd(o?0@qvi`&j3IAMFKTo<QevpwFA|D_X
z$c>rx#xhrU(vn*~=}--Pn#o5~4F^ZR2#t=gwN_HHddKse?Y&2WFO%Fi`Y+$#db!$E
z)n8Nd(jLvo1Omp$t-m|0GO}}c+zfL=aZmj*hK63gdg@jgp;pSizYpAfxT1bj^HEb1
zXtYII+dmz|p2Pl{j=0tmO}%t67Ug#_TePsRdDx^TZ>PbiRHD^%E*`gPpV85ZH%)SD
z|AyoK!@5#LxWb+L@j|<xdZn7;aWjUTf)|cHv3-xE&kqc<Xv&2lo~D@j*B@=mcR7_{
z0uB4qnqoMuu9Lb=w!3R^a*iuwW<S)Cg$`*677|E;XiB-ttrF|strP!VQ=E4t-_XXp
zlv5%Tv8V4XcrYrV^&m>aW_rgn3G6ZvlQtIR8Y?;N^^=_(U)s_^<nrXT{zJ?CE5YI5
zc8g=sknaIaxe$`m{!$UE87fwi5!rB1#cydbAqufM1I5Dr(+={77gR#dx@1##Ti-F>
znok$WQUC}663Z~FP)|x-t<iMLp9Sq9(96qIBd>{~ftP`OCZ^lt2C^fXm2;$A?#uMr
z)sD@z?JjeE<ieoCrWeD>%q3v`c9i~*s3oh;wK!SG+GC(4Ij<?b-9n=d*||(d_On+A
z$G@2cPoo(xp6dZ(w<cj2?ch&Z!r9+#fF0_g!B;_bfuAwhgr6`>k)2#zpiQMk3>4D=
zOxUzaOe_F4ZN(H0y_t_OVP84J-C9i-3tUp%z?Pq=p}2DUJ$@~HMLHAy-6T>PJj`I3
zgTS&<4#!8IUfv2%+Rns!%mhEp#xnJif^$Big!mxdLJNhKkDXd|K&vP%vPKcBGImYV
zMzb;?VzvF6hE}lZGkS7<9)v0Zo$<F$cfdx8wmUk?^jUpHqn$QJQ>8>5x@;THgLR|r
zN(BU>_pu?b1CJU=ro;yi`lGeiTzYeU$9&lK#Ye(XA9!<r#&U>)cBU*@jJ9_mOz1Tr
z80IIv#cE?dDx1VoNQfWgR)CK&SIik2_Cb7QU`ejW4ULD+Vc+LqOvmbOJ-sL<%YWZ1
z`B+3n65SpKzh)OqVnqutz%n6iJLa}d{fZELuEWS9G5}a%RA6vtgF}YKM5EUjW7KKg
zb_ffKX4N=9LSGN)f!HLAI^FAD)j0kDX!`z^5uHgVqjTCokwxRe4T}3qh7)3KsMl>L
zQHzxLMp+F4w~mibV5Xa7;&?~<DT1stj;oPOc|JtgD>Di9`imSr`N>_$_Gm$Eq_suy
zhU3;q63O+9dgac2tQq;nx^Xu-a&>(ypG2p=`E!wxUHX~GA;uf08e*cmG6`pmqj`(g
z@NL+>3>2@v#o)MA;cqeibS1D*XGX_pg3$LX89Fs`=>lYC`7bv8{VQdx4R~C5<1u)+
z!G257G-<X%$>$|n{tktwDr<AL6gxPDO{b!suv}9|crbM@q6@mSP#1(V(A(b|K1yG#
z4W)hH^A#c+nX!qJr7#XXSGC}p>10sX$xGohptEt@u}_?Yy9>r^Hy#;HZ^)C}X_Ay*
zV7Eb^IMbYx44%^zl|%DnL|ybTGrmz{c6{Z|En4bJfB@WMB055%z{U&Ei`C_zq=>ag
zYh#UfB)&r2;6WojA&*1WTjeYb7KQ!bGG{M1FNM*H-;ND$H7qNpeQa2rori;(Kg_NT
z&(!lWE}sr&G=+ny&vb1$InT8n5Aqj5teSRei?DgKZFWeZ%l+b|4oRd`R)ZL_nb))&
zquX)*S8c)wU9cb)kNnQ?NoLQa?Ar){Z<KYLp85_9Ip>1tlr_=QhwI9v2A=`&MnCyx
zy|wB>5I5@HxO!63P&)@|VL#1n?-&_)$)<|7?=lgsKJ3jDDP%(Nj0R%W%XqBOx{MBY
z>#Wzj^jmz?ZJrR&vid89?2kHDJr8<-k771BvhsfEZzWB2ou<@l<6igTZ4m(>Mk6WX
z(}VLUqrOy^TS{g+S?qdwrOIV$;4sGT)FqdcQ-zAtsearJk1DkQPyFeH-9FIQy-cp}
zX?P<3&|aH~!+o(iwId!A-+74!F&gux0*Ef?31t|rT7;8AUar#-B}8==SBpDhKA>oq
z0=QcP45!WAc5(k%?EB%mH!4h<jph_M^CrbEx6rn`;Cm63$TIxVJw8<vLutwVYSZ3n
zbZUL4SbIj6yy_)NW%ho!S(!3`Zs7Fx;z*Qgu_3;;a~+{e<FyxrqANZMY+zK-anIWb
zZNdUlLutL;gD_doPS!VQ*-pm!)ssA#A+N~Ixv{y*=$L>A1Y#)j8B!J%#6(pnk>u_f
zAKf#MF9C7s@!^!**&iHMptfSXYbx&hlgXuRS|Wrzuj)TIEX?ehB^QoCa>2eh1O9!%
ze-x~p0!fX%Qd_ohM1SV1^Dxli#9Ef<?XxQf76N!+b-bK5fkDXTs)Ka`C%12(03#~g
z4zr)cmah(l*$P9!{p%0!t^gDx35N!l0Cq)Ipnn5#3;pPtC&XtDXMfht8z=gBvc1ER
z)s3VTapUL@*J_V@RX0`sLry~>X;R(c>hv4o`@d7aXuINGWAyaNY3?2_ve#=cBNscd
zYVtwksS+f_af1j?`*R~M>jUnGN?l}TRbQqQvxvxm4Yi&NL=Ru1^^};y6<OCAp@Hw`
z<Ay_t@27*80dr&b{3UI=ldO0F2!As<m9&&|4mw&6<-ZH(A5-4FBY6tADaqf|?yeO%
z<?QW(yp=<C`&NxqbMfmYEYeld*=@{8e;Z|C8jA#_Z$C&KQ<H>?n{?{tq3P7PCODs=
zEP>C+--NV(yBs$|iXdOZ{1Ig7u1pqE!<T9qgL%Cj@{c@Z1enFYeaU@qi<(C9kEhs1
zw8;}0cl<x)WVwuQoS+2J&~kMr7{^4_u#1Y<Gm#DXA2IqM_V{ZjD#Ih5!SLTH=4%6^
zHENUn3QI#o|4rsf=f<7Axg*;S`0pH~ecUZjWJ)EYTo>0rE`rGvZBKmt_fS`^3-G*~
z#>-iXcx+;(2a)8Ue*~yJn!B8*^FK|W_AG@V_PDr@udI^NpK&!B12bp0Q<{((^dV+U
zSEfDQ;2eDDZYp-7x_@;AW(Lz@a^r6#PAz*Bf+q9^rkZN7#><@MZvhUGoU@1Cp=Mff
z6hh@41bjAO6o$YVRKw;P7`PENN7x6ij@D7ZsmH-5)q6|dx4JV82`)(1KWo}I0V@9h
zaUf_6m%I;)Yc}-fLT>y`>P=JTi#OxM<5D%BK}Z?+d;`XYh1~(oszHM@b|>%|T~)Hi
zwP!yu2zVg&TLH4FPhAGT$gtUDvI*H7ae7j-E)b2q0p|+1UH>?#mOp=s_kb*mO7ChR
z0v+<a5KIB_qeP&`Dpf;a$p0eq4p(>bbOW9n`$cv4_EJZ5*_O~n4*xk4ZN?Y-OIh%z
zE4g<-h&!dmlGLPA(HO)q!L~%`d8cg>l+&7H2Dy<XR-hSx61zjX<H{^bM{dZPf^S=@
zmI;OzJw)*NvxW1uV_`u7@D+86=y!YB#8F9w4DbDeR?l@ZJ6&qIM)b6?(Q(FD3x<Nn
zY|+eAFSD@)%)(BTYpkgs9<QC9obtn5CU!d?rMw1kDU`pRZMs2&EGDexe@YwI`@?X_
z(_=X9Gji*wyF=mFPeOD$V8oXAHFBWTBNLFQayQH<C(K)GzHkDA(9Sy;?TDmMb|w=c
z<YBKFh%!Jrv1xF;w=BFhL2D{!T87>6wc7I!%Ma?%O_2`x3cYe!Iy6Y(UoyYz%FVm6
znnGV{%_cL7u+fGP^=vEbtJX1giB5Mu21<$h*qz4DXo=37Le|Ph2W!xVG;337>4^W#
z$&{>K`HL)+c;vL@3wn(EVhKMaI&Zrc`aL`pD}Cc{Zst>VKErPDW(qG<XqN(mOPt;^
zG395spQ{W_F7*EG4cbwO5Q;NbZ2kN>M+j)b_(=4LV_eboY?Jtmb5rv1@yPYgo#^53
zie1)DsLPkCDEzIF9Z6<p&fTiO7`JHbHwTK)f}NEnrfeeOhB^5|;WyMIoa-WapkJ;R
z(tF^&nF$H@)$_c-_y$s{EKzoCuc;y8&z6swFY`M-iSXRsN20uP;|Y(Z@{KQfym6ua
zdBTYuc5S_!s*}H}C0i0jVGt%DkZC#mly5m`adUYUbBkbPpf_y;*oMcyj_-`qGa2L#
z4%UE4gG!mTET3PT;xu~O`Ij`-)w70|E7b|*#U<69T4dDJKxV^Z`sQGcVK^mUW}i?j
zmz1@!_w?K&EexOLePyMh=z*l%oiK&7*uemrc0FWqnCSIFrUaX1B7MF=44fezWud^A
zpu2R&Il?<uFe72y<^0?Q3a7pc$EM<y>xPs?Gqp>5WNoz3yyn#pj#&7Ul2gA@3(foW
z-aJ#-?EoRi6fI0hyHeVKFPP%$akxhciom7t#^m{OJ?`1!&aEua)Y?j10lA9hFpwQo
zd!mx*B|K-LNL3&brPl8F5VGiT#^B%pT&!V_t~8K)Kkx7zW`<@uckzv01Brn)_{BYR
zE=`W8!Ma;J!QZUWXbSJ6_XpY$E$drD|2i?Ba~KQ4{qIi`ZP*&}Oz|I?F`Yv5T`ZYo
z(tyWWSXLYxyt(d3bxb?^!mo9ClR>W_D#I%>QUl%C^;8svO86=jfymkS`Hh$5OX3vS
z7WXEI4(6XyeLqd}gC!Cg8hRxA<L)}a>bxI9sC)d272hl+hypX}OWiRm;&kU&`C{P&
zWx6Sc+HT<$6Y5o}>7iars$ue@*3|K@7-2M}AB_4J6AMKbinyP>{=N;?2<;=CImURO
z#P$wJQ`MaZq+3&S>Uw+d1!TD%pWCH9QmT;-`iEzjVx~}wWg93(s~wU3_^%ofUbDE0
zWhN0x%jL6n&Nh@kOqs{HdtOU2O*wQdGl*?+#<G|)$MXxEhVpki2eSS>cR&`+G|i``
zpX$EB53;c>zCiX>ryr>?-l8<VTMe`5h9>&Yxb3ddf!OT$Hw&MeI;w;BFU|Ku(fFl^
z{9w1$?p@PE%97XoC{q?}x!as3R&TnqK5+Gdg5{}ocWpuiyst9xsHDfNMIpn9W0H3C
zBevZW$h3`U1TPXww3bw1@vx!Iv9g;L5|Si&GLTMG^@(ZItE1BmsYSr*ddF+k!M2wd
zYw-1r@#J#)G(N6ln@diuSL~=Hfb|w`aCb1b#nZw`k?X#B{B8{IlYB2&;g1Ju%O$z=
z`ua|Z>cDKg&7MRRk!{xkMuSbtl<J)~qpQ(-y9G+AO9o&K#0j5e_n48Rd(x~HQ>4{{
zQ;U!fLt)V=D+rr3rIO}4m=MGO32k<64ol5Vw_SL;yEa_HgUhzMGzqAnY-US-ZNJsu
zM5J3&eMnedc<`o9YoHE)+2(;H6SoYn>`v!yTva1@(ZI77-Do=%=<a||T!*(e+mutH
zmK?&)%ld)`YcsYsdyCZ+7!Y)jPY$sSV+V;vAU)u#^t&Vv69u@rALY~sDC;Il;Ryqd
z44^zNN`aF42+~65V`x&S%ii>iCd5_Gdy~-r?!q+@;YK&`DpA+yVdC6;hLSb`ixo3X
zp-n$542OtAT0kJ4t=BjH?bexd-W8Sa*epIej$(u7y2=K&aVL#%!fg~9TAQ?X?!4yQ
z*sKJcfKUEgOjHyx1D%B05Sr9KYXf0%RStVgk4C~PKvh#yqV}tnR@fRk-Vl>4SzFsA
zJo4(mPdo;pI>Odg5J`R=Rq#E(EU_dp0hPZoBO7_CnnOeP#8bbw!Ep+$Je#~h<t~;X
zX@qT>#(Sy3`}MjIEi!^V{8w?!<Hfqv7pvatjPA?e)~NH~{fH8Ib$XE?H!nj2ftAGN
z{?V(R3MmcOiOOf=HN9Dj2sT3|ft`&NPGnaZ5pY@qZ)6P$aXgezip6OAp&B#`vo%G@
zGF=*2^uUu}eofR(cAZ6`IR)s$8)gwU4&}vcRx{ALDCpDU15Z=1S<pc4C@PR270rxv
z5KjKN^eKYAGhH2w_+qM51<V>ZYvpVn@O=Hv8C&lnE(iz8Zp3QbyC2q)!Im{er#w8_
z5Xw1InIVV4fY7hDJt0?`2${Q6e)35>3Qf`}(&sP&SLr?~WlkNCT?bb;T5gF2N5Uu$
zr1bJ?XjH!k80hhMyJ&$d!-n$YH?LRWOj4m=7k;CDZ2B#~jdEn5FRU5S7Dpf9c^Rh{
z@ik9=<EnzbuU!G3V~@6~S+y;Z@>9qZW#^$Uiy$@8>y~exH(M?wJC`g|<r3C^6i<m-
zf^q67+1ArTDy>D+KyQlQCt<UhOx9PFV_;`urmC)yGIE(}tm%`?OPG=N8~q15|Cf@>
ze=`x)m{g}HM{L8$pUa<Lc_7@#7WXS&R4CdwYWGCwSre0q>d8&dPAnKNJJOmKF2wMr
z*wun1w(4DTizh)3<OK!=8&8;y>nNJ>_rQNhGc;K5xvNeI_=lPP&t>w{i(fYBWx#iA
SiqC%<NHP+N;+3L?0sjNTl{v@&

literal 0
HcmV?d00001

diff --git a/frontend/src/component/demo/Demo.tsx b/frontend/src/component/demo/Demo.tsx
index df0eaeb575..2f64827c94 100644
--- a/frontend/src/component/demo/Demo.tsx
+++ b/frontend/src/component/demo/Demo.tsx
@@ -75,12 +75,19 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
         });
     };
 
+    const closeGuide = () => {
+        setTopic(-1);
+        setStep(0);
+    };
+
     if (!uiConfig.flags.demo) return children;
 
     return (
         <>
             <DemoBanner
                 onPlans={() => {
+                    closeGuide();
+
                     setPlansOpen(true);
 
                     trackEvent('demo', {
@@ -154,6 +161,8 @@ export const Demo = ({ children }: IDemoProps): JSX.Element => {
                 }}
                 topics={TOPICS}
                 onWelcome={() => {
+                    closeGuide();
+
                     setWelcomeOpen(true);
 
                     trackEvent('demo', {
diff --git a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
index 91e549111b..c3f9231e65 100644
--- a/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
+++ b/frontend/src/component/demo/DemoBanner/DemoBanner.tsx
@@ -4,7 +4,7 @@ import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 const StyledBanner = styled('div')(({ theme }) => ({
     position: 'sticky',
     top: 0,
-    zIndex: theme.zIndex.appBar,
+    zIndex: theme.zIndex.sticky,
     display: 'flex',
     gap: theme.spacing(1),
     justifyContent: 'center',
diff --git a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
index 35a52af5be..5133ab40a5 100644
--- a/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
+++ b/frontend/src/component/demo/DemoSteps/DemoSteps.tsx
@@ -255,7 +255,7 @@ export const DemoSteps = ({
             styles={{
                 options: {
                     arrowColor: theme.palette.background.paper,
-                    zIndex: theme.zIndex.snackbar,
+                    zIndex: theme.zIndex.snackbar - 1,
                 },
                 spotlight: {
                     borderRadius: theme.shape.borderRadiusMedium,
diff --git a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
index 6e2bb6ecab..b82cb563bb 100644
--- a/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
+++ b/frontend/src/component/demo/DemoTopics/DemoTopics.tsx
@@ -20,7 +20,7 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     left: 0,
     width: '100%',
     maxWidth: theme.spacing(30),
-    zIndex: theme.zIndex.fab,
+    zIndex: theme.zIndex.sticky,
     boxShadow: theme.boxShadows.popup,
     '&&&': {
         borderRadius: 0,
diff --git a/frontend/src/component/demo/demo-topics.tsx b/frontend/src/component/demo/demo-topics.tsx
index 5954338714..10b0db1ee7 100644
--- a/frontend/src/component/demo/demo-topics.tsx
+++ b/frontend/src/component/demo/demo-topics.tsx
@@ -1,9 +1,10 @@
-import { Typography, TypographyProps } from '@mui/material';
+import { Typography, TypographyProps, styled } from '@mui/material';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { Badge } from 'component/common/Badge/Badge';
 import { Step } from 'react-joyride';
 import { gradualRollout, variants } from './demo-setup';
 import { basePath } from 'utils/formatPath';
+import userIdImage from 'assets/img/userId-image.png';
 
 export interface ITutorialTopicStep extends Step {
     href?: string;
@@ -27,6 +28,10 @@ const Description = (props: TypographyProps) => (
     <Typography variant="body2" color="text.secondary" {...props} />
 );
 
+const StyledImg = styled('img')(({ theme }) => ({
+    borderRadius: theme.shape.borderRadius,
+}));
+
 const PROJECT = 'demo-app';
 const ENVIRONMENT = 'dev';
 
@@ -208,15 +213,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 focus: 'input',
             },
@@ -547,15 +560,23 @@ export const TOPICS: ITutorialTopic[] = [
                         <Description>
                             Enter your <Badge as="span">userId</Badge>
                         </Description>
-                        <Badge sx={{ mt: 2 }} icon={<InfoOutlinedIcon />}>
+                        <Badge
+                            sx={{ mt: 2, mb: 1, width: '100%' }}
+                            icon={<InfoOutlinedIcon />}
+                        >
                             You can find your userId on the demo page.
                         </Badge>
+                        <StyledImg
+                            src={userIdImage}
+                            alt="You can find your userId on the demo page."
+                        />
                         <Description sx={{ mt: 1 }}>
                             When you're done, use the "Next" button in the
                             dialog.
                         </Description>
                     </>
                 ),
+                placement: 'right',
                 nextButton: true,
                 backCloseModal: true,
                 focus: 'input',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 28f9297667..1328870eee 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -72,6 +72,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index 0278125050..68458c14df 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -65,6 +65,9 @@ const theme = {
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+    zIndex: {
+        sticky: 2000,
+    },
 
     palette: {
         common: {