aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant')
-rw-r--r--packages/instant/src/components/amount_input.tsx27
-rw-r--r--packages/instant/src/components/instant_heading.tsx6
-rw-r--r--packages/instant/src/components/ui/container.tsx2
-rw-r--r--packages/instant/src/components/ui/index.ts1
-rw-r--r--packages/instant/src/components/ui/input.tsx42
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';