From b9ca055586ee1bdc89684b173186c92bd2f97e9f Mon Sep 17 00:00:00 2001 From: Brandon Millman Date: Thu, 17 May 2018 17:27:31 -0700 Subject: Fix styling of portal menu --- .../website/ts/components/portal/drawer_menu.tsx | 16 +++++++++---- packages/website/ts/components/portal/menu.tsx | 27 +++++++++++----------- packages/website/ts/components/portal/portal.tsx | 12 ++++++++-- packages/website/ts/utils/colors.ts | 2 ++ 4 files changed, 37 insertions(+), 20 deletions(-) (limited to 'packages/website') 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 (
- +
); }; 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 = (props: MenuProps) => { return (
- {_.map(menuItemEntries, entry => { + {_.map(props.menuItemEntries, entry => { const selected = entry.to === props.selectedPath; return ( @@ -80,6 +78,7 @@ export const Menu: React.StatelessComponent = (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 { } } private _renderMenu(routeComponentProps: RouteComponentProps): React.ReactNode { + const menuTheme: MenuTheme = { + paddingLeft: MENU_PADDING_LEFT, + textColor: colors.darkerGrey, + iconColor: colors.darkerGrey, + selectedIconColor: colors.yellow800, + selectedBackgroundColor: 'transparent', + }; return (
} - body={} + body={} /> ); } 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 = { -- cgit v1.2.3