color promo experiment

This commit is contained in:
Danny Coates 2017-12-05 14:06:40 -08:00
parent da4338ed69
commit b2c1daa6c7
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
8 changed files with 23 additions and 14 deletions

View File

@ -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() {

View File

@ -10,7 +10,7 @@ const app = choo();
function body(template) {
return function(state, emit) {
const b = html`<body>
${state.promo === 'header' ? fxPromo(state, emit) : ''}
${state.promo ? fxPromo(state, emit) : ''}
${header(state)}
<div class="all">
<noscript>

View File

@ -1,7 +1,6 @@
const html = require('choo/html');
const progress = require('./progress');
const { fadeOut } = require('../utils');
const fxPromo = require('./fxPromo');
module.exports = function(state, emit) {
const div = html`
@ -21,7 +20,6 @@ module.exports = function(state, emit) {
sendNew
}>${state.translate('sendYourFilesLink')}</a>
</div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div>
`;

View File

@ -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`
<div id="page-one">
@ -24,7 +23,6 @@ module.exports = function(state, emit) {
)}</div>
</div>
</div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div>
`;

View File

@ -19,8 +19,10 @@ module.exports = function(state, emit) {
emit('exit', evt);
}
const classes = state.promo === 'blue' ? 'banner banner-blue' : 'banner';
return html`
<div class="banner">
<div class="${classes}">
<div>
<img
src="${assets.get('firefox_logo-only.svg')}"

View File

@ -3,7 +3,6 @@ const assets = require('../../common/assets');
const notFound = require('./notFound');
const downloadPassword = require('./downloadPassword');
const { bytes } = require('../utils');
const fxPromo = require('./fxPromo');
function getFileFromDOM() {
const el = document.getElementById('dl-file');
@ -62,7 +61,6 @@ module.exports = function(state, emit) {
</div>
<a class="send-new" href="/">${state.translate('sendYourFilesLink')}</a>
</div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
</div>
`;

View File

@ -1,7 +1,6 @@
const html = require('choo/html');
const assets = require('../../common/assets');
const fileList = require('./fileList');
const fxPromo = require('./fxPromo');
const { fadeOut } = require('../utils');
module.exports = function(state, emit) {
@ -36,7 +35,6 @@ module.exports = function(state, emit) {
title="${state.translate('uploadPageBrowseButton1')}">
${state.translate('uploadPageBrowseButton1')}</label>
</div>
${state.promo === 'body' ? fxPromo(state, emit) : ''}
${fileList(state, emit)}
</div>
`;

View File

@ -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;