aboutsummaryrefslogtreecommitdiffstats
path: root/packages/instant/src
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 05:43:08 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 05:43:08 +0800
commit65579c023670c09f39b4f7a733d7b703888d9d99 (patch)
tree048f10f617d973e94744828d2133774455294df1 /packages/instant/src
parent756dc1e95ebbb8ef73ff8f712062997ea3d8c45e (diff)
downloaddexon-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')
-rw-r--r--packages/instant/src/components/order_details.tsx21
-rw-r--r--packages/instant/src/components/payment_method.tsx11
-rw-r--r--packages/instant/src/components/section_header.tsx22
3 files changed, 33 insertions, 21 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>
diff --git a/packages/instant/src/components/payment_method.tsx b/packages/instant/src/components/payment_method.tsx
index 7c93f1d1c..abadf4bd6 100644
--- a/packages/instant/src/components/payment_method.tsx
+++ b/packages/instant/src/components/payment_method.tsx
@@ -8,6 +8,7 @@ import { envUtil } from '../util/env';
import { CoinbaseWalletLogo } from './coinbase_wallet_logo';
import { MetaMaskLogo } from './meta_mask_logo';
import { PaymentMethodDropdown } from './payment_method_dropdown';
+import { SectionHeader } from './section_header';
import { Circle } from './ui/circle';
import { Container } from './ui/container';
import { Flex } from './ui/flex';
@@ -29,15 +30,7 @@ export class PaymentMethod extends React.Component<PaymentMethodProps> {
<Container width="100%" height="120px" padding="20px 20px 0px 20px">
<Container marginBottom="12px">
<Flex justify="space-between">
- <Text
- letterSpacing="1px"
- fontColor={ColorOption.primaryColor}
- fontWeight={600}
- textTransform="uppercase"
- fontSize="14px"
- >
- {this._renderTitleText()}
- </Text>
+ <SectionHeader>{this._renderTitleText()}</SectionHeader>
{this._renderTitleLabel()}
</Flex>
</Container>
diff --git a/packages/instant/src/components/section_header.tsx b/packages/instant/src/components/section_header.tsx
new file mode 100644
index 000000000..a6be3d8af
--- /dev/null
+++ b/packages/instant/src/components/section_header.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { Text } from './ui/text';
+
+export interface SectionHeaderProps {
+ children?: React.ReactNode;
+}
+export const SectionHeader: React.StatelessComponent<{}> = props => {
+ return (
+ <Text
+ letterSpacing="1px"
+ fontColor={ColorOption.primaryColor}
+ fontWeight={600}
+ textTransform="uppercase"
+ fontSize="12px"
+ >
+ {props.children}
+ </Text>
+ );
+};