From d073a956700b2c35141a790f5a20fa1bf9b20797 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 6 Dec 2017 16:12:59 -0800
Subject: [PATCH] Reintroduce gradient and corresponding transition

---
 ui/src/shared/components/OptIn.js   |  4 ++-
 ui/src/style/components/opt-in.scss | 49 ++++++++++-------------------
 2 files changed, 20 insertions(+), 33 deletions(-)

diff --git a/ui/src/shared/components/OptIn.js b/ui/src/shared/components/OptIn.js
index c69b6ddfdd..aa46aaed7e 100644
--- a/ui/src/shared/components/OptIn.js
+++ b/ui/src/shared/components/OptIn.js
@@ -130,7 +130,9 @@ class OptIn extends Component {
             id={this.id}
             ref={el => (this.grooveKnob = el)}
             onClick={this.handleClickToggle}
-          />
+          >
+            <div className="opt-in--gradient" />
+          </div>
           <div className="opt-in--label" onClick={this.useFixedValue}>
             {fixedPlaceholder}
           </div>
diff --git a/ui/src/style/components/opt-in.scss b/ui/src/style/components/opt-in.scss
index b7b63c194d..056f57f14c 100644
--- a/ui/src/style/components/opt-in.scss
+++ b/ui/src/style/components/opt-in.scss
@@ -22,6 +22,7 @@
   -ms-user-select: none !important;
   -o-user-select: none !important;
   color: $c-pool;
+  background-color: $g2-kevlar;
   font-family: $code-font;
   padding-right: 11px;
   line-height: 24px;
@@ -36,6 +37,7 @@
 .opt-in--groove-knob {
   width: 48px;
   position: relative;
+  background-color: $g2-kevlar;
 
   &:hover {
     cursor: pointer;
@@ -68,38 +70,20 @@
     transition: background-color 0.25s ease, transform 0.25s ease;
     transform: translate(0%, -50%);
   }
+  // Gradient
+  .opt-in--gradient {
+    z-index: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    @include gradient-h($g2-kevlar,$g3-castle);
+    transition: opacity 0.25s ease;
+    opacity: 0;
+  }
 }
 
-  // // Background Gradients
-  // &:before,
-  // &:after {
-  //   content: '';
-  //   display: block;
-  //   position: absolute;
-  //   left: 0;
-  //   width: 100%;
-  //   height: 100%;
-  //   transition: opacity 0.25s ease;
-  // }
-  // // Left
-  // &:before {
-  //   background-color: $g2-kevlar;
-  //   z-index: 2;
-  //   opacity: 1;
-  // }
-  // // Right
-  // &:after {
-  //   @include gradient-h($g2-kevlar,$g3-castle);
-  //   z-index: 1;
-  // }
-  //
-  // &:hover {
-  //   cursor: pointer;
-  //   > div:after {
-  //     background-color: $c-laser;
-  //   }
-  // }
-
 // Customize form input
 .opt-in > input.form-control {
   border-radius: 4px 0 0 4px;
@@ -112,11 +96,12 @@
     transform: translate(-100%, -50%);
   }
   // Fade out left, fade in right
-  .opt-in--groove-knob-container:before {
-    opacity: 0;
+  .opt-in--gradient {
+    opacity: 1;
   }
   // Make left label look disabled
   .opt-in--label {
+    background-color: $g3-castle;
     color: $g8-storm;
     font-style: italic;