diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-21 05:03:56 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-06-22 08:40:33 +0800 |
commit | bd03151c2a10c680bb8a12e0bdd73590381aa4ca (patch) | |
tree | 2190cac89a113d82c9a8fb3fd573bf5d208c77b0 /packages/website/ts/components | |
parent | 7c0fdc7ecf170e17aa27cb88a2b62a02ea49ca41 (diff) | |
download | dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar.gz dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar.bz2 dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar.lz dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar.xz dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.tar.zst dexon-0x-contracts-bd03151c2a10c680bb8a12e0bdd73590381aa4ca.zip |
Various relayer grid ui polish items
Diffstat (limited to 'packages/website/ts/components')
4 files changed, 37 insertions, 41 deletions
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx index 11b3b43f4..cd88a3f95 100644 --- a/packages/website/ts/components/portal/portal.tsx +++ b/packages/website/ts/components/portal/portal.tsx @@ -551,7 +551,7 @@ export class Portal extends React.Component<PortalProps, PortalState> { private _renderRelayerIndexSection(): React.ReactNode { return ( <Section - header={<TextHeader labelText="Explore 0x Relayers" />} + header={<TextHeader labelText="0x Relayers" />} body={<RelayerIndex networkId={this.props.networkId} screenWidth={this.props.screenWidth} />} /> ); diff --git a/packages/website/ts/components/portal/text_header.tsx b/packages/website/ts/components/portal/text_header.tsx index 4aabd47d0..853da3a29 100644 --- a/packages/website/ts/components/portal/text_header.tsx +++ b/packages/website/ts/components/portal/text_header.tsx @@ -1,21 +1,16 @@ -import { Styles } from '@0xproject/react-shared'; +import { colors } from '@0xproject/react-shared'; import * as React from 'react'; +import { Text } from 'ts/components/ui/text'; + export interface TextHeaderProps { labelText: string; } -const styles: Styles = { - title: { - fontWeight: 'bold', - fontSize: 20, - }, -}; - export const TextHeader = (props: TextHeaderProps) => { return ( - <div className="py3" style={styles.title}> + <Text className="pt3 pb2" fontWeight="bold" fontSize="16px" fontColor={colors.darkestGrey}> {props.labelText} - </div> + </Text> ); }; diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx index 23860856b..7f2df325e 100644 --- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx +++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx @@ -1,6 +1,6 @@ import { constants as sharedConstants, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; -import { GridTile } from 'material-ui/GridList'; +import { GridTile as PlainGridTile } from 'material-ui/GridList'; import * as React from 'react'; import { analytics } from 'ts/utils/analytics'; @@ -9,7 +9,9 @@ import { Container } from 'ts/components/ui/container'; import { Image } from 'ts/components/ui/image'; import { Island } from 'ts/components/ui/island'; import { colors } from 'ts/style/colors'; +import { styled } from 'ts/style/theme'; import { WebsiteBackendRelayerInfo } from 'ts/types'; +import { utils } from 'ts/utils/utils'; export interface RelayerGridTileProps { relayerInfo: WebsiteBackendRelayerInfo; @@ -21,24 +23,14 @@ const styles: Styles = { boxSizing: 'border-box', }, innerDiv: { - padding: 6, height: '100%', boxSizing: 'border-box', }, header: { height: '50%', width: '100%', - borderBottomRightRadius: 4, - borderBottomLeftRadius: 4, - borderTopRightRadius: 4, - borderTopLeftRadius: 4, - borderWidth: 1, - borderStyle: 'solid', - borderColor: colors.walletBorder, }, body: { - paddingLeft: 6, - paddingRight: 6, height: '50%', width: '100%', boxSizing: 'border-box', @@ -69,7 +61,10 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( const weeklyTxnVolume = props.relayerInfo.weeklyTxnVolume; const networkName = sharedConstants.NETWORK_NAME_BY_ID[props.networkId]; const eventLabel = `${props.relayerInfo.name}-${networkName}`; - const trackRelayerClick = () => analytics.logEvent('Portal', 'Relayer Click', eventLabel); + const onClick = () => { + analytics.logEvent('Portal', 'Relayer Click', eventLabel); + utils.openUrl(link); + }; const headerImageUrl = props.relayerInfo.logoImgUrl; const headerBackgroundColor = !_.isUndefined(headerImageUrl) && !_.isUndefined(props.relayerInfo.primaryColor) @@ -77,22 +72,17 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( : FALLBACK_PRIMARY_COLOR; return ( <Island style={styles.root} Component={GridTile}> - <div style={styles.innerDiv}> - <a href={link} target="_blank" style={{ textDecoration: 'none' }} onClick={trackRelayerClick}> - <div - className="flex items-center" - style={{ ...styles.header, backgroundColor: headerBackgroundColor }} - > - <Image - className="mx-auto" - src={props.relayerInfo.logoImgUrl} - fallbackSrc={FALLBACK_IMG_SRC} - height={RELAYER_ICON_HEIGHT} - /> - </div> - </a> - <div style={styles.body}> - <div className="py1" style={styles.relayerNameLabel}> + <div style={styles.innerDiv} onClick={onClick}> + <div className="flex items-center" style={{ ...styles.header, backgroundColor: headerBackgroundColor }}> + <Image + className="mx-auto" + src={props.relayerInfo.logoImgUrl} + fallbackSrc={FALLBACK_IMG_SRC} + height={RELAYER_ICON_HEIGHT} + /> + </div> + <div className="p2" style={styles.body}> + <div className="pb1" style={styles.relayerNameLabel}> {props.relayerInfo.name} </div> <Section titleText="Weekly Trade Volume"> @@ -111,6 +101,14 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = ( ); }; +export const GridTile = styled(PlainGridTile)` + cursor: pointer; + transition: transform 0.2s ease; + &:hover { + transform: translate(0px, -3px); + } +`; + interface SectionProps { titleText: string; children?: React.ReactNode; diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx index b599e7123..f544fc924 100644 --- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx +++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx @@ -70,7 +70,10 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { }; const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; const eventLabel = `${this.props.tokenInfo.symbol}-${networkName}`; - const trackTokenClick = () => analytics.logEvent('Portal', 'Token Click', eventLabel); + const onClick = (event: React.MouseEvent<HTMLElement>) => { + event.stopPropagation(); + analytics.logEvent('Portal', 'Token Click', eventLabel); + }; return ( <a href={tokenLinkFromToken(this.props.tokenInfo, this.props.networkId)} @@ -78,7 +81,7 @@ class TokenLink extends React.Component<TokenLinkProps, TokenLinkState> { style={style} onMouseEnter={this._onToggleHover.bind(this, true)} onMouseLeave={this._onToggleHover.bind(this, false)} - onClick={trackTokenClick} + onClick={onClick} > {this.props.tokenInfo.symbol} </a> |