diff options
author | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-13 05:43:08 +0800 |
---|---|---|
committer | Steve Klebanoff <steve.klebanoff@gmail.com> | 2018-12-13 05:43:08 +0800 |
commit | 65579c023670c09f39b4f7a733d7b703888d9d99 (patch) | |
tree | 048f10f617d973e94744828d2133774455294df1 /packages/instant/src/components/order_details.tsx | |
parent | 756dc1e95ebbb8ef73ff8f712062997ea3d8c45e (diff) | |
download | dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar.gz dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar.bz2 dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar.lz dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar.xz dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.tar.zst dexon-sol-tools-65579c023670c09f39b4f7a733d7b703888d9d99.zip |
Abstract SectionHeader and make 12px per Chris's comment and figma design
Diffstat (limited to 'packages/instant/src/components/order_details.tsx')
-rw-r--r-- | packages/instant/src/components/order_details.tsx | 21 |
1 files changed, 9 insertions, 12 deletions
diff --git a/packages/instant/src/components/order_details.tsx b/packages/instant/src/components/order_details.tsx index c069a8bcc..4aa375017 100644 --- a/packages/instant/src/components/order_details.tsx +++ b/packages/instant/src/components/order_details.tsx @@ -10,6 +10,7 @@ import { BaseCurrency } from '../types'; import { format } from '../util/format'; import { AmountPlaceholder } from './amount_placeholder'; +import { SectionHeader } from './section_header'; import { Container } from './ui/container'; import { Flex } from './ui/flex'; @@ -157,10 +158,12 @@ export class OrderDetails extends React.Component<OrderDetailsProps> { choice === BaseCurrency.ETH ? this.props.onBaseCurrencySwitchEth : this.props.onBaseCurrencySwitchUsd; const isSelected = this.props.baseCurrency === choice; - const textStyle: TextProps = { onClick, fontSize: '12px ' }; + const textStyle: TextProps = { onClick, fontSize: '12px' }; if (isSelected) { textStyle.fontColor = ColorOption.primaryColor; textStyle.fontWeight = 700; + } else { + textStyle.fontColor = ColorOption.lightGrey; } return <Text {...textStyle}>{choice}</Text>; } @@ -168,19 +171,13 @@ export class OrderDetails extends React.Component<OrderDetailsProps> { private _renderHeader(): React.ReactNode { return ( <Flex justify="space-between"> - <Text - letterSpacing="1px" - fontColor={ColorOption.primaryColor} - fontWeight={600} - textTransform="uppercase" - fontSize="14px" - > - Order Details - </Text> + <SectionHeader>Order Details</SectionHeader> <Container> {this._baseCurrencyChoice(BaseCurrency.ETH)} - <Container marginLeft="3px" marginRight="3px" display="inline"> - <Text fontSize="12px">/</Text> + <Container marginLeft="5px" marginRight="5px" display="inline"> + <Text fontSize="12px" fontColor={ColorOption.feintGrey}> + / + </Text> </Container> {this._baseCurrencyChoice(BaseCurrency.USD)} </Container> |