Implement new menu styling

2 files changed, 95 insertions, 4 deletions

diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index e6a92d9a8..d6bc82587 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, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
 
 import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -12,7 +12,7 @@ import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_
 import { EthWrappers } from 'ts/components/eth_wrappers';
 import { FillOrder } from 'ts/components/fill_order';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
+import { PortalMenu } from 'ts/components/portal/portal_menu';
 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';
@@ -267,8 +267,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             </div>
         );
     }
-    private _renderMenu() {
-        return <LegacyPortalMenu menuItemStyle={{ color: colors.darkerGrey }} />;
+    private _renderMenu(routeComponentProps: RouteComponentProps<any>) {
+        return <PortalMenu selectedPath={routeComponentProps.location.pathname} />;
     }
     private _renderWallet() {
         const allTokens = _.values(this.props.tokenByAddress);
diff --git a/packages/website/ts/components/portal/portal_menu.tsx b/packages/website/ts/components/portal/portal_menu.tsx
new file mode 100644
index 000000000..33835fd98
--- /dev/null
+++ b/packages/website/ts/components/portal/portal_menu.tsx
@@ -0,0 +1,91 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { MenuItem } from 'ts/components/ui/menu_item';
+import { Environments, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+
+export interface PortalMenuProps {
+    selectedPath?: string;
+}
+
+interface MenuItemEntry {
+    to: string;
+    labelText: string;
+    iconName: string;
+}
+
+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',
+        iconName: 'zmdi-balance-wallet',
+    },
+    {
+        to: `${WebsitePaths.Portal}/trades`,
+        labelText: 'Trade History',
+        iconName: 'zmdi-format-list-bulleted',
+    },
+    {
+        to: `${WebsitePaths.Portal}/weth`,
+        labelText: 'Wrap ETH',
+        iconName: 'zmdi-circle-o',
+    },
+];
+
+const DEFAULT_LABEL_COLOR = colors.darkerGrey;
+const DEFAULT_ICON_COLOR = colors.darkerGrey;
+const SELECTED_ICON_COLOR = colors.yellow800;
+
+export const PortalMenu: React.StatelessComponent<PortalMenuProps> = (props: PortalMenuProps) => {
+    return (
+        <div>
+            {_.map(menuItemEntries, entry => {
+                const selected = entry.to === props.selectedPath;
+                return (
+                    <MenuItem key={entry.to} className="py2" to={entry.to}>
+                        <PortalMenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={selected} />
+                    </MenuItem>
+                );
+            })}
+        </div>
+    );
+};
+
+interface PortalMenuItemLabelProps {
+    title: string;
+    iconName: string;
+    selected: boolean;
+}
+const PortalMenuItemLabel: React.StatelessComponent<PortalMenuItemLabelProps> = (props: PortalMenuItemLabelProps) => {
+    const styles: Styles = {
+        iconStyle: {
+            color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR,
+            fontSize: 20,
+        },
+        textStyle: {
+            color: DEFAULT_LABEL_COLOR,
+            fontWeight: props.selected ? 'bold' : 'normal',
+        },
+    };
+    return (
+        <div className="flex">
+            <div className="pr1 pl2">
+                <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} />
+            </div>
+            <div className="pl1" style={styles.textStyle}>
+                {props.title}
+            </div>
+        </div>
+    );
+};