Merge pull request #820 from 0xProject/bug/website/top-bar-layout

Various mobile portal fixes and top bar layout refactor

4 files changed, 71 insertions, 42 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 1adbc86cd..d31de02bc 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -91,7 +91,7 @@ interface PortalState {
 
 interface AccountManagementItem {
     pathName: string;
-    headerText: string;
+    headerText?: string;
     render: () => React.ReactNode;
 }
 
@@ -106,7 +106,8 @@ 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 LARGE_LAYOUT_MARGIN = 30;
+const LARGE_LAYOUT_SIDE_PADDING = 30;
+const SMALL_LAYOUT_SIDE_PADDING = 20;
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -243,7 +244,9 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                         position: 'fixed',
                         zIndex: zIndex.topBar,
                     }}
-                    maxWidth={LARGE_LAYOUT_MAX_WIDTH}
+                    maxWidth={!this._isSmallScreen() ? LARGE_LAYOUT_MAX_WIDTH : undefined}
+                    paddingLeft={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
+                    paddingRight={!this._isSmallScreen() ? LARGE_LAYOUT_SIDE_PADDING : SMALL_LAYOUT_SIDE_PADDING}
                 />
                 <Container marginTop={TOP_BAR_HEIGHT} minHeight="100vh" backgroundColor={colors.lightestGrey}>
                     <Switch>
@@ -324,7 +327,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         return (
             <div>
                 <Container className="flex flex-column items-center">
-                    {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>}
+                    {isMobile && (
+                        <Container marginTop="20px" marginBottom="20px">
+                            {this._renderStartOnboarding()}
+                        </Container>
+                    )}
                     <Container marginBottom={marginBottom} width="100%">
                         <Wallet
                             style={
@@ -402,7 +409,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             },
             {
                 pathName: `${WebsitePaths.Portal}/account`,
-                headerText: 'Your Account',
+                headerText: this._isSmallScreen() ? undefined : 'Your Account',
                 render: this._isSmallScreen() ? this._renderWallet.bind(this) : this._renderTokenBalances.bind(this),
             },
             {
@@ -445,7 +452,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
     private _renderAccountManagementItem(item: AccountManagementItem): React.ReactNode {
         return (
             <Section
-                header={<TextHeader labelText={item.headerText} />}
+                header={!_.isUndefined(item.headerText) && <TextHeader labelText={item.headerText} />}
                 body={<Loading isLoading={!this.props.blockchainIsLoaded} content={item.render()} />}
             />
         );
@@ -527,15 +534,21 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         );
     }
     private _renderRelayerIndexSection(): React.ReactNode {
-        return <Section header={<TextHeader labelText="0x Relayers" />} body={this._renderRelayerIndex()} />;
-    }
-    private _renderRelayerIndex(): React.ReactNode {
         const isMobile = utils.isMobileWidth(this.props.screenWidth);
         return (
-            <Container className="flex flex-column items-center">
-                {isMobile && <Container marginBottom="20px">{this._renderStartOnboarding()}</Container>}
-                <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />
-            </Container>
+            <Section
+                header={!isMobile && <TextHeader labelText="0x Relayers" />}
+                body={
+                    <Container className="flex flex-column items-center">
+                        {isMobile && (
+                            <Container marginTop="20px" marginBottom="20px">
+                                {this._renderStartOnboarding()}
+                            </Container>
+                        )}
+                        <RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />
+                    </Container>
+                }
+            />
         );
     }
     private _renderNotFoundMessage(): React.ReactNode {
@@ -685,19 +698,19 @@ interface LargeLayoutProps {
 }
 const LargeLayout = (props: LargeLayoutProps) => {
     return (
-        <Container className="mx-auto flex flex-center" maxWidth={LARGE_LAYOUT_MAX_WIDTH}>
+        <Container
+            className="mx-auto flex flex-center"
+            maxWidth={LARGE_LAYOUT_MAX_WIDTH}
+            paddingLeft={LARGE_LAYOUT_SIDE_PADDING}
+            paddingRight={LARGE_LAYOUT_SIDE_PADDING}
+        >
             <div className="flex-last">
-                <Container
-                    width={LEFT_COLUMN_WIDTH}
-                    position="fixed"
-                    zIndex={zIndex.aboveTopBar}
-                    marginLeft={LARGE_LAYOUT_MARGIN}
-                >
+                <Container width={LEFT_COLUMN_WIDTH} position="fixed" zIndex={zIndex.aboveTopBar}>
                     {props.left}
                 </Container>
             </div>
-            <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH + LARGE_LAYOUT_MARGIN}>
-                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_MARGIN} marginRight={LARGE_LAYOUT_MARGIN}>
+            <Container className="flex-auto" marginLeft={LEFT_COLUMN_WIDTH}>
+                <Container className="flex-auto" marginLeft={LARGE_LAYOUT_SIDE_PADDING}>
                     {props.right}
                 </Container>
             </Container>
@@ -711,7 +724,13 @@ interface SmallLayoutProps {
 const SmallLayout = (props: SmallLayoutProps) => {
     return (
         <div className="flex flex-center">
-            <div className="flex-auto px3">{props.content}</div>
+            <Container
+                className="flex-auto"
+                paddingLeft={SMALL_LAYOUT_SIDE_PADDING}
+                paddingRight={SMALL_LAYOUT_SIDE_PADDING}
+            >
+                {props.content}
+            </Container>
         </div>
     );
 }; // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 778536663..dd3de7950 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -11,6 +11,7 @@ import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu
 import { DrawerMenu } from 'ts/components/portal/drawer_menu';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
+import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
@@ -45,6 +46,8 @@ export interface TopBarProps {
     onVersionSelected?: (semver: string) => void;
     sidebarHeader?: React.ReactNode;
     maxWidth?: number;
+    paddingLeft?: number;
+    paddingRight?: number;
 }
 
 interface TopBarState {
@@ -67,13 +70,12 @@ const styles: Styles = {
         color: colors.darkestGrey,
         paddingTop: 6,
         paddingBottom: 6,
-        marginTop: 17,
         cursor: 'pointer',
         fontWeight: 400,
     },
 };
 
-const DEFAULT_HEIGHT = 59;
+const DEFAULT_HEIGHT = 68;
 const EXPANDED_HEIGHT = 75;
 
 export class TopBar extends React.Component<TopBarProps, TopBarState> {
@@ -81,6 +83,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         displayType: TopBarDisplayType.Default,
         style: {},
         isNightVersion: false,
+        paddingLeft: 20,
+        paddingRight: 20,
     };
     public static heightForDisplayType(displayType: TopBarDisplayType): number {
         const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
@@ -102,7 +106,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     public render(): React.ReactNode {
         const isNightVersion = this.props.isNightVersion;
         const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded;
-        const parentClassNames = `flex mx-auto ${isExpandedDisplayType ? 'pl3 py1' : 'max-width-4'}`;
+        const parentClassNames = !isExpandedDisplayType
+            ? 'flex mx-auto items-center max-width-4'
+            : 'flex mx-auto items-center';
         const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
         const developerSectionMenuItems = [
             <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
@@ -197,7 +203,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             fontSize: 25,
             color: isNightVersion ? 'white' : 'black',
             cursor: 'pointer',
-            paddingTop: 16,
         };
         const activeNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
@@ -211,15 +216,21 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         // TODO : Remove this once we ship portal v2
         const shouldShowPortalV2Drawer = this._isViewingPortal() && utils.shouldShowPortalV2();
         return (
-            <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
-                <div className={parentClassNames} style={{ maxWidth: this.props.maxWidth }}>
-                    <div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
-                        <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
-                            <img src={logoUrl} height="30" />
-                        </Link>
-                    </div>
-                    <div className={`col col-${isExpandedDisplayType ? '8' : '9'} lg-hide md-hide`} />
-                    <div className={`col col-${isExpandedDisplayType ? '6' : '5'} sm-hide xs-hide`} />
+            <div
+                style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }}
+                className="pb1 flex items-center"
+            >
+                <Container
+                    className={parentClassNames}
+                    width="100%"
+                    maxWidth={this.props.maxWidth}
+                    paddingLeft={this.props.paddingLeft}
+                    paddingRight={this.props.paddingRight}
+                >
+                    <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+                        <img src={logoUrl} height="30" />
+                    </Link>
+                    <div className="flex-auto" />
                     {!this._isViewingPortal() && (
                         <div className={menuClasses}>
                             <div className="flex justify-between">
@@ -264,7 +275,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         </div>
                     )}
                     {this._isViewingPortal() && (
-                        <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}>
+                        <div className="sm-hide xs-hide">
                             <ProviderDisplay
                                 dispatcher={this.props.dispatcher}
                                 userAddress={this.props.userAddress}
@@ -277,12 +288,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                             />
                         </div>
                     )}
-                    <div className={`col ${isExpandedDisplayType ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}>
+                    <div className={'md-hide lg-hide'}>
                         <div style={menuIconStyle}>
                             <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
                         </div>
                     </div>
-                </div>
+                </Container>
                 {shouldShowPortalV2Drawer ? this._renderPortalV2Drawer() : this._renderDrawer()}
             </div>
         );
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 2e4254cfa..e96d27c3f 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -31,7 +31,6 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
             ? {
                   borderRadius: 4,
                   border: `1px solid ${this.props.isNightVersion ? colors.grey : colors.greyishPink}`,
-                  marginTop: 15,
                   paddingLeft: 9,
                   paddingRight: 9,
                   minWidth: 77,
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1e0b9ec48..1d7be5dbc 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -224,10 +224,10 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 popoverContent={
                     <SimpleMenu minWidth="150px">
                         <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
-                        <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                        {!isMobile && <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />}
                         <SimpleMenuItem displayText="Add Tokens..." onClick={this.props.onAddToken} />
                         <SimpleMenuItem displayText="Remove Tokens..." onClick={this.props.onRemoveToken} />
-                        <GoToAccountManagementSimpleMenuItem />
+                        {!isMobile && <GoToAccountManagementSimpleMenuItem />}
                     </SimpleMenu>
                 }
                 anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}