diff options
Diffstat (limited to 'packages/website/ts/components/portal/portal.tsx')
| -rw-r--r-- | packages/website/ts/components/portal/portal.tsx | 62 |
1 files changed, 29 insertions, 33 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 438c7b52f..9c0cb866d 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,10 +1,10 @@ import { colors, constants as sharedConstants } from '@0xproject/react-shared'; import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import Help from 'material-ui/svg-icons/action/help'; import * as React from 'react'; import * as DocumentTitle from 'react-document-title'; -import { Route, RouteComponentProps, Switch } from 'react-router-dom'; +import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom'; import { Blockchain } from 'ts/blockchain'; import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog'; @@ -24,7 +24,6 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; -import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Wallet } from 'ts/components/wallet/wallet'; import { GenerateOrderForm } from 'ts/containers/generate_order_form'; @@ -319,15 +318,14 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); } private _renderWallet(): React.ReactNode { - const startOnboarding = this._renderStartOnboarding(); const isMobile = utils.isMobile(this.props.screenWidth); // We need room to scroll down for mobile onboarding const marginBottom = isMobile ? '200px' : '15px'; return ( <div> - <Container> - {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>} - <Container marginBottom={marginBottom}> + <Container className="flex flex-column items-center"> + {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>} + <Container marginBottom={marginBottom} width="100%"> <Wallet style={ !isMobile && this.props.isPortalOnboardingShowing @@ -355,7 +353,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> </Container> - {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>} + {!isMobile && <Container marginTop="8px">{this._renderStartOnboarding()}</Container>} </Container> <PortalOnboardingFlow blockchain={this._blockchain} @@ -366,26 +364,24 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); } private _renderStartOnboarding(): React.ReactNode { - return ( - <Island> - <Container - marginTop="30px" - marginBottom="30px" - marginLeft="30px" - marginRight="30px" - className="flex justify-around items-center" - > - <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} /> - <Text - fontColor={colors.grey} - fontSize="16px" - center={true} - onClick={this._startOnboarding.bind(this)} - > + const isMobile = utils.isMobile(this.props.screenWidth); + const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`; + const startOnboarding = ( + <Container className="flex items-center center"> + <Help style={{ width: '20px', height: '20px' }} color={colors.mediumBlue} /> + <Container marginLeft="8px"> + <Text fontColor={colors.mediumBlue} fontSize="16px" onClick={this._startOnboarding.bind(this)}> Learn how to set up your account </Text> </Container> - </Island> + </Container> + ); + return !shouldStartOnboarding ? ( + <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}> + {startOnboarding} + </Link> + ) : ( + startOnboarding ); } @@ -393,10 +389,6 @@ export class Portal extends React.Component<PortalProps, PortalState> { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep); this.props.dispatcher.updatePortalOnboardingShowing(true); - // On mobile, make sure the wallet is completely visible. - if (this.props.screenWidth === ScreenWidths.Sm) { - document.querySelector('.wallet').scrollIntoView(); - } } private _renderWalletSection(): React.ReactNode { return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />; @@ -535,11 +527,15 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); } private _renderRelayerIndexSection(): React.ReactNode { + return <Section header={<TextHeader labelText="0x Relayers" />} body={this._renderRelayerIndex()} />; + } + private _renderRelayerIndex(): React.ReactNode { + const isMobile = utils.isMobile(this.props.screenWidth); return ( - <Section - header={<TextHeader labelText="0x Relayers" />} - body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />} - /> + <Container className="flex flex-column items-center"> + {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>} + <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} /> + </Container> ); } private _renderNotFoundMessage(): React.ReactNode { |