From b2c1daa6c7cd1ba3584eed29352631df62032a1c Mon Sep 17 00:00:00 2001 From: Danny Coates Date: Tue, 5 Dec 2017 14:06:40 -0800 Subject: [PATCH] color promo experiment --- app/experiments.js | 6 +++--- app/routes/index.js | 2 +- app/templates/completed.js | 2 -- app/templates/download.js | 4 +--- app/templates/fxPromo.js | 4 +++- app/templates/preview.js | 2 -- app/templates/welcome.js | 2 -- assets/main.css | 15 +++++++++++++++ 8 files changed, 23 insertions(+), 14 deletions(-) diff --git a/app/experiments.js b/app/experiments.js index 37bce4e5..7fd56ad0 100644 --- a/app/experiments.js +++ b/app/experiments.js @@ -1,10 +1,10 @@ import hash from 'string-hash'; const experiments = { - 'SyI-hI7gT9agiH-f3f0BYg': { - id: 'SyI-hI7gT9agiH-f3f0BYg', + XnN0idVWSxO6A0kiNkxzGw: { + id: 'XnN0idVWSxO6A0kiNkxzGw', run: function(variant, state, emitter) { - state.promo = variant === 1 ? 'body' : 'header'; + state.promo = variant === 1 ? 'blue' : 'grey'; emitter.emit('render'); }, eligible: function() { diff --git a/app/routes/index.js b/app/routes/index.js index 12b33c1d..7cdd83d9 100644 --- a/app/routes/index.js +++ b/app/routes/index.js @@ -10,7 +10,7 @@ const app = choo(); function body(template) { return function(state, emit) { const b = html` - ${state.promo === 'header' ? fxPromo(state, emit) : ''} + ${state.promo ? fxPromo(state, emit) : ''} ${header(state)}
- ${state.promo === 'body' ? fxPromo(state, emit) : ''} `; diff --git a/app/templates/download.js b/app/templates/download.js index 7551eb5f..81be5dda 100644 --- a/app/templates/download.js +++ b/app/templates/download.js @@ -1,9 +1,8 @@ const html = require('choo/html'); const progress = require('./progress'); const { bytes } = require('../utils'); -const fxPromo = require('./fxPromo'); -module.exports = function(state, emit) { +module.exports = function(state) { const transfer = state.transfer; const div = html`
@@ -24,7 +23,6 @@ module.exports = function(state, emit) { )}
- ${state.promo === 'body' ? fxPromo(state, emit) : ''} `; diff --git a/app/templates/fxPromo.js b/app/templates/fxPromo.js index 5098314d..2252cd31 100644 --- a/app/templates/fxPromo.js +++ b/app/templates/fxPromo.js @@ -19,8 +19,10 @@ module.exports = function(state, emit) { emit('exit', evt); } + const classes = state.promo === 'blue' ? 'banner banner-blue' : 'banner'; + return html` - - ${state.promo === 'body' ? fxPromo(state, emit) : ''} ${fileList(state, emit)} `; diff --git a/assets/main.css b/assets/main.css index 20a1a350..4a1d1d3b 100644 --- a/assets/main.css +++ b/assets/main.css @@ -984,6 +984,21 @@ tbody { margin-left: 10px; } +.banner-blue { + background-color: #0098f7; + color: #fff; +} + +.banner-blue a { + color: #fff; + font-weight: bold; +} + +.banner-blue a:hover { + color: #eee; + font-weight: bold; +} + .selectbox { display: inline-block; position: relative;