arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-22 05:51:18 +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 { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import colors from 'config/colors';
import { H2 } from 'components/Heading';
import Button from 'components/Button';
import Tooltip from 'components/Tooltip';
import { Button, Tooltip, H5, P, Icon, icons, colors } from 'trezor-ui-components';
import ReactJson from 'react-json-view';
import Icon from 'components/Icon';
import P from 'components/Paragraph';
import { FormattedMessage } from 'react-intl';
import * as LogActions from 'actions/LogActions';
import icons from 'config/icons';
import type { State, Dispatch } from 'flowtype';
import l10nMessages from './index.messages';
@ -82,10 +77,10 @@ const Log = (props: Props): ?React$Element<string> => {
<Click onClick={props.toggle}>
<Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
</Click>
<H2>
<H5>
<FormattedMessage {...l10nMessages.TR_LOG} />
</H2>
<StyledParagraph isSmaller>
</H5>
<StyledParagraph size="small">
<FormattedMessage {...l10nMessages.TR_ATTENTION_COLON_THE_LOG_CONTAINS} />
</StyledParagraph>
<LogWrapper>

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

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

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

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

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 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}
/>

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

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

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

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

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

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

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

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

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

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

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 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}
/>

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 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={{

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 { 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}

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

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

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

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

@ -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>

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

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

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

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 { FormattedMessage } from 'react-intl';
import COLORS from 'config/colors';
import { Button, colors as COLORS } from 'trezor-ui-components';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { SLIDE_DOWN } from 'config/animations';
import Button from 'components/Button';
import * as deviceUtils from 'utils/device';
import l10nCommonMessages from 'views/common.messages';
import MenuItems from './components/MenuItems';

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)`
z-index: 10001;
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 ColorHash from 'color-hash';
import ScaleText from 'react-scale-text';
import colors from 'config/colors';
import { FONT_WEIGHT } from 'config/variables';
import Button from 'components/Button';
import Icon from 'components/Icon';
import ICONS from 'config/icons';
import { Button, Icon, colors, icons as ICONS } from 'trezor-ui-components';
import * as stateUtils from 'reducers/utils';
import BigNumber from 'bignumber.js';
import PropTypes from 'prop-types';

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

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

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

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

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

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

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

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