Merge pull request #603 from 0xProject/feature/website/wallet-flex-box

Improve wallet layout using flexbox

2 files changed, 79 insertions, 9 deletions

diff --git a/packages/website/ts/components/ui/icon_button.tsx b/packages/website/ts/components/ui/icon_button.tsx
new file mode 100644
index 000000000..2f5172f05
--- /dev/null
+++ b/packages/website/ts/components/ui/icon_button.tsx
@@ -0,0 +1,63 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+export interface IconButtonProps {
+    iconName: string;
+    labelText?: string;
+    onClick: () => void;
+    color?: string;
+}
+interface IconButtonState {
+    isHovering: boolean;
+}
+export class IconButton extends React.Component<IconButtonProps, IconButtonState> {
+    public static defaultProps: Partial<IconButtonProps> = {
+        onClick: _.noop,
+        labelText: '',
+        color: colors.mediumBlue,
+    };
+    public constructor(props: IconButtonProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const styles: Styles = {
+            root: {
+                cursor: 'pointer',
+                opacity: this.state.isHovering ? 0.5 : 1,
+            },
+            icon: {
+                color: this.props.color,
+                fontSize: 20,
+            },
+            label: {
+                color: this.props.color,
+                fontSize: 10,
+            },
+        };
+        return (
+            <div
+                className="flex items-center py2"
+                onClick={this.props.onClick}
+                onMouseEnter={this._onToggleHover.bind(this, true)}
+                onMouseLeave={this._onToggleHover.bind(this, false)}
+                style={styles.root}
+            >
+                <i style={styles.icon} className={`zmdi ${this.props.iconName}`} />
+                {!_.isEmpty(this.props.labelText) && (
+                    <div className="pl1" style={styles.label}>
+                        {this.props.labelText}
+                    </div>
+                )}
+            </div>
+        );
+    }
+    private _onToggleHover(isHovering: boolean): void {
+        this.setState({
+            isHovering,
+        });
+    }
+}
diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx
index a9ad567ef..0875cc56b 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -6,6 +6,7 @@ import { Token } from 'ts/types';
 interface TokenIconProps {
     token: Token;
     diameter: number;
+    link?: string;
 }
 
 interface TokenIconState {}
@@ -14,14 +15,20 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
     public render(): React.ReactNode {
         const token = this.props.token;
         const diameter = this.props.diameter;
-        return (
-            <div>
-                {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
-                    <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
-                ) : (
-                    <Identicon address={token.address} diameter={diameter} />
-                )}
-            </div>
-        );
+        const icon =
+            token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+                <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+            ) : (
+                <Identicon address={token.address} diameter={diameter} />
+            );
+        if (_.isEmpty(this.props.link)) {
+            return icon;
+        } else {
+            return (
+                <a href={this.props.link} target="_blank" style={{ textDecoration: 'none' }}>
+                    {icon}
+                </a>
+            );
+        }
     }
 }