diff options
author | Fabio Berger <me@fabioberger.com> | 2017-11-28 00:05:47 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-28 00:05:47 +0800 |
commit | 48b3d8526560d389e74beb12bbd64b7be6e9268f (patch) | |
tree | 00ae6e24314793cd303b154ede4fe4f55c654e84 /packages/website/ts/components/ui/swap_icon.tsx | |
parent | b5ce876327fe6443364837ea65cf28ec0e371949 (diff) | |
parent | ecfee00feca331ee1efa55165471d79774cb03d2 (diff) | |
download | dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar.gz dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar.bz2 dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar.lz dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar.xz dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.tar.zst dexon-sol-tools-48b3d8526560d389e74beb12bbd64b7be6e9268f.zip |
Merge pull request #237 from 0xProject/addWebsite
Add Website to Mono Repo
Diffstat (limited to 'packages/website/ts/components/ui/swap_icon.tsx')
-rw-r--r-- | packages/website/ts/components/ui/swap_icon.tsx | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx new file mode 100644 index 000000000..89bb33d55 --- /dev/null +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -0,0 +1,46 @@ +import * as _ from 'lodash'; +import * as React from 'react'; +import {constants} from 'ts/utils/constants'; +import {colors} from 'material-ui/styles'; + +interface SwapIconProps { + swapTokensFn: () => void; +} + +interface SwapIconState { + isHovering: boolean; +} + +export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> { + public constructor(props: SwapIconProps) { + super(props); + this.state = { + isHovering: false, + }; + } + public render() { + const swapStyles = { + color: this.state.isHovering ? colors.amber600 : colors.amber800, + fontSize: 50, + }; + return ( + <div + className="mx-auto pt4" + style={{cursor: 'pointer', height: 50, width: 37.5}} + onClick={this.props.swapTokensFn} + onMouseEnter={this.onToggleHover.bind(this, true)} + onMouseLeave={this.onToggleHover.bind(this, false)} + > + <i + style={swapStyles} + className="zmdi zmdi-swap" + /> + </div> + ); + } + private onToggleHover(isHovering: boolean) { + this.setState({ + isHovering, + }); + } +} |