diff options
| -rw-r--r-- | packages/website/ts/components/portal/drawer_menu.tsx | 60 | ||||
| -rw-r--r-- | packages/website/ts/components/portal/menu.tsx | 59 | ||||
| -rw-r--r-- | packages/website/ts/components/top_bar/top_bar.tsx | 3 |
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> ); } |