diff --git a/src/components/Notification/components/NotificationButton/index.js b/src/components/Notification/components/NotificationButton/index.js index 73b99946..6488fafb 100644 --- a/src/components/Notification/components/NotificationButton/index.js +++ b/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 colors from 'config/colors'; +import { Icon, Loader, colors } from 'trezor-ui-components'; 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 = { diff --git a/src/components/images/DeviceIcon/index.js b/src/components/images/DeviceIcon/index.js index b52a452d..f8f19010 100644 --- a/src/components/images/DeviceIcon/index.js +++ b/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 ICONS from 'config/icons'; +import { colors as COLORS, icons as ICONS } from 'trezor-ui-components'; import styled from 'styled-components'; import type { TrezorDevice } from 'flowtype'; diff --git a/src/components/modals/confirm/Address/index.js b/src/components/modals/confirm/Address/index.js index f0ee049a..1de717ca 100644 --- a/src/components/modals/confirm/Address/index.js +++ b/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 { FormattedMessage } from 'react-intl'; -import colors from 'config/colors'; +import { H6, P, colors } from 'trezor-ui-components'; import { FONT_SIZE } from 'config/variables'; -import { H3 } from 'components/Heading'; -import P from 'components/Paragraph'; -import { FormattedMessage } from 'react-intl'; - import l10nCommonMessages from 'views/common.messages'; import l10nMessages from './index.messages'; @@ -43,9 +40,9 @@ const ConfirmAddress = (props: Props) => { return (
-

+

-
+

diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index d25788e0..596ab53a 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/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) => {
-

+

-
-

+ +

diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js index 5538e0e2..d95dee28 100644 --- a/src/components/modals/passphrase/Type/index.js +++ b/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) => (
-

Complete the action on {props.device.label} device

-

+

Complete the action on {props.device.label} device
+

If you enter a wrong passphrase, you will not unlock the desired hidden wallet.

diff --git a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js b/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js index e7d5b1b5..c6ce5b17 100644 --- a/src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js +++ b/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 ICONS from 'config/icons'; -import colors from 'config/colors'; -import Notification from 'components/Notification'; +import { colors, Notification, Icon, icons as ICONS } from 'trezor-ui-components'; import { getIcon, getPrimaryColor } from 'utils/notification'; const Wrapper = styled.div``; diff --git a/src/config/animations.js b/src/config/animations.js index 314230b0..2504a4aa 100644 --- a/src/config/animations.js +++ b/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 { diff --git a/src/support/styles/Tooltip.js b/src/support/styles/Tooltip.js index 0422a5fe..90391b18 100644 --- a/src/support/styles/Tooltip.js +++ b/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` diff --git a/src/support/styles/index.js b/src/support/styles/index.js index f8568221..c35166bf 100644 --- a/src/support/styles/index.js +++ b/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'; diff --git a/src/utils/device.js b/src/utils/device.js index 759b3db6..18b4fef2 100644 --- a/src/utils/device.js +++ b/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'; diff --git a/src/utils/notification.js b/src/utils/notification.js index 4ad63ac1..884a6dd8 100644 --- a/src/utils/notification.js +++ b/src/utils/notification.js @@ -1,5 +1,4 @@ -import colors from 'config/colors'; -import icons from 'config/icons'; +import { colors, icons } from 'trezor-ui-components'; const getPrimaryColor = type => { let color; diff --git a/src/views/Landing/components/LandingWrapper/index.js b/src/views/Landing/components/LandingWrapper/index.js index b09bfafe..2bb6c19f 100644 --- a/src/views/Landing/components/LandingWrapper/index.js +++ b/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'; diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js index 0f9b4956..b0e55b3f 100644 --- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js +++ b/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'; diff --git a/src/views/Wallet/components/Content/index.js b/src/views/Wallet/components/Content/index.js index d9889747..26dbbbaf 100644 --- a/src/views/Wallet/components/Content/index.js +++ b/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 : '')}; diff --git a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js index 4ebb7cb7..5edf7a81 100644 --- a/src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js +++ b/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 Tooltip from 'components/Tooltip'; -import ICONS from 'config/icons'; +import { NavLink } from 'react-router-dom'; import { FormattedMessage, FormattedNumber } from 'react-intl'; import { toFiatCurrency } from 'utils/fiatConverter'; - -import { NavLink } from 'react-router-dom'; +import * as stateUtils from 'reducers/utils'; 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'; diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js index 398a7d22..ba4dc4ed 100644 --- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/DeviceList/index.js +++ b/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 colors from 'config/colors'; +import { Icon, colors, icons } from 'trezor-ui-components'; import type { TrezorDevice } from 'flowtype'; import type { Props as CommonProps } from '../../../common'; diff --git a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js b/src/views/Wallet/components/LeftNavigation/components/Divider/index.js index a22d7d60..01ea1115 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Divider/index.js +++ b/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` diff --git a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js b/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js index 4be366de..2e6669b7 100644 --- a/src/views/Wallet/components/LeftNavigation/components/RowCoin/index.js +++ b/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` diff --git a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js b/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js index 3db0d939..1dd7e0e4 100644 --- a/src/views/Wallet/components/LeftNavigation/components/Sidebar/index.js +++ b/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'; diff --git a/src/views/Wallet/components/Title/index.js b/src/views/Wallet/components/Title/index.js index d30431a9..3eefdea7 100644 --- a/src/views/Wallet/components/Title/index.js +++ b/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` diff --git a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js b/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js index 6fd72205..34120828 100644 --- a/src/views/Wallet/components/TopNavigationAccount/components/Indicator/index.js +++ b/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 = { diff --git a/src/views/Wallet/components/TopNavigationAccount/index.js b/src/views/Wallet/components/TopNavigationAccount/index.js index b1812587..b4847f4f 100644 --- a/src/views/Wallet/components/TopNavigationAccount/index.js +++ b/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'; diff --git a/src/views/Wallet/components/TopNavigationWalletSettings/index.js b/src/views/Wallet/components/TopNavigationWalletSettings/index.js index 6d25a34b..140fe7f7 100644 --- a/src/views/Wallet/components/TopNavigationWalletSettings/index.js +++ b/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'; diff --git a/src/views/Wallet/index.js b/src/views/Wallet/index.js index f601fce2..e0f13bca 100644 --- a/src/views/Wallet/index.js +++ b/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'; diff --git a/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js b/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js index b621029b..080a61c8 100644 --- a/src/views/Wallet/views/Account/Send/components/PendingTransactions/index.js +++ b/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 { H2 } from 'components/Heading'; +import { colors, H5 } from 'trezor-ui-components'; import Transaction from 'components/Transaction'; import type { Network } from 'reducers/LocalStorageReducer'; @@ -25,7 +24,7 @@ const PendingTransactions = (props: Props) => { return ( -

Pending transactions

+
Pending transactions
{pending.map(tx => ( ))} diff --git a/src/views/Wallet/views/Account/SignVerify/index.js b/src/views/Wallet/views/Account/SignVerify/index.js index 24f572fd..6e2ed99b 100644 --- a/src/views/Wallet/views/Account/SignVerify/index.js +++ b/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';