aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorBrandon Millman <brandon.millman@gmail.com>2018-05-11 07:29:10 +0800
committerBrandon Millman <brandon.millman@gmail.com>2018-05-18 02:02:55 +0800
commit55d1228abb308e27c913b0f717bac7c4395ec08c (patch)
tree30ea080c6c40c4a8727f6469c1599ae79874b29c /packages/website/ts/components
parent9e76d2ca63090e28379688505e5e179ec642d3b1 (diff)
downloaddexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar.gz
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar.bz2
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar.lz
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar.xz
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.tar.zst
dexon-sol-tools-55d1228abb308e27c913b0f717bac7c4395ec08c.zip
Implement new menu styling
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/portal/portal.tsx8
-rw-r--r--packages/website/ts/components/portal/portal_menu.tsx91
2 files changed, 95 insertions, 4 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index e6a92d9a8..d6bc82587 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -3,7 +3,7 @@ import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import * as React from 'react';
import * as DocumentTitle from 'react-document-title';
-import { Route, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { Blockchain } from 'ts/blockchain';
import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
@@ -12,7 +12,7 @@ import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_
import { EthWrappers } from 'ts/components/eth_wrappers';
import { FillOrder } from 'ts/components/fill_order';
import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
+import { PortalMenu } from 'ts/components/portal/portal_menu';
import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
import { TokenBalances } from 'ts/components/token_balances';
import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
@@ -267,8 +267,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</div>
);
}
- private _renderMenu() {
- return <LegacyPortalMenu menuItemStyle={{ color: colors.darkerGrey }} />;
+ private _renderMenu(routeComponentProps: RouteComponentProps<any>) {
+ return <PortalMenu selectedPath={routeComponentProps.location.pathname} />;
}
private _renderWallet() {
const allTokens = _.values(this.props.tokenByAddress);
diff --git a/packages/website/ts/components/portal/portal_menu.tsx b/packages/website/ts/components/portal/portal_menu.tsx
new file mode 100644
index 000000000..33835fd98
--- /dev/null
+++ b/packages/website/ts/components/portal/portal_menu.tsx
@@ -0,0 +1,91 @@
+import { colors, 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 { configs } from 'ts/utils/configs';
+
+export interface PortalMenuProps {
+ selectedPath?: string;
+}
+
+interface MenuItemEntry {
+ to: string;
+ labelText: string;
+ iconName: string;
+}
+
+const menuItemEntries: MenuItemEntry[] = [
+ {
+ to: `${WebsitePaths.Portal}`,
+ labelText: 'Generate order',
+ iconName: 'zmdi-arrow-right-top',
+ },
+ {
+ to: `${WebsitePaths.Portal}/fill`,
+ labelText: 'Fill order',
+ iconName: 'zmdi-arrow-left-bottom',
+ },
+ {
+ to: `${WebsitePaths.Portal}/balances`,
+ labelText: 'Balances',
+ iconName: 'zmdi-balance-wallet',
+ },
+ {
+ to: `${WebsitePaths.Portal}/trades`,
+ labelText: 'Trade History',
+ iconName: 'zmdi-format-list-bulleted',
+ },
+ {
+ to: `${WebsitePaths.Portal}/weth`,
+ labelText: 'Wrap ETH',
+ iconName: 'zmdi-circle-o',
+ },
+];
+
+const DEFAULT_LABEL_COLOR = colors.darkerGrey;
+const DEFAULT_ICON_COLOR = colors.darkerGrey;
+const SELECTED_ICON_COLOR = colors.yellow800;
+
+export const PortalMenu: React.StatelessComponent<PortalMenuProps> = (props: PortalMenuProps) => {
+ return (
+ <div>
+ {_.map(menuItemEntries, entry => {
+ const selected = entry.to === props.selectedPath;
+ return (
+ <MenuItem key={entry.to} className="py2" to={entry.to}>
+ <PortalMenuItemLabel title={entry.labelText} iconName={entry.iconName} selected={selected} />
+ </MenuItem>
+ );
+ })}
+ </div>
+ );
+};
+
+interface PortalMenuItemLabelProps {
+ title: string;
+ iconName: string;
+ selected: boolean;
+}
+const PortalMenuItemLabel: React.StatelessComponent<PortalMenuItemLabelProps> = (props: PortalMenuItemLabelProps) => {
+ const styles: Styles = {
+ iconStyle: {
+ color: props.selected ? SELECTED_ICON_COLOR : DEFAULT_ICON_COLOR,
+ fontSize: 20,
+ },
+ textStyle: {
+ color: DEFAULT_LABEL_COLOR,
+ fontWeight: props.selected ? 'bold' : 'normal',
+ },
+ };
+ return (
+ <div className="flex">
+ <div className="pr1 pl2">
+ <i style={styles.iconStyle} className={`zmdi ${props.iconName}`} />
+ </div>
+ <div className="pl1" style={styles.textStyle}>
+ {props.title}
+ </div>
+ </div>
+ );
+};