arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-06-27 18:32:35 +00:00
Code Issues Releases Wiki Activity

centering tooltip pos

Browse Source
This commit is contained in:
slowbackspace 2019-03-28 16:05:39 +01:00
parent c3a7fbec25
commit 668c25c4b4
3 changed files with 112 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -132,6 +132,10 @@ const StyledLink = styled(Link)`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
padding-right: 1px;
`;
const TooltipContainer = styled.div`
margin-left: 6px; margin-left: 6px;
`; `;
@ -183,6 +187,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_GAS_LIMIT} /> <FormattedMessage {...l10nMessages.TR_GAS_LIMIT} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage <FormattedMessage
@ -196,7 +201,9 @@ const AdvancedForm = (props: Props) => {
</GreenSpan> </GreenSpan>
), ),
gasLimitTooltipValue: ( gasLimitTooltipValue: (
<GreenSpan>{gasLimitTooltipValue}</GreenSpan> <GreenSpan>
{gasLimitTooltipValue}
</GreenSpan>
), ),
gasLimitTooltipCurrency, gasLimitTooltipCurrency,
}} }}
@ -205,7 +212,9 @@ const AdvancedForm = (props: Props) => {
maxWidth={410} maxWidth={410}
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit" ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_limit"
ctaText={ ctaText={
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} /> <FormattedMessage
{...l10nCommonMessages.TR_LEARN_MORE}
/>
} }
placement="top" placement="top"
> >
@ -215,6 +224,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
{showDefaultGasLimitButton && ( {showDefaultGasLimitButton && (
<Right> <Right>
@ -245,6 +255,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_GAS_PRICE} /> <FormattedMessage {...l10nMessages.TR_GAS_PRICE} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage <FormattedMessage
@ -266,7 +277,9 @@ const AdvancedForm = (props: Props) => {
maxWidth={400} maxWidth={400}
ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price" ctaLink="https://wiki.trezor.io/Ethereum_Wallet#Gas_price"
ctaText={ ctaText={
<FormattedMessage {...l10nCommonMessages.TR_LEARN_MORE} /> <FormattedMessage
{...l10nCommonMessages.TR_LEARN_MORE}
/>
} }
placement="top" placement="top"
> >
@ -276,6 +289,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }
@ -290,9 +304,12 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_DATA} /> <FormattedMessage {...l10nMessages.TR_DATA} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage {...l10nMessages.TR_DATA_IS_USUALLY_USED} /> <FormattedMessage
{...l10nMessages.TR_DATA_IS_USUALLY_USED}
/>
} }
placement="top" placement="top"
> >
@ -302,6 +319,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }

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

@ -66,6 +66,10 @@ const AdvancedSettingsSendButtonWrapper = styled.div`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
cursor: pointer; cursor: pointer;
padding-right: 1px;
`;
const TooltipContainer = styled.div`
margin-left: 6px; margin-left: 6px;
`; `;
@ -116,6 +120,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nSendMessages.TR_FEE} /> <FormattedMessage {...l10nSendMessages.TR_FEE} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage {...l10nMessages.TR_XRP_TRANSFER_COST} /> <FormattedMessage {...l10nMessages.TR_XRP_TRANSFER_COST} />
@ -133,6 +138,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }
@ -156,6 +162,7 @@ const AdvancedForm = (props: Props) => {
<InputLabelWrapper> <InputLabelWrapper>
<Left> <Left>
<FormattedMessage {...l10nMessages.TR_XRP_DESTINATION_TAG} /> <FormattedMessage {...l10nMessages.TR_XRP_DESTINATION_TAG} />
<TooltipContainer>
<Tooltip <Tooltip
content={ content={
<FormattedMessage <FormattedMessage
@ -175,6 +182,7 @@ const AdvancedForm = (props: Props) => {
size={12} size={12}
/> />
</Tooltip> </Tooltip>
</TooltipContainer>
</Left> </Left>
</InputLabelWrapper> </InputLabelWrapper>
} }

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

@ -50,10 +50,13 @@ const AccountTitle = styled.div`
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
margin-left: 6px;
cursor: pointer; cursor: pointer;
`; `;
const TooltipContainer = styled.div`
margin-left: 6px;
`;
const StyledLink = styled(Link)` const StyledLink = styled(Link)`
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
`; `;
@ -111,6 +114,7 @@ const AccountSummary = (props: Props) => {
<H5> <H5>
<FormattedMessage {...l10nSummaryMessages.TR_TOKENS} /> <FormattedMessage {...l10nSummaryMessages.TR_TOKENS} />
</H5> </H5>
<TooltipContainer>
<Tooltip <Tooltip
maxWidth={200} maxWidth={200}
placement="top" placement="top"
@ -118,6 +122,7 @@ const AccountSummary = (props: Props) => {
> >
<StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} /> <StyledIcon icon={ICONS.HELP} color={colors.TEXT_SECONDARY} size={12} />
</Tooltip> </Tooltip>
</TooltipContainer>
</TokensHeadingWrapper> </TokensHeadingWrapper>
<AsyncSelectWrapper> <AsyncSelectWrapper>
<AsyncSelect <AsyncSelect