diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index 45f3cbafbd..75c8ac6c2a 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 (
-
+
);
};
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 3a4edc2517..e8353a3b02 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 = (props: MenuProps) => {
return (
- {_.map(menuItemEntries, entry => {
+ {_.map(props.menuItemEntries, entry => {
const selected = entry.to === props.selectedPath;
return (