ProviderDisplay changes

2 files changed, 28 insertions, 37 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 =
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index eecec92fb..8c842d2a5 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -52,14 +52,6 @@ interface TopBarState {
 }
 
 const styles: Styles = {
-    address: {
-        marginRight: 12,
-        overflow: 'hidden',
-        paddingTop: 4,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        width: 70,
-    },
     topBar: {
         backgroundColor: colors.white,
         width: '100%',
@@ -258,7 +250,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         </div>
                     )}
                     {this.props.blockchainIsLoaded && (
-                        <div className="sm-hide xs-hide col col-5">
+                        <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}>
                             <ProviderDisplay
                                 dispatcher={this.props.dispatcher}
                                 userAddress={this.props.userAddress}
@@ -449,21 +441,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             </div>
         );
     }
-    private _renderUser() {
-        const userAddress = this.props.userAddress;
-        const identiconDiameter = 26;
-        return (
-            <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}>
-                <div style={styles.address} data-tip={true} data-for="userAddressTooltip">
-                    {!_.isEmpty(userAddress) ? userAddress : ''}
-                </div>
-                <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
-                <div>
-                    <Identicon address={userAddress} diameter={identiconDiameter} />
-                </div>
-            </div>
-        );
-    }
     private _onMenuButtonClick() {
         this.setState({
             isDrawerOpen: !this.state.isDrawerOpen,