arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-22 14:00:58 +00:00
Code Issues Releases Wiki Activity

more trezor ui components

Browse Source
This commit is contained in:
slowbackspace 2019-03-18 17:18:55 +01:00
parent 1c6383ff50
commit 55a499ae09
26 changed files with 145 additions and 277 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Log/index.js
View File

@ -3,17 +3,12 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import colors from 'config/colors';
import { H2 } from 'components/Heading'; import { Button, Tooltip, H5, P, Icon, icons, colors } from 'trezor-ui-components';
import Button from 'components/Button';
import Tooltip from 'components/Tooltip';
import ReactJson from 'react-json-view'; import ReactJson from 'react-json-view';
import Icon from 'components/Icon';
import P from 'components/Paragraph';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import * as LogActions from 'actions/LogActions'; import * as LogActions from 'actions/LogActions';
import icons from 'config/icons';
import type { State, Dispatch } from 'flowtype'; import type { State, Dispatch } from 'flowtype';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -82,10 +77,10 @@ const Log = (props: Props): ?React$Element<string> => {
<Click onClick={props.toggle}> <Click onClick={props.toggle}>
<Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
</Click> </Click>
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_LOG} /> <FormattedMessage {...l10nMessages.TR_LOG} />
</H2> </H5>
<StyledParagraph isSmaller> <StyledParagraph size="small">
<FormattedMessage {...l10nMessages.TR_ATTENTION_COLON_THE_LOG_CONTAINS} /> <FormattedMessage {...l10nMessages.TR_ATTENTION_COLON_THE_LOG_CONTAINS} />
</StyledParagraph> </StyledParagraph>
<LogWrapper> <LogWrapper>

17
src/components/modals/confirm/NoBackup/index.js
View File

@ -4,15 +4,9 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import icons from 'config/icons';
import { getOldWalletUrl } from 'utils/url'; import { getOldWalletUrl } from 'utils/url';
import colors from 'config/colors';
import { H2 } from 'components/Heading'; import { H5, P, Icon, Button, Link, colors, icons } from 'trezor-ui-components';
import P from 'components/Paragraph';
import Icon from 'components/Icon';
import Button from 'components/Button';
import Link from 'components/Link';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import type { Props as BaseProps } from '../../Container'; import type { Props as BaseProps } from '../../Container';
@ -56,7 +50,10 @@ const ProceedButton = styled(Button)`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding-bottom: 20px; /* boost-specificity hack to override P base styling */
&& {
padding-bottom: 20px;
}
`; `;
const Row = styled.div` const Row = styled.div`
@ -69,9 +66,9 @@ const Confirmation = (props: Props) => (
<StyledLink onClick={() => props.onReceiveConfirmation(false)}> <StyledLink onClick={() => props.onReceiveConfirmation(false)}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H2>Your Trezor is not backed up</H2> <H5>Your Trezor is not backed up</H5>
<Icon size={48} color={colors.WARNING_PRIMARY} icon={icons.WARNING} /> <Icon size={48} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
<StyledP isSmaller> <StyledP size="small">
If your device is ever lost or damaged, your funds will be lost. Backup your device If your device is ever lost or damaged, your funds will be lost. Backup your device
first, to protect your coins against such events. first, to protect your coins against such events.
</StyledP> </StyledP>

21
src/components/modals/confirm/UnverifiedAddress/index.js
View File

@ -3,15 +3,8 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { getOldWalletUrl } from 'utils/url'; 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 { FormattedMessage } from 'react-intl';
import { Link, Button, Icon, P, H5, colors, icons } from 'trezor-ui-components';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -45,7 +38,9 @@ const Content = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding-bottom: 20px; && {
padding-bottom: 20px;
}
`; `;
const Divider = styled.div` const Divider = styled.div`
@ -152,8 +147,8 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H2>{deviceStatus}</H2> <H5>{deviceStatus}</H5>
<StyledP isSmaller> <StyledP size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_TO_PREVENT_PHISHING_ATTACKS_COMMA} {...l10nMessages.TR_TO_PREVENT_PHISHING_ATTACKS_COMMA}
values={{ claim }} values={{ claim }}
@ -174,8 +169,8 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
{needsBackup && ( {needsBackup && (
<> <>
<Content> <Content>
<H2>Device {device.label} is not backed up</H2> <H5>Device {device.label} is not backed up</H5>
<StyledP isSmaller> <StyledP size="small">
If your device is ever lost or damaged, your funds will be lost. If your device is ever lost or damaged, your funds will be lost.
Backup your device first, to protect your coins against such events. Backup your device first, to protect your coins against such events.
</StyledP> </StyledP>

17
src/components/modals/device/Duplicate/index.js
View File

@ -3,16 +3,9 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import icons from 'config/icons';
import colors from 'config/colors';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import { H3 } from 'components/Heading'; import { H5, P, Button, Input, Icon, Link, icons, colors } from 'trezor-ui-components';
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 { getDuplicateInstanceNumber } from 'reducers/utils'; import { getDuplicateInstanceNumber } from 'reducers/utils';
@ -51,7 +44,9 @@ const Column = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 10px 0px; && {
padding: 10px 0px;
}
`; `;
const StyledButton = styled(Button)` const StyledButton = styled(Button)`
@ -139,8 +134,8 @@ class DuplicateDevice extends PureComponent<Props, State> {
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H3>Clone {device.label}?</H3> <H5>Clone {device.label}?</H5>
<StyledP isSmaller> <StyledP size="small">
This will create new instance of device which can be used with different This will create new instance of device which can be used with different
passphrase passphrase
</StyledP> </StyledP>

14
src/components/modals/device/Forget/index.js
View File

@ -4,9 +4,7 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { H2 } from 'components/Heading'; import { H5, P, Button } from 'trezor-ui-components';
import P from 'components/Paragraph';
import Button from 'components/Button';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
@ -31,7 +29,9 @@ const Wrapper = styled.div`
`; `;
const StyledP = styled(P)` const StyledP = styled(P)`
padding: 20px 0px; && {
padding: 20px 0px;
}
`; `;
const Row = styled.div` const Row = styled.div`
@ -69,15 +69,15 @@ class ForgetDevice extends PureComponent<Props> {
render() { render() {
return ( return (
<Wrapper> <Wrapper>
<H2> <H5>
<FormattedMessage <FormattedMessage
{...l10nDeviceMessages.TR_FORGET_LABEL} {...l10nDeviceMessages.TR_FORGET_LABEL}
values={{ values={{
deviceLabel: this.props.device.instanceLabel, deviceLabel: this.props.device.instanceLabel,
}} }}
/> />
</H2> </H5>
<StyledP isSmaller> <StyledP size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM} {...l10nMessages.TR_FORGETTING_ONLY_REMOVES_THE_DEVICE_FROM}
/> />

11
src/components/modals/device/Remember/index.js
View File

@ -3,10 +3,7 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { H3 } from 'components/Heading'; import { H5, P, Loader, Button } from 'trezor-ui-components';
import P from 'components/Paragraph';
import Loader from 'components/Loader';
import Button from 'components/Button';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
@ -124,15 +121,15 @@ class RememberDevice extends PureComponent<Props, State> {
} }
return ( return (
<Wrapper> <Wrapper>
<H3> <H5>
<FormattedMessage <FormattedMessage
{...l10nDeviceMessages.TR_FORGET_LABEL} {...l10nDeviceMessages.TR_FORGET_LABEL}
values={{ values={{
deviceLabel: label, deviceLabel: label,
}} }}
/> />
</H3> </H5>
<StyledP isSmaller> <StyledP size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_WOULD_YOU_LIKE_TREZOR_WALLET_TO} {...l10nMessages.TR_WOULD_YOU_LIKE_TREZOR_WALLET_TO}
values={{ values={{

15
src/components/modals/device/WalletType/index.js
View File

@ -4,15 +4,8 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import icons from 'config/icons'; import { H5, P, Button, Tooltip, Link, Icon, icons, colors } from 'trezor-ui-components';
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 WalletTypeIcon from 'components/images/WalletType'; import WalletTypeIcon from 'components/images/WalletType';
import { FormattedMessage, injectIntl } from 'react-intl'; import { FormattedMessage, injectIntl } from 'react-intl';
@ -41,7 +34,7 @@ const Header = styled.div`
color: ${colors.TEXT_PRIMARY}; color: ${colors.TEXT_PRIMARY};
`; `;
const StyledHeading = styled(H2)` const StyledHeading = styled(H5)`
padding: 30px 48px 10px 48px; padding: 30px 48px 10px 48px;
`; `;
@ -132,7 +125,7 @@ class WalletType extends PureComponent<Props> {
<WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} /> <WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} />
<FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} /> <FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} />
</Header> </Header>
<P isSmaller> <P size="small">
<FormattedMessage {...l10nMessages.TR_CONTINUE_TO_ACCESS_STANDARD_WALLET} /> <FormattedMessage {...l10nMessages.TR_CONTINUE_TO_ACCESS_STANDARD_WALLET} />
</P> </P>
<StyledButton onClick={() => onWalletTypeRequest(false)}> <StyledButton onClick={() => onWalletTypeRequest(false)}>
@ -154,7 +147,7 @@ class WalletType extends PureComponent<Props> {
<WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} /> <WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} />
<FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} /> <FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} />
</Header> </Header>
<P isSmaller> <P size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK} {...l10nMessages.TR_ASKED_ENTER_YOUR_PASSPHRASE_TO_UNLOCK}
/> />

16
src/components/modals/external/Cardano/index.js vendored
View File

@ -3,15 +3,9 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; 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 { 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 l10nCommonMessages from '../common.messages';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -54,10 +48,10 @@ const CardanoWallet = (props: Props) => (
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={CardanoImage} /> <Img src={CardanoImage} />
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_CARDANO_WALLET} /> <FormattedMessage {...l10nMessages.TR_CARDANO_WALLET} />
</H2> </H5>
<P isSmaller> <P size="small">
<FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} /> <FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} />
</P> </P>

22
src/components/modals/external/Nem/index.js vendored
View File

@ -3,13 +3,8 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import { H5, Button, P, Icon, Link, icons, colors } from 'trezor-ui-components';
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 coins from 'constants/coins'; import coins from 'constants/coins';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -49,15 +44,16 @@ const NemWallet = (props: Props) => (
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_NEM_WALLET} /> <FormattedMessage {...l10nMessages.TR_NEM_WALLET} />
</H2> </H5>
<P isSmaller> <P size="small">
<FormattedMessage {...l10nMessages.TR_WE_HAVE_PARTNERED_UP_WITH_THE_NEM} /> <FormattedMessage {...l10nMessages.TR_WE_HAVE_PARTNERED_UP_WITH_THE_NEM} />
<br />
<strong>
<FormattedMessage {...l10nMessages.TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL} />
</strong>
</P> </P>
<H4>
<FormattedMessage {...l10nMessages.TR_MAKE_SURE_YOU_DOWNLOAD_THE_UNIVERSAL} />
</H4>
<Img src={NemImage} /> <Img src={NemImage} />
<Link href={coins.find(i => i.id === 'xem').url}> <Link href={coins.find(i => i.id === 'xem').url}>
<StyledButton onClick={props.onCancel}> <StyledButton onClick={props.onCancel}>

16
src/components/modals/external/Stellar/index.js vendored
View File

@ -3,15 +3,9 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; 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 { 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 l10nCommonMessages from '../common.messages';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -54,10 +48,10 @@ const StellarWallet = (props: Props) => (
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={StellarImage} /> <Img src={StellarImage} />
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_STELLAR_WALLET} /> <FormattedMessage {...l10nMessages.TR_STELLAR_WALLET} />
</H2> </H5>
<P isSmaller> <P size="small">
<FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} /> <FormattedMessage {...l10nCommonMessages.TR_YOU_WILL_BE_REDIRECTED_TO_EXTERNAL} />
</P> </P>

10
src/components/modals/external/Tezos/index.js vendored
View File

@ -3,13 +3,7 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import { Button, H5, Link, P, Icon, icons, colors } from 'trezor-ui-components';
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 coins from 'constants/coins';
import TezosImage from './images/xtz.png'; import TezosImage from './images/xtz.png';
@ -50,7 +44,7 @@ const TezosWallet = (props: Props) => (
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={TezosImage} /> <Img src={TezosImage} />
<H2>Tezos wallet</H2> <H5>Tezos wallet</H5>
<P isSmaller>You will be redirected to external wallet</P> <P isSmaller>You will be redirected to external wallet</P>
<Link href={coins.find(i => i.id === 'xtz').url}> <Link href={coins.find(i => i.id === 'xtz').url}>

40
src/components/modals/passphrase/Passphrase/index.js
View File

@ -3,15 +3,8 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Input, Checkbox, P, H5, colors } from 'trezor-ui-components';
import colors from 'config/colors'; import { FONT_SIZE } from 'config/variables';
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 type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
@ -68,24 +61,13 @@ const Footer = styled.div`
const LinkButton = styled(Button)` const LinkButton = styled(Button)`
padding: 0; padding: 0;
margin: 0; margin: 0;
text-decoration: none;
cursor: pointer;
transition: ${TRANSITION.HOVER};
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
border-radius: 0; text-decoration: underline;
border-bottom: 1px solid ${colors.GREEN_PRIMARY}; color: ${colors.GREEN_PRIMARY};
background: transparent;
&,
&:visited,
&:active,
&:hover { &:hover {
color: ${colors.GREEN_PRIMARY}; color: ${colors.GREEN_PRIMARY};
} text-decoration: none;
&:hover {
border-color: transparent;
background: transparent;
} }
`; `;
@ -208,14 +190,14 @@ class Passphrase extends PureComponent<Props, State> {
render() { render() {
return ( return (
<Wrapper> <Wrapper>
<H2> <H5>
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_ENTER_DEVICE_PASSPHRASE} {...l10nMessages.TR_ENTER_DEVICE_PASSPHRASE}
values={{ values={{
deviceLabel: this.state.deviceLabel, deviceLabel: this.state.deviceLabel,
}} }}
/> />
</H2> </H5>
<P isSmaller> <P isSmaller>
<FormattedMessage {...l10nMessages.TR_NOTE_COLON_PASSPHRASE} />{' '} <FormattedMessage {...l10nMessages.TR_NOTE_COLON_PASSPHRASE} />{' '}
<FormattedMessage {...l10nMessages.TR_IF_YOU_FORGET_YOUR_PASSPHRASE_COMMA} /> <FormattedMessage {...l10nMessages.TR_IF_YOU_FORGET_YOUR_PASSPHRASE_COMMA} />
@ -276,12 +258,16 @@ class Passphrase extends PureComponent<Props, State> {
</Button> </Button>
</Row> </Row>
<Footer> <Footer>
<P isSmaller> <P size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_CHANGED_YOUR_MIND} {...l10nMessages.TR_CHANGED_YOUR_MIND}
values={{ values={{
TR_GO_TO_STANDARD_WALLET: ( TR_GO_TO_STANDARD_WALLET: (
<LinkButton isGreen onClick={() => this.submitPassphrase(true)}> <LinkButton
isGreen
isTransparent
onClick={() => this.submitPassphrase(true)}
>
<FormattedMessage <FormattedMessage
{...l10nCommonMessages.TR_GO_TO_STANDARD_WALLET} {...l10nCommonMessages.TR_GO_TO_STANDARD_WALLET}
/> />

74
src/components/modals/pin/Pin/index.js
View File

@ -3,19 +3,13 @@ import React, { PureComponent } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import styled from 'styled-components'; import styled from 'styled-components';
import P from 'components/Paragraph'; import { H5, Link, Button, P, ButtonPin, InputPin } from 'trezor-ui-components';
import { H2 } from 'components/Heading';
import Link from 'components/Link';
import Button from 'components/Button';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
import PinButton from './components/Button';
import PinInput from './components/Input';
import type { Props as BaseProps } from '../../Container'; import type { Props as BaseProps } from '../../Container';
type Props = { type Props = {
@ -31,12 +25,24 @@ const Wrapper = styled.div`
padding: 30px 48px; padding: 30px 48px;
`; `;
const InputRow = styled.div` const InputWrapper = styled.div`
margin-top: 24px; margin-top: 24px;
margin-bottom: 10px;
max-width: 260px; 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)` const StyledP = styled(P)`
padding-top: 5px; padding-top: 5px;
@ -150,56 +156,38 @@ class Pin extends PureComponent<Props, State> {
const { pin } = this.state; const { pin } = this.state;
return ( return (
<Wrapper> <Wrapper>
<H2> <H5>
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_ENTER_PIN} {...l10nMessages.TR_ENTER_PIN}
values={{ deviceLabel: device.label }} values={{ deviceLabel: device.label }}
/> />
</H2> </H5>
<P isSmaller> <P size="small">
<FormattedMessage {...l10nMessages.TR_THE_PIN_LAYOUT_IS_DISPLAYED_ON} /> <FormattedMessage {...l10nMessages.TR_THE_PIN_LAYOUT_IS_DISPLAYED_ON} />
</P> </P>
<InputRow> <InputWrapper>
<PinInput value={pin} onDeleteClick={() => this.onPinBackspace()} /> <InputPin value={pin} onDeleteClick={() => this.onPinBackspace()} />
</InputRow> </InputWrapper>
<PinRow> <PinRow>
<PinButton type="button" data-value="7" onClick={() => this.onPinAdd(7)}> <ButtonPin type="button" data-value="7" onClick={() => this.onPinAdd(7)} />
&#8226;{' '} <ButtonPin type="button" data-value="8" onClick={() => this.onPinAdd(8)} />
</PinButton> <ButtonPin type="button" data-value="9" onClick={() => this.onPinAdd(9)} />
<PinButton type="button" data-value="8" onClick={() => this.onPinAdd(8)}>
&#8226;
</PinButton>
<PinButton type="button" data-value="9" onClick={() => this.onPinAdd(9)}>
&#8226;
</PinButton>
</PinRow> </PinRow>
<PinRow> <PinRow>
<PinButton type="button" data-value="4" onClick={() => this.onPinAdd(4)}> <ButtonPin type="button" data-value="4" onClick={() => this.onPinAdd(4)} />
&#8226;{' '} <ButtonPin type="button" data-value="5" onClick={() => this.onPinAdd(5)} />
</PinButton> <ButtonPin type="button" data-value="6" onClick={() => this.onPinAdd(6)} />
<PinButton type="button" data-value="5" onClick={() => this.onPinAdd(5)}>
&#8226;
</PinButton>
<PinButton type="button" data-value="6" onClick={() => this.onPinAdd(6)}>
&#8226;
</PinButton>
</PinRow> </PinRow>
<PinRow> <PinRow>
<PinButton type="button" data-value="1" onClick={() => this.onPinAdd(1)}> <ButtonPin type="button" data-value="1" onClick={() => this.onPinAdd(1)} />
&#8226;{' '} <ButtonPin type="button" data-value="2" onClick={() => this.onPinAdd(2)} />
</PinButton> <ButtonPin type="button" data-value="3" onClick={() => this.onPinAdd(3)} />
<PinButton type="button" data-value="2" onClick={() => this.onPinAdd(2)}>
&#8226;
</PinButton>
<PinButton type="button" data-value="3" onClick={() => this.onPinAdd(3)}>
&#8226;
</PinButton>
</PinRow> </PinRow>
<Footer> <Footer>
<Button type="button" onClick={() => onPinSubmit(pin)}> <Button type="button" onClick={() => onPinSubmit(pin)}>
<FormattedMessage {...l10nMessages.TR_ENTER_PIN} /> <FormattedMessage {...l10nMessages.TR_ENTER_PIN} />
</Button> </Button>
<StyledP isSmaller> <StyledP size="small">
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_NOT_SURE_HOW_PIN_WORKS} {...l10nMessages.TR_NOT_SURE_HOW_PIN_WORKS}
values={{ values={{

12
src/views/Landing/components/BetaDisclaimer/index.js
View File

@ -5,15 +5,9 @@ import styled from 'styled-components';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { FormattedMessage } from 'react-intl'; 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 { 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 * as WalletActions from 'actions/WalletActions';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -59,9 +53,9 @@ const StyledIcon = styled(Icon)`
const BetaDisclaimer = (props: { close: () => void }) => ( const BetaDisclaimer = (props: { close: () => void }) => (
<Wrapper> <Wrapper>
<ModalWindow> <ModalWindow>
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_YOU_ARE_OPENING_TREZOR_BETA_WALLET} /> <FormattedMessage {...l10nMessages.TR_YOU_ARE_OPENING_TREZOR_BETA_WALLET} />
</H2> </H5>
<StyledP> <StyledP>
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_TREZOR_BETA_WALLET_IS} {...l10nMessages.TR_TREZOR_BETA_WALLET_IS}

15
src/views/Landing/components/BrowserNotSupported/index.js
View File

@ -1,10 +1,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; 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 { FormattedMessage } from 'react-intl';
import { Button, P, H5, Link } from 'trezor-ui-components';
import ChromeImage from 'images/browser-chrome.png'; import ChromeImage from 'images/browser-chrome.png';
import FirefoxImage from 'images/browser-firefox.png'; import FirefoxImage from 'images/browser-firefox.png';
@ -34,16 +31,16 @@ const Browser = styled.div`
const BrowserNotSupported = () => ( const BrowserNotSupported = () => (
<Wrapper> <Wrapper>
<H2> <H5>
<FormattedMessage {...l10nMessages.TR_YOUR_BROWSER_IS_NOT_SUPPORTED} /> <FormattedMessage {...l10nMessages.TR_YOUR_BROWSER_IS_NOT_SUPPORTED} />
</H2> </H5>
<P> <P textAlign="center">
<FormattedMessage {...l10nMessages.TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED} /> <FormattedMessage {...l10nMessages.TR_PLEASE_CHOOSE_ONE_OF_THE_SUPPORTED} />
</P> </P>
<ChooseBrowserWrapper> <ChooseBrowserWrapper>
<Browser> <Browser>
<BrowserLogo src={ChromeImage} /> <BrowserLogo src={ChromeImage} />
<P isSmaller>Google Chrome</P> <P size="small">Google Chrome</P>
<Link href="https://www.google.com/chrome/"> <Link href="https://www.google.com/chrome/">
<Button> <Button>
<FormattedMessage {...l10nMessages.TR_GET_CHROME} /> <FormattedMessage {...l10nMessages.TR_GET_CHROME} />
@ -52,7 +49,7 @@ const BrowserNotSupported = () => (
</Browser> </Browser>
<Browser> <Browser>
<BrowserLogo src={FirefoxImage} /> <BrowserLogo src={FirefoxImage} />
<P isSmaller>Mozzila Firefox</P> <P size="small">Mozzila Firefox</P>
<Link href="https://www.mozilla.org/en-US/firefox/new/"> <Link href="https://www.mozilla.org/en-US/firefox/new/">
<Button> <Button>
<FormattedMessage {...l10nMessages.TR_GET_FIREFOX} /> <FormattedMessage {...l10nMessages.TR_GET_FIREFOX} />

12
src/views/Landing/components/ConnectDevice/index.js
View File

@ -4,14 +4,12 @@ import React, { PureComponent } from 'react';
import styled, { keyframes } from 'styled-components'; import styled, { keyframes } from 'styled-components';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
import P from 'components/Paragraph';
import Button from 'components/Button'; import { Button, P, H5, Link, colors } from 'trezor-ui-components';
import { H2 } from 'components/Heading';
import { PULSATE } from 'config/animations'; import { PULSATE } from 'config/animations';
import colors from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT, SCREEN_SIZE } from 'config/variables';
import CaseImage from 'images/macbook.png'; import CaseImage from 'images/macbook.png';
import Link from 'components/Link';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import l10nMessages from './index.messages'; import l10nMessages from './index.messages';
@ -142,9 +140,9 @@ class ConnectDevice extends PureComponent<Props> {
return ( return (
<StyledConnectDevice> <StyledConnectDevice>
<Title> <Title>
<H2 claim> <H5 claim>
<FormattedMessage {...l10nMessages.TR_THE_PRIVATE_BANK_IN_YOUR_HANDS} /> <FormattedMessage {...l10nMessages.TR_THE_PRIVATE_BANK_IN_YOUR_HANDS} />
</H2> </H5>
<P> <P>
<FormattedMessage {...l10nMessages.TR_TREZOR_WALLET_IS_AN_EASY_DASH} /> <FormattedMessage {...l10nMessages.TR_TREZOR_WALLET_IS_AN_EASY_DASH} />
</P> </P>

11
src/views/Landing/views/Import/index.js
View File

@ -2,14 +2,7 @@
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { Button, Link, Icon, H5, icons, colors } from 'trezor-ui-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 LandingWrapper from 'views/Landing/components/LandingWrapper'; import LandingWrapper from 'views/Landing/components/LandingWrapper';
const Wrapper = styled.div` const Wrapper = styled.div`
@ -24,7 +17,7 @@ const Import = () => (
<LandingWrapper> <LandingWrapper>
<Wrapper> <Wrapper>
<Icon size={60} color={colors.WARNING_PRIMARY} icon={icons.WARNING} /> <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="/"> <Link to="/">
<Button>Take me back</Button> <Button>Take me back</Button>
</Link> </Link>

10
src/views/Landing/views/InstallBridge/index.js
View File

@ -2,15 +2,9 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import { Button, Select, P, Link, Icon, H1, icons as ICONS, colors } from 'trezor-ui-components';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { 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 LandingWrapper from 'views/Landing/components/LandingWrapper';
import * as RouterActions from 'actions/RouterActions'; import * as RouterActions from 'actions/RouterActions';

9
src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js
View File

@ -3,10 +3,7 @@ import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import colors from 'config/colors'; import colors from 'config/colors';
import { H1 } from 'components/Heading'; import { H4, P, Button, Link } from 'trezor-ui-components';
import Paragraph from 'components/Paragraph';
import Button from 'components/Button';
import Link from 'components/Link';
import CoinLogo from 'components/images/CoinLogo'; import CoinLogo from 'components/images/CoinLogo';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -51,7 +48,7 @@ const Row = styled.div`
text-align: center; text-align: center;
`; `;
const Message = styled(Paragraph)` const Message = styled(P)`
padding: 0 0 15px 0; padding: 0 0 15px 0;
text-align: center; text-align: center;
`; `;
@ -65,7 +62,7 @@ const FirmwareUnsupported = (props: Props) => (
<StyledCoinLogo standalone network={props.networkShortcut} /> <StyledCoinLogo standalone network={props.networkShortcut} />
</CoinLogoWrapper> </CoinLogoWrapper>
)} )}
<H1>{props.title}</H1> <H4>{props.title}</H4>
<Message>{props.message}</Message> <Message>{props.message}</Message>
<Link href={getInfoUrl(props.networkShortcut)}> <Link href={getInfoUrl(props.networkShortcut)}>
<Button> <Button>

3
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -4,11 +4,10 @@ import styled from 'styled-components';
import TrezorConnect from 'trezor-connect'; import TrezorConnect from 'trezor-connect';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import COLORS from 'config/colors'; import { Button, colors as COLORS } from 'trezor-ui-components';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { SLIDE_DOWN } from 'config/animations'; import { SLIDE_DOWN } from 'config/animations';
import Button from 'components/Button';
import * as deviceUtils from 'utils/device'; import * as deviceUtils from 'utils/device';
import l10nCommonMessages from 'views/common.messages'; import l10nCommonMessages from 'views/common.messages';
import MenuItems from './components/MenuItems'; import MenuItems from './components/MenuItems';

6
src/views/Wallet/views/Account/Receive/ripple/index.js
View File

@ -56,12 +56,6 @@ const ShowAddressButton = styled(Button)`
} }
`; `;
const ShowAddressIcon = styled(Icon)`
margin-right: 7px;
position: relative;
top: 2px;
`;
const EyeButton = styled(Button)` const EyeButton = styled(Button)`
z-index: 10001; z-index: 10001;
padding: 0; padding: 0;

5
src/views/Wallet/views/Account/Summary/components/Token/index.js
View File

@ -2,11 +2,8 @@ import React, { PureComponent } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import ColorHash from 'color-hash'; import ColorHash from 'color-hash';
import ScaleText from 'react-scale-text'; import ScaleText from 'react-scale-text';
import colors from 'config/colors';
import { FONT_WEIGHT } from 'config/variables'; import { FONT_WEIGHT } from 'config/variables';
import Button from 'components/Button'; import { Button, Icon, colors, icons as ICONS } from 'trezor-ui-components';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import * as stateUtils from 'reducers/utils'; import * as stateUtils from 'reducers/utils';
import BigNumber from 'bignumber.js'; import BigNumber from 'bignumber.js';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';

12
src/views/Wallet/views/DeviceSettings/index.js
View File

@ -1,13 +1,7 @@
/* @flow */ /* @flow */
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { H1 } from 'components/Heading'; import { H4, Icon, Button, P, Link, colors, icons as ICONS } from 'trezor-ui-components';
import Icon from 'components/Icon';
import colors from 'config/colors';
import Button from 'components/Button';
import P from 'components/Paragraph';
import Link from 'components/Link';
import ICONS from 'config/icons';
import { getOldWalletUrl } from 'utils/url'; import { getOldWalletUrl } from 'utils/url';
import Content from 'views/Wallet/components/Content'; import Content from 'views/Wallet/components/Content';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
@ -36,7 +30,7 @@ const StyledP = styled(P)`
text-align: center; text-align: center;
`; `;
const StyledH1 = styled(H1)` const StyledHeading = styled(H4)`
text-align: center; text-align: center;
`; `;
@ -45,7 +39,7 @@ const DeviceSettings = (props: Props) => (
<Section> <Section>
<Row> <Row>
<Icon size={60} color={colors.WARNING_PRIMARY} icon={ICONS.WARNING} /> <Icon size={60} color={colors.WARNING_PRIMARY} icon={ICONS.WARNING} />
<StyledH1>Device settings is under construction</StyledH1> <StyledHeading>Device settings is under construction</StyledHeading>
<StyledP> <StyledP>
Please use Bitcoin wallet interface to change your device settings Please use Bitcoin wallet interface to change your device settings
</StyledP> </StyledP>

13
src/views/Wallet/views/FirmwareUpdate/index.js
View File

@ -1,18 +1,13 @@
/* @flow */ /* @flow */
import React from 'react'; import React from 'react';
import styled from 'styled-components';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Button, Link, P, H4, colors } from 'trezor-ui-components';
import { getOldWalletReleaseUrl } from 'utils/url'; import { getOldWalletReleaseUrl } from 'utils/url';
import styled from 'styled-components';
import { H1 } from 'components/Heading';
import P from 'components/Paragraph';
import colors from 'config/colors';
import Link from 'components/Link';
import Button from 'components/Button';
import { FONT_SIZE } from 'config/variables'; import { FONT_SIZE } from 'config/variables';
import * as deviceUtils from 'utils/device'; import * as deviceUtils from 'utils/device';
@ -166,9 +161,9 @@ const FirmwareUpdate = (props: Props) => (
</g> </g>
</svg> </svg>
</Image> </Image>
<H1> <H4>
<FormattedMessage {...l10nMessages.TR_ITS_TIME_TO_UPDATE_FIRMWARE} /> <FormattedMessage {...l10nMessages.TR_ITS_TIME_TO_UPDATE_FIRMWARE} />
</H1> </H4>
<StyledP> <StyledP>
<FormattedMessage {...l10nMessages.TR_PLEASE_USE_OLD_WALLET} /> <FormattedMessage {...l10nMessages.TR_PLEASE_USE_OLD_WALLET} />
</StyledP> </StyledP>

7
src/views/Wallet/views/Initialize/index.js
View File

@ -1,7 +1,6 @@
/* @flow */ /* @flow */
import styled from 'styled-components'; import styled from 'styled-components';
import { H1 } from 'components/Heading'; import { H4, Button } from 'trezor-ui-components';
import Button from 'components/Button';
import { getOldWalletUrl } from 'utils/url'; import { getOldWalletUrl } from 'utils/url';
import Paragraph from 'components/Paragraph'; import Paragraph from 'components/Paragraph';
import React from 'react'; import React from 'react';
@ -39,9 +38,9 @@ const StyledParagraph = styled(Paragraph)`
const Initialize = (props: Props) => ( const Initialize = (props: Props) => (
<Wrapper data-test="Page__device__not__initialized"> <Wrapper data-test="Page__device__not__initialized">
<Row> <Row>
<H1> <H4>
<FormattedMessage {...l10nMessages.TR_YOUR_DEVICE_IS_NOT_INITIALIZED} /> <FormattedMessage {...l10nMessages.TR_YOUR_DEVICE_IS_NOT_INITIALIZED} />
</H1> </H4>
<StyledParagraph> <StyledParagraph>
<FormattedMessage {...l10nMessages.TR_PLEASE_USE_TO_START_INITIALIZATION} /> <FormattedMessage {...l10nMessages.TR_PLEASE_USE_TO_START_INITIALIZATION} />
</StyledParagraph> </StyledParagraph>

19
src/views/Wallet/views/NoBackup/index.js
View File

@ -1,15 +1,8 @@
/* @flow */ /* @flow */
import React from 'react'; import React from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { H1 } from 'components/Heading'; import { Button, Icon, Link, P, H4, colors, icons } from 'trezor-ui-components';
import P from 'components/Paragraph';
import Link from 'components/Link';
import { getOldWalletUrl } from 'utils/url'; import { getOldWalletUrl } from 'utils/url';
import Button from 'components/Button';
import Icon from 'components/Icon';
import { FONT_SIZE } from 'config/variables';
import colors from 'config/colors';
import icons from 'config/icons';
import type { TrezorDevice } from 'flowtype'; import type { TrezorDevice } from 'flowtype';
@ -26,12 +19,10 @@ const Wrapper = styled.section`
`; `;
const StyledNavLink = styled(Link)` const StyledNavLink = styled(Link)`
color: ${colors.TEXT_SECONDARY};
padding-top: 20px; padding-top: 20px;
font-size: ${FONT_SIZE.BASE};
`; `;
const StyledH1 = styled(H1)` const StyledH = styled(H4)`
text-align: center; text-align: center;
`; `;
@ -48,7 +39,7 @@ const Message = styled.div`
const FirmwareUpdate = (props: Props) => ( const FirmwareUpdate = (props: Props) => (
<Wrapper> <Wrapper>
<Icon size={128} color={colors.WARNING_PRIMARY} icon={icons.WARNING} /> <Icon size={128} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
<StyledH1>Your Trezor is not backed up!</StyledH1> <StyledH>Your Trezor is not backed up!</StyledH>
<Message> <Message>
<StyledP> <StyledP>
If your device is ever lost or damaged, your funds will be lost. Backup your device If your device is ever lost or damaged, your funds will be lost. Backup your device
@ -59,7 +50,9 @@ const FirmwareUpdate = (props: Props) => (
<Link href={`${getOldWalletUrl(props.device)}?backup=1`} target="_self"> <Link href={`${getOldWalletUrl(props.device)}?backup=1`} target="_self">
<Button>Take me to the Bitcoin wallet</Button> <Button>Take me to the Bitcoin wallet</Button>
</Link> </Link>
<StyledNavLink to="/">I’ll do that later.</StyledNavLink> <StyledNavLink isGray to="/">
I’ll do that later.
</StyledNavLink>
</Wrapper> </Wrapper>
); );