add fxA ui elements

app/archive.js

@@ -1,3 +1,4 @@
+/* global MAXFILESIZE */
 import { blobStream, concatStream } from './streams';
 
 export default class Archive {
@@ -34,4 +35,21 @@ export default class Archive {
   get stream() {
     return concatStream(this.files.map(file => blobStream(file)));
   }
+
+  addFiles(files) {
+    const newSize = files.reduce((total, file) => total + file.size, 0);
+    if (this.size + newSize > MAXFILESIZE) {
+      return false;
+    }
+    this.files = this.files.concat(files);
+    return true;
+  }
+
+  checkSize() {
+    return this.size <= MAXFILESIZE;
+  }
+
+  remove(index) {
+    this.files.splice(index, 1);
+  }
 }

app/base.css

@@ -47,7 +47,7 @@ a {
   padding: 0 25px;
   box-sizing: border-box;
   min-height: 500px;
-  max-height: 630px;
+  max-height: 800px;
   height: 100px;
 }
 
@@ -55,6 +55,7 @@ a {
   flex: none;
   position: relative;
   width: 400px;
+  margin-top: 32px;
   background-color: white;
   border-radius: 6px;
   box-shadow: 0 0 0 3px rgba(12, 12, 13, 0.2);
@@ -147,10 +148,6 @@ a {
   border: none;
 }
 
-.uploadCancel:hover {
-  text-decoration: underline;
-}
-
 .input {
   border: 1px solid var(--lightBorderColor);
   font-size: 20px;
@@ -161,26 +158,10 @@ a {
   padding-right: 10px;
 }
 
-.input--noBtn {
-  border-radius: 6px;
-}
-
 .input--error {
   border-color: var(--errorColor);
 }
 
-.inputBtn.inputError {
-  background-color: var(--errorColor);
-}
-
-.inputBtn.inputError:hover {
-  background-color: var(--errorColor);
-}
-
-.cursor--pointer {
-  cursor: pointer;
-}
-
 .link {
   color: var(--linkColor);
   text-decoration: none;
@@ -206,35 +187,11 @@ a {
   text-align: center;
 }
 
-.progressSection {
-  margin: 0 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  text-align: center;
-  font-size: 15px;
-}
-
-.progressSection__text {
-  color: var(--lightTextColor);
-  letter-spacing: -0.4px;
-  margin-top: 24px;
-  margin-bottom: 74px;
-}
-
 .effect--fadeOut {
   opacity: 0;
   animation: fadeout 200ms linear;
 }
 
-.goBackButton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 18px;
-}
-
 @keyframes fadeout {
   0% {
     opacity: 1;
@@ -260,19 +217,26 @@ a {
   }
 }
 
+.goBackButton {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 18px;
+}
+
 .error {
   color: var(--errorColor);
   font-weight: 600;
 }
 
 .title {
-  color: var(--textColor);
+  color: var(--lightTextColor);
-  font-size: 33px;
+  font-size: 18px;
   line-height: 40px;
   margin: 20px auto;
-  text-align: center;
   max-width: 520px;
   font-family: 'SF Pro Text', sans-serif;
+  font-weight: 700;
   word-wrap: break-word;
 }
 
@@ -289,7 +253,7 @@ a {
 }
 
 .noDisplay {
-  display: none;
+  display: none !important;
 }
 
 .flexible {
@@ -303,7 +267,7 @@ a {
 
   .main {
     flex-direction: column;
-    min-height: 700px;
+    height: 100%;
   }
 
   .spacer {
@@ -312,7 +276,8 @@ a {
   }
 
   .stripedBox {
-    max-height: 550px;
+    margin-top: 72;
+    min-height: 400px;
     flex: 1;
   }
 

app/dragManager.js

@@ -1,5 +1,3 @@
-import { checkSize } from './utils';
-
 export default function(state, emitter) {
   emitter.on('DOMContentLoaded', () => {
     document.body.addEventListener('dragover', event => {
@@ -16,11 +14,9 @@ export default function(state, emitter) {
           .querySelector('.uploadArea')
           .classList.remove('uploadArea--dragging');
 
-        const target = event.dataTransfer;
+        const files = Array.from(event.dataTransfer.files);
 
-        checkSize(target.files, state.files);
+        emitter.emit('addFiles', { files });
-
-        emitter.emit('addFiles', { files: target.files });
       }
     });
   });

app/fileManager.js

@@ -1,14 +1,15 @@
+/* global MAXFILESIZE */
 import FileSender from './fileSender';
 import FileReceiver from './fileReceiver';
 import { copyToClipboard, delay, openLinksInNewTab, percent } from './utils';
 import * as metrics from './metrics';
 import { hasPassword } from './api';
 import Archive from './archive';
+import { bytes } from './utils';
 
 export default function(state, emitter) {
   let lastRender = 0;
   let updateTitle = false;
-  state.files = [];
 
   function render() {
     emitter.emit('render');
@@ -61,14 +62,9 @@ export default function(state, emitter) {
     metrics.changedDownloadLimit(file);
   });
 
-  emitter.on('removeUpload', async ({ file }) => {
+  emitter.on('removeUpload', async ({ index }) => {
-    for (let i = 0; i < state.files.length; i++) {
+    state.archive.remove(index);
-      if (state.files[i] === file) {
-        state.files.splice(i, 1);
     render();
-        return;
-      }
-    }
   });
 
   emitter.on('delete', async ({ file, location }) => {
@@ -93,18 +89,28 @@ export default function(state, emitter) {
   });
 
   emitter.on('addFiles', async ({ files }) => {
-    for (let i = 0; i < files.length; i++) {
+    if (state.archive) {
-      state.files.push(files[i]);
+      if (!state.archive.addFiles(files)) {
+        // eslint-disable-next-line no-alert
+        alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
+        return;
+      }
+    } else {
+      const archive = new Archive(files);
+      if (!archive.checkSize()) {
+        // eslint-disable-next-line no-alert
+        alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
+        return;
+      }
+      state.archive = archive;
     }
     render();
   });
 
-  //TODO: hook up to multi-file upload functionality
+  emitter.on('upload', async ({ type, dlCount, password }) => {
-  emitter.on('upload', async ({ files, type, dlCount, password }) => {
+    if (!state.archive) return;
-    const file = new Archive(files);
+    const size = state.archive.size;
-
+    const sender = new FileSender(state.archive);
-    const size = file.size;
-    const sender = new FileSender(file);
     sender.on('progress', updateProgress);
     sender.on('encrypting', render);
     sender.on('complete', render);

app/pages/legal.js

@@ -1,9 +1,15 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
+const assets = require('../../common/assets');
+const title = require('../templates/title');
 
 module.exports = function(state) {
   return html`
     <div>
+      <a href="/" class="goBackButton"> 
+        <img src="${assets.get('back-arrow.svg')}"/> 
+      </a>
+      ${title(state)}
       <div class="title">${state.translate('legalHeader')}</div>
         ${raw(
           replaceLinks(state.translate('legalNoticeTestPilot'), [

app/pages/preview/index.js

@@ -4,8 +4,7 @@ const downloadButton = require('../../templates/downloadButton');
 const downloadedFiles = require('../../templates/uploadedFileList');
 
 module.exports = function(state, emit) {
-  const storageFile = state.storage.getFileById(state.params.id);
+  const ownedFile = state.storage.getFileById(state.params.id);
-  const multifiles = Array.from(storageFile.manifest.files);
 
   const trySendLink = html`
     <a class="link link--action" href="/">
@@ -26,7 +25,7 @@ module.exports = function(state, emit) {
     <div class="page">
       ${titleSection(state)}
 
-      ${downloadedFiles(multifiles, state, emit)}
+      ${downloadedFiles(ownedFile, state, emit)}
       <div class="description">${state.translate('downloadMessage2')}</div>
       ${downloadButton(state, emit)}
 

app/pages/share/index.js

@@ -4,7 +4,7 @@ const raw = require('choo/html/raw');
 const assets = require('../../../common/assets');
 const notFound = require('../notFound');
 const deletePopup = require('../../templates/popup');
-const uploadedFiles = require('../../templates/uploadedFileList');
+const uploadedFileList = require('../../templates/uploadedFileList');
 const { allowedCopy, delay, fadeOut } = require('../../utils');
 
 module.exports = function(state, emit) {
@@ -17,8 +17,6 @@ module.exports = function(state, emit) {
     ? ''
     : 'passwordReminder--hidden';
 
-  const multifiles = Array.from(file.manifest.files);
-
   return html`
 
     <div class="page effect--fadeIn" id="shareWrapper">
@@ -27,11 +25,10 @@ module.exports = function(state, emit) {
       </a>
       ${expireInfo(file, state.translate)}
 
-      ${uploadedFiles(multifiles, state, emit)}
+      ${uploadedFileList(file, state, emit)}
-
 
       <div class="sharePage__copyText">
-        ${state.translate('copyUrlFormLabelWithName', { filename: '' })}
+        ${state.translate('copyUrlLabel')}
         <div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
       </div>
 
@@ -60,14 +57,14 @@ module.exports = function(state, emit) {
       <button
         class="btn--cancel btn--delete"
         title="${state.translate('deleteFileButton')}"
-        onclick=${showPopup}>${state.translate('deleteFileButton')}
+        onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
       </button>
 
     </div>
 
   `;
 
-  function showPopup() {
+  function showDeletePopup() {
     const popup = document.querySelector('.popup');
     popup.classList.add('popup--show');
     popup.focus();

app/pages/signin/index.js

@@ -37,6 +37,7 @@ module.exports = function(state, emit) {
           ${state.translate('signInContinueMessage')}
 
           <form
+            onsubmit=${submitEmail}
             data-no-csrf>
             <input
               type="text"
@@ -57,4 +58,9 @@ module.exports = function(state, emit) {
 
     </div>
   `;
+
+  function submitEmail(event) {
+    event.preventDefault();
+    //TODO: hook up fxA onboarding
+  }
 };

app/pages/signin/signin.css

@@ -6,7 +6,7 @@
 
 .signIn__info {
   width: 308px;
-  margin: 16px auto 0;
+  margin: 12px auto 0;
   text-align: left;
 }
 
@@ -26,7 +26,7 @@
   height: 40px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 4px;
-  margin: 0;
+  margin: 8px 0;
   padding: 0 8px;
   font-size: 18px;
   color: var(--lightTextColor);

app/pages/welcome/index.js

@@ -1,6 +1,5 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
-const { checkSize } = require('../../utils');
 const title = require('../../templates/title');
 const setPasswordSection = require('../../templates/setPasswordSection');
 const uploadBox = require('../../templates/uploadedFileList');
@@ -9,14 +8,15 @@ const expireInfo = require('../../templates/expireInfo');
 module.exports = function(state, emit) {
   // the page flickers if both the server and browser set 'effect--fadeIn'
   const fade = state.layout ? '' : 'effect--fadeIn';
-  const files = state.files ? state.files : [];
+
+  const hasAnUpload = state.archive && state.archive.numFiles > 0;
 
   const optionClass = state.uploading ? 'uploadOptions--faded' : '';
   const btnUploading = state.uploading ? 'btn--stripes' : '';
   const cancelVisible = state.uploading ? '' : 'noDisplay';
-  const faded = files.length > 0 ? 'uploadArea--faded' : '';
+  const faded = hasAnUpload ? 'uploadArea--faded' : '';
-  const selectFileClass = files.length > 0 ? 'btn--hidden' : '';
+  const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
-  const sendFileClass = files.length > 0 ? '' : 'btn--hidden';
+  const sendFileClass = hasAnUpload > 0 ? '' : 'btn--hidden';
 
   let btnText = '';
 
@@ -37,7 +37,7 @@ module.exports = function(state, emit) {
       ondragover=${dragover}
       ondragleave=${dragleave}>
 
-      ${uploadBox(files, state, emit)}
+      ${uploadBox(state.archive, state, emit)}
 
       <div class="uploadedFilesWrapper ${faded}">
         <img
@@ -118,21 +118,18 @@ module.exports = function(state, emit) {
 
   async function addFiles(event) {
     event.preventDefault();
-    const target = event.target;
+    const newFiles = Array.from(event.target.files);
-    checkSize(target.files, state.files);
+
-    emit('addFiles', { files: target.files });
+    emit('addFiles', { files: newFiles });
   }
 
   async function upload(event) {
     event.preventDefault();
 
-    if (files.length > 0) {
     emit('upload', {
-        files,
       type: 'click',
       dlCount: state.downloadCount,
       password: state.password
     });
   }
-  }
 };

app/pages/welcome/welcome.css

@@ -91,3 +91,7 @@
 .uploadCancel {
   margin: 6px 0 0;
 }
+
+.uploadCancel:hover {
+  text-decoration: underline;
+}

app/pasteManager.js

@@ -1,6 +1,3 @@
-/* global MAXFILESIZE */
-import { bytes } from './utils';
-
 export default function(state, emitter) {
   window.addEventListener('paste', event => {
     if (state.route !== '/' || state.uploading) return;
@@ -12,14 +9,7 @@ export default function(state, emitter) {
 
       if (!file) continue; // Sometimes null
 
-      if (file.size > MAXFILESIZE) {
+      emitter.emit('addFiles', { files: [file] });
-        // eslint-disable-next-line no-alert
-        alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
-        continue;
-      }
-
-      emitter.emit('upload', { file, type: 'paste' });
-      return; // return here since only one file is allowed to be uploaded at a time
     }
   });
 }

app/routes/home.js

@@ -1,5 +0,0 @@
-const welcome = require('../pages/welcome');
-
-module.exports = function(state, emit) {
-  return welcome(state, emit);
-};

app/routes/index.js

@@ -2,7 +2,6 @@ const choo = require('choo');
 const html = require('choo/html');
 const nanotiming = require('nanotiming');
 const download = require('./download');
-const header = require('../templates/header');
 const footer = require('../templates/footer');
 const fxPromo = require('../templates/fxPromo');
 const signupPromo = require('../templates/signupPromo');
@@ -24,7 +23,6 @@ function body(template) {
     const b = html`<body class="background ${activeBackground(state)}">
       ${banner(state, emit)}
       ${signupPromo(state)}
-      ${header(state)}
       <main class="main">
         <noscript>
           <div class="noscript">
@@ -61,7 +59,7 @@ function body(template) {
   };
 }
 
-app.route('/', body(require('./home')));
+app.route('/', body(require('../pages/welcome')));
 app.route('/share/:id', body(require('../pages/share')));
 app.route('/download/:id', body(download));
 app.route('/download/:id/:key', body(download));

app/templates/fileList/fileList.css

@@ -15,7 +15,7 @@
   .fileList {
     position: static;
     width: 400px;
-    max-height: 200px;
+    max-height: 160px;
     margin: 6px 0 0 -3px;
   }
 }

app/templates/footer/footer.css

@@ -1,20 +1,18 @@
 .footer {
-  right: 0;
   bottom: 0;
   left: 0;
   font-size: 13px;
   font-weight: 600;
   display: flex;
-  align-items: flex-end;
   flex-direction: row;
   padding: 50px 31px 41px;
   width: 100%;
   box-sizing: border-box;
   justify-content: flex-end;
+  align-items: flex-end;
 }
 
 .legalSection {
-  max-width: 81vw;
   display: flex;
   align-items: center;
   flex-direction: row;
@@ -35,60 +33,116 @@
   color: #d7d7db;
 }
 
-.legalSection__mozLogo {
+.footer__mozLogo {
   width: 112px;
   height: 32px;
   margin-bottom: -5px;
 }
 
-.socialSection {
-  display: flex;
-  justify-content: space-between;
-  width: 94px;
-}
-
-.socialSection__link {
-  opacity: 0.9;
-}
-
-.socialSection__link:hover {
-  opacity: 1;
-}
-
 .socialSection__icon {
   width: 32px;
   height: 32px;
-  margin-bottom: -5px;
+  margin: 0 0 -5px 4px;
+}
+
+.feedback {
+  background-color: var(--primaryControlBGColor);
+  background-image: url('../assets/feedback.svg');
+  background-position: 2px 4px;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  border-radius: 3px;
+  border: 1px solid var(--primaryControlBGColor);
+  color: var(--primaryControlFGColor);
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 5px;
+  overflow: hidden;
+  min-width: 12px;
+  max-width: 12px;
+  text-indent: 17px;
+  transition: all 250ms ease-in-out;
+  white-space: nowrap;
+}
+
+.feedback:hover,
+.feedback:focus {
+  min-width: 30px;
+  max-width: 300px;
+  text-indent: 2px;
+  padding: 5px 5px 5px 20px;
+  background-color: var(--primaryControlHoverColor);
+}
+
+.feedback:active {
+  background-color: var(--primaryControlHoverColor);
+}
+
+.dropDownArrow {
+  display: none;
+}
+
+.dropdown__only {
+  display: none;
 }
 
 @media (max-device-width: 750px), (max-width: 750px) {
   .footer {
-    justify-content: flex-start;
+    align-items: flex-end;
-    align-items: flex-start;
+    padding: 20px 25px;
-    max-width: 630px;
+    margin: 0;
-    padding: 20px 31px;
+    min-width: 455px;
-    margin: auto;
   }
 
-  .legalSection__mozLogo {
+  .footer_hiddenIcon {
-    margin-left: -7px;
+    display: none;
+  }
+
+  .dropdown__only {
+    display: block;
+  }
+
+  .dropDownArrow {
+    display: initial;
+    float: right;
   }
 
   .legalSection {
-    flex-direction: column;
+    flex: 0;
-    margin: auto;
+    background-color: #fff;
-    width: 100%;
+    display: block;
-    max-width: 100%;
+    border-radius: 4px;
+    border: 1px solid rgba(12, 12, 13, 0.1);
+    box-sizing: border-box;
+    text-align: left;
+    margin-right: auto;
   }
 
   .legalSection__link {
+    flex: none;
     display: block;
-    padding: 10px 0;
+    box-sizing: border-box;
-    align-self: flex-start;
+    height: 24px;
+    width: 176px;
+    margin: 0;
+    padding: 4px 20px 0 8px;
+    text-shadow: none;
+    font-weight: 400;
+    color: var(--lightTextColor);
   }
 
-  .socialSection {
+  .legalSection__link:visited {
-    margin-top: 20px;
+    color: var(--lightTextColor);
-    align-self: flex-start;
+  }
+
+  .legalSection__link:hover {
+    color: var(--primaryControlFGColor);
+    background-color: var(--primaryControlBGColor);
+  }
+
+  .footer__noDisplay {
+    display: none;
   }
 }

app/templates/footer/index.js

@@ -1,62 +1,89 @@
 const html = require('choo/html');
+const version = require('../../../package.json').version;
 const assets = require('../../../common/assets');
+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="footer">
-    <div class="legalSection">
+    <div class="legalSection"
-      <a
+      onmouseover=${showDropDown}
-        href="https://www.mozilla.org/about/legal"
+      onmouseout=${hideDropDown}>
-        class="legalSection__link">
+
+      <div class="legalSection__menu">
+        <img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/> 
+        <a class="legalSection__link"
+          href="https://www.mozilla.org/about/legal">
           ${state.translate('footerLinkLegal')}
         </a>
+      </div>
+
       <a
         href="https://testpilot.firefox.com/about"
-        class="legalSection__link">
+        class="legalSection__link footer__dropdown footer__noDisplay">
         ${state.translate('footerLinkAbout')}
       </a>
       <a
         href="/legal"
-        class="legalSection__link">${state.translate('footerLinkPrivacy')}</a>
+        class="legalSection__link footer__dropdown footer__noDisplay">
-      <a
+        ${state.translate('footerLinkTerms')}
-        href="/legal"
+      </a>
-        class="legalSection__link">${state.translate('footerLinkTerms')}</a>
       <a
         href="https://www.mozilla.org/privacy/websites/#cookies"
-        class="legalSection__link">
+        class="legalSection__link footer__dropdown footer__noDisplay">
         ${state.translate('footerLinkCookies')}
       </a>
       <a
         href="https://www.mozilla.org/about/legal/report-infringement/"
-        class="legalSection__link">
+        class="legalSection__link footer__dropdown footer__noDisplay">
         ${state.translate('reportIPInfringement')}
       </a>
-
       <a
-        href="https://www.mozilla.org"
+        href="https://github.com/mozilla/send"
-        class="legalSection__link">
+        class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
-        <img
+        Github
-          class="legalSection__mozLogo"
+      </a>
-          src="${assets.get('mozilla-logo.svg')}"
+      <a
-          alt="mozilla"/>
+        href="https://twitter.com/FxTestPilot"
+        class="legalSection__link footer__dropdown dropdown__only footer__noDisplay">
+        Twitter
+      </a>
+    </div>
+
+    <a href="${feedbackUrl}"
+      rel="noreferrer noopener"
+      class="feedback"
+      alt="Feedback"
+      target="_blank">${state.translate('siteFeedback')}
     </a>
 
     <a
       href="https://github.com/mozilla/send"
-        class="socialSection__link">
+      class="socialSection__link footer_hiddenIcon">
       <img
         class="socialSection__icon"
         src="${assets.get('github-icon.svg')}"
-          alt="github"/>
+        alt="Github"/>
     </a>
     <a
       href="https://twitter.com/FxTestPilot"
-        class="socialSection__link">
+      class="socialSection__link footer_hiddenIcon">
       <img
         class="socialSection__icon"
         src="${assets.get('twitter-icon.svg')}"
-          alt="twitter"/>
+        alt="Twitter"/>
+    </a>
+
+    <a
+      href="https://www.mozilla.org"
+      class="socialSection__link">
+      <img
+        class="footer__mozLogo"
+        src="${assets.get('mozilla-logo.svg')}"
+        alt="mozilla"/>
     </a>
-    </div>
   </footer>`;
   // HACK
   // We only want to render this once because we
@@ -65,4 +92,18 @@ module.exports = function(state) {
     return target && target.nodeName && target.nodeName === 'FOOTER';
   };
   return footer;
+
+  function showDropDown() {
+    const menus = document.querySelectorAll('.footer__dropdown');
+    menus.forEach(element => {
+      element.classList.remove('footer__noDisplay');
+    });
+  }
+
+  function hideDropDown() {
+    const menus = document.querySelectorAll('.footer__dropdown');
+    menus.forEach(element => {
+      element.classList.add('footer__noDisplay');
+    });
+  }
 };

app/templates/header/header.css

@@ -3,95 +3,7 @@
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
-  padding: 20px;
+  height: 32px;
+  padding: 10px;
   width: 100%;
 }
-
-.logo {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-
-.logo__link {
-  display: flex;
-  flex-direction: row;
-}
-
-.logo__title {
-  color: #3e3d40;
-  font-size: 32px;
-  font-weight: 500;
-  margin: 0;
-  position: relative;
-  top: -1px;
-  letter-spacing: 1px;
-  margin-left: 8px;
-  transition: color 50ms;
-}
-
-.logo__title:hover {
-  color: var(--primaryControlBGColor);
-}
-
-.logo__subtitle {
-  color: #3e3d40;
-  font-size: 12px;
-  margin: 0 8px;
-}
-
-.logo__subtitle-link {
-  font-weight: bold;
-  color: #3e3d40;
-  transition: color 50ms;
-}
-
-.logo__subtitle-link:hover {
-  color: var(--primaryControlBGColor);
-}
-
-.feedback {
-  background-color: var(--primaryControlBGColor);
-  background-image: url('../assets/feedback.svg');
-  background-position: 2px 4px;
-  background-repeat: no-repeat;
-  background-size: 18px;
-  border-radius: 3px;
-  border: 1px solid var(--primaryControlBGColor);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-  display: block;
-  float: left;
-  font-size: 12px;
-  line-height: 12px;
-  opacity: 0.9;
-  padding: 5px;
-  overflow: hidden;
-  min-width: 12px;
-  max-width: 12px;
-  text-indent: 17px;
-  transition: all 250ms ease-in-out;
-  white-space: nowrap;
-}
-
-.feedback:hover,
-.feedback:focus {
-  min-width: 30px;
-  max-width: 300px;
-  text-indent: 2px;
-  padding: 5px 5px 5px 20px;
-  background-color: var(--primaryControlHoverColor);
-}
-
-.feedback:active {
-  background-color: var(--primaryControlHoverColor);
-}
-
-@media (max-device-width: 750px), (max-width: 750px) {
-  .header {
-    padding-top: 60px;
-    flex-direction: column;
-    justify-content: flex-start;
-  }
-}

app/templates/header/index.js

@@ -1,15 +1,8 @@
 const html = require('choo/html');
-const version = require('../../../package.json').version;
-const browser = browserName();
 
-module.exports = function(state) {
+module.exports = function() {
-  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
   const header = html`
   <header class="header">
-    <a href="${feedbackUrl}"
-      rel="noreferrer noopener"
-      class="feedback"
-      target="_blank">${state.translate('siteFeedback')}</a>
   </header>`;
   // HACK
   // We only want to render this once because we
@@ -19,26 +12,3 @@ module.exports = function(state) {
   };
   return header;
 };
-
-function browserName() {
-  try {
-    if (/firefox/i.test(navigator.userAgent)) {
-      return 'firefox';
-    }
-    if (/edge/i.test(navigator.userAgent)) {
-      return 'edge';
-    }
-    if (/trident/i.test(navigator.userAgent)) {
-      return 'ie';
-    }
-    if (/chrome/i.test(navigator.userAgent)) {
-      return 'chrome';
-    }
-    if (/safari/i.test(navigator.userAgent)) {
-      return 'safari';
-    }
-    return 'other';
-  } catch (e) {
-    return 'unknown';
-  }
-}

app/templates/uploadedFile/index.js

@@ -3,7 +3,7 @@ const assets = require('../../../common/assets');
 const bytes = require('../../utils').bytes;
 const fileIcon = require('../fileIcon');
 
-module.exports = function(file, state, emit) {
+module.exports = function(file, index, state, emit, hasPassword) {
   const transfer = state.transfer;
   const transferState = transfer ? transfer.state : null;
   const share = state.route.includes('share/');
@@ -20,25 +20,15 @@ module.exports = function(file, state, emit) {
   function cancel(event) {
     event.preventDefault();
     if (state.route === '/') {
-      emit('removeUpload', { file });
+      emit('removeUpload', { index });
     }
   }
 
-  //const percent = share ? 100 : Math.floor(progressRatio * 100);
-  /*
-    style="
-    background: linear-gradient(to right, 
-    #e8f2fe 0%, 
-    #e8f2fe ${percent}%,
-    #fff ${percent}%,
-    #fff 100%);"
-  */
-
   return html`
     <li class="uploadedFile ${complete}" id="${file.id}" 
     >
 
-      ${fileIcon(file.name, file._hasPassword)}
+      ${fileIcon(file.name, hasPassword)}
 
       <div class="uploadedFile__cancel ${cancelVisible}"
       onclick=${cancel}>

app/templates/uploadedFileList/index.js

@@ -1,12 +1,15 @@
 const html = require('choo/html');
 const file = require('../uploadedFile');
 
-module.exports = function(files, state, emit) {
+module.exports = function(archive, state, emit) {
-  //const progressRatio = state.transfer ? state.transfer.progressRatio : 0;
+  let files = [];
+  if (archive) {
+    files = Array.from(archive.manifest.files);
+  }
 
   return html`
 	<ul class="uploadedFiles">
-    ${files.map(f => file(f, state, emit))}
+    ${files.map((f, i) => file(f, i, state, emit, archive._hasPassword))}
   </ul>
 	`;
 };

app/templates/userAccount/index.js

@@ -3,22 +3,46 @@ const assets = require('../../../common/assets');
 
 // eslint-disable-next-line no-unused-vars
 module.exports = function(state) {
+  const notLoggedInMenu = html`
+    <ul class="account_dropdown"
+          tabindex="-1"
+    >
+      <li>
+        <a class=account_dropdown__link>${state.translate(
+          'accountMenuOption'
+        )}</a>
+      </li>
+      <li>
+        <a href="/signin"
+          class=account_dropdown__link>${state.translate(
+            'signInMenuOption'
+          )}</a>
+      </li>
+    </ul>
+  `;
+
   return html`
     <div class="account">
       <img
       src="${assets.get('user.svg')}"
-      onclick=${onclick}
+      onclick=${avatarClick}
       alt="account"/>
-
+      ${notLoggedInMenu}
-      <ul class=account_dropdown>
-        <li class=account_dropdown__item>Placeholder</li>
-        <li class=account_dropdown__item>Placeholder</li>
-      </ul>
     </div>`;
 
-  function onclick(event) {
+  function avatarClick(event) {
     event.preventDefault();
     const dropdown = document.querySelector('.account_dropdown');
     dropdown.classList.toggle('visible');
+    dropdown.focus();
   }
+
+  //the onblur trick makes links unclickable wtf
+  /*
+  function hideMenu(event) {
+    event.stopPropagation();
+    const dropdown = document.querySelector('.account_dropdown');
+    dropdown.classList.remove('visible');
+  }
+  */
 };

app/templates/userAccount/userAccount.css

@@ -6,28 +6,59 @@
 }
 
 .account_dropdown {
-  z-index: 1;
+  z-index: 2;
   position: absolute;
-  top: 25px;
+  top: 30px;
-  left: -10px;
+  left: -15px;
   width: 150px;
   list-style-type: none;
-  border: 1px solid rgba(0, 0, 0, 0.2);
+  border: 1px solid #ccc;
   border-radius: 4px;
   background-color: var(--pageBGColor);
   box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.2);
   padding: 11px 0;
   visibility: hidden;
+  outline: 0;
 }
 
-.account_dropdown__item {
+.account_dropdown::after,
+.account_dropdown::before {
+  position: absolute;
+  bottom: 100%;
+  left: 18px;
+  height: 0;
+  width: 0;
+  border: 1px solid transparent;
+  content: '';
+  pointer-events: none;
+}
+
+.account_dropdown::after {
+  border-bottom-color: var(--pageBGColor);
+  border-width: 12px;
+}
+
+.account_dropdown::before {
+  border-bottom-color: #ccc;
+  border-width: 13px;
+  margin-left: -1px;
+}
+
+.account_dropdown__link {
+  display: block;
   padding: 0 14px;
-  color: var(--lightTextColor);
   font-size: 13px;
   line-height: 24px;
+  color: var(--lightTextColor);
+  position: relative;
+  z-index: 999;
 }
 
-.account_dropdown__item:hover {
+.account_dropdown__link:visited {
+  color: var(--lightTextColor);
+}
+
+.account_dropdown__link:hover {
   background-color: var(--primaryControlBGColor);
   color: var(--primaryControlFGColor);
 }

app/utils.js

@@ -1,4 +1,3 @@
-/* global MAXFILESIZE */
 const b64 = require('base64-js');
 
 function arrayToB64(array) {
@@ -129,24 +128,26 @@ function openLinksInNewTab(links, should = true) {
   return links;
 }
 
-function checkSize(files, oldfiles, translate) {
+function browserName() {
-  function size(arr) {
+  try {
-    let total = 0;
+    if (/firefox/i.test(navigator.userAgent)) {
-    for (let i = 0; i < arr.length; i++) {
+      return 'firefox';
-      total += arr[i].size;
     }
-    return total;
+    if (/edge/i.test(navigator.userAgent)) {
+      return 'edge';
     }
-
+    if (/trident/i.test(navigator.userAgent)) {
-  const addSize = size(files);
+      return 'ie';
-  if (addSize === 0) {
-    return;
     }
-  const totalSize = addSize + size(oldfiles);
+    if (/chrome/i.test(navigator.userAgent)) {
-  if (totalSize > MAXFILESIZE) {
+      return 'chrome';
-    // eslint-disable-next-line no-alert
+    }
-    alert(translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
+    if (/safari/i.test(navigator.userAgent)) {
-    return;
+      return 'safari';
+    }
+    return 'other';
+  } catch (e) {
+    return 'unknown';
   }
 }
 
@@ -163,5 +164,5 @@ module.exports = {
   loadShim,
   isFile,
   openLinksInNewTab,
-  checkSize
+  browserName
 };

assets/dropdown-arrow.svg

@@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.293 8.293a1 1 0 0 1 1.414 0L12 14.586l6.293-6.293a1 1 0 1 1 1.414 1.414l-7 7a1 1 0 0 1-1.414 0l-7-7a1 1 0 0 1 0-1.414z" fill="#0C0C0D" fill-opacity=".8"></path></svg>

package-lock.json

@@ -921,9 +921,15 @@
       }
     },
     "aws-sdk": {
+<<<<<<< HEAD
       "version": "2.285.1",
       "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.285.1.tgz",
       "integrity": "sha512-lkroCYcnb7UWR/jbaW6wyjAeGROrsBFWyqUukQjICuCV4a0Mapnjsxefl2A/z+0SX3gnBN7owUb/60UjQSHpzA==",
+=======
+      "version": "2.283.1",
+      "resolved": "https://registry.npmjs.org/aws-sdk/-/aws-sdk-2.283.1.tgz",
+      "integrity": "sha512-UZmiWboO0WgZUKcTDSa5v6xuHqfNr9PQrOoilWUBnWpWO4s6h9LlSvIm06qyA3XQjEpXVmetHAMl9GmiHk51qw==",
+>>>>>>> add fxA ui elements
       "requires": {
         "buffer": "4.9.1",
         "events": "1.1.1",
@@ -2321,6 +2327,7 @@
       "resolved": "https://registry.npmjs.org/choo/-/choo-6.13.0.tgz",
       "integrity": "sha512-OsXC4v8zKcGAJ+C3fTVxU30daZIWFcQwTZlHKWzHzZvEaRaaBGF95jqTd3XYV5+Eitx/SaklbqtaoWUAKCG/Nw==",
       "requires": {
+<<<<<<< HEAD
         "document-ready": "^2.0.1",
         "nanoassert": "^1.1.0",
         "nanobus": "^4.2.0",
@@ -2335,6 +2342,22 @@
         "nanotiming": "^7.0.0",
         "scroll-to-anchor": "^1.0.0",
         "xtend": "^4.0.1"
+=======
+        "document-ready": "2.0.1",
+        "nanoassert": "1.1.0",
+        "nanobus": "4.3.3",
+        "nanocomponent": "6.5.2",
+        "nanohref": "3.0.3",
+        "nanohtml": "1.2.4",
+        "nanolru": "1.0.0",
+        "nanomorph": "5.1.3",
+        "nanoquery": "1.2.0",
+        "nanoraf": "3.1.0",
+        "nanorouter": "3.1.1",
+        "nanotiming": "7.3.1",
+        "scroll-to-anchor": "1.1.0",
+        "xtend": "4.0.1"
+>>>>>>> add fxA ui elements
       }
     },
     "chownr": {
@@ -4336,7 +4359,7 @@
     },
     "event-stream": {
       "version": "3.3.4",
-      "resolved": "http://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
       "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=",
       "dev": true,
       "requires": {
@@ -7379,7 +7402,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -7584,7 +7607,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -7781,8 +7804,13 @@
       "integrity": "sha1-zbX4TitqLTEU3zO9BdnLMuPECDo=",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "unist-util-modify-children": "^1.0.0",
         "unist-util-visit": "^1.1.0"
+=======
+        "unist-util-modify-children": "1.1.2",
+        "unist-util-visit": "1.4.0"
+>>>>>>> add fxA ui elements
       }
     },
     "mdn-data": {
@@ -8254,9 +8282,12 @@
       }
     },
     "nanoraf": {
-      "version": "3.0.1",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/nanoraf/-/nanoraf-3.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/nanoraf/-/nanoraf-3.1.0.tgz",
-      "integrity": "sha1-q5+5wle5rcxx2CmCy1jY+jUDdko="
+      "integrity": "sha512-7Emv5Pv/fvgVK6yrud93WsdO4d3AUqLoP38Cpn0chYe+tT/wu25Yl2guxBjE3ngRrI5Yd9DxaTCgCFi1uq7hgQ==",
+      "requires": {
+        "nanoassert": "1.1.0"
+      }
     },
     "nanorouter": {
       "version": "3.1.1",
@@ -8415,6 +8446,24 @@
       "version": "1.0.0-alpha.10",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.0.0-alpha.10.tgz",
       "integrity": "sha512-BSQrRgOfN6L/MoKIa7pRUc7dHvflCXMcqyTBvphixcSsgJTuUd24vAFONuNfVsuwTyz28S1HEc9XN6ZKylk4Hg==",
+<<<<<<< HEAD
+=======
+      "dev": true,
+      "requires": {
+        "semver": "5.5.0"
+      }
+    },
+    "nodesecurity-npm-utils": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/nodesecurity-npm-utils/-/nodesecurity-npm-utils-6.0.0.tgz",
+      "integrity": "sha512-NLRle1woNaT2orR6fue2jNqkhxDTktgJj3sZxvR/8kp21pvOY7Gwlx5wvo0H8ZVPqdgd2nE2ADB9wDu5Cl8zNg==",
+      "dev": true
+    },
+    "nomnom": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/nomnom/-/nomnom-1.6.2.tgz",
+      "integrity": "sha1-hKZqJgF0QI/Ft3oY+IjszET7aXE=",
+>>>>>>> add fxA ui elements
       "dev": true,
       "requires": {
         "semver": "^5.3.0"
@@ -10902,7 +10951,7 @@
         },
         "onetime": {
           "version": "1.1.0",
-          "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
+          "resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
           "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
           "dev": true
         },
@@ -11723,10 +11772,17 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "chalk": "^1.1.3",
             "js-base64": "^2.1.9",
             "source-map": "^0.5.6",
             "supports-color": "^3.2.3"
+=======
+            "chalk": "1.1.3",
+            "js-base64": "2.4.8",
+            "source-map": "0.5.7",
+            "supports-color": "3.2.3"
+>>>>>>> add fxA ui elements
           }
         },
         "supports-color": {
@@ -11948,7 +12004,11 @@
       "integrity": "sha512-xZsFA3uX8MO3yAda03QrG3/Eg1LN3EPfjjf07vke/46HERLZyHrTsQ9E1r1w1W//fWEhtYNndo2hQplN2cVpCQ==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "postcss": "^7.0.0"
+=======
+        "postcss": "7.0.2"
+>>>>>>> add fxA ui elements
       },
       "dependencies": {
         "ansi-styles": {
@@ -11957,7 +12017,11 @@
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "color-convert": "^1.9.0"
+=======
+            "color-convert": "1.9.2"
+>>>>>>> add fxA ui elements
           }
         },
         "chalk": {
@@ -11966,9 +12030,15 @@
           "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
             "supports-color": "^5.3.0"
+=======
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.4.0"
+>>>>>>> add fxA ui elements
           }
         },
         "postcss": {
@@ -11977,9 +12047,15 @@
           "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
             "supports-color": "^5.4.0"
+=======
+            "chalk": "2.4.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.4.0"
+>>>>>>> add fxA ui elements
           }
         },
         "source-map": {
@@ -11994,7 +12070,11 @@
           "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "has-flag": "^3.0.0"
+=======
+            "has-flag": "3.0.0"
+>>>>>>> add fxA ui elements
           }
         }
       }
@@ -12063,7 +12143,11 @@
       "integrity": "sha512-um9zdGKaDZirMm+kZFKKVsnKPF7zF7qBAtIfTSnZXD1jZ0JNZIxdB6TxQOjCnlSzLRInVl2v3YdBh/M881C4ug==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "postcss": "^7.0.0"
+=======
+        "postcss": "7.0.2"
+>>>>>>> add fxA ui elements
       },
       "dependencies": {
         "ansi-styles": {
@@ -12072,7 +12156,11 @@
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "color-convert": "^1.9.0"
+=======
+            "color-convert": "1.9.2"
+>>>>>>> add fxA ui elements
           }
         },
         "chalk": {
@@ -12081,9 +12169,15 @@
           "integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
             "supports-color": "^5.3.0"
+=======
+            "ansi-styles": "3.2.1",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "5.4.0"
+>>>>>>> add fxA ui elements
           }
         },
         "postcss": {
@@ -12092,9 +12186,15 @@
           "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "chalk": "^2.4.1",
             "source-map": "^0.6.1",
             "supports-color": "^5.4.0"
+=======
+            "chalk": "2.4.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.4.0"
+>>>>>>> add fxA ui elements
           }
         },
         "source-map": {
@@ -12109,7 +12209,11 @@
           "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "has-flag": "^3.0.0"
+=======
+            "has-flag": "3.0.0"
+>>>>>>> add fxA ui elements
           }
         }
       }
@@ -13965,6 +14069,7 @@
       "integrity": "sha512-pcw0Dpb4Ib/OfgONhaeF+myA+5iZdsI8dYgWs1++IYN/dgvo90O0FhgMDKb1bMgZVy/A2Q1CCN/PFZ0FLnnRnQ==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "autoprefixer": "^9.0.0",
         "balanced-match": "^1.0.0",
         "chalk": "^2.4.1",
@@ -14009,6 +14114,52 @@
         "sugarss": "^1.0.0",
         "svg-tags": "^1.0.0",
         "table": "^4.0.1"
+=======
+        "autoprefixer": "9.0.2",
+        "balanced-match": "1.0.0",
+        "chalk": "2.4.1",
+        "cosmiconfig": "5.0.5",
+        "debug": "3.1.0",
+        "execall": "1.0.0",
+        "file-entry-cache": "2.0.0",
+        "get-stdin": "6.0.0",
+        "globby": "8.0.1",
+        "globjoin": "0.1.4",
+        "html-tags": "2.0.0",
+        "ignore": "4.0.2",
+        "import-lazy": "3.1.0",
+        "imurmurhash": "0.1.4",
+        "known-css-properties": "0.6.1",
+        "lodash": "4.17.10",
+        "log-symbols": "2.2.0",
+        "mathml-tag-names": "2.1.0",
+        "meow": "5.0.0",
+        "micromatch": "2.3.11",
+        "normalize-selector": "0.2.0",
+        "pify": "3.0.0",
+        "postcss": "7.0.2",
+        "postcss-html": "0.31.0",
+        "postcss-less": "2.0.0",
+        "postcss-markdown": "0.31.0",
+        "postcss-media-query-parser": "0.2.3",
+        "postcss-reporter": "5.0.0",
+        "postcss-resolve-nested-selector": "0.1.1",
+        "postcss-safe-parser": "4.0.1",
+        "postcss-sass": "0.3.2",
+        "postcss-scss": "2.0.0",
+        "postcss-selector-parser": "3.1.1",
+        "postcss-styled": "0.31.0",
+        "postcss-syntax": "0.31.0",
+        "postcss-value-parser": "3.3.0",
+        "resolve-from": "4.0.0",
+        "signal-exit": "3.0.2",
+        "specificity": "0.4.0",
+        "string-width": "2.1.1",
+        "style-search": "0.1.0",
+        "sugarss": "1.0.1",
+        "svg-tags": "1.0.0",
+        "table": "4.0.2"
+>>>>>>> add fxA ui elements
       },
       "dependencies": {
         "ansi-styles": {
@@ -14041,12 +14192,21 @@
           "integrity": "sha512-t5PpCq5nCNzgPEzhty83UHYLmteY9FTL3COBfRjL0y4BTDB0OADbHVzG/S7gzqvITSsAZiaJPduoDEv2n68JNQ==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "browserslist": "^4.0.1",
             "caniuse-lite": "^1.0.30000865",
             "normalize-range": "^0.1.2",
             "num2fraction": "^1.2.2",
             "postcss": "^7.0.2",
             "postcss-value-parser": "^3.2.3"
+=======
+            "browserslist": "4.0.1",
+            "caniuse-lite": "1.0.30000865",
+            "normalize-range": "0.1.2",
+            "num2fraction": "1.2.2",
+            "postcss": "7.0.2",
+            "postcss-value-parser": "3.3.0"
+>>>>>>> add fxA ui elements
           }
         },
         "braces": {
@@ -14071,6 +14231,17 @@
             "node-releases": "^1.0.0-alpha.10"
           }
         },
+        "browserslist": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.0.1.tgz",
+          "integrity": "sha512-QqiiIWchEIkney3wY53/huI7ZErouNAdvOkjorUALAwRcu3tEwOV3Sh6He0DnP38mz1JjBpCBb50jQBmaYuHPw==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "1.0.30000865",
+            "electron-to-chromium": "1.3.52",
+            "node-releases": "1.0.0-alpha.10"
+          }
+        },
         "camelcase-keys": {
           "version": "4.2.0",
           "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
@@ -14132,6 +14303,7 @@
           "integrity": "sha512-oMrYrJERnKBLXNLVTqhm3vPEdJ/b2ZE28xN4YARiix1NOIOBPEpOUnm844K1iu/BkphCaf2WNFwMszv8Soi1pw==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "array-union": "^1.0.1",
             "dir-glob": "^2.0.0",
             "fast-glob": "^2.0.2",
@@ -14139,6 +14311,15 @@
             "ignore": "^3.3.5",
             "pify": "^3.0.0",
             "slash": "^1.0.0"
+=======
+            "array-union": "1.0.2",
+            "dir-glob": "2.0.0",
+            "fast-glob": "2.2.2",
+            "glob": "7.1.2",
+            "ignore": "3.3.10",
+            "pify": "3.0.0",
+            "slash": "1.0.0"
+>>>>>>> add fxA ui elements
           },
           "dependencies": {
             "ignore": {
@@ -14150,9 +14331,15 @@
           }
         },
         "ignore": {
+<<<<<<< HEAD
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.3.tgz",
           "integrity": "sha512-Z/vAH2GGIEATQnBVXMclE2IGV6i0GyVngKThcGZ5kHgHMxLo9Ow2+XHRq1aEKEej5vOF1TPJNbvX6J/anT0M7A==",
+=======
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.2.tgz",
+          "integrity": "sha512-uoxnT7PYpyEnsja+yX+7v49B7LXxmzDJ2JALqHH3oEGzpM2U1IGcbfnOr8Dt57z3B/UWs7/iAgPFbmye8m4I0g==",
+>>>>>>> add fxA ui elements
           "dev": true
         },
         "indent-string": {
@@ -14215,6 +14402,7 @@
           "integrity": "sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==",
           "dev": true,
           "requires": {
+<<<<<<< HEAD
             "camelcase-keys": "^4.0.0",
             "decamelize-keys": "^1.0.0",
             "loud-rejection": "^1.0.0",
@@ -14224,6 +14412,17 @@
             "redent": "^2.0.0",
             "trim-newlines": "^2.0.0",
             "yargs-parser": "^10.0.0"
+=======
+            "camelcase-keys": "4.2.0",
+            "decamelize-keys": "1.1.0",
+            "loud-rejection": "1.6.0",
+            "minimist-options": "3.0.2",
+            "normalize-package-data": "2.4.0",
+            "read-pkg-up": "3.0.0",
+            "redent": "2.0.0",
+            "trim-newlines": "2.0.0",
+            "yargs-parser": "10.1.0"
+>>>>>>> add fxA ui elements
           }
         },
         "micromatch": {
@@ -14277,6 +14476,17 @@
             "supports-color": "^5.4.0"
           }
         },
+        "postcss": {
+          "version": "7.0.2",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz",
+          "integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==",
+          "dev": true,
+          "requires": {
+            "chalk": "2.4.1",
+            "source-map": "0.6.1",
+            "supports-color": "5.4.0"
+          }
+        },
         "postcss-selector-parser": {
           "version": "3.1.1",
           "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-3.1.1.tgz",
@@ -14894,12 +15104,21 @@
       "integrity": "sha512-1k+KPhlVtqmG99RaTbAv/usu85fcSRu3wY8X+vnsEhIxNP5VbVIDiXnLqyKIG+UMdyTg0ZX9EI6k2AfjJkHPtA==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "bail": "^1.0.0",
         "extend": "^3.0.0",
         "is-plain-obj": "^1.1.0",
         "trough": "^1.0.0",
         "vfile": "^2.0.0",
         "x-is-string": "^0.1.0"
+=======
+        "bail": "1.0.3",
+        "extend": "3.0.2",
+        "is-plain-obj": "1.1.0",
+        "trough": "1.0.2",
+        "vfile": "2.3.0",
+        "x-is-string": "0.1.0"
+>>>>>>> add fxA ui elements
       }
     },
     "union-value": {
@@ -14991,7 +15210,11 @@
       "integrity": "sha512-XxoNOBvq1WXRKXxgnSYbtCF76TJrRoe5++pD4cCBsssSiWSnPEktyFrFLE8LTk3JW5mt9hB0Sk5zn4x/JeWY7Q==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "unist-util-visit": "^1.1.0"
+=======
+        "unist-util-visit": "1.4.0"
+>>>>>>> add fxA ui elements
       }
     },
     "unist-util-stringify-position": {
@@ -15006,7 +15229,11 @@
       "integrity": "sha512-FiGu34ziNsZA3ZUteZxSFaczIjGmksfSgdKqBfOejrrfzyUy5b7YrlzT1Bcvi+djkYDituJDy2XB7tGTeBieKw==",
       "dev": true,
       "requires": {
+<<<<<<< HEAD
         "unist-util-visit-parents": "^2.0.0"
+=======
+        "unist-util-visit-parents": "2.0.1"
+>>>>>>> add fxA ui elements
       }
     },
     "unist-util-visit-parents": {

package.json

@@ -57,7 +57,7 @@
     "@mattiasbuelens/web-streams-polyfill": "0.1.0-alpha.5",
     "asmcrypto.js": "^2.3.2",
     "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
+    "babel-loader": "^7.1.5",
     "babel-plugin-istanbul": "^4.1.6",
     "babel-plugin-yo-yoify": "^2.0.0",
     "babel-preset-env": "^1.7.0",

public/locales/en-US/send.ftl

@@ -20,6 +20,7 @@ notifyUploadDone = Your upload has finished.
 uploadingPageMessage = Once your file uploads you will be able to set expiry options.
 uploadingPageCancel = Cancel upload
 uploadCancelNotification = Your upload was cancelled.
+downloadCancel = Cancel download
 uploadingPageLargeFileMessage = This file is large and may take a while to upload. Sit tight!
 uploadingFileNotification = Notify me when the upload is complete.
 uploadSuccessConfirmHeader = Ready to Send
@@ -43,6 +44,10 @@ timespanWeeks = { $num ->
         [one] 1 week
        *[other] { $num } weeks
     }
+fileCount = { $num ->
+    [one] 1 file
+   *[other] { $num } files
+}
 copyUrlFormLabelWithName = Copy and share the link to send your file: { $filename }
 copyUrlFormButton = Copy to clipboard
 copiedUrl = Copied!
@@ -107,6 +112,7 @@ footerLinkLegal = Legal
 footerLinkAbout = About Test Pilot
 footerLinkPrivacy = Privacy
 footerLinkTerms = Terms
+footerLinkPrivacyAndTerms = Privacy & Terms
 footerLinkCookies = Cookies
 requirePasswordCheckbox = Require a password to download this file
 addPasswordButton = Add password
@@ -145,6 +151,8 @@ signInEmailEnter = Enter your Email
 emailEntryPlaceholder = Email
 signInContinueMessage = to continue to Firefox Send
 signInContinueButton = Continue
+signInMenuOption = Sign in/up
+accountMenuOption = Firefox Account
 accountBenefitTitle = With a free Firefox Account with Send you can:
 accountBenefitMultiFile = Send multiple files at once
 accountBenefitLargeFiles = Upload larger files (up to { $size } GB)