From 668c25c4b47c95849934543f5c18687a6c47a6da Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 28 Mar 2019 16:05:39 +0100
Subject: [PATCH] centering tooltip pos

---
 .../ethereum/components/AdvancedForm/index.js | 164 ++++++++++--------
 .../ripple/components/AdvancedForm/index.js   |   8 +
 .../views/Account/Summary/ethereum/index.js   |  21 ++-
 3 files changed, 112 insertions(+), 81 deletions(-)

diff --git a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
index ded16d23..eb14d7bb 100644
--- a/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
+++ b/src/views/Wallet/views/Account/Send/ethereum/components/AdvancedForm/index.js
@@ -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>
                 }
diff --git a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
index 862be279..13c6509e 100644
--- a/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
+++ b/src/views/Wallet/views/Account/Send/ripple/components/AdvancedForm/index.js
@@ -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>
                     }
diff --git a/src/views/Wallet/views/Account/Summary/ethereum/index.js b/src/views/Wallet/views/Account/Summary/ethereum/index.js
index 265f2434..27080104 100644
--- a/src/views/Wallet/views/Account/Summary/ethereum/index.js
+++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js
@@ -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