From 0cfe5637c048091c9502d49c8526e17cefb1a525 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 4 Oct 2018 16:27:04 -0700 Subject: Create zrx instant container heading --- packages/instant/src/components/ui/flex.tsx | 3 ++ packages/instant/src/components/ui/text.tsx | 6 +-- .../src/components/zero_ex_instant_container.tsx | 49 ++++++++++++++-------- 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 = ({ children, className, onClick }) => ( -

+

{children} -

+
); 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 = props => ( - - - + + + I want to buy - - - 0.00 - rep + + + + + 0.00 + + + + rep + + + + + + + 0 ETH + - - 0 ETH - $0.00 - + + $0.00 + - - - hey - - - + + + + hey + + ); -- cgit v1.2.3