Added common title components for wallet views

src/config/colors.js

@@ -3,6 +3,7 @@ export default {
     BACKGROUND: '#EBEBEB',
 
     TEXT: '#333333',
+    WALLET_VIEW_TITLE: '#505050',
 
     HEADER: '#1A1A1A',
     BODY: '#E3E3E3',

src/config/variables.js

@@ -4,6 +4,7 @@ export const FONT_SIZE = {
     SMALL: '14px',
     BASE: '16px',
     TOP_MENU: '17px',
+    WALLET_TITLE: '18px',
     BIG: '21px',
     BIGGER: '32px',
     BIGGEST: '36px',

src/views/Wallet/components/Title/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import colors from 'config/colors';
+import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
+
+const Wrapper = styled.div`
+    font-size: ${FONT_SIZE.WALLET_TITLE};
+    font-weight: ${FONT_WEIGHT.BASE};
+    color: ${colors.WALLET_TITLE};
+`;
+
+const Title = ({
+    children,
+}) => (
+    <Wrapper>
+        {children}
+    </Wrapper>
+);
+
+Title.propTypes = {
+    children: PropTypes.element,
+};
+
+export default Title;

src/views/Wallet/views/Account/Receive/index.js

@@ -1,7 +1,6 @@
 /* @flow */
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { H2 } from 'components/Heading';
 import Button from 'components/Button';
 import Icon from 'components/Icon';
 import ICONS from 'config/icons';
@@ -12,6 +11,7 @@ import Tooltip from 'components/Tooltip';
 import { QRCode } from 'react-qr-svg';
 
 import { FONT_SIZE, FONT_WEIGHT, FONT_FAMILY } from 'config/variables';
+import Title from 'views/Wallet/components/Title';
 import VerifyAddressTooltip from './components/VerifyAddressTooltip';
 
 import type { Props } from './Container';
@@ -159,7 +159,7 @@ const AccountReceive = (props: Props) => {
     return (
         <Content>
             <React.Fragment>
-                <H2>Receive Ethereum or tokens</H2>
+                <Title>Receive Ethereum or tokens</Title>
                 <AddressWrapper
                     isShowingQrCode={addressVerified || addressUnverified}
                 >

src/views/Wallet/views/Account/Send/index.js

@@ -10,8 +10,8 @@ import Link from 'components/Link';
 import ICONS from 'config/icons';
 import { FONT_SIZE, FONT_WEIGHT, TRANSITION } from 'config/variables';
 import colors from 'config/colors';
+import Title from 'views/Wallet/components/Title';
 import P from 'components/Paragraph';
-import { H2 } from 'components/Heading';
 import Content from 'views/Wallet/components/Content';
 import type { Token } from 'flowtype';
 import AdvancedForm from './components/AdvancedForm';
@@ -248,7 +248,7 @@ const AccountSend = (props: Props) => {
     return (
         <Content>
             <React.Fragment>
-                <H2>Send Ethereum or tokens</H2>
+                <Title>Send Ethereum or tokens</Title>
                 <InputRow>
                     <Input
                         state={getAddressInputState(address, errors.address, warnings.address)}

src/views/Wallet/views/Account/SignVerify/index.js

@@ -2,10 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import Input from 'components/inputs/Input';
 import Textarea from 'components/Textarea';
+import Title from 'views/Wallet/components/Title';
 import Button from 'components/Button';
 import Content from 'views/Wallet/components/Content';
-
-import { H2 } from 'components/Heading';
 import colors from 'config/colors';
 
 const Wrapper = styled.div`
@@ -49,7 +48,7 @@ const Label = styled.div`
 
 const AccountSignVerify = () => (
     <Content>
-        <H2>Sign & Verify</H2>
+        <Title>Sign & Verify</Title>
         <Wrapper>
             <Sign>
                 <Row>

src/views/Wallet/views/Account/Summary/index.js

@@ -7,6 +7,7 @@ import Icon from 'components/Icon';
 import { AsyncSelect } from 'components/Select';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
+import Title from 'views/Wallet/components/Title';
 import Tooltip from 'components/Tooltip';
 import Content from 'views/Wallet/components/Content';
 
@@ -82,7 +83,7 @@ const AccountSummary = (props: Props) => {
                 <AccountHeading>
                     <AccountName>
                         <StyledCoinLogo coinNetwork={account.network} />
-                        <H2>Account #{parseInt(account.index, 10) + 1}</H2>
+                        <Title>Account #{parseInt(account.index, 10) + 1}</Title>
                     </AccountName>
                     <Link href={explorerLink} isGray>See full transaction history</Link>
                 </AccountHeading>