Merge pull request #744 from mozilla/gradients

Gradient experiment

app/experiments.js

@@ -1,10 +1,19 @@
 import hash from 'string-hash';
 
 const experiments = {
-  XnN0idVWSxO6A0kiNkxzGw: {
-    id: 'XnN0idVWSxO6A0kiNkxzGw',
+  S9wqVl2SQ4ab2yZtqDI3Dw: {
+    id: 'S9wqVl2SQ4ab2yZtqDI3Dw',
     run: function(variant, state, emitter) {
-      state.promo = variant === 1 ? 'blue' : 'grey';
+      switch (variant) {
+        case 1:
+          state.promo = 'blue';
+          break;
+        case 2:
+          state.promo = 'pink';
+          break;
+        default:
+          state.promo = 'grey';
+      }
       emitter.emit('render');
     },
     eligible: function() {
@@ -14,7 +23,11 @@ const experiments = {
       );
     },
     variant: function(state) {
-      return this.luckyNumber(state) > 0.5 ? 1 : 0;
+      const n = this.luckyNumber(state);
+      if (n < 0.33) {
+        return 0;
+      }
+      return n < 0.66 ? 1 : 2;
     },
     luckyNumber: function(state) {
       return luckyNumber(

app/templates/fxPromo.js

@@ -5,8 +5,15 @@ module.exports = function(state, emit) {
   function clicked() {
     emit('experiment', { cd3: 'promo' });
   }
-
-  const classes = state.promo === 'blue' ? 'banner banner-blue' : 'banner';
+  let classes = 'banner';
+  switch (state.promo) {
+    case 'blue':
+      classes = 'banner banner-blue';
+      break;
+    case 'pink':
+      classes = 'banner banner-pink';
+      break;
+  }
 
   return html`
     <div class="${classes}">

assets/main.css

@@ -1039,7 +1039,7 @@ tbody {
 }
 
 .banner-blue {
-  background-color: #0098f7;
+  background: linear-gradient(-180deg, #45a1ff 0%, #00feff 94%);
   color: #fff;
 }
 
@@ -1053,6 +1053,21 @@ tbody {
   font-weight: bold;
 }
 
+.banner-pink {
+  background: linear-gradient(-180deg, #ff9400 0%, #ff1ad9 94%);
+  color: #fff;
+}
+
+.banner-pink a {
+  color: #fff;
+  font-weight: bold;
+}
+
+.banner-pink a:hover {
+  color: #eee;
+  font-weight: bold;
+}
+
 .selectbox {
   display: inline-block;
   position: relative;