Merge pull request #983 from mozilla/fresh-ui-mark-update

Update UI
2018-11-02 14:04:02 -07:00 · 2018-11-02 14:04:02 -07:00 · d3a3e241bf
commit d3a3e241bf
parent 5ebe869c26 1a7510070e
22 changed files with 289 additions and 216 deletions
--- a/app/main.css
+++ b/app/main.css
@ -32,18 +32,42 @@ progress::-webkit-progress-value {
 }

 .main {
-  min-height: calc(100vh - 6rem);
+  display: flex;
+  max-width: 64rem;
+  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');
@ -120,11 +144,15 @@ progress::-webkit-progress-value {
  .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% - 3rem);
    min-height: 30rem;
    max-height: 40rem;
  }
+
+  .main > section {
+    @apply shadow-md;
+  }
 }
--- a/app/routes.js
+++ b/app/routes.js
@ -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)}
--- a/app/ui/account.js
+++ b/app/ui/account.js
@ -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}"
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@ -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}
@ -107,16 +109,13 @@ function fileInfo(file, action) {
 function archiveDetails(translate, archive) {
  if (archive.manifest.files.length > 1) {
    return html`
-    <details class="w-full pb-1 overflow-y-hidden" ${
+    <details class="w-full pb-1 overflow-y-scroll" ${
      archive.open ? 'open' : ''
    } ontoggle=${toggled}>
      <summary>${translate('fileCount', {
        num: archive.manifest.files.length
      })}</summary>
-      ${list(
-        archive.manifest.files.map(f => fileInfo(f)),
-        'list-reset h-full overflow-y-scroll'
-      )}
+      ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')}
    </details>`;
  }
  function toggled(event) {
@ -129,7 +128,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 +137,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 +174,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 md:max-h-half-screen',
+      '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 +189,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 +199,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 +229,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 +247,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 +262,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 +280,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 +296,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 +316,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 max-h-full 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 +346,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')}
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@ -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>`;
--- a/app/ui/download.js
+++ b/app/ui/download.js
@ -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">${content}</div>
+      <div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
    </section>
  </main>`;
 };
--- a/app/ui/error.js
+++ b/app/ui/error.js
@ -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>`;
 };
--- a/app/ui/footer.js
+++ b/app/ui/footer.js
@ -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">
--- a/app/ui/header.js
+++ b/app/ui/header.js
@ -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="/">
--- a/app/ui/home.js
+++ b/app/ui/home.js
@ -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>`;
 };
--- a/app/ui/intro.js
+++ b/app/ui/intro.js
@ -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>`;
--- a/app/ui/legal.js
+++ b/app/ui/legal.js
@ -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>`;
 }
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@ -3,8 +3,10 @@ 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="h-full max-h-screen absolute pin-t flex items-center">
+      <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
+        ${state.modal(state, emit, close)}
+      </div>
    </div>
  </div>`;

--- a/app/ui/notFound.js
+++ b/app/ui/notFound.js
@ -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>
--- a/app/ui/okDialog.js
+++ b/app/ui/okDialog.js
@ -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>`;
--- a/app/ui/selectbox.js
+++ b/app/ui/selectbox.js
@ -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}" ${
--- a/app/ui/signupDialog.js
+++ b/app/ui/signupDialog.js
@ -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>
--- a/app/ui/unsupported.js
+++ b/app/ui/unsupported.js
@ -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>
--- a/assets/addfiles.svg
+++ b/assets/addfiles.svg
@ -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>
--- a/package-lock.json
+++ b/package-lock.json
@ -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": {
--- a/tailwind.js
+++ b/tailwind.js
@ -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',
@ -604,6 +604,7 @@ module.exports = {

  maxHeight: {
    full: '100%',
+    'half-screen': '50vh',
    screen: '100vh'
  },

--- a/test/integration/homepage-tests.js
+++ b/test/integration/homepage-tests.js
@ -6,6 +6,7 @@ describe('Firefox Send homepage', function() {
  const homePage = new HomePage();
  const baseUrl = browser.options['baseUrl'];
  const footerLinks = [
+    'mozilla',
    'legal',
    'about',
    'legal',