Making SecondaryButton accept children instead of text prop

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&hellip;
+        </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>
     );