crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create zrx instant container heading

Browse Source
This commit is contained in:
fragosti
2018-10-04 16:27:04 -07:00
parent e2220a939f
commit 0cfe5637c0
3 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/instant/src/components/ui/flex.tsx
View File

@@ -1,12 +1,14 @@
import * as React from 'react'; import * as React from 'react';
import { ColorOption, styled } from '../../style/theme'; import { ColorOption, styled } from '../../style/theme';
import { cssRuleIfExists } from '../../style/util';
export interface FlexProps { export interface FlexProps {
direction?: 'row' | 'column'; direction?: 'row' | 'column';
flexWrap?: 'wrap' | 'nowrap'; flexWrap?: 'wrap' | 'nowrap';
justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end'; justify?: 'flex-start' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'flex-end';
align?: '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; backgroundColor?: ColorOption;
className?: string; className?: string;
} }
@@ -21,6 +23,7 @@ export const Flex = styled(PlainFlex)`
flex-wrap: ${props => props.flexWrap}; flex-wrap: ${props => props.flexWrap};
justify-content: ${props => props.justify}; justify-content: ${props => props.justify};
align-items: ${props => props.align}; align-items: ${props => props.align};
${props => cssRuleIfExists(props, 'width')}
background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')}; background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
`; `;

6
packages/instant/src/components/ui/text.tsx
View File

@@ -24,9 +24,9 @@ export interface TextProps {
} }
const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => ( const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick }) => (
<p className={className} onClick={onClick}> <div className={className} onClick={onClick}>
{children} {children}
</p> </div>
); );
const darkenOnHoverAmount = 0.3; const darkenOnHoverAmount = 0.3;
@@ -61,9 +61,9 @@ Text.defaultProps = {
fontWeight: 400, fontWeight: 400,
fontColor: ColorOption.black, fontColor: ColorOption.black,
fontSize: '15px', fontSize: '15px',
lineHeight: '1.5em',
textDecorationLine: 'none', textDecorationLine: 'none',
noWrap: false, noWrap: false,
display: 'inline-block',
}; };
Text.displayName = 'Text'; Text.displayName = 'Text';

49
packages/instant/src/components/zero_ex_instant_container.tsx
View File

@@ -7,32 +7,45 @@ import { Container, Flex, Text } from './ui';
export interface ZeroExInstantContainerProps {} export interface ZeroExInstantContainerProps {}
export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => ( export const ZeroExInstantContainer: React.StatelessComponent<ZeroExInstantContainerProps> = props => (
<Container width="350px" borderRadius="3px"> <Flex direction="column" width="350px" justify="flex-start">
<Flex direction="column"> <Container backgroundColor={ColorOption.primaryColor} padding="20px" width="100%">
<Container backgroundColor={ColorOption.primaryColor} padding="20px"> <Container marginBottom="5px">
<Text <Text
letterSpacing="1px" letterSpacing="1px"
fontColor={ColorOption.white} fontColor={ColorOption.white}
opacity={0.7} opacity={0.7}
fontWeight={600} fontWeight={500}
textTransform="uppercase" textTransform="uppercase"
fontSize="12px"
> >
I want to buy I want to buy
</Text> </Text>
<Flex direction="row" justify="space-between"> </Container>
<Container> <Flex direction="row" justify="space-between">
<Text textTransform="uppercase">0.00</Text> <Container>
<Text textTransform="uppercase"> rep </Text> <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"> </Container>
<Text> 0 ETH </Text> <Flex direction="column" justify="space-between">
<Text> $0.00 </Text> <Container marginBottom="5px">
</Flex> <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> </Flex>
<Container padding="20px" backgroundColor={ColorOption.white}> </Container>
<Text>hey</Text> <Container padding="20px" backgroundColor={ColorOption.white} width="100%">
</Container> <Text>hey</Text>
</Flex> </Container>
</Container> </Flex>
); );