Refactor tooltip to remove external lib; tooltip now updating gas fee in parent.

1 files changed, 90 insertions, 3 deletions

diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index e1ea73de5..f5b4af299 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -82,13 +82,100 @@
   cursor: pointer;
 }
 
-div.__react_component_tooltip.send-tooltip {
-  left: 177px;
-  top: 50px;
+.customize-gas-tooltip-container {
+  position: absolute;
+  left: 76px;
+  bottom: 50px;
   width: 237px;
   height: 307px;
   background-color: white;
   opacity: 1;
   box-shadow: grey 0px 0px 5px;
   z-index: 1050;
+  padding: 13px 19px;
+  font-size: 16px;
+  border-radius: 4px;
+  font-family: 'Montserrat Regular';
+}
+
+.gas-tooltip-arrow {
+  height: 25px;
+  width: 25px;
+  z-index: 1200;
+  background: white;
+  position: absolute;
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  left: 107px;
+  top: 294px;
+  -webkit-box-shadow: 0 0 5px grey;
+  box-shadow: 2px 2px 2px $alto;
+}
+
+.customize-gas-tooltip-container input[type=number]::-webkit-inner-spin-button { 
+    -webkit-appearance: none;
+    display:none;
+}
+
+.customize-gas-tooltip-container input[type=number]:hover::-webkit-inner-spin-button { 
+    -webkit-appearance: none;
+    display:none;
+}  
+
+.customize-gas-tooltip {
+  position: relative;
+}
+
+.gas-tooltip-label {
+  font-size: 16px;
+  color: $tundora;
+}
+
+.gas-tooltip-header {
+  padding-bottom: 12px;
+}
+
+.gas-tooltip-input-label {
+  margin-bottom: 5px;
+}
+
+.gas-tooltip-input-label i {
+  color: $silver-chalice;
+  margin-left: 6px;
+}
+
+.customize-gas-input {
+  width: 178px;
+  height: 28px;
+  border: 1px solid $alto;
+  font-size: 16px;
+  color: $nile-blue;
+  padding-left: 8px;
+}
+
+.customize-gas-input-wrapper {
+  position: relative;
+}
+
+.gas-tooltip-input-detail {
+  position: absolute;
+  top: 4px;
+  right: 26px;
+  font-size: 12px;
+  color: $silver-chalice;
+}
+
+.gas-tooltip-input-arrows {
+  position: absolute;
+  top: 0px;
+  left: 178px;
+  width: 17px;
+  height: 28px;
+  border: 1px solid #dadada;
+  border-left: 0px;
+  display: flex;
+  flex-direction: column;
+  color: #9b9b9b;
+  font-size: 0.8em;
+  padding: 1px 4px;
 }
\ No newline at end of file