diff options
| -rw-r--r-- | packages/website/ts/components/inputs/allowance_state_toggle.tsx | 21 | ||||
| -rw-r--r-- | packages/website/ts/components/ui/text.tsx | 3 |
2 files changed, 16 insertions, 8 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx index ce439e147..a812ead5d 100644 --- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx +++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx @@ -5,6 +5,7 @@ import ReactTooltip = require('react-tooltip'); import { Blockchain } from 'ts/blockchain'; import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view'; import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { Dispatcher } from 'ts/redux/dispatcher'; import { BalanceErrs, Token, TokenState } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; @@ -55,12 +56,13 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr const tooltipId = `tooltip-id-${this.props.token.symbol}`; return ( <Container cursor="pointer"> - <ReactTooltip id={tooltipId}>{this._getTooltipContent()}</ReactTooltip> + <ReactTooltip effect="solid" offset={{ top: 3 }} id={tooltipId}> + {this._getTooltipContent()} + </ReactTooltip> <div data-tip={true} data-for={tooltipId} data-place="right" - data-effect="solid" onClick={this._onToggleAllowanceAsync.bind(this)} > <AllowanceStateView allowanceState={this.state.allowanceState} /> @@ -76,7 +78,6 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr nextTokenState.isLoaded !== prevTokenState.isLoaded ) { const tokenState = nextProps.tokenState; - const allowance = tokenState.allowance; this.setState({ prevTokenState: tokenState, allowanceState: AllowanceStateToggle._getAllowanceState(nextTokenState), @@ -88,18 +89,22 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr switch (this.state.allowanceState) { case AllowanceState.Loading: // TODO: support both awaiting confirmation and awaiting transaction. - return 'Please confirm in MetaMask'; + return ( + <Text noWrap={true} fontColor="white"> + Please confirm in MetaMask + </Text> + ); case AllowanceState.Locked: return ( - <span> + <Text noWrap={true} fontColor="white"> Click to enable <b>{symbol}</b> for trading - </span> + </Text> ); case AllowanceState.Unlocked: return ( - <span> + <Text noWrap={true} fontColor="white"> <b>{symbol}</b> is available for trading - </span> + </Text> ); default: return null; diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx index 315f72854..72bee8c0a 100644 --- a/packages/website/ts/components/ui/text.tsx +++ b/packages/website/ts/components/ui/text.tsx @@ -18,6 +18,7 @@ export interface TextProps { textDecorationLine?: string; onClick?: (event: React.MouseEvent<HTMLElement>) => void; hoverColor?: string; + noWrap?: boolean; } const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( @@ -37,6 +38,7 @@ export const Text = styled(PlainText)` ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; ${props => (props.onClick ? 'cursor: pointer' : '')}; transition: color 0.5s ease; + ${props => (props.noWrap ? 'white-space: nowrap' : '')}; &:hover { ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')}; } @@ -50,6 +52,7 @@ Text.defaultProps = { lineHeight: '1.5em', textDecorationLine: 'none', Tag: 'div', + noWrap: false, }; Text.displayName = 'Text'; |