Back button and title components

2 files changed, 101 insertions, 57 deletions

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<PortalProps, PortalState> {
@@ -190,9 +201,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 <div id="portal" style={styles.body}>
                     <div className="sm-flex flex-center">
                         <div className="flex-last px3">
-                            <div className="py3" style={styles.title}>
-                                Your Account
-                            </div>
                             <div style={{ width: 346 }}>
                                 <Switch>
                                     <Route
@@ -208,9 +216,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                             </div>
                         </div>
                         <div className="flex-auto px3" style={styles.scrollContainer}>
-                            <div className="py3" style={styles.title}>
-                                Explore 0x Ecosystem
-                            </div>
                             <Switch>
                                 <Route
                                     path={`${WebsitePaths.Portal}/weth`}
@@ -218,7 +223,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                                 />
                                 <Route path={`${WebsitePaths.Portal}/fill`} render={this._renderFillOrder.bind(this)} />
                                 <Route
-                                    path={`${WebsitePaths.Portal}/balances`}
+                                    path={`${WebsitePaths.Portal}/account`}
                                     render={this._renderTokenBalances.bind(this)}
                                 />
                                 <Route
@@ -268,29 +273,37 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderMenu(routeComponentProps: RouteComponentProps<any>) {
-        return <PortalMenu selectedPath={routeComponentProps.location.pathname} />;
+        return (
+            <div>
+                <BackButton />
+                <PortalMenu selectedPath={routeComponentProps.location.pathname} />
+            </div>
+        );
     }
     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>
+                <Title titleText={'Your Account'} />
+                <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}>