arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-07 14:50:52 +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;
flex: 1 0 0;
justify-content: flex-end;
align-items: center;
`;
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 T = styled.div``;
@ -159,14 +161,14 @@ const Header = ({ sidebarEnabled, sidebarOpened, toggleSidebar }: Props) => (
<MenuToggler onClick={toggleSidebar}>
{sidebarOpened ? (
<>
<Icon size={24} color={colors.WHITE} icon={icons.CLOSE} />
<Icon size={14} color={colors.WHITE} icon={icons.CLOSE} />
<TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU_CLOSE} />
</TogglerText>
</>
) : (
<>
<Icon color={colors.WHITE} size={24} icon={icons.MENU} />
<Icon color={colors.WHITE} size={14} icon={icons.MENU} />
<TogglerText>
<FormattedMessage {...l10nMessages.TR_MENU} />
</TogglerText>

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

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

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

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

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

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

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

@ -132,7 +132,7 @@ class DuplicateDevice extends PureComponent<Props, State> {
return (
<Wrapper>
<StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
<Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
<H5>Clone {device.label}?</H5>
<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> {
constructor(props: Props) {
super(props);
@ -104,7 +108,7 @@ class WalletType extends PureComponent<Props> {
<Wrapper>
{device.state && (
<StyledLink onClick={onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
<Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
)}
<StyledHeading>
@ -122,7 +126,11 @@ class WalletType extends PureComponent<Props> {
</StyledHeading>
<Content isTop>
<Header>
<WalletTypeIcon type="standard" size={32} color={colors.TEXT_PRIMARY} />
<StyledWalletTypeIcon
type="standard"
size={16}
color={colors.TEXT_PRIMARY}
/>
<FormattedMessage {...l10nMessages.TR_STANDARD_WALLET} />
</Header>
<P size="small">
@ -141,10 +149,10 @@ class WalletType extends PureComponent<Props> {
)}
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>
<Header>
<WalletTypeIcon type="hidden" size={32} color={colors.TEXT_PRIMARY} />
<StyledWalletTypeIcon type="hidden" size={16} color={colors.TEXT_PRIMARY} />
<FormattedMessage {...l10nMessages.TR_HIDDEN_WALLET} />
</Header>
<P 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) => (
<Wrapper>
<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>
<Img src={CardanoImage} />
<H5>

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

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

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

@ -41,7 +41,7 @@ const Img = styled.img`
const TezosWallet = (props: Props) => (
<Wrapper>
<StyledLink onClick={props.onCancel}>
<Icon size={24} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
<Icon size={14} color={colors.TEXT_SECONDARY} icon={icons.CLOSE} />
</StyledLink>
<Img src={TezosImage} />
<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={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
isActive={!this.state.visible}
canAnimate
/>

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

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

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

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

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

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

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

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

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

@ -79,6 +79,10 @@ const QrWrapper = styled.div`
flex-direction: column;
`;
const StyledDeviceIcon = styled(DeviceIcon)`
margin-right: 6px;
`;
const AccountReceive = (props: Props) => {
const device = props.wallet.selectedDevice;
const { account, discovery, shouldRender } = props.selectedAccount;
@ -118,7 +122,11 @@ const AccountReceive = (props: Props) => {
trezorAction={
isAddressVerifying ? (
<React.Fragment>
<DeviceIcon device={device} color={colors.WHITE} />
<StyledDeviceIcon
size={16}
device={device}
color={colors.WHITE}
/>
<FormattedMessage
{...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)`
cursor: pointer;
margin-left: 6px;
`;
// stateless component
@ -207,7 +208,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
/>
</Tooltip>
</Left>
@ -265,7 +266,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
/>
</Tooltip>
</Left>
@ -291,7 +292,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
/>
</Tooltip>
</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;
align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD};
justify-content: flex-start;
`;
const FormButtons = styled.div`
@ -205,6 +206,7 @@ const ClearButton = styled(Button)``;
const AdvancedSettingsIcon = styled(Icon)`
margin-left: 10px;
margin-right: 6px;
`;
const QrButton = styled(Button)`
@ -225,6 +227,10 @@ const EqualsSign = styled.div`
}
`;
const StyledIcon = styled(Icon)`
margin-right: 6px;
`;
// render helpers
const getAddressInputState = (
address: string,
@ -415,9 +421,15 @@ const AccountSend = (props: Props) => {
sideAddons={[
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={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} />
</SetMaxAmountButton>,
<CurrencySelect
@ -493,7 +505,7 @@ const AccountSend = (props: Props) => {
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
isActive={advanced}
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)`
cursor: pointer;
margin-left: 6px;
`;
const getFeeInputState = (feeErrors: string, feeWarnings: string): string => {
@ -125,7 +126,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
/>
</Tooltip>
</Left>
@ -164,7 +165,7 @@ const AdvancedForm = (props: Props) => {
<StyledIcon
icon={ICONS.HELP}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
/>
</Tooltip>
</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;
align-items: center;
font-weight: ${FONT_WEIGHT.SEMIBOLD};
justify-content: flex-start;
`;
const FormButtons = styled.div`
@ -223,6 +224,11 @@ const EqualsSign = styled.div`
display: none;
}
`;
const StyledIcon = styled(Icon)`
margin-right: 6px;
`;
// render helpers
const getAddressInputState = (
address: string,
@ -381,9 +387,15 @@ const AccountSend = (props: Props) => {
sideAddons={[
<SetMaxAmountButton key="icon" onClick={() => onSetMax()} isActive={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} />
</SetMaxAmountButton>,
<CurrencySelect
@ -458,7 +470,7 @@ const AccountSend = (props: Props) => {
<AdvancedSettingsIcon
icon={ICONS.ARROW_DOWN}
color={colors.TEXT_SECONDARY}
size={24}
size={14}
isActive={advanced}
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`
display: flex;
align-items: center;
padding: 20px 0;
`;
@ -43,12 +42,8 @@ const AccountTitle = styled.div`
`;
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
&:hover {
cursor: pointer;
}
margin-left: 6px;
cursor: pointer;
`;
const StyledLink = styled(Link)`
@ -108,7 +103,7 @@ const AccountSummary = (props: Props) => {
placement="top"
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>
</TokensHeadingWrapper>
<AsyncSelectWrapper>