Merge pull request #5704 from MetaMask/new-gas-customize-feature-branch-d

Gas customization features

5 files changed, 35 insertions, 51 deletions

diff --git a/ui/app/css/itcss/components/gas-slider.scss b/ui/app/css/itcss/components/gas-slider.scss
index c27a560bd..e69de29bb 100644
--- a/ui/app/css/itcss/components/gas-slider.scss
+++ b/ui/app/css/itcss/components/gas-slider.scss
@@ -1,51 +0,0 @@
-.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/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss
index 233e781ef..b4b77ba1e 100644
--- a/ui/app/css/itcss/components/newui-sections.scss
+++ b/ui/app/css/itcss/components/newui-sections.scss
@@ -216,6 +216,7 @@ $wallet-view-bg: $alabaster;
 
   .main-container-wrapper {
     height: 100%;
+    width: 100%;
   }
 }
 
diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss
index c791a24c7..19e840094 100644
--- a/ui/app/css/itcss/components/send.scss
+++ b/ui/app/css/itcss/components/send.scss
@@ -684,6 +684,7 @@
       display: flex;
       align-items: center;
     }
+
   }
 
   &__sliders-icon-container {
@@ -917,6 +918,15 @@
       display: none;
     }
   }
+
+}
+
+.advanced-gas-options-btn {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 14px;
+  color: #2f9ae0;
+  cursor: pointer;
 }
 
 .sliders-icon-container {
@@ -935,6 +945,23 @@
   font-size: 1em;
 }
 
+.gas-fee-reset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  border-radius: 4px;
+  background-color: #fff;
+  position: absolute;
+  right: 12px;
+  top: 14px;
+  cursor: pointer;
+  font-size: 1em;
+  font-size: 14px;
+  color: #2f9ae0;
+  font-family: Roboto;
+}
+
 .sliders-icon {
   color: $curious-blue;
 }
diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss
index d1c65afed..d8e62c97a 100644
--- a/ui/app/css/itcss/generic/index.scss
+++ b/ui/app/css/itcss/generic/index.scss
@@ -18,6 +18,10 @@ body {
   height: 100%;
   margin: 0;
   padding: 0;
+
+  @media screen and (max-width: $break-small) {
+    overflow-y: overlay;
+  }
 }
 
 html {
diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss
index f90c8edc3..42a8655df 100644
--- a/ui/app/css/itcss/settings/variables.scss
+++ b/ui/app/css/itcss/settings/variables.scss
@@ -56,6 +56,9 @@ $zumthor: #edf7ff;
 $ecstasy: #f7861c;
 $linen: #fdf4f4;
 $oslo-gray: #8C8E94;
+$polar: #fafcfe;
+$blizzard-blue: #bfdef3;
+$mischka: #dddee9;
 
 /*
   Z-Indicies