restyle tracker

diff --git a/src/features/shared/components/GasField/GasField.jsx b/src/features/shared/components/GasField/GasField.jsx
index 5a7d6fd..4037aaa 100644 (file)
--- a/src/features/shared/components/GasField/GasField.jsx
+++ b/src/features/shared/components/GasField/GasField.jsx
@@ -23,8 +23,8 @@ class GasField extends React.Component {
 
     return(
       <div className={`form-group ${styles.slider}`}>
-        {this.props.gas && <span>{normalizeBTMAmountUnit(btmID, fieldProps.value* this.props.gas, this.props.btmAmountUnit)}</span>}
-        <input className={fieldProps.value>0&&styles[`gradient-${fieldProps.value}`]}
+        <span>{normalizeBTMAmountUnit(btmID, fieldProps.value* this.props.gas, this.props.btmAmountUnit)}</span>
+        <input
                type='range'
                min={0}
                max={3}

diff --git a/src/features/shared/components/GasField/GasField.scss b/src/features/shared/components/GasField/GasField.scss
index b8d0961..94a5430 100644 (file)
--- a/src/features/shared/components/GasField/GasField.scss
+++ b/src/features/shared/components/GasField/GasField.scss
@@ -1,13 +1,3 @@
 .slider{
   width: 340px;
 }
-
-@for $i from 1 through 3 {
-  .gradient-#{$i}::-webkit-slider-runnable-track{
-    background:linear-gradient(to right, $highlight-default 0%, $highlight-default ($i/3)*100% ,#eee ($i/3)*100% , #eee) !important;
-  }
-
-  .gradient-#{$i}::-moz-range-track{
-    background:linear-gradient(to right, $highlight-default 0%, $highlight-default ($i/3)*100% ,#eee ($i/3)*100%, #eee) !important;
-  }
-}
\ No newline at end of file

diff --git a/static/styles/_body.scss b/static/styles/_body.scss
index 9fac1fb..c4dda87 100644 (file)
--- a/static/styles/_body.scss
+++ b/static/styles/_body.scss
@@ -238,11 +238,11 @@ input[type=range]::-webkit-slider-runnable-track {
   height: 7px;
   cursor: pointer;
   animate: 0.2s;
-  background: $background-content-color;
+  background: #e4e4e4;
 }
 input[type=range]::-webkit-slider-thumb {
-  height: 20px;
-  width: 20px;
+  height: 18px;
+  width: 18px;
   border-radius: 15px;
   background: $highlight-default;
   cursor: pointer;
@@ -250,7 +250,7 @@ input[type=range]::-webkit-slider-thumb {
   margin-top: -6px;
 }
 input[type=range]:focus::-webkit-slider-runnable-track {
-  background: $background-content-color;
+  background: #e4e4e4;
 }
 
 //Firefox
@@ -258,12 +258,12 @@ input[type=range]::-moz-range-track {
   height: 7px;
   cursor: pointer;
   animate: 0.2s;
-  background: $background-content-color;
+  background: #e4e4e4;
 }
 input[type=range]::-moz-range-thumb {
   border: none;
-  height: 20px;
-  width: 20px;
+  height: 18px;
+  width: 18px;
   border-radius: 15px;
   background: $highlight-default;
   cursor: pointer;
@@ -279,17 +279,17 @@ input[type=range]::-ms-track {
   color: transparent;
 }
 input[type=range]::-ms-fill-lower {
-  background: $highlight-default;
+  background: #e4e4e4;
   border-radius: 2px;
 }
 input[type=range]::-ms-fill-upper {
-  background: $background-content-color;
+  background: #e4e4e4;
   border-radius: 2px;
 }
 input[type=range]::-ms-thumb {
   margin-top: 1px;
-  height: 20px;
-  width: 20px;
+  height: 18px;
+  width: 18px;
   border-radius: 15px;
   background: $highlight-default;
   cursor: pointer;
@@ -298,5 +298,5 @@ input[type=range]:focus::-ms-fill-lower {
   background: $highlight-default;
 }
 input[type=range]:focus::-ms-fill-upper {
-  background: $background-content-color;
+  background: #e4e4e4;
 }