Merge pull request #460 from trezor/feature/trezor-ui-components

Feature/trezor-ui-components
5 years ago · 57e9e710c8
parent efc3ae6597 090fd8226d
commit 57e9e710c8
141 changed files with 923 additions and 3197 deletions
--- a/package.json
+++ b/package.json
@ -58,8 +58,8 @@
        "raf": "^3.4.1",
        "raven-js": "^3.27.0",
        "rc-tooltip": "^3.7.3",
-        "react": "^16.8.1",
-        "react-dom": "^16.8.5",
+        "react": "^16.8.6",
+        "react-dom": "^16.8.6",
        "react-hot-loader": "^4.6.5",
        "react-intl": "^2.8.0",
        "react-json-view": "^1.19.1",
@ -82,7 +82,7 @@
        "styled-normalize": "^8.0.6",
        "trezor-bridge-communicator": "1.0.2",
        "trezor-connect": "7.0.2-electron.4",
-        "trezor-ui-components": "^1.0.0-beta.4",
+        "trezor-ui-components": "^1.0.0-beta.12",
        "wallet-address-validator": "^0.2.4",
        "web3": "1.0.0-beta.35",
        "webpack": "^4.29.3",
--- a/src/actions/ethereum/SendFormActions.js
+++ b/src/actions/ethereum/SendFormActions.js
@ -1,6 +1,6 @@
 /* @flow */
 import React from 'react';
-import Link from 'components/Link';
+import { Link } from 'trezor-ui-components';
 import TrezorConnect from 'trezor-connect';
 import BigNumber from 'bignumber.js';
 import * as ACCOUNT from 'actions/constants/account';
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@ -1,193 +0,0 @@
-/* @flow */
-
-import * as React from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import colors from 'config/colors';
-import { TRANSITION, FONT_WEIGHT, FONT_SIZE } from 'config/variables';
-
-type Props = {
-    children: React.Node,
-    className?: string,
-    onClick?: () => any,
-    onMouseEnter?: () => void,
-    onMouseLeave?: () => void,
-    onFocus?: () => void,
-    isDisabled?: boolean,
-    isWhite?: boolean,
-    isWebUsb?: boolean,
-    isTransparent?: boolean,
-    dataTest?: string,
-};
-
-const Wrapper = styled.button`
-    padding: ${props => (props.icon ? '4px 24px 4px 15px' : '11px 24px')};
-    border-radius: 3px;
-    font-size: ${FONT_SIZE.BASE};
-    font-weight: ${FONT_WEIGHT.LIGHT};
-    cursor: pointer;
-    background: ${colors.GREEN_PRIMARY};
-    color: ${colors.WHITE};
-    border: 0;
-
-    &:hover {
-        background: ${colors.GREEN_SECONDARY};
-    }
-
-    &:active {
-        background: ${colors.GREEN_TERTIARY};
-    }
-
-    &:focus {
-        border-color: ${colors.INPUT_FOCUSED_BORDER};
-        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
-    }
-
-    ${props =>
-        props.isDisabled &&
-        css`
-            pointer-events: none;
-            color: ${colors.TEXT_SECONDARY};
-            background: ${colors.GRAY_LIGHT};
-        `}
-
-    ${props =>
-        props.isWhite &&
-        css`
-            background: ${colors.WHITE};
-            color: ${colors.TEXT_SECONDARY};
-            border: 1px solid ${colors.DIVIDER};
-
-            &:focus {
-                border-color: ${colors.INPUT_FOCUSED_BORDER};
-            }
-
-            &:hover {
-                color: ${colors.TEXT_PRIMARY};
-                background: ${colors.DIVIDER};
-            }
-
-            &:active {
-                color: ${colors.TEXT_PRIMARY};
-                background: ${colors.DIVIDER};
-            }
-        `}
-
-    ${props =>
-        props.isTransparent &&
-        css`
-            background: transparent;
-            border: 0px;
-            color: ${colors.TEXT_SECONDARY};
-
-            &:focus {
-                color: ${colors.TEXT_PRIMARY};
-                box-shadow: none;
-            }
-
-            &:hover,
-            &:active {
-                color: ${colors.TEXT_PRIMARY};
-                background: transparent;
-            }
-        `}
-
-    ${props =>
-        props.isWebUsb &&
-        css`
-            position: relative;
-            padding: 12px 24px 12px 40px;
-            background: transparent;
-            color: ${colors.GREEN_PRIMARY};
-            border: 1px solid ${colors.GREEN_PRIMARY};
-            transition: ${TRANSITION.HOVER};
-
-            &:before,
-            &:after {
-                content: '';
-                position: absolute;
-                background: ${colors.GREEN_PRIMARY};
-                top: 0;
-                bottom: 0;
-                margin: auto;
-                transition: ${TRANSITION.HOVER};
-            }
-
-            &:before {
-                width: 12px;
-                height: 2px;
-                left: 18px;
-            }
-
-            &:after {
-                width: 2px;
-                height: 12px;
-                left: 23px;
-            }
-
-            &:hover {
-                background: ${colors.GREEN_PRIMARY};
-                color: ${colors.WHITE};
-
-                &:before,
-                &:after {
-                    background: ${colors.WHITE};
-                }
-            }
-
-            iframe {
-                position: absolute;
-                top: 0;
-                left: 0;
-                z-index: 1;
-            }
-        `}
-`;
-
-const Button = ({
-    children,
-    className = '',
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    isDisabled = false,
-    isWhite = false,
-    isWebUsb = false,
-    isTransparent = false,
-    dataTest,
-}: Props) => {
-    const newClassName = isWebUsb ? `${className} trezor-webusb-button` : className;
-    return (
-        <Wrapper
-            data-test={dataTest}
-            className={newClassName}
-            onClick={onClick}
-            onMouseEnter={onMouseEnter}
-            onMouseLeave={onMouseLeave}
-            onFocus={onFocus}
-            isDisabled={isDisabled}
-            isWhite={isWhite}
-            isWebUsb={isWebUsb}
-            isTransparent={isTransparent}
-        >
-            {children}
-        </Wrapper>
-    );
-};
-
-Button.propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onFocus: PropTypes.func,
-    isDisabled: PropTypes.bool,
-    isWhite: PropTypes.bool,
-    isWebUsb: PropTypes.bool,
-    isTransparent: PropTypes.bool,
-    dataTest: PropTypes.string,
-};
-
-export default Button;
--- a/src/components/Checkbox/index.js
+++ b/src/components/Checkbox/index.js
@ -1,101 +0,0 @@
-/* @flow */
-
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import colors from 'config/colors';
-import Icon from 'components/Icon';
-import icons from 'config/icons';
-import { FONT_SIZE } from 'config/variables';
-
-type Props = {
-    onClick: (event: KeyboardEvent) => void,
-    isChecked: boolean,
-    children: React.Node,
-};
-
-const Wrapper = styled.div`
-    display: flex;
-    flex-direction: row;
-    cursor: pointer;
-    align-items: center;
-
-    &:hover,
-    &:focus {
-        outline: none;
-    }
-`;
-
-const Tick = styled.div``;
-
-const IconWrapper = styled.div`
-    display: flex;
-    border-radius: 2px;
-    justify-content: center;
-    align-items: center;
-    color: ${props => (props.isChecked ? colors.WHITE : colors.GREEN_PRIMARY)};
-    background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)};
-    border: 1px solid ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.DIVIDER)};
-    width: 24px;
-    height: 24px;
-
-    &:hover,
-    &:focus {
-        ${props =>
-            !props.isChecked &&
-            css`
-                border: 1px solid ${colors.GREEN_PRIMARY};
-            `}
-        background: ${props => (props.isChecked ? colors.GREEN_PRIMARY : colors.WHITE)};
-    }
-`;
-
-const Label = styled.div`
-    display: flex;
-    padding-left: 10px;
-    justify-content: center;
-    ${colors.TEXT_SECONDARY};
-    font-size: ${FONT_SIZE.BASE};
-
-    &:hover,
-    &:focus {
-        color: ${props => (props.isChecked ? colors.TEXT_PRIMARY : colors.TEXT_PRIMARY)};
-    }
-`;
-
-class Checkbox extends React.PureComponent<Props> {
-    handleKeyboard(event: KeyboardEvent) {
-        if (event.keyCode === 32) {
-            this.props.onClick(event);
-        }
-    }
-
-    render() {
-        const { isChecked, children, onClick } = this.props;
-        return (
-            <Wrapper onClick={onClick} onKeyUp={event => this.handleKeyboard(event)} tabIndex={0}>
-                <IconWrapper isChecked={isChecked}>
-                    {isChecked && (
-                        <Tick>
-                            <Icon
-                                hoverColor={colors.WHITE}
-                                size={26}
-                                color={isChecked ? colors.WHITE : colors.GREEN_PRIMARY}
-                                icon={icons.SUCCESS}
-                            />
-                        </Tick>
-                    )}
-                </IconWrapper>
-                <Label isChecked={isChecked}>{children}</Label>
-            </Wrapper>
-        );
-    }
-}
-
-Checkbox.propTypes = {
-    onClick: PropTypes.func.isRequired,
-    isChecked: PropTypes.bool,
-    children: PropTypes.string,
-};
-
-export default Checkbox;
--- a/src/components/DeviceHeader/index.js
+++ b/src/components/DeviceHeader/index.js
@ -2,9 +2,9 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
-import { getStatusColor, getStatusName, getStatus, getVersion } from 'utils/device';
-import TrezorImage from 'components/images/TrezorImage';
-import colors from 'config/colors';
+import { getStatusColor, getStatusName, getStatus } from 'utils/device';
+import { TrezorImage, colors } from 'trezor-ui-components';
+
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';

 const Wrapper = styled.div`
@ -72,6 +72,7 @@ const IconWrapper = styled.div`
    display: flex;
    flex: 1 0 0;
    justify-content: flex-end;
+    align-items: center;
 `;

 const ImageWrapper = styled.div`
@ -115,7 +116,10 @@ const DeviceHeader = ({
        >
            <ImageWrapper>
                <Dot color={getStatusColor(status)} />
-                <TrezorImage model={getVersion(device)} />
+                <TrezorImage
+                    height={28}
+                    model={(device.features && device.features.major_version) || 1}
+                />
            </ImageWrapper>
            <LabelWrapper>
                <Name>{device.instanceLabel}</Name>
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@ -3,13 +3,12 @@
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Link from 'components/Link';
+import { Link, colors } from 'trezor-ui-components';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';

-import colors from 'config/colors';
-import { FONT_SIZE, SCREEN_SIZE } from 'config/variables';
+import { FONT_SIZE, SCREEN_SIZE, FOOTER_HEIGHT } from 'config/variables';
 import * as LogActions from 'actions/LogActions';
 import l10nMessages from './index.messages';

@ -26,7 +25,7 @@ const Wrapper = styled.div`
    color: ${colors.TEXT_SECONDARY};
    padding: 10px 30px;
    display: flex;
-    height: 59px;
+    height: ${FOOTER_HEIGHT};
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
--- a/src/components/Header/components/LanguagePicker/index.js
+++ b/src/components/Header/components/LanguagePicker/index.js
@ -1,7 +1,7 @@
 /* @flow */
 import * as React from 'react';
 import styled from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import ReactSelect from 'react-select';
 import { SCREEN_SIZE } from 'config/variables';
 import { LANGUAGE } from 'config/app';
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@ -3,10 +3,8 @@
 import React from 'react';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import colors from 'config/colors';
 import { SCREEN_SIZE } from 'config/variables';
-import Icon from 'components/Icon';
-import icons from 'config/icons';
+import { Icon, icons, colors } from 'trezor-ui-components';
 import { FormattedMessage } from 'react-intl';

 import type { toggleSidebar as toggleSidebarType } from 'actions/WalletActions';
@ -60,7 +58,9 @@ const MenuToggler = styled.div`
    }
 `;

-const TogglerText = styled.div``;
+const TogglerText = styled.div`
+    margin-left: 6px;
+`;

 const TREZOR = styled.div``;
 const T = styled.div``;
@ -161,14 +161,14 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
                    <MenuToggler onClick={toggleSidebar}>
                        {sidebarOpened ? (
                            <>
-                                <Icon size={24} color={colors.WHITE} icon={icons.CLOSE} />
+                                <Icon size={12} color={colors.WHITE} icon={icons.CLOSE} />
                                <TogglerText>
                                    <FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />
                                </TogglerText>
                            </>
                        ) : (
                            <>
-                                <Icon color={colors.WHITE} size={24} icon={icons.MENU} />
+                                <Icon color={colors.WHITE} size={14} icon={icons.MENU} />
                                <TogglerText>
                                    <FormattedMessage {...l10nMessages.TR_MENU} />
                                </TogglerText>
--- a/src/components/Heading/index.js
+++ b/src/components/Heading/index.js
@ -1,45 +0,0 @@
-import styled, { css } from 'styled-components';
-import colors from 'config/colors';
-import { FONT_SIZE } from 'config/variables';
-
-const baseStyles = css`
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    color: ${colors.TEXT_PRIMARY};
-    font-weight: bold;
-    margin: 0;
-    padding: 0;
-`;
-
-const H1 = styled.h1`
-    ${baseStyles};
-    font-size: ${FONT_SIZE.H1};
-    padding-bottom: 10px;
-`;
-
-const H2 = styled.h2`
-    ${baseStyles};
-    font-size: ${FONT_SIZE.H2};
-    padding-bottom: 10px;
-
-    ${props =>
-        props.claim &&
-        css`
-            font-size: ${FONT_SIZE.HUGE};
-            padding-bottom: 24px;
-        `};
-`;
-
-const H3 = styled.h3`
-    ${baseStyles};
-    font-size: ${FONT_SIZE.H3};
-    margin-bottom: 10px;
-`;
-
-const H4 = styled.h4`
-    ${baseStyles};
-    font-size: ${FONT_SIZE.H4};
-    padding-bottom: 10px;
-`;
-
-export { H1, H2, H3, H4 };
--- a/src/components/Icon/index.js
+++ b/src/components/Icon/index.js
@ -1,116 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import colors from 'config/colors';
-import styled, { keyframes } from 'styled-components';
-
-type Props = {
-    icon: Array<string>,
-    className?: string,
-    hoverColor?: string,
-    canAnimate?: boolean,
-    size?: number,
-    isActive?: boolean,
-    color?: string,
-    onMouseEnter?: () => void,
-    onMouseLeave?: () => void,
-    onFocus?: () => void,
-    onClick?: () => void,
-};
-
-const chooseIconAnimationType = (canAnimate, isActive) => {
-    if (canAnimate) {
-        if (isActive) {
-            return rotate180up;
-        }
-        return rotate180down;
-    }
-    return null;
-};
-
-// TODO: make animation of icons better
-const rotate180up = keyframes`
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(180deg);
-    }
-`;
-
-const rotate180down = keyframes`
-    from {
-        transform: rotate(180deg);
-    }
-    to {
-        transform: rotate(0deg);
-    }
-`;
-
-const SvgWrapper = styled.svg`
-    animation: ${props => chooseIconAnimationType(props.canAnimate, props.isActive)} 0.2s linear 1
-        forwards;
-
-    :hover {
-        path {
-            fill: ${props => props.hoverColor};
-        }
-    }
-`;
-
-const Path = styled.path`
-    fill: ${props => props.color};
-`;
-
-const Icon = ({
-    icon,
-    size = 32,
-    color = colors.TEXT_SECONDARY,
-    isActive,
-    canAnimate,
-    hoverColor,
-    className,
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onClick,
-}: Props) => (
-    <SvgWrapper
-        className={className}
-        canAnimate={canAnimate}
-        hoverColor={hoverColor}
-        isActive={isActive}
-        style={{
-            display: 'inline-block',
-            verticalAlign: 'middle',
-        }}
-        width={`${size}`}
-        height={`${size}`}
-        viewBox="0 0 1024 1024"
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onFocus={onFocus}
-        onClick={onClick}
-    >
-        {icon.map(path => (
-            <Path key={path} isActive={isActive} color={color} d={path} />
-        ))}
-    </SvgWrapper>
-);
-
-Icon.propTypes = {
-    className: PropTypes.string,
-    hoverColor: PropTypes.string,
-    canAnimate: PropTypes.bool,
-    icon: PropTypes.arrayOf(PropTypes.string).isRequired,
-    size: PropTypes.number,
-    isActive: PropTypes.bool,
-    color: PropTypes.string,
-    onMouseEnter: PropTypes.func,
-    onMouseLeave: PropTypes.func,
-    onFocus: PropTypes.func,
-    onClick: PropTypes.func,
-};
-
-export default Icon;
--- a/src/components/Link/index.js
+++ b/src/components/Link/index.js
@ -1,101 +0,0 @@
-import React, { PureComponent } from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import { FONT_SIZE, TRANSITION } from 'config/variables';
-import colors from 'config/colors';
-import { NavLink } from 'react-router-dom';
-
-const A = styled.a`
-    text-decoration: none;
-    cursor: pointer;
-    transition: ${TRANSITION.HOVER};
-    font-size: ${FONT_SIZE.SMALL};
-
-    ${props =>
-        props.isGreen &&
-        css`
-            text-decoration: underline;
-            text-decoration-color: ${colors.GREEN_PRIMARY};
-        `}
-    ${props =>
-        props.isGray &&
-        css`
-            text-decoration: underline;
-            text-decoration-color: ${colors.TEXT_SECONDARY};
-        `}
-
-    &,
-    &:visited,
-    &:active,
-    &:hover {
-        ${props =>
-            props.isGreen &&
-            css`
-                color: ${colors.GREEN_PRIMARY};
-            `}
-        ${props =>
-            props.isGray &&
-            css`
-                color: ${colors.TEXT_SECONDARY};
-            `}
-    }
-
-    &:hover {
-        border-color: transparent;
-    }
-`;
-
-const StyledNavLink = styled(NavLink)`
-    ${props =>
-        props.isGreen &&
-        css`
-            color: ${colors.GREEN_PRIMARY};
-        `}
-
-    ${props =>
-        props.isGray &&
-        css`
-            color: ${colors.TEXT_SECONDARY};
-        `}
-`;
-
-class Link extends PureComponent {
-    render() {
-        const shouldRenderRouterLink = this.props.to;
-        let LinkComponent;
-        if (shouldRenderRouterLink) {
-            LinkComponent = <StyledNavLink {...this.props}>{this.props.children}</StyledNavLink>;
-        } else {
-            LinkComponent = (
-                <A
-                    href={this.props.href}
-                    target={this.props.target || '_blank'}
-                    rel="noreferrer noopener"
-                    {...this.props}
-                >
-                    {this.props.children}
-                </A>
-            );
-        }
-
-        return LinkComponent;
-    }
-}
-
-Link.propTypes = {
-    children: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object,
-        PropTypes.array,
-        PropTypes.node,
-    ]).isRequired,
-    className: PropTypes.string,
-    href: PropTypes.string,
-    target: PropTypes.string,
-    to: PropTypes.string,
-    onClick: PropTypes.func,
-    isGreen: PropTypes.bool,
-    isGray: PropTypes.bool,
-};
-
-export default Link;
--- a/src/components/Loader/index.js
+++ b/src/components/Loader/index.js
@ -1,99 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import Paragraph from 'components/Paragraph';
-import { FONT_SIZE } from 'config/variables';
-import { DASH, GREEN_COLOR } from 'config/animations';
-import colors from 'config/colors';
-
-const Wrapper = styled.div`
-    position: relative;
-    width: ${props => `${props.size}px`};
-    height: ${props => `${props.size}px`};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-`;
-
-const SvgWrapper = styled.svg`
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    animation: rotate 2s linear infinite;
-    transform-origin: center center;
-`;
-
-const CircleWrapper = styled.circle`
-    ${props =>
-        props.isRoute &&
-        css`
-            stroke: ${props.transparentRoute ? 'transparent' : colors.GRAY_LIGHT};
-        `}
-
-    ${props =>
-        props.isPath &&
-        css`
-            stroke-width: ${props.transparentRoute ? '2px' : '1px'};
-            stroke-dasharray: 1, 200;
-            stroke-dashoffset: 0;
-            animation: ${DASH} 1.5s ease-in-out infinite,
-                ${props.animationColor || GREEN_COLOR} 6s ease-in-out infinite;
-            stroke-linecap: round;
-        `};
-`;
-
-const StyledParagraph = styled(Paragraph)`
-    font-size: ${props => (props.isSmallText ? FONT_SIZE.SMALL : FONT_SIZE.BIG)};
-    color: ${props => (props.isWhiteText ? colors.WHITE : colors.TEXT_PRIMARY)};
-`;
-
-const Loader = ({
-    className,
-    text,
-    isWhiteText = false,
-    isSmallText,
-    size = 100,
-    animationColor,
-    transparentRoute,
-}) => (
-    <Wrapper className={className} size={size}>
-        <StyledParagraph isSmallText={isSmallText} isWhiteText={isWhiteText}>
-            {text}
-        </StyledParagraph>
-        <SvgWrapper viewBox="25 25 50 50">
-            <CircleWrapper
-                animationColor={animationColor}
-                cx="50"
-                cy="50"
-                r="20"
-                fill="none"
-                stroke=""
-                strokeMiterlimit="10"
-                isRoute
-                transparentRoute={transparentRoute}
-            />
-            <CircleWrapper
-                animationColor={animationColor}
-                cx="50"
-                cy="50"
-                r="20"
-                fill="none"
-                strokeMiterlimit="10"
-                isPath
-                transparentRoute={transparentRoute}
-            />
-        </SvgWrapper>
-    </Wrapper>
-);
-
-Loader.propTypes = {
-    isWhiteText: PropTypes.bool,
-    isSmallText: PropTypes.bool,
-    className: PropTypes.string,
-    text: PropTypes.string,
-    animationColor: PropTypes.object,
-    transparentRoute: PropTypes.bool,
-    size: PropTypes.number,
-};
-
-export default Loader;
--- 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';

@ -80,12 +75,12 @@ const Log = (props: Props): ?React$Element<string> => {
    return (
        <Wrapper>
            <Click onClick={props.toggle}>
-                <Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
+                <Icon size={12} 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>
--- a/src/components/Notification/components/NotificationButton/index.js
+++ b/src/components/Notification/components/NotificationButton/index.js
@ -1,93 +0,0 @@
-/* @flow */
-
-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 { 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 = {
-    type: string,
-    icon?: {
-        type: Array<string>,
-        color: string,
-        size: number,
-    },
-    onClick: () => void,
-    isLoading?: boolean,
-    children: React.Node,
-};
-
-const LoaderContent = styled.div`
-    position: absolute;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: default;
-    color: ${colors.WHITE};
-    background: ${props => getPrimaryColor(props.type)};
-`;
-
-const Wrapper = styled.button`
-    padding: 12px 58px;
-    border-radius: 3px;
-    background: transparent;
-    font-size: ${FONT_SIZE.BASE};
-    position: relative;
-    font-weight: ${FONT_WEIGHT.LIGHT};
-    cursor: pointer;
-    color: ${props => getPrimaryColor(props.type)};
-    border: 1px solid ${props => getPrimaryColor(props.type)};
-    transition: ${TRANSITION.HOVER};
-
-    @media screen and (max-width: ${SCREEN_SIZE.SM}) {
-        padding: 12px 24px;
-    }
-
-    &:hover {
-        color: ${colors.WHITE};
-        background: ${props => getPrimaryColor(props.type)};
-    }
-`;
-
-const IconWrapper = styled.span`
-    margin-right: 8px;
-`;
-
-const NotificationButton = ({ type, icon, onClick, children, isLoading }: Props) => (
-    <Wrapper icon={icon} onClick={onClick} type={type}>
-        {isLoading && (
-            <LoaderContent type={type}>
-                <Loader transparentRoute animationColor={WHITE_COLOR} size={30} />
-            </LoaderContent>
-        )}
-        {icon && (
-            <IconWrapper>
-                <Icon icon={icon.type} color={icon.color} size={icon.size} />
-            </IconWrapper>
-        )}
-        {children}
-    </Wrapper>
-);
-
-NotificationButton.propTypes = {
-    type: PropTypes.string.isRequired,
-    icon: PropTypes.shape({
-        type: PropTypes.arrayOf(PropTypes.string).isRequired,
-        color: PropTypes.string,
-        size: PropTypes.number,
-    }),
-    isLoading: PropTypes.bool,
-    onClick: PropTypes.func,
-    children: PropTypes.node.isRequired,
-};
-
-export default NotificationButton;
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@ -1,143 +0,0 @@
-/* @flow */
-import * as React from 'react';
-import styled from 'styled-components';
-import { getPrimaryColor, getSecondaryColor, getIcon } from 'utils/notification';
-import Icon from 'components/Icon';
-import icons from 'config/icons';
-import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
-
-import * as NotificationActions from 'actions/NotificationActions';
-import Loader from 'components/Loader';
-import type { CallbackAction } from 'reducers/NotificationReducer';
-
-import NotificationButton from './components/NotificationButton';
-
-type Props = {
-    type: string,
-    cancelable?: boolean,
-    title: ?React.Node,
-    className?: string,
-    message?: ?React.Node,
-    actions?: Array<CallbackAction>,
-    isActionInProgress?: boolean,
-    close?: typeof NotificationActions.close,
-    loading?: boolean,
-};
-
-const Wrapper = styled.div`
-    width: 100%;
-    position: relative;
-    display: flex;
-    justify-content: center;
-    color: ${props => getPrimaryColor(props.type)};
-    background: ${props => getSecondaryColor(props.type)};
-`;
-
-const Content = styled.div`
-    width: 100%;
-    max-width: 1170px;
-    padding: 24px;
-    display: flex;
-    flex-direction: row;
-    text-align: left;
-    align-items: center;
-`;
-
-const Body = styled.div`
-    display: flex;
-`;
-
-const Message = styled.div`
-    font-size: ${FONT_SIZE.SMALL};
-`;
-
-const Title = styled.div`
-    padding-bottom: 5px;
-    padding-top: 1px;
-    font-weight: ${FONT_WEIGHT.MEDIUM};
-`;
-
-const CloseClick = styled.div`
-    margin-left: 24px;
-    align-self: flex-start;
-    cursor: pointer;
-`;
-
-const StyledIcon = styled(Icon)`
-    position: relative;
-    top: -7px;
-    min-width: 20px;
-`;
-
-const IconWrapper = styled.div`
-    min-width: 30px;
-`;
-
-const Texts = styled.div`
-    display: flex;
-    padding: 0 10px 0 0;
-    flex-direction: column;
-`;
-
-const AdditionalContent = styled.div`
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-end;
-    flex: 1;
-`;
-
-const ActionContent = styled.div`
-    display: flex;
-    justify-content: right;
-    align-items: flex-end;
-`;
-
-const Notification = (props: Props): React$Element<string> => {
-    const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
-
-    return (
-        <Wrapper className={props.className} type={props.type}>
-            <Content>
-                {props.loading && <Loader size={50} />}
-                <Body>
-                    <IconWrapper>
-                        <StyledIcon
-                            color={getPrimaryColor(props.type)}
-                            icon={getIcon(props.type)}
-                        />
-                    </IconWrapper>
-                    <Texts>
-                        <Title>{props.title}</Title>
-                        {props.message ? <Message>{props.message}</Message> : ''}
-                    </Texts>
-                </Body>
-                <AdditionalContent>
-                    {props.actions && props.actions.length > 0 && (
-                        <ActionContent>
-                            {props.actions.map(action => (
-                                <NotificationButton
-                                    key={action.label}
-                                    type={props.type}
-                                    isLoading={props.isActionInProgress}
-                                    onClick={() => {
-                                        close();
-                                        action.callback();
-                                    }}
-                                >
-                                    {action.label}
-                                </NotificationButton>
-                            ))}
-                        </ActionContent>
-                    )}
-                </AdditionalContent>
-                {props.cancelable && (
-                    <CloseClick onClick={() => close()}>
-                        <Icon color={getPrimaryColor(props.type)} icon={icons.CLOSE} size={20} />
-                    </CloseClick>
-                )}
-            </Content>
-        </Wrapper>
-    );
-};
-
-export default Notification;
--- a/src/components/Paragraph/index.js
+++ b/src/components/Paragraph/index.js
@ -1,33 +0,0 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import PropTypes from 'prop-types';
-import colors from 'config/colors';
-import { FONT_SIZE, LINE_HEIGHT } from 'config/variables';
-
-const Wrapper = styled.p`
-    font-size: ${FONT_SIZE.BIG};
-    line-height: ${LINE_HEIGHT.BASE};
-    color: ${colors.TEXT_SECONDARY};
-    padding: 0;
-    margin: 0;
-
-    ${props =>
-        props.isSmaller &&
-        css`
-            font-size: ${FONT_SIZE.SMALL};
-        `}
-`;
-
-const P = ({ children, className, isSmaller = false }) => (
-    <Wrapper className={className} isSmaller={isSmaller}>
-        {children}
-    </Wrapper>
-);
-
-P.propTypes = {
-    className: PropTypes.string,
-    isSmaller: PropTypes.bool,
-    children: PropTypes.node,
-};
-
-export default P;
--- a/src/components/Select/index.js
+++ b/src/components/Select/index.js
@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ReactSelect from 'react-select';
-import ReactAsyncSelect from 'react-select/lib/Async';
-import colors from 'config/colors';
-
-const styles = (isSearchable, withDropdownIndicator = true) => ({
-    singleValue: base => ({
-        ...base,
-        maxWidth: 'calc(100% - 10px)', // 8px padding + 2px maring-left
-        width: '100%',
-        color: colors.TEXT_SECONDARY,
-        '&:hover': {
-            cursor: isSearchable ? 'text' : 'pointer',
-        },
-    }),
-    control: (base, { isDisabled, isFocused }) => ({
-        ...base,
-        minHeight: 'initial',
-        height: '40px',
-        borderRadius: '2px',
-        borderColor: isFocused ? colors.INPUT_FOCUSED_BORDER : colors.DIVIDER,
-        boxShadow: isFocused ? `0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW}` : 'none',
-        background: isDisabled ? colors.LANDING : colors.WHITE,
-        '&:hover': {
-            cursor: 'pointer',
-        },
-    }),
-    indicatorSeparator: () => ({
-        display: 'none',
-    }),
-    dropdownIndicator: (base, { isDisabled }) => ({
-        ...base,
-        display: !withDropdownIndicator || isDisabled ? 'none' : 'block',
-        color: colors.TEXT_SECONDARY,
-        path: '',
-        '&:hover': {
-            color: colors.TEXT_SECONDARY,
-        },
-    }),
-    menu: base => ({
-        ...base,
-        margin: 0,
-        boxShadow: 'none',
-    }),
-    menuList: base => ({
-        ...base,
-        padding: 0,
-        boxShadow: 'none',
-        background: colors.WHITE,
-        borderLeft: `1px solid ${colors.DIVIDER}`,
-        borderRight: `1px solid ${colors.DIVIDER}`,
-        borderBottom: `1px solid ${colors.DIVIDER}`,
-    }),
-    option: (base, { isFocused }) => ({
-        ...base,
-        color: colors.TEXT_SECONDARY,
-        background: isFocused ? colors.LANDING : colors.WHITE,
-        borderRadius: 0,
-        '&:hover': {
-            cursor: 'pointer',
-            background: colors.LANDING,
-        },
-    }),
-});
-
-const propTypes = {
-    isAsync: PropTypes.bool,
-    isSearchable: PropTypes.bool,
-};
-const Select = props => <ReactSelect styles={styles(props.isSearchable)} {...props} />;
-const AsyncSelect = props => <ReactAsyncSelect styles={styles(props.isSearchable)} {...props} />;
-Select.propTypes = propTypes;
-AsyncSelect.propTypes = propTypes;
-
-export { Select, AsyncSelect };
--- a/src/components/Textarea/index.js
+++ b/src/components/Textarea/index.js
@ -1,228 +0,0 @@
-import React from 'react';
-import Textarea from 'react-textarea-autosize';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT, FONT_FAMILY } from 'config/variables';
-
-const Wrapper = styled.div`
-    width: 100%;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-`;
-
-const disabledColor = colors.TEXT_PRIMARY;
-
-const StyledTextarea = styled(Textarea)`
-    width: 100%;
-    min-height: 85px;
-    padding: 10px 12px;
-    box-sizing: border-box;
-    border: 1px solid ${props => (props.colorBorder ? props.colorBorder : colors.DIVIDER)};
-    border-radius: 2px;
-    resize: none;
-    outline: none;
-    font-family: ${FONT_FAMILY.MONOSPACE};
-    color: ${colors.TEXT_PRIMARY};
-    background: ${colors.WHITE};
-    font-weight: ${FONT_WEIGHT.MEDIUM};
-    font-size: ${FONT_SIZE.BASE};
-    white-space: pre-wrap; /* css-3 */
-    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
-    white-space: -pre-wrap; /* Opera 4-6 */
-    white-space: -o-pre-wrap; /* Opera 7 */
-    word-wrap: break-word; /* Internet Explorer 5.5+ */
-
-    /* placeholder styles do not work correctly when groupped into one block */
-
-    &::-webkit-input-placeholder {
-        color: ${colors.LIGHT_GRAY_1};
-        opacity: 1;
-    }
-
-    &::-moz-placeholder {
-        color: ${colors.LIGHT_GRAY_1};
-        opacity: 1;
-    }
-
-    &:-moz-placeholder {
-        color: ${colors.LIGHT_GRAY_1};
-        opacity: 1;
-    }
-
-    &:-ms-input-placeholder {
-        color: ${colors.LIGHT_GRAY_1};
-        opacity: 1;
-    }
-
-    &:read-only {
-        background: ${colors.GRAY_LIGHT};
-        color: ${colors.TEXT_SECONDARY};
-    }
-
-    &:focus {
-        border-color: ${colors.INPUT_FOCUSED_BORDER};
-        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
-    }
-
-    &:disabled {
-        pointer-events: none;
-        background: ${colors.GRAY_LIGHT};
-        color: ${colors.TEXT_SECONDARY};
-
-        &::-webkit-input-placeholder {
-            color: ${disabledColor};
-            opacity: 1;
-        }
-
-        &::-moz-placeholder {
-            color: ${disabledColor};
-            opacity: 1;
-        }
-
-        &:-moz-placeholder {
-            color: ${disabledColor};
-            opacity: 1;
-        }
-
-        &:-ms-input-placeholder {
-            color: ${disabledColor};
-            opacity: 1;
-        }
-    }
-
-    ${props =>
-        props.trezorAction &&
-        css`
-            z-index: 10001; /* bigger than modal container */
-            border-color: ${colors.WHITE};
-            border-width: 2px;
-            transform: translate(-1px, -1px);
-            background: ${colors.DIVIDER};
-            pointer-events: none;
-        `}
-`;
-
-const TopLabel = styled.span`
-    padding-bottom: 10px;
-    color: ${colors.TEXT_SECONDARY};
-`;
-
-const BottomText = styled.span`
-    margin-top: 10px;
-    font-size: ${FONT_SIZE.SMALL};
-    color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
-`;
-
-const getColor = inputState => {
-    let color = '';
-    if (inputState === 'success') {
-        color = colors.SUCCESS_PRIMARY;
-    } else if (inputState === 'warning') {
-        color = colors.WARNING_PRIMARY;
-    } else if (inputState === 'error') {
-        color = colors.ERROR_PRIMARY;
-    }
-    return color;
-};
-
-const TrezorAction = styled.div`
-    display: ${props => (props.action ? 'flex' : 'none')};
-    align-items: center;
-    margin: 0px 10px;
-    padding: 0 14px 0 5px;
-    position: absolute;
-    background: black;
-    bottom: -25px;
-    color: ${colors.WHITE};
-    border-radius: 5px;
-    line-height: ${LINE_HEIGHT.TREZOR_ACTION};
-    z-index: 10002;
-    transform: translate(-1px, -1px);
-`;
-
-const ArrowUp = styled.div`
-    position: absolute;
-    top: -9px;
-    left: 12px;
-    width: 0;
-    height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid black;
-    z-index: 10001;
-`;
-
-const TextArea = ({
-    className,
-    placeholder = '',
-    value,
-    customStyle = {},
-    onFocus,
-    onBlur,
-    isDisabled,
-    readOnly,
-    name,
-    onChange,
-    topLabel,
-    rows,
-    maxRows,
-    maxLength,
-    autoSelect,
-    state = '',
-    bottomText = '',
-    trezorAction = null,
-}) => (
-    <Wrapper className={className}>
-        {topLabel && <TopLabel>{topLabel}</TopLabel>}
-        <StyledTextarea
-            spellCheck="false"
-            autoCorrect="off"
-            autoCapitalize="off"
-            maxRows={maxRows}
-            maxLength={maxLength}
-            rows={rows}
-            className={className}
-            disabled={isDisabled}
-            name={name}
-            style={customStyle}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            value={value}
-            readOnly={readOnly}
-            onClick={autoSelect ? event => event.target.select() : null}
-            placeholder={placeholder}
-            onChange={onChange}
-        />
-        <TrezorAction action={trezorAction}>
-            <ArrowUp />
-            {trezorAction}
-        </TrezorAction>
-        {bottomText && <BottomText color={getColor(state)}>{bottomText}</BottomText>}
-    </Wrapper>
-);
-
-TextArea.propTypes = {
-    className: PropTypes.string,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onChange: PropTypes.func,
-    customStyle: PropTypes.string,
-    placeholder: PropTypes.string,
-    value: PropTypes.string,
-    readOnly: PropTypes.bool,
-    maxRows: PropTypes.number,
-    maxLength: PropTypes.number,
-    rows: PropTypes.number,
-    name: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    topLabel: PropTypes.node,
-    state: PropTypes.string,
-    autoSelect: PropTypes.bool,
-    bottomText: PropTypes.string,
-    trezorAction: PropTypes.node,
-};
-
-export default TextArea;
--- a/src/components/Tooltip/index.js
+++ b/src/components/Tooltip/index.js
@ -1,76 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import RcTooltip from 'rc-tooltip';
-import colors from 'config/colors';
-import Link from 'components/Link';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import l10nCommonMessages from 'views/common.messages';
-
-const Wrapper = styled.div``;
-
-const Content = styled.div`
-    max-width: ${props => `${props.maxWidth}px` || 'auto'};
-`;
-
-const ContentWrapper = styled.div`
-    display: block;
-`;
-
-const ReadMore = styled.div`
-    margin-top: 15px;
-    padding: 10px 0 5px 0;
-    text-align: center;
-    width: 100%;
-    color: ${colors.WHITE};
-    border-top: 1px solid ${colors.TEXT_SECONDARY};
-`;
-
-const Tooltip = ({
-    maxWidth,
-    className,
-    placement,
-    content,
-    readMoreLink,
-    children,
-    enterDelayMs,
-    defaultVisible = false,
-    ...rest
-}) => (
-    <Wrapper className={className}>
-        <RcTooltip
-            arrowContent={<div className="rc-tooltip-arrow-inner" />}
-            placement={placement}
-            mouseEnterDelay={enterDelayMs || 0}
-            defaultVisible={defaultVisible}
-            overlay={() => (
-                <ContentWrapper>
-                    <Content maxWidth={maxWidth}>{content}</Content>
-                    {readMoreLink && (
-                        <Link href={readMoreLink}>
-                            <ReadMore>
-                                <FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />
-                            </ReadMore>
-                        </Link>
-                    )}
-                </ContentWrapper>
-            )}
-            {...rest}
-        >
-            {children}
-        </RcTooltip>
-    </Wrapper>
-);
-
-Tooltip.propTypes = {
-    className: PropTypes.string,
-    placement: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    maxWidth: PropTypes.number,
-    content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
-    readMoreLink: PropTypes.string,
-    enterDelayMs: PropTypes.number,
-    defaultVisible: PropTypes.bool,
-};
-
-export default Tooltip;
--- a/src/components/Tooltip/index.messages.js
+++ b/src/components/Tooltip/index.messages.js
@ -1,7 +0,0 @@
-/* @flow */
-import { defineMessages } from 'react-intl';
-import type { Messages } from 'flowtype/npm/react-intl';
-
-const definedMessages: Messages = defineMessages({});
-
-export default definedMessages;
--- a/src/components/Transaction/index.js
+++ b/src/components/Transaction/index.js
@ -3,8 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';

-import colors from 'config/colors';
-import Link from 'components/Link';
+import { Link, colors } from 'trezor-ui-components';

 import type { Transaction, Network } from 'flowtype';

--- a/src/components/images/CoinLogo/index.js
+++ b/src/components/images/CoinLogo/index.js
@ -1,42 +0,0 @@
-import React, { PureComponent } from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-const Wrapper = styled.div`
-    padding-right: 20px;
-    width: 40px;
-    display: flex;
-    justify-content: center;
-`;
-
-const Logo = styled.img`
-    height: 23px;
-    display: block;
-`;
-
-class CoinLogo extends PureComponent {
-    render() {
-        const { network, className, standalone } = this.props;
-
-        const logo = (
-            <Logo
-                className={className}
-                src={require(`images/coins/${network}.png`)} // eslint-disable-line
-            />
-        );
-
-        if (standalone) {
-            return logo;
-        }
-
-        return <Wrapper className={className}>{logo}</Wrapper>;
-    }
-}
-
-CoinLogo.propTypes = {
-    network: PropTypes.string,
-    className: PropTypes.string,
-    standalone: PropTypes.bool,
-};
-
-export default CoinLogo;
--- a/src/components/images/DeviceIcon/index.js
+++ b/src/components/images/DeviceIcon/index.js
@ -2,9 +2,7 @@

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

 type Props = {
@ -15,26 +13,14 @@ type Props = {
    onClick?: any,
 };

-const SvgWrapper = styled.svg`
-    :hover {
-        path {
-            fill: ${props => props.hoverColor};
-        }
-    }
-`;
-
-const Path = styled.path`
-    fill: ${props => props.color};
-`;
-
 const getDeviceIcon = (majorVersion: number) => {
    switch (majorVersion) {
        case 1:
-            return ICONS.T1;
+            return icons.T1;
        case 2:
-            return ICONS.T2;
+            return icons.T2;
        default:
-            return ICONS.T2;
+            return icons.T2;
    }
 };

@ -44,18 +30,19 @@ const DeviceIcon = ({
    color = COLORS.TEXT_SECONDARY,
    hoverColor,
    onClick,
+    ...rest
 }: Props) => {
    const majorVersion = device.features ? device.features.major_version : 2;
+    const icon = getDeviceIcon(majorVersion);
    return (
-        <SvgWrapper
+        <Icon
+            icon={icon}
            hoverColor={hoverColor}
-            width={`${size}`}
-            height={`${size}`}
-            viewBox="0 0 1024 1024"
            onClick={onClick}
-        >
-            <Path key={majorVersion} color={color} d={getDeviceIcon(majorVersion)} />
-        </SvgWrapper>
+            color={color}
+            size={size}
+            {...rest}
+        />
    );
 };

--- a/src/components/images/TrezorImage/images/trezor-1.png
+++ b/src/components/images/TrezorImage/images/trezor-1.png
--- a/src/components/images/TrezorImage/images/trezor-T.png
+++ b/src/components/images/TrezorImage/images/trezor-T.png
--- a/src/components/images/TrezorImage/index.js
+++ b/src/components/images/TrezorImage/index.js
@ -1,32 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-type Props = {
-    model: string,
-};
-
-const Wrapper = styled.div``;
-
-const Img = styled.img`
-    width: ${props => (props.model === 'T' ? '17px' : '13px')};
-`;
-
-const TrezorImage = ({ model }: Props) => {
-    const imageName = model === 'One' ? 1 : model;
-    // $FlowIssue: `require` must be a string literal.
-    const src = require(`./images/trezor-${imageName}.png`); // eslint-disable-line
-    return (
-        <Wrapper>
-            <Img model={model} src={src} />
-        </Wrapper>
-    );
-};
-
-TrezorImage.propTypes = {
-    model: PropTypes.string,
-};
-
-export default TrezorImage;
--- a/src/components/images/WalletType/index.js
+++ b/src/components/images/WalletType/index.js
@ -1,44 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import colors from 'config/colors';
-import styled from 'styled-components';
-import ICONS from 'config/icons';
+import { Icon, colors, icons } from 'trezor-ui-components';

-const SvgWrapper = styled.svg`
-    :hover {
-        path {
-            fill: ${props => props.hoverColor};
-        }
-    }
-`;
-
-const Path = styled.path`
-    fill: ${props => props.color};
-`;
-
-const Icon = ({
+const WalletType = ({
    type = 'standard',
-    size = 24,
+    size = 14,
    color = colors.TEXT_SECONDARY,
    hoverColor,
    onClick,
-}) => (
-    <SvgWrapper
-        hoverColor={hoverColor}
-        width={`${size}`}
-        height={`${size}`}
-        viewBox="0 0 1024 1024"
-        onClick={onClick}
-    >
-        <Path
-            key={type}
+    ...rest
+}) => {
+    const icon = type === 'hidden' ? icons.WALLET_HIDDEN : icons.WALLET_STANDARD;
+    return (
+        <Icon
+            icon={icon}
+            hoverColor={hoverColor}
+            onClick={onClick}
            color={color}
-            d={type === 'hidden' ? ICONS.WALLET_HIDDEN : ICONS.WALLET_STANDARD}
+            size={size}
+            {...rest}
        />
-    </SvgWrapper>
-);
+    );
+};

-Icon.propTypes = {
+WalletType.propTypes = {
    type: PropTypes.string,
    size: PropTypes.number,
    color: PropTypes.string,
@ -46,4 +31,4 @@ Icon.propTypes = {
    onClick: PropTypes.func,
 };

-export default Icon;
+export default WalletType;
--- a/src/components/inputs/Input/index.js
+++ b/src/components/inputs/Input/index.js
@ -1,255 +0,0 @@
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
-import colors from 'config/colors';
-import ICONS from 'config/icons';
-import Icon from 'components/Icon';
-import { FONT_SIZE, FONT_FAMILY, FONT_WEIGHT, LINE_HEIGHT, TRANSITION } from 'config/variables';
-
-const Wrapper = styled.div`
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-`;
-
-const InputWrapper = styled.div`
-    display: flex;
-`;
-
-const InputIconWrapper = styled.div`
-    flex: 1;
-    position: relative;
-    display: inline-block;
-    background: white;
-`;
-
-const TopLabel = styled.span`
-    padding-bottom: 10px;
-    color: ${colors.TEXT_SECONDARY};
-`;
-
-const StyledInput = styled.input`
-    width: 100%;
-    height: ${props => (props.height ? `${props.height}px` : '40px')};
-    padding: 5px ${props => (props.hasIcon ? '40px' : '12px')} 6px 12px;
-
-    font-family: ${FONT_FAMILY.MONOSPACE};
-    line-height: ${LINE_HEIGHT.SMALL};
-    font-size: ${props => (props.isSmallText ? `${FONT_SIZE.SMALL}` : `${FONT_SIZE.BASE}`)};
-    font-weight: ${FONT_WEIGHT.MEDIUM};
-    color: ${props => (props.color ? props.color : colors.TEXT)};
-
-    border-radius: 2px;
-    
-    ${props =>
-        props.hasAddon &&
-        css`
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        `}
-
-    border: 1px solid ${colors.DIVIDER};
-    border-color: ${props => props.borderColor};
-
-    background-color: ${colors.WHITE};
-    transition: ${TRANSITION.HOVER};
-
-    &:focus {
-        border-color: ${colors.INPUT_FOCUSED_BORDER};
-        box-shadow: 0 0px 6px 0 ${colors.INPUT_FOCUSED_SHADOW};
-    }
-
-    &:disabled {
-        pointer-events: none;
-        background: ${colors.GRAY_LIGHT};
-        color: ${colors.TEXT_SECONDARY};
-    }
-
-    &:read-only  {
-        background: ${colors.GRAY_LIGHT};
-        color: ${colors.TEXT_SECONDARY};
-    }
-
-    ${props =>
-        props.trezorAction &&
-        css`
-            z-index: 10001;
-            position: relative; /* bigger than modal container */
-            border-color: ${colors.WHITE};
-            border-width: 2px;
-            transform: translate(-1px, -1px);
-            background: ${colors.DIVIDER};
-        `};
-`;
-
-const StyledIcon = styled(Icon)`
-    position: absolute;
-    left: auto;
-    top: 3px;
-    right: 10px;
-`;
-
-const BottomText = styled.span`
-    margin-top: 10px;
-    font-size: ${FONT_SIZE.SMALL};
-    color: ${props => (props.color ? props.color : colors.TEXT_SECONDARY)};
-`;
-
-const Overlay = styled.div`
-    ${props =>
-        props.isPartiallyHidden &&
-        css`
-            bottom: 0;
-            border: 1px solid ${colors.DIVIDER};
-            border-radius: 2px;
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            background-image: linear-gradient(
-                to right,
-                rgba(0, 0, 0, 0) 0%,
-                rgba(249, 249, 249, 1) 220px
-            );
-        `}
-`;
-
-const TrezorAction = styled.div`
-    display: ${props => (props.action ? 'flex' : 'none')};
-    align-items: center;
-    height: 37px;
-    margin: 0px 10px;
-    padding: 0 14px 0 5px;
-    position: absolute;
-    top: 45px;
-    background: black;
-    color: ${colors.WHITE};
-    border-radius: 5px;
-    line-height: ${LINE_HEIGHT.TREZOR_ACTION};
-    z-index: 10002;
-    transform: translate(-1px, -1px);
-`;
-
-const ArrowUp = styled.div`
-    position: absolute;
-    top: -9px;
-    left: 12px;
-    width: 0;
-    height: 0;
-    border-left: 9px solid transparent;
-    border-right: 9px solid transparent;
-    border-bottom: 9px solid black;
-    z-index: 10001;
-`;
-
-class Input extends PureComponent {
-    getIcon(inputState) {
-        let icon = [];
-        if (inputState === 'success') {
-            icon = ICONS.CHECKED;
-        } else if (inputState === 'warning') {
-            icon = ICONS.WARNING;
-        } else if (inputState === 'error') {
-            icon = ICONS.ERROR;
-        }
-        return icon;
-    }
-
-    getColor(inputState) {
-        let color = '';
-        if (inputState === 'success') {
-            color = colors.SUCCESS_PRIMARY;
-        } else if (inputState === 'warning') {
-            color = colors.WARNING_PRIMARY;
-        } else if (inputState === 'error') {
-            color = colors.ERROR_PRIMARY;
-        }
-        return color;
-    }
-
-    render() {
-        return (
-            <Wrapper className={this.props.className}>
-                {this.props.topLabel && <TopLabel>{this.props.topLabel}</TopLabel>}
-                <InputWrapper>
-                    <InputIconWrapper>
-                        {this.props.state && (
-                            <StyledIcon
-                                icon={this.getIcon(this.props.state)}
-                                color={this.getColor(this.props.state)}
-                            />
-                        )}
-                        <Overlay isPartiallyHidden={this.props.isPartiallyHidden} />
-                        {this.props.icon}
-                        <StyledInput
-                            autoComplete="off"
-                            height={this.props.height}
-                            trezorAction={this.props.trezorAction}
-                            hasIcon={this.props.icon || this.getIcon(this.props.state).length > 0}
-                            ref={this.props.innerRef}
-                            hasAddon={!!this.props.sideAddons}
-                            type={this.props.type}
-                            color={this.getColor(this.props.state)}
-                            placeholder={this.props.placeholder}
-                            autoCorrect={this.props.autocorrect}
-                            autoCapitalize={this.props.autocapitalize}
-                            spellCheck={this.props.spellCheck}
-                            isSmallText={this.props.isSmallText}
-                            value={this.props.value}
-                            readOnly={this.props.readOnly}
-                            onChange={this.props.onChange}
-                            onClick={this.props.autoSelect ? event => event.target.select() : null}
-                            borderColor={this.getColor(this.props.state)}
-                            disabled={this.props.isDisabled}
-                            name={this.props.name}
-                            data-lpignore="true"
-                        />
-                        <TrezorAction action={this.props.trezorAction}>
-                            <ArrowUp />
-                            {this.props.trezorAction}
-                        </TrezorAction>
-                    </InputIconWrapper>
-                    {this.props.sideAddons && this.props.sideAddons.map(sideAddon => sideAddon)}
-                </InputWrapper>
-                {this.props.bottomText && (
-                    <BottomText color={this.getColor(this.props.state)}>
-                        {this.props.bottomText}
-                    </BottomText>
-                )}
-            </Wrapper>
-        );
-    }
-}
-
-Input.propTypes = {
-    className: PropTypes.string,
-    innerRef: PropTypes.func,
-    placeholder: PropTypes.string,
-    type: PropTypes.string,
-    height: PropTypes.number,
-    autocorrect: PropTypes.string,
-    autocapitalize: PropTypes.string,
-    icon: PropTypes.node,
-    spellCheck: PropTypes.string,
-    value: PropTypes.string,
-    readOnly: PropTypes.bool,
-    autoSelect: PropTypes.bool,
-    onChange: PropTypes.func,
-    state: PropTypes.string,
-    bottomText: PropTypes.string,
-    topLabel: PropTypes.node,
-    trezorAction: PropTypes.node,
-    sideAddons: PropTypes.arrayOf(PropTypes.node),
-    isDisabled: PropTypes.bool,
-    name: PropTypes.string,
-    isSmallText: PropTypes.bool,
-    isPartiallyHidden: PropTypes.bool,
-};
-
-Input.defaultProps = {
-    type: 'text',
-    autoSelect: false,
-    height: 40,
-};
-
-export default Input;
--- a/src/components/modals/QrModal/index.js
+++ b/src/components/modals/QrModal/index.js
@ -5,14 +5,7 @@ import PropTypes from 'prop-types';
 import QrReader from 'react-qr-reader';
 import styled from 'styled-components';
 import { FormattedMessage, injectIntl } from 'react-intl';
-
-import colors from 'config/colors';
-import icons from 'config/icons';
-
-import { H2 } from 'components/Heading';
-import P from 'components/Paragraph';
-import Icon from 'components/Icon';
-import Link from 'components/Link';
+import { Link, Icon, P, H5, icons, colors } from 'trezor-ui-components';

 import { parseUri } from 'utils/cryptoUriParser';
 import type { parsedURI } from 'utils/cryptoUriParser';
@ -141,12 +134,12 @@ class QrModal extends Component<Props, State> {
        return (
            <Wrapper>
                <CloseLink onClick={this.handleCancel}>
-                    <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                    <Icon size={12} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                </CloseLink>
                <Padding>
-                    <H2>
+                    <H5>
                        <FormattedMessage {...l10nMessages.TR_SCAN_QR_CODE} />
-                    </H2>
+                    </H5>
                    {!this.state.readerLoaded && !this.state.error && (
                        <CameraPlaceholder>
                            <FormattedMessage {...l10nMessages.TR_WAITING_FOR_CAMERA} />
--- a/src/components/modals/confirm/Action/index.js
+++ b/src/components/modals/confirm/Action/index.js
@ -3,7 +3,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { H3 } from 'components/Heading';
+import { H6 } from 'trezor-ui-components';
 import DeviceIcon from 'components/images/DeviceIcon';
 import type { TrezorDevice } from 'flowtype';
 import { FormattedMessage } from 'react-intl';
@ -20,13 +20,17 @@ const Header = styled.div`
    padding: 48px;
 `;

+const StyledDeviceIcon = styled(DeviceIcon)`
+    margin-bottom: 30px;
+`;
+
 const ConfirmAction = (props: Props) => (
    <Wrapper>
        <Header>
-            <DeviceIcon device={props.device} size={100} />
-            <H3>
+            <StyledDeviceIcon device={props.device} size={50} />
+            <H6>
                <FormattedMessage {...l10nMessages.TR_CONFIRM_ACTION_ON_YOUR} />
-            </H3>
+            </H6>
        </Header>
    </Wrapper>
 );
--- 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 (
        <Wrapper>
            <Header>
-                <H3>
+                <H6>
                    <FormattedMessage {...l10nMessages.TR_CONFIRM_ADDRESS_ON_TREZOR} />
-                </H3>
+                </H6>
                <P>
                    <FormattedMessage {...l10nMessages.TR_PLEASE_COMPARE_YOUR_ADDRESS} />
                </P>
--- 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`
@ -67,11 +64,11 @@ const Row = styled.div`
 const Confirmation = (props: Props) => (
    <Wrapper>
        <StyledLink onClick={() => props.onReceiveConfirmation(false)}>
-            <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+            <Icon size={12} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
        </StyledLink>
-        <H2>Your Trezor is not backed up</H2>
-        <Icon size={48} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
-        <StyledP isSmaller>
+        <H5>Your Trezor is not backed up</H5>
+        <Icon size={32} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
+        <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>
--- 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 {
@ -60,6 +59,10 @@ const FeeLevelName = styled(StyledP)`
    padding-bottom: 0px;
 `;

+const StyledDeviceIcon = styled(DeviceIcon)`
+    margin-bottom: 10px;
+`;
+
 const ConfirmSignTx = (props: Props) => {
    const { amount, address, selectedFeeLevel } = props.sendForm;

@ -71,14 +74,14 @@ const ConfirmSignTx = (props: Props) => {
    return (
        <Wrapper>
            <Header>
-                <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
-                <H3>
+                <StyledDeviceIcon device={props.device} size={24} color={colors.TEXT_SECONDARY} />
+                <H5>
                    <FormattedMessage
                        {...l10nMessages.TR_CONFIRM_TRANSACTION_ON}
                        values={{ deviceLabel: props.device.label }}
                    />
-                </H3>
-                <P isSmaller>
+                </H5>
+                <P textAlign="center" size="small">
                    <FormattedMessage {...l10nMessages.TR_DETAILS_ARE_SHOWN_ON} />
                </P>
            </Header>
--- 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`
@ -150,10 +145,10 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
            <Wrapper>
                <Content>
                    <StyledLink onClick={onCancel}>
-                        <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                        <Icon size={12} 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>
--- 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)`
@ -137,10 +132,10 @@ class DuplicateDevice extends PureComponent<Props, State> {
        return (
            <Wrapper>
                <StyledLink onClick={onCancel}>
-                    <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                    <Icon size={12} 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>
--- 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}
                    />
--- 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';
@ -126,15 +123,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={{
--- 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';

@ -37,11 +30,12 @@ const Header = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
+    padding-bottom: 5px;

    color: ${colors.TEXT_PRIMARY};
 `;

-const StyledHeading = styled(H2)`
+const StyledHeading = styled(H5)`
    padding: 30px 48px 10px 48px;
 `;

@ -56,15 +50,17 @@ const StyledButton = styled(Button)`
 `;

 const StyledIcon = styled(Icon)`
-    position: absolute;
-    top: 10px;
-    right: 15px;
-
    &:hover {
        cursor: pointer;
    }
 `;

+const TooltipContainer = styled.div`
+    position: absolute;
+    top: 10px;
+    right: 15px;
+`;
+
 const Content = styled.div`
    padding: 55px 48px 40px 48px;
    position: relative;
@ -81,6 +77,10 @@ const Content = styled.div`
        `}
 `;

+const StyledWalletTypeIcon = styled(WalletTypeIcon)`
+    margin-right: 6px;
+`;
+
 class WalletType extends PureComponent<Props> {
    constructor(props: Props) {
        super(props);
@ -111,7 +111,7 @@ class WalletType extends PureComponent<Props> {
            <Wrapper>
                {device.state && (
                    <StyledLink onClick={onCancel}>
-                        <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+                        <Icon size={12} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
                    </StyledLink>
                )}
                <StyledHeading>
@ -129,10 +129,14 @@ class WalletType extends PureComponent<Props> {
                </StyledHeading>
                <Content isTop>
                    <Header>
-                        <WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} />
+                        <StyledWalletTypeIcon
+                            type="standard"
+                            size={16}
+                            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)}>
@ -140,21 +144,24 @@ class WalletType extends PureComponent<Props> {
                    </StyledButton>
                </Content>
                <Content>
-                    <Tooltip
-                        maxWidth={285}
-                        placement="top"
-                        content={this.props.intl.formatMessage(
-                            l10nMessages.TR_PASSPHRASE_IS_OPTIONAL_FEATURE
-                        )}
-                        readMoreLink="https://wiki.trezor.io/Passphrase"
-                    >
-                        <StyledIcon icon={icons.HELP} color={colors.TEXT_SECONDARY} size={26} />
-                    </Tooltip>
+                    <TooltipContainer>
+                        <Tooltip
+                            maxWidth={285}
+                            placement="top"
+                            content={this.props.intl.formatMessage(
+                                l10nMessages.TR_PASSPHRASE_IS_OPTIONAL_FEATURE
+                            )}
+                            ctaLink="https://wiki.trezor.io/Passphrase"
+                            ctaText={<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />}
+                        >
+                            <StyledIcon icon={icons.HELP} color={colors.TEXT_SECONDARY} size={16} />
+                        </Tooltip>
+                    </TooltipContainer>
                    <Header>
-                        <WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} />
+                        <StyledWalletTypeIcon type="hidden" size={16} color={colors.TEXT_PRIMARY} />
                        <FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} />
                    </Header>
-                    <P isSmaller>
+                    <P size="small">
                        <FormattedMessage
                            {...l10nMessages.TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK}
                        />
--- 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';
@ -51,13 +45,13 @@ const Img = styled.img`
 const CardanoWallet = (props: Props) => (
    <Wrapper>
        <StyledLink onClick={props.onCancel}>
-            <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+            <Icon size={12} 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>

--- 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';

@ -47,17 +42,18 @@ const Img = styled.img`
 const NemWallet = (props: Props) => (
    <Wrapper>
        <StyledLink onClick={props.onCancel}>
-            <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+            <Icon size={12} 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}>
--- 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';
@ -51,13 +45,13 @@ const Img = styled.img`
 const StellarWallet = (props: Props) => (
    <Wrapper>
        <StyledLink onClick={props.onCancel}>
-            <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+            <Icon size={12} 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>

--- 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';
@ -47,10 +41,10 @@ const Img = styled.img`
 const TezosWallet = (props: Props) => (
    <Wrapper>
        <StyledLink onClick={props.onCancel}>
-            <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
+            <Icon size={12} 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}>
--- a/src/components/modals/index.js
+++ b/src/components/modals/index.js
@ -3,7 +3,7 @@
 import * as React from 'react';

 import styled from 'styled-components';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';
 import { FADE_IN } from 'config/animations';

 import { UI } from 'trezor-connect';
--- 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}
                                        />
--- 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) => (
    <Wrapper>
        <Header>
            <DeviceIcon device={props.device} size={60} color={colors.TEXT_SECONDARY} />
-            <H3>Complete the action on {props.device.label} device</H3>
-            <P isSmaller>
+            <H5>Complete the action on {props.device.label} device</H5>
+            <P size="small">
                If you enter a wrong passphrase, you will not unlock the desired hidden wallet.
            </P>
        </Header>
--- a/src/components/modals/pin/Invalid/index.js
+++ b/src/components/modals/pin/Invalid/index.js
@ -5,8 +5,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { FormattedMessage } from 'react-intl';

-import { H3 } from 'components/Heading';
-import P from 'components/Paragraph';
+import { P, H5 } from 'trezor-ui-components';

 import type { TrezorDevice } from 'flowtype';
 import l10nMessages from './index.messages';
@ -21,13 +20,13 @@ const Wrapper = styled.div`

 const InvalidPin = (props: Props) => (
    <Wrapper>
-        <H3>
+        <H5>
            <FormattedMessage
                {...l10nMessages.TR_ENTERED_PIN_NOT_CORRECT}
                values={{ deviceLabel: props.device.label }}
            />
-        </H3>
-        <P isSmaller>
+        </H5>
+        <P small="size">
            <FormattedMessage {...l10nMessages.TR_RETRYING_DOT_DOT} />
        </P>
    </Wrapper>
--- a/src/components/modals/pin/Pin/components/Button/index.js
+++ b/src/components/modals/pin/Pin/components/Button/index.js
@ -1,56 +0,0 @@
-/* @flow */
-
-import * as React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import colors from 'config/colors';
-import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
-
-type Props = {
-    onClick: () => void,
-    children: React.Node,
-};
-
-const Wrapper = styled.button`
-    width: 80px;
-    height: 80px;
-    margin-top: 15px;
-    margin-left: 10px;
-    font-size: ${FONT_SIZE.BIGGER};
-    font-weight: ${FONT_WEIGHT.SEMIBOLD};
-    color: ${colors.TEXT_PRIMARY};
-    border: 1px solid ${colors.DIVIDER};
-    background: ${colors.WHITE};
-    transition: all 0.3s;
-    cursor: pointer;
-
-    @media screen and (max-width: ${SCREEN_SIZE.XS}) {
-        width: 50px;
-        height: 50px;
-    }
-
-    &:first-child {
-        margin-left: 0px;
-    }
-
-    &:hover {
-        color: ${colors.TEXT_PRIMARY};
-        background-color: ${colors.WHITE};
-        border-color: ${colors.TEXT_SECONDARY};
-    }
-
-    &:active {
-        color: ${colors.TEXT_PRIMARY};
-        background: ${colors.DIVIDER};
-        border-color: ${colors.DIVIDER};
-    }
-`;
-
-const PinButton = ({ children, onClick }: Props) => <Wrapper onClick={onClick}>{children}</Wrapper>;
-
-PinButton.propTypes = {
-    children: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-};
-
-export default PinButton;
--- a/src/components/modals/pin/Pin/components/Input/index.js
+++ b/src/components/modals/pin/Pin/components/Input/index.js
@ -1,50 +0,0 @@
-/* @flow */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import colors from 'config/colors';
-import Icon from 'components/Icon';
-import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
-import icons from 'config/icons';
-
-type Props = {
-    value: string,
-    onDeleteClick: () => void,
-};
-
-const Wrapper = styled.div`
-    position: relative;
-`;
-
-const StyledInput = styled.input`
-    letter-spacing: 7px;
-    width: 100%;
-    font-weight: ${FONT_WEIGHT.SEMIBOLD};
-    font-size: ${FONT_SIZE.BIGGEST};
-    padding: 5px 31px 10px 20px;
-    color: ${colors.TEXT_PRIMARY};
-    background: transparent;
-    border: 1px solid ${colors.DIVIDER};
-`;
-
-const StyledIcon = styled(Icon)`
-    position: absolute;
-    top: 10px;
-    right: 15px;
-    cursor: pointer;
-`;
-
-const Input = ({ value, onDeleteClick }: Props) => (
-    <Wrapper>
-        <StyledInput disabled type="password" maxLength="9" autoComplete="off" value={value} />
-        <StyledIcon onClick={onDeleteClick} color={colors.TEXT_PRIMARY} icon={icons.BACK} />
-    </Wrapper>
-);
-
-Input.propTypes = {
-    onDeleteClick: PropTypes.func.isRequired,
-    value: PropTypes.string.isRequired,
-};
-
-export default Input;
--- 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={{
--- a/src/components/notifications/App/components/NoBackup/index.js
+++ b/src/components/notifications/App/components/NoBackup/index.js
@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';

 import type { Props } from '../../index';

--- a/src/components/notifications/App/components/OnlineStatus/index.js
+++ b/src/components/notifications/App/components/OnlineStatus/index.js
@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';

 import type { Props } from '../../index';
 import l10nMessages from './index.messages';
--- a/src/components/notifications/App/components/UpdateBridge/index.js
+++ b/src/components/notifications/App/components/UpdateBridge/index.js
@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';

 import l10nCommonMessages from 'views/common.messages';
 import type { Props } from '../../index';
--- a/src/components/notifications/App/components/UpdateFirmware/index.js
+++ b/src/components/notifications/App/components/UpdateFirmware/index.js
@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';
 import l10nCommonMessages from 'views/common.messages';
 import { withRouter } from 'react-router-dom';
 import { matchPath } from 'react-router';
--- a/src/components/notifications/Context/components/Account/index.js
+++ b/src/components/notifications/Context/components/Account/index.js
@ -1,6 +1,6 @@
 /* @flow */
 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';
 import l10nMessages from './index.messages';

 import type { Props } from '../../index';
--- 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``;
@ -40,6 +37,10 @@ const StyledNotification = styled(Notification)`
    }
 `;

+const StyledIcon = styled(Icon)`
+    margin-right: 6px;
+`;
+
 class Group extends PureComponent {
    constructor() {
        super();
@ -71,7 +72,7 @@ class Group extends PureComponent {
                {groupNotifications.length > 1 && (
                    <Header onClick={this.toggle}>
                        <Left>
-                            <Icon color={color} size={30} icon={getIcon(type)} />
+                            <StyledIcon color={color} size={16} icon={getIcon(type)} />
                            <Title color={color}>
                                {groupNotifications.length}{' '}
                                {groupNotifications.length > 1 ? `${type}s` : type}
@ -81,7 +82,7 @@ class Group extends PureComponent {
                            <Icon
                                icon={ICONS.ARROW_DOWN}
                                color={colors.TEXT_SECONDARY}
-                                size={24}
+                                size={14}
                                isActive={!this.state.visible}
                                canAnimate
                            />
--- a/src/components/notifications/Context/components/Static/index.js
+++ b/src/components/notifications/Context/components/Static/index.js
@ -1,9 +1,8 @@
 /* @flow */

 import * as React from 'react';
-import Notification from 'components/Notification';
+import { Notification, Link } from 'trezor-ui-components';
 import Bignumber from 'bignumber.js';
-import Link from 'components/Link';
 import { FormattedMessage } from 'react-intl';
 import l10nCommonMessages from 'views/common.messages';
 import l10nMessages from './index.messages';
--- 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 { 
--- a/src/config/colors.js
+++ b/src/config/colors.js
@ -1,41 +0,0 @@
-export default {
-    WHITE: '#FFFFFF',
-    BACKGROUND: '#EBEBEB',
-
-    TEXT: '#333333',
-    WALLET_VIEW_TITLE: '#505050',
-
-    HEADER: '#1A1A1A',
-    HEADER_DIVIDER: '#424242',
-    BODY: '#E3E3E3',
-    MAIN: '#FBFBFB',
-    LANDING: '#F9F9F9',
-
-    TEXT_PRIMARY: '#494949',
-    TEXT_SECONDARY: '#757575',
-
-    GRAY_LIGHT: '#F2F2F2',
-    DIVIDER: '#E3E3E3',
-
-    GREEN_PRIMARY: '#01B757',
-    GREEN_SECONDARY: '#00AB51',
-    GREEN_TERTIARY: '#009546',
-
-    INFO_PRIMARY: '#1E7FF0',
-    INFO_SECONDARY: '#E1EFFF',
-
-    WARNING_PRIMARY: '#EB8A00',
-    WARNING_SECONDARY: '#FFEFD9',
-
-    SUCCESS_PRIMARY: '#01B757',
-    SUCCESS_SECONDARY: '#DFFFEE',
-
-    ERROR_PRIMARY: '#ED1212',
-    ERROR_SECONDARY: '#FFE9E9',
-
-    LABEL_COLOR: '#A9A9A9',
-    TOOLTIP_BACKGROUND: '#333333',
-
-    INPUT_FOCUSED_BORDER: '#A9A9A9',
-    INPUT_FOCUSED_SHADOW: '#d6d7d7',
-};
--- a/src/config/icons.js
+++ b/src/config/icons.js
@ -1,399 +0,0 @@
-export default {
-    TOP: [
-        'M677.44 613.76c-3.255 1.423-7.047 2.252-11.033 2.252-0.284 0-0.566-0.004-0.848-0.013l0.041 0.001c-8.323-0.531-15.657-4.371-20.77-10.206l-0.030-0.034-93.44-109.44c-0.378-0.735-1.131-1.229-1.999-1.229-1.237 0-2.24 1.003-2.24 2.24 0 0.209 0.029 0.412 0.083 0.605l-0.004-0.016v233.28c0.102 0.987 0.16 2.132 0.16 3.291 0 18.733-15.187 33.92-33.92 33.92s-33.92-15.187-33.92-33.92c0-1.159 0.058-2.304 0.172-3.433l-0.012 0.142v-236.16c0.050-0.177 0.079-0.379 0.079-0.589 0-1.237-1.003-2.24-2.24-2.24-0.868 0-1.621 0.494-1.993 1.216l-0.006 0.013-88.32 104.32c-5.204 6.343-13.042 10.358-21.819 10.358-7.711 0-14.699-3.099-19.784-8.121l0.003 0.003c-6.16-5.845-9.993-14.090-9.993-23.231 0-8.17 3.062-15.625 8.101-21.28l-0.028 0.032 146.56-173.44c5.311-6.15 13.061-10.069 21.731-10.24h0.029c8.727 0.036 16.523 3.991 21.724 10.196l0.036 0.044 152 178.56c5.441 6.124 8.764 14.234 8.764 23.121 0 12.698-6.785 23.81-16.927 29.911l-0.157 0.088z',
-        'M329.28 292.8c-0.024-0.488-0.038-1.060-0.038-1.635 0-18.891 14.881-34.306 33.561-35.163l0.077-0.003h292.48c18.795 1.81 33.372 17.523 33.372 36.64s-14.577 34.83-33.222 36.628l-0.15 0.012h-292.48c-18.751-0.866-33.625-16.278-33.625-35.165 0-0.463 0.009-0.923 0.027-1.381l-0.002 0.066z',
-    ],
-    EYE_CROSSED: [
-        'M768 456.64c-20.16-34.88-44.48-63.68-71.68-86.72l-64.64 64.64c0.64 4.16 0.96 8.64 0.96 12.8 0 60.16-51.84 108.8-115.84 108.8-2.24 0-4.16 0-6.4-0.32l-33.92 33.92c12.16 1.6 24 2.24 36.16 2.24 98.88 0 197.44-45.12 255.36-135.36zM348.8 646.080c-8.96 8.96-23.68 8.96-32.64 0l-3.52-3.52c-8.96-8.96-8.96-23.68 0-32.64l53.76-53.76c-43.52-22.4-81.6-56.32-110.4-100.8 83.84-130.56 226.88-177.6 348.48-137.28l57.6-57.6c9.28-9.28 23.68-9.28 32.96 0l3.2 3.2c8.96 8.96 8.96 23.68 0 32.64l-349.44 349.76zM516.8 338.56c-64-0.32-115.84 48.64-115.84 108.48-0.32 21.12 6.080 40.64 17.28 57.28l42.56-42.56c-1.92-5.76-2.56-12.16-1.92-18.88 2.88-30.080 30.72-52.16 62.72-49.92 2.24 0.32 4.8 0.64 7.040 0.96l42.56-42.56c-16.32-8.32-34.56-12.8-54.4-12.8z',
-    ],
-    EYE: [
-        'M512.64 592c-99.2 0-198.4-45.76-256.64-136.64 128.64-200 394.56-203.84 512 1.28-57.92 90.24-156.48 135.36-255.36 135.36zM516.8 338.56c-64-0.32-115.84 48.64-115.84 108.48-0.32 60.16 51.52 109.12 115.84 109.12 64 0 115.84-48.64 115.84-108.8 0.32-60.16-51.52-108.8-115.84-108.8zM574.72 451.84c2.56-30.080-21.12-56.32-53.12-58.88-32-2.24-59.84 19.84-62.72 49.92-2.56 30.080 21.44 56.32 53.12 58.56 32 2.56 59.84-19.84 62.72-49.6z',
-    ],
-    CHECKED: [
-        'M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z',
-    ],
-    BACK: [
-        'M656.224 402.304l-66.848 66.176-66.848-66.176-50.144 49.6 66.912 66.176-66.912 66.176 50.176 49.632 66.848-66.176 66.848 66.176 50.112-49.632-66.816-66.176 66.816-66.176-50.144-49.6zM337.824 256h540.928c27.2 0 49.248 21.824 49.248 48.768v414.464c0 26.944-22.048 48.768-49.248 48.768h-540.608c-13.856 0-27.072-5.792-36.416-15.936l-192.896-209.664c-17.248-18.752-17.088-47.488 0.352-66.048l192.576-204.8c9.344-9.92 22.4-15.552 36.064-15.552z',
-    ],
-    HELP: [
-        'M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM501.216 717.952c-27.808 0-50.496-22.464-50.496-50.048 0-28.32 22.176-50.528 50.496-50.528 27.616 0 50.048 22.656 50.048 50.528 0.032 27.168-22.88 50.048-50.048 50.048zM536.416 542.464v27.744c0 13.504-5.28 18.784-18.784 18.784h-36.224c-13.504 0-18.72-5.28-18.72-18.784v-61.984c0-15.68 16.064-20.352 30.208-24.48 3.456-1.056 7.040-2.080 10.496-3.264 18.336-6.592 29.696-14.816 29.696-35.296 0-6.656 0-26.816-32.832-26.816-20.224 0-38.624 7.776-49.6 12.416-6.208 2.624-9.28 3.904-12.384 3.904-6.336 0-12.32-5.088-13.248-10.304l-12.608-32.96c-1.824-3.776-1.824-6.784-1.824-9.216 0-24.288 75.552-37.664 100.608-37.664 63.104 0 105.504 40.672 105.504 101.152 0.032 65.44-49.12 85.952-80.288 96.768z',
-    ],
-    REFRESH: [
-        'M347.392 473.312c17.28-82.24 90.4-142.336 173.92-142.336 31.648 0 61.92 8.704 88.576 24.416 6.656 3.936 12.8 8.672 18.944 13.504l-68.832 68.736 192 33.056-32-198.272-38.4 42.016c-5.92-5.024-12.064-9.728-18.336-14.144-40.928-28.672-89.92-44.288-141.92-44.288-121.664 0-225.12 89.312-245.984 210.368l-3.36 20.896h72.672l2.72-13.952zM676.608 550.688c-17.28 82.24-90.4 142.336-173.92 142.336-31.648 0-61.92-8.704-88.576-24.416-6.624-3.936-12.8-8.672-18.944-13.504l68.832-68.736-192-33.056 32 198.272 38.4-42.016c5.92 5.024 12.032 9.696 18.336 14.144 40.928 28.672 89.92 44.288 141.952 44.288 121.664 0 225.12-89.312 245.984-210.368l3.328-20.864h-72.672l-2.72 13.92z',
-    ],
-    T1: [
-        'M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z',
-    ],
-    T2: [
-        'M 625.28 546.304 c 0 4.512 -3.84 8 -8.32 8 l -209.92 0 c -4.48 0 -8.32 -3.488 -8.32 -8 l 0 -202.208 c 0 -4.512 3.84 -8.32 8.32 -8.32 l 209.92 0 c 4.48 0 8.32 3.808 8.32 8.32 l 0 202.208 Z m 18.56 -304.32 l -263.68 0 c -23.04 0 -41.92 18.56 -41.92 41.28 l 0 233.952 c 0 55.04 16 108.768 46.72 155.168 l 64.64 96.992 c 5.12 8 13.76 12.448 23.36 12.448 l 78.4 0 c 9.28 0 17.92 -4.448 23.04 -11.84 l 60.16 -86.048 c 33.6 -47.68 51.2 -103.392 51.2 -161.28 l 0 -239.392 c 0 -22.72 -18.88 -41.28 -41.92 -41.28',
-    ],
-    COG: [
-        'M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z',
-    ],
-    EJECT: [
-        'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z',
-    ],
-    CLOSE: [
-        'M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z',
-    ],
-    DOWNLOAD: [
-        'M346.56 410.24c3.255-1.423 7.047-2.252 11.033-2.252 0.284 0 0.566 0.004 0.848 0.013l-0.041-0.001c8.323 0.531 15.657 4.371 20.77 10.206l0.030 0.034 93.44 109.44c0.378 0.735 1.131 1.229 1.999 1.229 1.237 0 2.24-1.003 2.24-2.24 0-0.209-0.029-0.412-0.083-0.605l0.004 0.016v-233.28c-0.102-0.987-0.16-2.132-0.16-3.291 0-18.733 15.187-33.92 33.92-33.92s33.92 15.187 33.92 33.92c0 1.159-0.058 2.304-0.172 3.433l0.012-0.142v236.16c-0.050 0.177-0.079 0.379-0.079 0.589 0 1.237 1.003 2.24 2.24 2.24 0.868 0 1.621-0.494 1.993-1.216l0.006-0.013 88.32-104.32c5.204-6.343 13.042-10.358 21.819-10.358 7.711 0 14.699 3.099 19.784 8.121l-0.003-0.003c6.16 5.845 9.993 14.090 9.993 23.231 0 8.17-3.062 15.625-8.101 21.28l0.028-0.032-146.56 173.44c-5.311 6.15-13.061 10.069-21.731 10.24h-0.029c-8.727-0.036-16.523-3.991-21.724-10.196l-0.036-0.044-152-178.56c-5.441-6.124-8.764-14.234-8.764-23.121 0-12.698 6.785-23.81 16.927-29.911l0.157-0.088z',
-        'M694.72 731.2c0.024 0.488 0.038 1.060 0.038 1.635 0 18.891-14.881 34.306-33.561 35.163l-0.077 0.003h-292.48c-18.795-1.81-33.372-17.523-33.372-36.64s14.577-34.83 33.222-36.628l0.15-0.012h292.48c18.751 0.866 33.625 16.278 33.625 35.165 0 0.463-0.009 0.923-0.027 1.381l0.002-0.066z',
-    ],
-    PLUS: [
-        'M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z',
-    ],
-    ARROW_UP: [
-        'M757.216 603.072l-219.616-237.44c-8.128-8.576-19.296-13.632-31.040-13.632-11.744 0.288-23.2 5.056-31.040 13.664l-208.768 227.040c-15.36 16.928-14.176 43.040 3.008 58.176 16.864 15.424 43.392 13.952 59.040-2.656l177.76-193.504 188.608 203.904c7.52 8 18.080 12.768 29.216 13.344 11.456 0.608 21.696-3.264 30.112-10.688 16.896-15.456 18.080-41.568 2.72-58.208z',
-    ],
-    ARROW_LEFT: [
-        'M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z',
-    ],
-    ARROW_DOWN: [
-        'M757.216 420.928l-219.616 237.44c-8.128 8.576-19.296 13.632-31.040 13.632-11.744-0.288-23.2-5.056-31.040-13.664l-208.768-227.040c-15.36-16.928-14.176-43.040 3.008-58.176 16.864-15.424 43.392-13.952 59.040 2.656l177.76 193.504 188.608-203.904c7.52-8 18.080-12.768 29.216-13.344 11.456-0.608 21.696 3.264 30.112 10.688 16.896 15.456 18.080 41.568 2.72 58.208z',
-    ],
-    CHAT: [
-        'M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z',
-    ],
-    SKIP: [
-        'M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z',
-    ],
-    WARNING: [
-        'M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z',
-    ],
-    INFO: [
-        'M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM507.904 300.192c27.008 0 48.992 21.984 48.992 49.088 0 27.296-21.984 49.472-48.992 49.472-27.264 0-49.536-22.176-49.536-49.472 0-27.552 21.728-49.088 49.536-49.088zM586.656 660.8c0 10.304-4.96 15.328-15.264 15.328h-126.464c-10.304 0-15.328-5.024-15.328-15.328v-32.256c0-10.304 5.024-15.264 15.328-15.264h23.36v-136.064h-23.872c-10.304 0-15.264-5.024-15.264-15.328v-32.224c0-10.304 4.96-15.264 15.264-15.264h88.288c10.304 0 15.264 4.96 15.264 15.264v183.648h23.424c10.304 0 15.264 4.96 15.264 15.264v32.224z',
-    ],
-    ERROR: [
-        'M693.12 330.88c-46.317-46.267-110.276-74.88-180.919-74.88-141.385 0-256 114.615-256 256s114.615 256 256 256c70.642 0 134.602-28.613 180.921-74.882l-0.002 0.002c46.387-46.337 75.081-110.377 75.081-181.12s-28.694-134.783-75.079-181.118l-0.002-0.002zM494.080 344.32h53.12c16 0 18.24 9.28 18.24 14.72v10.24l-10.88 194.56c0 14.4-8 17.28-18.88 17.28h-28.16c-10.56 0-17.28-2.88-18.88-17.92l-10.88-193.92v-10.56c-1.28-4.8 2.24-14.080 16.32-14.080zM521.28 717.76c-0.095 0.001-0.207 0.001-0.319 0.001-27.747 0-50.24-22.493-50.24-50.24s22.493-50.24 50.24-50.24c27.747 0 50.24 22.493 50.24 50.24 0 0.112 0 0.224-0.001 0.336v-0.017c0 0 0 0.001 0 0.001 0 27.634-22.311 50.057-49.903 50.239h-0.017z',
-    ],
-    SUCCESS: [
-        'M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z',
-    ],
-    WALLET_STANDARD: [
-        'M746.656,341.344l-405.312,0l-21.344,0c-11.744,0 -21.344,-9.568 -21.344,-21.344c0,-11.776 9.6,-21.344 21.344,-21.344l320,0l0,21.344l42.656,0l0,-42.656c0,-11.776 -9.536,-21.344 -21.312,-21.344l-341.344,0c-35.36,0 -64,28.64 -64,64l0,362.656c0,47.136 38.208,85.344 85.344,85.344l405.344,0c11.744,0 21.312,-9.568 21.312,-21.344l0,-384c0,-11.776 -9.568,-21.312 -21.344,-21.312Zm-106.656,256c-23.584,0 -42.656,-19.104 -42.656,-42.656c0,-23.584 19.072,-42.688 42.656,-42.688c23.584,0 42.656,19.104 42.656,42.656c0,23.584 -19.072,42.688 -42.656,42.688Z',
-    ],
-    WALLET_HIDDEN: [
-        'M813.472,552.96l-101.344,-281.6c-2.528,-7.68 -12.672,-15.36 -22.784,-15.36l-76,0c-15.2,0 -25.344,10.24 -25.344,25.6c0,15.36 10.144,25.6 25.344,25.6l58.272,0l83.584,230.4l-192.544,0l-101.344,0l-192.512,0l83.616,-230.4l58.272,0c15.2,0 25.344,-10.24 25.344,-25.6c0,-15.36 -10.144,-25.6 -25.344,-25.6l-76,0c-10.144,0 -20.256,7.68 -22.784,17.92l-101.344,281.6c-2.56,0 -2.56,5.12 -2.56,7.68l0,128c0,43.52 32.928,76.8 76,76.8l126.656,0c43.072,0 76,-33.28 76,-76.8l0,-102.4l50.656,0l0,102.4c0,43.52 32.928,76.8 76,76.8l126.656,0c43.072,0 76,-33.28 76,-76.8l0,-128c0.032,-2.56 0.032,-7.68 -2.496,-10.24Z',
-    ],
-    QRCODE: [
-        'M832 1024l-64 0l0 -128l64 0l0 128Zm-320 0l-64 0l0 -128l64 0l0 128Zm192 0l-128 0l0 -128l128 0l0 128Zm192 -192l64 0l0 64l64 0l0 128l-128 0l0 -192Zm-896 -192l384 0l0 384l-384 0l0 -384Zm320 320l0 -256l-256 0l0 256l256 0Zm-64 -64l-128 0l0 -128l128 0l0 128Zm512 0l-64 0l0 -64l64 0l0 64Zm-192 -128l0 128l-64 0l0 -64l-64 0l0 -64l128 0Zm128 64l-64 0l0 -64l64 0l0 64Zm192 0l-128 0l0 -64l128 0l0 64Zm-256 -64l-64 0l0 -64l64 0l0 64Zm320 -64l-64 0l0 -64l128 0l0 128l-64 0l0 -64Zm-384 0l-128 0l0 -128l128 0l0 128Zm64 -64l64 0l0 -64l128 0l0 128l-192 0l0 -64Zm-320 -128l64 0l0 -64l64 0l0 128l-128 0l0 -64Zm256 0l-64 0l0 -64l192 0l0 128l-128 0l0 -64Zm-576 -64l128 0l0 64l64 0l0 64l-192 0l0 -128Zm896 64l-128 0l0 -64l256 0l0 128l-128 0l0 -64Zm-576 0l-128 0l0 -64l128 0l0 64Zm192 -64l-64 0l0 -64l64 0l0 64Zm-512 -448l384 0l0 384l-384 0l0 -384Zm576 384l-64 0l0 -128l64 0l0 128Zm64 -384l384 0l0 384l-384 0l0 -384Zm-320 320l0 -256l-256 0l0 256l256 0Zm640 0l0 -256l-256 0l0 256l256 0Zm-704 -64l-128 0l0 -128l128 0l0 128Zm640 0l-128 0l0 -128l128 0l0 128Zm-384 -256l0 64l64 0l0 128l-64 0l0 64l-64 0l0 -256l64 0Z',
-    ],
-    MENU: [
-        'M192,265.497l640,0l0,119.906l-640,0l0,-119.906Zm0,186.56l640,0l0,119.946l-640,0l0,-119.946Zm0,186.56l640,0l0,119.886l-640,0l0,-119.886Z',
-    ],
-};
-
-/*
-        trezor icoomon font pack
-{
-  "icons": [
-    {
-      "paths": [
-        "M381.088 476.352v-89.696c0-72.16 53.696-130.656 119.904-130.656h35.104c66.208 0 119.904 58.496 119.904 130.656v7.616h-69.312c-4.416-36.704-33.248-65.056-68.128-65.056-37.952 0-68.736 33.536-68.736 74.88v72.288h221.184c18.208 0 32.992 15.552 32.992 34.72v222.24c0 19.104-14.784 34.656-32.992 34.656h-318.016c-18.208 0-32.992-15.552-32.992-34.72v-222.24c0-19.168 14.784-34.72 32.992-34.72h28.096z"
-      ],
-      "tags": [
-        "icon-unlocked"
-      ],
-      "defaultCode": 59648,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M671.008 476.352h-14.976v-89.632c0-72.256-53.76-130.72-120.064-130.72h-35.136c-66.304 0-119.744 58.464-119.744 130.72v89.632h-28.096c-18.336 0-32.992 15.424-32.992 34.688v222.272c0 18.944 14.656 34.688 32.992 34.688h318.016c18.336 0 32.992-15.744 32.992-34.688v-222.272c0-19.264-14.656-34.688-32.992-34.688zM449.824 404.064c0-41.44 30.56-74.848 68.736-74.848 34.816 0 63.552 33.728 68.128 70.336v76.768h-136.864v-72.256z"
-      ],
-      "tags": [
-        "icon-locked"
-      ],
-      "defaultCode": 59649,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z"
-      ],
-      "tags": [
-        "icon-eject"
-      ],
-      "defaultCode": 59650,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M347.392 473.312c17.28-82.24 90.4-142.336 173.92-142.336 31.648 0 61.92 8.704 88.576 24.416 6.656 3.936 12.8 8.672 18.944 13.504l-68.832 68.736 192 33.056-32-198.272-38.4 42.016c-5.92-5.024-12.064-9.728-18.336-14.144-40.928-28.672-89.92-44.288-141.92-44.288-121.664 0-225.12 89.312-245.984 210.368l-3.36 20.896h72.672l2.72-13.952zM676.608 550.688c-17.28 82.24-90.4 142.336-173.92 142.336-31.648 0-61.92-8.704-88.576-24.416-6.624-3.936-12.8-8.672-18.944-13.504l68.832-68.736-192-33.056 32 198.272 38.4-42.016c5.92 5.024 12.032 9.696 18.336 14.144 40.928 28.672 89.92 44.288 141.952 44.288 121.664 0 225.12-89.312 245.984-210.368l3.328-20.864h-72.672l-2.72 13.92z"
-      ],
-      "tags": [
-        "icon-refresh"
-      ],
-      "defaultCode": 59651,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM507.904 300.192c27.008 0 48.992 21.984 48.992 49.088 0 27.296-21.984 49.472-48.992 49.472-27.264 0-49.536-22.176-49.536-49.472 0-27.552 21.728-49.088 49.536-49.088zM586.656 660.8c0 10.304-4.96 15.328-15.264 15.328h-126.464c-10.304 0-15.328-5.024-15.328-15.328v-32.256c0-10.304 5.024-15.264 15.328-15.264h23.36v-136.064h-23.872c-10.304 0-15.264-5.024-15.264-15.328v-32.224c0-10.304 4.96-15.264 15.264-15.264h88.288c10.304 0 15.264 4.96 15.264 15.264v183.648h23.424c10.304 0 15.264 4.96 15.264 15.264v32.224z"
-      ],
-      "tags": [
-        "icon-info"
-      ],
-      "defaultCode": 59652,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M580.992 256h-137.984c-103.296 0-187.008 85.952-187.008 192 0 96.608 69.536 176.32 160 189.792v130.208l128-128h36.992c103.296 0 187.008-85.952 187.008-192s-83.712-192-187.008-192z"
-      ],
-      "tags": [
-        "icon-chat"
-      ],
-      "defaultCode": 59653,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M512 256c-141.376 0-256 114.656-256 256 0 141.408 114.624 256 256 256s256-114.592 256-256c0-141.344-114.624-256-256-256zM529.056 631.456v-68.256c-102.4-34.144-136.544 0-170.656 68.256 0-170.656 102.4-204.8 170.656-204.8v-68.256l136.544 136.544-136.544 136.512z"
-      ],
-      "tags": [
-        "icon-skip"
-      ],
-      "defaultCode": 59654,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z"
-      ],
-      "tags": [
-        "icon-cog"
-      ],
-      "defaultCode": 59655,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M795.616 735.008l-264.896-465.44c-10.272-18.080-27.168-18.080-37.504 0l-264.864 465.44c-10.272 18.176-1.696 32.992 19.040 32.992h529.184c20.8 0 29.376-14.816 19.040-32.992zM549.76 673.12c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-37.952c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v37.952zM549.76 559.264c0 10.464-8.48 18.976-18.912 18.976h-37.792c-10.336 0-18.912-8.512-18.912-18.976v-113.856c0-10.464 8.576-18.976 18.912-18.976h37.792c10.4 0 18.912 8.544 18.912 18.976v113.856z"
-      ],
-      "tags": [
-        "icon-warning"
-      ],
-      "defaultCode": 59656,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M757.216 420.928l-219.616 237.44c-8.128 8.576-19.296 13.632-31.040 13.632-11.744-0.288-23.2-5.056-31.040-13.664l-208.768-227.040c-15.36-16.928-14.176-43.040 3.008-58.176 16.864-15.424 43.392-13.952 59.040 2.656l177.76 193.504 188.608-203.904c7.52-8 18.080-12.768 29.216-13.344 11.456-0.608 21.696 3.264 30.112 10.688 16.896 15.456 18.080 41.568 2.72 58.208z"
-      ],
-      "tags": [
-        "icon-arrow-down"
-      ],
-      "defaultCode": 59657,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M754.816 689.92c17.6 17.6 17.6 46.72 0 64.64-8.96 8.64-20.48 13.44-32.64 13.44s-23.68-4.8-32.32-13.44l-177.888-177.92-177.888 177.92c-16.32 16.96-47.040 17.6-64.64 0-17.92-17.92-17.92-47.040 0-64.64l178.208-177.92-178.208-177.92c-17.92-17.92-17.92-46.72 0-64.64 17.28-17.28 47.36-17.28 64.64 0l177.888 177.92 177.888-177.92c17.92-17.92 47.040-17.92 64.96 0 17.6 17.92 17.6 46.72 0 64.64l-178.24 177.92 178.24 177.92z"
-      ],
-      "tags": [
-        "icon-close"
-      ],
-      "defaultCode": 59658,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M757.216 603.072l-219.616-237.44c-8.128-8.576-19.296-13.632-31.040-13.632-11.744 0.288-23.2 5.056-31.040 13.664l-208.768 227.040c-15.36 16.928-14.176 43.040 3.008 58.176 16.864 15.424 43.392 13.952 59.040-2.656l177.76-193.504 188.608 203.904c7.52 8 18.080 12.768 29.216 13.344 11.456 0.608 21.696-3.264 30.112-10.688 16.896-15.456 18.080-41.568 2.72-58.208z"
-      ],
-      "tags": [
-        "icon-arrow-up"
-      ],
-      "defaultCode": 59659,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M420.928 757.216l237.44-219.616c8.576-8.128 13.632-19.296 13.632-31.040-0.288-11.744-5.056-23.2-13.664-31.040l-227.040-208.768c-16.928-15.36-43.040-14.176-58.176 3.008-15.424 16.864-13.952 43.392 2.656 59.040l193.504 177.76-203.904 188.608c-8 7.52-12.768 18.080-13.344 29.216-0.608 11.456 3.264 21.696 10.688 30.112 15.456 16.896 41.568 18.080 58.208 2.72z"
-      ],
-      "tags": [
-        "icon-arrow-right2"
-      ],
-      "defaultCode": 59660,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M768 512c0 22.080-17.92 40-40 40h-176v176c0 22.080-17.92 40-40 40s-40-17.92-40-40v-176h-176c-22.080 0-40-17.92-40-40s17.92-40 40-40h176v-176c0-22.080 17.92-40 40-40s40 17.92 40 40v176h176c22.080 0 40 17.92 40 40z"
-      ],
-      "tags": [
-        "icon-plus"
-      ],
-      "defaultCode": 59661,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M420.928 757.216l237.44-219.616c8.576-8.128 13.632-19.296 13.632-31.040-0.288-11.744-5.056-23.2-13.664-31.040l-227.040-208.768c-16.928-15.36-43.040-14.176-58.176 3.008-15.424 16.864-13.952 43.392 2.656 59.040l193.504 177.76-203.904 188.608c-8 7.52-12.768 18.080-13.344 29.216-0.608 11.456 3.264 21.696 10.688 30.112 15.456 16.896 41.568 18.080 58.208 2.72z"
-      ],
-      "tags": [
-        "icon-arrow-right"
-      ],
-      "defaultCode": 59662,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M693.024 330.944c-99.968-99.936-262.080-99.936-362.048 0s-99.968 262.112 0 362.080c99.968 100 262.144 99.936 362.048 0 99.968-99.904 99.968-262.176 0-362.080zM501.216 717.952c-27.808 0-50.496-22.464-50.496-50.048 0-28.32 22.176-50.528 50.496-50.528 27.616 0 50.048 22.656 50.048 50.528 0.032 27.168-22.88 50.048-50.048 50.048zM536.416 542.464v27.744c0 13.504-5.28 18.784-18.784 18.784h-36.224c-13.504 0-18.72-5.28-18.72-18.784v-61.984c0-15.68 16.064-20.352 30.208-24.48 3.456-1.056 7.040-2.080 10.496-3.264 18.336-6.592 29.696-14.816 29.696-35.296 0-6.656 0-26.816-32.832-26.816-20.224 0-38.624 7.776-49.6 12.416-6.208 2.624-9.28 3.904-12.384 3.904-6.336 0-12.32-5.088-13.248-10.304l-12.608-32.96c-1.824-3.776-1.824-6.784-1.824-9.216 0-24.288 75.552-37.664 100.608-37.664 63.104 0 105.504 40.672 105.504 101.152 0.032 65.44-49.12 85.952-80.288 96.768z"
-      ],
-      "tags": [
-        "icon-help"
-      ],
-      "defaultCode": 59663,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M768 288v160c0 17.6-14.4 32-32 32h-160c-17.6 0-32-14.4-32-32v-160c0-17.6 14.4-32 32-32h160c17.6 0 32 14.4 32 32zM480 576v160c0 17.6-14.4 32-32 32h-160c-17.6 0-32-14.4-32-32v-160c0-17.6 14.4-32 32-32h160c17.6 0 32 14.4 32 32zM480 288v160c0 17.6-14.4 32-32 32h-160c-17.6 0-32-14.4-32-32v-160c0-17.6 14.4-32 32-32h160c17.6 0 32 14.4 32 32zM768 576v160c0 17.6-14.4 32-32 32h-160c-17.6 0-32-14.4-32-32v-160c0-17.6 14.4-32 32-32h160c17.6 0 32 14.4 32 32z"
-      ],
-      "tags": [
-        "icon-dashboard"
-      ],
-      "defaultCode": 59664,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M768 503.36c-20.16 34.88-44.48 63.68-71.68 86.72l-64.64-64.64c0.64-4.16 0.96-8.64 0.96-12.8 0-60.16-51.84-108.8-115.84-108.8-2.24 0-4.16 0-6.4 0.32l-33.92-33.92c12.16-1.6 24-2.24 36.16-2.24 98.88 0 197.44 45.12 255.36 135.36zM348.8 313.92c-8.96-8.96-23.68-8.96-32.64 0l-3.52 3.52c-8.96 8.96-8.96 23.68 0 32.64l53.76 53.76c-43.52 22.4-81.6 56.32-110.4 100.8 83.84 130.56 226.88 177.6 348.48 137.28l57.6 57.6c9.28 9.28 23.68 9.28 32.96 0l3.2-3.2c8.96-8.96 8.96-23.68 0-32.64l-349.44-349.76zM516.8 621.44c-64 0.32-115.84-48.64-115.84-108.48-0.32-21.12 6.080-40.64 17.28-57.28l42.56 42.56c-1.92 5.76-2.56 12.16-1.92 18.88 2.88 30.080 30.72 52.16 62.72 49.92 2.24-0.32 4.8-0.64 7.040-0.96l42.56 42.56c-16.32 8.32-34.56 12.8-54.4 12.8z"
-      ],
-      "tags": [
-        "icon-eye-crossed"
-      ],
-      "defaultCode": 59665,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z"
-      ],
-      "tags": [
-        "icon-T1"
-      ],
-      "defaultCode": 59666,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.152-31.468 28.933-69.175 29.12-109.385v-233.015c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-14.469-0.112-27.111-7.827-34.139-19.343l-34.981-61.297c-16.687-28.041-26.553-61.827-26.56-97.918v-234.882c0-19.072 13.676-34.95 31.757-38.362l0.243-0.038h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.324 3.45 32 19.328 32 38.4v0zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4zM531.2 490.24h70.4c3.535 0 6.4 2.865 6.4 6.4v28.8c0 3.535-2.865 6.4-6.4 6.4h-70.4c-3.535 0-6.4-2.865-6.4-6.4v-28.8c0-3.535 2.865-6.4 6.4-6.4zM422.4 491.2h70.4c3.535 0 6.4 2.865 6.4 6.4v28.8c0 3.535-2.865 6.4-6.4 6.4h-70.4c-3.535 0-6.4-2.865-6.4-6.4v-28.8c0-3.535 2.865-6.4 6.4-6.4z"
-      ],
-      "tags": [
-        "icon-T1-buttons"
-      ],
-      "defaultCode": 59667,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M526.72 614.080h-29.44c-16.229-0.18-30.307-9.217-37.647-22.496l-0.113-0.224-23.36-41.92c-12.685-22.404-20.16-49.203-20.16-77.748 0-0.004 0-0.008 0-0.012v0.001-164.16c-0.002-0.138-0.002-0.301-0.002-0.463 0-21.403 14.903-39.326 34.898-43.957l0.304-0.059h4.48c16.978-3.729 36.479-5.865 56.48-5.865s39.502 2.136 58.289 6.193l-1.809-0.327h4.48c20.14 4.81 34.883 22.655 34.883 43.943 0 0.189-0.001 0.377-0.003 0.565v-0.029 163.52c0 0.064 0 0.139 0 0.214 0 28.079-7.233 54.468-19.937 77.407l0.417-0.821-24 43.84c-7.529 13.375-21.591 22.288-37.744 22.4h-0.016zM512 274.24c-0.097 0-0.212 0-0.327 0-18.693 0-36.923 1.981-54.492 5.745l1.699-0.305h-4.48c-12.188 2.865-21.122 13.645-21.122 26.512 0 0.129 0.001 0.258 0.003 0.387v-0.020 164.48c0 0.094 0 0.204 0 0.315 0 25.018 6.525 48.512 17.966 68.873l-0.365-0.708 23.36 41.92c4.497 8.071 12.981 13.44 22.718 13.44 0.001 0 0.002 0 0.002 0h29.44c9.799-0.067 18.299-5.56 22.652-13.623l0.068-0.137 24-43.84c10.854-19.495 17.254-42.757 17.28-67.512v-162.248c0.002-0.109 0.002-0.238 0.002-0.368 0-12.867-8.935-23.648-20.938-26.476l-0.184-0.037h-4.48c-15.736-3.739-33.906-6.053-52.557-6.396l-0.243-0.004zM452.48 324.48h119.040c2.474 0 4.48 2.006 4.48 4.48v69.44c0 2.474-2.006 4.48-4.48 4.48h-119.040c-2.474 0-4.48-2.006-4.48-4.48v-69.44c0-2.474 2.006-4.48 4.48-4.48zM540.48 656.32v52.16h-18.24v59.52h-19.84v-59.52h-18.88v-52.16h56.96z"
-      ],
-      "tags": [
-        "icon-T1-connect"
-      ],
-      "defaultCode": 59668,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M551.36 781.76h-78.4c-0.225 0.006-0.489 0.010-0.754 0.010-10.242 0-19.207-5.468-24.135-13.643l-0.071-0.127-64-96c-29.426-43.619-46.99-97.353-47.040-155.187v-233.613c0.36-22.875 18.988-41.281 41.915-41.281 0.114 0 0.228 0 0.342 0.001h263.342c0.097-0.001 0.211-0.001 0.325-0.001 22.927 0 41.555 18.406 41.915 41.248v239.394c-0.289 59.994-19.423 115.463-51.779 160.855l0.579-0.855-60.48 86.080c-4.695 7.399-12.575 12.414-21.664 13.114l-0.096 0.006zM380.48 269.76c-0.1-0.003-0.217-0.004-0.334-0.004-7.552 0-13.716 5.946-14.064 13.413l-0.001 0.031v233.92c0 0.010 0 0.023 0 0.036 0 52.093 15.777 100.502 42.813 140.708l-0.573-0.904 64 96h79.040l60.16-86.080c28.821-40.408 46.080-90.794 46.080-145.211 0-0.024 0-0.049 0-0.073v0.004-238.4c-0.35-7.498-6.513-13.444-14.066-13.444-0.118 0-0.235 0.001-0.352 0.004h0.017z"
-      ],
-      "defaultCode": 59669,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M407.040 335.68h209.92c4.595 0 8.32 3.725 8.32 8.32v201.92c0 4.595-3.725 8.32-8.32 8.32h-209.92c-4.595 0-8.32-3.725-8.32-8.32v-201.92c0-4.595 3.725-8.32 8.32-8.32z"
-      ],
-      "defaultCode": 59670,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M539.52 608h-54.72c-6.578-0.052-12.387-3.298-15.96-8.261l-0.040-0.059-45.12-64c-20.029-28.726-32.002-64.366-32.002-102.802 0-0.309 0.001-0.617 0.002-0.925v0.047-157.76c0.349-15.459 12.963-27.856 28.473-27.856 0.34 0 0.679 0.006 1.016 0.018l-0.049-0.001h184.32c0.288-0.010 0.627-0.016 0.967-0.016 15.51 0 28.124 12.398 28.473 27.824l0.001 0.032v160c-0.074 40.641-13.522 78.128-36.176 108.308l0.336-0.468-42.24 57.28c-3.622 5.258-9.609 8.66-16.39 8.66-0.313 0-0.624-0.007-0.934-0.022l0.044 0.002zM419.84 265.6c-0.205-0.016-0.444-0.025-0.686-0.025-4.973 0-9.062 3.781-9.551 8.624l-0.003 0.040v155.84c0.066 34.769 11.081 66.953 29.778 93.302l-0.338-0.502 45.12 64h56l42.24-57.28c19.839-26.468 31.828-59.817 32-95.96v-160.040c-0.492-4.884-4.582-8.665-9.554-8.665-0.241 0-0.481 0.009-0.717 0.026l0.032-0.002z"
-      ],
-      "defaultCode": 59671,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M438.4 309.12h146.88c3.181 0 5.76 2.579 5.76 5.76v134.4c0 3.181-2.579 5.76-5.76 5.76h-146.88c-3.181 0-5.76-2.579-5.76-5.76v-134.4c0-3.181 2.579-5.76 5.76-5.76z"
-      ],
-      "defaultCode": 59672,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M541.12 659.52v50.56h-18.56v57.92h-20.48v-57.92h-18.88v-50.56h57.92z"
-      ],
-      "defaultCode": 59673,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M603.072 757.216l-237.44-219.616c-8.576-8.128-13.632-19.296-13.632-31.040 0.288-11.744 5.056-23.2 13.664-31.040l227.040-208.768c16.928-15.36 43.040-14.176 58.176 3.008 15.424 16.864 13.952 43.392-2.656 59.040l-193.504 177.76 203.904 188.608c8 7.52 12.768 18.080 13.344 29.216 0.608 11.456-3.264 21.696-10.688 30.112-15.456 16.896-41.568 18.080-58.208 2.72z"
-      ],
-      "tags": [
-        "icon-arrow-left"
-      ],
-      "defaultCode": 59674,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M677.44 613.76c-3.255 1.423-7.047 2.252-11.033 2.252-0.284 0-0.566-0.004-0.848-0.013l0.041 0.001c-8.323-0.531-15.657-4.371-20.77-10.206l-0.030-0.034-93.44-109.44c-0.378-0.735-1.131-1.229-1.999-1.229-1.237 0-2.24 1.003-2.24 2.24 0 0.209 0.029 0.412 0.083 0.605l-0.004-0.016v233.28c0.102 0.987 0.16 2.132 0.16 3.291 0 18.733-15.187 33.92-33.92 33.92s-33.92-15.187-33.92-33.92c0-1.159 0.058-2.304 0.172-3.433l-0.012 0.142v-236.16c0.050-0.177 0.079-0.379 0.079-0.589 0-1.237-1.003-2.24-2.24-2.24-0.868 0-1.621 0.494-1.993 1.216l-0.006 0.013-88.32 104.32c-5.204 6.343-13.042 10.358-21.819 10.358-7.711 0-14.699-3.099-19.784-8.121l0.003 0.003c-6.16-5.845-9.993-14.090-9.993-23.231 0-8.17 3.062-15.625 8.101-21.28l-0.028 0.032 146.56-173.44c5.311-6.15 13.061-10.069 21.731-10.24h0.029c8.727 0.036 16.523 3.991 21.724 10.196l0.036 0.044 152 178.56c5.441 6.124 8.764 14.234 8.764 23.121 0 12.698-6.785 23.81-16.927 29.911l-0.157 0.088zM329.28 292.8c-0.024-0.488-0.038-1.060-0.038-1.635 0-18.891 14.881-34.306 33.561-35.163l0.077-0.003h292.48c18.795 1.81 33.372 17.523 33.372 36.64s-14.577 34.83-33.222 36.628l-0.15 0.012h-292.48c-18.751-0.866-33.625-16.278-33.625-35.165 0-0.463 0.009-0.923 0.027-1.381l-0.002 0.066z"
-      ],
-      "tags": [
-        "icon-top"
-      ],
-      "defaultCode": 59675,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M692.8 313.92l-1.92-1.92c-6.246-7.057-15.326-11.484-25.44-11.484s-19.194 4.427-25.409 11.448l-0.031 0.036-196.48 224-3.84 1.6-3.84-1.92-48.64-57.28c-7.010-7.905-17.193-12.862-28.533-12.862-21.031 0-38.080 17.049-38.080 38.080 0 7.495 2.165 14.485 5.905 20.377l-0.092-0.155 100.8 148.16c5.391 8.036 14.386 13.292 24.618 13.44h8.662c17.251-0.146 32.385-9.075 41.163-22.529l0.117-0.191 195.2-296.32c4.473-6.632 7.141-14.803 7.141-23.597 0-11.162-4.297-21.32-11.326-28.911l0.025 0.028z"
-      ],
-      "tags": [
-        "icon-check"
-      ],
-      "defaultCode": 59676,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M693.12 330.88c-46.317-46.267-110.276-74.88-180.919-74.88-141.385 0-256 114.615-256 256s114.615 256 256 256c70.642 0 134.602-28.613 180.921-74.882l-0.002 0.002c46.387-46.337 75.081-110.377 75.081-181.12s-28.694-134.783-75.079-181.118l-0.002-0.002zM494.080 344.32h53.12c16 0 18.24 9.28 18.24 14.72v10.24l-10.88 194.56c0 14.4-8 17.28-18.88 17.28h-28.16c-10.56 0-17.28-2.88-18.88-17.92l-10.88-193.92v-10.56c-1.28-4.8 2.24-14.080 16.32-14.080zM521.28 717.76c-0.095 0.001-0.207 0.001-0.319 0.001-27.747 0-50.24-22.493-50.24-50.24s22.493-50.24 50.24-50.24c27.747 0 50.24 22.493 50.24 50.24 0 0.112 0 0.224-0.001 0.336v-0.017c0 0 0 0.001 0 0.001 0 27.634-22.311 50.057-49.903 50.239h-0.017z"
-      ],
-      "tags": [
-        "icon-error"
-      ],
-      "defaultCode": 59677,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M512.64 368c-99.2 0-198.4 45.76-256.64 136.64 128.64 200 394.56 203.84 512-1.28-57.92-90.24-156.48-135.36-255.36-135.36zM516.8 621.44c-64 0.32-115.84-48.64-115.84-108.48-0.32-60.16 51.52-109.12 115.84-109.12 64 0 115.84 48.64 115.84 108.8 0.32 60.16-51.52 108.8-115.84 108.8zM574.72 508.16c2.56 30.080-21.12 56.32-53.12 58.88-32 2.24-59.84-19.84-62.72-49.92-2.56-30.080 21.44-56.32 53.12-58.56 32-2.56 59.84 19.84 62.72 49.6z"
-      ],
-      "tags": [
-        "icon-eye"
-      ],
-      "defaultCode": 59678,
-      "grid": 0
-    },
-    {
-      "paths": [
-        "M656.224 402.304l-66.848 66.176-66.848-66.176-50.144 49.6 66.912 66.176-66.912 66.176 50.176 49.632 66.848-66.176 66.848 66.176 50.112-49.632-66.816-66.176 66.816-66.176-50.144-49.6zM337.824 256h540.928c27.2 0 49.248 21.824 49.248 48.768v414.464c0 26.944-22.048 48.768-49.248 48.768h-540.608c-13.856 0-27.072-5.792-36.416-15.936l-192.896-209.664c-17.248-18.752-17.088-47.488 0.352-66.048l192.576-204.8c9.344-9.92 22.4-15.552 36.064-15.552z"
-      ],
-      "tags": [
-        "icon-back"
-      ],
-      "defaultCode": 59679,
-      "grid": 0
-    }
-  ]
-}
-
-*/
--- a/src/config/variables.js
+++ b/src/config/variables.js
@ -81,3 +81,5 @@ export const LINE_HEIGHT = {
    BASE: '1.8',
    TREZOR_ACTION: '37px',
 };
+
+export const FOOTER_HEIGHT = '59px';
--- a/src/images/coins/ada.png
+++ b/src/images/coins/ada.png
--- a/src/images/coins/bch.png
+++ b/src/images/coins/bch.png
--- a/src/images/coins/btc.png
+++ b/src/images/coins/btc.png
--- a/src/images/coins/btg.png
+++ b/src/images/coins/btg.png
--- a/src/images/coins/dash.png
+++ b/src/images/coins/dash.png
--- a/src/images/coins/dgb.png
+++ b/src/images/coins/dgb.png
--- a/src/images/coins/doge.png
+++ b/src/images/coins/doge.png
--- a/src/images/coins/etc.png
+++ b/src/images/coins/etc.png
--- a/src/images/coins/eth.png
+++ b/src/images/coins/eth.png
--- a/src/images/coins/ltc.png
+++ b/src/images/coins/ltc.png
--- a/src/images/coins/nem.png
+++ b/src/images/coins/nem.png
--- a/src/images/coins/nmc.png
+++ b/src/images/coins/nmc.png
--- a/src/images/coins/rinkeby.png
+++ b/src/images/coins/rinkeby.png
--- a/src/images/coins/trop.png
+++ b/src/images/coins/trop.png
--- a/src/images/coins/txrp.png
+++ b/src/images/coins/txrp.png
--- a/src/images/coins/vtc.png
+++ b/src/images/coins/vtc.png
--- a/src/images/coins/xem.png
+++ b/src/images/coins/xem.png
--- a/src/images/coins/xlm.png
+++ b/src/images/coins/xlm.png
--- a/src/images/coins/xrp.png
+++ b/src/images/coins/xrp.png
--- a/src/images/coins/xtz.png
+++ b/src/images/coins/xtz.png
--- a/src/images/coins/zec.png
+++ b/src/images/coins/zec.png
--- a/src/images/trezor-1.png
+++ b/src/images/trezor-1.png
--- a/src/images/trezor-T.png
+++ b/src/images/trezor-T.png
--- 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`
--- 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';
@ -23,10 +23,11 @@ const baseStyles = createGlobalStyle`
    * {
        margin: 0;
        padding: 0;
+        outline: none;
    }

    *::selection, *::-moz-selection, *:focus, *:active, *:active:focus,  {
-        outline: 0 !important;
+        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

--- a/src/utils/tests/device.test.js
+++ b/src/utils/tests/device.test.js
@ -1,5 +1,5 @@
 import * as utils from 'utils/device';
-import colors from 'config/colors';
+import { colors } from 'trezor-ui-components';

 describe('device utils', () => {
    it('get status', () => {
--- a/src/utils/tests/notification.test.js
+++ b/src/utils/tests/notification.test.js
@ -1,6 +1,5 @@
 import * as utils from 'utils/notification';
-import colors from 'config/colors';
-import icons from 'config/icons';
+import { colors, icons } from 'trezor-ui-components';

 describe('notification utils', () => {
    it('get primary color from status', () => {
--- 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';
--- 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;
--- 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}
@ -97,7 +91,7 @@ const BetaDisclaimer = (props: { close: () => void }) => (
                />
            </StyledP>
            <StyledP>
-                <StyledIcon size={24} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
+                <StyledIcon size={12} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
                <FormattedMessage
                    {...l10nMessages.TR_PLEASE_NOTE_THAT_THE_TREZOR}
                    values={{
--- 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>Mozilla Firefox</P>
+                <P size="small">Mozila Firefox</P>
                <Link href="https://www.mozilla.org/en-US/firefox/new/">
                    <Button>
                        <FormattedMessage {...l10nMessages.TR_GET_FIREFOX} />
--- 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, icons, 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>
@ -165,7 +163,11 @@ class ConnectDevice extends PureComponent<Props> {
                            <StyledP>
                                <FormattedMessage {...l10nMessages.TR_AND} />
                            </StyledP>
-                            <StyledButton isWebUsb>
+                            <StyledButton
+                                isInverse
+                                icon={icons.PLUS}
+                                additionalClassName="trezor-webusb-button"
+                            >
                                <FormattedMessage {...l10nCommonMessages.TR_CHECK_FOR_DEVICES} />
                            </StyledButton>
                        </React.Fragment>
--- a/src/views/Landing/components/InitializationError/index.js
+++ b/src/views/Landing/components/InitializationError/index.js
@ -2,7 +2,7 @@

 import React from 'react';
 import styled from 'styled-components';
-import Notification from 'components/Notification';
+import { Notification } from 'trezor-ui-components';

 const Wrapper = styled.div`
    width: 100%;
--- 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';

--- 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>
--- 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, 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';

@ -96,13 +90,7 @@ const Download = styled.div`
    justify-content: center;
 `;

-const DownloadBridgeButton = styled(Button)`
-    padding-top: 5px;
-    padding-bottom: 5px;
-    display: flex;
-    align-items: center;
-    margin-bottom: 5px;
-`;
+const DownloadBridgeButton = styled(Button)``;

 const GoBack = styled.span`
    color: ${colors.GREEN_PRIMARY};
@ -180,8 +168,7 @@ class InstallBridge extends PureComponent<Props, State> {
                                options={this.state.installers}
                            />
                            <Link href={`${this.state.uri}${target.value}`}>
-                                <DownloadBridgeButton>
-                                    <Icon icon={ICONS.DOWNLOAD} color={colors.WHITE} size={30} />
+                                <DownloadBridgeButton icon={ICONS.DOWNLOAD}>
                                    <FormattedMessage
                                        {...l10nMessages.TR_DOWNLOAD_LATEST_BRIDGE}
                                        values={{ version: this.state.latestVersion }}
@ -195,7 +182,7 @@ class InstallBridge extends PureComponent<Props, State> {
                                <Li key={entry}>{entry}</Li>
                            ))}
                        </Ol> */}
-                        <P isSmaller>
+                        <P size="small">
                            <LearnMoreText>
                                <FormattedMessage
                                    {...l10nMessages.TR_LEARN_MORE_ABOUT_LATEST_VERSION}
--- a/src/views/Landing/views/Version/index.js
+++ b/src/views/Landing/views/Version/index.js
@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
-import { H3, H2 } from 'components/Heading';
 import LandingWrapper from 'views/Landing/components/LandingWrapper';
-import Link from 'components/Link';
+import { Link, H5, H6 } from 'trezor-ui-components';

 const Wrapper = styled.div`
    display: flex;
@ -19,12 +18,12 @@ const Line = styled.div`
 const Version = () => (
    <LandingWrapper>
        <Wrapper>
-            <H3>APPLICATION VERSION</H3>
-            <H2>{VERSION}</H2>
+            <H6>APPLICATION VERSION</H6>
+            <H5>{VERSION}</H5>
            <Line />
-            <H3>LAST COMMIT HASH</H3>
-            <Link href={`https://github.com/trezor/trezor-wallet/commits/${COMMITHASH}`}>
-                <H2>{COMMITHASH}</H2>
+            <H6>LAST COMMIT HASH</H6>
+            <Link isGray href={`https://github.com/trezor/trezor-wallet/commits/${COMMITHASH}`}>
+                <H5>{COMMITHASH}</H5>
            </Link>
        </Wrapper>
    </LandingWrapper>
--- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
+++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
@ -1,13 +1,8 @@
 /* @flow */
 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 CoinLogo from 'components/images/CoinLogo';
+import { CoinLogo, H4, P, Button, Link, colors } from 'trezor-ui-components';

 import { FormattedMessage } from 'react-intl';
 import l10nMessages from './index.messages';
@ -51,7 +46,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 +60,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>
--- 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';
@ -44,7 +40,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 : '')};
--- 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';
@ -183,7 +179,7 @@ const AccountMenu = (props: Props) => {
                    <Row>
                        <RowAddAccountWrapper disabled>
                            <AddAccountIconWrapper>
-                                <Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} />
+                                <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
                            </AddAccountIconWrapper>
                            <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
                        </RowAddAccountWrapper>
@ -195,7 +191,7 @@ const AccountMenu = (props: Props) => {
                <Row onClick={props.addAccount}>
                    <RowAddAccountWrapper>
                        <AddAccountIconWrapper>
-                            <Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} />
+                            <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
                        </AddAccountIconWrapper>
                        <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
                    </RowAddAccountWrapper>
@ -211,7 +207,7 @@ const AccountMenu = (props: Props) => {
                    <Row>
                        <RowAddAccountWrapper disabled>
                            <AddAccountIconWrapper>
-                                <Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} />
+                                <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
                            </AddAccountIconWrapper>
                            <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
                        </RowAddAccountWrapper>
@ -247,7 +243,7 @@ const AccountMenu = (props: Props) => {
                    iconLeft={{
                        type: ICONS.ARROW_LEFT,
                        color: colors.TEXT_PRIMARY,
-                        size: 20,
+                        size: 10,
                    }}
                />
            </NavLink>
--- a/Show More
+++ b/Show More