mirror of
https://github.com/trezor/trezor-wallet
synced 2025-01-22 05:51:18 +00:00
centering tooltip pos
This commit is contained in:
parent
c3a7fbec25
commit
668c25c4b4
@ -132,6 +132,10 @@ const StyledLink = styled(Link)`
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
cursor: pointer;
|
||||
padding-right: 1px;
|
||||
`;
|
||||
|
||||
const TooltipContainer = styled.div`
|
||||
margin-left: 6px;
|
||||
`;
|
||||
|
||||
@ -183,38 +187,44 @@ const AdvancedForm = (props: Props) => {
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
<FormattedMessage {...l10nMessages.TR_GAS_LIMIT} />
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_LIMIT_REFERS_TO}
|
||||
values={{
|
||||
TR_GAS_QUOTATION: (
|
||||
<GreenSpan>
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_QUOTATION}
|
||||
/>
|
||||
</GreenSpan>
|
||||
),
|
||||
gasLimitTooltipValue: (
|
||||
<GreenSpan>{gasLimitTooltipValue}</GreenSpan>
|
||||
),
|
||||
gasLimitTooltipCurrency,
|
||||
}}
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_LIMIT_REFERS_TO}
|
||||
values={{
|
||||
TR_GAS_QUOTATION: (
|
||||
<GreenSpan>
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_QUOTATION}
|
||||
/>
|
||||
</GreenSpan>
|
||||
),
|
||||
gasLimitTooltipValue: (
|
||||
<GreenSpan>
|
||||
{gasLimitTooltipValue}
|
||||
</GreenSpan>
|
||||
),
|
||||
gasLimitTooltipCurrency,
|
||||
}}
|
||||
/>
|
||||
}
|
||||
maxWidth={410}
|
||||
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
|
||||
ctaText={
|
||||
<FormattedMessage
|
||||
{...l10nCommonMessages.TR_LEARN_MORE}
|
||||
/>
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
}
|
||||
maxWidth={410}
|
||||
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
|
||||
ctaText={
|
||||
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</Left>
|
||||
{showDefaultGasLimitButton && (
|
||||
<Right>
|
||||
@ -245,37 +255,41 @@ const AdvancedForm = (props: Props) => {
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
<FormattedMessage {...l10nMessages.TR_GAS_PRICE} />
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_PRICE_REFERS_TO}
|
||||
values={{
|
||||
TR_GAS_PRICE_QUOTATION: (
|
||||
<GreenSpan>
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_PRICE_QUOTATION}
|
||||
/>
|
||||
</GreenSpan>
|
||||
),
|
||||
recommendedGasPrice: (
|
||||
<GreenSpan>{recommendedGasPrice}</GreenSpan>
|
||||
),
|
||||
}}
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_PRICE_REFERS_TO}
|
||||
values={{
|
||||
TR_GAS_PRICE_QUOTATION: (
|
||||
<GreenSpan>
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_GAS_PRICE_QUOTATION}
|
||||
/>
|
||||
</GreenSpan>
|
||||
),
|
||||
recommendedGasPrice: (
|
||||
<GreenSpan>{recommendedGasPrice}</GreenSpan>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
}
|
||||
maxWidth={400}
|
||||
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
|
||||
ctaText={
|
||||
<FormattedMessage
|
||||
{...l10nCommonMessages.TR_LEARN_MORE}
|
||||
/>
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
}
|
||||
maxWidth={400}
|
||||
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
|
||||
ctaText={
|
||||
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} />
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
}
|
||||
@ -290,18 +304,22 @@ const AdvancedForm = (props: Props) => {
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
<FormattedMessage {...l10nMessages.TR_DATA} />
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage {...l10nMessages.TR_DATA_IS_USUALLY_USED} />
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
{...l10nMessages.TR_DATA_IS_USUALLY_USED}
|
||||
/>
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<StyledIcon
|
||||
icon={ICONS.HELP}
|
||||
color={colors.TEXT_SECONDARY}
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
}
|
||||
|
@ -66,6 +66,10 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
cursor: pointer;
|
||||
padding-right: 1px;
|
||||
`;
|
||||
|
||||
const TooltipContainer = styled.div`
|
||||
margin-left: 6px;
|
||||
`;
|
||||
|
||||
@ -116,6 +120,7 @@ const AdvancedForm = (props: Props) => {
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
<FormattedMessage {...l10nSendMessages.TR_FEE} />
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage {...l10nMessages.TR_XRP_TRANSFER_COST} />
|
||||
@ -133,6 +138,7 @@ const AdvancedForm = (props: Props) => {
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
}
|
||||
@ -156,6 +162,7 @@ const AdvancedForm = (props: Props) => {
|
||||
<InputLabelWrapper>
|
||||
<Left>
|
||||
<FormattedMessage {...l10nMessages.TR_XRP_DESTINATION_TAG} />
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
content={
|
||||
<FormattedMessage
|
||||
@ -175,6 +182,7 @@ const AdvancedForm = (props: Props) => {
|
||||
size={12}
|
||||
/>
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</Left>
|
||||
</InputLabelWrapper>
|
||||
}
|
||||
|
@ -50,10 +50,13 @@ const AccountTitle = styled.div`
|
||||
`;
|
||||
|
||||
const StyledIcon = styled(Icon)`
|
||||
margin-left: 6px;
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const TooltipContainer = styled.div`
|
||||
margin-left: 6px;
|
||||
`;
|
||||
|
||||
const StyledLink = styled(Link)`
|
||||
font-size: ${FONT_SIZE.SMALL};
|
||||
`;
|
||||
@ -111,13 +114,15 @@ const AccountSummary = (props: Props) => {
|
||||
<H5>
|
||||
<FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />
|
||||
</H5>
|
||||
<Tooltip
|
||||
maxWidth={200}
|
||||
placement="top"
|
||||
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
|
||||
>
|
||||
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
|
||||
</Tooltip>
|
||||
<TooltipContainer>
|
||||
<Tooltip
|
||||
maxWidth={200}
|
||||
placement="top"
|
||||
content={props.intl.formatMessage(l10nSummaryMessages.TR_INSERT_TOKEN_NAME)}
|
||||
>
|
||||
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
|
||||
</Tooltip>
|
||||
</TooltipContainer>
|
||||
</TokensHeadingWrapper>
|
||||
<AsyncSelectWrapper>
|
||||
<AsyncSelect
|
||||
|
Loading…
Reference in New Issue
Block a user