24
1
Fork 0

update ui

This commit is contained in:
Mark Liang 2018-11-02 17:27:59 +08:00
parent 5ebe869c26
commit cacb3a898d
21 changed files with 298 additions and 212 deletions

View File

@ -32,18 +32,42 @@ progress::-webkit-progress-value {
}
.main {
min-height: calc(100vh - 6rem);
display: flex;
max-width: 1024px;
width: 100%;
}
.main > section {
@apply bg-white;
@apply shadow;
}
.header-logo {
background-image: url('../assets/send_logo.svg');
background-position: left;
background-repeat: no-repeat;
background-size: 2rem;
padding-left: 2.5rem;
background-size: 1.8rem;
padding-left: 2.4rem;
text-decoration: none;
}
.header-logo h1 {
font-size: 1.5rem;
}
.mozilla-logo {
background-image: url('../assets/mozilla-logo.svg');
background-repeat: no-repeat;
background-size: 100px, 32px;
overflow: hidden;
text-indent: 120%;
white-space: nowrap;
display: inline-block;
height: 32px;
width: 100px;
flex-shrink: 0;
}
.feedback-link {
background-color: #000;
background-image: url('../assets/feedback.svg');
@ -59,6 +83,14 @@ progress::-webkit-progress-value {
white-space: nowrap;
}
.bg-shades {
background-color: rgba(255, 255, 255, 0.8);
}
.border-modal {
box-shadow: 0 0 5rem 5rem white;
}
.checkbox {
@apply leading-normal;
@apply select-none;
@ -116,15 +148,23 @@ progress::-webkit-progress-value {
content: '\200b';
}
.max-h-half {
max-height: 50vh;
}
@screen md {
.main {
@apply flex-1;
@apply self-center;
@apply bg-white;
@apply shadow-md;
@apply m-auto;
@apply items-center;
@apply my-10;
width: calc(100% - 48px);
min-height: 30rem;
max-height: 40rem;
}
.main > section {
@apply shadow-md;
}
}

View File

@ -16,7 +16,7 @@ function banner(state, emit) {
function body(main) {
return function(state, emit) {
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest">
const b = html`<body class="flex flex-col items-center font-sans bg-blue-lightest md:h-screen md:bg-grey-lightest justify-between">
${banner(state, emit)}
${header(state, emit)}
${main(state, emit)}

View File

@ -1,6 +1,6 @@
const html = require('choo/html');
const itemClass =
'block p-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
'block px-4 py-2 text-grey-darkest hover:bg-blue hover:text-white cursor-pointer';
module.exports = function(state, emit) {
if (!state.capabilities.account) {
@ -22,7 +22,7 @@ module.exports = function(state, emit) {
)}</a></li>`
);
}
return html`<div class="relative">
return html`<div class="relative h-8">
<input
type="image"
alt="${user.email}"

View File

@ -21,7 +21,7 @@ function password(state) {
return html`
<div class="my-2">
<div class="checkbox">
<div class="checkbox inline-block mr-3">
<input
id="add-password"
type="checkbox"
@ -36,7 +36,7 @@ function password(state) {
id="password-input"
class="${
state.password ? '' : 'invisible'
} border rounded-sm focus:border-blue leading-normal mt-2"
} border rounded-sm focus:border-blue leading-normal mt-2 py-1 px-2 h-8"
autocomplete="off"
maxlength="${MAX_LENGTH}"
type="password"
@ -93,11 +93,13 @@ function password(state) {
function fileInfo(file, action) {
return html`
<article class="flex flex-row items-start p-3">
<article class="flex flex-row items-center p-3">
<img class="" src="${assets.get('blue_file.svg')}"/>
<p class="ml-3 w-full">
<h1 class="text-base font-semibold">${file.name}</h1>
<div class="text-sm font-light">${bytes(file.size)}</div>
<p class="ml-4 w-full">
<h1 class="text-sm font-medium">${file.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
file.size
)}</div>
<div class="hidden">${file.type}</div>
</p>
${action}
@ -129,7 +131,7 @@ module.exports = function(state, emit, archive) {
return html`
<article
id="${archive.id}"
class="flex flex-col items-start border border-grey-light bg-white p-3">
class="flex flex-col items-start border border-grey-light bg-white p-4">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<input
@ -138,18 +140,20 @@ module.exports = function(state, emit, archive) {
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, archive)}
</div>
${archiveDetails(state.translate, archive)}
<hr class="w-full border-t">
<hr class="w-full border-t my-4">
<button
class="text-blue self-end"
class="text-blue self-end font-medium flex items-center"
onclick=${copy}>
<img src="${assets.get('copy-16.svg')}" class="mr-1"/>
<img src="${assets.get('copy-16.svg')}" class="mr-2"/>
${state.translate('copyUrlHover')}
</button>
</article>`;
@ -173,12 +177,13 @@ module.exports = function(state, emit, archive) {
module.exports.wip = function(state, emit) {
return html`
<article class="h-full flex flex-col bg-white border border-grey-light p-2 z-20">
<article class="h-full flex flex-col bg-white z-20">
${list(
state.archive.files.map(f => fileInfo(f, remove(f))),
'list-reset h-full overflow-y-scroll'
'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest max-h-half',
'bg-white px-2 mb-3 border border-grey-light rounded'
)}
<div class="flex-grow border border-dashed border-blue-light mb-2">
<div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
<input
id="file-upload"
class="hidden"
@ -187,9 +192,9 @@ module.exports.wip = function(state, emit) {
onchange=${add} />
<label
for="file-upload"
class="flex flex-row items-center w-full h-full text-blue p-2"
class="flex flex-row items-center w-full h-full p-2 cursor-pointer"
title="${state.translate('addFilesButton')}">
<img src="${assets.get('addfile.svg')}" class="w-6 h-6 mr-2"/>
<img src="${assets.get('addfiles.svg')}" class="w-6 h-6 mr-2"/>
${state.translate('addFilesButton')}
</label>
</div>
@ -197,10 +202,10 @@ module.exports.wip = function(state, emit) {
${password(state, emit)}
<button
id="upload-btn"
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
title="${state.translate('uploadFilesButton')}"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('uploadSuccessConfirmHeader')}"
onclick=${upload}>
${state.translate('uploadFilesButton')}
${state.translate('uploadSuccessConfirmHeader')}
</button>
</article>`;
@ -227,7 +232,7 @@ module.exports.wip = function(state, emit) {
return html`
<input
type="image"
class="self-center text-white"
class="self-center text-white ml-4"
alt="Delete"
src="${assets.get('close-16.svg')}"
onclick=${del}/>`;
@ -245,11 +250,13 @@ module.exports.uploading = function(state, emit) {
return html`
<article
id="${archive.id}"
class="z-20 flex flex-col items-start border border-grey-light bg-white p-3">
class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
<p class="w-full">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-xs text-grey-dark w-full mt-2 mb-2">
${expiryInfo(state.translate, {
@ -258,10 +265,10 @@ module.exports.uploading = function(state, emit) {
expiresAt: Date.now() + 500 + state.timeLimit * 1000
})}
</div>
<div class="text-blue text-sm font-medium">${progressPercent}</div>
<progress class="mb-1" value="${progress}">${progressPercent}</progress>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="text-blue self-end"
class="text-blue self-end font-medium"
onclick=${cancel}>
${state.translate('uploadingPageCancel')}
</button>
@ -276,8 +283,14 @@ module.exports.uploading = function(state, emit) {
module.exports.empty = function(state, emit) {
return html`
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light p-16 h-full">
<div class="p-1">${state.translate('uploadDropDragMessage')}</div>
<article class="flex flex-col items-center justify-center border border-dashed border-blue-light px-6 py-16 h-full">
<img src="${assets.get('addfiles.svg')}" width="48" height="48"/>
<div class="pt-6 pb-2 text-center text-lg font-bold uppercase tracking-wide">${state.translate(
'uploadDropDragMessage'
)}</div>
<div class="pb-6 text-center text-base italic">${state.translate(
'uploadDropClickMessage'
)}</div>
<input
id="file-upload"
class="hidden"
@ -286,7 +299,7 @@ module.exports.empty = function(state, emit) {
onchange=${add} />
<label
for="file-upload"
class="border rounded bg-blue text-white py-2 px-6"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 mt-4 flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('addFilesButton')}">
${state.translate('addFilesButton')}
</label>
@ -306,17 +319,18 @@ module.exports.preview = function(state, emit) {
archive.open = true;
}
return html`
<article class="flex flex-col max-h-full bg-white border border-grey-light p-2 z-20">
<p class="flex-none w-full mb-4">
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
${archiveDetails(state.translate, archive)}
<hr class="w-full border-t">
<button
id="download-btn"
class="flex-none border rounded bg-blue text-white mt-2 py-2 px-6"
class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white mt-4 py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('downloadButtonLabel')}"
onclick=${download}>
${state.translate('downloadButtonLabel')}
@ -335,16 +349,18 @@ module.exports.downloading = function(state, emit) {
const progress = state.transfer.progressRatio;
const progressPercent = percent(progress);
return html`
<article class="flex flex-col bg-white border border-grey-light p-2 z-20">
<article class="flex flex-col bg-white border border-grey-light p-4 z-20">
<p class="w-full mb-4">
<img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
<h1 class="text-base font-semibold">${archive.name}</h1>
<div class="text-sm font-light">${bytes(archive.size)}</div>
<h1 class="text-sm font-medium">${archive.name}</h1>
<div class="text-xs font-normal opacity-75 pt-1">${bytes(
archive.size
)}</div>
</p>
<div class="text-blue text-sm font-medium">${progressPercent}</div>
<progress class="" value="${progress}">${progressPercent}</progress>
<div class="text-blue text-sm font-medium mt-2">${progressPercent}</div>
<progress class="my-3" value="${progress}">${progressPercent}</progress>
<button
class="border rounded bg-grey-dark text-white mt-2 py-2 px-6"
class="border rounded bg-grey-dark text-white mt-2 text-center py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold"
title="${state.translate('downloadCancel')}"
onclick=${cancel}>
${state.translate('downloadCancel')}

View File

@ -4,17 +4,17 @@ const { copyToClipboard } = require('../utils');
module.exports = function(name, url) {
return function(state, emit, close) {
return html`
<div class="flex flex-col items-center text-center p-4 max-w-md">
<h1 class="font-normal my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-light text-grey-darker">${state.translate(
<div class="flex flex-col items-center text-center p-4 max-w-sm">
<h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
<p class="font-normal leading-normal text-grey-darker">${state.translate(
'copyUrlFormLabelWithName',
{ filename: name }
)}</p>
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose" value=${url} readonly="true"/>
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${copy}>
<input type="text" id="share-url" class="w-full my-4 border rounded leading-loose h-12 px-2 py-1" value=${url} readonly="true"/>
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${copy}>
${state.translate('copyUrlFormButton')}
</button>
<a class="text-blue my-2 cursor-pointer" onclick=${close}>${state.translate(
<a class="text-blue my-4 font-medium cursor-pointer" onclick=${close}>${state.translate(
'okButton'
)}</a>
</div>`;

View File

@ -11,7 +11,7 @@ function password(state, emit) {
<div class="h-full flex flex-col items-center justify-center border border-grey-light bg-white py-8">
<label
id="password-error"
class="${invalid ? '' : 'invisible'} text-red"
class="${invalid ? '' : 'invisible'} text-red my-4"
for="password-input">
${state.translate('passwordTryAgain')}
</label>
@ -20,7 +20,7 @@ function password(state, emit) {
<input id="password-input"
class="w-full border rounded ${
invalid ? 'border-red' : 'border-grey'
} leading-loose"
} leading-loose px-2 py-1"
maxlength="32"
autocomplete="off"
placeholder="${state.translate('unlockInputPlaceholder')}"
@ -88,9 +88,11 @@ module.exports = function(state, emit) {
case 'complete':
content = html`
<div id="download-complete" class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
<h1 class="text-center">${state.translate('downloadFinish')}</h1>
<p class="">
<a href="/" class="text-blue">${state.translate(
<h1 class="text-center font-bold my-4 text-2xl">${state.translate(
'downloadFinish'
)}</h1>
<p class="mb-4">
<a href="/" class="text-blue font-medium">${state.translate(
'sendYourFilesLink'
)}</a>
</p>
@ -104,9 +106,9 @@ module.exports = function(state, emit) {
}
return html`
<main class="main container">
<section class="relative h-full w-full px-6 md:flex md:flex-row">
<div class="py-4 md:mr-6 md:w-1/2">${content}</div>
<div class="py-4 md:w-1/2">${intro(state)}</div>
<section class="relative h-full w-full p-6 md:flex md:flex-row">
<div class="md:mr-6 md:w-1/2 overflow-y-scroll">${content}</div>
<div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
</section>
</main>`;
};

View File

@ -4,15 +4,15 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('errorPageHeader')}</h1>
<img class="my-8" src="${assets.get('illustration_error.svg')}"/>
<p class="">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue mt-4" href="/">
${state.translate('sendYourFilesLink')}
</a>
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('errorPageHeader')}</h1>
<img class="my-16" src="${assets.get('illustration_error.svg')}"/>
<p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue my-10 font-medium" href="/">
${state.translate('sendYourFilesLink')}
</a>
</div>
</main>`;
};

View File

@ -5,7 +5,11 @@ const { browserName } = require('../utils');
module.exports = function(state) {
const browser = browserName();
const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
const footer = html`<footer class="w-full flex-none self-start p-2 bg-white font-medium text-xs text-grey-dark">
const footer = html`<footer class="flex flex-col md:flex-row items-start w-full flex-none self-start p-6 font-medium text-xs text-grey-dark md:items-center justify-between bg-grey-lightest">
<a class="mozilla-logo pb-10 md:pb-0 m-2"
href="https://www.mozilla.org/">
Mozilla
</a>
<ul class="list-reset flex flex-col md:flex-row items-start md:items-center md:justify-end">
<li class="m-2"><a
href="https://www.mozilla.org/about/legal">

View File

@ -3,7 +3,7 @@ const account = require('./account');
module.exports = function(state, emit) {
const header = html`
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-4 h-12 md:shadow-md">
<header class="relative flex-none flex flex-row items-center justify-between bg-white w-full px-6 h-16 shadow z-20">
<a
class="header-logo"
href="/">

View File

@ -20,14 +20,14 @@ module.exports = function(state, emit) {
const right =
archives.length < 1
? intro(state)
: list(archives, 'list-reset h-full overflow-y-scroll', 'pb-4');
: list(archives, 'list-reset h-full overflow-y-scroll', 'mb-3');
return html`
<main class="main container md:relative">
<main class="main md:relative">
${state.modal && modal(state, emit)}
<section class="h-full w-full px-6 md:flex md:flex-row">
<div class="pt-4 md:pb-4 md:mr-6 md:w-1/2">${left}</div>
<div class="py-4 md:w-1/2">${right}</div>
<section class="h-full w-full p-6 md:flex md:flex-row z-10">
<div class="md:mr-6 md:w-1/2">${left}</div>
<div class="md:w-1/2 overflow-y-scroll mt-6 md:mt-0">${right}</div>
</section>
</main>`;
};

View File

@ -3,13 +3,17 @@ const assets = require('../../common/assets');
module.exports = function intro(state) {
return html`
<article class="flex flex-col items-center justify-center h-full bg-white border border-grey-light p-2">
<article class="flex flex-col items-center justify-between bg-white border border-grey-light md:border-none px-6 md:py-10 py-6 md:mb-0 mb-6">
<p class="text-center">
<div class="font-semibold">${state.translate('uploadPageHeader')}</div>
<div class="italic">${state.translate('pageHeaderCredits')}</div>
<div class="font-semibold leading-normal">${state.translate(
'uploadPageHeader'
)}</div>
<div class="italic text-sm opacity-75 leading-normal">${state.translate(
'pageHeaderCredits'
)}</div>
</p>
<img src="${assets.get('illustration_download.svg')}"/>
<p class="m-4 max-w-sm text-sm font-light">${state.translate(
<img class="my-6" src="${assets.get('illustration_download.svg')}"/>
<p class="md:mx-6 max-w-sm text-sm opacity-50 leading-normal">${state.translate(
'uploadPageExplainer'
)}</p>
</article>`;

View File

@ -4,8 +4,8 @@ const raw = require('choo/html/raw');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="">${state.translate('legalHeader')}</h1>
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-2xl">${state.translate('legalHeader')}</h1>
${raw(
replaceLinks(state.translate('legalNoticeTestPilot'), [
'https://testpilot.firefox.com/terms',
@ -29,5 +29,5 @@ function replaceLinks(str, urls) {
/<a>([^<]+)<\/a>/g,
(m, v) => `<a class="text-blue" href="${urls[i++]}">${v}</a>`
);
return `<p class="m-4">${s}</p>`;
return `<p class="mt-10 max-w-md leading-normal">${s}</p>`;
}

View File

@ -2,9 +2,11 @@ const html = require('choo/html');
module.exports = function(state, emit) {
return html`
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
<div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
<div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
<div class="h-full max-h-screen absolute pin-t flex items-center">
<div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
${state.modal(state, emit, close)}
</div>
</div>
</div>`;

View File

@ -4,13 +4,17 @@ const assets = require('../../common/assets');
module.exports = function(state) {
return html`
<main class="main container">
<div class="flex flex-col items-center text-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-pink-dark">${state.translate('expiredPageHeader')}</h1>
<img src="${assets.get('illustration_expired.svg')}" id="expired-img">
<p class="">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-pink-dark text-2xl">${state.translate(
'expiredPageHeader'
)}</h1>
<img class="my-16" src="${assets.get(
'illustration_expired.svg'
)}" id="expired-img">
<p class="max-w-md leading-normal">
${state.translate('uploadPageExplainer')}
</p>
<a class="text-blue mt-4" href="/">
<a class="text-blue my-10 font-medium" href="/">
${state.translate('sendYourFilesLink')}
</a>
</div>

View File

@ -4,8 +4,8 @@ module.exports = function(message) {
return function(state, emit, close) {
return html`
<div class="flex flex-col max-w-xs p-4">
<div class="text-center m-8">${message}</div>
<button class="border rounded bg-blue text-white leading-loose w-full" onclick=${close}>${state.translate(
<div class="text-center m-8 leading-normal">${message}</div>
<button class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" onclick=${close}>${state.translate(
'okButton'
)}</button>
</div>`;

View File

@ -4,7 +4,7 @@ module.exports = function(selected, options, translate, changed) {
let x = selected;
return html`
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue p-1" onchange=${choose}>
<select class="appearance-none cursor-pointer border rounded-sm bg-blue-lightest hover:border-blue focus:border-blue px-2 py-1 mx-1 h-8" onchange=${choose}>
${options.map(
i =>
html`<option value="${i}" ${

View File

@ -8,7 +8,7 @@ module.exports = function() {
<div class="flex flex-col p-4">
<p class="p-8">
${state.translate('accountBenefitTitle')}
<ul class="my-2">
<ul class="my-2 leading-normal">
<li>${state.translate('accountBenefitLargeFiles', {
size: bytes(LIMITS.MAX_FILE_SIZE)
})}</li>
@ -22,18 +22,18 @@ module.exports = function() {
<input
id="email-input"
type="text"
class="border rounded w-full px-2 text-lg text-grey-darker leading-loose"
class="border rounded w-full px-2 py-1 h-12 mb-4 text-lg text-grey-darker leading-loose"
placeholder=${state.translate('emailEntryPlaceholder')}/>
<input
class="hidden"
id="email-submit"
type="submit"/>
</form>
<label class="border rounded bg-blue text-white leading-loose text-center my-2" for="email-submit">
<label class="rounded bg-blue hover\:bg-blue-dark focus\:bg-blue-darker cursor-pointer text-center text-white py-2 px-6 h-12 w-full flex flex-no-shrink items-center justify-center font-semibold" for="email-submit">
${state.translate('signInMenuOption')}
</label>
<button
class=""
class="my-4 text-blue font-medium"
title="${state.translate('deletePopupCancel')}"
onclick=${close}>${state.translate('deletePopupCancel')}
</button>

View File

@ -17,30 +17,30 @@ module.exports = function(state) {
url =
'https://www.mozilla.org/firefox/new/?utm_campaign=send-acquisition&utm_medium=referral&utm_source=send.firefox.com';
buttonAction = html`
<p class="ml-3 font-bold">
Firefox<br><span class="font-light">${strings.button}</span>
<p class="ml-4 font-bold">
Firefox<br><span class="font-light text-base">${strings.button}</span>
</p>`;
} else {
strings = outdatedStrings(state);
url = 'https://support.mozilla.org/kb/update-firefox-latest-version';
buttonAction = html`
<p class="ml-3">
<p class="ml-4">
${strings.button}
</p>`;
}
return html`
<main class="main container">
<div class="flex flex-col items-center bg-white m-6 p-4 border border-grey-light md:border-none md:px-12">
<h1 class="text-center">${strings.header}</h1>
<p class="my-16">
<div class="flex flex-col items-center bg-white m-6 p-6 border border-grey-light md:border-none md:px-12 md:py-16 shadow w-full md:h-full">
<h1 class="text-center text-2xl">${strings.header}</h1>
<p class="my-10 max-w-md leading-normal">
${strings.description}
</p>
${why}
<a href="${url}" class="border border-green-light rounded bg-green flex items-center justify-center text-2xl text-white my-16 p-2">
<a href="${url}" class="border border-green-light rounded bg-green hover\:bg-green-dark focus\:bg-green-darker flex items-center justify-center text-2xl text-white my-10 py-4 px-6">
<img
src="${assets.get('firefox_logo-only.svg')}"
class="w-16"
class="w-10"
alt="Firefox"/>
${buttonAction}
</a>

9
assets/addfiles.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<polygon id="addfiles-a" points="11.143 6 11.143 11.143 6 11.143 6 12.857 11.143 12.857 11.143 18 12.857 18 12.857 12.857 18 12.857 18 11.143 12.857 11.143 12.857 6"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path fill="#4285F4" fill-rule="nonzero" d="M12,22.6666667 C17.8910373,22.6666667 22.6666667,17.8910373 22.6666667,12 C22.6666667,6.10896267 17.8910373,1.33333333 12,1.33333333 C6.10896267,1.33333333 1.33333333,6.10896267 1.33333333,12 C1.33333333,17.8910373 6.10896267,22.6666667 12,22.6666667 Z M12,24 C5.372583,24 0,18.627417 0,12 C0,5.372583 5.372583,0 12,0 C18.627417,0 24,5.372583 24,12 C24,18.627417 18.627417,24 12,24 Z"/>
<use fill="#4285F4" xlink:href="#addfiles-a"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 856 B

189
package-lock.json generated
View File

@ -1269,7 +1269,7 @@
},
"JSONStream": {
"version": "0.8.4",
"resolved": "http://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
"resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-0.8.4.tgz",
"integrity": "sha1-kWV9/m/4V0gwZhMrRhi2Lo9Ih70=",
"dev": true,
"requires": {
@ -1595,7 +1595,7 @@
},
"util": {
"version": "0.10.3",
"resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
"integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
"dev": true,
"requires": {
@ -2404,7 +2404,7 @@
},
"camelcase-keys": {
"version": "2.1.0",
"resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
"integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
"dev": true,
"requires": {
@ -2593,7 +2593,7 @@
},
"cldr-core": {
"version": "33.0.0",
"resolved": "http://registry.npmjs.org/cldr-core/-/cldr-core-33.0.0.tgz",
"resolved": "https://registry.npmjs.org/cldr-core/-/cldr-core-33.0.0.tgz",
"integrity": "sha1-IA8y58Cd162+FrDPbuj3XiyksZQ="
},
"clean-css": {
@ -2643,7 +2643,7 @@
},
"slice-ansi": {
"version": "0.0.4",
"resolved": "http://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
"resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-0.0.4.tgz",
"integrity": "sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=",
"dev": true
},
@ -3838,7 +3838,7 @@
},
"d": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/d/-/d-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
"integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
"dev": true,
"requires": {
@ -4355,7 +4355,7 @@
"dependencies": {
"domelementtype": {
"version": "1.1.3",
"resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
"integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
"dev": true
}
@ -4374,7 +4374,7 @@
},
"domelementtype": {
"version": "1.3.0",
"resolved": "http://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
"integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
"dev": true
},
@ -4634,7 +4634,7 @@
},
"es6-promisify": {
"version": "5.0.0",
"resolved": "http://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
"resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
"integrity": "sha1-UQnWLz5W6pZ8S2NQWu8IKRyKUgM=",
"requires": {
"es6-promise": "^4.0.3"
@ -5731,7 +5731,7 @@
},
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@ -5904,27 +5904,27 @@
"dependencies": {
"abbrev": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
"resolved": false,
"integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
"dev": true,
"optional": true
},
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"resolved": false,
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"aproba": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
"resolved": false,
"integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
"dev": true,
"optional": true
},
"are-we-there-yet": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
"resolved": false,
"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
"dev": true,
"optional": true,
@ -5935,13 +5935,13 @@
},
"balanced-match": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=",
"dev": true
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
"resolved": false,
"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
"dev": true,
"requires": {
@ -5951,39 +5951,39 @@
},
"chownr": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
"resolved": false,
"integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE=",
"dev": true,
"optional": true
},
"code-point-at": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"resolved": false,
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
"dev": true
},
"concat-map": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"resolved": false,
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
"dev": true
},
"console-control-strings": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"resolved": false,
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
"dev": true
},
"core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true,
"optional": true
},
"debug": {
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"resolved": false,
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"optional": true,
@ -5993,28 +5993,28 @@
},
"deep-extend": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.5.1.tgz",
"resolved": false,
"integrity": "sha512-N8vBdOa+DF7zkRrDCsaOXoCs/E2fJfx9B9MrKnnSiHNh4ws7eSys6YQE4KvT1cecKmOASYQBhbKjeuDD9lT81w==",
"dev": true,
"optional": true
},
"delegates": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"dev": true,
"optional": true
},
"detect-libc": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
"resolved": false,
"integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
"dev": true,
"optional": true
},
"fs-minipass": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
"resolved": false,
"integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
"dev": true,
"optional": true,
@ -6024,14 +6024,14 @@
},
"fs.realpath": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
"dev": true,
"optional": true
},
"gauge": {
"version": "2.7.4",
"resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"resolved": false,
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"dev": true,
"optional": true,
@ -6048,7 +6048,7 @@
},
"glob": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"resolved": false,
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"dev": true,
"optional": true,
@ -6063,14 +6063,14 @@
},
"has-unicode": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"resolved": false,
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"dev": true,
"optional": true
},
"iconv-lite": {
"version": "0.4.21",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.21.tgz",
"resolved": false,
"integrity": "sha512-En5V9za5mBt2oUA03WGD3TwDv0MKAruqsuxstbMUZaj9W9k/m1CV/9py3l0L5kw9Bln8fdHQmzHSYtvpvTLpKw==",
"dev": true,
"optional": true,
@ -6080,7 +6080,7 @@
},
"ignore-walk": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
"resolved": false,
"integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
"dev": true,
"optional": true,
@ -6090,7 +6090,7 @@
},
"inflight": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"resolved": false,
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"dev": true,
"optional": true,
@ -6101,20 +6101,20 @@
},
"inherits": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"resolved": false,
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
"dev": true
},
"ini": {
"version": "1.3.5",
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"resolved": false,
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
"dev": true,
"optional": true
},
"is-fullwidth-code-point": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"dev": true,
"requires": {
@ -6123,14 +6123,14 @@
},
"isarray": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"resolved": false,
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true,
"optional": true
},
"minimatch": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"resolved": false,
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"dev": true,
"requires": {
@ -6139,13 +6139,13 @@
},
"minimist": {
"version": "0.0.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"resolved": false,
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
"dev": true
},
"minipass": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/minipass/-/minipass-2.2.4.tgz",
"resolved": false,
"integrity": "sha512-hzXIWWet/BzWhYs2b+u7dRHlruXhwdgvlTMDKC6Cb1U7ps6Ac6yQlR39xsbjWJE377YTCtKwIXIpJ5oP+j5y8g==",
"dev": true,
"requires": {
@ -6155,7 +6155,7 @@
},
"minizlib": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
"resolved": false,
"integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
"dev": true,
"optional": true,
@ -6165,7 +6165,7 @@
},
"mkdirp": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"resolved": false,
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"dev": true,
"requires": {
@ -6174,14 +6174,14 @@
},
"ms": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"resolved": false,
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"dev": true,
"optional": true
},
"needle": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
"resolved": false,
"integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
"dev": true,
"optional": true,
@ -6193,7 +6193,7 @@
},
"node-pre-gyp": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.0.tgz",
"resolved": false,
"integrity": "sha512-G7kEonQLRbcA/mOoFoxvlMrw6Q6dPf92+t/l0DFSMuSlDoWaI9JWIyPwK0jyE1bph//CUEL65/Fz1m2vJbmjQQ==",
"dev": true,
"optional": true,
@ -6212,7 +6212,7 @@
},
"nopt": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
"resolved": false,
"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
"dev": true,
"optional": true,
@ -6223,14 +6223,14 @@
},
"npm-bundled": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
"resolved": false,
"integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
"dev": true,
"optional": true
},
"npm-packlist": {
"version": "1.1.10",
"resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
"resolved": false,
"integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
"dev": true,
"optional": true,
@ -6241,7 +6241,7 @@
},
"npmlog": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
"resolved": false,
"integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
"dev": true,
"optional": true,
@ -6254,20 +6254,20 @@
},
"number-is-nan": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"resolved": false,
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
"dev": true
},
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"resolved": false,
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"dev": true,
"optional": true
},
"once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"resolved": false,
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"dev": true,
"requires": {
@ -6276,21 +6276,21 @@
},
"os-homedir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"dev": true,
"optional": true
},
"os-tmpdir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"dev": true,
"optional": true
},
"osenv": {
"version": "0.1.5",
"resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
"resolved": false,
"integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
"dev": true,
"optional": true,
@ -6301,21 +6301,21 @@
},
"path-is-absolute": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"resolved": false,
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
"dev": true,
"optional": true
},
"process-nextick-args": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
"resolved": false,
"integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==",
"dev": true,
"optional": true
},
"rc": {
"version": "1.2.7",
"resolved": "https://registry.npmjs.org/rc/-/rc-1.2.7.tgz",
"resolved": false,
"integrity": "sha512-LdLD8xD4zzLsAT5xyushXDNscEjB7+2ulnl8+r1pnESlYtlJtVSoCMBGr30eDRJ3+2Gq89jK9P9e4tCEH1+ywA==",
"dev": true,
"optional": true,
@ -6328,7 +6328,7 @@
"dependencies": {
"minimist": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"resolved": false,
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"dev": true,
"optional": true
@ -6337,7 +6337,7 @@
},
"readable-stream": {
"version": "2.3.6",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
"resolved": false,
"integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==",
"dev": true,
"optional": true,
@ -6353,7 +6353,7 @@
},
"rimraf": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
"resolved": false,
"integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
"dev": true,
"optional": true,
@ -6363,48 +6363,48 @@
},
"safe-buffer": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
"resolved": false,
"integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==",
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"resolved": false,
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"optional": true
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
"resolved": false,
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
"dev": true,
"optional": true
},
"semver": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
"resolved": false,
"integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA==",
"dev": true,
"optional": true
},
"set-blocking": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"resolved": false,
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"dev": true,
"optional": true
},
"signal-exit": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"resolved": false,
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"dev": true,
"optional": true
},
"string-width": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"dev": true,
"requires": {
@ -6415,7 +6415,7 @@
},
"string_decoder": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
"resolved": false,
"integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
"dev": true,
"optional": true,
@ -6425,7 +6425,7 @@
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"resolved": false,
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
@ -6434,14 +6434,14 @@
},
"strip-json-comments": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"resolved": false,
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"dev": true,
"optional": true
},
"tar": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
"resolved": false,
"integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
"dev": true,
"optional": true,
@ -6457,14 +6457,14 @@
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
"dev": true,
"optional": true
},
"wide-align": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
"resolved": false,
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
"dev": true,
"optional": true,
@ -6474,13 +6474,13 @@
},
"wrappy": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"resolved": false,
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
"dev": true
},
"yallist": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
"resolved": false,
"integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
"dev": true
}
@ -6722,7 +6722,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@ -7017,7 +7017,7 @@
},
"hoek": {
"version": "4.2.1",
"resolved": "http://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA==",
"dev": true
},
@ -8083,7 +8083,7 @@
},
"jest-get-type": {
"version": "22.4.3",
"resolved": "http://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"resolved": "https://registry.npmjs.org/jest-get-type/-/jest-get-type-22.4.3.tgz",
"integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==",
"dev": true
},
@ -8636,7 +8636,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@ -9006,7 +9006,7 @@
},
"media-typer": {
"version": "0.3.0",
"resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
},
"mem": {
@ -9036,7 +9036,7 @@
},
"meow": {
"version": "3.7.0",
"resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
"resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
"integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
"dev": true,
"requires": {
@ -9730,7 +9730,7 @@
},
"npm-install-package": {
"version": "2.1.0",
"resolved": "http://registry.npmjs.org/npm-install-package/-/npm-install-package-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/npm-install-package/-/npm-install-package-2.1.0.tgz",
"integrity": "sha1-1+/jz816sAYUuJbqUxGdyaslkSU=",
"dev": true
},
@ -9937,6 +9937,7 @@
"resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
"integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
"dev": true,
"optional": true,
"requires": {
"kind-of": "^3.0.2",
"longest": "^1.0.1",
@ -10306,7 +10307,8 @@
"version": "1.1.6",
"resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
"integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
"dev": true
"dev": true,
"optional": true
},
"is-builtin-module": {
"version": "1.0.0",
@ -10402,6 +10404,7 @@
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
"integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
"dev": true,
"optional": true,
"requires": {
"is-buffer": "^1.1.5"
}
@ -10454,7 +10457,8 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
"integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
"dev": true
"dev": true,
"optional": true
},
"lru-cache": {
"version": "4.1.3",
@ -10757,7 +10761,8 @@
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
"integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
"dev": true
"dev": true,
"optional": true
},
"require-directory": {
"version": "2.1.1",
@ -11640,7 +11645,7 @@
"dependencies": {
"pify": {
"version": "2.3.0",
"resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
"integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
"dev": true
}
@ -15872,7 +15877,7 @@
},
"pretty-hrtime": {
"version": "1.0.3",
"resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
"integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE="
},
"private": {
@ -16901,7 +16906,7 @@
},
"safe-regex": {
"version": "1.1.0",
"resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
"integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
"dev": true,
"requires": {
@ -17660,7 +17665,7 @@
},
"staged-git-files": {
"version": "1.1.1",
"resolved": "http://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
"resolved": "https://registry.npmjs.org/staged-git-files/-/staged-git-files-1.1.1.tgz",
"integrity": "sha512-H89UNKr1rQJvI1c/PIR3kiAMBV23yvR7LItZiV74HWZwzt7f3YHuujJ9nJZlt58WlFox7XQsOahexwk7nTe69A==",
"dev": true
},
@ -17869,7 +17874,7 @@
},
"strip-eof": {
"version": "1.0.0",
"resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
"dev": true
},
@ -20515,7 +20520,7 @@
},
"xmlbuilder": {
"version": "9.0.7",
"resolved": "http://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
"resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-9.0.7.tgz",
"integrity": "sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0="
},
"xregexp": {

View File

@ -79,10 +79,10 @@ const colors = {
'yellow-lighter': '#fff9c2',
'yellow-lightest': '#fcfbeb',
'green-darkest': '#0f2f21',
'green-darker': '#1a4731',
'green-dark': '#1f9d55',
green: '#38c172',
'green-darkest': '#003706',
'green-darker': '#006504',
'green-dark': '#058b00',
green: '#12bc00',
'green-light': '#51d88a',
'green-lighter': '#a2f5bf',
'green-lightest': '#e3fcec',
@ -95,10 +95,10 @@ const colors = {
'teal-lighter': '#a0f0ed',
'teal-lightest': '#e8fffe',
'blue-darkest': '#12283a',
'blue-darker': '#1c3d5a',
'blue-dark': '#2779bd',
blue: '#3490dc',
'blue-darkest': '#002275',
'blue-darker': '#003eaa',
'blue-dark': '#0060df',
blue: '#0a84ff',
'blue-light': '#6cb2eb',
'blue-lighter': '#bcdefa',
'blue-lightest': '#eff8ff',