Merge pull request #1628 from KyberNetwork/add-more-info-to-gas-fee

Fix integration CSS defects
KyberNetwork · Aug 27, 2020 · 55d58fc · 55d58fc
2 parents 49e0507 + d035386
commit 55d58fc
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 30 deletions.
diff --git a/src/assets/css/advance_config.scss b/src/assets/css/advance_config.scss
@@ -150,32 +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;
-      }
-    }
-  }
-
-  .__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;
-    }
+    padding-top: 13px;
   }
 
   @include screen-max-width(mid-small) {

diff --git a/src/assets/css/commons/commons.scss b/src/assets/css/commons/commons.scss
@@ -363,6 +363,26 @@
     position: relative;
     top: 2px;
     left: 7px;
+
+    img {
+      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;
+    }
   }
 }
 

diff --git 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
@@ -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) => {
@@ -48,10 +48,10 @@ 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"/>
+                  <ReactTooltip className="common__tooltip" place="top" id="reserve-routing-tooltip" type="light"/>
                 </div>
                 <input
                   type="checkbox"