diff options
-rw-r--r-- | packages/instant/src/components/placing_order_button.tsx | 19 | ||||
-rw-r--r-- | packages/instant/src/components/retry_button.tsx | 2 | ||||
-rw-r--r-- | packages/instant/src/components/secondary_button.tsx | 6 |
3 files changed, 22 insertions, 5 deletions
diff --git a/packages/instant/src/components/placing_order_button.tsx b/packages/instant/src/components/placing_order_button.tsx new file mode 100644 index 000000000..8dc05c445 --- /dev/null +++ b/packages/instant/src/components/placing_order_button.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Button } from './ui/button'; +import { Container } from './ui/container'; +import { Spinner } from './ui/spinner'; +import { Text } from './ui/text'; + +export const PlacingOrderButton: React.StatelessComponent<{}> = props => ( + <Button isDisabled={true} width="100%"> + <Container display="inline-block" position="relative" top="2px" marginRight="5px"> + <Spinner widthPx={20} heightPx={20} /> + </Container> + <Text fontColor={ColorOption.white} fontWeight={600} fontSize="20px"> + Placing Order… + </Text> + </Button> +); diff --git a/packages/instant/src/components/retry_button.tsx b/packages/instant/src/components/retry_button.tsx index 28547ce54..0d6188e6a 100644 --- a/packages/instant/src/components/retry_button.tsx +++ b/packages/instant/src/components/retry_button.tsx @@ -7,5 +7,5 @@ export interface RetryButtonProps { } export const RetryButton: React.StatelessComponent<RetryButtonProps> = props => { - return <SecondaryButton text="Try Again" onClick={props.onClick} />; + return <SecondaryButton onClick={props.onClick}>Try Again</SecondaryButton>; }; diff --git a/packages/instant/src/components/secondary_button.tsx b/packages/instant/src/components/secondary_button.tsx index e073f6061..3c139a233 100644 --- a/packages/instant/src/components/secondary_button.tsx +++ b/packages/instant/src/components/secondary_button.tsx @@ -6,9 +6,7 @@ import { ColorOption } from '../style/theme'; import { Button, ButtonProps } from './ui/button'; import { Text } from './ui/text'; -export interface SecondaryButtonProps extends ButtonProps { - text: string; -} +export interface SecondaryButtonProps extends ButtonProps {} export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = props => { const buttonProps = _.omit(props, 'text'); @@ -21,7 +19,7 @@ export const SecondaryButton: React.StatelessComponent<SecondaryButtonProps> = p {...buttonProps} > <Text fontColor={ColorOption.primaryColor} fontWeight={600} fontSize="16px"> - {props.text} + {props.children} </Text> </Button> ); |