diff --git a/src/config/colors.js b/src/config/colors.js index e870decc..efca1cda 100644 --- a/src/config/colors.js +++ b/src/config/colors.js @@ -3,6 +3,7 @@ export default { BACKGROUND: '#EBEBEB', TEXT: '#333333', + WALLET_VIEW_TITLE: '#505050', HEADER: '#1A1A1A', BODY: '#E3E3E3', diff --git a/src/config/variables.js b/src/config/variables.js index 4c900387..af2beb2e 100644 --- a/src/config/variables.js +++ b/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', diff --git a/src/views/Wallet/components/Title/index.js b/src/views/Wallet/components/Title/index.js new file mode 100644 index 00000000..8736a055 --- /dev/null +++ b/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, +}) => ( + + {children} + +); + +Title.propTypes = { + children: PropTypes.element, +}; + +export default Title; diff --git a/src/views/Wallet/views/Account/Receive/index.js b/src/views/Wallet/views/Account/Receive/index.js index 99830694..960ffd33 100644 --- a/src/views/Wallet/views/Account/Receive/index.js +++ b/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 ( -

Receive Ethereum or tokens

+ Receive Ethereum or tokens diff --git a/src/views/Wallet/views/Account/Send/index.js b/src/views/Wallet/views/Account/Send/index.js index 0f1a726b..74dcd5e7 100644 --- a/src/views/Wallet/views/Account/Send/index.js +++ b/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 ( -

Send Ethereum or tokens

+ Send Ethereum or tokens ( -

Sign & Verify

+ Sign & Verify diff --git a/src/views/Wallet/views/Account/Summary/index.js b/src/views/Wallet/views/Account/Summary/index.js index 3be7a769..4dfd8d6e 100644 --- a/src/views/Wallet/views/Account/Summary/index.js +++ b/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) => { -

Account #{parseInt(account.index, 10) + 1}

+ Account #{parseInt(account.index, 10) + 1}
See full transaction history