diff options
Diffstat (limited to 'packages/website/ts/components/ui')
11 files changed, 19 insertions, 94 deletions
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx index 71d2388f2..bc65d0f0f 100644 --- a/packages/website/ts/components/ui/alert.tsx +++ b/packages/website/ts/components/ui/alert.tsx @@ -1,8 +1,6 @@ -import {colors} from 'material-ui/styles'; import * as React from 'react'; import {AlertTypes} from 'ts/types'; - -const CUSTOM_GREEN = 'rgb(137, 199, 116)'; +import {colors} from 'ts/utils/colors'; interface AlertProps { type: AlertTypes; @@ -12,8 +10,8 @@ interface AlertProps { export function Alert(props: AlertProps) { const isAlert = props.type === AlertTypes.ERROR; const errMsgStyles = { - background: isAlert ? colors.red200 : CUSTOM_GREEN, - color: 'white', + background: isAlert ? colors.red200 : colors.lightestGreen, + color: colors.white, marginTop: 10, padding: 4, paddingLeft: 8, diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx index 5f8e6a060..3c50430df 100644 --- a/packages/website/ts/components/ui/copy_icon.tsx +++ b/packages/website/ts/components/ui/copy_icon.tsx @@ -1,9 +1,9 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; import * as CopyToClipboard from 'react-copy-to-clipboard'; import * as ReactDOM from 'react-dom'; import ReactTooltip = require('react-tooltip'); +import {colors} from 'ts/utils/colors'; interface CopyIconProps { data: string; diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx index 041688a9d..55347cb98 100644 --- a/packages/website/ts/components/ui/drop_down_menu_item.tsx +++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx @@ -2,9 +2,9 @@ import * as _ from 'lodash'; import Menu from 'material-ui/Menu'; import Popover from 'material-ui/Popover'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300; -const CUSTOM_LIGHT_GRAY = '#848484'; const DEFAULT_STYLE = { fontSize: 14, }; @@ -72,7 +72,7 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro onMouseEnter={this.onHover.bind(this)} onMouseLeave={this.onHoverOff.bind(this)} > - <Menu style={{color: CUSTOM_LIGHT_GRAY}}> + <Menu style={{color: colors.grey}}> {this.props.subMenuItems} </Menu> </div> diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx index b3bc0bc59..d56840689 100644 --- a/packages/website/ts/components/ui/ethereum_address.tsx +++ b/packages/website/ts/components/ui/ethereum_address.tsx @@ -26,7 +26,7 @@ export const EthereumAddress = (props: EthereumAddressProps) => { <EtherScanIcon addressOrTxHash={props.address} networkId={props.networkId} - etherscanLinkSuffixes={EtherscanLinkSuffixes.address} + etherscanLinkSuffixes={EtherscanLinkSuffixes.Address} /> </div> <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip> diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx index 9b4d172f1..111d5d478 100644 --- a/packages/website/ts/components/ui/etherscan_icon.tsx +++ b/packages/website/ts/components/ui/etherscan_icon.tsx @@ -1,8 +1,8 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import {EtherscanLinkSuffixes} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; interface EtherScanIconProps { @@ -13,7 +13,7 @@ interface EtherScanIconProps { export const EtherScanIcon = (props: EtherScanIconProps) => { const etherscanLinkIfExists = utils.getEtherScanLinkIfExists( - props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.address, + props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.Address, ); const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`; return ( diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx index 852097519..bfa1da280 100644 --- a/packages/website/ts/components/ui/input_label.tsx +++ b/packages/website/ts/components/ui/input_label.tsx @@ -1,5 +1,5 @@ -import {colors} from 'material-ui/styles'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; export interface InputLabelProps { text: string | Element | React.ReactNode; @@ -7,7 +7,7 @@ export interface InputLabelProps { const styles = { label: { - color: colors.grey500, + color: colors.grey, fontSize: 12, pointerEvents: 'none', textAlign: 'left', diff --git a/packages/website/ts/components/ui/labeled_switcher.tsx b/packages/website/ts/components/ui/labeled_switcher.tsx deleted file mode 100644 index 80a8fbe94..000000000 --- a/packages/website/ts/components/ui/labeled_switcher.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; -import * as React from 'react'; - -const CUSTOM_BLUE = '#63A6F1'; - -interface LabeledSwitcherProps { - labelLeft: string; - labelRight: string; - isLeftInitiallySelected: boolean; - onLeftLabelClickAsync: () => Promise<boolean>; - onRightLabelClickAsync: () => Promise<boolean>; -} - -interface LabeledSwitcherState { - isLeftSelected: boolean; -} - -export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> { - constructor(props: LabeledSwitcherProps) { - super(props); - this.state = { - isLeftSelected: props.isLeftInitiallySelected, - }; - } - public render() { - const isLeft = true; - return ( - <div - className="rounded clearfix" - > - {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)} - {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)} - </div> - ); - } - private renderLabel(title: string, isLeft: boolean, isSelected: boolean) { - const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`; - const style = { - cursor: 'pointer', - backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200, - color: isSelected ? 'white' : '#A5A5A5', - boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6', - borderTop: borderStyle, - borderBottom: borderStyle, - [isLeft ? 'borderLeft' : 'borderRight']: borderStyle, - paddingTop: 12, - paddingBottom: 12, - }; - return ( - <div - className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`} - style={style} - onClick={this.onLabelClickAsync.bind(this, isLeft)} - > - {title} - </div> - ); - } - private async onLabelClickAsync(isLeft: boolean): Promise<void> { - this.setState({ - isLeftSelected: isLeft, - }); - const didSucceed = isLeft ? - await this.props.onLeftLabelClickAsync() : - await this.props.onRightLabelClickAsync(); - if (!didSucceed) { - this.setState({ - isLeftSelected: !isLeft, - }); - } - } -} diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx index 2d668fb82..08e8bc9ce 100644 --- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx +++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx @@ -1,6 +1,7 @@ import * as _ from 'lodash'; import RaisedButton from 'material-ui/RaisedButton'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; const COMPLETE_STATE_SHOW_LENGTH_MS = 2000; @@ -31,8 +32,8 @@ export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> { public static defaultProps: Partial<LifeCycleRaisedButtonProps> = { isDisabled: false, - backgroundColor: 'white', - labelColor: 'rgb(97, 97, 97)', + backgroundColor: colors.white, + labelColor: colors.darkGrey, }; private buttonTimeoutId: number; private didUnmount: boolean; diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx index e6b6ea9e2..918d42a3b 100644 --- a/packages/website/ts/components/ui/party.tsx +++ b/packages/website/ts/components/ui/party.tsx @@ -1,15 +1,14 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); import {EthereumAddress} from 'ts/components/ui/ethereum_address'; import {Identicon} from 'ts/components/ui/identicon'; import {EtherscanLinkSuffixes} from 'ts/types'; +import {colors} from 'ts/utils/colors'; import {utils} from 'ts/utils/utils'; const IMAGE_DIMENSION = 100; const IDENTICON_DIAMETER = 95; -const CHECK_MARK_GREEN = 'rgb(0, 195, 62)'; interface PartyProps { label: string; @@ -45,7 +44,7 @@ export class Party extends React.Component<PartyProps, PartyState> { height: IMAGE_DIMENSION, }; const etherscanLinkIfExists = utils.getEtherScanLinkIfExists( - this.props.address, this.props.networkId, EtherscanLinkSuffixes.address, + this.props.address, this.props.networkId, EtherscanLinkSuffixes.Address, ); const isRegistered = this.props.isInTokenRegistry; const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`; @@ -94,7 +93,7 @@ export class Party extends React.Component<PartyProps, PartyState> { className="mx-auto" style={{fontSize: 13, width: 127}} > - <span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}> + <span style={{color: isRegistered ? colors.brightGreen : colors.red500}}> <i className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`} /> diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx index db69d7278..979b06d66 100644 --- a/packages/website/ts/components/ui/required_label.tsx +++ b/packages/website/ts/components/ui/required_label.tsx @@ -1,5 +1,5 @@ -import {colors} from 'material-ui/styles'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; export interface RequiredLabelProps { label: string|React.ReactNode; diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx index b5d4b0caa..124e7018c 100644 --- a/packages/website/ts/components/ui/swap_icon.tsx +++ b/packages/website/ts/components/ui/swap_icon.tsx @@ -1,6 +1,6 @@ import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; +import {colors} from 'ts/utils/colors'; interface SwapIconProps { swapTokensFn: () => void; |