Abstract SectionHeader and make 12px per Chris's comment and figma design

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>
+    );
+};