aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r--packages/instant/src/components/ui/flex.tsx3
-rw-r--r--packages/instant/src/components/ui/text.tsx6
-rw-r--r--packages/instant/src/components/zero_ex_instant_container.tsx49
3 files changed, 37 insertions, 21 deletions
diff --git a/packages/instant/src/components/ui/flex.tsx b/packages/instant/src/components/ui/flex.tsx
index f55f5f8ba..327e91926 100644
--- a/packages/instant/src/components/ui/flex.tsx
+++ b/packages/instant/src/components/ui/flex.tsx
@@ -1,12 +1,14 @@
import * as React from 'react';
import { ColorOption, styled } from '../../style/theme';
+import { cssRuleIfExists } from '../../style/util';
export interface FlexProps {
direction?: 'row' | 'column';
flexWrap?: 'wrap' | 'nowrap';
justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
align?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
+ width?: string;
backgroundColor?: ColorOption;
className?: string;
}
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify};
align-items: ${props => props.align};
+ ${props => cssRuleIfExists(props, 'width')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
`;
diff --git a/packages/instant/src/components/ui/text.tsx b/packages/instant/src/components/ui/text.tsx
index 0bc387644..9fb8ea26f 100644
--- a/packages/instant/src/components/ui/text.tsx
+++ b/packages/instant/src/components/ui/text.tsx
@@ -24,9 +24,9 @@ export interface TextProps {
}
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
- <p className={className} onClick={onClick}>
+ <div className={className} onClick={onClick}>
{children}
- </p>
+ </div>
);
const darkenOnHoverAmount = 0.3;
@@ -61,9 +61,9 @@ Text.defaultProps = {
fontWeight: 400,
fontColor: ColorOption.black,
fontSize: '15px',
- lineHeight: '1.5em',
textDecorationLine: 'none',
noWrap: false,
+ display: 'inline-block',
};
Text.displayName = 'Text';
diff --git a/packages/instant/src/components/zero_ex_instant_container.tsx b/packages/instant/src/components/zero_ex_instant_container.tsx
index fc936c3f2..b5853594f 100644
--- a/packages/instant/src/components/zero_ex_instant_container.tsx
+++ b/packages/instant/src/components/zero_ex_instant_container.tsx
@@ -7,32 +7,45 @@ import { Container, Flex, Text } from './ui';
export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
- <Container width="350px" borderRadius="3px">
- <Flex direction="column">
- <Container backgroundColor={ColorOption.primaryColor} padding="20px">
+ <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={600}
+ fontWeight={500}
textTransform="uppercase"
+ fontSize="12px"
>
I want to buy
</Text>
- <Flex direction="row" justify="space-between">
- <Container>
- <Text textTransform="uppercase">0.00</Text>
- <Text textTransform="uppercase"> rep </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>
- <Flex direction="column">
- <Text> 0 ETH </Text>
- <Text> $0.00 </Text>
- </Flex>
+ <Text fontSize="16px" fontColor={ColorOption.white} opacity={0.7}>
+ $0.00
+ </Text>
</Flex>
- </Container>
- <Container padding="20px" backgroundColor={ColorOption.white}>
- <Text>hey</Text>
- </Container>
- </Flex>
- </Container>
+ </Flex>
+ </Container>
+ <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
+ <Text>hey</Text>
+ </Container>
+ </Flex>
);