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

Improve wallet layout using flexbox

1 files changed, 63 insertions, 0 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,
+        });
+    }
+}