Merge branch 'development' of https://github.com/0xProject/0x-monorepo into feature/website/instant-configurator

9 files changed, 27 insertions, 12 deletions

diff --git a/packages/instant/src/components/buy_order_progress.tsx b/packages/instant/src/components/buy_order_progress.tsx
index 6568de91b..a19f5a4d0 100644
--- a/packages/instant/src/components/buy_order_progress.tsx
+++ b/packages/instant/src/components/buy_order_progress.tsx
@@ -21,7 +21,7 @@ export const BuyOrderProgress: React.StatelessComponent<BuyOrderProgressProps> =
         const hasEnded = buyOrderState.processState !== OrderProcessState.Processing;
         const expectedTimeMs = progress.expectedEndTimeUnix - progress.startTimeUnix;
         return (
-            <Container padding="20px 20px 0px 20px" width="100%">
+            <Container width="100%" padding="20px 20px 0px 20px">
                 <Container marginBottom="5px">
                     <TimeCounter estimatedTimeMs={expectedTimeMs} hasEnded={hasEnded} key={progress.startTimeUnix} />
                 </Container>
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 808c6dc7f..117f9dd5f 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -32,7 +32,7 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
     public render(): React.ReactNode {
         const iconOrAmounts = this._renderIcon() || this._renderAmountsSection();
         return (
-            <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
+            <Container backgroundColor={ColorOption.primaryColor} width="100%" padding="20px">
                 <Container marginBottom="5px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx
index 5fc956e1c..a8e0e2513 100644
--- a/packages/instant/src/components/order_details.tsx
+++ b/packages/instant/src/components/order_details.tsx
@@ -34,7 +34,7 @@ export class OrderDetails extends React.Component<OrderDetailsProps> {
                 ? assetEthBaseUnitAmount.div(selectedAssetUnitAmount).ceil()
                 : undefined;
         return (
-            <Container padding="20px" width="100%" flexGrow={1}>
+            <Container width="100%" flexGrow={1} padding="20px 20px 0px 20px">
                 <Container marginBottom="10px">
                     <Text
                         letterSpacing="1px"
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 4efe5b28e..7c93f1d1c 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -26,7 +26,7 @@ export interface PaymentMethodProps {
 export class PaymentMethod extends React.Component<PaymentMethodProps> {
     public render(): React.ReactNode {
         return (
-            <Container padding="20px" width="100%" height="133px">
+            <Container width="100%" height="120px" padding="20px 20px 0px 20px">
                 <Container marginBottom="12px">
                     <Flex justify="space-between">
                         <Text
@@ -88,10 +88,14 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
                 return (
                     <WalletPrompt
                         onClick={this.props.onUnlockWalletClick}
-                        image={<Icon width={13} icon="lock" color={ColorOption.black} />}
+                        image={
+                            <Container position="relative" top="2px">
+                                <Icon width={13} icon="lock" color={ColorOption.black} />
+                            </Container>
+                        }
                         {...colors}
                     >
-                        Please Unlock {this.props.walletDisplayName}
+                        Click to Connect {this.props.walletDisplayName}
                     </WalletPrompt>
                 );
             case AccountState.None:
diff --git a/packages/instant/src/components/scaling_amount_input.tsx b/packages/instant/src/components/scaling_amount_input.tsx
index 0861bbe05..86aca5a65 100644
--- a/packages/instant/src/components/scaling_amount_input.tsx
+++ b/packages/instant/src/components/scaling_amount_input.tsx
@@ -4,6 +4,7 @@ import * as React from 'react';
 
 import { Maybe } from '../types';
 
+import { GIT_SHA, MAGIC_TRIGGER_ERROR_INPUT, MAGIC_TRIGGER_ERROR_MESSAGE, NPM_PACKAGE_VERSION } from '../constants';
 import { ColorOption } from '../style/theme';
 import { maybeBigNumberUtil } from '../util/maybe_big_number';
 import { util } from '../util/util';
@@ -71,6 +72,10 @@ export class ScalingAmountInput extends React.Component<ScalingAmountInputProps,
         );
     }
     private readonly _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        if (event.target.value === MAGIC_TRIGGER_ERROR_INPUT) {
+            throw new Error(`${MAGIC_TRIGGER_ERROR_MESSAGE} git: ${GIT_SHA}, npm: ${NPM_PACKAGE_VERSION}`);
+        }
+
         const sanitizedValue = event.target.value.replace(/[^0-9.]/g, ''); // only allow numbers and "."
         this.setState({
             stringValue: sanitizedValue,
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx
index 7d311dc2f..0b5eaf299 100644
--- a/packages/instant/src/components/ui/overlay.tsx
+++ b/packages/instant/src/components/ui/overlay.tsx
@@ -33,7 +33,7 @@ export const Overlay =
 
 Overlay.defaultProps = {
     zIndex: zIndex.overlayDefault,
-    backgroundColor: generateOverlayBlack(0.9),
+    backgroundColor: generateOverlayBlack(0.7),
 };
 
 Overlay.displayName = 'Overlay';
diff --git a/packages/instant/src/components/wallet_prompt.tsx b/packages/instant/src/components/wallet_prompt.tsx
index a0b3ae457..c07cfe7b5 100644
--- a/packages/instant/src/components/wallet_prompt.tsx
+++ b/packages/instant/src/components/wallet_prompt.tsx
@@ -21,7 +21,7 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
     primaryColor,
 }) => (
     <Container
-        padding="14.5px"
+        padding="10px"
         border={`1px solid ${primaryColor}`}
         backgroundColor={secondaryColor}
         width="100%"
@@ -33,7 +33,7 @@ export const WalletPrompt: React.StatelessComponent<WalletPromptProps> = ({
         <Flex>
             {image}
             <Container marginLeft="10px">
-                <Text fontSize="16px" fontColor={primaryColor}>
+                <Text fontSize="16px" fontColor={primaryColor} fontWeight="500">
                     {children}
                 </Text>
             </Container>
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index 8a809ee31..0337c7714 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -70,7 +70,7 @@ export class ZeroExInstantContainer extends React.Component<ZeroExInstantContain
                         marginTop="10px"
                         marginLeft="auto"
                         marginRight="auto"
-                        width="140px"
+                        width="108px"
                     >
                         <a href={ZERO_EX_SITE_URL} target="_blank">
                             <PoweredByLogo />
diff --git a/packages/instant/src/components/zero_ex_instant_overlay.tsx b/packages/instant/src/components/zero_ex_instant_overlay.tsx
index b3fb57dd6..96e560691 100644
--- a/packages/instant/src/components/zero_ex_instant_overlay.tsx
+++ b/packages/instant/src/components/zero_ex_instant_overlay.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { ZeroExInstantContainer } from '../components/zero_ex_instant_container';
-import { MAIN_CONTAINER_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants';
+import { MAIN_CONTAINER_DIV_CLASS, OVERLAY_CLOSE_BUTTON_DIV_CLASS, OVERLAY_DIV_CLASS } from '../constants';
 import { ColorOption } from '../style/theme';
 
 import { Container } from './ui/container';
@@ -21,7 +21,13 @@ export const ZeroExInstantOverlay: React.StatelessComponent<ZeroExInstantOverlay
         <ZeroExInstantProvider {...rest}>
             <Overlay zIndex={zIndex} className={OVERLAY_DIV_CLASS}>
                 <Flex height="100vh">
-                    <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}>
+                    <Container
+                        className={OVERLAY_CLOSE_BUTTON_DIV_CLASS}
+                        position="absolute"
+                        top="0px"
+                        right="0px"
+                        display={{ default: 'initial', sm: 'none' }}
+                    >
                         <Icon
                             height={18}
                             width={18}