From 9419b2d29e9d12cc1abecf454e5e78a42ae181da Mon Sep 17 00:00:00 2001
From: trungnx <trungngoxuan92@gmail.com>
Date: Wed, 26 Aug 2020 18:14:28 +0700
Subject: [PATCH 1/2] Fix integration CSS defects

---
 src/assets/css/advance_config.scss                 | 14 +-------------
 src/assets/css/commons/commons.scss                |  4 ++++
 .../TransactionCommon/AdvanceConfigLayout.js       |  2 +-
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/assets/css/advance_config.scss b/src/assets/css/advance_config.scss
index c4e599d0e..d2d79419c 100644
--- a/src/assets/css/advance_config.scss
+++ b/src/assets/css/advance_config.scss
@@ -150,19 +150,7 @@
   &__checkbox {
     border-top: 1px solid transparent;
     margin-top: 15px;
-
-    .common__checkbox-text {
-      margin-top: 16px;
-
-      > span {
-        margin-right: 7px;
-      }
-
-      img {
-        top: 2px;
-        position: relative;
-      }
-    }
+    padding-top: 13px;
   }
 
   .__react_component_tooltip {
diff --git a/src/assets/css/commons/commons.scss b/src/assets/css/commons/commons.scss
index 1a91f325a..de0c06bcc 100644
--- a/src/assets/css/commons/commons.scss
+++ b/src/assets/css/commons/commons.scss
@@ -363,6 +363,10 @@
     position: relative;
     top: 2px;
     left: 7px;
+
+    img {
+      vertical-align: initial;
+    }
   }
 }
 
diff --git a/src/js/components/TransactionCommon/AdvanceConfigLayout.js b/src/js/components/TransactionCommon/AdvanceConfigLayout.js
index a1328c0ae..10f504bb6 100644
--- a/src/js/components/TransactionCommon/AdvanceConfigLayout.js
+++ b/src/js/components/TransactionCommon/AdvanceConfigLayout.js
@@ -48,7 +48,7 @@ export default class AdvanceConfigLayout extends Component {
               <label className="common__checkbox advance-config__checkbox theme__border-2 theme__checkbox">
                 <div className="common__checkbox-text">
                   <span>{this.props.translate("info.reserve_routing")}</span>
-                  <span data-tip={this.props.translate("info.reserve_routing_explain")} data-for="reserve-routing-tooltip">
+                  <span className="common__info-icon" data-tip={this.props.translate("info.reserve_routing_explain")} data-for="reserve-routing-tooltip">
                     <img src={require('../../../assets/img/common/blue-indicator.svg')} alt=""/>
                   </span>
                   <ReactTooltip place="top" id="reserve-routing-tooltip" type="light"/>

From d035386e0800ffbeee50e1c7fc8e625380f555cf Mon Sep 17 00:00:00 2001
From: trungnx <trungngoxuan92@gmail.com>
Date: Wed, 26 Aug 2020 18:39:41 +0700
Subject: [PATCH 2/2] Add common tooltip

---
 src/assets/css/advance_config.scss               | 13 -------------
 src/assets/css/commons/commons.scss              | 16 ++++++++++++++++
 src/js/components/CommonElement/FeeDetail.js     |  2 +-
 .../TransactionCommon/AdvanceConfigLayout.js     |  4 ++--
 4 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/assets/css/advance_config.scss b/src/assets/css/advance_config.scss
index d2d79419c..0f1d85ff6 100644
--- a/src/assets/css/advance_config.scss
+++ b/src/assets/css/advance_config.scss
@@ -153,19 +153,6 @@
     padding-top: 13px;
   }
 
-  .__react_component_tooltip {
-    opacity: 1;
-    z-index: 1 !important;
-    width: 100% !important;
-    max-width: 300px;
-    box-shadow: 0 0 3px $grey;
-
-    > div {
-      color: #222;
-      font-size: 11px;
-    }
-  }
-
   @include screen-max-width(mid-small) {
     &__option {
       &-container--rate {
diff --git a/src/assets/css/commons/commons.scss b/src/assets/css/commons/commons.scss
index de0c06bcc..290c12b74 100644
--- a/src/assets/css/commons/commons.scss
+++ b/src/assets/css/commons/commons.scss
@@ -368,6 +368,22 @@
       vertical-align: initial;
     }
   }
+
+  &__tooltip {
+    opacity: 1;
+    z-index: 1 !important;
+    width: 100% !important;
+    max-width: 250px;
+    box-shadow: 0 0 3px $grey;
+    height: auto;
+    white-space: initial;
+    padding: 10px 16px;
+
+    > div {
+      color: #222;
+      font-size: 11px;
+    }
+  }
 }
 
 .text-center {
diff --git a/src/js/components/CommonElement/FeeDetail.js b/src/js/components/CommonElement/FeeDetail.js
index 4c8553937..b825c7a85 100644
--- a/src/js/components/CommonElement/FeeDetail.js
+++ b/src/js/components/CommonElement/FeeDetail.js
@@ -12,7 +12,7 @@ const FeeDetail = (props) => {
         <span className="common__info-icon" data-tip={props.translate("info.max_gas_fee")} data-for="max-gas-info">
           <img src={require('../../../assets/img/common/blue-indicator.svg')} alt=""/>
         </span>
-        <ReactTooltip place="top" id="max-gas-info" type="light"/>
+        <ReactTooltip className="common__tooltip" place="top" id="max-gas-info" type="light"/>
       </div>
       <div className={"total-fee"}>
         <span className={"total-fee__number theme__text"}>{totalGas.toString()} ETH</span>
diff --git a/src/js/components/TransactionCommon/AdvanceConfigLayout.js b/src/js/components/TransactionCommon/AdvanceConfigLayout.js
index 10f504bb6..e41d0f0c1 100644
--- a/src/js/components/TransactionCommon/AdvanceConfigLayout.js
+++ b/src/js/components/TransactionCommon/AdvanceConfigLayout.js
@@ -21,7 +21,7 @@ export default class AdvanceConfigLayout extends Component {
                 <span className="common__info-icon" data-tip={this.props.translate("info.gas_fee")} data-for="gas-fee-info">
                   <img src={require('../../../assets/img/common/blue-indicator.svg')} alt=""/>
                 </span>
-                <ReactTooltip place="top" id="gas-fee-info" type="light"/>
+                <ReactTooltip className="common__tooltip" place="top" id="gas-fee-info" type="light"/>
               </div>
               <div className="advance-config__option-container">
                 {gasOptions.map((item, index) => {
@@ -51,7 +51,7 @@ export default class AdvanceConfigLayout extends Component {
                   <span className="common__info-icon" data-tip={this.props.translate("info.reserve_routing_explain")} data-for="reserve-routing-tooltip">
                     <img src={require('../../../assets/img/common/blue-indicator.svg')} alt=""/>
                   </span>
-                  <ReactTooltip place="top" id="reserve-routing-tooltip" type="light"/>
+                  <ReactTooltip className="common__tooltip" place="top" id="reserve-routing-tooltip" type="light"/>
                 </div>
                 <input
                   type="checkbox"