diff options
6 files changed, 63 insertions, 49 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 8606eed1b..e31404559 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -240,7 +240,12 @@ export class Portal extends React.Component<PortalProps, PortalState> { blockchain={this._blockchain} translate={this.props.translate} displayType={TopBarDisplayType.Expanded} - style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }} + style={{ + backgroundColor: colors.lightestGrey, + position: 'fixed', + // Hack: used to make onboarding z-index logi work for both mobile and desktop + zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined, + }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} /> <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}> @@ -283,11 +288,6 @@ export class Portal extends React.Component<PortalProps, PortalState> { tokenVisibility={tokenVisibility} /> </Container> - <PortalOnboardingFlow - blockchain={this._blockchain} - trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} - refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} - /> </Container> ); } @@ -322,41 +322,48 @@ export class Portal extends React.Component<PortalProps, PortalState> { } private _renderWallet(): React.ReactNode { const startOnboarding = this._renderStartOnboarding(); - const isMobile = this.props.screenWidth === ScreenWidths.Sm; + const isMobile = utils.isMobile(this.props.screenWidth); // We need room to scroll down for mobile onboarding const marginBottom = isMobile ? '200px' : '15px'; return ( <div> - {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>} - <Container marginBottom={marginBottom}> - <Wallet - style={ - !isMobile && this.props.isPortalOnboardingShowing - ? { zIndex: zIndex.aboveOverlay, position: 'relative' } - : undefined - } - userAddress={this.props.userAddress} - networkId={this.props.networkId} - blockchain={this._blockchain} - blockchainIsLoaded={this.props.blockchainIsLoaded} - blockchainErr={this.props.blockchainErr} - dispatcher={this.props.dispatcher} - tokenByAddress={this.props.tokenByAddress} - trackedTokens={this._getCurrentTrackedTokens()} - userEtherBalanceInWei={this.props.userEtherBalanceInWei} - lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} - injectedProviderName={this.props.injectedProviderName} - providerType={this.props.providerType} - screenWidth={this.props.screenWidth} - location={this.props.location} - trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} - onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} - onAddToken={this._onAddToken.bind(this)} - onRemoveToken={this._onRemoveToken.bind(this)} - refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} - /> + <Container position="relative"> + {isMobile && <Container marginBottom="15px">{startOnboarding}</Container>} + <Container marginBottom={marginBottom}> + <Wallet + style={ + !isMobile && this.props.isPortalOnboardingShowing + ? { zIndex: zIndex.aboveOverlay, position: 'relative' } + : undefined + } + userAddress={this.props.userAddress} + networkId={this.props.networkId} + blockchain={this._blockchain} + blockchainIsLoaded={this.props.blockchainIsLoaded} + blockchainErr={this.props.blockchainErr} + dispatcher={this.props.dispatcher} + tokenByAddress={this.props.tokenByAddress} + trackedTokens={this._getCurrentTrackedTokens()} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + screenWidth={this.props.screenWidth} + location={this.props.location} + trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} + onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} + onAddToken={this._onAddToken.bind(this)} + onRemoveToken={this._onRemoveToken.bind(this)} + refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} + /> + </Container> + {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>} </Container> - {!isMobile && <Container marginTop="15px">{startOnboarding}</Container>} + <PortalOnboardingFlow + blockchain={this._blockchain} + trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} + refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} + /> </div> ); } diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index ba3579926..5f4c6998c 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -21,6 +21,7 @@ export interface RelayerGridTileProps { const styles: Styles = { root: { boxSizing: 'border-box', + position: 'static', }, innerDiv: { height: '100%', @@ -102,7 +103,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( ); }; -export const GridTile = styled(PlainGridTile)` +const GridTile = styled(PlainGridTile)` cursor: pointer; transition: transform 0.2s ease; &:hover { diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx index 5a6dc1ae9..4aea1bbbb 100644 --- a/packages/website/ts/components/relayer_index/relayer_index.tsx +++ b/packages/website/ts/components/relayer_index/relayer_index.tsx @@ -5,7 +5,6 @@ import * as React from 'react'; import { RelayerGridTile } from 'ts/components/relayer_index/relayer_grid_tile'; import { Retry } from 'ts/components/ui/retry'; -import { colors } from 'ts/style/colors'; import { ScreenWidths, WebsiteBackendRelayerInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx index cbda2993d..136f3d005 100644 --- a/packages/website/ts/components/ui/animation.tsx +++ b/packages/website/ts/components/ui/animation.tsx @@ -11,13 +11,15 @@ const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div { const appearFromBottomFrames = keyframes` from { - position: absolute; + position: fixed; bottom: -500px; + left: 0px; } to { - position: absolute; + position: fixed; bottom: 0px; + left: 0px; } `; diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index f88fd6c24..0f9e011b4 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -43,6 +43,7 @@ import { import { analytics } from 'ts/utils/analytics'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; +import { styled } from 'ts/style/theme'; import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles'; export interface WalletProps { @@ -138,6 +139,12 @@ const USD_DECIMAL_PLACES = 2; const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56; const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`; +const ActionButton = styled(FloatingActionButton)` + button { + position: static !important; + } +`; + export class Wallet extends React.Component<WalletProps, WalletState> { public static defaultProps = { style: {}, @@ -244,17 +251,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> { <ListItem primaryText={ <div className="flex"> - <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}> + <ActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}> <ContentAdd /> - </FloatingActionButton> - <FloatingActionButton - mini={true} - zDepth={0} - className="px1" - onClick={this.props.onRemoveToken} - > + </ActionButton> + <ActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}> <ContentRemove /> - </FloatingActionButton> + </ActionButton> <div style={{ paddingLeft: 10, diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts index 6363d1d2e..0cb965f05 100644 --- a/packages/website/ts/utils/utils.ts +++ b/packages/website/ts/utils/utils.ts @@ -365,4 +365,7 @@ export const utils = { openUrl(url: string): void { window.open(url, '_blank'); }, + isMobile(screenWidth: ScreenWidths): boolean { + return screenWidth === ScreenWidths.Sm; + }, }; |