From 549c6afa0af15cb19249ce8cdbad92b09ae231f6 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 19 Jun 2018 13:55:29 -0700 Subject: Move some layout logic out of the Identicon component --- packages/website/ts/components/generate_order/asset_picker.tsx | 4 ++-- packages/website/ts/components/ui/identicon.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 3 +++ 3 files changed, 6 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index d7cc554c4..b43ac1f2e 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -151,12 +151,12 @@ export class AssetPicker extends React.Component -
+
{token.name}
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index 30df995c8..cc1655962 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -23,7 +23,7 @@ export class Identicon extends React.Component { const radius = diameter / 2; return (
{ } private _renderTokenRow(token: Token, _index: number): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; + if (_.isUndefined(tokenState)) { + return null; + } const tokenLink = sharedUtils.getEtherScanLinkIfExists( token.address, this.props.networkId, -- cgit v1.2.3 From 5817a30031b3cfac5c17dcc8e11d901e8d6ded45 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Tue, 19 Jun 2018 16:25:43 -0700 Subject: Update Island shadow styling and use Island in more places --- packages/website/ts/components/portal/back_button.tsx | 7 +++---- packages/website/ts/components/top_bar/provider_display.tsx | 7 +++---- packages/website/ts/components/ui/island.tsx | 2 +- packages/website/ts/style/colors.ts | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx index 2d0bbefc3..ca35abc2b 100644 --- a/packages/website/ts/components/portal/back_button.tsx +++ b/packages/website/ts/components/portal/back_button.tsx @@ -2,6 +2,7 @@ import { Styles } from '@0xproject/react-shared'; import * as React from 'react'; import { Link } from 'react-router-dom'; +import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; export interface BackButtonProps { @@ -15,9 +16,7 @@ const styles: Styles = { backButton: { height: BACK_BUTTON_HEIGHT, paddingTop: 10, - backgroundColor: colors.white, borderRadius: BACK_BUTTON_HEIGHT, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, }, backButtonIcon: { color: colors.mediumBlue, @@ -29,14 +28,14 @@ export const BackButton = (props: BackButtonProps) => { return (
-
+
{props.labelText}
-
+
); diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 1e8855c14..496e5cae0 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -10,6 +10,7 @@ import { Container } from 'ts/components/ui/container'; import { DropDown } from 'ts/components/ui/drop_down'; import { Identicon } from 'ts/components/ui/identicon'; import { Image } from 'ts/components/ui/image'; +import { Island } from 'ts/components/ui/island'; import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; @@ -35,9 +36,7 @@ interface ProviderDisplayState {} const styles: Styles = { root: { height: ROOT_HEIGHT, - backgroundColor: colors.white, borderRadius: ROOT_HEIGHT, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, }, }; @@ -62,7 +61,7 @@ export class ProviderDisplay extends React.Component +
{this._isBlockchainReady() ? ( @@ -78,7 +77,7 @@ export class ProviderDisplay extends React.Component )} -
+ ); const hasLedgerProvider = this.props.providerType === ProviderType.Ledger; const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle'; diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index de90b664f..fbb9989a4 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -14,7 +14,7 @@ const defaultStyle: React.CSSProperties = { borderBottomLeftRadius: 10, borderTopRightRadius: 10, borderTopLeftRadius: 10, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + boxShadow: `0px 3px 4px ${colors.walletBoxShadow}`, overflow: 'hidden', }; diff --git a/packages/website/ts/style/colors.ts b/packages/website/ts/style/colors.ts index b15000d7a..45be4fe7f 100644 --- a/packages/website/ts/style/colors.ts +++ b/packages/website/ts/style/colors.ts @@ -1,7 +1,7 @@ import { colors as sharedColors } from '@0xproject/react-shared'; const appColors = { - walletBoxShadow: 'rgba(56, 59, 137, 0.2)', + walletBoxShadow: 'rgba(0, 0, 0, 0.05)', walletBorder: '#ededee', walletDefaultItemBackground: '#fbfbfc', walletFocusedItemBackground: '#f0f1f4', -- cgit v1.2.3 From 51948d7760a81cb10bbcfdc50c19eb1c7cddf37b Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 19 Jun 2018 16:39:52 -0700 Subject: Show start onboarding flow button on top of wallet on mobile --- packages/website/ts/components/portal/portal.tsx | 54 +++++++++++++----------- 1 file changed, 29 insertions(+), 25 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 67314678b..3d7bbfd0a 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -340,10 +340,14 @@ export class Portal extends React.Component { ); } private _renderWallet(): React.ReactNode { + const startOnboarding = this._renderStartOnboarding(); + const isMobile = this.props.screenWidth === ScreenWidths.Sm; return (
+ {isMobile && {startOnboarding}} { onRemoveToken={this._onRemoveToken.bind(this)} refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> - - - - - - Learn how to set up your account - - - - + {!isMobile && {startOnboarding}}
); } + private _renderStartOnboarding(): React.ReactNode { + return ( + + + + + Learn how to set up your account + + + + ); + } private _startOnboarding(): void { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; -- cgit v1.2.3 From e5fe6b915e760b38a22a8d314fb62364470160eb Mon Sep 17 00:00:00 2001 From: fragosti Date: Tue, 19 Jun 2018 17:32:01 -0700 Subject: Change Island to use styled-components --- packages/website/ts/components/ui/island.tsx | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index de90b664f..b88d5fc1b 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -1,28 +1,21 @@ import * as React from 'react'; import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; export interface IslandProps { style?: React.CSSProperties; - children?: React.ReactNode; className?: string; Component?: string | React.ComponentClass | React.StatelessComponent; } -const defaultStyle: React.CSSProperties = { - backgroundColor: colors.white, - borderBottomRightRadius: 10, - borderBottomLeftRadius: 10, - borderTopRightRadius: 10, - borderTopLeftRadius: 10, - boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, - overflow: 'hidden', -}; +const PlainIsland: React.StatelessComponent = ({ Component, ...rest }) => ; -export const Island: React.StatelessComponent = (props: IslandProps) => ( - - {props.children} - -); +export const Island = styled(PlainIsland)` + background-color: ${colors.white}; + border-radius: 10px; + box-shadow: 0px 4px 6px ${colors.walletBoxShadow}; + overflow: hidden; +`; Island.defaultProps = { Component: 'div', -- cgit v1.2.3 From 39ccb2df0b43d3915337259789c393e4603b964c Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 20 Jun 2018 11:25:59 -0700 Subject: Scroll to wallet for mobile onboarding --- packages/website/ts/components/portal/portal.tsx | 51 +++++++++++++----------- 1 file changed, 28 insertions(+), 23 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 3d7bbfd0a..b1860954c 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -345,29 +345,30 @@ export class Portal extends React.Component { return (
{isMobile && {startOnboarding}} - + + + {!isMobile && {startOnboarding}}
); @@ -400,6 +401,10 @@ export class Portal extends React.Component { 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
} body={this._renderWallet()} />; -- cgit v1.2.3 From 1e51af1d4b68bad9363411167fd4eb959e7a32dd Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 20 Jun 2018 15:51:17 -0700 Subject: Support mobile friendly onboarding flows --- .../ts/components/onboarding/onboarding_card.tsx | 82 ++++++++++++++++++++++ .../ts/components/onboarding/onboarding_flow.tsx | 49 ++++++++++--- .../components/onboarding/onboarding_tooltip.tsx | 73 ++----------------- .../onboarding/portal_onboarding_flow.tsx | 5 +- packages/website/ts/components/portal/portal.tsx | 20 ++++-- packages/website/ts/components/ui/animation.tsx | 32 +++++++++ packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/components/wallet/wallet.tsx | 1 - .../ts/containers/portal_onboarding_flow.ts | 4 +- 9 files changed, 180 insertions(+), 87 deletions(-) create mode 100644 packages/website/ts/components/onboarding/onboarding_card.tsx create mode 100644 packages/website/ts/components/ui/animation.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx new file mode 100644 index 000000000..795a017e9 --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -0,0 +1,82 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; + +import { Button } from 'ts/components/ui/button'; +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'; + +export type ContinueButtonDisplay = 'enabled' | 'disabled'; + +export interface OnboardingCardProps { + title?: string; + content: React.ReactNode; + isLastStep: boolean; + onClose: () => void; + onClickNext: () => void; + onClickBack: () => void; + continueButtonDisplay?: ContinueButtonDisplay; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + continueButtonText?: string; +} + +export const OnboardingCard: React.StatelessComponent = ({ + title, + content, + continueButtonDisplay, + continueButtonText, + onClickNext, + onClickBack, + onClose, + shouldHideBackButton, + shouldHideNextButton, +}) => ( + + +
+
+ {title} + + + Close + + +
+ + {content} + + {continueButtonDisplay && ( + + )} + + {!shouldHideBackButton && ( + + Back + + )} + {!shouldHideNextButton && ( + + Skip + + )} + +
+ + +); + +OnboardingCard.defaultProps = { + continueButtonText: 'Continue', +}; + +OnboardingCard.displayName = 'OnboardingCard'; diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 34aeace82..7360d26ae 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -1,7 +1,9 @@ import * as React from 'react'; import { Placement, Popper, PopperChildrenProps } from 'react-popper'; +import { OnboardingCard } from 'ts/components/onboarding/onboarding_card'; import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip'; +import { Animation } from 'ts/components/ui/animation'; import { Container } from 'ts/components/ui/container'; import { Overlay } from 'ts/components/ui/overlay'; @@ -22,26 +24,37 @@ export interface OnboardingFlowProps { isRunning: boolean; onClose: () => void; updateOnboardingStep: (stepIndex: number) => void; + disableOverlay?: boolean; + isMobile: boolean; } export class OnboardingFlow extends React.Component { + public static defaultProps = { + disableOverlay: false, + isMobile: false, + }; public render(): React.ReactNode { if (!this.props.isRunning) { return null; } - return ( - + let onboardingEl = null; + if (this.props.isMobile) { + onboardingEl = {this._renderOnboardignCard()}; + } else { + onboardingEl = ( {this._renderPopperChildren.bind(this)} - - ); + ); + } + if (this.props.disableOverlay) { + return onboardingEl; + } + return {onboardingEl}; } - private _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); } - private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode { return (
@@ -49,7 +62,6 @@ export class OnboardingFlow extends React.Component {
); } - private _renderToolTip(): React.ReactNode { const { steps, stepIndex } = this.props; const step = steps[stepIndex]; @@ -72,10 +84,30 @@ export class OnboardingFlow extends React.Component { ); } + private _renderOnboardignCard(): React.ReactNode { + const { steps, stepIndex } = this.props; + const step = steps[stepIndex]; + const isLastStep = steps.length - 1 === stepIndex; + return ( + + + + ); + } private _getCurrentStep(): Step { return this.props.steps[this.props.stepIndex]; } - private _goToNextStep(): void { const nextStep = this.props.stepIndex + 1; if (nextStep < this.props.steps.length) { @@ -84,7 +116,6 @@ export class OnboardingFlow extends React.Component { this.props.onClose(); } } - private _goToPrevStep(): void { const nextStep = this.props.stepIndex - 1; if (nextStep >= 0) { diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 45851b4de..74fc6f715 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -1,90 +1,27 @@ -import { colors } from '@0xproject/react-shared'; import * as React from 'react'; -import { Button } from 'ts/components/ui/button'; -import { Container } from 'ts/components/ui/container'; -import { IconButton } from 'ts/components/ui/icon_button'; -import { Island } from 'ts/components/ui/island'; +import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card'; import { Pointer, PointerDirection } from 'ts/components/ui/pointer'; -import { Text, Title } from 'ts/components/ui/text'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; -export interface OnboardingTooltipProps { - title?: string; - content: React.ReactNode; - isLastStep: boolean; - onClose: () => void; - onClickNext: () => void; - onClickBack: () => void; - continueButtonDisplay?: ContinueButtonDisplay; - shouldHideBackButton?: boolean; - shouldHideNextButton?: boolean; - pointerDirection?: PointerDirection; - continueButtonText?: string; +export interface OnboardingTooltipProps extends OnboardingCardProps { className?: string; + pointerDirection?: PointerDirection; } export const OnboardingTooltip: React.StatelessComponent = ({ - title, - content, - continueButtonDisplay, - continueButtonText, - onClickNext, - onClickBack, - onClose, - shouldHideBackButton, - shouldHideNextButton, pointerDirection, className, + ...cardProps, }) => ( - - -
-
- {title} - - - Close - - -
- - {content} - - {continueButtonDisplay && ( - - )} - - {!shouldHideBackButton && ( - - Back - - )} - {!shouldHideNextButton && ( - - Skip - - )} - -
- - + ); OnboardingTooltip.defaultProps = { pointerDirection: 'left', - continueButtonText: 'Continue', }; 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 7e40192f6..10d4af30e 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -14,7 +14,7 @@ import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowa import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; -import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; +import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; import { utils } from 'ts/utils/utils'; @@ -34,6 +34,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps { updateIsRunning: (isRunning: boolean) => void; updateOnboardingStep: (stepIndex: number) => void; refetchTokenStateAsync: (tokenAddress: string) => Promise; + screenWidth: ScreenWidths; } class PlainPortalOnboardingFlow extends React.Component { @@ -57,6 +58,8 @@ class PlainPortalOnboardingFlow extends React.Component ); } diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index b1860954c..11b3b43f4 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -246,11 +246,6 @@ export class Portal extends React.Component { : TokenVisibility.TRACKED; return (
- { tokenVisibility={tokenVisibility} />
+
); } @@ -342,12 +342,18 @@ export class Portal extends React.Component { private _renderWallet(): React.ReactNode { const startOnboarding = this._renderStartOnboarding(); const isMobile = this.props.screenWidth === ScreenWidths.Sm; + // We need room to scroll down for mobile onboarding + const marginBottom = isMobile ? '200px' : '15px'; return (
{isMobile && {startOnboarding}} - + = props =>
; + +const appearFromBottomFrames = keyframes` + from { + position: absolute; + bottom: -500px; + } + + to { + position: absolute; + bottom: 0px; + } +`; + +const animations: { [K in AnimationType]: string } = { + easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`, +}; + +export const Animation = styled(PlainAnimation)` + animation: ${props => animations[props.type]}; +`; + +Animation.displayName = 'Animation'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 1776345da..90aec0e7c 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -23,6 +23,7 @@ export interface ContainerProps { left?: string; right?: string; bottom?: string; + zIndex?: number; } export const Container: React.StatelessComponent = ({ children, className, isHidden, ...style }) => { diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index ac2fe0d31..a1789c103 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -86,7 +86,6 @@ interface AccessoryItemConfig { const styles: Styles = { root: { width: '100%', - position: 'relative', }, footerItemInnerDiv: { paddingLeft: 24, diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index ba2b8f512..12daad021 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import { connect } from 'react-redux'; import { Dispatch } from 'redux'; import { Blockchain } from 'ts/blockchain'; -import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types'; +import { ActionTypes, ProviderType, ScreenWidths, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow'; import { State } from 'ts/redux/reducer'; @@ -25,6 +25,7 @@ interface ConnectedState { blockchainIsLoaded: boolean; userEtherBalanceInWei?: BigNumber; tokenByAddress: TokenByAddress; + screenWidth: ScreenWidths; } interface ConnectedDispatch { @@ -43,6 +44,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co userEtherBalanceInWei: state.userEtherBalanceInWei, tokenByAddress: state.tokenByAddress, hasBeenSeen: state.hasPortalOnboardingBeenSeen, + screenWidth: state.screenWidth, }); const mapDispatchToProps = (dispatch: Dispatch): ConnectedDispatch => ({ -- cgit v1.2.3 From c34897036e8cf896e6d0b3c7733ed9c739921f74 Mon Sep 17 00:00:00 2001 From: fragosti Date: Wed, 20 Jun 2018 16:05:19 -0700 Subject: Prevent prettier issue --- .../ts/components/onboarding/onboarding_tooltip.tsx | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 74fc6f715..d8065625d 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -10,16 +10,14 @@ export interface OnboardingTooltipProps extends OnboardingCardProps { pointerDirection?: PointerDirection; } -export const OnboardingTooltip: React.StatelessComponent = ({ - pointerDirection, - className, - ...cardProps, -}) => ( - - - -); - +export const OnboardingTooltip: React.StatelessComponent = props => { + const { pointerDirection, className, ...cardProps } = props; + return ( + + + + ); +}; OnboardingTooltip.defaultProps = { pointerDirection: 'left', }; -- cgit v1.2.3 From f1f1064f706dfb4d0550253121780ec9d2f1c037 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 10:57:26 -0700 Subject: Add Chris and Mel to about page --- packages/website/ts/pages/about/about.tsx | 21 ++++++++++++++++++++- packages/website/ts/pages/about/profile.tsx | 2 +- 2 files changed, 21 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 3136dbca3..6830b64ab 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -150,12 +150,30 @@ const teamRow5: ProfileInfo[] = [ }, { name: 'Francesco Agosti', - title: 'Senior Frontend Engineer', + title: 'Engineer', description: `Full-stack engineer. Previously senior software engineer at Yelp. Computer Science at Duke.`, image: 'images/team/fragosti.png', linkedIn: 'https://www.linkedin.com/in/fragosti/', github: 'http://github.com/fragosti', }, + { + name: 'Chris Kalani', + title: 'Director of Design', + description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, + image: 'images/team/chris.png', + linkedIn: 'https://www.linkedin.com/in/chriskalani/', + github: 'https://github.com/chriskalani', + }, +]; + +const teamRow6: ProfileInfo[] = [ + { + name: 'Mel Oberto', + title: 'Office Operations / Executive Assistant', + description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`, + image: 'images/team/mel.png', + linkedIn: 'https://www.linkedin.com/in/melanieoberto', + }, ]; const advisors: ProfileInfo[] = [ @@ -252,6 +270,7 @@ export class About extends React.Component {
{this._renderProfiles(teamRow3)}
{this._renderProfiles(teamRow4)}
{this._renderProfiles(teamRow5)}
+
{this._renderProfiles(teamRow6)}
{
{props.profileInfo.description}
-
+
{renderSocialMediaIcons(props.profileInfo)}
-- cgit v1.2.3 From d963941be03596d9030dca8788ad26c09b98822d Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 11:33:47 -0700 Subject: Remove border radius, fix width issue for unlock step --- packages/website/ts/components/onboarding/onboarding_card.tsx | 4 +++- packages/website/ts/components/onboarding/onboarding_flow.tsx | 3 ++- .../ts/components/onboarding/unlock_wallet_onboarding_step.tsx | 2 +- packages/website/ts/components/ui/island.tsx | 8 ++++++-- 4 files changed, 12 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx index 795a017e9..bc83b8034 100644 --- a/packages/website/ts/components/onboarding/onboarding_card.tsx +++ b/packages/website/ts/components/onboarding/onboarding_card.tsx @@ -20,6 +20,7 @@ export interface OnboardingCardProps { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonText?: string; + borderRadius?: string; } export const OnboardingCard: React.StatelessComponent = ({ @@ -32,8 +33,9 @@ export const OnboardingCard: React.StatelessComponent = ({ onClose, shouldHideBackButton, shouldHideNextButton, + borderRadius, }) => ( - +
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 7360d26ae..cfce70b84 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -67,7 +67,7 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + { onClickBack={this._goToPrevStep.bind(this)} continueButtonDisplay={step.continueButtonDisplay} continueButtonText={step.continueButtonText} + borderRadius="10px 10px 0px 0px" /> ); 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 6e6a74a06..0039aa545 100644 --- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent - Unlock your metamask extension to begin. + Unlock your metamask extension to get started.
); diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index b88d5fc1b..f157e3052 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -6,19 +6,23 @@ export interface IslandProps { style?: React.CSSProperties; className?: string; Component?: string | React.ComponentClass | React.StatelessComponent; + borderRadius?: string; } -const PlainIsland: React.StatelessComponent = ({ Component, ...rest }) => ; +const PlainIsland: React.StatelessComponent = ({ Component, borderRadius, ...rest }) => ( + +); export const Island = styled(PlainIsland)` background-color: ${colors.white}; - border-radius: 10px; + border-radius: ${props => props.borderRadius}; box-shadow: 0px 4px 6px ${colors.walletBoxShadow}; overflow: hidden; `; Island.defaultProps = { Component: 'div', + borderRadius: '10px', style: {}, }; -- cgit v1.2.3 From eb494f78fa04bb4e6eece27a810e17e665d3a31e Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 12:09:38 -0700 Subject: Buttons look hella disabled now --- .../website/ts/components/onboarding/onboarding_flow.tsx | 10 +++++----- packages/website/ts/components/ui/button.tsx | 16 ++++++++++++---- 2 files changed, 17 insertions(+), 9 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index cfce70b84..331899469 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -37,20 +37,20 @@ export class OnboardingFlow extends React.Component { if (!this.props.isRunning) { return null; } - let onboardingEl = null; + let onboardingElement = null; if (this.props.isMobile) { - onboardingEl = {this._renderOnboardignCard()}; + onboardingElement = {this._renderOnboardignCard()}; } else { - onboardingEl = ( + onboardingElement = ( {this._renderPopperChildren.bind(this)} ); } if (this.props.disableOverlay) { - return onboardingEl; + return onboardingElement; } - return {onboardingEl}; + return {onboardingElement}; } private _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx index cb542a386..02fa47480 100644 --- a/packages/website/ts/components/ui/button.tsx +++ b/packages/website/ts/components/ui/button.tsx @@ -1,5 +1,5 @@ import { colors } from '@0xproject/react-shared'; -import { darken, grayscale } from 'polished'; +import { darken, saturate } from 'polished'; import * as React from 'react'; import { styled } from 'ts/style/theme'; @@ -17,7 +17,7 @@ export interface ButtonProps { } const PlainButton: React.StatelessComponent = ({ children, isDisabled, onClick, type, className }) => ( - ); @@ -26,14 +26,15 @@ export const Button = styled(PlainButton)` cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; - transition: background-color 0.5s ease; + transition: background-color, opacity 0.5s ease; padding: 0.8em 2.2em; border-radius: 6px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); font-weight: 500; + outline: none; font-family: ${props => props.fontFamily}; width: ${props => props.width}; - background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)}; + background-color: ${props => props.backgroundColor}; border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')}; &:hover { background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')}; @@ -41,6 +42,13 @@ export const Button = styled(PlainButton)` &:active { background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')}; } + &:disabled { + opacity: 0.5; + box-shadow: none; + } + &:focus { + background-color: ${props => saturate(0.2, props.backgroundColor)}; + } `; Button.defaultProps = { -- cgit v1.2.3 From 5edfec68cf19f50977cfb8390528b5601a920936 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 12:12:44 -0700 Subject: Fix linting --- packages/website/ts/components/ui/island.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index f157e3052..4bb4741b3 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -9,8 +9,8 @@ export interface IslandProps { borderRadius?: string; } -const PlainIsland: React.StatelessComponent = ({ Component, borderRadius, ...rest }) => ( - +const PlainIsland: React.StatelessComponent = ({ Component, style, className }) => ( + ); export const Island = styled(PlainIsland)` -- cgit v1.2.3 From 535bb364b6fd7075f111212b5844de9a432d7a52 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 13:17:51 -0700 Subject: Add missing image assets for Chris and Mel --- packages/website/public/images/team/chris.png | Bin 0 -> 96388 bytes packages/website/public/images/team/mel.png | Bin 0 -> 110351 bytes 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 packages/website/public/images/team/chris.png create mode 100644 packages/website/public/images/team/mel.png (limited to 'packages/website') diff --git a/packages/website/public/images/team/chris.png b/packages/website/public/images/team/chris.png new file mode 100644 index 000000000..242a2813f Binary files /dev/null and b/packages/website/public/images/team/chris.png differ diff --git a/packages/website/public/images/team/mel.png b/packages/website/public/images/team/mel.png new file mode 100644 index 000000000..52d779ad2 Binary files /dev/null and b/packages/website/public/images/team/mel.png differ -- cgit v1.2.3 From 685756f9d584a93297a2d0b2593ff36945bf121b Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 13:26:33 -0700 Subject: Fix Island component --- packages/website/ts/components/ui/island.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx index 4bb4741b3..c8abfb7e0 100644 --- a/packages/website/ts/components/ui/island.tsx +++ b/packages/website/ts/components/ui/island.tsx @@ -9,8 +9,8 @@ export interface IslandProps { borderRadius?: string; } -const PlainIsland: React.StatelessComponent = ({ Component, style, className }) => ( - +const PlainIsland: React.StatelessComponent = ({ Component, style, className, children }) => ( + ); export const Island = styled(PlainIsland)` -- cgit v1.2.3 From bd03151c2a10c680bb8a12e0bdd73590381aa4ca Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Wed, 20 Jun 2018 14:03:56 -0700 Subject: Various relayer grid ui polish items --- packages/website/ts/components/portal/portal.tsx | 2 +- .../website/ts/components/portal/text_header.tsx | 15 ++---- .../components/relayer_index/relayer_grid_tile.tsx | 54 +++++++++++----------- .../relayer_index/relayer_top_tokens.tsx | 7 ++- packages/website/ts/pages/jobs/open_positions.tsx | 3 +- packages/website/ts/utils/utils.ts | 3 ++ 6 files changed, 42 insertions(+), 42 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 11b3b43f4..cd88a3f95 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -551,7 +551,7 @@ export class Portal extends React.Component { private _renderRelayerIndexSection(): React.ReactNode { return (
} + header={} body={} /> ); diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx index 4aabd47d0..853da3a29 100644 --- a/packages/website/ts/components/portal/text_header.tsx +++ b/packages/website/ts/components/portal/text_header.tsx @@ -1,21 +1,16 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; + export interface TextHeaderProps { labelText: string; } -const styles: Styles = { - title: { - fontWeight: 'bold', - fontSize: 20, - }, -}; - export const TextHeader = (props: TextHeaderProps) => { return ( -
+ {props.labelText} -
+ ); }; 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 23860856b..7f2df325e 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,6 +1,6 @@ import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; -import { GridTile } from 'material-ui/GridList'; +import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; import { analytics } from 'ts/utils/analytics'; @@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; +import { utils } from 'ts/utils/utils'; export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; @@ -21,24 +23,14 @@ const styles: Styles = { boxSizing: 'border-box', }, innerDiv: { - padding: 6, height: '100%', boxSizing: 'border-box', }, header: { height: '50%', width: '100%', - borderBottomRightRadius: 4, - borderBottomLeftRadius: 4, - borderTopRightRadius: 4, - borderTopLeftRadius: 4, - borderWidth: 1, - borderStyle: 'solid', - borderColor: colors.walletBorder, }, body: { - paddingLeft: 6, - paddingRight: 6, height: '50%', width: '100%', boxSizing: 'border-box', @@ -69,7 +61,10 @@ export const RelayerGridTile: React.StatelessComponent = ( const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId]; const eventLabel = `${props.relayerInfo.name}-${networkName}`; - const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel); + const onClick = () => { + analytics.logEvent('Portal', 'Relayer Click', eventLabel); + utils.openUrl(link); + }; const headerImageUrl = props.relayerInfo.logoImgUrl; const headerBackgroundColor = !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) @@ -77,22 +72,17 @@ export const RelayerGridTile: React.StatelessComponent = ( : FALLBACK_PRIMARY_COLOR; return ( -
- -
- -
- -
-
+
+
+ +
+
+
{props.relayerInfo.name}
@@ -111,6 +101,14 @@ export const RelayerGridTile: React.StatelessComponent = ( ); }; +export const GridTile = styled(PlainGridTile)` + cursor: pointer; + transition: transform 0.2s ease; + &:hover { + transform: translate(0px, -3px); + } +`; + interface SectionProps { titleText: string; children?: React.ReactNode; diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index b599e7123..f544fc924 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -70,7 +70,10 @@ class TokenLink extends React.Component { }; const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`; - const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel); + const onClick = (event: React.MouseEvent) => { + event.stopPropagation(); + analytics.logEvent('Portal', 'Token Click', eventLabel); + }; return ( { style={style} onMouseEnter={this._onToggleHover.bind(this, true)} onMouseLeave={this._onToggleHover.bind(this, false)} - onClick={trackTokenClick} + onClick={onClick} > {this.props.tokenInfo.symbol} diff --git a/packages/website/ts/pages/jobs/open_positions.tsx b/packages/website/ts/pages/jobs/open_positions.tsx index f3d980315..e789795c1 100644 --- a/packages/website/ts/pages/jobs/open_positions.tsx +++ b/packages/website/ts/pages/jobs/open_positions.tsx @@ -11,6 +11,7 @@ import { colors } from 'ts/style/colors'; import { styled } from 'ts/style/theme'; import { ScreenWidths, WebsiteBackendJobInfo } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; +import { utils } from 'ts/utils/utils'; const labelStyle = { fontFamily: 'Roboto Mono', fontSize: 18 }; const HEADER_TEXT = 'Open Positions'; @@ -161,7 +162,7 @@ export class OpenPositions extends React.Component Date: Thu, 21 Jun 2018 10:34:45 -0700 Subject: Add Background component --- packages/website/ts/components/portal/portal.tsx | 24 ++++++++++-------------- packages/website/ts/components/ui/background.tsx | 24 ++++++++++++++++++++++++ packages/website/ts/style/z_index.ts | 1 + 3 files changed, 35 insertions(+), 14 deletions(-) create mode 100644 packages/website/ts/components/ui/background.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index cd88a3f95..4f1dfea6f 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -22,6 +22,7 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; +import { Background } from 'ts/components/ui/background'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; @@ -109,22 +110,16 @@ const MENU_PADDING_LEFT = 185; const LARGE_LAYOUT_MAX_WIDTH = 1200; const styles: Styles = { - root: { - width: '100%', - height: '100%', - backgroundColor: colors.lightestGrey, - }, body: { - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, + marginTop: TOP_BAR_HEIGHT, }, leftColumn: { width: LEFT_COLUMN_WIDTH, - height: '100%', + position: 'fixed', }, scrollContainer: { - height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, - WebkitOverflowScrolling: 'touch', - overflow: 'auto', + marginLeft: LEFT_COLUMN_WIDTH + 30, + marginRight: 30, }, }; @@ -245,7 +240,8 @@ export class Portal extends React.Component { ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; return ( -
+
+ { blockchain={this._blockchain} translate={this.props.translate} displayType={TopBarDisplayType.Expanded} - style={{ backgroundColor: colors.lightestGrey }} + style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} />
@@ -709,10 +705,10 @@ interface LargeLayoutProps { const LargeLayout = (props: LargeLayoutProps) => { return (
-
+
{props.left}
-
+
{props.right}
diff --git a/packages/website/ts/components/ui/background.tsx b/packages/website/ts/components/ui/background.tsx new file mode 100644 index 000000000..808792a41 --- /dev/null +++ b/packages/website/ts/components/ui/background.tsx @@ -0,0 +1,24 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; +import { zIndex } from 'ts/style/z_index'; + +export interface BackgroundProps { + color?: string; +} + +const PlainBackground: React.StatelessComponent = props =>
; + +export const Background = styled(PlainBackground)` + background-color: ${props => props.color}; + height: 100vh; + width: 100vw; + position: fixed; + z-index: ${zIndex.background}; +`; + +Background.defaultProps = { + color: colors.lightestGrey, +}; + +Background.displayName = 'Background'; diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts index 0411cdd91..6e3aebaa1 100644 --- a/packages/website/ts/style/z_index.ts +++ b/packages/website/ts/style/z_index.ts @@ -1,4 +1,5 @@ export const zIndex = { + background: -1, topBar: 1100, overlay: 1105, aboveOverlay: 1106, -- cgit v1.2.3 From df94e5f164a2ce92dceb680d6835cbc700632da7 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 21 Jun 2018 12:55:00 -0700 Subject: Remove styles from Portal component --- packages/website/ts/components/portal/portal.tsx | 37 +++++++++--------------- 1 file changed, 13 insertions(+), 24 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 4f1dfea6f..c82bfbe6a 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -1,4 +1,4 @@ -import { colors, constants as sharedConstants, Styles } from '@0xproject/react-shared'; +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'; @@ -108,20 +108,7 @@ const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); const LEFT_COLUMN_WIDTH = 346; const MENU_PADDING_LEFT = 185; const LARGE_LAYOUT_MAX_WIDTH = 1200; - -const styles: Styles = { - body: { - marginTop: TOP_BAR_HEIGHT, - }, - leftColumn: { - width: LEFT_COLUMN_WIDTH, - position: 'fixed', - }, - scrollContainer: { - marginLeft: LEFT_COLUMN_WIDTH + 30, - marginRight: 30, - }, -}; +const LARGE_LAYOUT_MARGIN = 30; export class Portal extends React.Component { private _blockchain: Blockchain; @@ -258,7 +245,7 @@ export class Portal extends React.Component { style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} /> -
+ { tokenByAddress={this.props.tokenByAddress} tokenVisibility={tokenVisibility} /> -
+ { return (
-
{props.left}
-
-
- {props.right} + + {props.left} +
+ + + {props.right} + +
); }; @@ -721,9 +712,7 @@ interface SmallLayoutProps { const SmallLayout = (props: SmallLayoutProps) => { return (
-
- {props.content} -
+
{props.content}
); }; // tslint:disable:max-file-line-count -- cgit v1.2.3 From b6765b849cec691418bd0ccb38c584a146d97b19 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 21 Jun 2018 12:59:11 -0700 Subject: Padding adjustment --- packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'packages/website') 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 7f2df325e..ba3579926 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -34,6 +34,7 @@ const styles: Styles = { height: '50%', width: '100%', boxSizing: 'border-box', + padding: 12, }, weeklyTradeVolumeLabel: { fontSize: 14, @@ -81,7 +82,7 @@ export const RelayerGridTile: React.StatelessComponent = ( height={RELAYER_ICON_HEIGHT} />
-
+
{props.relayerInfo.name}
-- cgit v1.2.3 From 3df58827119b2dd70a1a41ceccd304b6055500b8 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 21 Jun 2018 13:50:58 -0700 Subject: Remove Background component --- packages/website/ts/components/portal/portal.tsx | 4 +-- .../ts/components/relayer_index/relayer_index.tsx | 39 ++++++---------------- packages/website/ts/components/ui/background.tsx | 24 ------------- packages/website/ts/components/ui/container.tsx | 1 + packages/website/ts/style/z_index.ts | 1 - 5 files changed, 12 insertions(+), 57 deletions(-) delete mode 100644 packages/website/ts/components/ui/background.tsx (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index c82bfbe6a..ec46fd4cd 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -22,7 +22,6 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index'; import { TokenBalances } from 'ts/components/token_balances'; import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar'; import { TradeHistory } from 'ts/components/trade_history/trade_history'; -import { Background } from 'ts/components/ui/background'; import { Container } from 'ts/components/ui/container'; import { FlashMessage } from 'ts/components/ui/flash_message'; import { Island } from 'ts/components/ui/island'; @@ -228,7 +227,6 @@ export class Portal extends React.Component { : TokenVisibility.TRACKED; return (
- { style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} /> - + - - {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( - - ))} - -
+ + {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => ( + + ))} + ); } } diff --git a/packages/website/ts/components/ui/background.tsx b/packages/website/ts/components/ui/background.tsx deleted file mode 100644 index 808792a41..000000000 --- a/packages/website/ts/components/ui/background.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import * as React from 'react'; -import { styled } from 'ts/style/theme'; -import { zIndex } from 'ts/style/z_index'; - -export interface BackgroundProps { - color?: string; -} - -const PlainBackground: React.StatelessComponent = props =>
; - -export const Background = styled(PlainBackground)` - background-color: ${props => props.color}; - height: 100vh; - width: 100vw; - position: fixed; - z-index: ${zIndex.background}; -`; - -Background.defaultProps = { - color: colors.lightestGrey, -}; - -Background.displayName = 'Background'; diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx index 90aec0e7c..a747ef01f 100644 --- a/packages/website/ts/components/ui/container.tsx +++ b/packages/website/ts/components/ui/container.tsx @@ -15,6 +15,7 @@ export interface ContainerProps { borderRadius?: StringOrNum; maxWidth?: StringOrNum; width?: StringOrNum; + minHeight?: StringOrNum; isHidden?: boolean; className?: string; position?: 'absolute' | 'fixed' | 'relative' | 'unset'; diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts index 6e3aebaa1..0411cdd91 100644 --- a/packages/website/ts/style/z_index.ts +++ b/packages/website/ts/style/z_index.ts @@ -1,5 +1,4 @@ export const zIndex = { - background: -1, topBar: 1100, overlay: 1105, aboveOverlay: 1106, -- cgit v1.2.3 From 82789d53155772e339c1c500bb538638dfc20376 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 15:39:00 -0700 Subject: Fix issues that arose from merge --- packages/website/ts/components/onboarding/onboarding_flow.tsx | 6 +++++- packages/website/ts/components/portal/portal.tsx | 6 +++--- 2 files changed, 8 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 331899469..ec8d96191 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -42,7 +42,11 @@ export class OnboardingFlow extends React.Component { onboardingElement = {this._renderOnboardignCard()}; } else { onboardingElement = ( - + {this._renderPopperChildren.bind(this)} ); diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index ec46fd4cd..8606eed1b 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -226,7 +226,7 @@ export class Portal extends React.Component { ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; return ( -
+ { style={{ backgroundColor: colors.lightestGrey, position: 'fixed' }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} /> - + { trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)} /> -
+ ); } private _renderMainRoute(): React.ReactNode { -- cgit v1.2.3 From b0000bb276df7609bea8a48252063693f0553222 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 21 Jun 2018 17:40:17 -0700 Subject: Fix z-index issues --- packages/website/ts/components/portal/portal.tsx | 79 ++++++++++++---------- .../components/relayer_index/relayer_grid_tile.tsx | 3 +- .../ts/components/relayer_index/relayer_index.tsx | 1 - packages/website/ts/components/ui/animation.tsx | 6 +- packages/website/ts/components/wallet/wallet.tsx | 20 +++--- packages/website/ts/utils/utils.ts | 3 + 6 files changed, 63 insertions(+), 49 deletions(-) (limited to 'packages/website') 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 { 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} /> @@ -283,11 +288,6 @@ export class Portal extends React.Component { tokenVisibility={tokenVisibility} /> - ); } @@ -322,41 +322,48 @@ export class Portal extends React.Component { } 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 (
- {isMobile && {startOnboarding}} - - + + {isMobile && {startOnboarding}} + + + + {!isMobile && {startOnboarding}} - {!isMobile && {startOnboarding}} +
); } 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 = ( ); }; -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 = props =>
{ public static defaultProps = { style: {}, @@ -244,17 +251,12 @@ export class Wallet extends React.Component { - + - - + + - +
Date: Thu, 21 Jun 2018 17:42:37 -0700 Subject: Lint and fix typo --- packages/website/ts/components/portal/portal.tsx | 2 +- packages/website/ts/components/wallet/wallet.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index e31404559..9a725c742 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -243,7 +243,7 @@ export class Portal extends React.Component { style={{ backgroundColor: colors.lightestGrey, position: 'fixed', - // Hack: used to make onboarding z-index logi work for both mobile and desktop + // Hack: used to make onboarding z-index logic work for both mobile and desktop zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined, }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 0f9e011b4..4cc70badd 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -29,6 +29,7 @@ import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { Dispatcher } from 'ts/redux/dispatcher'; import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; import { BlockchainErrs, ProviderType, @@ -43,7 +44,6 @@ 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 { -- cgit v1.2.3 From a07cfb7abc3649f29ab5020ff5d2bea37c26cefd Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 21 Jun 2018 16:53:57 -0700 Subject: Do not add empty token to local storage --- packages/website/ts/components/generate_order/asset_picker.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'packages/website') diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index b43ac1f2e..738692264 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -246,6 +246,14 @@ export class AssetPicker extends React.Component Date: Thu, 21 Jun 2018 17:57:22 -0700 Subject: Fix state mutation in reducer --- packages/website/ts/redux/reducer.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index 9d3d8f7d9..ed6a4868e 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -156,7 +156,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { } case ActionTypes.AddTokenToTokenByAddress: { - const newTokenByAddress = state.tokenByAddress; + const newTokenByAddress = { ...state.tokenByAddress }; newTokenByAddress[action.data.address] = action.data; return { ...state, @@ -165,7 +165,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { } case ActionTypes.RemoveTokenFromTokenByAddress: { - const newTokenByAddress = state.tokenByAddress; + const newTokenByAddress = { ...state.tokenByAddress }; delete newTokenByAddress[action.data.address]; return { ...state, @@ -174,7 +174,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { } case ActionTypes.UpdateTokenByAddress: { - const tokenByAddress = state.tokenByAddress; + const tokenByAddress = { ...state.tokenByAddress }; const tokens = action.data; _.each(tokens, token => { const updatedToken = { @@ -253,7 +253,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { } case ActionTypes.UpdateChosenAssetTokenAddress: { - const newAssetToken = state.sideToAssetToken[action.data.side]; + const newAssetToken = { ...state.sideToAssetToken[action.data.side] }; newAssetToken.address = action.data.address; const newSideToAssetToken = { ...state.sideToAssetToken, -- cgit v1.2.3 From 05c008844532a9386341f60e51270756341d00db Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 22 Jun 2018 11:22:33 -0700 Subject: Comment out Chris, and move Mel up in about page --- packages/website/ts/pages/about/about.tsx | 23 +++++++++++------------ packages/website/ts/pages/about/profile.tsx | 1 + 2 files changed, 12 insertions(+), 12 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 6830b64ab..62a2519a4 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -156,17 +156,6 @@ const teamRow5: ProfileInfo[] = [ linkedIn: 'https://www.linkedin.com/in/fragosti/', github: 'http://github.com/fragosti', }, - { - name: 'Chris Kalani', - title: 'Director of Design', - description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, - image: 'images/team/chris.png', - linkedIn: 'https://www.linkedin.com/in/chriskalani/', - github: 'https://github.com/chriskalani', - }, -]; - -const teamRow6: ProfileInfo[] = [ { name: 'Mel Oberto', title: 'Office Operations / Executive Assistant', @@ -176,6 +165,17 @@ const teamRow6: ProfileInfo[] = [ }, ]; +const teamRow6: ProfileInfo[] = [ + // { + // name: 'Chris Kalani', + // title: 'Director of Design', + // description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, + // image: 'images/team/chris.png', + // linkedIn: 'https://www.linkedin.com/in/chriskalani/', + // github: 'https://github.com/chriskalani', + // }, +]; + const advisors: ProfileInfo[] = [ { name: 'Fred Ehrsam', @@ -270,7 +270,6 @@ export class About extends React.Component {
{this._renderProfiles(teamRow3)}
{this._renderProfiles(teamRow4)}
{this._renderProfiles(teamRow5)}
-
{this._renderProfiles(teamRow6)}
{ fontSize: 14, fontFamily: 'Roboto Mono', color: colors.darkGrey, + whiteSpace: 'nowrap', }} > {props.profileInfo.title.toUpperCase()} -- cgit v1.2.3 From 543f2c91fe3d00be33b2193eb88529a53622506a Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 22 Jun 2018 11:37:57 -0700 Subject: Pulled out reset AssetPicker state into a common variable --- .../ts/components/generate_order/asset_picker.tsx | 24 ++++++++-------------- 1 file changed, 9 insertions(+), 15 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 738692264..87618f1e0 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -232,12 +232,14 @@ export class AssetPicker extends React.Component { + const resetState: AssetPickerState = { + ...this.state, + isAddingTokenToTracked: false, + assetView: AssetViews.ASSET_PICKER, + chosenTrackTokenAddress: undefined, + }; if (!didUserAcceptTracking) { - this.setState({ - isAddingTokenToTracked: false, - assetView: AssetViews.ASSET_PICKER, - chosenTrackTokenAddress: undefined, - }); + this.setState(resetState); this._onCloseDialog(); return; } @@ -247,11 +249,7 @@ export class AssetPicker extends React.Component Date: Fri, 22 Jun 2018 11:47:57 -0700 Subject: Use Ops instead of Operations in Mels description --- packages/website/ts/pages/about/about.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index 62a2519a4..dc7ce265e 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -158,7 +158,7 @@ const teamRow5: ProfileInfo[] = [ }, { name: 'Mel Oberto', - title: 'Office Operations / Executive Assistant', + title: 'Office Ops / Executive Assistant', description: `Daily Operations. Previously People Operations Associate at Heap. Marketing and MBA at Sacred Heart University.`, image: 'images/team/mel.png', linkedIn: 'https://www.linkedin.com/in/melanieoberto', -- cgit v1.2.3 From 06705f9e88c5b8901e4edea08ffed92c8c6808f6 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 22 Jun 2018 11:54:24 -0700 Subject: Remove diverse from about page --- packages/website/ts/pages/about/about.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index dc7ce265e..e427104aa 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -259,9 +259,9 @@ export class About extends React.Component { lineHeight: 1.5, }} > - Our team is a diverse and globally distributed group with backgrounds in engineering, - research, business and design. We are passionate about decentralized technology and its - potential to act as an equalizing force in the world. + Our team is a globally distributed group with backgrounds in engineering, research, business + and design. We are passionate about decentralized technology and its potential to act as an + equalizing force in the world.
-- cgit v1.2.3 From 80fe1938b8cc7ad2b72972133cf9594fa4ee04d9 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 22 Jun 2018 12:04:45 -0700 Subject: Fix tslint error --- packages/website/ts/pages/about/about.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx index e427104aa..0259af36f 100644 --- a/packages/website/ts/pages/about/about.tsx +++ b/packages/website/ts/pages/about/about.tsx @@ -165,16 +165,16 @@ const teamRow5: ProfileInfo[] = [ }, ]; -const teamRow6: ProfileInfo[] = [ - // { - // name: 'Chris Kalani', - // title: 'Director of Design', - // description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, - // image: 'images/team/chris.png', - // linkedIn: 'https://www.linkedin.com/in/chriskalani/', - // github: 'https://github.com/chriskalani', - // }, -]; +// const teamRow6: ProfileInfo[] = [ +// { +// name: 'Chris Kalani', +// title: 'Director of Design', +// description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`, +// image: 'images/team/chris.png', +// linkedIn: 'https://www.linkedin.com/in/chriskalani/', +// github: 'https://github.com/chriskalani', +// }, +// ]; const advisors: ProfileInfo[] = [ { -- cgit v1.2.3 From 7fb8b546f9b20719fcc9b10d77b9e07c0cef6025 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 22 Jun 2018 12:22:31 -0700 Subject: Remove unecessary position relative rules --- packages/website/ts/components/portal/portal.tsx | 4 ++-- packages/website/ts/components/relayer_index/relayer_grid_tile.tsx | 2 ++ 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 9a725c742..c9f2b2633 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -226,7 +226,7 @@ export class Portal extends React.Component { ? TokenVisibility.UNTRACKED : TokenVisibility.TRACKED; return ( - + { const marginBottom = isMobile ? '200px' : '15px'; return (
- + {isMobile && {startOnboarding}} Date: Fri, 22 Jun 2018 14:32:21 -0700 Subject: Fix issue where hovered tiles appear over top bar --- packages/website/ts/components/portal/portal.tsx | 14 +++++++++----- packages/website/ts/style/z_index.ts | 1 + 2 files changed, 10 insertions(+), 5 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index c9f2b2633..4166fde53 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -243,8 +243,7 @@ export class Portal extends React.Component { style={{ backgroundColor: colors.lightestGrey, position: 'fixed', - // Hack: used to make onboarding z-index logic work for both mobile and desktop - zIndex: utils.isMobile(this.props.screenWidth) ? zIndex.topBar : undefined, + zIndex: zIndex.topBar, }} maxWidth={LARGE_LAYOUT_MAX_WIDTH} /> @@ -696,9 +695,14 @@ interface LargeLayoutProps { } const LargeLayout = (props: LargeLayoutProps) => { return ( -
+
- + {props.left}
@@ -707,7 +711,7 @@ const LargeLayout = (props: LargeLayoutProps) => { {props.right} -
+ ); }; diff --git a/packages/website/ts/style/z_index.ts b/packages/website/ts/style/z_index.ts index 0411cdd91..a3998f59b 100644 --- a/packages/website/ts/style/z_index.ts +++ b/packages/website/ts/style/z_index.ts @@ -1,5 +1,6 @@ export const zIndex = { topBar: 1100, + aboveTopBar: 1101, overlay: 1105, aboveOverlay: 1106, }; -- cgit v1.2.3 From 66be42d1f839f99bc4d953fe4be401776573f23f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 22 Jun 2018 15:33:58 -0700 Subject: Center items in portal drawer header --- packages/website/ts/components/portal/drawer_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx index 4bd07769f..205a60afc 100644 --- a/packages/website/ts/components/portal/drawer_menu.tsx +++ b/packages/website/ts/components/portal/drawer_menu.tsx @@ -65,7 +65,7 @@ interface HeaderProps { const Header = (props: HeaderProps) => { return (
-
+
{props.displayMessage} -- cgit v1.2.3 From a1737a28d08798e4b58ff49cd116609ddafa5295 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 22 Jun 2018 15:56:24 -0700 Subject: Do not render ZRX or WETH as removable tracked tokens --- packages/website/ts/components/generate_order/asset_picker.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/generate_order/asset_picker.tsx b/packages/website/ts/components/generate_order/asset_picker.tsx index 87618f1e0..b0dcf5678 100644 --- a/packages/website/ts/components/generate_order/asset_picker.tsx +++ b/packages/website/ts/components/generate_order/asset_picker.tsx @@ -9,6 +9,7 @@ import { TokenIcon } from 'ts/components/ui/token_icon'; import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage'; import { Dispatcher } from 'ts/redux/dispatcher'; import { DialogConfigs, Token, TokenByAddress, TokenVisibility } from 'ts/types'; +import { constants } from 'ts/utils/constants'; const TOKEN_ICON_DIMENSION = 100; const TILE_DIMENSION = 146; @@ -134,7 +135,9 @@ export class AssetPicker extends React.Component { if ( (this.props.tokenVisibility === TokenVisibility.TRACKED && !token.isTracked) || - (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked) + (this.props.tokenVisibility === TokenVisibility.UNTRACKED && token.isTracked) || + token.symbol === constants.ZRX_TOKEN_SYMBOL || + token.symbol === constants.ETHER_TOKEN_SYMBOL ) { return null; // Skip } -- cgit v1.2.3 From 1f5848ba8265885ef4644a8103029552782965c8 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 22 Jun 2018 16:07:07 -0700 Subject: Remove extra border from the bottom of the wallet --- packages/website/ts/components/wallet/wallet.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'packages/website') diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index 4cc70badd..dc48d6619 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -311,7 +311,7 @@ export class Wallet extends React.Component { wrappedEtherDirection: Side.Deposit, }; const key = ETHER_ITEM_KEY; - return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row'); + return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false, 'eth-row'); } private _renderTokenRows(): React.ReactNode { const trackedTokens = this.props.trackedTokens; @@ -322,7 +322,7 @@ export class Wallet extends React.Component { ); return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this)); } - private _renderTokenRow(token: Token, _index: number): React.ReactNode { + private _renderTokenRow(token: Token, index: number): React.ReactNode { const tokenState = this.props.trackedTokenStateByAddress[token.address]; if (_.isUndefined(tokenState)) { return null; @@ -350,12 +350,14 @@ export class Wallet extends React.Component { }, }; const key = token.address; + const isLastRow = index === this.props.trackedTokens.length - 1; return this._renderBalanceRow( key, icon, primaryText, secondaryText, accessoryItemConfig, + isLastRow, isWeth ? 'weth-row' : undefined, ); } @@ -365,13 +367,19 @@ export class Wallet extends React.Component { primaryText: React.ReactNode, secondaryText: React.ReactNode, accessoryItemConfig: AccessoryItemConfig, + isLastRow: boolean, className?: string, ): React.ReactNode { const shouldShowWrapEtherItem = !_.isUndefined(this.state.wrappedEtherDirection) && this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection && !_.isUndefined(this.props.userEtherBalanceInWei); - const additionalStyle = shouldShowWrapEtherItem ? walletItemStyles.focusedItem : styles.borderedItem; + let additionalStyle; + if (shouldShowWrapEtherItem) { + additionalStyle = walletItemStyles.focusedItem; + } else if (!isLastRow) { + additionalStyle = styles.borderedItem; + } const style = { ...styles.tokenItem, ...additionalStyle }; const etherToken = this._getEthToken(); return ( -- cgit v1.2.3