From 7418926ebb156165f328a89cf58ec758737ee999 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 6 Jul 2018 13:17:28 -0700 Subject: [PATCH 1/5] Give Wallet a min height --- packages/website/ts/components/wallet/wallet.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 1c7dafca02..dca027a8ad 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -269,7 +269,7 @@ export class Wallet extends React.Component { position: 'relative', overflowY: this.state.isHoveringSidebar ? 'scroll' : 'hidden', marginRight: this.state.isHoveringSidebar ? 0 : 4, - // TODO: make this completely responsive + minHeight: '250px', maxHeight: !utils.isMobileWidth(this.props.screenWidth) ? 'calc(90vh - 300px)' : undefined, }; } From 9669a4d1216b7d22107580daf3e2bff464eb2ade Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 6 Jul 2018 14:09:36 -0700 Subject: [PATCH 2/5] Create Balance component and make token symbols smaller than token amounts --- .../onboarding/add_eth_onboarding_step.tsx | 14 +++++----- .../onboarding/portal_onboarding_flow.tsx | 13 +-------- .../onboarding/wrap_eth_onboarding_step.tsx | 19 ++++++++----- packages/website/ts/components/ui/balance.tsx | 27 +++++++++++++++++++ .../website/ts/components/ui/container.tsx | 14 +++++++--- .../website/ts/components/wallet/wallet.tsx | 8 ++---- packages/website/ts/utils/utils.ts | 6 ++--- 7 files changed, 63 insertions(+), 38 deletions(-) create mode 100644 packages/website/ts/components/ui/balance.tsx diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx index bccdc0c181..ca71fcd505 100644 --- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -1,10 +1,10 @@ import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; +import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Text } from 'ts/components/ui/text'; import { constants } from 'ts/utils/constants'; -import { utils } from 'ts/utils/utils'; export interface AddEthOnboardingStepProps { userEthBalanceInWei: BigNumber; @@ -15,13 +15,11 @@ export const AddEthOnboardingStep: React.StatelessComponent Great! Looks like you already have{' '} - - {utils.getFormattedAmount( - props.userEthBalanceInWei, - constants.DECIMAL_PLACES_ETH, - constants.ETHER_SYMBOL, - )}{' '} - + {' '} in your wallet. diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 503f2163d7..a79cf1ee19 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -140,13 +140,7 @@ class PlainPortalOnboardingFlow extends React.Component - ), + content: , continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', }, { @@ -187,11 +181,6 @@ class PlainPortalOnboardingFlow extends React.Component new BigNumber(0); } diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index 4d336c80f7..e4332de756 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -1,8 +1,11 @@ import { colors } from '@0xproject/react-shared'; +import { BigNumber } from '@0xproject/utils'; import * as React from 'react'; +import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Text } from 'ts/components/ui/text'; +import { constants } from 'ts/utils/constants'; export interface WrapEthOnboardingStep1Props {} @@ -51,16 +54,20 @@ export const WrapEthOnboardingStep2: React.StatelessComponent = ({ - formattedWethBalanceIfExists, -}) => ( +export const WrapEthOnboardingStep3: React.StatelessComponent = ({ wethAmount }) => (
- You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet. - {formattedWethBalanceIfExists && ' Great!'} + You have{' '} + {' '} + in your wallet. + {wethAmount.gt(0) && ' Great!'}
diff --git a/packages/website/ts/components/ui/balance.tsx b/packages/website/ts/components/ui/balance.tsx new file mode 100644 index 0000000000..9e5a256b65 --- /dev/null +++ b/packages/website/ts/components/ui/balance.tsx @@ -0,0 +1,27 @@ +import { BigNumber } from '@0xproject/utils'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; +import { utils } from 'ts/utils/utils'; + +export interface BalanceProps { + amount: BigNumber; + decimals: number; + symbol: string; +} + +export const Balance: React.StatelessComponent = ({ amount, decimals, symbol }) => { + const formattedAmout = utils.getFormattedAmount(amount, decimals); + return ( + + + {formattedAmout} + + + + {symbol} + + + + ); +}; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index edbf8814b7..427cc6cc79 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -2,6 +2,8 @@ import * as React from 'react'; type StringOrNum = string | number; +export type ContainerTag = 'div' | 'span'; + export interface ContainerProps { marginTop?: StringOrNum; marginBottom?: StringOrNum; @@ -28,15 +30,21 @@ export interface ContainerProps { right?: string; bottom?: string; zIndex?: number; + Tag?: ContainerTag; } -export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { +export const Container: React.StatelessComponent = props => { + const { children, className, Tag, isHidden, ...style } = props; const visibility = isHidden ? 'hidden' : undefined; return ( -
+ {children} -
+ ); }; +Container.defaultProps = { + Tag: 'div', +}; + Container.displayName = 'Container'; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index dca027a8ad..6c1c495d7f 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -8,6 +8,7 @@ import firstBy = require('thenby'); import { Blockchain } from 'ts/blockchain'; import { AccountConnection } from 'ts/components/ui/account_connection'; +import { Balance } from 'ts/components/ui/balance'; import { Container } from 'ts/components/ui/container'; import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down'; import { IconButton } from 'ts/components/ui/icon_button'; @@ -436,12 +437,7 @@ export class Wallet extends React.Component { ); } else { - const result = utils.getFormattedAmount(amount, decimals, symbol); - return ( - - {result} - - ); + return ; } } private _renderValue( diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 623819fc9c..6ab642f53d 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -381,9 +381,9 @@ export const utils = { return trackedTokens; }, getFormattedAmountFromToken(token: Token, tokenState: TokenState): string { - return utils.getFormattedAmount(tokenState.balance, token.decimals, token.symbol); + return utils.getFormattedAmount(tokenState.balance, token.decimals); }, - getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string { + getFormattedAmount(amount: BigNumber, decimals: number): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); // if the unit amount is less than 1, show the natural number of decimal places with a max of 4 // if the unit amount is greater than or equal to 1, show only 2 decimal places @@ -392,7 +392,7 @@ export const utils = { : 2; const format = `0,0.${_.repeat('0', precision)}`; const formattedAmount = numeral(unitAmount).format(format); - return `${formattedAmount} ${symbol}`; + return formattedAmount; }, getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string { const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals); From b9e51d2fad271cab4803ca4d6acf28b9ec9da4c9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 6 Jul 2018 14:23:00 -0700 Subject: [PATCH 3/5] Add updated asset for unlock metamask portal onboarding step --- packages/website/public/images/unlock-mm.png | Bin 0 -> 21137 bytes .../components/onboarding/onboarding_flow.tsx | 17 ++++++++++------- .../onboarding/onboarding_tooltip.tsx | 13 +++++++++---- .../onboarding/portal_onboarding_flow.tsx | 8 ++++---- .../unlock_wallet_onboarding_step.tsx | 8 ++------ 5 files changed, 25 insertions(+), 21 deletions(-) create mode 100644 packages/website/public/images/unlock-mm.png diff --git a/packages/website/public/images/unlock-mm.png b/packages/website/public/images/unlock-mm.png new file mode 100644 index 0000000000000000000000000000000000000000..531c95dd2d303d4beccdfa5174bce1e48d8665df GIT binary patch literal 21137 zcmaHSWmMf<(>CtzaL__=cR9FI+}*Xv!QHhKFYX0e+}+*XorAl(!`J(H|9>kh$xc=> znLTsm%AP%wNM%K7R3suK2nYyNSs4jc2na~ge{DMixPRNbZxHtXc8HELIxY|p$k_j_ zkPsPJ1piJ#x~NKvK~zo>AOAamu@Y7IcUw&y@|y`P1cWNJtc0k#C**ktVl&l<6DgjK z#>RWBmy3yI+{$aWDSDvx8I(4&2qHNoLVQ2+Zv{ULx?gxUzDee3cZXBC!qdMbe{w#h z*D9>#)28RrVqi%Ud_fE(w^`qTHThTIG`t_ah56nuLGPi(#g zt=$%Nbq>PC%X@Hfbol8se4L&`R>Umsm ze)fc4(|IHIejzsOhUyI4I*aJMtSWzBrtwc>0X< z`*IBcf=|-$i42#^N9%9zR>67!A^|twK1Y2I1AKxF#j06@|CzN3BI{$Itm;7dUflP2 z@$ci?YDl&LtNX3k$6H^=M8Nx`Rw7$hLX4E~qv{BWRQ*41Y+0ZJKJQ)vh&_H)-R$dO zR<7Rf8hB%p`<%ICXw^RqEt3mFwH|$iK&EUCgl(6H^y)fWABmgojPeg>B#}3Ko;=k2 zyqyBi`EA4jrCFd{n>YQ0KcpW6(ddj@(*~7V-}a*5q8vRTkv$2a04a|*L$6ODCcm39 zhIwIZ8Wu5xbr{M?0ChwqX`1*Fifr8S8xbhWH`EYDo1o`E<>2ffOy0oK_yl`JWbgM+ zS6rXLhQ`{VegFD8hA{b|wB%=f`uGurJ`0QRF8r~A9_;TOWMTq?Umci=_ye-$VCZH@ z$YVOke@}AdZJEyakT>Auf@}Iy3?SyRWZuYPBxgrLINm5w;r&^F$(cB6b^tEa@ z)mq^O6oJ^mie7JR80LQ>M20`#jHVx|x?-HsNQ@=}iMO{lJ2G!r&L^*X467pIn!+vq z=XrhW>g!Mf*uBZKv2}#io^XPfx6>}VT_GccIe1b$DMv`;=5BHqLlx(-HoDHYm^){< zX!Knw?(mhOPt0>z#{V->5Md6b&nL}(tIOf*u^wbA=$(+ggR54_H~pvu-nz-;+Vc3H z&!K`n_sQM-cQ}$rKCvWO5;wMVjJ;o1Fg`rY(e$Mbere5FbLMY^hSB^3q(1ppT>lnA zWatkcgm;%y*UdvANfz9zyZ{`@wob~<|1&C-o9uf>po>+`-_7T(&4Rf1xXYrdfEP1Y z!}uc3b?~1J7=m7d0qOr(i5X$pe!nW@K2d2F%xG%2>CMKT2W&#QuSddFT!ExH0(G)RZ&5;i zuNu2vBib@_uU_7iMW2s7NiTG9L7yED=fWa&5W5us7ZQoo4pE`H2w{cHrjL$mpDbpG zs%@_+=>H=h2?$b36q5yViA-Wcq0jiNWDYx+Rifxdsp>AL@Xn9)xT*3-D|8Fj+pn1C zm&u-HmqgApT1w`wkBP*jhjN>^RsPT<%||!so`-C~1j0`uhdKGKr<^O3oj0U$_?`z` z!BH^@|M2$}>gwtwS~SaE&Gi|8#A4mFE$shhq{4qTRSrKYbhDo%hGYU0k^cAdwG-3t zSwfdUq#MxrDs9cut^XjkEnVyPz1)}7jHtKwzjxGdXS(BVVZP&|uO2@zCXVIZ-)DV| zGXIb#(y*p)LggJ9234qV_R~kC*cgOjlSD8$wuE zy~fx8z@hHaCxFMjSnWAsbjg5pjw!X@jMS8yXjU-y9p?P&*<#DcQOjXYK}-z(;h{_d zqmau1N(V9IGs#=WG6bpc(^kkYN2BgAM4$V~Zbp(>vd>d@VfobRw!4t3^Vt~_PIQwC6cYZtli2Oznqy)FASiqN~ z0v}6HR&Zk!eDqdS!!VPvhjCR7PGn-`8JM(XCt2;(t>x9Dvs4^DMa~R}u;`Js9s9gU zqD6K0!jPmn_B^o=^3QrEO?VMUCuLQInGUV8{?U73nkgah=(A-;@89{2JWB{gFJUVy zDrOA3f&bVBU+7Q3lhN#zM}RuGqG_%AbJ)UlW?@3AdTjB$t@3iZ=6yH4ZW}?MX8%!f zNRIcd)eN!Yq?oApVwCk6cNkl+JyEHnA_o(P`v; z{8#lM2IMO)bY1ZEie35eCqpHMx$<}-jnXJr`|qXp1Fl(8L(FK#t(_peoKz$fw`$=h;dDd@a-{$9oOl0wB?yJQF=xaEFeee?${6`?!qp0wSddw{po^lxP z@ih8-;^yzF_cMFWJya}DkM!FswEHjo&GW?0nla?PrdhjEw*XK_A~R0$21z)(n5YSc zv3`5c4Fn~GMMz%APzb+?-rKgp2iW!+jD2F{|GeLj$8aK6GgHMw#ENr8-r-cSV}pEz zZicW1#RCB*?0ogPnl|q5#r`;2iUUBzjW5CHOvi^PMt7Wqg#iV8pBynKcU(3*{Unc2 z_!CYM`V8*ivlLn=uEu>r!I{2vcB712y@79$EORmNO-F07l6R|PUs}(d-`j3jXX?w> zSV_<$#X+q6u5<>p)6E@F16_wXKK%??c$z%|HmeZbpm6VjM+l2bHRX9&;N7&i**+_R zP!ig;X9y>AMe$03;V=Bv z0>ZfZ=vjaPljAF!gxjEA1Tm-IBBU7kJq6uGkKHE_gT3#;b5zdU@yhaV&kqXse#Kg; zbGLFNJJ&g@<=J(uubmYC_VS%CA8?g$NG57Eg1!Qh)O(E_eV@i;FVntKCV3;)K9JrUo@ zp`>a@7(!IS*eQi^7p0%HU}@P<(4AdLmGSGhbEZly`HE1&laoiiPvTyT;}1CO8|2w1`(* z^)8TQm9A?QBYEB3lcu?3%0IKAG$l1wuSoK;dx(~}Z%yY`8qs|`4Eb%-Ng?-4?Qz<$ zuU%0Nn`+qv=Baw=@{ghO$k!VZKKjrBWk%51??7w#xIvnyOo(tC03?_rC?lqJvj;r&JaGBF#RfFLBFm(jQ^i=gHjV8DL_;Evv~S-*8LmR4uOt>pu`9y+ zoquNOpbpx*jbMGb5zw5PG3tOY-mb; zBN^jmcRAX$tH4psb9gCeumwr14JX$|*{oWG2T{juY!Q-)q63ZJ_*#I$dp6M(Y6FxkYQU4Ti;^~^>!OPE#U)$;PrSz@x+&BQ$FW89sbDzYt0nE2~cLqci+v4 zbU}l)@Z%=U4dY2=CL7q^A^<>T8)U#I7P($rzbbSJX5(5dsev(OY8MJc(=2q5m^irb!lB1ut88bvWX54ELg#i}6YURK(Usb(1V6N#{^QHr+34ku zU$6d6A!PbLnFDsyfIiUMD1mN+^O}N{-QB~F3j+T04pXeb*~~{KAlIZiQIyhF5{oq* zinj5#eg?P-}tn0_mF8skRhdh3x0t1pU&H}zTM$VCh&pWU+iQ(l!^tMxYPqpeAt3CU{_WBjG z?UZ1S1pY=Se+!E+nGCZJ(^u)rg1Z$E_hMu#gX>n|W%a`rSADXirFF_MGs)KAnE7*D zep)eg`v!PDpYydk`kV&*D5Q5U*T;4u-L~yo+1@uhi2W}j44A#VSW6A_gaXHU&2`3g zH^;h#19+*L0C4&AC~ipn6@HmF{9o-u$|l?Z%g4*^t5b@`8Kz1FKBT_4Tj@j7>emzB z+pvWue%)u^El3pk9+DWnc0;2Rd;N{9i&x!u{s9vlC93IZv{6Hh=qE_{4)94>Qkg zFP_R)fL&3lyFGZGBzqw}TZ|1&xMsCJn|_b!|3dx_&nc~5y+@nBY!gr5!5{Ls@s<_S zbtg?h)KX8UtuN{w!j1K3@;dI{9Zy%!)wd%H0adzh4rdZ-No|FKDn4;`hT!r1j>yGU zZ&i=j=WHn#%5zd-5S8v^fD*tq8=5T-TPMZ74!>D{ZfahCx!&g+PZz`5)7>Z5z$;5l zhgQc1^Tt~&kl*v`K!=82gw3ZF$}D=X~*BhQXzu%x`e%OvYsrLpfqb6 z`*H`*vp+qwG4}0tb(rg>1q5#1^V?ma9#Z@pq+nGJjo4Few^Gh0+ac&N!!4ILL1fQ) z%RHuO@IU4}Xk2q(0C!^@z*y0JDB@;+zfx7;Q>hbC858<(0y{E088cnahBbkA#Jy|3 z<9FYBVQA2%^9I_nO`fC%+I#XvfxV*T^!(M==4Zq>bFT~N>eZbVw~Kf32>sT=eRi~K zApv_sUCnkpIe+$29*?R%;9A6u@TDs0K-wFeY#n~wyuGURw-%^*<@bEt^G3QWR@Yi; zC9OUJqP7;Po@bq1sUHJF`Fo>02P-EvOw5`0yz`6zHaIt_X>2t~?T$h^i#i0V@7&dO ztE+Ubp`MYJa|#?M=MspSC+e>mZlDbIr5@ldE6Zk?J>74c#b6m!i(5wL+t{e$cd?De z_7cSnU;|tCocW)c^Q*|V$-=JN0$W}V0;9(VlX~B7(68w0;#y?ez5w^Ew57zi z2x)n+`n<5GxN${xjXt*3IX`=MLpDIbz;%@%vbE8ENGJy19tBImW^=w0k!Qx$aDo#1 zkdo(XY(W*672j_yMezAPc{}$_Y~5#x1(&ah`YQadH}LPy@rq6+EpA*zBl>raAAIQY z=)#{}V<{~y7gZH?kn4r+vC_6OX}?hpe`Vajla_jgHg2u82o3uo^>mgqk=EPj1>gzR zjnW#Q)YnY$g;!t9%ewesO%&;4^NO!}@JG}claj(zo8{fJ?@i8WSmfh^x!WDtwaNfN z`k6M5$8W#EE?z_MaYbG4O_fTQ?;Xu9V?MJ_qXI6gkn{U5?#|1eO)r%pXHWQFqOq5* zo4P&;ml;ag0>>}K&@7K#79eQ!Su;%2qarH>ddRiVXqFR)KEU)~2Y!hxh(N2NmvEYoc6xfKwJ?tznn%Y)TFn zr(&a)ru2xfqw%`;Yu%fX50zDjaZ^p`ml6EamX(>VmX_HeT9yX~k6HNbQX7rg42IsoZG_Ix2cS3&81nHf%>~6W+ zmAL0OY;lH5i?kmLubviL$cjfPMPT*Z|Dq4pvw`o^R}yWs3l5vp@Gt|F|)r_)T}schMy+T zZXNX^^kAa}-S?%xreP=hAE_WJSn(YCX=duWA{BngkKxIi(rhfqGnuHt~qLgJ!c^ zYsX8xlaSIvc3E-N8vi%aG0pws>}s7;Me_F=f_==+6uXo}+fn)%?s%E2eGJ&ai}P@I zMsqDZoGCDyw)0K{G4EUGZH&O5wcS$WXO9JbO&ehD01ByUiiMJswST&=fiPw|bn0PV z(2Yjlhx|UFDK^kWUx6cS1Z6aoqKqJ8hvUw;BAeHPfZ1~~Tws`BsE487y3po@YICiS zL?jWYe!Ju*RZXvdh})r+Y%l__>x zuXDggqn#n~+)3!>ZQ`TUTGzWr%I+9AegO1IMmqUxp{N8dcp}cr&0+SR_6OtgO4Fd& zEGv>+UT%|j$3tg0@ah96{Q2CAUFlMOSMamFO-96l*Ga_rcTLv}{FAH3Jg*%0g+{l{ z%+;;Buysx`WYUF6`)Vhvlb0;XHI$dXQ+yU%o{x8Pwi`WzH6JveAI^_H{uTnQM=2d| z9ZiCe+=16ykDon1&p~Mu6%&aCE(JpcN99*}L<;jG@WYEWLfxe9Nfu`(TCmXtX5 zR=O5ilkT+{_*J3Zp%;6W9XYy_V+ux~K|pawEhNIk(oUk;R@9u~@+p&hksf@~ocYxJ zUKnuGpyhjf=*)lpJO=-dco{Yx{m+QcyT&z#H1=x;S6zBn zmo=Q~*{2IXcohKRx;!ls6Su7Pitcq_&JZ5k%AyV1onzp;iujrhFbi((iEIb8OQ}yd zM!N0^H&|iU4?Ugnv~DRJpMd)L<@(1Yaoo5DsC42plMX=W19?R0bA}wLvkLOUhQB0| z=i3WNL*3eSTPVpszFblsfyos4h835Unsu|3(xp@hzA+!u;@U zT{`VBc`Xq3E!ps-KUu%)2)W1%_`XKmY$_eMa*lMjG_l1Y+{NB{nJ8H2ZUcVZR?3no z*l&B9bQcLgu*c&zs^X7ZaAr!|%`(n5PRlrqwxUxv5X_i4L`JpOI@H;(yZSdyv`%hz&prfzzX0lKTEL^v+f zPEX`3;;bSL`5EoU*W(yFFa|+1WfuQp^68nuSJWy!rAbl|y)dxtTbl+rJUn|V4gS$^ zeA|K6A9BXyW8L6^>(X!9e>)Y_F!Z_0P{7dX$BCNCqc1S+hP0;PK5Ae8`BNTcEAKRi z{qkw+a6ADpwUTjII|bctc&L74&Fh=q(W2PZPO^viC(#jLyT{SkYT=4TOI3lnNyYS z=!P%!ot>kb-^iZSSps&VWPLXTBCa(&Vvm3nK4-$Nwb(`{X_Pz`*;*ZCSG+4**+jrM zEA;fSOHb-zA(KB)8B^bsG7c`mK9_(0%S8Hh8g3(A%%8M1a%?KHv-ooiA>&zY3z5CJ zn{Z_vtIo=A76m|D+b zDlC5g_G(<8zZslw_voIo)dp$hkbr}XBP6D>*10hdW|d8aT-~uYD4ugE;f0+K z^sbe=TIX)q^~H4zF6&T**To6pCyCtKR(iZ-LKEKEi)hBCvPiAnUw0=yAL$}HzIJ*hvcTvO*i1UEYefx!MIPm%PlG23gUY}(xKs5^nlMh#?&E3?T z)oGafPfYKcgKE?>IQx?X@KZ1(VQCK#;x#lb=6I>t6Y$-O zwUk!pwwC4s64}maK9seiI9CN%9b4dWDGz_krb%0LTU1}fn>}Uo|qw z)gZP9+c|gk3VjWQPqP78B3^m{aecAHc&hU5p1#9WV2Ef{Y1VvyDJ_UB7VRlLFMIp` zE27ow9}-Biw>$VLmG|AUQKm+(H4YnAI~Cee+#+?ox80f#3E>sCRZuyZD=Q5sS^BaJ zS*IFq#FE)sNp2!H>98mXl7$1+ZDGEn^fE#c3#f0H1BqZ9#4t8QPNFfMZ+`Y>(1$=3 zK6y9vVzLf%jLp-D8AV>;D`=5U!QI!R%UHXPY~ZQT{lKQF>jC0tuF7?%7ALPP4>O{ ze3kpziPaZMfB}_Sr!RZWp@hJWve{5cyo6~~^pun%8%vYV*c4k*N$?3tQ@P(sA@1); z3cqRos(*K>68`=y^rlckHjCL3`$T;SyB1P5cCb_MdYr7K&nWy;jV;!`kNuOG!{=rX zPVlN*&C;(!$tI)C$s!5C@DUHLeUI3Wb;*&b{_yW*HV2JUTxN7b0>6VVDg0GokCpnk zguIEs)}AQt(kx9Uw&7O|Ff#m)4>cMDS&C>U(cHzzquQ~DxfmY9@2RN*g`(tTz|5^| ze7U{2POmqdY+koj2M2V-A~^|_4WJ$kPgquS3+mx==#6p$w6kZs-OurxZaOQAd|&yT z@>D&g;!|Nni;VS1y$EbKQ>_b|Yfqrx-pMW%oVQ>#D4AK%dm8L`|J7~V8utXx0_hY4 zLLbLg%F3TBn!;t*#z5l7D&%ai%-1((qrc;%@zAHOkHdW@YP-A)%f0D&-}kJG_WzDQ zj_Vk-cZM$OH600V^4_GFy&P1W9%y>J+_Z`#6%@fI;Zq(~-P(%2j?g{OC>#2Vm6F1# z$&6`~*?dGEp}>|>@>Q4~L8DO6l7POXcRw9pjI?GZnc`tISw%(Z)e(xAGNOQ2!n6m8 z=O=AsIRQ+UX|=LS+QrC~5+5wTsa9^*6V%Ykgu?3bGAB)rcMAAsP|t4ZeOkdWr7YIO zjDhM!>K>ldbM;?lNH*KLP~d0G9sUsJBYI-gv*moc#>chrA`&K=m`1@#34Bsk2~;Kr z39=^x6hzII_ukc@vL$mAiPCfMH0sMDK3N|9=C`nO)3e_Qds%>bXhk+GaQIIg0tVhF z4yR_kw$SH<8grfRia@VbA-@~O4X>dF*RAf_!-$fbpF}9X$I%auxnIR!ZaU(YV^IBo zoX$+-&x0up!Q%}*`32IgtW5*N@P?^G59{QxX#=KPPXaE`#L;2t#k7n+zj!E>sKT;a zOpcCJM6ywQ%-yRUK_Q^RG5Uu2i@1o2_mk`eSy?w+##AWq-(FE?dmiY#9;_K!v|bpv zPr zN+ytBr*e$~EfhZ8{H(^7j}W1d;R8%afW%d$=kHg|<*i&P)`n#?42IHKXdU!nGvy;J zqo)R9+1@SXg{i47iBQ{D|6((*Z5DHPK1OzPYs|98Zi&+G>da}J=`8mYUaVkc6|}=V zJ0R!s*nDjEduP&GY8iDyIwxeZPy#xIlX@Q|)qL;okLngaW>kA9F2pQPp*NPga4bZD zZr$gfzO9)x(e%a+UMuz7?kjXq396Zx53M!9DydPa;f?n`k4AsAyCUVyLAb7$Igm#e z9D9q`=Y7_KmgNT&2TLjsnr>)6eOSlO1w8fk9sJ9Z^gMWX&|hY>pM24`^gauT%V9kQ z=&2KH4FIF8(gDY0bNlUZL)i2NTwJ_gtiIrXhvA@+W*u$)&;fYUgEi*ePi)HCe=<-# z{q5@iflT=k`B$tnbTeK@6r1idYuu-mJgnF7F_>1`bLLU_iPoQdeK2wt8YPOyIKlfy8*CiEON-zF%cbc+YLY=jF#Uztg80ft z*$A4hpi{0=O6K&5eGu8^TY2MStn`jo&Tg*nRQ6lGVhV%ccUiYiO0utkc!jd4?u^8@ zej%2Z8d%btNJSH$x=@5uibwgfWgI0C9WD4o*S}-+3%M~Z+z6y5i`qYZ*~+zBW)@j zc@r7A^Dhh7u$0r2=IRv3QK+)C=IlW}-uQ;t1uy!|7aLAIr|@_=!YG-w31X4rZiZ?4@fGg*ka(2e8gomPe>Ir>c>7pC4NqWl}Ja+iScTezW|?reWG58r5iLfM~^7K#!!ja7!U+%_j|W zUp>A>rJH=!(k1FASXunDkyc-M+=^ zEmiF91ZoosIKRr^l79LYz#x6UV?W)OP{qSa7$O3;hE04{hppBxGjUdq-&3#$>BQA{ z=}W7QM?K1G!11)BG#biuyC|ME2XYVfkGLV~N(Fa&O(;qaw|S*wQ6y-bIF|`^WFZb{ z<587!fHCOBjB8B3u$HUQA|Eg^+;_vYXpOv@*LoAAY5~ZKlx93z-;k)^ezOz-hH45%7MZ2C4!Xs|!bg3PXT(OI9!olfs)9q5ORG`#dDkNCO<3wk6UWXjvab71iiGUGUsBC%6gGd^{8mqBCnou^!J*K3l`Txjs&?}rrz=LG z2ULNNEU?U8d^X~Dp1L6=`z|9&JdT~fOrp<2R$`Xf@+O`%z+S{o>RwyUl~@B9 z1H1qO5D=AK5fZ$&FILqVoekS#s6AfH)*bXKw~^h)Mmd|=DO8*I+)ws)d?%VD!sjOi zd>zweU95()CCoT&H!sp%cEyW;v))cK6>iV9#uDH+go+E@5FO0Y6FfgI*^_i+*znnJ zN5=CESC(Qx=tvrwc09sF2J!r9*wekQN=xGV)_=g|2)6o9is@8~m_>4`BsmTg>pSbM z)zcM;Ew>Wuy~cjJa)ZQe{&Gq}kN2Ww(^WQbvI7$AkbAGu97?&=2e3s6VG*TJ+VI%> zzrHc!>J`WzNJ;GR@KR+a7Y!UkH=X}(3BVtU1L+_1wyke3;K(vRi`q?6kkA3E4Z{t5 za%Uf0Fo(;K|8NcH$;6E2C;VvrBN=Qpp_v?K9NC`PYgNnKK(XX+CE)4L6Kj?+AUr=u z!=sb$DPm(rOA1&D*r1PIlh|B+$uZg{GRp5tTPpN^phomJj#eR!-$4jE z!lnL=3yu#dny_E}Wn}Zt|7S^MJ0@+%Q__Swa?pE{hL#=ssW9`3og_hNvFvPBW6iRK z`G`Mc|K~R9W<7_b;r3TT6B-+LaP1j>`fs}|(!+&cw=(-2DHRvwq$>FmkQ-bmAl;oC zlI3`s;?vxFlPNg8zjo{WHMu_;l!e`%wPh(SiOzcx8&6VfcccJ|_uta#V5)y_?=RaJj&ng$O zKD?-*a?s9igMIih#DA6sT{X$$wZWpehiec00@cPKoxRh}3;U~1M^3)ihmm)%+)IwI zuG1~zAP})r5y%!?hoKES>X`I1yTx0UrI#cVHv%m|DkdRpj)*7-t`P#S(*>-gKfmCy z0@!`cGY(@i6Lo$a+?QK#6b8T&m&qHa@byG)9F_GFAV3eiq&0>s3ne+8*E!QDPstq+ zIfS~`Qe)ARYxFE)^umxrC)54-G64ad)vR>rW>p#Ec3x7s=_?J=9*N23#0e^25KVa% zoFHf`yMR$xR2Fb`k#h{6^fLX5ipZ@Q{4&6&Evt1!t*qg0)0(A7`Vm7iDVwpbg4N>C zC+-&#YwXr-?^0U;y zag|@rtY2KVw9MZ=DnKe$p!G_Bo09r)ne#0PD7+rq~-QxO#NjMj^E zRkCySy!1F?8iTz``>AVAvh*MhDHiL(7db z>JeQn%d>zk4OD3L(o^LrQcLq6?)K6P7GKBmH!H4n;Qpg39#Ji?tOH~HVgU* zWx(_iDnIo75ErU7ax#=3gMoPhrqJu1WO%KieYM0RW;)61a|E5^qI)Z6hNaq8FcnMz zJ{+_zl{~%Ul?(lh$=fD@dVM?c=!bZ|h#TA!5hoNHf0^h#hn}#v$VRWJLR)I-_VKV* z5FaDT^wS&m;<{Svf9KBY|5}$T+9hn+(2{l?)&fkE<$apwh&#HZ(S80-`+zSm^S#}C zk3#7;K45ppoSu{j^;G=p?A zBs2d-4#_m!vNGB&X5Y6g#e#W!|Ndyx)M4;4*O%*#lU1#>;X5?r-(JxRK`g z{Q`Z4cq%Wq@TWu%8wgF+fhn+?{AyhYKmjl8ZjjvsD|^~0USA*SPP&=meb~vUG?mG1 z!+xy@NB`?Y7cI*#M4^**=f?13E4Fq2&-2YX9^x^axVE09{Z2FrzwA#Eo9tr~#=kmIcuo zsfdEYE#)URrCEFF4bu~|VchKI})}yd_{JBoT7^@)%w%7EhiW2|O{*j}r zQ-$Mm1;Exey0tdWqtm}kZftMr=c;OoZxKhjZVjGZh2T9{^h20B1-1t*Dj&RsC$ijb zS6^Uc4z8QamBO==F>_WfKDP8y_`GfO$_{@e!H{MPV^Ix6`91mc4RsvGVM}g(CkOr& zx^t7gBe|u+Lpy1lY9Wj}u-#OIVUuf@WB2*fhFzzrBz3sN8fmVggh-6HbwfLcLb8EC zx{yOqlx!dpSeSGyMRi~h+&}C$)ghg5oQ&QeNeGR_UqjLt=@ZP5+{s4#Yj^Ep^%0)P zf^|bX&eDRumNa+D$TifT7<$X(WDas*6tlIzl9(46`q=$|6K1eeJOX+gr_C;s=nwFU z2pF=_QjUUtbpvPjrQZhxS1-^S(*6xTYXFZ7umgQ3?0Uj!WF75!P2{Lw}xT1b((u+S`IVg`88ex>oI4ljik zQMpwrTua1~mRuprd2V{`YsRJ!7`*L;{z}~KpEl2^q|I$cz=QSr@r9S4!$P21_>2c7~Is)r? zc#&fFOs?gmc6N>lrE3%(pp*l#>xrC!brTgvoP|Vi8EyOPKR~! z0|hm)CId*(UHYWVOzk{o+0_x1U3TQsKOjtzg^bI$62Vn_s(ZSxJNgAzOCjF`SW!pK zdiGybh}J7nY}#rt#Q)8Tda}=*LrKdPutn+@F`xg=vHo7KXlFK}SmaDH%ka$6#9Je6 znic%hV<$OzT_uiH;@WNNU4(&>Et>GzD}o(mh1VKK`NFQd?S`GQeaqXXP?vi5;I+hQ z*WH<_xg7;gs(pNkPI!#sFSGtY9|A8?T1I@OtAw+|OvENV#g(dCZ@*~lx0iaB1JUmi zhAKkbu{cgP^h)21O|IzDe=_1B*BFb?_gpLEVYQc0Ok}|yhf~0b4<4Y1Qo~`-kLXiM{i{H(nE$=c+ivGqpEz<7uY5qW0Z{xPmhlIJc8ce4 z@QHG8pL}Qk0#fyAuQ0f-FgI0ao28Df+~Pmv`p3$1YEazxwn|V(L)E3VCkB5!#Bs^I z^je$Vq+|-XhnO>1EAY4%%DedQ!-;-@nw3q`ky48KhP%e}m|08CrWlLat4@GH{Y5cr zw!ny)<0`(|c4&X)hrP~F4aXvWNi$?EyNI!=6CkKAmyUV&p>-M-1`#R@7Y1q&3D~In zw6MJCl9wAKk5>Kbb;Eyh3gcy0=|W;Ez@lV6F;B;X)=--9nV9M~M@b?rb2_5ucV{u# zQMJbvr##}prARL6IDWx-**pvqG%~donnaQ@74sJKb?rO_8cfV;qJ%oC){wudMz0cr zk2y$Z+^b2z7^y)EpuxHosSSAg7CjixJCNNf`LZ|!pPA~)4O>P0@hY4iwxAY>u#(S8 zshM0kDt2h)|Ay*w$|DwCO!#m8d`il(oY?0dLt&;urkh_L@*T8j*sm< z>7Y^*WSTjvTw87d?U2fgzMwmS!DpNHloYLUJ~qFlTskE&#C}-%&2cC@H=jv@$Coj2 zwCBoD|DnKZk^QU1?zORIhZ-FwpVnns1E0%w%k7@rQFVD~9#e;ct&bCX_#6hVYe<)D zIrw*~XcKvv-i|AGJDL|Dd}vXT+5{W>E9I0dZC$${DmX}wWM4ir>w+iaQ!JYoQFBeb zz9wX^Vyz;{ersN^AwjPHZ?nqKJ;mt2FH{eb8OmOHuQ6ChN{Mg9X$D@q5j`iRa55*u zv1a*7-2BAWxqa~x7KRG!NWXysAhS;W9_7tjb>Ey-@@zTFIx|q;NFevSd&|o#q zTdYc#09)9`)iPzi$m;!o|25nh>FG_f>zvu*@Wn0uX#gosAIUJ9GB5n1F6q()2Nd~w z@r>-TAl6~BbfKB6 z8BDJgVA5tKJm#xc`>b#n=CeQc&06Od^vF@PQV*z=8{5e7ciNiStWSki{1?~Ed>Oqrl+VZgc<6bT-LKZ;U&5j;3uJtj*$Lmh-1mDc*&cw*5c|4J#r;~=Av6Rb$wi2BEgzpAwc z6;syR24t6BMQ;y$&N+rHxc&b+lD)K`+|FHsSN9g54 zBjHmu{hC#cD&XvZOXpcM1@N$omiCfj2PNHqgS?u;vRX?=P)&_7>6(%YUT-fRmYM6p zM8*Kf8&Us+75{$$=Mfn0BzV=k)7b?3I-2hr5&62pcX{`ok+4?EI~}13`0-K=O`dlU zRB#@Tg&&_59-)?_4rt?>PMNH{jYEG=CoTHXzJ0$VH%9j6mW=RYX=!PUf8i=z1x@@% zRL5?wq}6%!^oAhi!l3cCA{th|Cp;E}u_!O`*>T*Y=@MVo<+4#Q4yorJKlU<5L4A}P zZ`}~yGoOSG2^>lz7SdXd3*K$icsij1K5vZ;CHbnkE{Kb&E9O(jZd|lc@(i+|bE~6s zscyzs&a3X+#nP3Y)&@M#938Y9TLlx&$BjA+R0=@OU;R;h5S z0T_)i5y~XvnC%?~uLKcRJL$M954;cg`%oC4+pz7>;nnsf-eLq?M-t>jG^!aPXdKa` z@@b#gUG3s9o6sVZB0qz0!eq4qh!q0o*^I1i@t8*#%kzsVR(2hWqy+rNkMyel=NL(* zZ)q~(Ju|M91;Xe+7)O^4;dZudmg8mSwHuja1F7D-J7Hw1~5 za_m(`Ay2CzvCn4}4^#%z-F0$CPVTZ|&M?0fxnM)k>2_(`&3P=ZTT>4Yq~tLExynFZ z*))s_Im8%;h5U5fP>b*>?#MM>s1oze3mb2Pwx$>5xSo*5yp&a>5B+_QuUa4FoXec0 zz+(XZVd249)m+|wWeVeza*CqkpW#J%!L{kgf~PWtPc`mcCv%_^bqy?q&^eObGM~pA z={=@&L`lJ4X=xqrV_(;Z9O*d(J&Bg4>>>0z#hJS#SI-n}a1ZTM(NVk(ODP^nwlgif zV|56We)e4Cv_c}OPvN}Y$l)L=>Z`Em&Je^y7_?m)HdXo|-(x&h z1z64|k~)VT&_QdQ!>9eO5*qx0`D3_S*6@xd)}szyhuy?hioJ& z4R}1SGc07&o#`z4EP1K&qBI7gAduO-dBbogpQIp47{^ESChB?xa%BHHJsSD?&a{d`a#NY>%R4 zaV?pUT;IXS_ak;?ayjHI?l$uzx4gL#C3(+Ay+OIU4~*h3Xe=4jg`hG$92VI$8X8}T z2gu(eGfHE>D`argBVRF%YMP!r!y^_r{o> zAh$OH9h47;MZ(?VVEb9L>AF6`_MT7rl4K3glA>>gr6qj#Ln`SR$J3#@-w=u-rx?Sq zl)caGZBfk18>W@cZg=7uZ$vhdKjYNpsAv3qB=RVS@ke1?+kxNhER@%S95ISwyo}gpR_f{eusmQz&iex!%1THdlpTEc zawYTK*E!}j(w^)4dpy?(48xFfMqW<*{OkC+Z_Z_lukL>^+{ucQSxbc+;XYXDU)O~1 zBI_eZf43NSA-f4qk2)F8EfxBJGEXzgN29D!{^|hrWZ@plLxs}yfW=wOGUKJm#R#M8 zbgk_UjTumBv)%e3C7l05#?$CmrO$g-`g7_%@@o#tGxaFhfGA&w%$u-hVTl_*+QEnw zYZmBCwB3lE6VP1hi_Vd+>y4uD7S0jNEjy()G?t!!Zj;VT;is3$YMG2FEKIWPK`L%T zpJ#MQy|&`JgPbib*E4;03zKho^-Z_|P9~uZ-2o@^f9H+xAc%0rzUsA6x);neVz?dw#a_vZFW7DC+fA0Nctp(7( z_6Ui3zj5b{Lip(6XoQ2W15pm+k1W+Doh_xNsr|H0e1)~w~ zf3s(ecD}u5PqqKBPL-z2Jw{fxx8#2z)3{lW3tMHf+#LC*lQ)Nwtb>Y$ZRan7_&qC3M*M}oDc#_OnBFuj` z@7f{DsSxhu2ZlJsPkn5ckqz!=vS^fTy-X!uU?7h??~pfj;4ff};jvT&YcKhF8eJ+05KtjOY0XDG;}UZmaR9HkATK|xbtE%>4z$W5oa zWc!Rq+sQ5=+t|Kq&l_!yPM$i}lYxHksafbO^_)}`s6__n;b91V!5)r>IBW!a$Uyeh z6k`h`;YwS5L(9w5WdR+=7$~RD`Tl-drtK}3p5=1H-IVM1{Hb(a@lBsM!b=hkfBCZSQ@Bn%`OhdNS*M8+b_q(6Vc~Drkv*o^P z6S|d}ZxB7l&Ro)|GOxn};ex$d<@p^BRLL?|e;f1%!|NhM^RFO5JI*#i zUXV0Yxm9Xb6AhE0WYVpZvn~{Z<}Clyf3m2Ud*Gw@X(%r{&}W*BnD*LO<$gG%aaqfsJDddeIWxSi+BN9a_wL+ z`SakxW%h3S2J*)$j-T=5itJtHSSh*OBVj`k%V~g~-6oy?rGb(A@_jiP|IUlefN5HW z!DU=gr1T6J&oa{v8pXrrzGWP61wm=YMMaE!eJOb^#}rNZ?6&jf;|xq zN8RPoV6a`DapF~C?Z7fU&t)TbmTQ&Ns~RyWy#vcO;d}5DR{6$eG>|&I-ZB%tZ5W>g zzEx&MkFU`#0{MI~NVZLv>u<6g;r^yo#L?l%vduKUuN1gI9OFrIJQuv|o}uM_$@SG| z`ZgWW=k!D9aYceB<$9}%Cmx((26iV-i#wQLCIk=+?{*{hiZ2ULNJjibCBJDi8rRrIs%Xju-lW|m zH#Z0Ji4;aq#JIG7(BrSQ-8Sb(BUYe;g>jq3Ka|N440Jl|O3pTQxK`!% zcEJnGk(V){31u8cc3m0%>m4Sgf2ov@&F6J|kSlWaMymtC1)og#a9HIMeT|l=c)m;I z!$y{!Hr^WmAGXa|XFf&<&$*vf>u5@~k3wdB`*Yl$<3vBjBQ_|jI=Dg(N6?RqiclM# zh|f(o@XpV*Tadc$EzOY_t>xuq%eh%zpqA}&j88T`;w1)eq~6lcjCm7t9kfHecsX)U zAw^OK@So~FM&nClcUjsU-lv0lZYwe?D@0pcs5#`%i11z8mu(}5tDr^N^hLWf{sT=Y zm$vL>!$$`$%;n+3Fw8ukgOZ*tU)S-&8NzTSX)=VhMzZ=Uu7tL><=q`eS61wXaBjI{hS*n1p(bmR8`)sxlkxP{_$ zb+fj%R^=5n@KN|3v*A2&cvGnBxcNC9%o$E(EcH}I4meo}-(-a{?~RRmD|8xjzom0= zz{_Cf_<*>{$rxmyx5P5ArMw-n935b7+&GK(FSN?F3((%vuWOp)!ocKZEQpY*28ndEA?aXIQ5mW z$W3o;#l}w!493dJs@>Y!42+|kR5T|~4(Q^G*X%RTY)XB+wADW|9|Fn|`vC{{C1ppB ztXaK>zq9-oo3Q=HM%muuURlw5EH{oGlCk*up5`M*R)r>PhWoMlIx8#s>)W`7PNF<` zkwn!P*2&~p8E6Uav6GZhdT8I8UEkP{3JG6tp402W#ulye_e8|@5Ouj6?C|vu1$A+H zi*cFNeRw_LA*$lQwJ*c>0dQq{-_qpo&LjADcL(<<_THi<}aKn>G znXWF=btp-S2dV2Gr-7Gq=FFL~`}`fhmR2xpxSHC8cbSu9jXj$U_8?;MPH3>@62j$k zov61do|lfjy9wTH5WaUeIY-5xo0~cYNqFm&>v0;!cL?oR(>#v#bvNFiUHBdCP;Zm# zdEBds_PxyX;*h?q`iC$NO!FCdCR@}!$h3~MK95Vs!)2?Zvd>i>*GAko!{Jhq7X*Jo zo_W3rO@|JVFYli^MeA;k6On_{EJul1UOQ`3dx#)2UPdsJ$?{qtCn=Z3W8X1`)2Gn~ z0k6oQ@X*O-0cH!hxQEkDo?;UDGSbJGJeG2#uL{}RaJZPRP#@6$=DAYNx?aX<9K1|> zIv|Uve<(@(1N?=|o#w%Wk92w7c^vR1lmbGT^n4D>`@wz( a;Qt5Zwn0eYl&j7F0000 { ); } else if (currentStep.position.type === 'fixed') { - const { top, right, bottom, left, pointerDirection } = currentStep.position; + const { top, right, bottom, left, tooltipPointerDisplay } = currentStep.position; onboardingElement = ( { bottom={bottom} left={left} > - {this._renderToolTip(pointerDirection)} + {this._renderToolTip(tooltipPointerDisplay)} ); } @@ -103,7 +106,7 @@ export class OnboardingFlow extends React.Component {
); } - private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode { + private _renderToolTip(tooltipPointerDisplay?: TooltipPointerDisplay): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; @@ -121,7 +124,7 @@ export class OnboardingFlow extends React.Component { continueButtonDisplay={step.continueButtonDisplay} continueButtonText={step.continueButtonText} onContinueButtonClick={step.onContinueButtonClick} - pointerDirection={pointerDirection} + pointerDisplay={tooltipPointerDisplay} /> ); diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index d8065625d5..15d47908dc 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -4,22 +4,27 @@ import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/on import { Pointer, PointerDirection } from 'ts/components/ui/pointer'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; +export type TooltipPointerDisplay = PointerDirection | 'none'; export interface OnboardingTooltipProps extends OnboardingCardProps { className?: string; - pointerDirection?: PointerDirection; + pointerDisplay?: TooltipPointerDisplay; } export const OnboardingTooltip: React.StatelessComponent = props => { - const { pointerDirection, className, ...cardProps } = props; + const { pointerDisplay, className, ...cardProps } = props; + const card = ; + if (pointerDisplay === 'none') { + return card; + } return ( - + ); }; OnboardingTooltip.defaultProps = { - pointerDirection: 'left', + pointerDisplay: 'left', }; OnboardingTooltip.displayName = 'OnboardingTooltip'; diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index a79cf1ee19..3dec8a4447 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -91,9 +91,9 @@ class PlainPortalOnboardingFlow extends React.Component, shouldHideBackButton: true, shouldHideNextButton: true, diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx index 4ed7137d4a..a1de469ad8 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -1,16 +1,12 @@ import * as React from 'react'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; +import { Image } from 'ts/components/ui/image'; export interface UnlockWalletOnboardingStepProps {} export const UnlockWalletOnboardingStep: React.StatelessComponent = () => (
- - - - Unlock your MetaMask extension to get started. +
); From 824c331ea0c0f57a717a242aab82dadfe9737004 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 6 Jul 2018 15:11:01 -0700 Subject: [PATCH 4/5] Make unlock metamask step look more like mock --- .../components/onboarding/onboarding_card.tsx | 114 +++++++++++------- .../components/onboarding/onboarding_flow.tsx | 7 ++ .../onboarding/portal_onboarding_flow.tsx | 6 +- .../unlock_wallet_onboarding_step.tsx | 6 +- 4 files changed, 81 insertions(+), 52 deletions(-) diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index ba5b3d6eaa..4e853719e9 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as _ from 'lodash'; import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; +import { Container, ContainerProps } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Text, Title } from 'ts/components/ui/text'; @@ -12,6 +12,7 @@ export type ContinueButtonDisplay = 'enabled' | 'disabled'; export interface OnboardingCardProps { title?: string; + shouldCenterTitle?: boolean; content: React.ReactNode; isLastStep: boolean; onClose: () => void; @@ -23,10 +24,13 @@ export interface OnboardingCardProps { shouldHideNextButton?: boolean; continueButtonText?: string; borderRadius?: string; + // Used for super-custom content. + shouldRemoveExtraSpacing?: boolean; } export const OnboardingCard: React.StatelessComponent = ({ title, + shouldCenterTitle, content, continueButtonDisplay, continueButtonText, @@ -37,55 +41,75 @@ export const OnboardingCard: React.StatelessComponent = ({ shouldHideBackButton, shouldHideNextButton, borderRadius, -}) => ( - - -
-
- {title} - - - Close - + shouldRemoveExtraSpacing, +}) => { + const padding = shouldRemoveExtraSpacing + ? {} + : { + paddingRight: '30px', + paddingLeft: '30px', + paddingTop: '15px', + paddingBottom: '15px', + }; + const closeIconPositioning = shouldRemoveExtraSpacing + ? { right: '15px', bottom: '3px' } + : { bottom: '20px', left: '15px' }; + return ( + + +
+ + + {title} + + + + Close + + + + {content} + + {continueButtonDisplay && ( + + )} + {!(shouldHideBackButton && shouldHideNextButton) && ( + +
+ {!shouldHideBackButton && ( + + Back + + )} +
+
+ {!shouldHideNextButton && ( + + Skip + + )} +
+ + )}
- - {content} - - {continueButtonDisplay && ( - - )} - -
- {!shouldHideBackButton && ( - - Back - - )} -
-
- {!shouldHideNextButton && ( - - Skip - - )} -
- -
- - -); + + + ); +}; OnboardingCard.defaultProps = { continueButtonText: 'Continue', + shouldCenterTitle: false, + shouldRemoveExtraSpacing: false, }; OnboardingCard.displayName = 'OnboardingCard'; diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 8aebdf1d39..91d5f2476b 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -31,12 +31,15 @@ export interface Step { // Provide either a CSS selector, or fixed position settings. Only applies to desktop. position: TargetPositionSettings | FixedPositionSettings; title?: string; + shouldCenterTitle?: boolean; content: React.ReactNode; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; continueButtonText?: string; onContinueButtonClick?: () => void; + // Only used for very custom steps. + shouldRemoveExtraSpacing?: boolean; } export interface OnboardingFlowProps { @@ -114,6 +117,7 @@ export class OnboardingFlow extends React.Component { { continueButtonText={step.continueButtonText} onContinueButtonClick={step.onContinueButtonClick} pointerDisplay={tooltipPointerDisplay} + shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing} /> ); @@ -138,6 +143,7 @@ export class OnboardingFlow extends React.Component { { continueButtonText={step.continueButtonText} onContinueButtonClick={step.onContinueButtonClick} borderRadius="10px 10px 0px 0px" + shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing} /> ); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3dec8a4447..20a8f0a326 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -91,8 +91,8 @@ class PlainPortalOnboardingFlow extends React.Component, shouldHideBackButton: true, shouldHideNextButton: true, + shouldCenterTitle: true, + shouldRemoveExtraSpacing: true, }, { position: nextToWalletPosition, diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx index a1de469ad8..3581415200 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -4,9 +4,5 @@ import { Image } from 'ts/components/ui/image'; export interface UnlockWalletOnboardingStepProps {} export const UnlockWalletOnboardingStep: React.StatelessComponent = () => ( -
-
- -
-
+ ); From 60ebfcf36df3d2e4f15142823fb5821d8d65937e Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 6 Jul 2018 15:21:50 -0700 Subject: [PATCH 5/5] Fix lint errors --- packages/website/ts/components/onboarding/onboarding_card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index 4e853719e9..e1b0f304b1 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -3,7 +3,7 @@ import * as React from 'react'; import * as _ from 'lodash'; import { Button } from 'ts/components/ui/button'; -import { Container, ContainerProps } from 'ts/components/ui/container'; +import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Text, Title } from 'ts/components/ui/text';