aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-18 08:27:31 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-19 02:35:13 +0800
commitb9ca055586ee1bdc89684b173186c92bd2f97e9f (patch)
tree9673e0eec156fecdf7758234f5c83b3e2b8874c5 /packages/website/ts
parent9ce7be050a04cde0ab5f6e894c70f6f63b0c1fd4 (diff)
downloaddexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar.gz
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar.bz2
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar.lz
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar.xz
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.tar.zst
dexon-sol-tools-b9ca055586ee1bdc89684b173186c92bd2f97e9f.zip
Fix styling of portal menu
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/portal/drawer_menu.tsx16
-rw-r--r--packages/website/ts/components/portal/menu.tsx27
-rw-r--r--packages/website/ts/components/portal/portal.tsx12
-rw-r--r--packages/website/ts/utils/colors.ts2
4 files changed, 37 insertions, 20 deletions
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 (
<div style={styles.root}>
<Header userAddress={props.userAddress} />
- <Menu selectedPath={props.selectedPath} />
+ <Menu selectedPath={props.selectedPath} menuItemEntries={menuItemEntries} />
</div>
);
};
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<MenuProps> = (props: MenuProps) => {
return (
<div>
- {_.map(menuItemEntries, entry => {
+ {_.map(props.menuItemEntries, entry => {
const selected = entry.to === props.selectedPath;
return (
<MenuItem key={entry.to} to={entry.to}>
@@ -80,6 +78,7 @@ export const Menu: React.StatelessComponent<MenuProps> = (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<PortalProps, PortalState> {
}
}
private _renderMenu(routeComponentProps: RouteComponentProps<any>): React.ReactNode {
+ const menuTheme: MenuTheme = {
+ paddingLeft: MENU_PADDING_LEFT,
+ textColor: colors.darkerGrey,
+ iconColor: colors.darkerGrey,
+ selectedIconColor: colors.yellow800,
+ selectedBackgroundColor: 'transparent',
+ };
return (
<Section
header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />}
- body={<Menu selectedPath={routeComponentProps.location.pathname} />}
+ body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />}
/>
);
}
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 = {