aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/portal/portal.tsx79
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx3
-rw-r--r--packages/website/ts/components/relayer_index/relayer_index.tsx1
-rw-r--r--packages/website/ts/components/ui/animation.tsx6
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx20
-rw-r--r--packages/website/ts/utils/utils.ts3
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;
+ },
};