[NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364)

* Adds memo field to send-v2.

* Vertical align transaction with flexbox.

* Customize Gas UI

* Remove internal state from InputNumber and fix use in gastooltip.

* Move customize-gas-modal to its own folder and minor cleanup

* Create send container, get account info from state, and make currency display more reusable

* Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices.

5 files changed, 270 insertions, 19 deletions

diff --git a/ui/app/css/itcss/components/account-dropdown.scss b/ui/app/css/itcss/components/account-dropdown.scss
index 9966c7f3f..4fc7c705a 100644
--- a/ui/app/css/itcss/components/account-dropdown.scss
+++ b/ui/app/css/itcss/components/account-dropdown.scss
@@ -23,6 +23,16 @@
     margin-left: 8px;
     position: relative;
   }
+
+  &__account-balances {
+    height: auto;
+    border: none;
+    background-color: transparent;
+    color: #9b9b9b;
+    margin-left: 34px;
+    margin-top: 4px;
+    position: relative;
+  }
   
   &__account-name {
     font-size: 16px;
@@ -34,13 +44,22 @@
     right: 12px;
     top: 1px;
   }
+
+  &__account-primary-balance,
+  &__account-secondary-balance {
+    font-family: Roboto;
+    line-height: 16px;
+    font-size: 12px;
+    font-weight: 300;
+  }
+
   &__account-primary-balance {
-    margin-left: 34px;
-    margin-top: 4px;
+    color: $scorpion;
+    border: none;
+    outline: 0 !important;
   }
 
   &__account-secondary-balance {
-    margin-left: 34px;
     color: $dusty-gray;
   }
 }
diff --git a/ui/app/css/itcss/components/currency-display.scss b/ui/app/css/itcss/components/currency-display.scss
index b2776bb47..f2cc6e700 100644
--- a/ui/app/css/itcss/components/currency-display.scss
+++ b/ui/app/css/itcss/components/currency-display.scss
@@ -15,10 +15,6 @@
     display: flex;
   }
 
-  &__input-wrapper {
-    margin-top: -1px;
-  }
-
   &__input {
     color: $scorpion;
     font-family: Roboto;
diff --git a/ui/app/css/itcss/components/gas-slider.scss b/ui/app/css/itcss/components/gas-slider.scss
new file mode 100644
index 000000000..c27a560bd
--- /dev/null
+++ b/ui/app/css/itcss/components/gas-slider.scss
@@ -0,0 +1,51 @@
+.gas-slider {
+  position: relative;
+  width: 313px;
+
+  &__input {
+    width: 317px;
+    margin-left: -2px;
+    z-index: 2;
+  }
+
+  input[type=range] {
+    -webkit-appearance: none !important;
+  }
+
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    height: 26px;
+    width: 26px;
+    border: 2px solid #B8B8B8;
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+    border-radius: 50%;
+    position: relative;
+    z-index: 10;
+  }
+
+  &__bar {
+    height: 6px;
+    width: 313px;
+    background: $alto;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    top: 11px;
+    z-index: 0;
+  }
+
+  &__low, &__high {
+    height: 6px;
+    width: 49px;
+    z-index: 1;
+  }
+
+  &__low {
+    background-color: $crimson;
+  }
+
+  &__high {
+    background-color: $caribbean-green;
+  }
+}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index dee0959b7..fda002785 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -35,3 +35,6 @@
 @import './account-menu.scss';
 
 @import './menu.scss';
+
+@import './gas-slider.scss';
+
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index 80aacf1ab..ddabdee2e 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -264,7 +264,7 @@
 .gas-tooltip-input-arrows {
   position: absolute;
   top: 0;
-  left: 178px;
+  right: 4px;
   width: 17px;
   height: 28px;
   border: 1px solid #dadada;
@@ -420,7 +420,16 @@
     }
   }
 
-  &__send-eth-icon {
+  &__send-header-icon-container {
+    z-index: 25;
+
+    @media screen and (max-width: $break-small) {
+      position: relative;
+      top: 0;
+    }
+  }
+
+  &__send-header-icon {
     border-radius: 50%;
     width: 48px;
     height: 48px;
@@ -428,11 +437,6 @@
     z-index: 25;
     padding: 4px;
     background-color: $white;
-
-    @media screen and (max-width: $break-small) {
-      position: relative;
-      top: 0;
-    }
   }
 
   &__send-arrow-icon {
@@ -472,7 +476,7 @@
     position: absolute;
     transform: rotate(45deg);
     left: 178px;
-    top: 71px;
+    top: 65px;
   }
 
   &__title {
@@ -512,7 +516,9 @@
     font-family: Roboto;
     font-size: 16px;
     line-height: 22px;
-    margin-top: 16px;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
   }
 
   &__from-dropdown {
@@ -550,7 +556,7 @@
     }
   }
 
-  &__to-autocomplete {
+  &__to-autocomplete, &__memo-text-area {
     &__input {
       height: 54px;
       width: 240px;
@@ -566,6 +572,32 @@
     }
   }
 
+  &__sliders-icon-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 24px;
+    width: 24px;
+    border: 1px solid $curious-blue;
+    border-radius: 4px;
+    background-color: $white;
+    padding: 5px;
+    position: absolute;
+    right: 15px;
+    top: 14px;
+    cursor: pointer;
+  }
+
+  &__sliders-icon {
+    color: $curious-blue;
+  }
+
+  &__memo-text-area {
+    &__input {
+      padding: 6px 10px;
+    }
+  }
+
   &__footer {
     height: 92px;
     width: 100%;
@@ -573,8 +605,7 @@
     justify-content: space-evenly;
     align-items: center;
     border-top: 1px solid $alto;
-    position: absolute;
-    bottom: 0;
+    margin-top: 29px;
   }
 
   &__next-btn,
@@ -607,4 +638,155 @@
     color: $dusty-gray;
     border-color: $dusty-gray;
   }
+
+  &__customize-gas {
+    border: 1px solid #D8D8D8;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.14);
+    font-family: Roboto;
+    display: flex;
+    flex-flow: column;
+
+    @media screen and (max-width: $break-small) {
+      width: 355px;
+      height: 598px;
+    }
+
+    &__header {
+      height: 52px;
+      border-bottom: 1px solid $alto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 22px;
+    }
+
+    &__title {
+      margin-left: 19.25px;
+    }
+
+    &__close::after {
+      content: '\00D7';
+      font-size: 1.8em;
+      color: $dusty-gray;
+      font-family: sans-serif;
+      cursor: pointer;
+      margin-right: 19.25px;
+    }
+
+    &__body {
+      height: 248px;
+      display: flex;
+
+      @media screen and (max-width: $break-small) {
+        width: 355px;
+        height: 470px;
+        flex-flow: column;
+      }
+    }
+
+    &__footer {
+      height: 75px;
+      border-top: 1px solid $alto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 22px;
+    }
+
+    &__buttons {
+      display: flex;
+      justify-content: space-between;
+      width: 181.75px;
+      margin-right: 21.25px;
+    }
+
+    &__revert, &__cancel, &__save {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+
+    &__revert {
+      color: $silver-chalice;
+      font-size: 16px;
+      margin-left: 21.25px;
+    }
+
+    &__cancel, &__save {
+      height: 34.64px;
+      width: 85.74px;
+      border: 1px solid $dusty-gray;
+      border-radius: 2px;
+      font-family: 'DIN OT';
+      font-size: 12px;
+      color: $dusty-gray;
+    }
+  }
+
+  &__gas-modal-card {
+    width: 360px;
+    display: flex;
+    flex-flow: column;
+    align-items: flex-start;
+    padding-left: 20px;
+
+    &__title {
+      height: 26px;
+      width: 84px;
+      color: $tundora;
+      font-family: Roboto;
+      font-size: 20px;
+      font-weight: 300;
+      line-height: 26px;
+      margin-top: 17px;
+    }
+
+    &__copy {
+      height: 38px;
+      width: 314px;
+      color: $tundora;
+      font-family: Roboto;
+      font-size: 14px;
+      line-height: 19px;
+      margin-top: 17px;
+    }
+
+    .customize-gas-input-wrapper {
+      margin-top: 17px;
+    }
+
+    .customize-gas-input {
+      height: 54px;
+      width: 315px;
+      border: 1px solid $geyser;
+      background-color: $white;
+      padding-left: 15px;
+    }
+
+    .gas-tooltip-input-arrows {
+      width: 32px;
+      height: 54px;
+      border-left: 1px solid #dadada;
+      font-size: 18px;
+      color: $tundora;
+      right: 0px;
+      padding: 1px 4px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+    }
+
+    input[type="number"]::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    input[type="number"]:hover::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+  }
 }