From d9b7aa2e4ba088b4dda1b1d2956de5d267a0674e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 4 Oct 2018 17:22:36 -0700
Subject: Add faux order details section
---
packages/instant/src/components/ui/container.tsx | 8 +++-
.../src/components/zero_ex_instant_container.tsx | 43 ++--------------------
packages/instant/src/style/theme.ts | 4 ++
3 files changed, 15 insertions(+), 40 deletions(-)
diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 8366d5748..4ebaf2af3 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -20,6 +20,9 @@ export interface ContainerProps {
padding?: string;
boxShadow?: string;
borderRadius?: string;
+ border?: string;
+ borderColor?: ColorOption;
+ borderTop?: string;
className?: string;
backgroundColor?: ColorOption;
}
@@ -45,11 +48,14 @@ export const Container = styled(PlainContainer)`
${props => cssRuleIfExists(props, 'padding')}
${props => cssRuleIfExists(props, 'box-shadow')}
${props => cssRuleIfExists(props, 'border-radius')}
+ ${props => cssRuleIfExists(props, 'border')}
+ ${props => cssRuleIfExists(props, 'border-top')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+ border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
`;
Container.defaultProps = {
- display: 'inline-block',
+ display: 'block',
};
Container.displayName = 'Container';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index b5853594f..efda6ecaf 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -2,50 +2,15 @@ import * as React from 'react';
import { ColorOption } from '../style/theme';
+import { InstantHeading } from './instant_heading';
+import { OrderDetails } from './order_details';
import { Container, Flex, Text } from './ui';
export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
<Flex direction="column" width="350px" justify="flex-start">
- <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
- <Container marginBottom="5px">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.white}
- opacity={0.7}
- fontWeight={500}
- textTransform="uppercase"
- fontSize="12px"
- >
- I want to buy
- </Text>
- </Container>
- <Flex direction="row" justify="space-between">
- <Container>
- <Text fontSize="45px" fontColor={ColorOption.white} opacity={0.7} textTransform="uppercase">
- 0.00
- </Text>
- <Container display="inline-block" marginLeft="10px">
- <Text fontSize="45px" fontColor={ColorOption.white} textTransform="uppercase">
- rep
- </Text>
- </Container>
- </Container>
- <Flex direction="column" justify="space-between">
- <Container marginBottom="5px">
- <Text fontSize="16px" fontColor={ColorOption.white} fontWeight={500}>
- 0 ETH
- </Text>
- </Container>
- <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
- $0.00
- </Text>
- </Flex>
- </Flex>
- </Container>
- <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
- <Text>hey</Text>
- </Container>
+ <InstantHeading />
+ <OrderDetails />
</Flex>
);
diff --git a/packages/instant/src/style/theme.ts b/packages/instant/src/style/theme.ts
index 02f890492..cf9da5378 100644
--- a/packages/instant/src/style/theme.ts
+++ b/packages/instant/src/style/theme.ts
@@ -8,6 +8,8 @@ export enum ColorOption {
primaryColor = 'primaryColor',
black = 'black',
lightGrey = 'lightGrey',
+ grey = 'grey',
+ feintGrey = 'feintGrey',
darkGrey = 'darkGrey',
white = 'white',
}
@@ -16,6 +18,8 @@ export const theme: Theme = {
primaryColor: '#512D80',
black: 'black',
lightGrey: '#999999',
+ grey: '#666666',
+ feintGrey: '#DEDEDE',
darkGrey: '#333333',
white: 'white',
};
--
cgit v1.2.3