Fix styling of portal menu

4 files changed, 37 insertions, 20 deletions

diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index 45f3cbafb..75c8ac6c2 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -1,9 +1,11 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { Menu } from 'ts/components/portal/menu';
+import { defaultMenuItemEntries, Menu } from 'ts/components/portal/menu';
 import { Identicon } from 'ts/components/ui/identicon';
+import { WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 const IDENTICON_DIAMETER = 45;
@@ -11,7 +13,7 @@ const BORDER_RADIUS = '50%';
 
 const styles: Styles = {
     root: {
-        backgroundColor: '#4A4A4A',
+        backgroundColor: colors.drawerMenuBackground,
         width: '100%',
         height: '100%',
     },
@@ -33,10 +35,16 @@ export interface DrawerMenuProps {
     userAddress?: string;
 }
 export const DrawerMenu = (props: DrawerMenuProps) => {
+    const relayerItemEntry = {
+        to: `${WebsitePaths.Portal}/`,
+        labelText: 'Relayer ecosystem',
+        iconName: 'zmdi-portable-wifi',
+    };
+    const menuItemEntries = _.concat(relayerItemEntry, defaultMenuItemEntries);
     return (
         <div style={styles.root}>
             <Header userAddress={props.userAddress} />
-            <Menu selectedPath={props.selectedPath} />
+            <Menu selectedPath={props.selectedPath} menuItemEntries={menuItemEntries} />
         </div>
     );
 };
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 3a4edc251..e8353a3b0 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -1,8 +1,9 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { 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 { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 
 export interface MenuTheme {
@@ -12,23 +13,20 @@ export interface MenuTheme {
     selectedIconColor: string;
     selectedBackgroundColor: string;
 }
-export interface MenuProps {
-    selectedPath?: string;
-    theme?: MenuTheme;
-}
 
-interface MenuItemEntry {
+export interface MenuItemEntry {
     to: string;
     labelText: string;
     iconName: string;
 }
 
-const menuItemEntries: MenuItemEntry[] = [
-    {
-        to: `${WebsitePaths.Portal}/`,
-        labelText: 'Relayer ecosystem',
-        iconName: 'zmdi-portable-wifi',
-    },
+export interface MenuProps {
+    selectedPath?: string;
+    theme?: MenuTheme;
+    menuItemEntries?: MenuItemEntry[];
+}
+
+export const defaultMenuItemEntries: MenuItemEntry[] = [
     {
         to: `${WebsitePaths.Portal}/account`,
         labelText: 'Account overview',
@@ -56,13 +54,13 @@ const DEFAULT_MENU_THEME: MenuTheme = {
     textColor: colors.white,
     iconColor: colors.white,
     selectedIconColor: colors.white,
-    selectedBackgroundColor: '#424242',
+    selectedBackgroundColor: colors.menuItemDefaultSelectedBackground,
 };
 
 export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
     return (
         <div>
-            {_.map(menuItemEntries, entry => {
+            {_.map(props.menuItemEntries, entry => {
                 const selected = entry.to === props.selectedPath;
                 return (
                     <MenuItem key={entry.to} to={entry.to}>
@@ -80,6 +78,7 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
 };
 Menu.defaultProps = {
     theme: DEFAULT_MENU_THEME,
+    menuItemEntries: defaultMenuItemEntries,
 };
 
 interface MenuItemLabelProps {
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a04c0878f..898790272 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -13,7 +13,7 @@ import { EthWrappers } from 'ts/components/eth_wrappers';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
 import { BackButton } from 'ts/components/portal/back_button';
 import { Loading } from 'ts/components/portal/loading';
-import { Menu } from 'ts/components/portal/menu';
+import { Menu, MenuTheme } from 'ts/components/portal/menu';
 import { Section } from 'ts/components/portal/section';
 import { TextHeader } from 'ts/components/portal/text_header';
 import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
@@ -89,6 +89,7 @@ enum TokenManagementState {
 const THROTTLE_TIMEOUT = 100;
 const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
 const LEFT_COLUMN_WIDTH = 346;
+const MENU_PADDING_LEFT = 185;
 
 const styles: Styles = {
     root: {
@@ -259,10 +260,17 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         }
     }
     private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
+        const menuTheme: MenuTheme = {
+            paddingLeft: MENU_PADDING_LEFT,
+            textColor: colors.darkerGrey,
+            iconColor: colors.darkerGrey,
+            selectedIconColor: colors.yellow800,
+            selectedBackgroundColor: 'transparent',
+        };
         return (
             <Section
                 header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />}
-                body={<Menu selectedPath={routeComponentProps.location.pathname} />}
+                body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />}
             />
         );
     }
diff --git a/packages/website/ts/utils/colors.ts b/packages/website/ts/utils/colors.ts
index 34db3f77e..5ffdd6ba7 100644
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/website/ts/utils/colors.ts
@@ -9,6 +9,8 @@ const appColors = {
     allowanceToggleOffTrack: '#adadad',
     allowanceToggleOnTrack: sharedColors.mediumBlue,
     wrapEtherConfirmationButton: sharedColors.mediumBlue,
+    drawerMenuBackground: '#4a4a4a',
+    menuItemDefaultSelectedBackground: '#424242',
 };
 
 export const colors = {