diff options
-rw-r--r-- | packages/instant/src/components/retry_button.tsx | 17 | ||||
-rw-r--r-- | packages/instant/src/components/secondary_button.tsx | 28 | ||||
-rw-r--r-- | packages/instant/src/containers/selected_asset_button.tsx | 5 |
3 files changed, 35 insertions, 15 deletions
diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx index 5e36506d0..28547ce54 100644 --- a/packages/instant/src/components/retry_button.tsx +++ b/packages/instant/src/components/retry_button.tsx @@ -1,24 +1,11 @@ import * as React from 'react'; -import { ColorOption } from '../style/theme'; - -import { Button, Text } from './ui'; +import { SecondaryButton } from './secondary_button'; export interface RetryButtonProps { onClick: () => void; } export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return ( - <Button - backgroundColor={ColorOption.white} - borderColor={ColorOption.lightGrey} - width="100%" - onClick={props.onClick} - > - <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px"> - Try Again - </Text> - </Button> - ); + return <SecondaryButton text="Try Again" onClick={props.onClick} />; }; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx new file mode 100644 index 000000000..e073f6061 --- /dev/null +++ b/packages/instant/src/components/secondary_button.tsx @@ -0,0 +1,28 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Button, ButtonProps } from './ui/button'; +import { Text } from './ui/text'; + +export interface SecondaryButtonProps extends ButtonProps { + text: string; +} + +export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => { + const buttonProps = _.omit(props, 'text'); + return ( + <Button + backgroundColor={ColorOption.white} + borderColor={ColorOption.lightGrey} + width="100%" + onClick={props.onClick} + {...buttonProps} + > + <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px"> + {props.text} + </Text> + </Button> + ); +}; diff --git a/packages/instant/src/containers/selected_asset_button.tsx b/packages/instant/src/containers/selected_asset_button.tsx index d84ae1a52..8c617804e 100644 --- a/packages/instant/src/containers/selected_asset_button.tsx +++ b/packages/instant/src/containers/selected_asset_button.tsx @@ -2,6 +2,7 @@ import * as _ from 'lodash'; import * as React from 'react'; import { connect } from 'react-redux'; +import { SecondaryButton } from '../components/secondary_button'; import { State } from '../redux/reducer'; import { AsyncProcessState } from '../types'; @@ -21,6 +22,10 @@ const SelectedAssetButtonPresentationComponent: React.StatelessComponent<{ }> = props => { if (props.buyOrderState === AsyncProcessState.FAILURE) { return <SelectedAssetRetryButton />; + } else if (props.buyOrderState === AsyncProcessState.SUCCESS) { + return <SecondaryButton text="Success" isDisabled={true} />; + } else if (props.buyOrderState === AsyncProcessState.PENDING) { + return <SecondaryButton text="Processing" isDisabled={true} />; } return <SelectedAssetBuyButton />; |