From edaeebd5798f7b403804ff7a5f8781fbcd9e3f54 Mon Sep 17 00:00:00 2001
From: Grzegorz Zdunek <grzegorz.zdunek@goteleport.com>
Date: Wed, 23 Mar 2022 10:48:49 +0100
Subject: [PATCH] Apply `Identity` design changes

---
 .../ui/TopBar/Identity/EmptyIdentityList.tsx  |  22 -------
 .../EmptyIdentityList/EmptyIdentityList.tsx   |  41 ++++++++++++
 .../Identity/EmptyIdentityList/clusters.png   | Bin 0 -> 18583 bytes
 .../src/ui/TopBar/Identity/Identity.tsx       |   4 +-
 .../Identity/IdentityList/IdentityList.tsx    |  26 ++++----
 .../IdentityList/IdentityListItem.tsx         |  59 +++++++++++-------
 .../IdentitySelector/IdentitySelector.tsx     |   2 +-
 .../src/ui/TopBar/Identity/useIdentity.ts     |   2 +-
 .../teleterm/src/ui/TopBar/TopBar.tsx         |   4 +-
 9 files changed, 97 insertions(+), 63 deletions(-)
 delete mode 100644 web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList.tsx
 create mode 100644 web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx
 create mode 100644 web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png

diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList.tsx
deleted file mode 100644
index f5d0569641e..00000000000
--- a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { ButtonPrimary, Flex, Text } from 'design';
-import { useAppContext } from 'teleterm/ui/appContextProvider';
-
-export function EmptyIdentityList() {
-  const ctx = useAppContext();
-
-  function handleConnect() {
-    ctx.commandLauncher.executeCommand('cluster-connect', {});
-  }
-
-  return (
-    <Flex m="auto" flexDirection="column" alignItems="center">
-      <Text typography="h6" bold mb={2}>
-        Connect to a Cluster
-      </Text>
-      <ButtonPrimary size="small" onClick={handleConnect}>
-        Connect
-      </ButtonPrimary>
-    </Flex>
-  );
-}
\ No newline at end of file
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx
new file mode 100644
index 00000000000..5a4ab86244b
--- /dev/null
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/EmptyIdentityList.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { ButtonPrimary, Flex, Text } from 'design';
+import { useAppContext } from 'teleterm/ui/appContextProvider';
+import Image from 'design/Image';
+import clusterPng from './clusters.png';
+
+export function EmptyIdentityList() {
+  const ctx = useAppContext();
+
+  function handleConnect() {
+    ctx.commandLauncher.executeCommand('cluster-connect', {});
+  }
+
+  return (
+    <Flex
+      m="auto"
+      flexDirection="column"
+      alignItems="center"
+      width="200px"
+      p={3}
+    >
+      <Image width="60px" src={clusterPng} />
+      <Text fontSize={1} bold>
+        No root cluster connected
+      </Text>
+      <Text
+        typography="subtitle2"
+        fontWeight="regular"
+        color="text.secondary"
+        mb={3}
+        textAlign="center"
+        fontSize={1}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit
+      </Text>
+      <ButtonPrimary size="small" onClick={handleConnect}>
+        Connect
+      </ButtonPrimary>
+    </Flex>
+  );
+}
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png b/web/packages/teleterm/src/ui/TopBar/Identity/EmptyIdentityList/clusters.png
new file mode 100644
index 0000000000000000000000000000000000000000..751ea8f016b638203f1ed77036099dd017f8723a
GIT binary patch
literal 18583
zcmb??<wI28_ca3y=nSO{L(7QL9fAnRjHDvc-7u7ZC@3v3@S$rIX(a{e?rugHx}~H;
zO1gQj-`~IRyqJ7(@44sfv)9^d?Gvi@N|7AG03jeCAb+kTrvZHK1Fy|nB*1&ZHXZPX
zlF4&9l$N{6_BW`zvF?Yp-3A+juaCb_Wc^e#_~rfOncpy`|D`fCFk28)wGsbJIsH9}
zFdvoD?eyoejJSY?Zyiz8l2J>Fizk|Ke7$j2jck9e;@FhO4a?YitI)kwynj+eE_`>U
zPIk)s=hi;#R$AE??;57^ZEViuyPWJ6RZjf6Xtoq`{8eE$lC6>~_W$#Xq2966vpV3C
ztD)+TGyi=l!l+Z#-c0+w@>OjwP?^>ig|Gyk%!A(x<W$;?#K~v2sJq`ZZr`+apDl5Y
z9-ae(>P=H`K@+$r-DGaxJYTq6V;yC%b^KLk3*)3|VQsicJo7ERS_?VYT@r%5Ca(~4
zq!)u=Sy~8Uh{()*Q_dtEOwp1z3^Ge*2lFFH`;j>F%)uOj)gfB`HmI%Buh`^^(72){
z<tG;;$xqHn@(t=dO--xc%rc)QUeVoo?ZbR8%L+L%kp;|4sJdDQXF*sCYYV~QD$C93
z-;-+BlcFb2z1z0T=cGknp9!7*4w;%6tM{2odc@LYxjnz|>6gH>KkEf5$-(M^4a2tg
z0*wh|_F9OVhn*|_<Sw;yaCj-cO6pD|LQ}X9E~}S^x6Vw-ygycw?QOo?vXQC(cC}-1
z!Qg}Z^WN~^?Wz0;A|y(P%vQr0e?>ig?`?aiH@}{6n-oWpz^pzM<YCsawa&OHP?&oW
zJnhtcWqe%uc+jF}JNAuzS|y)eCeb|9EJfjf6`o3DNI<KtbFDw{Tj{Lj=ezP7xi&tm
zV}hMlm01;Phk*d!9#?%tR<SGbcAej7q^atbXrc4JYq)0y%u)i^kR<T&*%+oQ<E(eG
zb!elL^62@`B_T##A0!gl1IJ&rTPxmRr$(n5Z8pNjSXx~s2Rg$o8a~j#fn|Hc83V%K
zCn00)$a^-vc(L1j^U=8RsyC>c-8!g?<0VO%#N$=sDNs4NaIk(v52tsiAWNmW^+uKc
z*y#SDOTJEeTi@CM>tNYgIe&;<eR?E?t$<%_V1bj*LDO`S<dbF@VW0D5T&~C}E_Y;g
z@6>LDauuPj|FSfi5Y4zcK8N|){^-Me{aT9Gn@9<$MTJ!-<~Y0`h^L8fL!hlklsbfX
z?|0fCuj2KI-$=hZFYvG+r22uZGJ_-IvL`F{*f9F=*y#(BzN$G?dF7Ad=A63Yo6-qq
zs7dtIFU~>pVMp?cDi5dkEuNq)eH=F@_r=!Wr2EEX;`4)th$_@QHo@S~o}xM7XkeP8
zxa-Z|{9zVkeB#yPw&Mcp=#XbqUmXC(axlD($RcRB3gq=OE9|mpa^DCOmwEj7N!8Nm
zRPO2N6c;t3oe#?_2vtvPF9_=aX*d|1zG#tJ_p3cR_0u02s$9y_jXAK<M!gjCT}6&u
zd{>!n5PTwNbzo-dx7&2FbHc<z=easM^%F`Rvxe7v3tcA0Z^&8cFYrtm9&>rCV;A_k
zFMjYaPV3AaR2DbV7E8k^Y?;4R_VHvA4e><k^anWAZDhNRi&tLvb&S^j9noCt170uh
zpoO@95V>G;ws^gB&EH^74wF^7JryZ*wQmS~WnW4IgXzsECo!0QB=TgB6~rWaKR@qS
znc8NcGF4i}F-2P3F-3wDJ0{41vVMh%qiI5`Pf=R$=4=JkCVE)vstz<QE*5vbN4=c>
zV1WW1^P*|u<9$877x5{%8{w;?hhUfeOK?oP_b-15kZ`aBqq@YmHeKOPYbuw7<oXNz
zuj8V2Mz@_avTKD4r!k(63gB@9l>d9YCv}?pBjvo3+VY2qq}#&q=ovH~??OvZM&Oc`
zvt@d^@1O`)D(!63&8yzx_YPIBt^G0JUz=MmU@|t`w6MXZ>;v_6;hnimBvRR}7IU<t
zXI2yT`#7>5{c+2(`LVF`;?PETe7{kRsAZXN-@#jwa$ati1ddyHdI9g}8P5N;#XsN{
zpPF;uIz@X}9)z2o_vrda#J#8nRXALet(|Bp+BnjSJn>@%;V<KkkNb;LlAGMO7V%cp
zR4!|X`iy-KKdEi{*pWa9B`ux8(+t6boR{Wrq{i(%W`|NR{$Y6+Zv`wi&wyDsREVUY
zEA}X<sT_Pn$)BHhzEumQ&9mkoNQzG&Lf^3#0)}O!t`9Cxu+YRlplNc~iu*okp`{SE
zt$lh|W9uQF+_<~%S7vvV(^TUPv_||``ZK6-ZQ$3i*b^l!f)S4rqTk!o)xHkSuV43W
z#qzAKO!2Ie8TkRb7>*Ci`RXrm5hx(UZIidRLNFCno8s}|&(LD5Q_;=Co!E~9!+arj
zBi4yzX4(uYP<^RLlgstY=%!tKqKIl==aOy_zAv#{_qQ1Seui^GTRg;iB20kL<x89H
z-DPB;z-_!3?&w>0UtRx_%SvS7pA?h2HmBb21qk*4eWFIcND5*BKk2nrYHDiAzP?Vy
zrFZRUMDo_nD=bl4K~&E~+MZSG*W9*vvekR#*-Mkip-*+)yJzPU?OP?oNc-}LroX7Q
zR;J%*hS`~!%dDxXDUz5(^A>UuPP{PISpAHI$D0iWH!G6<6>#lxbN%^6Q+rtUwC8m}
zpZQ_rF=4`wq2Xua=SP2JL`6h2Dg5MJTJXqKt|~IL%>SlaWSg%ZV*0&$E35~$>K7=`
zOk;YjuJ3ndTdhC#YifUd{Odrc=-@Ay!n_frWJ2n3Z5q+R?~RR(BeHRNh!C%XmTT)4
zO{_=Qx0SYdo=#U-Q-j&@t5T~#0YxoqM7#Zyy1ugPsw)tXSk}Sl!@k3?wmgr$#fzQ#
z-6|2AeyKjhw~RfFOhI4__*jIp83jY^!VZn;=QiCS9dE0=J$Z8y+}`G~rM0?ayL~jD
z{=RtwsnDarI)p0`<42-Q0`CLTr+XMvItGS1@q5vfYG#dOf{IZ+2kCoO?O#n6cwUC}
zA=m|V-I&VFieCTu`je0QhX1g~V$(k%s$V=|NE{C}8}NAR=(xQ$DOD5kjG@C;>o`E4
zq)e*wIJ#$}h3O%;P2(OIdmFF#s~#T~7uEFDzx{@TJyqt<`wJ4`b9QyV1z|ttgWumI
z-F%kY0-?1L-8`^C!EA1CkTt}a3cxg-)-CPR41_Y&^ud(j-xcQASuWSgZx$@2=0&e9
zk>b@f#h&&fyGxB>5+mC=Nc&_CcA^AXULw6X1p%MsPl`T)eF3TFdn%fonR=5sTmJg=
zv1`f;Jio(=O9BO;t6B@n5k1;sc<n;t)rDWHk<m|2hMC=WEf!V>m~5ZCsW5(!>GU6&
z*}R9~Lstbw#pdp`<nMyn_9!zQ|E=5QZdw!?r#<~TisE>?tjUHwwl*>Vhw}|21y~C5
zJg!+-JP#)<bI-~rD0s*ZrG!0~8dqCi_$3PLtgoLQxJx~K3BrFLYSU%yq@ass79{2I
zt{s&VW{w4R?+ilOyb6^q7>?jDw?^n1%-O|>e~8%P$@S)hI|Rp)S(6`Xi+W}T5bzp*
z(l$1}N(ACs17a-3tE3gBb6R)I)AU(gf+$b`Qm*^&2?=Tm=bXQQX6Kr>%@)Kh_x%%!
z-VP9Dii_WBDSC03r=9O}FjMQ2&*?BFMo})pZPUCbuenvB>+R9vT?sLzNGLq~6;#_9
zRC|`=QB#!r_9%!iwbScO^9jScy~ClkLL#X^S84i>SKrQ`i><bzcwcM5&Ew=(zI4SG
z?8Q#O42h@IPo3qgQeo3P-1TM@CZ~ir*lO8orVDtCoY8kbCiNqMB_f+Y<fq@bpbc)F
zoGe-4z+;cEy}jKxb=%`DRi@yN`bC~4L+0lTy_DAaTCPQ>&h1}!!UTA@y|N~mmLKAo
zt?ewkm#_CX+1%zl*1RkhpcV}4qP)}umNvt*0;Ww4+b@#@*i}nc)TbC%%>s+Hw5l|>
zZmH{6E%r_sQs|t%Xx)nH;ZA6Tn)btzX`7S)D#dTVDHzUZ5bR15H%EKGA2PIFfQd3Y
zWFHbuA|hK$%_#DC>*I6H!Eanw5&cY*B|^bUJ4^)?#FM!%#pP|~+({cKVJrE9SOV-q
zh<3Nrtk>6?|JD3vIz^^aueAH+AdLmXDnT}3!ZTjNtprlp*RIaa&b5iFVFeD!QrwC>
z-aj+SAlAh+re$rqPa0RYXq%SR6Wd;93L}H!MXQp*W0AE3&DZC?-IJkNloeG83>Nwf
z+k|vHWnJCfEY=6VMPNy1uTdG!)=<;LNPx5Ko9)3Ql@@x*UFrghDM;}I5(~^Oq}+eT
zpB^6$N1O3>j)H|CBBTcG4vc}50uag7Rw5!I)8ud89KWaG-7>k3X>Q|Dna<~d0ybIz
zwr9w#cxax!cFms5;!pVWraE$mM{<93*7R!AkxuuR?jT9VJ|Q%hwUigaAua}k!><Q&
zBx6>?e`-2-XdMShI4p$wGf8oq&IbzIjRhx!GyZn8zMm}P^i$wc2j7?`M^c{fTEG@-
zHKa%KP8ia>-@{X_s;cS)B85f#>9f_Mh_T?wEX&)A&4OJd9mZuAoNB<DI&#Rc;SK@?
z_D_$8lbxJ@noP}1@dyh%jzL8vFZrK_a-{s0jQM_7aw1>CtSKl^KsQXK>Pel()+gH^
zPe{1DYt1P1P9bHB%G#&Stw!^&J$$sck2zAkj-vEl@8Hc>KLON{7KShTV(^vPkg9q2
z<F28UsOX{Z(%;kDkk&}E4Y`#wqf<!Z*w6!j8TRWe@PNv09hkcthu2nDyq+3SHaROy
zU|a>KTJ&ZJ1=ERdFas0pCgf+h@w<5_qRrb8YI-+8q+*dr$w}h%LN8cErBoKyq=Aq$
zw|-h$Uve2df3*|+mXkSEB%G^?L}E3fOGZXa?D)fz-%e;E{M5{*lDR8Q)2sS{=>71X
zl)z%n?HmuC)4Q4uAnWpy>|DV(ZoeUzS8LXUg#jPDrr?X`X~$!@D=%H9y2Q({!ib&;
zfIk+}nDQsga)}9e=jwPr&n$b;`KrZ8ZNy>ba_%G}ukm-LaAcQ-L1c1yPC@Cmwpa+6
zSV-~3=6kgRZf|`-(x{%>30E2WkNAKe7eCh(xV%5ur0>Q0pS65aSUUO|(4|s6d)%+b
z${p^q0;Vj}%T>6)kUbnUKCx&0$nC_k#N2y+4=x5I2pu^qMW-`QPVeU$TZnB=w=k74
zxeVGSiZQWdCl*d2ley3Kyi*O`M(_U=HdDF$m|$4eTeQ}bFG?T~J{eB|1!RS~yx*I*
zU4@p@;<yut<W^p`ZPCV-8=pcN7Q??!0z2xC@{j6!MS><%DK@-QUn~tMu)b&U^EAp@
zC7p*1iCH8PafD~q5Mehl#G*sm+~8k*lT(PB&lg>-Y(W6e*f3Kv+)zQAianag+>G_g
z_KU^acyUwoZ~iG_Rm^3S>3NoE1RFdI5ipAA)<A?qk??$E)$F>AkTv-h<B)fz^OJwr
zlg}8tX0@PPI(A20;zlW;^vMYo(c_6@B;o<pJ1i|39)?y-4?kPn?>eq#Bam#^&@=Vk
z>o}c>q)QReKZV?l)dtu`VN_90f!~w}_draWt~n5E{KYuEI;-Ndy8+s__u1KS(4yZf
zP-l6|X$448&)@8FrMo`_jdtPe-1%nN>iU(rtc>dVI;TBoCw&7T?hE+6*?y^i(}B%-
z)(q=aIX3@Yj58t;nz`*vXiY9$8R5@M;P~>D>bxM5RHd{L8TVsy?jPl(i?tF|4DF%k
z@dm4u2DZ@#Oyc;8<?r`;-&RlXP{Y#l8T^-5NiuaD;gA1D&JZA<$H=<Wqz*Ctnd8vP
zB*tyiwD+N;Zb&ay(~N(%Zou1v2hq<axLfKM7x2}x>+UquBV3gY80}63vB<RSTH%>+
zL-E@F%R&vFy%hlaV?uC~{v*&$3;^IAq}N#=6kb|bZd5hGJJgXr=9aIdvQbsMcX5^5
zjjPnAO=eH`IYd^wtd{uQt)j$z4@c=ODIOaASp7#c@-v*j(3tK;z?%rGGRsQGO3NyF
znks9gn!LMxNQ8(U!*C71J5h7ev@rn%`Qt)17aP{}IEiG1KBud&#KW=ZR98&CGZ_il
z_@ALR1uGi7D7WdKHr>~q@r>3Cz=9P&#PKJ@1PVN;E*MA3xKFtf;H8%k;UCcy`{YhA
zbQ7Y3dihGCodUa1Yp7^6=qW)$N^){!jWRnX(oeCtP_&}QPn7Lt{g()9nv|L}iZwLL
zNC1=KdgTDx0ov~s>v)A-;p1dP7csFCd7$Jh6ClgWcU9<dib<Y*7f)esewUZk{k3M~
zi%JL9MdfEM>=0A)swX5He45xSE-@}|`Jq#Y<|((GgUH0LfUrJ8pA_g_9CBP))R7V_
z?A;ebO@U>(Y}B8ytXbP;5R3P5>N)y2Bt%dg@2`i=;RW~$3J9vQF(KqX+7@d8%qDOL
z#a~g0$xt4=uG@~dX(i$nDcTMCg0PIU=ZCmT$HV&6yd+66_4OKoi`J=!xag}h`H6wr
z2ircUBk?h&y5lFc_lTUfHXn5lywt}6NF->Q-xhD5|A5OoE7>BPr|A-6s+8pxua(T>
z#)76=<3P@F`8l*ZV7`9k=taK5$7mxCJj%$0MH>!xIHo0VMOV03zHLL!w;4`eOW$iZ
zIezpleg;hp)M#RTFVE=9vsEZW8py$=xo5^ynTQK{V8+XGwhI5sd-mEXth|Ib?Q{R>
z6F<2prn@C&mXQXggqDHJ3CdQ)aAoi><ifh+MuQih%u^7%Pt{K4N#arF&?VUNuJ8N)
zf&$F|JafQpBHtzhs)R;lwz|a9KlHN_yil-$T7Ou`|DM}E<6bgqRQt!TmT-qa0_4Jp
z{m3)Hg-tc7F67Ndy-K2s<-(0q<ot-^ztWS}yfA?ns6|7BPo9eXUj1{K*#5P!jh3d`
zji!keNO`cPLB=@)y*Ew$!?y14f%s_mYv8ik9MYY*K75c``)53%KDYoC#pU@EfB(mR
zxN=<6Iq6v8w{9+5pQelLAtWMR`-n&LkYx3N1NPaJ^Hcr*Eijw8j)K)soo;kkVN?&w
zTu0tYF^rGP8^vX<>JeG{S`|~v%>gO}@4sPOHhzQkXbtz@;&ear$7k%V&Lno5_<HsI
zczRMhZ?<&DpRnTSJ1R;7<$CzpQVfUp4LvK2t?UzEEzBs%mEy!n&PmxlJzIem?S{{J
z7Ys0T9ONPt%$s!nS7L3zny3Pyual>wY6ksJKajjrK*1p<!q|AHX|Kh8uj_Mahsy=*
z;SIwGqW)!^filYHH-_}7Ab^))b}aE>p#LmL10y}vu+;^0A}m*nY!fF|QIvPd4$myi
zGs?&ShIu@G+T*hT<q|`5-CL;M5APFqrc89&l2|54Y$wBdcoq^$ynw!DtH0hEey#jg
zptzxKFLW*SM(bq&?<0C#)F^{tCr~c1gmy1kz9)EaPF8}!WO=~Eb_mWsN!oliwIM|B
z%sRAyu=b9k+`VSUgoz3(@1X$rK7chb)Oq&t1;*;YOuiW=cwpJU0u=lE%xA0PvMa(W
z_Lfc?pCWG#CoNf`?6A!2*<-L}c?k&#H++Bp_z*^!JOCEp=TAb4lj*;Uo8kMJZf`_Y
zp8_>y#c%UQ_M5A}?Q43LpVfg1+ImF=ERQmztm1bpp~qB}l#3-Q7hI?{@(Z3LP~gZg
zuc^1+o=^nH4r|@8<>dZXDtzfg<Gq4(LR50N9`1`io2GY9&yL(==yd%rCrxu`<4!%O
zlVvE&F<ynM0|4>-(nh<@XOq7d$mv~D_wz;O#42+Y(qsu#W}m`aXhgcpW+`D~Zk(?S
ziGOXtp_-IqpV)Y|np|r4EWkmMbgHr}zo^jO<BO8p=9Yy0J!SI%FU;k#sRwQS?`fUX
z!<na3!y;znJND+VReSBz&xNO-vnHijWk18Oet+<ghXZ+#vK|=+Z}^V5s7`x3dznX)
zmtq%C@Kns&%RDgsLm_oG;Z&A=AIY=J{n)*8&vu7BGxDNazj}P1T8>xLt&O5kK7Rr=
zSNBQTV@xMpYl^|$8G+A9+Q+IYGWNCky&skFS}U8^);?{<g@w?A^o3R9FcI&isvE|$
zQZ|C75-rxW#~AZZ;OxYk)OF*Yg_YafSmwHM^6vB1$rd5KFSo&>B+fDy%f-8&iMpl9
zaK+c0AYs;vOw+?x-Stxqlmy0nE{awX{}^`{)RfE`t$fk*M~}g{4Z(j*AR(ms%KvLJ
z1uhgm8fJW^!^SZ7_UvcGc2xV!V?6j#-|F;Pr$L&DMLKe|p9CW$^x-KCFDRD|=+(w)
z@1hBvpHKN|OJzo<M?rX5)xOw0gT?$SE~Xf*J^p3w%CS399)cOaf{3!n!tVA`BWQb3
zuCRu?h!OwzN#)}_qvkGxIdvneI5F4%?&MT!Z14s5^ko^IFo50{KEjm}<Dym)g|W46
z$CLx#njcd$*pj{AJ<6O2Cv<-IP7qt0xhvg6B2LhoJ(R=5-gz9=^SLkz1ThWZjU{<(
z2<71oDHg*qQpO1(44<(umgg^rWN|;M7WDLsKvw*wdB#-8u^QgXU^xF>P;Hl)q8ZLW
z#2i2=Y13g(v&G_UoC<7dp4aERABE08KGsksz^VY1<AXP;|4E>=?pY1d0Xl=c_G-4j
zFqBgj%a@>y2;OBYo^qQsxT7#8GPcIXVb*0AzEwvu+eW9Bmg4W--o6Dbd!gs|<iBx2
zTmE1vpAT{5Z{(Dk&&t<<09h&>Sxx%EZZuEJTqxWU!v`>Fhp=tJM0gW%g53hNm#4Im
z%5G!Te;<Y;{f5Y#eMpqpz6CC$i<QUzO=!sTRDL_4JYpavK(C&dbw%<jQEgkE;?};u
zJ<5s<z0)^)MZ&1$CjlFzoBWu$8TWY|w#?$a81_f#tshzSJzZfl_;P-xH2m3recb+Z
zkv(}ZL$LFgoCpJ?x@>-|f)j>lSyl`OzKs<pTqa^$4I)4UZ?H9g(llHBGOo9GZf6kQ
z-GzvqGtzs*I~`|3e1~QbA<4IdaB<pZ7Mw&vrSEi_0kFciObbRkWL^GH%^LU0XNsMD
zNyI1MEwBG~<)hDNXlOZ{ZaR$n9dRzW4D6zYjg7UxfsZn7-2i{`BHyuSZYI7_vHvSr
z9k%+)#YQNZboYtbAUU;31|idOf}y--08=jlHzP?Jw3aPk1R<}`rh35BQKJafpQ%|`
znam5u#pU|z4dyUa?RDyUFH~l5HwVkNZIfA?juCr^)U#_?HXnSxjVF0!*b(e^16QEI
zoqxam<`YVR(av`3OTJ##TOyv2wqs|Zz4Qh7R3fz^FEOE$J`&u_eTn~U<8NmQ0%9ik
zD9S&H9X^)FOGzj!;NIvs5R-ZQdESDBSgq&#W};7b7ZXrSS8jRu@5;vo6bx35cNQgh
zt;N8WkDJn$2|5w~DKUPGz$Zr?(GziW$qu9n{Vv5~Oej-Su(g(&(#RJRZE^q&WJ1qS
z7RbzLI}_(}T}<5G7lSUpU|bG+h_hHp@^_F2IHYT9ctAtk6;rqfK?x8Qgd(K$+8ca<
zR__Y-!m=sape79H*D&-i#W={QEL=g9OwK_sEm~8;Kt_H1*^-B6kRtO$o}}lD_g_ip
z+}W2HJhT1hkwlr1oC5zTC>kF+R5hikW6!1I>F=Ou1#3VfyeiYsh|JiE>WqGWZLNVX
z{}&LDU9Nl~A<DQg$f-YXv5`II{L4?IYr)oM3>j5!E^BuDgAd=(ci0Qe)q3Gy)J)Ho
zMCifvQMH^pFXUsH2=P0vUwjv!x$o@<{1SE5oluw_K~j%+g8irrVnA$V=Hq0+#>Cn)
zE;DaQ5ZGu)Yo^=rwME!^=TvpRR<1o}C8eUd1u8Siu&allvyfN%VkL6zX_?UrQR0kk
zj)xaB_bJ}KV{dp&kP-7bm_~{b;i5?5AE!FW7lX<a4yGTXI|`BIjh!_#u~{us;wAF1
zp~9X?>2I;I?Cr4anoT^D%K{d3jg3~kqKp#L{#qT=f~YrC10hY+0{Igl=ou<i>|cd2
zyVXGD*Gg(wRQ`WHriUE{>wAj?euUvHXk_!>5&ZY@v)UcX^e6Un6PEHnOTa>;_-9(#
zfdX<qhq|RXmMqG4eAr%)vm@d1@Fp={<KF;G_B3>g9I<~TCu@*nA`-Za?8;lha5to}
zCUn%)_<(TgE<DF!XA(s!<kpa=bS6l3Aq@vMQ>hu|X^@w)Tk{wt`Sdx6U@|3`lGulj
zmr$ZaKs`j6bXl?a{m&;DjmvwaQ+XX#Eaf`t_g5%ii*~|M3aWGyv!-KaJ2q6B*gLTx
zVJ#^wgp<scajg!fVZki4a-upClmEFbOFhwzX75)CXGf_%D=`j^A3}|{5thPmTKCcF
z?~D%y)>|n4z|dMIrPuLKUmfPyr&CK7%zTz5J*LP4??;JKPw+}TwuRqgs0e%f9Gke*
z@PPO2Iz6PyN+Zr9wfXIkgH;+b>j6;O!j>DwaO?DvD1{*&Bj^ia`kO_Mp?Y0A1Lf#Q
zbE>7vqB%{f=UOe`va;VRBxh&UZmA(`5M$^)G#x4ZE0j<7cJ=&qQO1K0(dD;9Wl7!D
zP6+84`J;|=r*-M{)>tci_9Wk<eztzxfk}jfBP@k_l;;yQ{K;g7=Nzq=eZWE#2UhS%
zA<C|uG$OKWB1MLFjDv1byFcDgtp-RU>e3>h@)PqnlMf=4QlbDe1e^NNYi;mjw9Ltr
zUY<oEs>&GRjE`&oxIabfTVGM6|HSmzg^ZX6m*eWSt-czCp>e$?lTG4ImI;0b*&n{(
zm_<|*EnEIHmQLVdy}D;LLL3W1S1i0Jv1_VJ^oXIMp+<<aBdzZNyV<`Cxe69|E<oQL
zo_kAs;Qj5<n1j!Ms}~vGLo>y3PwU1(D4=}pUzSxix#%`+UW%Hw*cp!j)QK0xAmKM5
zM9T?$YB&2~;@98vYBQrKTm^RbLG&9rM~}s95hz(-)A#s*OoGTYyVg+5XZ!P7GW6xV
z!8!s&pE5Z#V&~Y~ZppzuU}z`G+kdO;Zf{-Gz4DT(PTm5$D!AT5RM9b^zDX?wk#Lxq
z_STUH3*!<jr#txFgYaJx$6VC!%jK%To2D~ZmjzQ(!;|4}zSk?!9Ti2Dqt7s3V`2_!
z57q`)<o*O_7jaWUgh?n}_x8GT;fZE^qOA0!4|2?VziWSimRjB2xh?EMi<=}PNN~iK
zHp9nka*Tg_QGF?wTi#3{TK;97-}r@)-UWRdD7&)=65$QDP)Mvp13bst)6QTdhF<-&
zO<0W=lJ4~>AO!M#+TWnDnrcdMx6ZM?nR$dmg_BS1_0?WG<-E`N;RcPvEAh@&<R=m^
zR~<a*2~r_E$hVM?o=A!KY)ital8TqJl~hizUQopHsA%IztB6p)z{qg=fEZhNn1t#T
z?{&daQ%w&S31jVvvD+SH;4;11DrA+R8XULZ1MKM4a-~?~q;W`shZeteu}3@R?uH3k
zMjd2|WjjFMK}&Vt6N{x96FK0qho<N^?T-kNm-Tko0%_{+<m6;?$I{;s*sV9V$q_Ff
zo>vN!;u7-riv#>4{An8F@Sm<#Od$dkZ-cU`PX*H^GOvqG6aIpyehoeNKK>kQD2J77
zKo!07$3smBriT1k5%~sc1oRW@>&(u%HX17So(^PijG0hKd=9b-*|oda{*y2PGP;y9
zR+-?{8|85RGiKl;XLh)8+)zc5e}k>J_oXC^AU1v5AA>?6F>=K8SK}}J@zOm8wpx)^
zk_B?zT=W`P$v}TvQhjWxx<4K~v5gA#aAsu{=Rg7ckaUA>sYCAN$G5)P8Z~7(5wAtz
zNpg2+u)0M7C!bBHn&y)T2@K+4{6iH%EP0NbksHS`R>Igbe=6^u+4l}+dyk%+UXkTD
ztY7M1{(_>{RsMDdf)g)pG1dS!;!ymG-TKlqXQlCZo$T>%5Nzk@6DUHNXTr7AUX`AE
zDD;9mrZraH>hWqDXPLQGyqAEpE2^v6))J&8qhc?_Ejwxg9pwOItfH+lWKbA;vSFuy
zaSFMvzD3Yke!&qD8xDc6tfsu0O^f=IiGaKEiR$PK^?0;m?w3~x-zkknaCrT^o!|k@
zo8fnl&G>B<;6UDwL`;K=2@p&3ua9SB$xMLz+_9FkXb>w{|NO@M@D9x$=~R7u#9GTd
zf6s4jb9hvwxo>f6k(Djx{J&hJ>o-x5jgya*!)BO2U7V4H1WR*NO~f!1?LbF``7BYi
zG8X(s@~Le~BE*y`x#_VbP4N1W7(ep?Y2uG@LY&S@-6z_H|4{VAXk92bSU7K@#$*?l
z0PqJ_hnIKJUxizDn1}b&G6+$~ID8BjE@VHa?ZVFBfbf1W{RrfE=Ju!aK7+KBWELDh
z#<RkQ&fCT1zG||PT%G3Q!Zwfs3!~p`z-_Y(zX+P=leVhOs>~&p;_7<s!G3yF`LEYS
z!oxI7y#yc|&i-54wMDll{qK7IJT;yX0j7W<R=u1+4l{}h$?+@rO_LoTk(zEC#1)(h
zfM0p+@ft0ofD=ZkQES2=fXT&w%T`()Tl>K3o{W92RZv;tls?b5%!vR+5WPINR_ocs
z1BaHdJE@-Yp+fmR_qrBs%fCr;e3Kc0f2ra8Zy<&U!;}#p(QTGR0}0R?F#wAoyMpP9
z{?yXygPiLKk4|Z0-y?f>BVPbqTP$dng9uz=HGNFK2v@j`6E+7?9Q;$>6g!`+x(pLH
z6uJre?6h?bB6~YPC2Umc$-a>)#D`}&npjm;6|bV%Aj@W6R?SIfoyl}!M29`sKiMG^
z#83iW0SON~UN-(<|M6X;hD*gBm6n2$!d;JR9D~XtL3iY|kmSx4aF|XE=%u=JOz-b~
znzx@})5v9$Ccc5v11<s_j*|-~E`@JG<R3rKv^jWAwBe#B`|uM@$L|gQ2;6Sv9??Mf
zI?ec=+rCF_S^So6tu=y!rv!#B<0Kx_m!ggHV2_S0{r<KwIug|3{xN~n)Dh!}jQF##
z+g{PGnPx&j-+yglx$@?#@WNbM4tR4VP6%5|8Tk$J@sfM|-UGJm?qbjFcdHcGQjR2F
zKL3cSun!QlO$KN7i(0;)_cPq@c9h&&;Y@aVfr4w;3t$U-D!~9>eurf&ycGeW6s%oO
zc`=fdJ*meM`AknEEyd5l(HtKi4spk9jrlJkmP&EluL~$8xB~#hf6lz>no~9P#EKPX
zf+jB;5vC~H{#!a?6R9t1Bb$(l#NdI%Cz18|CeGtz@b-ZQ@y~QkUX6_PY!jG8b=tGT
z&v(+_R#j+`#NT5SN%W^@Ch$hOJDO{SLO7u&AVanMsS_b^3u&?}$pjeiGA-#jUnSmp
zz}<o}sj$6sj$=Sii;$PCkO?mxqEAQI`TKf0LFiYgE`%;-i$k1ParE9}A-E^%b{T}1
z6UF_<1h%-tmXB0O2KPQxUq2YFU|(a)6eid6-;(bq!P!DV8vl#-clgcy?F;haZ>sMF
zoFQmFwE?~-xO=(WN5|LcJPybp5>H6ar^fv=krO~6GI4W%S=(S_H!eK(N$7)szIrXm
zpi=OFklw$9dGPtuD_Ieq>VhY12TMfGFSPvdp8|k#pOAi{dw%7Ior-yXeu0S2wnT!F
zB{O)LR&2Gyk^$Yziiy|`jMpE1S)h6RN>_fDQJS8TH9(eJ+hELO(E+Fjz(U^(&B;H@
zu1}DF=)-l`>C^HoEqN2z)ae<ohdyiU$oGFiN*lx4E(?h|b&^B!{viiLEMS0=8v#Vs
zX1oDeb&eCp<|3tsCC}+7#nmR;ydOsxhjtep-bp=QJQ|#qM=zR&2j~3Lw*1KR8`~Jt
z+Wq1%M)Onlvy$o%-E2FROko|H`(dPT8qO~POj+Q-RC5LbKl!7VkMPpt=5Kf-#l&d7
zSm<W~S=$!Nyyyi(&niY`>9~6MM<~gXd+Ba0H844Ok5&#6Xf?#usL4uQk_VRmt94vX
z60y)1W=l2$`ne)csnY)Q2eWHQ$GkSsOyHQ@H8XiG4=xHqUY$2sh!p3w66*f1-T}Jy
zL=03XV~>6nT`FY|g20>F2!Rk=GEK}DkDBU)QTPVmhvIQc4PCjc64#A=D|<G&#(O#<
zf7xR7RKMC`YZYUeJ_Gogz=c!#A@of>H(-!2f*zbGQ6<Mp{rUMqUWPF1-=>}?`GV}T
z;a~N!M+WxOT)3M1DG1BR3R^nwL!lWV0ut$pf`!R6zY3uOHrA2`M4Sp%{hI>2Um&gd
zkK0Vv&6bw^<y!ZO8OI!QbNnm>gh{7V(@YHZ?jnOa_=hd>Qa0GsC_{vHyB}qQKx$Ar
z)oBk2kC>Lh+Ux!v7zano0tdVKXQV<WLz=mHMH5o=x%}f7`^A5|M!Mg28?5u(f56;=
z%nNIMXaeoIZ@cpQW{MzDfVh=_LX!%5H?~xZCjYC^CIY0I<cDlz!R5h6S7ohM@5Hrb
zCRlUX7;Gj6@F#rh?s|B>Uen|fSqW6dGPqXHpLelGK7b(??Z)+=JBF;A5vr&4%;POY
zxav`!hT~(_*}YS_^)nG<%kIyPBVn+x@2s#oh|KnT8!Dm=pDFBWm_ERu^RE_Ag}xx!
zpC(l<uwZJ5y*;Xl_0UrI6-i0M3%Sk1jqvB?bDu)=8mNik4DNS`sbb@c^$&)AMeTr|
zq_sZ=({FGJsND}6E{vS{8_IHaI(C1Jf=7x)?8V^Ptv`B}v*Ml_rL+>II8b0S!cpwb
zva-X|nYNuyRGdPv4k>Eo$^LWd+i8?zVumesqJ?}3nn~lVc${3x7Z^_+FxA9_Q`)sv
zsJR5or=_0l_N7|s%7AKl{T5Qj*5r0F>o%{WrFp|j<QYb>h1dZLi;3aH_QInUX;$0J
zx7)Imn<UfQo*;w1V40S`Jh?SaDI3^s-}^9Qe{1V&>`>Y_nEq;aK9~)ZNZTM*meWw2
zG4~?*O0<v*XPcFtw0)Q67I_)D%PpWvvA0<|N%h?5rAroaqtp*z(gc+Bs-mMS%IgEg
zaC?U85|qOrXlKR!AiytTbX0llZot+v;&%kiOS<ikk*l9(4c1#w>|USFo>Ac+{XH4B
zBaC~Wf}SE-ZPhhQyBGCGwDe0t&u<_NKt!JAAfOMY!?!rNktiMQq7}rhQ0jbw$o^n&
zu?*8l-MB^!W^0|Tn;3KM)^zZ#`cXB@6+H<7^D_4d5xqRkB}?k5EXUP|sjW(&;}zm#
zXFo#SnKO)(bc&1HubY6X;n-4^qrjswhhmX<s*zTL42Lb%u1woI<vyO#lGe<&<MYR_
zwZ4x$8Y7^eH~nTfcqD$}vsP^hh@5t1qXv-u)&SC*)8Q;-HYSSi^(LeVE<nw3O|w>N
z)T_M8Crvc|Xzf{wm^pK^XB(dcY*ZfG9uBFQ(5pXY4M%uEM#B-kP!m?1AERU*L7^;U
zf<%9`;#I4Zg}iygJ>Kc>|En$BtI}YIaK0Qs2`Xh_l&pi~F<wk;_gwk>6Z|PkUq^W#
zto9|#IA33$kw*~O(Md^r%!v$x(D_LYzRa*?p;X7<w|`E@%3BR(X6{NB_}kFTXd`&!
z!EOFu7h>4oz9e%s0_h~eiiEjELc*v17^RwKz-W{h(a-<MLZ6MPeMPhfI$o6$X&-$k
zcA9h5eHrjoG)YGjOG`sTb48Inf5zYFUqpj`i>}jwEtit{1NlB-LwO<Ev@-)*>>=@i
z6!&ch{>4k6%t#Aa6?kXk1J+-c3ghYLjqR(f*9+tA`Q4VA{V0&0k*Nw62bD~{ln0N3
zi{J9)=uR#<>s6t~M63vpyu$P2I^JLW6qdm{JrR+hf01_2MVFhx?D;sv<+Umn+{aIY
zGm*CazNG#zxP(ha3B^l=i)zH(#nO0vnsu%jLUt|vZ3UE8;7*Y}D$*axGCH`Z`}rcK
zNa<zTgDG1+yjb{!m<D>DXoXGjfZ^qe*)o{Y9-H~Q*|A*vmRg;<FqM8q0V04E8q|o6
z35ei!J4y4rChOkE140a)mP82-V-j6|7d@<;?e*zCH<k;l&By6Y8EXq9O24V79#(u!
zs=LV<T)|fz<b-WBR6CW?`3!oYF0BbEr;2^|YJ8eB?C3dl6+p{xkBZ<Ter`b1J3%E$
zVcA6laf;dkSZ%LwLVGpe`HM0Qw7a5B$@AkvL!t_v!OyNxfYZo@o4T7riVFd-{0=6U
ztVmZ&A@0A4KpJB}YTCLr+Fp8(5vneyVqc4Fq>G)7VD60V%9q?HL#3G%S5_H=%akYT
zZaNa^<&7xqKUslG=N4=c2hV8W8<vB^-62th0qU-L_w#?-SJpnbTCFcKLO^5fxo~0r
zy89&uuhX5GsnFi;h&-S!?lmj2+pSt1ZX!H_p;62o;4(!hH^?~y9QcQII&CviYb2@d
ztFE?F$(qZp(LXWlci{}^$KhJ<;_A9=WC<gcNR4^^8jKgwOJ*p5=$oTkdwmrsqp6vd
z$x9_<3e3Z^H|rXlRZww9pS2P7+!H2^Kxg({u@a$XKwdkXq`QND{4`__l{V9+go4X~
zhwtXtQ2o=LEBoH6${oE7&8~dFop~!{4PGtijAi3a0-84n(cSwm=>c7qa{vK}uTH9Z
z+!Ates;yN$0;b=5;3Ll?<u-ZdVi6qcg?hec;%trVnxPtj6n*_UCPIyHNtjiqPXre&
z)zeB4;(YjWXtpjwu5oJa<QU}zc2pb_qvp(DkBLoa>3jPW)CsE>U?s@WJbU8~0C&_l
z^+D%Kq@z9Ot<h;uQXyZ8YOaZw>(4A(G46ctn!-`fQ=vPg!qF+GY3YWH@`~U04WNAG
zJTC9@5nXJ-gh!vPVgWA9)`)J2q<r%7&ZTIfe8Q&}OCF`;PbzZ!pv!L?(U;*zGX!yY
zHv0vg%&~<R=q>IdVUww<fyzLkG-M-*gaT6MHWbJ7L&fN8Efe=_kh$8he*&06B1PW)
z9tV!v8T+p1zlrD6mnR@1W9YU`sQ+XF1KJ+z8Njss{q`lx4|a>8aG>Y`i5!Q?BJR~^
zpb3wrp4t&kKM)!K)??Gs@@-CX<;|~_-HUDcV~|H{WtuS1*Fv^elFI}CV&=0J4{ztf
zP0r(evjI&_*j-&^RUJqg={xSyMJ8oL%X@@Jll>tc;ybss2VUM|l+6^@aELQ`(EBsL
zK)I+i+mO!6>l0ujk~k-r?AJ9|@Lc`aOuW3t5pRM-!o2KHn5zKp&B~1>K4WG;>**ka
z#6O%cIy6ZJYl%kaf7<D&c^^pUCV;&YibgDXRSdGbXnhX|BMKo&*fTI{L=%>!BBhZ<
z=;rV?nD)S-q!>x3K!r;~mEbvs_ZtW4I@^-X;5uPLO|+4;=6^t=GSli^SAoet!2CAN
zr!lfW#uYW<o?|PK($xhRymTqtliO(SHM?KXpk(8{8OCLi7ue27Mjr~!HXEA3vy?KD
z;@9d*86gi~4ZK)tK2Dg&;Jo~{-;0Hw3}Le_^Ean^+>Woy;en^y^8L4P&!CW~7ouq@
zJ-=TNZ*G(d(G)61&Ss6RlLr3^FF?f^qOl+{jUhyR>hH%sAGn{P$O7mX=R56D9AQ6x
zP7wl{`NrU6?%=_izSfGq4hG_iH4)CZD|T$!@I|fvyD*@ekO7fo$!Nt-^t_H%BAoDu
zfUdg{QKrFVB!KZ0GZq}A?2>xikV7Eg&W6xgH~3?r`?BodIf*c9hOJWIhNafrqsPLu
zawNeFQLxy)RP~i?#6g>W9l|A=TjD?2+0y%_fbdoj+9fruI%4o2J=GEs><V2+n;7tw
zYVLp}QKu*t5d()6VJJECQgWrly8LUWrHtk+O6)r_^8<(p^|v0lV4d7E5eMM=a|p^O
zs!7O}&)VM_8-N6MN9=<<nmB^*dlqr4+qJJB9y0*L%@i)_{%BV|CVYy%L%@L06?HS{
zRs1n|lIzKCmW^naz^#{CV*Y!f)dCU*6cZwSomxP~=8mG#d3A*MiT|gVH#F3?Prfbb
z0K(~aTs!%9`$EG1>u^D<Vmuq{L}xn|iOwI(*h~n$diAvvw2|(t`@QIWFwKd&IqH_{
zGpoDk9X%rqC&T#L0RrCD;kfmbG`nyA>EDTc=c}&d5)MJ%d=IUjoLIN4zPIa=W7G3*
zFAK5s1AYj=07RhwYzav)y?Dp3E3K)SCJY7ovC5-Hz}|H+I5J`&deB3WA097IKk@8@
z>><zGzZJd~f>`(o7MuajieP5ne=iBbpDk}9?!QVxfCXd#=*6#=TU)vnD?=uBCleZJ
zDs|)yxwxt5faaJmzk&~imT#~dKFjjl*iQ^$jtoq16<FG(IprL%_)<|(qvkOBylOhL
zL(jw)g;rNKO;p66Nb`T#1}$0vhMPFvkFJ;*Dz|R3j37KxBME(|<`fWNtbKY><H-(*
zVnRbiXaSrGtmNzZ^)Xn}zJN_Kb=?FljtliDgP@<Pj@OO9T0#J6VK?Wsblo=!iye0&
z5b5e0&dtG8mmgH*UzG}f#GU>96!QsUG5$Bd&BVe%R_;BvF-VX?E&B7O6b%g$jx2`>
zED82TMYeKLuk(3r%j<+fzCTc-1Z<GgWR0ZpH(W*(K;sN^ERUgNB>9$sx*V7ZECBw$
zCK{D|T2Wly;rUwFYldc3QdhknRG~@6_ui02r;4@hl(a#FU=8a>LX&c}>4N<J5zXNI
z79&Ht?Lfro9@4yLz*dU{uQ!UBbAhR2-UFFP*e59K`?^xdW+F~Oqr0od-1?+rQeDf=
zOj}n^9mIueiv0t_4LD8CQoH;Zd+*a=hJt67X&?3o<X?IkE4s-r|3=M1(OZhEA59ZQ
z2+04OYQON0zORx67D`k@QqiKiklj06G&t}3w@9Q{YfZY$n{e5j33=Z$Dg1jr=wXEv
zyPEaB5SB_8*+t&;0%3){5A85X2HO3w;CHYO*c?Q;MA_fbUxgmNUh@IF(GvM%P%(z~
z4pn|3Zb^+T!#A}ns~MYJse)<28^{wE8405n%nb*GZC}Zewu2MeM3R8+E)IGJ5jH7@
zq62dX!rtZCwQa@Le2^~Kat?vG|0B3w)oBgHn+w>)&U=or*^f*ZrNu}-)#Nmd>D4#i
zO1_j0hj0Q;7|O?|y}!)q<}gsTd&b4`UL-9qP7ose=2oGZ;l~xWULBvBf^@47A8mGN
zp8VDZfKh;bf!ef6RsXOEV{UoA_;Qk<aK@ab!wRu<Gaklv8+ThB({U`tOAOl5dlN>Z
zuasU&O#OoA)I)>0qm&l#B|TOQNXiPF$^Fy?Wn<}mg8}lLZnynZEW7SX@2l~ES|}t3
z`ARqK9-{p0?Zks#otvxRr)NLix;3aq;-~}NTm4^}cagv7kGFJnN<3SP*DXAE2Ra?!
zJXyB_+?AHLqmthV6T|lJs>h!NZ^^Wm6x<op_LLSlAwJ8IWB$%3xrum<IXC0ul!EJ1
zY7cyYj2`6RnHbIXP$;0|U|T*8185XSm)Wy1(aog`8v}D62D~gobz;aYh?(n>>|0TI
z6=HpwL<xKjY%!aEE-B`w+5T5_<w&bQ9k{HdS`Q4=ASgH(&>4QFr^irt#n!$B3uy(H
z4k2AH^Y8%uKVc1*Ow~wU3Bd5)p;1x<o^$EXuPC|s<b0bv(ZWs`BmHnwUeM{U23FZB
zS_#L0MgqnD=e}Cq6oc{)SH|<FT~20SJ2eO%NPa=R%>3&wCXmocNT*u)&INSH=aEHo
z(=v=lK|o(2qoiPcwqRxEPZu2<BIy?cCjV4?d!VH+mBT9pqBmT058*}AK;Vpp!>;AU
z2+XvT#-l7P9RLKP6|bUqTA^hGJbP}SUx){S!$+>o&8hE4vPhrTmlC(onciZufE@?u
z1@P8Dtc9M0BL%J>CO5+-#Gdw&oDzfkZs*YAuIt9R6;Tea&n<G+$=ciC#l}W2u#z-{
zM?MIzEqMy!GF1V3pAci};+Q;}9y55R^G6$1rp6V{3_{p)N#imbqnr5UUaju6aNOjr
z``JSlu+{LVa(<6G?ovD5B4rSdAncQ&H{LjIr<C#Zva*~G`URXMf<bC%aVX-=p=<2+
ze~Ug2Zy%;S|9QWGox&4=rO6;nB-H<BzddaucvJTD{oM>Nt|Q<8+#TzCvFhSTn5rW4
zLvEaa<DAI;<R5!qTurArCQmd;H~Ue?{m3?6!pLN<{%@b&gm(%;*J<)6uA=v|qrSn&
z$iBY3J(|yiMLFBDFH`UU0^+>EWm=2Qb05#lyUS>SsagLQ@CFC02p^CMhh99p9}Yb4
zzl<<N`lU6c_ZBZVLY?$4iT<pzNgdzGjL4s=r@(Q)W|kj3`=Sh%N-r}52n+5X3wmZ=
z4m)mKdhDiuZnoNRWeFs|M}sb+dNvT7F*h^oRPvr#G&pQ9L531C0@`tp{DgW1Z;-=M
zZz3ofi>MH?YYc$}cS!i3`T@0wt`=ZOY%ogLeG#qd9E#f4A^q9^oO+;OzG@?xQtI$;
zg7>|McO7f37WU7<rB!~}{`%kw`)lAVn}1JIuq}!#ob0rxh!gRE?J)mM`yKP{2TBwu
zrnGJ!{+&gLkQKCtuvQsV_TAZ-x&X{}{P}MyNH0BQBg;-DqfC9|9dA_J7Z+$IA)1vN
z!Q&p<h;HsVf-<^k%bafQ%e1<O)B@+W%$NhqZ4XI2L45tG%*c7)8`)+ZjfqpE?V+W3
zP6u^lcHQ{t$FWVp$3(vpn%ueG2Qq?%rZhCNkd1145Mt*R6Jgf3^vXl(urEJ<d$y8Y
z{WWGA3tBT-=EYp@k2kj8)V&`w<uj<b6<m}hNjXkn)3Q#Ug&bMu?N5yXm;Q+7y?CoH
z`^S?cpf#Pq&%2gg${6Fx&nn<@_(EHmqmgVd<iG|}<|`lpC}g+F29>+K8GOaH2fhme
z-8BU083BAiKo}$kMKK3x;N@E9TLW|M7mCeif1{g8ck8dNM_fOXnNbKaJN*)NI3!U_
zlo9Z8+>X1^9`mdKn)r0H@F-N5kICNv)G852x2!TntKfu#`M|eV0umtrG447Un*IPC
z1wi(>{K_@;5{Z}3lEJOfa?$g)11Cq{4S}7;6C(H2?GwXClyRVf`%OIxPE{;}qO(<g
zb1o(8jFsEnb@I4hG>w424QK&c@3p(Tk<KB;M276LSu?kPrgyyJ1Z*V&+#Fwyf^sH9
zp_rU$Fsw*!#2})lhV-$Oh1a{-g}XV`s5k)LF-+OuN(-Co*m$v(WuM*9AHI~k`B&G@
zew`jAdbnY`Ln$H8CA+$9u;?7x{`ykU_fT=SpQrHhjicg;9VB_(1mSgi^kQ2v=q1&|
z;I^EPE&Tm>y<AVM$-klbMaYZh+<7}BotRy@HA#2u^%vkvK@)HVHe8;+ZVP;LztHQC
z@8#ltz2*M1I9-N9P>PMh{4IgBPJg;o8AGJZ*?unzcV4b<kx7C~_zt=AdEGd3qwG5p
zRUjV`ndM{{f(2rcjg+{tEw@i_&7+rjcHaQf`>NC{Sd}68b<!g0nAL`1IktYE<DOyZ
z_3pMyg8O~w?hlq0?vTnp>I1^09~x4X8t@Jiy}HE*G%C!sFj1}Q^4r2EK+_#7K)?AE
z>Qw%Dqf1|ISA^tvvX51e;DNK5LgB^(AwYR_H|K;%pI@z6c<uM73$S!MF}|l~(|bNs
zyNrD3AyES&Z{{SH!Myj=rD^ExIKI>;!#)Kj|3#cQ1GjJ!TO;F}3f~aZd3FDZ7sjaT
zIy#au-rAaZGZE-C0gHt8C}pYJ1`wn=2sjg>oiOJ(4wWqlH1BMg%>-@paiwWwEol7U
zH{;}ba`uaAX-q#)(W#D#qHgLfdcPn&=9?#mgh!kq<`fK+5|}Rk&%pVATHGmZ@)0O6
zCxvUI0-m|Qd?+7q#rLiv6HrF~dGNI^zEh2qGRMywSdK3;)>@(Xb;k8azB-`B)1vyF
z+RBo;YmQ3hSt6KN%`IoK_l1Vhlnm;kHK2!Kj(RpJkL})d>5e3|I2=Yt^_7awU_&8j
zO#m93n<Sghe)P^?=IarfHKxfX{~^!XaQ%JeVkg^cz%4=SejnX^lM3kaZsZa8Qcik<
zZzkC(8(<N{Q;&1r^H#gufEpxwBbo;1w8i!K=(4Vm^5gM6<#bsc+}%gz{;)F9j(_JF
z;|WzV%WKje-agb+Hoef3w=|>xlcxw_*<P@E-&e{&z+a_zfJ7w36o~0N3zDMV0NpK_
z_q9nsZOOw?6x?b8hOjc%`30V0hklR01Hk^fsu?)G(&1YlJTP-C5|<<!{CRe8K3l(A
zU?(~Lux)%;1k3B4MI@~AZs=prVi<o*khYc!h%NXsV;>9;l_XV&@K3T1*pY|JgBy@@
zK9lv%+yAeUb8%-vjpI0D=0Qv6h|n@e7tdx1bB$aghZPAMj{C!LohcHzj3J_xdfd9W
zM1(OaBP#NUCUTiuZM5)&gf+u*oAWx)`3KIQ@V>wI{awEA`~8f94b~$KHy=q@Eq__R
zzB4KoCL6Fyy@MtHozyFu&LZ{B4#?*@!azZ|XJpdoh(aYZsn|jaT2Dr=Y~>r8AZH4U
zBDkYY;xOhJjHWV^w2U!Y`GuynC2s|D9nJQSDfY};WJ+RVKKW+2CfW`t!!>F+3EU{R
zr_=HCe!ap!PT-?;2B|lz1#PnSV&I<|6x)}oQJrdS8bWC<9a};#`T*N2uN(UoWVLAD
zSaGUlcS=lOiCX;i9#WoR)0BLxQM%qO=Nxq{B<yobS$3d!H?T729Z*4*7mZ9zsu8ke
zB%$ss%F3Ra79L^x?8;nQ5SJg3VFmNL+cg~QuAbfI$ZoWw!gG;=Af>@D1L9VvMx7T6
zfw%OO(iM?z%0%XPl|iZxdQGO5)1k-o3WBKMBF<+0;M@ua1=`|^+r`k=ZBe^f?eSkz
z_D_pG342IKv_Ng$TYD*A;z1<`ZyA2AW2&7V5w+YPGYwj{n=*&OlZaTMT%Y>d$%t@6
zmJ{r5$|F>4wNiR*4`xF6^962KOxW3`?XQB7aC<t$)(wpoi>u%iTg(-xwV3xQ<5B<V
z&OnKAplIRgU5YMZAh&JDBwhY7j2=rkKyFV|TQzm#=<A!5zD~yXm+(Xj1QMD~Ot{ez
zdz*qoco35Q6^(0BrI7-Pl0{5osWf<($(^)4^D25LpEMcm99-=VLKx$E3w}xlOYLWE
z=pD^Ksjv;4V{O_)A#3_BaDsQs`tM+8IdFnQ{g<NM)sn<-s=Q8a$nKk(B0F8sR<Y?d
zLmjh*<a~^#`}SD>qX9(7l2)0#E#$L0N*)qWKxZ5d@NTI@p2+gbBaHFP8o%ES%HM{I
zPHyo8?E6oK0RrKJ%PCrNet(G|3%y*SGLf_RO;slsiT1cyR%KCXS&6Co2n}@Au65sq
zZX?#Y8t8x?R`9-trntap<T>%{d>$8=IFZIKWGtgJEgqQ@7ka@4ssbcvZzK&h?vQg$
z(RB^;SMyqLcElU~+L78~SlGkybFfOKL4Qj*33Fqzh(B{@w|i<~^Mp;#<peoN{u87u
zrb?1I1?Isk4T`x%9tEzBb?j$Ck@<GQrN^nu=UL!}8m0|d+RqI{ayJAov`_8^+eC3<
zREjW#cCrhh(j#;Eqn_+S!pqg-`a}VNzqvU6U4Q>9nI`4Nxk`*4yi~fwBFfH>s>UR=
zw${;%<(XC;=v1WY>1?ztFaDR)WgGk;NaeLlH*`!gJ0ZlSh7TC69sJ&e3H>~TTc>$u
z$b+!N+t<*%J$KgU_}e=B8VrbZ@g;q7rG-W!BRT132aHRuT48oxMVJMF6;(5oz#kAc
z1iTa(F{${DFp|v$?xxw+F8}uF<*%x$0Rms;y%GgT8-4qO;d<Jcc1pRXLKf~??nrZO
z<k~$1GQ)iFk<Co?QhEhWw2JoGAjKZp+F0$DA_B`g?3GU|2D({YfiuUm2k&Y4DE#IL
zGBFQT;}*qB6uwa#XVmjx4G!gukQY>Vl6h%`V9wAmV&{CEU})xp_Z4SIfX7b=a|;z}
zU*fj8z?(MF0cW!k^V~^3xD|0|-V9nHbZtD0$VoYm9*5eha0n#sTEQ=~EusEfc4Ht@
z^RQn^+r|uFwY-w4Stw|bHaiY&p$8_+J$|k>5yK&Vy035?5|#NqYy@y`-f3$3X*5FD
z1Yk`4YT-J$GJT`zxD?+w|D0M6x-M>!*S14ccpiJuMDDGEKValQ8#FBhWrfm=KI7NX
z&Z%^3z?L~yE)NxdaQ0(|Vo|560VFJ$5z?FNRApTnclyu8vl5r`1n(o0ud3r7HqpWr
zbluZtFVZ~I2oivUqmPwAWH_a<d%NBbhXD@H5=u2a#|jg*8M_xl!8^@dKTm+>5e#Zp
h>5l&oN>5;y$b5tR5uaV`PXWLoF*_RvYr2&$<sS{tWr+X)

literal 0
HcmV?d00001

diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
index 42aa2916b0e..66a5d86c516 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/Identity.tsx
@@ -6,7 +6,7 @@ import { useIdentity } from './useIdentity';
 import { IdentityList } from './IdentityList/IdentityList';
 import { IdentitySelector } from './IdentitySelector/IdentitySelector';
 import { useKeyboardShortcuts } from 'teleterm/ui/services/keyboardShortcuts';
-import { EmptyIdentityList } from './EmptyIdentityList';
+import { EmptyIdentityList } from './EmptyIdentityList/EmptyIdentityList';
 
 export function Identity() {
   const selectorRef = useRef<HTMLButtonElement>();
@@ -84,6 +84,4 @@ const focusGrabber = (
 
 const Container = styled(Box)`
   background: ${props => props.theme.colors.primary.dark};
-  width: 350px;
-  padding-top: 12px;
 `;
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
index 8740acaf641..0a821715bbd 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityList.tsx
@@ -20,16 +20,20 @@ interface IdentityListProps {
 
 export function IdentityList(props: IdentityListProps) {
   return (
-    <>
-      <Flex px={'24px'} pb={2} justifyContent="space-between">
-        <Box>
-          <Text bold>{props.loggedInUser?.name}</Text>
-          <Text typography="body2" color="text.secondary">
-            {props.loggedInUser?.rolesList?.join(', ')}
-          </Text>
-        </Box>
-      </Flex>
-      <Separator />
+    <Box minWidth="200px" pt="12px">
+      {props.loggedInUser && (
+        <>
+          <Flex px="24px" pb={2} justifyContent="space-between">
+            <Box>
+              <Text bold>{props.loggedInUser.name}</Text>
+              <Text typography="body2" color="text.secondary">
+                {props.loggedInUser.rolesList.join(', ')}
+              </Text>
+            </Box>
+          </Flex>
+          <Separator />
+        </>
+      )}
       <KeyboardArrowsNavigation>
         <Box px={'12px'}>
           {props.clusters.map((i, index) => (
@@ -53,7 +57,7 @@ export function IdentityList(props: IdentityListProps) {
           />
         </Box>
       </KeyboardArrowsNavigation>
-    </>
+    </Box>
   );
 }
 
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx
index eefd259e34a..1f3a7fddc42 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentityList/IdentityListItem.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ListItem } from 'teleterm/ui/components/ListItem';
 import { useKeyboardArrowsNavigation } from 'teleterm/ui/components/KeyboardArrowsNavigation';
 import { ButtonIcon, Flex, Label, Text } from 'design';
@@ -23,6 +23,8 @@ export function IdentityListItem(props: IdentityListItemProps) {
     index: props.index,
     onRun: props.onSelect,
   });
+  const ref = useRef<HTMLElement>();
+  const [newWidth, setMaxWidth] = useState<number>();
 
   const title = props.userName
     ? `${props.userName}@${props.clusterName}`
@@ -32,33 +34,44 @@ export function IdentityListItem(props: IdentityListItemProps) {
     <ListItem
       onClick={props.onSelect}
       isActive={isActive}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
+      ref={ref}
+      style={{ maxWidth: newWidth && newWidth + 'px' }}
+      onMouseEnter={() => {
+        // we set maxWidth to list item element, because otherwise it becomes wider on hover (new element is added to it)
+        setMaxWidth(ref.current.clientWidth);
+        setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setMaxWidth(undefined);
+        setIsHovered(false);
+      }}
     >
       <Flex justifyContent="space-between" alignItems="center" width="100%">
+        {props.isSyncing && <LinearProgress />}
         <Text typography="body1" title={title}>
           {title}
         </Text>
-        {props.isSelected ? (
-          <Label kind="success" ml={2}>
-            active
-          </Label>
-        ) : null}
-        {props.isSyncing && <LinearProgress />}
-        {isHovered && (
-          <ButtonIcon
-            mr="-10px"
-            ml={1}
-            color="text.placeholder"
-            title="Logout"
-            onClick={e => {
-              e.stopPropagation();
-              props.onLogout();
-            }}
-          >
-            <CircleCross fontSize={12} />
-          </ButtonIcon>
-        )}
+        <Flex alignItems="center">
+          {props.isSelected ? (
+            <Label kind="success" ml={2} style={{ height: 'fit-content' }}>
+              active
+            </Label>
+          ) : null}
+          {isHovered && (
+            <ButtonIcon
+              mr="-10px"
+              ml={1}
+              color="text.placeholder"
+              title={`Log out from ${props.clusterName}`}
+              onClick={e => {
+                e.stopPropagation();
+                props.onLogout();
+              }}
+            >
+              <CircleCross fontSize={12} />
+            </ButtonIcon>
+          )}
+        </Flex>
       </Flex>
     </ListItem>
   );
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx
index 88ab9b4e431..1cdf11335ee 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/IdentitySelector/IdentitySelector.tsx
@@ -54,7 +54,7 @@ const Container = styled.button`
   flex-direction: row;
   padding: 0 12px;
   height: 100%;
-  max-width: 260px;
+  min-width: 0;
   border-radius: 4px;
   border-width: 1px;
   border-style: solid;
diff --git a/web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts b/web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts
index 20cc3e8d5f5..cd38e9eb961 100644
--- a/web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts
+++ b/web/packages/teleterm/src/ui/TopBar/Identity/useIdentity.ts
@@ -15,7 +15,7 @@ export function useIdentity() {
     ctx.commandLauncher.executeCommand('cluster-connect', {});
   }
 
-  async function logout(clusterUri: string): Promise<void> {
+  function logout(clusterUri: string): void {
     ctx.commandLauncher.executeCommand('cluster-logout', {clusterUri})
   }
 
diff --git a/web/packages/teleterm/src/ui/TopBar/TopBar.tsx b/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
index 1f119e58608..ee861358ff0 100644
--- a/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
+++ b/web/packages/teleterm/src/ui/TopBar/TopBar.tsx
@@ -24,7 +24,7 @@ export function TopBar() {
 
 const Grid = styled.div`
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
+  grid-template-columns: 1fr auto minmax(250px, 1fr);
   width: 100%;
   padding: 8px 25px;
   height: 56px;
@@ -49,7 +49,7 @@ const JustifyLeft = styled.div`
 `;
 
 const JustifyRight = styled.div`
-  display: flex;
+  display: grid;
   justify-self: end;
   align-items: center;
   height: 100%;