more trezor-ui-components integration

src/components/Notification/components/NotificationButton/index.js

@@ -3,11 +3,9 @@
 import * as React from 'react';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import Icon from 'components/Icon';
+import { Icon, Loader, colors } from 'trezor-ui-components';
-import colors from 'config/colors';
 import { WHITE_COLOR } from 'config/animations';
 import { getPrimaryColor } from 'utils/notification';
-import Loader from 'components/Loader';
 import { TRANSITION, FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 
 type Props = {

src/components/images/DeviceIcon/index.js

@@ -2,8 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import COLORS from 'config/colors';
+import { colors as COLORS, icons as ICONS } from 'trezor-ui-components';
-import ICONS from 'config/icons';
 import styled from 'styled-components';
 import type { TrezorDevice } from 'flowtype';
 

src/components/modals/confirm/Address/index.js

@@ -3,14 +3,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-
-import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
-
-import { H3 } from 'components/Heading';
-import P from 'components/Paragraph';
 import { FormattedMessage } from 'react-intl';
 
+import { H6, P, colors } from 'trezor-ui-components';
+import { FONT_SIZE } from 'config/variables';
+
 import l10nCommonMessages from 'views/common.messages';
 
 import l10nMessages from './index.messages';
@@ -43,9 +40,9 @@ const ConfirmAddress = (props: Props) => {
     return (
         <Wrapper>
             <Header>
-                <H3>
+                <H6>
                     <FormattedMessage {...l10nMessages.TR_CONFIRM_ADDRESS_ON_TREZOR} />
-                </H3>
+                </H6>
                 <P>
                     <FormattedMessage {...l10nMessages.TR_PLEASE_COMPARE_YOUR_ADDRESS} />
                 </P>

src/components/modals/confirm/SignTx/index.js

@@ -4,12 +4,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import colors from 'config/colors';
+import { H5, P, colors } from 'trezor-ui-components';
 import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
-import P from 'components/Paragraph';
 import DeviceIcon from 'components/images/DeviceIcon';
-import { H3 } from 'components/Heading';
 import { FormattedMessage } from 'react-intl';
 
 import type { TrezorDevice, State } from 'flowtype';
@@ -37,6 +35,7 @@ const Content = styled.div`
 
 const StyledP = styled(P)`
     padding-bottom: 20px;
+    text-align: center;
     color: ${colors.TEXT};
     font-size: ${FONT_SIZE.BASE};
     &:last-child {
@@ -72,13 +71,13 @@ const ConfirmSignTx = (props: Props) => {
         <Wrapper>
             <Header>
                 <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
-                <H3>
+                <H5>
                     <FormattedMessage
                         {...l10nMessages.TR_CONFIRM_TRANSACTION_ON}
                         values={{ deviceLabel: props.device.label }}
                     />
-                </H3>
+                </H5>
-                <P isSmaller>
+                <P textAlign="center" size="small">
                     <FormattedMessage {...l10nMessages.TR_DETAILS_ARE_SHOWN_ON} />
                 </P>
             </Header>

src/components/modals/passphrase/Type/index.js

@@ -4,11 +4,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import colors from 'config/colors';
+import { H5, P, colors } from 'trezor-ui-components';
-
 import DeviceIcon from 'components/images/DeviceIcon';
-import { H3 } from 'components/Heading';
-import P from 'components/Paragraph';
 
 import type { TrezorDevice } from 'flowtype';
 
@@ -27,8 +24,8 @@ const PassphraseType = (props: Props) => (
     <Wrapper>
         <Header>
             <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
-            <H3>Complete the action on {props.device.label} device</H3>
+            <H5>Complete the action on {props.device.label} device</H5>
-            <P isSmaller>
+            <P size="small">
                 If you enter a wrong passphrase, you will not unlock the desired hidden wallet.
             </P>
         </Header>

src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js

@@ -1,10 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Icon from 'components/Icon';
+import { colors, Notification, Icon, icons as ICONS } from 'trezor-ui-components';
-import ICONS from 'config/icons';
-import colors from 'config/colors';
-import Notification from 'components/Notification';
 import { getIcon, getPrimaryColor } from 'utils/notification';
 
 const Wrapper = styled.div``;

src/config/animations.js

@@ -1,5 +1,5 @@
 import { keyframes } from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 
 export const ROTATE_180_UP = keyframes`
     from { 

src/support/styles/Tooltip.js

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
 
 const tooltipStyles = css`

src/support/styles/index.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { FONT_WEIGHT } from 'config/variables';
 
 import tooltipStyles from './Tooltip';

src/utils/device.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 
 import type { Device } from 'trezor-connect';
 import type { TrezorDevice, State } from 'flowtype';

src/utils/notification.js

@@ -1,5 +1,4 @@
-import colors from 'config/colors';
+import { colors, icons } from 'trezor-ui-components';
-import icons from 'config/icons';
 
 const getPrimaryColor = type => {
     let color;

src/views/Landing/components/LandingWrapper/index.js

@@ -5,9 +5,8 @@ import styled from 'styled-components';
 import Header from 'components/Header';
 import Footer from 'components/Footer';
 import Log from 'components/Log';
-import Loader from 'components/Loader';
 import ContextNotifications from 'components/notifications/Context';
-import colors from 'config/colors';
+import { colors, Loader } from 'trezor-ui-components';
 
 import InitializationError from '../InitializationError';
 

src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js

@@ -1,9 +1,8 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import colors from 'config/colors';
 
-import { H4, P, Button, Link } from 'trezor-ui-components';
+import { H4, P, Button, Link, colors } from 'trezor-ui-components';
 import CoinLogo from 'components/images/CoinLogo';
 
 import { FormattedMessage } from 'react-intl';

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

@@ -1,18 +1,14 @@
 /* @flow */
 
 import * as React from 'react';
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Loader from 'components/Loader';
+import PropTypes from 'prop-types';
+import { FormattedMessage } from 'react-intl';
+import { P, H4, Loader, colors } from 'trezor-ui-components';
 import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
-import { H1 } from 'components/Heading';
-import P from 'components/Paragraph';
-import colors from 'config/colors';
-
-import type { State } from 'flowtype';
 
 import FirmwareUpdate from 'views/Wallet/views/FirmwareUpdate';
-import { FormattedMessage } from 'react-intl';
+import type { State } from 'flowtype';
 import FirmwareUnsupported from './components/FirmwareUnsupported';
 
 import l10nMessages from './index.messages';
@@ -43,7 +39,7 @@ const Loading = styled.div`
     flex-direction: column;
 `;
 
-const Title = styled(H1)`
+const Title = styled(H4)`
     font-size: ${FONT_SIZE.BIGGER};
     font-weight: ${FONT_WEIGHT.NORMAL};
     color: ${props => (props.type === 'progress' ? colors.TEXT_SECONDARY : '')};

src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js

@@ -1,18 +1,14 @@
 /* @flow */
 import React from 'react';
 import BigNumber from 'bignumber.js';
-import Icon from 'components/Icon';
-import colors from 'config/colors';
-import Loader from 'components/Loader';
 import styled, { css } from 'styled-components';
-import * as stateUtils from 'reducers/utils';
+import { NavLink } from 'react-router-dom';
-import Tooltip from 'components/Tooltip';
-import ICONS from 'config/icons';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 import { toFiatCurrency } from 'utils/fiatConverter';
-
+import * as stateUtils from 'reducers/utils';
-import { NavLink } from 'react-router-dom';
 import { findDeviceAccounts } from 'reducers/AccountsReducer';
+
+import { Icon, Loader, Tooltip, icons as ICONS, colors } from 'trezor-ui-components';
 import { FONT_SIZE, BORDER_WIDTH, LEFT_NAVIGATION_ROW } from 'config/variables';
 
 import type { Accounts } from 'flowtype';

src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js

@@ -2,11 +2,9 @@
 
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
-import Icon from 'components/Icon';
 import DeviceHeader from 'components/DeviceHeader';
 import * as deviceUtils from 'utils/device';
-import icons from 'config/icons';
+import { Icon, colors, icons } from 'trezor-ui-components';
-import colors from 'config/colors';
 
 import type { TrezorDevice } from 'flowtype';
 import type { Props as CommonProps } from '../../../common';

src/views/Wallet/components/LeftNavigation/components/Divider/index.js

@@ -2,7 +2,7 @@ import styled, { css } from 'styled-components';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 const Wrapper = styled.div`

src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Icon from 'components/Icon';
 import CoinLogo from 'components/images/CoinLogo';
 import { FONT_SIZE, LEFT_NAVIGATION_ROW } from 'config/variables';
-import colors from 'config/colors';
+import { Icon, colors } from 'trezor-ui-components';
 import Row from '../Row';
 
 const CoinNameWrapper = styled.div`

src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import styled from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { SCREEN_SIZE } from 'config/variables';
 import { SLIDE_RIGHT, SLIDE_LEFT } from 'config/animations';
 

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 
 const Wrapper = styled.div`

src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import styled, { css } from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import React, { PureComponent } from 'react';
 
 type Props = {

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

@@ -5,7 +5,7 @@ import React from 'react';
 import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 import { NavLink } from 'react-router-dom';
 import { connect } from 'react-redux';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import type { State } from 'flowtype';
 import { FormattedMessage } from 'react-intl';
 

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

@@ -5,7 +5,7 @@ import { getPattern } from 'support/routes';
 
 import { NavLink } from 'react-router-dom';
 
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 
 import { FormattedMessage } from 'react-intl';
 import l10nCommonMessages from 'views/common.messages';

src/views/Wallet/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
 import * as React from 'react';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import styled, { css } from 'styled-components';
 import { connect } from 'react-redux';
 import { Route, withRouter } from 'react-router-dom';

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

@@ -1,8 +1,7 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import colors from 'config/colors';
+import { colors, H5 } from 'trezor-ui-components';
-import { H2 } from 'components/Heading';
 import Transaction from 'components/Transaction';
 
 import type { Network } from 'reducers/LocalStorageReducer';
@@ -25,7 +24,7 @@ const PendingTransactions = (props: Props) => {
 
     return (
         <Wrapper>
-            <H2>Pending transactions</H2>
+            <H5>Pending transactions</H5>
             {pending.map(tx => (
                 <Transaction key={tx.hash} network={props.network} tx={tx} />
             ))}

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

@@ -1,10 +1,9 @@
 /* @flow */
 import React, { Component } from 'react';
 import styled from 'styled-components';
-import { Input, TextArea, Button } from 'trezor-ui-components';
+import { Input, TextArea, Button, colors } from 'trezor-ui-components';
 import Title from 'views/Wallet/components/Title';
 import Content from 'views/Wallet/components/Content';
-import colors from 'config/colors';
 import { SCREEN_SIZE } from 'config/variables';
 import { FormattedMessage } from 'react-intl';