From ef1e9743465d40cb3a2c3a1479155437694951b9 Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Fri, 11 May 2018 14:17:40 -0700 Subject: Back button and title components --- packages/website/ts/components/portal/portal.tsx | 129 ++++++++++++++------- .../website/ts/components/portal/portal_menu.tsx | 29 ++--- packages/website/ts/components/wallet/wallet.tsx | 18 +-- 3 files changed, 112 insertions(+), 64 deletions(-) (limited to 'packages/website/ts/components') diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index d6bc82587..70c99921c 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -3,7 +3,7 @@ import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; 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'; @@ -78,6 +78,7 @@ enum TokenManagementState { const THROTTLE_TIMEOUT = 100; const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded); +const BACK_BUTTON_HEIGHT = 28; const styles: Styles = { root: { @@ -97,6 +98,16 @@ const styles: Styles = { fontWeight: 'bold', fontSize: 20, }, + backButton: { + height: BACK_BUTTON_HEIGHT, + backgroundColor: colors.white, + borderRadius: BACK_BUTTON_HEIGHT, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + }, + backButtonIcon: { + color: colors.mediumBlue, + fontSize: 20, + }, }; export class Portal extends React.Component { @@ -190,9 +201,6 @@ export class Portal extends React.Component {
-
- Your Account -
{
-
- Explore 0x Ecosystem -
{ /> { ); } private _renderMenu(routeComponentProps: RouteComponentProps) { - return ; + return ( +
+ + +
+ ); } private _renderWallet() { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( - +
+ + <Wallet + 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={trackedTokens} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + injectedProviderName={this.props.injectedProviderName} + providerType={this.props.providerType} + onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)} + onAddToken={this._onAddToken.bind(this)} + onRemoveToken={this._onRemoveToken.bind(this)} + /> + </div> ); } private _renderEthWrapper() { @@ -319,19 +332,22 @@ export class Portal extends React.Component<PortalProps, PortalState> { const allTokens = _.values(this.props.tokenByAddress); const trackedTokens = _.filter(allTokens, t => t.isTracked); return ( - <TokenBalances - blockchain={this._blockchain} - blockchainErr={this.props.blockchainErr} - blockchainIsLoaded={this.props.blockchainIsLoaded} - dispatcher={this.props.dispatcher} - screenWidth={this.props.screenWidth} - tokenByAddress={this.props.tokenByAddress} - trackedTokens={trackedTokens} - userAddress={this.props.userAddress} - userEtherBalanceInWei={this.props.userEtherBalanceInWei} - networkId={this.props.networkId} - lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} - /> + <div> + <Title titleText={'Your Account'} /> + <TokenBalances + blockchain={this._blockchain} + blockchainErr={this.props.blockchainErr} + blockchainIsLoaded={this.props.blockchainIsLoaded} + dispatcher={this.props.dispatcher} + screenWidth={this.props.screenWidth} + tokenByAddress={this.props.tokenByAddress} + trackedTokens={trackedTokens} + userAddress={this.props.userAddress} + userEtherBalanceInWei={this.props.userEtherBalanceInWei} + networkId={this.props.networkId} + lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch} + /> + </div> ); } private _renderFillOrder(match: any, location: Location, history: History) { @@ -363,7 +379,12 @@ export class Portal extends React.Component<PortalProps, PortalState> { ); } private _renderRelayerIndex() { - return <RelayerIndex networkId={this.props.networkId} />; + return ( + <div> + <Title titleText={'Explore 0x Relayers'} /> + <RelayerIndex networkId={this.props.networkId} /> + </div> + ); } private _onTokenChosen(tokenAddress: string): void { if (_.isEmpty(tokenAddress)) { @@ -419,3 +440,31 @@ export class Portal extends React.Component<PortalProps, PortalState> { this.props.dispatcher.updateScreenWidth(newScreenWidth); } } + +interface TitleProps { + titleText: string; +} +const Title = (props: TitleProps) => { + return ( + <div className="py3" style={styles.title}> + {props.titleText} + </div> + ); +}; + +const BackButton = () => { + return ( + <div style={{ height: 65, paddingTop: 25 }}> + <Link to={`${WebsitePaths.Portal}`} style={{ textDecoration: 'none' }}> + <div className="flex right" style={{ ...styles.backButton, paddingTop: 10 }}> + <div style={{ marginLeft: 12 }}> + <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} /> + </div> + <div style={{ marginLeft: 12, marginRight: 12 }}> + <div style={{ fontSize: 16, color: colors.lightGrey }}>back to Relayers</div> + </div> + </div> + </Link> + </div> + ); +}; diff --git a/packages/website/ts/components/portal/portal_menu.tsx b/packages/website/ts/components/portal/portal_menu.tsx index 33835fd98..e073596e2 100644 --- a/packages/website/ts/components/portal/portal_menu.tsx +++ b/packages/website/ts/components/portal/portal_menu.tsx @@ -17,39 +17,34 @@ interface MenuItemEntry { const menuItemEntries: MenuItemEntry[] = [ { - to: `${WebsitePaths.Portal}`, - labelText: 'Generate order', - iconName: 'zmdi-arrow-right-top', - }, - { - to: `${WebsitePaths.Portal}/fill`, - labelText: 'Fill order', - iconName: 'zmdi-arrow-left-bottom', - }, - { - to: `${WebsitePaths.Portal}/balances`, - labelText: 'Balances', + to: `${WebsitePaths.Portal}/account`, + labelText: 'Account Overview', iconName: 'zmdi-balance-wallet', }, { to: `${WebsitePaths.Portal}/trades`, - labelText: 'Trade History', + labelText: 'Trade history', iconName: 'zmdi-format-list-bulleted', }, { to: `${WebsitePaths.Portal}/weth`, - labelText: 'Wrap ETH', + labelText: 'Wrapped ETH', iconName: 'zmdi-circle-o', }, + { + to: `${WebsitePaths.Portal}/direct`, + labelText: 'Trade direct', + iconName: 'zmdi-swap', + }, ]; const DEFAULT_LABEL_COLOR = colors.darkerGrey; const DEFAULT_ICON_COLOR = colors.darkerGrey; -const SELECTED_ICON_COLOR = colors.yellow800; +const SELECTED_ICON_COLOR = colors.yellow900; export const PortalMenu: React.StatelessComponent<PortalMenuProps> = (props: PortalMenuProps) => { return ( - <div> + <div style={{ paddingLeft: 185 }}> {_.map(menuItemEntries, entry => { const selected = entry.to === props.selectedPath; return ( @@ -80,7 +75,7 @@ const PortalMenuItemLabel: React.StatelessComponent<PortalMenuItemLabelProps> = }; return ( <div className="flex"> - <div className="pr1 pl2"> + <div className="pr1"> <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} /> </div> <div className="pl1" style={styles.textStyle}> diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx index d9c97e34a..ac79d5a21 100644 --- a/packages/website/ts/components/wallet/wallet.tsx +++ b/packages/website/ts/components/wallet/wallet.tsx @@ -18,6 +18,7 @@ import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-down import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward'; import Close from 'material-ui/svg-icons/navigation/close'; import * as React from 'react'; +import { Link } from 'react-router-dom'; import ReactTooltip = require('react-tooltip'); import firstBy = require('thenby'); @@ -38,6 +39,7 @@ import { TokenByAddress, TokenState, TokenStateByAddress, + WebsitePaths, } from 'ts/types'; import { backendClient } from 'ts/utils/backend_client'; import { constants } from 'ts/utils/constants'; @@ -237,13 +239,15 @@ export class Wallet extends React.Component<WalletProps, WalletState> { const userAddress = this.props.userAddress; const primaryText = utils.getAddressBeginAndEnd(userAddress); return ( - <ListItem - key={HEADER_ITEM_KEY} - primaryText={primaryText} - leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} - style={{ ...styles.paddedItem, ...styles.borderedItem }} - innerDivStyle={styles.headerItemInnerDiv} - /> + <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}> + <ListItem + key={HEADER_ITEM_KEY} + primaryText={primaryText} + leftIcon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />} + style={{ ...styles.paddedItem, ...styles.borderedItem }} + innerDivStyle={styles.headerItemInnerDiv} + /> + </Link> ); } private _renderBody(): React.ReactElement<{}> { -- cgit v1.2.3