Add Input and AmountInput component

5 files changed, 75 insertions, 3 deletions

diff --git a/packages/instant/src/components/amount_input.tsx b/packages/instant/src/components/amount_input.tsx
new file mode 100644
index 000000000..699541bfb
--- /dev/null
+++ b/packages/instant/src/components/amount_input.tsx
@@ -0,0 +1,27 @@
+import { BigNumber } from '@0xproject/utils';
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Container, Flex, Input, Text } from './ui';
+
+export interface AmountInputProps {
+    fontColor?: ColorOption;
+    fontSize?: string;
+    value?: BigNumber;
+    onChange?: (value: BigNumber) => void;
+}
+
+export const AmountInput: React.StatelessComponent<AmountInputProps> = props => (
+    <Container borderBottom="1px solid rgba(255,255,255,0.3)" display="inline-block">
+        <Input
+            fontColor={props.fontColor}
+            fontSize={props.fontSize}
+            value={props.value ? props.value.toString() : undefined}
+            placeholder="0.00"
+            width="2em"
+        />
+    </Container>
+);
+
+AmountInput.defaultProps = {};
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 52c4bb2db..3da280652 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -1,7 +1,9 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 
 import { ColorOption } from '../style/theme';
 
+import { AmountInput } from './amount_input';
 import { Container, Flex, Text } from './ui';
 
 export interface InstantHeadingProps {}
@@ -22,9 +24,7 @@ export const InstantHeading: React.StatelessComponent<InstantHeadingProps> = pro
         </Container>
         <Flex direction="row" justify="space-between">
             <Container>
-                <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
-                    0.00
-                </Text>
+                <AmountInput fontSize="45px" />
                 <Container display="inline-block" marginLeft="10px">
                     <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
                         rep
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 64b5d4129..c45f6e5e9 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -22,6 +22,7 @@ export interface ContainerProps {
     border?: string;
     borderColor?: ColorOption;
     borderTop?: string;
+    borderBottom?: string;
     className?: string;
     backgroundColor?: ColorOption;
     hasBoxShadow?: boolean;
@@ -50,6 +51,7 @@ export const Container = styled(PlainContainer)`
     ${props => cssRuleIfExists(props, 'border-radius')}
     ${props => cssRuleIfExists(props, 'border')}
     ${props => cssRuleIfExists(props, 'border-top')}
+    ${props => cssRuleIfExists(props, 'border-bottom')}
     ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
     background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
     border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
diff --git a/packages/instant/src/components/ui/index.ts b/packages/instant/src/components/ui/index.ts
index dca63b65c..bf5f6c700 100644
--- a/packages/instant/src/components/ui/index.ts
+++ b/packages/instant/src/components/ui/index.ts
@@ -2,3 +2,4 @@ export { Text, Title } from './text';
 export { Button } from './button';
 export { Flex } from './flex';
 export { Container } from './container';
+export { Input } from './input';
diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx
new file mode 100644
index 000000000..fc4fed14e
--- /dev/null
+++ b/packages/instant/src/components/ui/input.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+import { ColorOption, styled } from '../../style/theme';
+
+import { Container, Flex, Text } from '../ui';
+
+export interface InputProps {
+    className?: string;
+    value?: string;
+    width?: string;
+    fontSize?: string;
+    fontColor?: ColorOption;
+    placeholder?: string;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => (
+    <input className={className} value={value} onChange={onChange} placeholder={placeholder} />
+);
+
+export const Input = styled(PlainInput)`
+    font-size: ${props => props.fontSize};
+    width: ${props => props.width};
+    padding: 0.1em 0em;
+    font-family: 'Inter UI';
+    color: ${props => props.theme[props.fontColor || 'white']};
+    background: transparent;
+    outline: none;
+    border: none;
+    &::placeholder {
+        color: ${props => props.theme[props.fontColor || 'white']};
+        opacity: 0.5;
+    }
+`;
+
+Input.defaultProps = {
+    width: 'auto',
+    fontColor: ColorOption.white,
+    fontSize: '12px',
+};
+
+Input.displayName = 'Input';