aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx60
-rw-r--r--packages/website/ts/components/portal/menu.tsx59
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
3 files changed, 106 insertions, 16 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>
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 7d5d05c9f..076f90b22 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
import ReactTooltip = require('react-tooltip');
import { Blockchain } from 'ts/blockchain';
import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
+import { DrawerMenu } from 'ts/components/portal/drawer_menu';
import { SidebarHeader } from 'ts/components/sidebar_header';
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
@@ -289,7 +290,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
openSecondary={true}
onRequestChange={this._onMenuButtonClick.bind(this)}
>
- <div />
+ <DrawerMenu selectedPath={this.props.location.pathname} userAddress={this.props.userAddress} />
</Drawer>
);
}