diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-04-24 16:04:57 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-04-24 16:11:01 +0800 |
commit | b8c611de2b82657a274c55007ffc5d72807eae7f (patch) | |
tree | 2150f5eaba5dbd09abef59c22a0436970850efe3 /packages/website/ts/components/top_bar/provider_display.tsx | |
parent | 9c827a0298df3e54e8b18e9f38b1d4027d2b5d83 (diff) | |
download | dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar.gz dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar.bz2 dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar.lz dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar.xz dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.tar.zst dexon-sol-tools-b8c611de2b82657a274c55007ffc5d72807eae7f.zip |
ProviderDisplay changes
Diffstat (limited to 'packages/website/ts/components/top_bar/provider_display.tsx')
-rw-r--r-- | packages/website/ts/components/top_bar/provider_display.tsx | 40 |
1 files changed, 27 insertions, 13 deletions
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 221c34f8c..fa5609014 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -1,4 +1,4 @@ -import { colors } from '@0xproject/react-shared'; +import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; @@ -11,9 +11,9 @@ import { ProviderType } from 'ts/types'; import { constants } from 'ts/utils/constants'; import { utils } from 'ts/utils/utils'; -const IDENTICON_DIAMETER = 32; +const IDENTICON_DIAMETER = 24; -interface ProviderDisplayProps { +export interface ProviderDisplayProps { dispatcher: Dispatcher; userAddress: string; networkId: number; @@ -25,6 +25,18 @@ interface ProviderDisplayProps { interface ProviderDisplayState {} +const styles: Styles = { + root: { + height: 24, + backgroundColor: colors.white, + borderBottomRightRadius: 24, + borderBottomLeftRadius: 24, + borderTopRightRadius: 24, + borderTopLeftRadius: 24, + boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, + }, +}; + export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> { public render() { const isAddressAvailable = !_.isEmpty(this.props.userAddress); @@ -40,21 +52,23 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi : 'Connect a wallet'; const providerTitle = this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S'; + const isProviderMetamask = providerTitle === 'Metamask'; const hoverActiveNode = ( - <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}> + <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}> <div> <Identicon address={this.props.userAddress} diameter={IDENTICON_DIAMETER} /> </div> - <div style={{ marginLeft: 12, paddingTop: 1 }}> - <div style={{ fontSize: 12, color: colors.amber800 }}>{providerTitle}</div> - <div style={{ fontSize: 14 }}>{displayAddress}</div> - </div> - <div - style={{ borderLeft: `1px solid ${colors.grey300}`, marginLeft: 17, paddingTop: 1 }} - className="px2" - > - <i style={{ fontSize: 30, color: colors.grey300 }} className="zmdi zmdi zmdi-chevron-down" /> + <div style={{ marginLeft: 12, paddingTop: 3 }}> + <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayAddress}</div> </div> + {isProviderMetamask && ( + <div style={{ marginLeft: 16 }}> + <img + src="/images/metamask_icon.png" + style={{ width: IDENTICON_DIAMETER, height: IDENTICON_DIAMETER }} + /> + </div> + )} </div> ); const hasInjectedProvider = |