From 55a499ae094648364457eeece5d7a3e6e747f4aa Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 18 Mar 2019 17:18:55 +0100
Subject: [PATCH] more trezor ui components

---
 src/components/Log/index.js                   | 15 ++--
 .../modals/confirm/NoBackup/index.js          | 17 ++---
 .../modals/confirm/UnverifiedAddress/index.js | 21 ++----
 .../modals/device/Duplicate/index.js          | 17 ++---
 src/components/modals/device/Forget/index.js  | 14 ++--
 .../modals/device/Remember/index.js           | 11 +--
 .../modals/device/WalletType/index.js         | 17 ++---
 .../modals/external/Cardano/index.js          | 16 ++--
 src/components/modals/external/Nem/index.js   | 22 +++---
 .../modals/external/Stellar/index.js          | 16 ++--
 src/components/modals/external/Tezos/index.js | 10 +--
 .../modals/passphrase/Passphrase/index.js     | 40 ++++------
 src/components/modals/pin/Pin/index.js        | 74 ++++++++-----------
 .../components/BetaDisclaimer/index.js        | 12 +--
 .../components/BrowserNotSupported/index.js   | 15 ++--
 .../Landing/components/ConnectDevice/index.js | 12 ++-
 src/views/Landing/views/Import/index.js       | 11 +--
 .../Landing/views/InstallBridge/index.js      | 10 +--
 .../components/FirmwareUnsupported/index.js   |  9 +--
 .../components/DeviceMenu/index.js            |  3 +-
 .../views/Account/Receive/ripple/index.js     |  6 --
 .../Account/Summary/components/Token/index.js |  5 +-
 .../Wallet/views/DeviceSettings/index.js      | 12 +--
 .../Wallet/views/FirmwareUpdate/index.js      | 13 +---
 src/views/Wallet/views/Initialize/index.js    |  7 +-
 src/views/Wallet/views/NoBackup/index.js      | 19 ++---
 26 files changed, 146 insertions(+), 278 deletions(-)

diff --git a/src/components/Log/index.js b/src/components/Log/index.js
index fadff58d..c50d27f8 100644
--- a/src/components/Log/index.js
+++ b/src/components/Log/index.js
@@ -3,17 +3,12 @@ import React from 'react';
 import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import colors from 'config/colors';
-import { H2 } from 'components/Heading';
-import Button from 'components/Button';
-import Tooltip from 'components/Tooltip';
+
+import { Button, Tooltip, H5, P, Icon, icons, colors } from 'trezor-ui-components';
 import ReactJson from 'react-json-view';
-import Icon from 'components/Icon';
-import P from 'components/Paragraph';
 import { FormattedMessage } from 'react-intl';
 
 import * as LogActions from 'actions/LogActions';
-import icons from 'config/icons';
 import type { State, Dispatch } from 'flowtype';
 import l10nMessages from './index.messages';
 
@@ -82,10 +77,10 @@ const Log = (props: Props): ?React$Element<string> => {
             <Click onClick={props.toggle}>
                 <Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
             </Click>
-            <H2>
+            <H5>
                 <FormattedMessage {...l10nMessages.TR_LOG} />
-            </H2>
-            <StyledParagraph isSmaller>
+            </H5>
+            <StyledParagraph size="small">
                 <FormattedMessage {...l10nMessages.TR_ATTENTION_COLON_THE_LOG_CONTAINS} />
             </StyledParagraph>
             <LogWrapper>
diff --git a/src/components/modals/confirm/NoBackup/index.js b/src/components/modals/confirm/NoBackup/index.js
index 8cf08208..cd7e8cf0 100644
--- a/src/components/modals/confirm/NoBackup/index.js
+++ b/src/components/modals/confirm/NoBackup/index.js
@@ -4,15 +4,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import icons from 'config/icons';
 import { getOldWalletUrl } from 'utils/url';
-import colors from 'config/colors';
 
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Icon from 'components/Icon';
-import Button from 'components/Button';
-import Link from 'components/Link';
+import { H5, P, Icon, Button, Link, colors, icons } from 'trezor-ui-components';
 
 import type { TrezorDevice } from 'flowtype';
 import type { Props as BaseProps } from '../../Container';
@@ -56,7 +50,10 @@ const ProceedButton = styled(Button)`
 `;
 
 const StyledP = styled(P)`
-    padding-bottom: 20px;
+    /* boost-specificity hack to override P base styling */
+    && {
+        padding-bottom: 20px;
+    }
 `;
 
 const Row = styled.div`
@@ -69,9 +66,9 @@ const Confirmation = (props: Props) => (
         <StyledLink onClick={() => props.onReceiveConfirmation(false)}>
             <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
         </StyledLink>
-        <H2>Your Trezor is not backed up</H2>
+        <H5>Your Trezor is not backed up</H5>
         <Icon size={48} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-        <StyledP isSmaller>
+        <StyledP size="small">
             If your device is ever lost or damaged, your funds will be lost. Backup your device
             first, to protect your coins against such events.
         </StyledP>
diff --git a/src/components/modals/confirm/UnverifiedAddress/index.js b/src/components/modals/confirm/UnverifiedAddress/index.js
index 18609720..21bfdc94 100644
--- a/src/components/modals/confirm/UnverifiedAddress/index.js
+++ b/src/components/modals/confirm/UnverifiedAddress/index.js
@@ -3,15 +3,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { getOldWalletUrl } from 'utils/url';
-import icons from 'config/icons';
-import colors from 'config/colors';
-
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Icon from 'components/Icon';
-import Button from 'components/Button';
-import Link from 'components/Link';
 import { FormattedMessage } from 'react-intl';
+import { Link, Button, Icon, P, H5, colors, icons } from 'trezor-ui-components';
 
 import type { TrezorDevice } from 'flowtype';
 import l10nMessages from './index.messages';
@@ -45,7 +38,9 @@ const Content = styled.div`
 `;
 
 const StyledP = styled(P)`
-    padding-bottom: 20px;
+    && {
+        padding-bottom: 20px;
+    }
 `;
 
 const Divider = styled.div`
@@ -152,8 +147,8 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
                     <StyledLink onClick={onCancel}>
                         <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                     </StyledLink>
-                    <H2>{deviceStatus}</H2>
-                    <StyledP isSmaller>
+                    <H5>{deviceStatus}</H5>
+                    <StyledP size="small">
                         <FormattedMessage
                             {...l10nMessages.TR_TO_PREVENT_PHISHING_ATTACKS_COMMA}
                             values={{ claim }}
@@ -174,8 +169,8 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
                 {needsBackup && (
                     <>
                         <Content>
-                            <H2>Device {device.label} is not backed up</H2>
-                            <StyledP isSmaller>
+                            <H5>Device {device.label} is not backed up</H5>
+                            <StyledP size="small">
                                 If your device is ever lost or damaged, your funds will be lost.
                                 Backup your device first, to protect your coins against such events.
                             </StyledP>
diff --git a/src/components/modals/device/Duplicate/index.js b/src/components/modals/device/Duplicate/index.js
index 0b696a95..4c3044b0 100644
--- a/src/components/modals/device/Duplicate/index.js
+++ b/src/components/modals/device/Duplicate/index.js
@@ -3,16 +3,9 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import icons from 'config/icons';
-import colors from 'config/colors';
 import { FONT_SIZE } from 'config/variables';
 
-import { H3 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Button from 'components/Button';
-import Input from 'components/inputs/Input';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
+import { H5, P, Button, Input, Icon, Link, icons, colors } from 'trezor-ui-components';
 
 import { getDuplicateInstanceNumber } from 'reducers/utils';
 
@@ -51,7 +44,9 @@ const Column = styled.div`
 `;
 
 const StyledP = styled(P)`
-    padding: 10px 0px;
+    && {
+        padding: 10px 0px;
+    }
 `;
 
 const StyledButton = styled(Button)`
@@ -139,8 +134,8 @@ class DuplicateDevice extends PureComponent<Props, State> {
                 <StyledLink onClick={onCancel}>
                     <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                 </StyledLink>
-                <H3>Clone {device.label}?</H3>
-                <StyledP isSmaller>
+                <H5>Clone {device.label}?</H5>
+                <StyledP size="small">
                     This will create new instance of device which can be used with different
                     passphrase
                 </StyledP>
diff --git a/src/components/modals/device/Forget/index.js b/src/components/modals/device/Forget/index.js
index 79339bf8..7a58094b 100644
--- a/src/components/modals/device/Forget/index.js
+++ b/src/components/modals/device/Forget/index.js
@@ -4,9 +4,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Button from 'components/Button';
+import { H5, P, Button } from 'trezor-ui-components';
 import { FormattedMessage } from 'react-intl';
 
 import type { TrezorDevice } from 'flowtype';
@@ -31,7 +29,9 @@ const Wrapper = styled.div`
 `;
 
 const StyledP = styled(P)`
-    padding: 20px 0px;
+    && {
+        padding: 20px 0px;
+    }
 `;
 
 const Row = styled.div`
@@ -69,15 +69,15 @@ class ForgetDevice extends PureComponent<Props> {
     render() {
         return (
             <Wrapper>
-                <H2>
+                <H5>
                     <FormattedMessage
                         {...l10nDeviceMessages.TR_FORGET_LABEL}
                         values={{
                             deviceLabel: this.props.device.instanceLabel,
                         }}
                     />
-                </H2>
-                <StyledP isSmaller>
+                </H5>
+                <StyledP size="small">
                     <FormattedMessage
                         {...l10nMessages.TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM}
                     />
diff --git a/src/components/modals/device/Remember/index.js b/src/components/modals/device/Remember/index.js
index 604fc21c..219a9d46 100644
--- a/src/components/modals/device/Remember/index.js
+++ b/src/components/modals/device/Remember/index.js
@@ -3,10 +3,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import { H3 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Loader from 'components/Loader';
-import Button from 'components/Button';
+import { H5, P, Loader, Button } from 'trezor-ui-components';
 import { FormattedMessage } from 'react-intl';
 
 import type { TrezorDevice } from 'flowtype';
@@ -124,15 +121,15 @@ class RememberDevice extends PureComponent<Props, State> {
         }
         return (
             <Wrapper>
-                <H3>
+                <H5>
                     <FormattedMessage
                         {...l10nDeviceMessages.TR_FORGET_LABEL}
                         values={{
                             deviceLabel: label,
                         }}
                     />
-                </H3>
-                <StyledP isSmaller>
+                </H5>
+                <StyledP size="small">
                     <FormattedMessage
                         {...l10nMessages.TR_WOULD_YOU_LIKE_TREZOR_WALLET_TO}
                         values={{
diff --git a/src/components/modals/device/WalletType/index.js b/src/components/modals/device/WalletType/index.js
index ced1782d..8051dbf9 100644
--- a/src/components/modals/device/WalletType/index.js
+++ b/src/components/modals/device/WalletType/index.js
@@ -4,15 +4,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 
-import icons from 'config/icons';
-import colors from 'config/colors';
-
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Button from 'components/Button';
-import Tooltip from 'components/Tooltip';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
+import { H5, P, Button, Tooltip, Link, Icon, icons, colors } from 'trezor-ui-components';
+
 import WalletTypeIcon from 'components/images/WalletType';
 import { FormattedMessage, injectIntl } from 'react-intl';
 
@@ -41,7 +34,7 @@ const Header = styled.div`
     color: ${colors.TEXT_PRIMARY};
 `;
 
-const StyledHeading = styled(H2)`
+const StyledHeading = styled(H5)`
     padding: 30px 48px 10px 48px;
 `;
 
@@ -132,7 +125,7 @@ class WalletType extends PureComponent<Props> {
                         <WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} />
                         <FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} />
                     </Header>
-                    <P isSmaller>
+                    <P size="small">
                         <FormattedMessage {...l10nMessages.TR_CONTINUE_TO_ACCESS_STANDARD_WALLET} />
                     </P>
                     <StyledButton onClick={() => onWalletTypeRequest(false)}>
@@ -154,7 +147,7 @@ class WalletType extends PureComponent<Props> {
                         <WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} />
                         <FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} />
                     </Header>
-                    <P isSmaller>
+                    <P size="small">
                         <FormattedMessage
                             {...l10nMessages.TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK}
                         />
diff --git a/src/components/modals/external/Cardano/index.js b/src/components/modals/external/Cardano/index.js
index 7bedb2bd..8d1356d2 100644
--- a/src/components/modals/external/Cardano/index.js
+++ b/src/components/modals/external/Cardano/index.js
@@ -3,15 +3,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import colors from 'config/colors';
-import icons from 'config/icons';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import Button from 'components/Button';
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import coins from 'constants/coins';
 import { FormattedMessage } from 'react-intl';
+import { H5, Button, P, Icon, Link, icons, colors } from 'trezor-ui-components';
+import coins from 'constants/coins';
 
 import l10nCommonMessages from '../common.messages';
 import l10nMessages from './index.messages';
@@ -54,10 +48,10 @@ const CardanoWallet = (props: Props) => (
             <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
         </StyledLink>
         <Img src={CardanoImage} />
-        <H2>
+        <H5>
             <FormattedMessage {...l10nMessages.TR_CARDANO_WALLET} />
-        </H2>
-        <P isSmaller>
+        </H5>
+        <P size="small">
             <FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} />
         </P>
 
diff --git a/src/components/modals/external/Nem/index.js b/src/components/modals/external/Nem/index.js
index 4e03a333..68f14a1f 100644
--- a/src/components/modals/external/Nem/index.js
+++ b/src/components/modals/external/Nem/index.js
@@ -3,13 +3,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import colors from 'config/colors';
-import icons from 'config/icons';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import Button from 'components/Button';
-import { H2, H4 } from 'components/Heading';
-import P from 'components/Paragraph';
+import { H5, Button, P, Icon, Link, icons, colors } from 'trezor-ui-components';
+
 import coins from 'constants/coins';
 import { FormattedMessage } from 'react-intl';
 
@@ -49,15 +44,16 @@ const NemWallet = (props: Props) => (
         <StyledLink onClick={props.onCancel}>
             <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
         </StyledLink>
-        <H2>
+        <H5>
             <FormattedMessage {...l10nMessages.TR_NEM_WALLET} />
-        </H2>
-        <P isSmaller>
+        </H5>
+        <P size="small">
             <FormattedMessage {...l10nMessages.TR_WE_HAVE_PARTNERED_UP_WITH_THE_NEM} />
+            <br />
+            <strong>
+                <FormattedMessage {...l10nMessages.TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL} />
+            </strong>
         </P>
-        <H4>
-            <FormattedMessage {...l10nMessages.TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL} />
-        </H4>
         <Img src={NemImage} />
         <Link href={coins.find(i => i.id === 'xem').url}>
             <StyledButton onClick={props.onCancel}>
diff --git a/src/components/modals/external/Stellar/index.js b/src/components/modals/external/Stellar/index.js
index 486ee7f5..c93e61a5 100644
--- a/src/components/modals/external/Stellar/index.js
+++ b/src/components/modals/external/Stellar/index.js
@@ -3,15 +3,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import colors from 'config/colors';
-import icons from 'config/icons';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import Button from 'components/Button';
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import coins from 'constants/coins';
 import { FormattedMessage } from 'react-intl';
+import { Button, H5, Link, P, Icon, icons, colors } from 'trezor-ui-components';
+import coins from 'constants/coins';
 
 import l10nCommonMessages from '../common.messages';
 import l10nMessages from './index.messages';
@@ -54,10 +48,10 @@ const StellarWallet = (props: Props) => (
             <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
         </StyledLink>
         <Img src={StellarImage} />
-        <H2>
+        <H5>
             <FormattedMessage {...l10nMessages.TR_STELLAR_WALLET} />
-        </H2>
-        <P isSmaller>
+        </H5>
+        <P size="small">
             <FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} />
         </P>
 
diff --git a/src/components/modals/external/Tezos/index.js b/src/components/modals/external/Tezos/index.js
index f5d1176e..fa4a4c02 100644
--- a/src/components/modals/external/Tezos/index.js
+++ b/src/components/modals/external/Tezos/index.js
@@ -3,13 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import colors from 'config/colors';
-import icons from 'config/icons';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import Button from 'components/Button';
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
+import { Button, H5, Link, P, Icon, icons, colors } from 'trezor-ui-components';
 import coins from 'constants/coins';
 
 import TezosImage from './images/xtz.png';
@@ -50,7 +44,7 @@ const TezosWallet = (props: Props) => (
             <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
         </StyledLink>
         <Img src={TezosImage} />
-        <H2>Tezos wallet</H2>
+        <H5>Tezos wallet</H5>
         <P isSmaller>You will be redirected to external wallet</P>
 
         <Link href={coins.find(i => i.id === 'xtz').url}>
diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js
index 39243513..e0ef1989 100644
--- a/src/components/modals/passphrase/Passphrase/index.js
+++ b/src/components/modals/passphrase/Passphrase/index.js
@@ -3,15 +3,8 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';
-
-import colors from 'config/colors';
-import { FONT_SIZE, TRANSITION } from 'config/variables';
-
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Checkbox from 'components/Checkbox';
-import Button from 'components/Button';
-import Input from 'components/inputs/Input';
+import { Button, Input, Checkbox, P, H5, colors } from 'trezor-ui-components';
+import { FONT_SIZE } from 'config/variables';
 
 import type { TrezorDevice } from 'flowtype';
 import l10nCommonMessages from 'views/common.messages';
@@ -68,24 +61,13 @@ const Footer = styled.div`
 const LinkButton = styled(Button)`
     padding: 0;
     margin: 0;
-    text-decoration: none;
-    cursor: pointer;
-    transition: ${TRANSITION.HOVER};
     font-size: ${FONT_SIZE.SMALL};
-    border-radius: 0;
-    border-bottom: 1px solid ${colors.GREEN_PRIMARY};
-    background: transparent;
+    text-decoration: underline;
+    color: ${colors.GREEN_PRIMARY};
 
-    &,
-    &:visited,
-    &:active,
     &:hover {
         color: ${colors.GREEN_PRIMARY};
-    }
-
-    &:hover {
-        border-color: transparent;
-        background: transparent;
+        text-decoration: none;
     }
 `;
 
@@ -208,14 +190,14 @@ class Passphrase extends PureComponent<Props, State> {
     render() {
         return (
             <Wrapper>
-                <H2>
+                <H5>
                     <FormattedMessage
                         {...l10nMessages.TR_ENTER_DEVICE_PASSPHRASE}
                         values={{
                             deviceLabel: this.state.deviceLabel,
                         }}
                     />
-                </H2>
+                </H5>
                 <P isSmaller>
                     <FormattedMessage {...l10nMessages.TR_NOTE_COLON_PASSPHRASE} />{' '}
                     <FormattedMessage {...l10nMessages.TR_IF_YOU_FORGET_YOUR_PASSPHRASE_COMMA} />
@@ -276,12 +258,16 @@ class Passphrase extends PureComponent<Props, State> {
                     </Button>
                 </Row>
                 <Footer>
-                    <P isSmaller>
+                    <P size="small">
                         <FormattedMessage
                             {...l10nMessages.TR_CHANGED_YOUR_MIND}
                             values={{
                                 TR_GO_TO_STANDARD_WALLET: (
-                                    <LinkButton isGreen onClick={() => this.submitPassphrase(true)}>
+                                    <LinkButton
+                                        isGreen
+                                        isTransparent
+                                        onClick={() => this.submitPassphrase(true)}
+                                    >
                                         <FormattedMessage
                                             {...l10nCommonMessages.TR_GO_TO_STANDARD_WALLET}
                                         />
diff --git a/src/components/modals/pin/Pin/index.js b/src/components/modals/pin/Pin/index.js
index 1d3b5a13..3dab5a81 100644
--- a/src/components/modals/pin/Pin/index.js
+++ b/src/components/modals/pin/Pin/index.js
@@ -3,19 +3,13 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
-import P from 'components/Paragraph';
-import { H2 } from 'components/Heading';
-import Link from 'components/Link';
-import Button from 'components/Button';
+import { H5, Link, Button, P, ButtonPin, InputPin } from 'trezor-ui-components';
 import { FormattedMessage } from 'react-intl';
 
 import l10nCommonMessages from 'views/common.messages';
 import type { TrezorDevice } from 'flowtype';
 import l10nMessages from './index.messages';
 
-import PinButton from './components/Button';
-import PinInput from './components/Input';
-
 import type { Props as BaseProps } from '../../Container';
 
 type Props = {
@@ -31,12 +25,24 @@ const Wrapper = styled.div`
     padding: 30px 48px;
 `;
 
-const InputRow = styled.div`
+const InputWrapper = styled.div`
     margin-top: 24px;
+    margin-bottom: 10px;
     max-width: 260px;
 `;
+const PinRow = styled.div`
+    display: flex;
+    justify-content: space-between;
+    button {
+        width: 30%;
+        height: 0;
+        padding-bottom: 30%;
+    }
 
-const PinRow = styled.div``;
+    & + & {
+        margin-top: 10px;
+    }
+`;
 
 const StyledP = styled(P)`
     padding-top: 5px;
@@ -150,56 +156,38 @@ class Pin extends PureComponent<Props, State> {
         const { pin } = this.state;
         return (
             <Wrapper>
-                <H2>
+                <H5>
                     <FormattedMessage
                         {...l10nMessages.TR_ENTER_PIN}
                         values={{ deviceLabel: device.label }}
                     />
-                </H2>
-                <P isSmaller>
+                </H5>
+                <P size="small">
                     <FormattedMessage {...l10nMessages.TR_THE_PIN_LAYOUT_IS_DISPLAYED_ON} />
                 </P>
-                <InputRow>
-                    <PinInput value={pin} onDeleteClick={() => this.onPinBackspace()} />
-                </InputRow>
+                <InputWrapper>
+                    <InputPin value={pin} onDeleteClick={() => this.onPinBackspace()} />
+                </InputWrapper>
                 <PinRow>
-                    <PinButton type="button" data-value="7" onClick={() => this.onPinAdd(7)}>
-                        &#8226;{' '}
-                    </PinButton>
-                    <PinButton type="button" data-value="8" onClick={() => this.onPinAdd(8)}>
-                        &#8226;
-                    </PinButton>
-                    <PinButton type="button" data-value="9" onClick={() => this.onPinAdd(9)}>
-                        &#8226;
-                    </PinButton>
+                    <ButtonPin type="button" data-value="7" onClick={() => this.onPinAdd(7)} />
+                    <ButtonPin type="button" data-value="8" onClick={() => this.onPinAdd(8)} />
+                    <ButtonPin type="button" data-value="9" onClick={() => this.onPinAdd(9)} />
                 </PinRow>
                 <PinRow>
-                    <PinButton type="button" data-value="4" onClick={() => this.onPinAdd(4)}>
-                        &#8226;{' '}
-                    </PinButton>
-                    <PinButton type="button" data-value="5" onClick={() => this.onPinAdd(5)}>
-                        &#8226;
-                    </PinButton>
-                    <PinButton type="button" data-value="6" onClick={() => this.onPinAdd(6)}>
-                        &#8226;
-                    </PinButton>
+                    <ButtonPin type="button" data-value="4" onClick={() => this.onPinAdd(4)} />
+                    <ButtonPin type="button" data-value="5" onClick={() => this.onPinAdd(5)} />
+                    <ButtonPin type="button" data-value="6" onClick={() => this.onPinAdd(6)} />
                 </PinRow>
                 <PinRow>
-                    <PinButton type="button" data-value="1" onClick={() => this.onPinAdd(1)}>
-                        &#8226;{' '}
-                    </PinButton>
-                    <PinButton type="button" data-value="2" onClick={() => this.onPinAdd(2)}>
-                        &#8226;
-                    </PinButton>
-                    <PinButton type="button" data-value="3" onClick={() => this.onPinAdd(3)}>
-                        &#8226;
-                    </PinButton>
+                    <ButtonPin type="button" data-value="1" onClick={() => this.onPinAdd(1)} />
+                    <ButtonPin type="button" data-value="2" onClick={() => this.onPinAdd(2)} />
+                    <ButtonPin type="button" data-value="3" onClick={() => this.onPinAdd(3)} />
                 </PinRow>
                 <Footer>
                     <Button type="button" onClick={() => onPinSubmit(pin)}>
                         <FormattedMessage {...l10nMessages.TR_ENTER_PIN} />
                     </Button>
-                    <StyledP isSmaller>
+                    <StyledP size="small">
                         <FormattedMessage
                             {...l10nMessages.TR_NOT_SURE_HOW_PIN_WORKS}
                             values={{
diff --git a/src/views/Landing/components/BetaDisclaimer/index.js b/src/views/Landing/components/BetaDisclaimer/index.js
index 27c45c8c..1c647de5 100644
--- a/src/views/Landing/components/BetaDisclaimer/index.js
+++ b/src/views/Landing/components/BetaDisclaimer/index.js
@@ -5,15 +5,9 @@ import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { FormattedMessage } from 'react-intl';
+import { Button, Icon, P, H5, colors, icons } from 'trezor-ui-components';
 
-import colors from 'config/colors';
-import icons from 'config/icons';
 import { FONT_SIZE } from 'config/variables';
-
-import Icon from 'components/Icon';
-import Button from 'components/Button';
-import P from 'components/Paragraph';
-import { H2 } from 'components/Heading';
 import * as WalletActions from 'actions/WalletActions';
 import l10nMessages from './index.messages';
 
@@ -59,9 +53,9 @@ const StyledIcon = styled(Icon)`
 const BetaDisclaimer = (props: { close: () => void }) => (
     <Wrapper>
         <ModalWindow>
-            <H2>
+            <H5>
                 <FormattedMessage {...l10nMessages.TR_YOU_ARE_OPENING_TREZOR_BETA_WALLET} />
-            </H2>
+            </H5>
             <StyledP>
                 <FormattedMessage
                     {...l10nMessages.TR_TREZOR_BETA_WALLET_IS}
diff --git a/src/views/Landing/components/BrowserNotSupported/index.js b/src/views/Landing/components/BrowserNotSupported/index.js
index df1b9ada..91daf3fa 100644
--- a/src/views/Landing/components/BrowserNotSupported/index.js
+++ b/src/views/Landing/components/BrowserNotSupported/index.js
@@ -1,10 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import Link from 'components/Link';
-import Button from 'components/Button';
-import P from 'components/Paragraph';
-import { H2 } from 'components/Heading';
 import { FormattedMessage } from 'react-intl';
+import { Button, P, H5, Link } from 'trezor-ui-components';
 
 import ChromeImage from 'images/browser-chrome.png';
 import FirefoxImage from 'images/browser-firefox.png';
@@ -34,16 +31,16 @@ const Browser = styled.div`
 
 const BrowserNotSupported = () => (
     <Wrapper>
-        <H2>
+        <H5>
             <FormattedMessage {...l10nMessages.TR_YOUR_BROWSER_IS_NOT_SUPPORTED} />
-        </H2>
-        <P>
+        </H5>
+        <P textAlign="center">
             <FormattedMessage {...l10nMessages.TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED} />
         </P>
         <ChooseBrowserWrapper>
             <Browser>
                 <BrowserLogo src={ChromeImage} />
-                <P isSmaller>Google Chrome</P>
+                <P size="small">Google Chrome</P>
                 <Link href="https://www.google.com/chrome/">
                     <Button>
                         <FormattedMessage {...l10nMessages.TR_GET_CHROME} />
@@ -52,7 +49,7 @@ const BrowserNotSupported = () => (
             </Browser>
             <Browser>
                 <BrowserLogo src={FirefoxImage} />
-                <P isSmaller>Mozzila Firefox</P>
+                <P size="small">Mozzila Firefox</P>
                 <Link href="https://www.mozilla.org/en-US/firefox/new/">
                     <Button>
                         <FormattedMessage {...l10nMessages.TR_GET_FIREFOX} />
diff --git a/src/views/Landing/components/ConnectDevice/index.js b/src/views/Landing/components/ConnectDevice/index.js
index f6a5f1f3..ac7dc9b9 100644
--- a/src/views/Landing/components/ConnectDevice/index.js
+++ b/src/views/Landing/components/ConnectDevice/index.js
@@ -4,14 +4,12 @@ import React, { PureComponent } from 'react';
 import styled, { keyframes } from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import l10nCommonMessages from 'views/common.messages';
-import P from 'components/Paragraph';
-import Button from 'components/Button';
-import { H2 } from 'components/Heading';
+
+import { Button, P, H5, Link, colors } from 'trezor-ui-components';
+
 import { PULSATE } from 'config/animations';
-import colors from 'config/colors';
 import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
 import CaseImage from 'images/macbook.png';
-import Link from 'components/Link';
 
 import { FormattedMessage } from 'react-intl';
 import l10nMessages from './index.messages';
@@ -142,9 +140,9 @@ class ConnectDevice extends PureComponent<Props> {
         return (
             <StyledConnectDevice>
                 <Title>
-                    <H2 claim>
+                    <H5 claim>
                         <FormattedMessage {...l10nMessages.TR_THE_PRIVATE_BANK_IN_YOUR_HANDS} />
-                    </H2>
+                    </H5>
                     <P>
                         <FormattedMessage {...l10nMessages.TR_TREZOR_WALLET_IS_AN_EASY_DASH} />
                     </P>
diff --git a/src/views/Landing/views/Import/index.js b/src/views/Landing/views/Import/index.js
index 8292969b..3b689ed0 100644
--- a/src/views/Landing/views/Import/index.js
+++ b/src/views/Landing/views/Import/index.js
@@ -2,14 +2,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-
-import colors from 'config/colors';
-import icons from 'config/icons';
-
-import { H2 } from 'components/Heading';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
-import Button from 'components/Button';
+import { Button, Link, Icon, H5, icons, colors } from 'trezor-ui-components';
 import LandingWrapper from 'views/Landing/components/LandingWrapper';
 
 const Wrapper = styled.div`
@@ -24,7 +17,7 @@ const Import = () => (
     <LandingWrapper>
         <Wrapper>
             <Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-            <H2>Import tool is under construction</H2>
+            <H5>Import tool is under construction</H5>
             <Link to="/">
                 <Button>Take me back</Button>
             </Link>
diff --git a/src/views/Landing/views/InstallBridge/index.js b/src/views/Landing/views/InstallBridge/index.js
index a6637ab7..d0f09895 100644
--- a/src/views/Landing/views/InstallBridge/index.js
+++ b/src/views/Landing/views/InstallBridge/index.js
@@ -2,15 +2,9 @@
 
 import React, { PureComponent } from 'react';
 import styled from 'styled-components';
-import colors from 'config/colors';
+import { Button, Select, P, Link, Icon, H1, icons as ICONS, colors } from 'trezor-ui-components';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import { Select } from 'components/Select';
-import Link from 'components/Link';
-import { H1 } from 'components/Heading';
-import Button from 'components/Button';
-import P from 'components/Paragraph';
-import Icon from 'components/Icon';
-import ICONS from 'config/icons';
+
 import LandingWrapper from 'views/Landing/components/LandingWrapper';
 import * as RouterActions from 'actions/RouterActions';
 
diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
index 2772fa26..0f9b4956 100644
--- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@@ -3,10 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 import colors from 'config/colors';
 
-import { H1 } from 'components/Heading';
-import Paragraph from 'components/Paragraph';
-import Button from 'components/Button';
-import Link from 'components/Link';
+import { H4, P, Button, Link } from 'trezor-ui-components';
 import CoinLogo from 'components/images/CoinLogo';
 
 import { FormattedMessage } from 'react-intl';
@@ -51,7 +48,7 @@ const Row = styled.div`
     text-align: center;
 `;
 
-const Message = styled(Paragraph)`
+const Message = styled(P)`
     padding: 0 0 15px 0;
     text-align: center;
 `;
@@ -65,7 +62,7 @@ const FirmwareUnsupported = (props: Props) => (
                     <StyledCoinLogo standalone network={props.networkShortcut} />
                 </CoinLogoWrapper>
             )}
-            <H1>{props.title}</H1>
+            <H4>{props.title}</H4>
             <Message>{props.message}</Message>
             <Link href={getInfoUrl(props.networkShortcut)}>
                 <Button>
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
index f1d1d279..09065c4f 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
@@ -4,11 +4,10 @@ import styled from 'styled-components';
 import TrezorConnect from 'trezor-connect';
 import { FormattedMessage } from 'react-intl';
 
-import COLORS from 'config/colors';
+import { Button, colors as COLORS } from 'trezor-ui-components';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
 import { SLIDE_DOWN } from 'config/animations';
 
-import Button from 'components/Button';
 import * as deviceUtils from 'utils/device';
 import l10nCommonMessages from 'views/common.messages';
 import MenuItems from './components/MenuItems';
diff --git a/src/views/Wallet/views/Account/Receive/ripple/index.js b/src/views/Wallet/views/Account/Receive/ripple/index.js
index 2d4c5827..426b28c5 100644
--- a/src/views/Wallet/views/Account/Receive/ripple/index.js
+++ b/src/views/Wallet/views/Account/Receive/ripple/index.js
@@ -56,12 +56,6 @@ const ShowAddressButton = styled(Button)`
     }
 `;
 
-const ShowAddressIcon = styled(Icon)`
-    margin-right: 7px;
-    position: relative;
-    top: 2px;
-`;
-
 const EyeButton = styled(Button)`
     z-index: 10001;
     padding: 0;
diff --git a/src/views/Wallet/views/Account/Summary/components/Token/index.js b/src/views/Wallet/views/Account/Summary/components/Token/index.js
index e4791f28..88d3777f 100644
--- a/src/views/Wallet/views/Account/Summary/components/Token/index.js
+++ b/src/views/Wallet/views/Account/Summary/components/Token/index.js
@@ -2,11 +2,8 @@ import React, { PureComponent } from 'react';
 import styled from 'styled-components';
 import ColorHash from 'color-hash';
 import ScaleText from 'react-scale-text';
-import colors from 'config/colors';
 import { FONT_WEIGHT } from 'config/variables';
-import Button from 'components/Button';
-import Icon from 'components/Icon';
-import ICONS from 'config/icons';
+import { Button, Icon, colors, icons as ICONS } from 'trezor-ui-components';
 import * as stateUtils from 'reducers/utils';
 import BigNumber from 'bignumber.js';
 import PropTypes from 'prop-types';
diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js
index 30878c15..894d37ca 100644
--- a/src/views/Wallet/views/DeviceSettings/index.js
+++ b/src/views/Wallet/views/DeviceSettings/index.js
@@ -1,13 +1,7 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import { H1 } from 'components/Heading';
-import Icon from 'components/Icon';
-import colors from 'config/colors';
-import Button from 'components/Button';
-import P from 'components/Paragraph';
-import Link from 'components/Link';
-import ICONS from 'config/icons';
+import { H4, Icon, Button, P, Link, colors, icons as ICONS } from 'trezor-ui-components';
 import { getOldWalletUrl } from 'utils/url';
 import Content from 'views/Wallet/components/Content';
 import { connect } from 'react-redux';
@@ -36,7 +30,7 @@ const StyledP = styled(P)`
     text-align: center;
 `;
 
-const StyledH1 = styled(H1)`
+const StyledHeading = styled(H4)`
     text-align: center;
 `;
 
@@ -45,7 +39,7 @@ const DeviceSettings = (props: Props) => (
         <Section>
             <Row>
                 <Icon size={60} color={colors.WARNING_PRIMARY} icon={ICONS.WARNING} />
-                <StyledH1>Device settings is under construction</StyledH1>
+                <StyledHeading>Device settings is under construction</StyledHeading>
                 <StyledP>
                     Please use Bitcoin wallet interface to change your device settings
                 </StyledP>
diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js
index 733af140..661ccfad 100644
--- a/src/views/Wallet/views/FirmwareUpdate/index.js
+++ b/src/views/Wallet/views/FirmwareUpdate/index.js
@@ -1,18 +1,13 @@
 /* @flow */
 
 import React from 'react';
+import styled from 'styled-components';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
+import { Button, Link, P, H4, colors } from 'trezor-ui-components';
 import { getOldWalletReleaseUrl } from 'utils/url';
 
-import styled from 'styled-components';
-import { H1 } from 'components/Heading';
-import P from 'components/Paragraph';
-import colors from 'config/colors';
-import Link from 'components/Link';
-import Button from 'components/Button';
-
 import { FONT_SIZE } from 'config/variables';
 import * as deviceUtils from 'utils/device';
 
@@ -166,9 +161,9 @@ const FirmwareUpdate = (props: Props) => (
                 </g>
             </svg>
         </Image>
-        <H1>
+        <H4>
             <FormattedMessage {...l10nMessages.TR_ITS_TIME_TO_UPDATE_FIRMWARE} />
-        </H1>
+        </H4>
         <StyledP>
             <FormattedMessage {...l10nMessages.TR_PLEASE_USE_OLD_WALLET} />
         </StyledP>
diff --git a/src/views/Wallet/views/Initialize/index.js b/src/views/Wallet/views/Initialize/index.js
index 097b7d57..23755d3a 100644
--- a/src/views/Wallet/views/Initialize/index.js
+++ b/src/views/Wallet/views/Initialize/index.js
@@ -1,7 +1,6 @@
 /* @flow */
 import styled from 'styled-components';
-import { H1 } from 'components/Heading';
-import Button from 'components/Button';
+import { H4, Button } from 'trezor-ui-components';
 import { getOldWalletUrl } from 'utils/url';
 import Paragraph from 'components/Paragraph';
 import React from 'react';
@@ -39,9 +38,9 @@ const StyledParagraph = styled(Paragraph)`
 const Initialize = (props: Props) => (
     <Wrapper data-test="Page__device__not__initialized">
         <Row>
-            <H1>
+            <H4>
                 <FormattedMessage {...l10nMessages.TR_YOUR_DEVICE_IS_NOT_INITIALIZED} />
-            </H1>
+            </H4>
             <StyledParagraph>
                 <FormattedMessage {...l10nMessages.TR_PLEASE_USE_TO_START_INITIALIZATION} />
             </StyledParagraph>
diff --git a/src/views/Wallet/views/NoBackup/index.js b/src/views/Wallet/views/NoBackup/index.js
index a9d3618b..35747f24 100644
--- a/src/views/Wallet/views/NoBackup/index.js
+++ b/src/views/Wallet/views/NoBackup/index.js
@@ -1,15 +1,8 @@
 /* @flow */
 import React from 'react';
 import styled from 'styled-components';
-import { H1 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Link from 'components/Link';
+import { Button, Icon, Link, P, H4, colors, icons } from 'trezor-ui-components';
 import { getOldWalletUrl } from 'utils/url';
-import Button from 'components/Button';
-import Icon from 'components/Icon';
-import { FONT_SIZE } from 'config/variables';
-import colors from 'config/colors';
-import icons from 'config/icons';
 
 import type { TrezorDevice } from 'flowtype';
 
@@ -26,12 +19,10 @@ const Wrapper = styled.section`
 `;
 
 const StyledNavLink = styled(Link)`
-    color: ${colors.TEXT_SECONDARY};
     padding-top: 20px;
-    font-size: ${FONT_SIZE.BASE};
 `;
 
-const StyledH1 = styled(H1)`
+const StyledH = styled(H4)`
     text-align: center;
 `;
 
@@ -48,7 +39,7 @@ const Message = styled.div`
 const FirmwareUpdate = (props: Props) => (
     <Wrapper>
         <Icon size={128} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-        <StyledH1>Your Trezor is not backed up!</StyledH1>
+        <StyledH>Your Trezor is not backed up!</StyledH>
         <Message>
             <StyledP>
                 If your device is ever lost or damaged, your funds will be lost. Backup your device
@@ -59,7 +50,9 @@ const FirmwareUpdate = (props: Props) => (
         <Link href={`${getOldWalletUrl(props.device)}?backup=1`} target="_self">
             <Button>Take me to the Bitcoin wallet</Button>
         </Link>
-        <StyledNavLink to="/">I’ll do that later.</StyledNavLink>
+        <StyledNavLink isGray to="/">
+            I’ll do that later.
+        </StyledNavLink>
     </Wrapper>
 );