Add custom styling for drawer

2 files changed, 104 insertions, 15 deletions

diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
new file mode 100644
index 000000000..45f3cbafb
--- /dev/null
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -0,0 +1,60 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { Menu } from 'ts/components/portal/menu';
+import { Identicon } from 'ts/components/ui/identicon';
+import { utils } from 'ts/utils/utils';
+
+const IDENTICON_DIAMETER = 45;
+const BORDER_RADIUS = '50%';
+
+const styles: Styles = {
+    root: {
+        backgroundColor: '#4A4A4A',
+        width: '100%',
+        height: '100%',
+    },
+    identicon: {
+        borderWidth: 3,
+        borderStyle: 'solid',
+        borderColor: colors.white,
+        borderRadius: BORDER_RADIUS,
+        MozBorderRadius: BORDER_RADIUS,
+        WebkitBorderRadius: BORDER_RADIUS,
+    },
+    userAddress: {
+        color: colors.white,
+    },
+};
+
+export interface DrawerMenuProps {
+    selectedPath?: string;
+    userAddress?: string;
+}
+export const DrawerMenu = (props: DrawerMenuProps) => {
+    return (
+        <div style={styles.root}>
+            <Header userAddress={props.userAddress} />
+            <Menu selectedPath={props.selectedPath} />
+        </div>
+    );
+};
+
+interface HeaderProps {
+    userAddress?: string;
+}
+const Header = (props: HeaderProps) => {
+    return (
+        <div className="flex flex-center py4">
+            <div className="flex flex-column mx-auto">
+                <Identicon address={props.userAddress} diameter={IDENTICON_DIAMETER} style={styles.identicon} />
+                {!_.isUndefined(props.userAddress) && (
+                    <div className="pt2" style={styles.userAddress}>
+                        {utils.getAddressBeginAndEnd(props.userAddress)}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 9014d8d42..3a4edc251 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -5,8 +5,16 @@ import { MenuItem } from 'ts/components/ui/menu_item';
 import { Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 
+export interface MenuTheme {
+    paddingLeft: number;
+    textColor: string;
+    iconColor: string;
+    selectedIconColor: string;
+    selectedBackgroundColor: string;
+}
 export interface MenuProps {
     selectedPath?: string;
+    theme?: MenuTheme;
 }
 
 interface MenuItemEntry {
@@ -17,6 +25,11 @@ interface MenuItemEntry {
 
 const menuItemEntries: MenuItemEntry[] = [
     {
+        to: `${WebsitePaths.Portal}/`,
+        labelText: 'Relayer ecosystem',
+        iconName: 'zmdi-portable-wifi',
+    },
+    {
         to: `${WebsitePaths.Portal}/account`,
         labelText: 'Account overview',
         iconName: 'zmdi-balance-wallet',
@@ -38,49 +51,65 @@ const menuItemEntries: MenuItemEntry[] = [
     },
 ];
 
-const DEFAULT_LABEL_COLOR = colors.darkerGrey;
-const DEFAULT_ICON_COLOR = colors.darkerGrey;
-const SELECTED_ICON_COLOR = colors.yellow900;
-
-const LEFT_PADDING = 185;
+const DEFAULT_MENU_THEME: MenuTheme = {
+    paddingLeft: 30,
+    textColor: colors.white,
+    iconColor: colors.white,
+    selectedIconColor: colors.white,
+    selectedBackgroundColor: '#424242',
+};
 
 export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
     return (
-        <div style={{ paddingLeft: LEFT_PADDING }}>
+        <div>
             {_.map(menuItemEntries, entry => {
                 const selected = entry.to === props.selectedPath;
                 return (
-                    <MenuItem key={entry.to} className="py2" to={entry.to}>
-                        <MenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={selected} />
+                    <MenuItem key={entry.to} to={entry.to}>
+                        <MenuItemLabel
+                            title={entry.labelText}
+                            iconName={entry.iconName}
+                            selected={selected}
+                            theme={props.theme}
+                        />
                     </MenuItem>
                 );
             })}
         </div>
     );
 };
+Menu.defaultProps = {
+    theme: DEFAULT_MENU_THEME,
+};
 
 interface MenuItemLabelProps {
     title: string;
     iconName: string;
     selected: boolean;
+    theme: MenuTheme;
 }
 const MenuItemLabel: React.StatelessComponent<MenuItemLabelProps> = (props: MenuItemLabelProps) => {
     const styles: Styles = {
-        iconStyle: {
-            color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR,
+        root: {
+            backgroundColor: props.selected ? props.theme.selectedBackgroundColor : undefined,
+            paddingLeft: props.theme.paddingLeft,
+        },
+        icon: {
+            color: props.selected ? props.theme.selectedIconColor : props.theme.iconColor,
             fontSize: 20,
         },
-        textStyle: {
-            color: DEFAULT_LABEL_COLOR,
+        text: {
+            color: props.theme.textColor,
             fontWeight: props.selected ? 'bold' : 'normal',
+            fontSize: 16,
         },
     };
     return (
-        <div className="flex">
+        <div className="flex py2" style={styles.root}>
             <div className="pr1">
-                <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} />
+                <i style={styles.icon} className={`zmdi ${props.iconName}`} />
             </div>
-            <div className="pl1" style={styles.textStyle}>
+            <div className="pl1" style={styles.text}>
                 {props.title}
             </div>
         </div>