aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/icon_button.tsx
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-05-24 08:03:54 +0800
committerGitHub <noreply@github.com>2018-05-24 08:03:54 +0800
commit2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f (patch)
tree98ff18202c0d230a556425145221ce56aa897efa /packages/website/ts/components/ui/icon_button.tsx
parent71266c0220ad14908c54b7e39e3d0a0715b35599 (diff)
parent0801457ff02ac1ab16693be8bfb049fe3c284253 (diff)
downloaddexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar.gz
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar.bz2
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar.lz
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar.xz
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.tar.zst
dexon-sol-tools-2f1a4042bf924cf5d07d724d5d1a1c0a2c181f4f.zip
Merge pull request #603 from 0xProject/feature/website/wallet-flex-box
Improve wallet layout using flexbox
Diffstat (limited to 'packages/website/ts/components/ui/icon_button.tsx')
-rw-r--r--packages/website/ts/components/ui/icon_button.tsx63
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,
+ });
+ }
+}