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

fix icons

Browse Source
This commit is contained in:
slowbackspace 2019-03-19 18:20:02 +01:00
parent 6ea3aac8aa
commit 6c8fbd79a4
26 changed files with 132 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DeviceHeader/index.js
View File

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

8
src/components/Header/index.js
View File

@ -58,7 +58,9 @@ const MenuToggler = styled.div`
} }
`; `;
const TogglerText = styled.div``; const TogglerText = styled.div`
margin-left: 6px;
`;
const TREZOR = styled.div``; const TREZOR = styled.div``;
const T = styled.div``; const T = styled.div``;
@ -159,14 +161,14 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<MenuToggler onClick={toggleSidebar}> <MenuToggler onClick={toggleSidebar}>
{sidebarOpened ? ( {sidebarOpened ? (
<> <>
<Icon size={24} color={colors.WHITE} icon={icons.CLOSE} /> <Icon size={14} color={colors.WHITE} icon={icons.CLOSE} />
<TogglerText> <TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU_CLOSE} /> <FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />
</TogglerText> </TogglerText>
</> </>
) : ( ) : (
<> <>
<Icon color={colors.WHITE} size={24} icon={icons.MENU} /> <Icon color={colors.WHITE} size={14} icon={icons.MENU} />
<TogglerText> <TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU} /> <FormattedMessage {...l10nMessages.TR_MENU} />
</TogglerText> </TogglerText>

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

@ -75,7 +75,7 @@ const Log = (props: Props): ?React$Element<string> => {
return ( return (
<Wrapper> <Wrapper>
<Click onClick={props.toggle}> <Click onClick={props.toggle}>
<Icon size={24} color={colors.INFO_PRIMARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.INFO_PRIMARY} icon={icons.CLOSE} />
</Click> </Click>
<H5> <H5>
<FormattedMessage {...l10nMessages.TR_LOG} /> <FormattedMessage {...l10nMessages.TR_LOG} />

48
src/components/images/WalletType/index.js
View File

@ -1,43 +1,29 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { colors, icons as ICONS } from 'trezor-ui-components'; import { Icon, colors, icons } from 'trezor-ui-components';
import styled from 'styled-components';
const SvgWrapper = styled.svg` const WalletType = ({
:hover {
path {
fill: ${props => props.hoverColor};
}
}
`;
const Path = styled.path`
fill: ${props => props.color};
`;
const Icon = ({
type = 'standard', type = 'standard',
size = 24, size = 14,
color = colors.TEXT_SECONDARY, color = colors.TEXT_SECONDARY,
hoverColor, hoverColor,
onClick, onClick,
}) => ( ...rest
<SvgWrapper }) => {
hoverColor={hoverColor} const icon = type === 'hidden' ? icons.WALLET_HIDDEN : icons.WALLET_STANDARD;
width={`${size}`} return (
height={`${size}`} <Icon
viewBox="0 0 1024 1024" icon={icon}
onClick={onClick} hoverColor={hoverColor}
> onClick={onClick}
<Path
key={type}
color={color} color={color}
d={type === 'hidden' ? ICONS.WALLET_HIDDEN : ICONS.WALLET_STANDARD} size={size}
{...rest}
/> />
</SvgWrapper> );
); };
Icon.propTypes = { WalletType.propTypes = {
type: PropTypes.string, type: PropTypes.string,
size: PropTypes.number, size: PropTypes.number,
color: PropTypes.string, color: PropTypes.string,
@ -45,4 +31,4 @@ Icon.propTypes = {
onClick: PropTypes.func, onClick: PropTypes.func,
}; };
export default Icon; export default WalletType;

2
src/components/modals/QrModal/index.js
View File

@ -134,7 +134,7 @@ class QrModal extends Component<Props, State> {
return ( return (
<Wrapper> <Wrapper>
<CloseLink onClick={this.handleCancel}> <CloseLink onClick={this.handleCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</CloseLink> </CloseLink>
<Padding> <Padding>
<H5> <H5>

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

@ -64,7 +64,7 @@ const Row = styled.div`
const Confirmation = (props: Props) => ( const Confirmation = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={() => props.onReceiveConfirmation(false)}> <StyledLink onClick={() => props.onReceiveConfirmation(false)}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H5>Your Trezor is not backed up</H5> <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} />

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

@ -145,7 +145,7 @@ class ConfirmUnverifiedAddress extends PureComponent<Props> {
<Wrapper> <Wrapper>
<Content> <Content>
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H5>{deviceStatus}</H5> <H5>{deviceStatus}</H5>
<StyledP size="small"> <StyledP size="small">

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

@ -132,7 +132,7 @@ class DuplicateDevice extends PureComponent<Props, State> {
return ( return (
<Wrapper> <Wrapper>
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H5>Clone {device.label}?</H5> <H5>Clone {device.label}?</H5>
<StyledP size="small"> <StyledP size="small">

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

@ -74,6 +74,10 @@ const Content = styled.div`
`} `}
`; `;
const StyledWalletTypeIcon = styled(WalletTypeIcon)`
margin-right: 6px;
`;
class WalletType extends PureComponent<Props> { class WalletType extends PureComponent<Props> {
constructor(props: Props) { constructor(props: Props) {
super(props); super(props);
@ -104,7 +108,7 @@ class WalletType extends PureComponent<Props> {
<Wrapper> <Wrapper>
{device.state && ( {device.state && (
<StyledLink onClick={onCancel}> <StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
)} )}
<StyledHeading> <StyledHeading>
@ -122,7 +126,11 @@ class WalletType extends PureComponent<Props> {
</StyledHeading> </StyledHeading>
<Content isTop> <Content isTop>
<Header> <Header>
<WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} /> <StyledWalletTypeIcon
type="standard"
size={16}
color={colors.TEXT_PRIMARY}
/>
<FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} /> <FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} />
</Header> </Header>
<P size="small"> <P size="small">
@ -141,10 +149,10 @@ class WalletType extends PureComponent<Props> {
)} )}
readMoreLink="https://wiki.trezor.io/Passphrase" readMoreLink="https://wiki.trezor.io/Passphrase"
> >
<StyledIcon icon={icons.HELP} color={colors.TEXT_SECONDARY} size={26} /> <StyledIcon icon={icons.HELP} color={colors.TEXT_SECONDARY} size={16} />
</Tooltip> </Tooltip>
<Header> <Header>
<WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} /> <StyledWalletTypeIcon type="hidden" size={16} color={colors.TEXT_PRIMARY} />
<FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} /> <FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} />
</Header> </Header>
<P size="small"> <P size="small">

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

@ -45,7 +45,7 @@ const Img = styled.img`
const CardanoWallet = (props: Props) => ( const CardanoWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={CardanoImage} /> <Img src={CardanoImage} />
<H5> <H5>

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

@ -42,7 +42,7 @@ const Img = styled.img`
const NemWallet = (props: Props) => ( const NemWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<H5> <H5>
<FormattedMessage {...l10nMessages.TR_NEM_WALLET} /> <FormattedMessage {...l10nMessages.TR_NEM_WALLET} />

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

@ -45,7 +45,7 @@ const Img = styled.img`
const StellarWallet = (props: Props) => ( const StellarWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={StellarImage} /> <Img src={StellarImage} />
<H5> <H5>

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

@ -41,7 +41,7 @@ const Img = styled.img`
const TezosWallet = (props: Props) => ( const TezosWallet = (props: Props) => (
<Wrapper> <Wrapper>
<StyledLink onClick={props.onCancel}> <StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} /> <Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink> </StyledLink>
<Img src={TezosImage} /> <Img src={TezosImage} />
<H5>Tezos wallet</H5> <H5>Tezos wallet</H5>

2
src/components/notifications/Context/components/Action/components/NotificationsGroups/components/Group/index.js
View File

@ -78,7 +78,7 @@ class Group extends PureComponent {
<Icon <Icon
icon={ICONS.ARROW_DOWN} icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
isActive={!this.state.visible} isActive={!this.state.visible}
canAnimate canAnimate
/> />

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

@ -91,7 +91,7 @@ const BetaDisclaimer = (props: { close: () => void }) => (
/> />
</StyledP> </StyledP>
<StyledP> <StyledP>
<StyledIcon size={24} color={colors.WARNING_PRIMARY} icon={icons.WARNING} /> <StyledIcon size={14} color={colors.WARNING_PRIMARY} icon={icons.WARNING} />
<FormattedMessage <FormattedMessage
{...l10nMessages.TR_PLEASE_NOTE_THAT_THE_TREZOR} {...l10nMessages.TR_PLEASE_NOTE_THAT_THE_TREZOR}
values={{ values={{

8
src/views/Wallet/components/LeftNavigation/components/AccountMenu/index.js
View File

@ -179,7 +179,7 @@ const AccountMenu = (props: Props) => {
<Row> <Row>
<RowAddAccountWrapper disabled> <RowAddAccountWrapper disabled>
<AddAccountIconWrapper> <AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} /> <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper> </AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} /> <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper> </RowAddAccountWrapper>
@ -191,7 +191,7 @@ const AccountMenu = (props: Props) => {
<Row onClick={props.addAccount}> <Row onClick={props.addAccount}>
<RowAddAccountWrapper> <RowAddAccountWrapper>
<AddAccountIconWrapper> <AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} /> <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper> </AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} /> <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper> </RowAddAccountWrapper>
@ -207,7 +207,7 @@ const AccountMenu = (props: Props) => {
<Row> <Row>
<RowAddAccountWrapper disabled> <RowAddAccountWrapper disabled>
<AddAccountIconWrapper> <AddAccountIconWrapper>
<Icon icon={ICONS.PLUS} size={24} color={colors.TEXT_SECONDARY} /> <Icon icon={ICONS.PLUS} size={14} color={colors.TEXT_SECONDARY} />
</AddAccountIconWrapper> </AddAccountIconWrapper>
<FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} /> <FormattedMessage {...l10nMessages.TR_ADD_ACCOUNT} />
</RowAddAccountWrapper> </RowAddAccountWrapper>
@ -243,7 +243,7 @@ const AccountMenu = (props: Props) => {
iconLeft={{ iconLeft={{
type: ICONS.ARROW_LEFT, type: ICONS.ARROW_LEFT,
color: colors.TEXT_PRIMARY, color: colors.TEXT_PRIMARY,
size: 20, size: 10,
}} }}
/> />
</NavLink> </NavLink>

2
src/views/Wallet/components/LeftNavigation/components/CoinMenu/index.js
View File

@ -47,7 +47,7 @@ class CoinMenu extends PureComponent<Props> {
iconRight={{ iconRight={{
type: ICONS.SKIP, type: ICONS.SKIP,
color: colors.TEXT_SECONDARY, color: colors.TEXT_SECONDARY,
size: 27, size: 13,
}} }}
/> />
); );

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

@ -50,7 +50,7 @@ class DeviceList extends PureComponent<Props> {
> >
<Icon <Icon
icon={icons.EJECT} icon={icons.EJECT}
size={25} size={14}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
</IconClick> </IconClick>

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

@ -16,7 +16,7 @@ const Wrapper = styled.div`
`; `;
const Item = styled.div` const Item = styled.div`
padding: 6px 24px; padding: 12px 24px;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: ${FONT_SIZE.BASE}; font-size: ${FONT_SIZE.BASE};
@ -69,7 +69,7 @@ class MenuItems extends PureComponent {
> >
<Icon <Icon
icon={icons.COG} icon={icons.COG}
size={25} size={14}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
<Label><FormattedMessage {...l10nMessages.TR_DEVICE_SETTINGS} /></Label> <Label><FormattedMessage {...l10nMessages.TR_DEVICE_SETTINGS} /></Label>
@ -78,7 +78,7 @@ class MenuItems extends PureComponent {
<Item onClick={() => this.props.duplicateDevice(device)}> <Item onClick={() => this.props.duplicateDevice(device)}>
<Icon <Icon
icon={icons.WALLET_STANDARD} icon={icons.WALLET_STANDARD}
size={25} size={14}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
<Label> <Label>
@ -86,11 +86,11 @@ class MenuItems extends PureComponent {
</Label> </Label>
</Item> </Item>
)} )}
{this.showRenewSession() && ( {!this.showRenewSession() && (
<Item onClick={() => this.props.acquireDevice()}> <Item onClick={() => this.props.acquireDevice()}>
<DeviceIcon <DeviceIcon
device={this.props.device} device={this.props.device}
size={25} size={14}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
<Label> <Label>
@ -99,7 +99,7 @@ class MenuItems extends PureComponent {
</Item> </Item>
)} )}
<Item onClick={() => this.props.forgetDevice(device)}> <Item onClick={() => this.props.forgetDevice(device)}>
<Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} /> <Icon icon={icons.EJECT} size={14} color={colors.TEXT_SECONDARY} />
<Label> <Label>
<FormattedMessage {...l10nCommonMessages.TR_FORGET_DEVICE} /> <FormattedMessage {...l10nCommonMessages.TR_FORGET_DEVICE} />
</Label> </Label>
@ -107,7 +107,7 @@ class MenuItems extends PureComponent {
<Divider /> <Divider />
<Link to={getPattern('wallet-settings')}> <Link to={getPattern('wallet-settings')}>
<Item> <Item>
<Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} /> <Icon icon={icons.COG} size={14} color={colors.TEXT_SECONDARY} />
<Label> <Label>
<FormattedMessage {...l10nCommonMessages.TR_APPLICATION_SETTINGS} /> <FormattedMessage {...l10nCommonMessages.TR_APPLICATION_SETTINGS} />
</Label> </Label>

36
src/views/Wallet/components/LeftNavigation/index.js
View File

@ -27,7 +27,9 @@ const Header = styled(DeviceHeader)`
flex: 0 0 auto; flex: 0 0 auto;
`; `;
const WalletTypeIconWrapper = styled.div``; const DeviceIconWrapper = styled.div`
margin: 0 3px;
`;
const Counter = styled.div` const Counter = styled.div`
display: flex; display: flex;
@ -39,7 +41,6 @@ const Counter = styled.div`
width: 24px; width: 24px;
height: 24px; height: 24px;
font-size: ${FONT_SIZE.COUNTER}; font-size: ${FONT_SIZE.COUNTER};
margin-right: 8px;
`; `;
const TransitionGroupWrapper = styled(TransitionGroup)` const TransitionGroupWrapper = styled(TransitionGroup)`
@ -90,6 +91,14 @@ const A = styled.a`
} }
`; `;
const StyledIcon = styled(Icon)`
margin-right: 6px;
`;
const IconDivider = styled.div`
width: 8px;
`;
type TransitionMenuProps = { type TransitionMenuProps = {
animationType: ?string, animationType: ?string,
children?: React.Node, children?: React.Node,
@ -276,9 +285,9 @@ class LeftNavigation extends React.PureComponent<Props, State> {
} }
maxWidth={200} maxWidth={200}
placement="bottom" placement="bottom"
enterDelayMs={0.5} mouseEnterDelay={0.5}
> >
<WalletTypeIconWrapper> <DeviceIconWrapper>
<WalletTypeIcon <WalletTypeIcon
onClick={e => { onClick={e => {
if (selectedDevice && isDeviceReady) { if (selectedDevice && isDeviceReady) {
@ -292,10 +301,10 @@ class LeftNavigation extends React.PureComponent<Props, State> {
: colors.TEXT_SECONDARY : colors.TEXT_SECONDARY
} }
type={walletType} type={walletType}
size={25} size={16}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
/> />
</WalletTypeIconWrapper> </DeviceIconWrapper>
</Tooltip> </Tooltip>
)} )}
{this.props.devices.length > 1 && ( {this.props.devices.length > 1 && (
@ -305,9 +314,11 @@ class LeftNavigation extends React.PureComponent<Props, State> {
} }
maxWidth={200} maxWidth={200}
placement="bottom" placement="bottom"
enterDelayMs={0.5} mouseEnterDelay={0.5}
> >
<Counter>{this.props.devices.length}</Counter> <DeviceIconWrapper>
<Counter>{this.props.devices.length}</Counter>
</DeviceIconWrapper>
</Tooltip> </Tooltip>
)} )}
{/* <Tooltip {/* <Tooltip
@ -318,12 +329,12 @@ class LeftNavigation extends React.PureComponent<Props, State> {
} }
maxWidth={200} maxWidth={200}
placement="bottom" placement="bottom"
enterDelayMs={0.5} mouseEnterDelay={0.5}
> >
<WalletTypeIconWrapper> <WalletTypeIconWrapper>
<Link to={getPattern('wallet-settings')}> <Link to={getPattern('wallet-settings')}>
<Icon <Icon
size={25} size={16}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
hoverColor={colors.TEXT_PRIMARY} hoverColor={colors.TEXT_PRIMARY}
icon={icons.COG} icon={icons.COG}
@ -331,10 +342,11 @@ class LeftNavigation extends React.PureComponent<Props, State> {
</Link> </Link>
</WalletTypeIconWrapper> </WalletTypeIconWrapper>
</Tooltip> */} </Tooltip> */}
<IconDivider />
<Icon <Icon
canAnimate={this.state.clicked === true} canAnimate={this.state.clicked === true}
isActive={this.props.wallet.dropdownOpened} isActive={this.props.wallet.dropdownOpened}
size={25} size={16}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
icon={icons.ARROW_DOWN} icon={icons.ARROW_DOWN}
/> />
@ -353,7 +365,7 @@ class LeftNavigation extends React.PureComponent<Props, State> {
target="_blank" target="_blank"
rel="noreferrer noopener" rel="noreferrer noopener"
> >
<Icon size={26} icon={icons.CHAT} color={colors.TEXT_SECONDARY} /> <StyledIcon size={14} icon={icons.CHAT} color={colors.TEXT_SECONDARY} />
<FormattedMessage {...l10nMessages.TR_NEED_HELP} /> <FormattedMessage {...l10nMessages.TR_NEED_HELP} />
</A> </A>
</Help> </Help>

10
src/views/Wallet/views/Account/Receive/ethereum/index.js
View File

@ -79,6 +79,10 @@ const QrWrapper = styled.div`
flex-direction: column; flex-direction: column;
`; `;
const StyledDeviceIcon = styled(DeviceIcon)`
margin-right: 6px;
`;
const AccountReceive = (props: Props) => { const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice; const device = props.wallet.selectedDevice;
const { account, discovery, shouldRender } = props.selectedAccount; const { account, discovery, shouldRender } = props.selectedAccount;
@ -118,7 +122,11 @@ const AccountReceive = (props: Props) => {
trezorAction={ trezorAction={
isAddressVerifying ? ( isAddressVerifying ? (
<React.Fragment> <React.Fragment>
<DeviceIcon device={device} color={colors.WHITE} /> <StyledDeviceIcon
size={16}
device={device}
color={colors.WHITE}
/>
<FormattedMessage <FormattedMessage
{...l10nReceiveMessages.TR_CHECK_ADDRESS_ON_TREZOR} {...l10nReceiveMessages.TR_CHECK_ADDRESS_ON_TREZOR}
/> />

7
src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
View File

@ -131,6 +131,7 @@ const StyledLink = styled(Link)`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
margin-left: 6px;
`; `;
// stateless component // stateless component
@ -207,7 +208,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
/> />
</Tooltip> </Tooltip>
</Left> </Left>
@ -265,7 +266,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
/> />
</Tooltip> </Tooltip>
</Left> </Left>
@ -291,7 +292,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
/> />
</Tooltip> </Tooltip>
</Left> </Left>

18
src/views/Wallet/views/Account/Send/ethereum/index.js
View File

@ -181,6 +181,7 @@ const ToggleAdvancedSettingsButton = styled(Button)`
flex: 1 1 0; flex: 1 1 0;
align-items: center; align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD}; font-weight: ${FONT_WEIGHT.SEMIBOLD};
justify-content: flex-start;
`; `;
const FormButtons = styled.div` const FormButtons = styled.div`
@ -205,6 +206,7 @@ const ClearButton = styled(Button)``;
const AdvancedSettingsIcon = styled(Icon)` const AdvancedSettingsIcon = styled(Icon)`
margin-left: 10px; margin-left: 10px;
margin-right: 6px;
`; `;
const QrButton = styled(Button)` const QrButton = styled(Button)`
@ -225,6 +227,10 @@ const EqualsSign = styled.div`
} }
`; `;
const StyledIcon = styled(Icon)`
margin-right: 6px;
`;
// render helpers // render helpers
const getAddressInputState = ( const getAddressInputState = (
address: string, address: string,
@ -415,9 +421,15 @@ const AccountSend = (props: Props) => {
sideAddons={[ sideAddons={[
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={setMax}> <SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={setMax}>
{!setMax && ( {!setMax && (
<Icon icon={ICONS.TOP} size={25} color={colors.TEXT_SECONDARY} /> <StyledIcon
icon={ICONS.TOP}
size={14}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<StyledIcon icon={ICONS.SUCCESS} size={14} color={colors.WHITE} />
)} )}
{setMax && <Icon icon={ICONS.CHECKED} size={25} color={colors.WHITE} />}
<FormattedMessage {...l10nSendMessages.TR_SET_MAX} /> <FormattedMessage {...l10nSendMessages.TR_SET_MAX} />
</SetMaxAmountButton>, </SetMaxAmountButton>,
<CurrencySelect <CurrencySelect
@ -493,7 +505,7 @@ const AccountSend = (props: Props) => {
<AdvancedSettingsIcon <AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN} icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
isActive={advanced} isActive={advanced}
canAnimate canAnimate
/> />

5
src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
View File

@ -65,6 +65,7 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
margin-left: 6px;
`; `;
const getFeeInputState = (feeErrors: string, feeWarnings: string): string => { const getFeeInputState = (feeErrors: string, feeWarnings: string): string => {
@ -125,7 +126,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
/> />
</Tooltip> </Tooltip>
</Left> </Left>
@ -164,7 +165,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon <StyledIcon
icon={ICONS.HELP} icon={ICONS.HELP}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
/> />
</Tooltip> </Tooltip>
</Left> </Left>

18
src/views/Wallet/views/Account/Send/ripple/index.js
View File

@ -142,6 +142,7 @@ const ToggleAdvancedSettingsButton = styled(Button)`
flex: 1 1 0; flex: 1 1 0;
align-items: center; align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD}; font-weight: ${FONT_WEIGHT.SEMIBOLD};
justify-content: flex-start;
`; `;
const FormButtons = styled.div` const FormButtons = styled.div`
@ -223,6 +224,11 @@ const EqualsSign = styled.div`
display: none; display: none;
} }
`; `;
const StyledIcon = styled(Icon)`
margin-right: 6px;
`;
// render helpers // render helpers
const getAddressInputState = ( const getAddressInputState = (
address: string, address: string,
@ -381,9 +387,15 @@ const AccountSend = (props: Props) => {
sideAddons={[ sideAddons={[
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={setMax}> <SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={setMax}>
{!setMax && ( {!setMax && (
<Icon icon={ICONS.TOP} size={25} color={colors.TEXT_SECONDARY} /> <StyledIcon
icon={ICONS.TOP}
size={14}
color={colors.TEXT_SECONDARY}
/>
)}
{setMax && (
<StyledIcon icon={ICONS.CHECKED} size={14} color={colors.WHITE} />
)} )}
{setMax && <Icon icon={ICONS.CHECKED} size={25} color={colors.WHITE} />}
<FormattedMessage {...l10nSendMessages.TR_SET_MAX} /> <FormattedMessage {...l10nSendMessages.TR_SET_MAX} />
</SetMaxAmountButton>, </SetMaxAmountButton>,
<CurrencySelect <CurrencySelect
@ -458,7 +470,7 @@ const AccountSend = (props: Props) => {
<AdvancedSettingsIcon <AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN} icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY} color={colors.TEXT_SECONDARY}
size={24} size={14}
isActive={advanced} isActive={advanced}
canAnimate canAnimate
/> />

11
src/views/Wallet/views/Account/Summary/ethereum/index.js
View File

@ -26,7 +26,6 @@ const AccountHeading = styled.div`
const TokensHeadingWrapper = styled.div` const TokensHeadingWrapper = styled.div`
display: flex; display: flex;
align-items: center;
padding: 20px 0; padding: 20px 0;
`; `;
@ -43,12 +42,8 @@ const AccountTitle = styled.div`
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; margin-left: 6px;
top: -7px; cursor: pointer;
&:hover {
cursor: pointer;
}
`; `;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
@ -108,7 +103,7 @@ const AccountSummary = (props: Props) => {
placement="top" placement="top"
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)} content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
> >
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={24} /> <StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={14} />
</Tooltip> </Tooltip>
</TokensHeadingWrapper> </TokensHeadingWrapper>
<AsyncSelectWrapper> <AsyncSelectWrapper>