some wip. still broken

app/base.css

@@ -31,20 +31,13 @@ html {
 }
 
 body {
-  display: grid;
+  display: flex;
-  grid-template-columns: minmax(500px, 1080px);
+  flex-direction: column;
-  grid-template-rows: 54px 700px 54px;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'segoe ui',
-  align-content: center;
+    'helvetica neue', helvetica, ubuntu, roboto, noto, arial, sans-serif;
-  align-items: center;
-  justify-items: stretch;
-  justify-content: center;
-  font-family: Futura, -apple-system, BlinkMacSystemFont, 'SF Pro Text',
-    'segoe ui', 'helvetica neue', helvetica, ubuntu, roboto, noto, arial,
-    sans-serif;
   height: 100vh;
-  background: #f9f9fa;
   margin: 0;
-  padding: var(--grid-basis);
+  background-color: #f8f9fa;
 }
 
 input,
@@ -60,12 +53,41 @@ a {
 }
 
 .main {
+  flex: 1 1 auto;
   background: var(--pageBGColor);
   box-shadow: var(--large-box-shadow);
-  display: grid;
+  width: 90%;
-  grid-template-columns: minmax(400px, 1fr) 1fr;
-  width: 100%;
   height: 100%;
+  max-width: 960px;
+  max-height: 600px;
+  align-self: center;
+  margin: auto 0;
+}
+
+.split {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.split__left {
+  height: 100%;
+  width: 360px;
+  margin: 0;
+  border-right: 1px solid #d7d7db;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+}
+
+.split__right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
 }
 
 .noscript {
@@ -74,30 +96,6 @@ a {
   border-radius: 6px;
 }
 
-.main__file-manager,
-.main__context {
-  padding: calc(var(--grid-basis) * 2);
-}
-
-.main__file-manager {
-  border-right: 2px solid black;
-}
-
-.main__context {
-  display: flex;
-  flex-direction: column;
-}
-
-.main__context-footer,
-.main__signup-promo {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.main__file-list {
-  flex: 1;
-}
-
 .footer__mozLogo {
   width: 112px;
   height: 32px;
@@ -107,11 +105,10 @@ a {
 .btn {
   display: flex;
   width: 100%;
-  height: 70px;
   line-height: 1.2;
   align-items: center;
   justify-content: center;
-  padding: 0 10px;
+  padding: 16px;
   font-size: 17px;
   font-weight: 500;
   text-transform: uppercase;
@@ -190,7 +187,9 @@ a {
 
 .page {
   height: 100%;
-  margin: 0;
+  width: 75%;
+  margin: 0 auto;
+  padding: 24px;
   display: flex;
   flex-direction: column;
   text-align: center;
@@ -226,13 +225,6 @@ a {
   }
 }
 
-.goBackButton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  margin: 18px;
-}
-
 .error {
   color: var(--errorColor);
   font-weight: 600;
@@ -261,6 +253,10 @@ a {
   visibility: visible !important;
 }
 
+.invisible {
+  visibility: hidden;
+}
+
 .noDisplay {
   display: none !important;
 }
@@ -269,39 +265,34 @@ a {
   flex: 1;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
+@media (max-device-width: 720px), (max-width: 720px) {
-  .description {
+  body {
-    margin: 0 auto 25px;
+    height: unset;
   }
 
   .main {
-    flex-direction: column;
+    box-shadow: none;
-    height: 100%;
+    align-items: center;
+    max-height: none;
+    width: 100%;
   }
 
-  .spacer {
+  .split {
-    flex: none;
+    flex-direction: column-reverse;
-    height: 0;
+    align-items: center;
   }
 
-  .stripedBox {
+  .split__left {
-    margin-top: 72px;
+    border: none;
-    min-height: 400px;
+    height: 600px;
-    flex: 1;
+  }
+
+  .description {
+    margin: 0 auto 25px;
   }
 
   .uploads {
     flex: none;
     padding-top: 6px;
   }
-
-  .footer {
-    margin: 15px;
-  }
-}
-
-@media (max-device-width: 700px), (max-width: 700px) {
-  .stripedBox {
-    margin-top: 72px;
-  }
 }

app/main.css

@@ -2,12 +2,12 @@
 @import './pages/share/share.css';
 @import './pages/signin/signin.css';
 @import './pages/unsupported/unsupported.css';
-@import './pages/welcome/welcome.css';
 @import './templates/downloadButton/downloadButton.css';
 @import './templates/downloadPassword/downloadPassword.css';
 @import './templates/file/file.css';
 @import './templates/fileIcon/fileIcon.css';
 @import './templates/fileList/fileList.css';
+@import './templates/fileManager/fileManager.css';
 @import './templates/footer/footer.css';
 @import './templates/fxPromo/fxPromo.css';
 @import './templates/header/header.css';

app/pages/legal.js

@@ -1,14 +1,10 @@
 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>
+    <div class="page">
-      <a href="/" class="goBackButton"> 
-        <img src="${assets.get('back-arrow.svg')}"/> 
-      </a>
       ${title(state)}
       <div class="title">${state.translate('legalHeader')}</div>
         ${raw(

app/pages/preview/index.js

@@ -1,7 +1,7 @@
 const html = require('choo/html');
-const titleSection = require('../../templates/title');
 const downloadButton = require('../../templates/downloadButton');
 const downloadedFiles = require('../../templates/uploadedFileList');
+const split = require('../split');
 
 module.exports = function(state, emit) {
   const fileInfo = state.fileInfo;
@@ -21,18 +21,16 @@ module.exports = function(state, emit) {
   const bottomLink =
     state.transfer.state === 'downloading' ? cancelButton : trySendLink;
 
-  return html`
+  return split(
-    <div class="page">
+    state,
-      ${titleSection(state)}
+    downloadedFiles(fileInfo, state, emit),
-
+    html`
-      ${downloadedFiles(fileInfo, state, emit)}
+    <div class="copySection">
       <div class="description">${state.translate('downloadMessage2')}</div>
       ${downloadButton(state, emit)}
-
       ${bottomLink}
-
+    </div>`
-    </div>
+  );
-  `;
 
   function cancel() {
     if (state.transfer.state === 'downloading') {

app/pages/share/index.js

@@ -1,11 +1,11 @@
 const html = require('choo/html');
 const raw = require('choo/html/raw');
-const assets = require('../../../common/assets');
 const notFound = require('../notFound');
 const deletePopup = require('../../templates/popup');
 const uploadedFileList = require('../../templates/uploadedFileList');
 const timeLimitText = require('../../templates/timeLimitText');
-const { allowedCopy, delay, fadeOut } = require('../../utils');
+const { allowedCopy, delay } = require('../../utils');
+const split = require('../split');
 
 module.exports = function(state, emit) {
   const file = state.storage.getFileById(state.params.id);
@@ -17,16 +17,13 @@ module.exports = function(state, emit) {
     ? ''
     : 'passwordReminder--hidden';
 
-  return html`
+  return split(
-    <div class="page effect--fadeIn" id="shareWrapper">
+    state,
-      <a href="/" class="goBackButton"> 
+    uploadedFileList(file, state, emit),
-        <img src="${assets.get('back-arrow.svg')}"/> 
+    html`
-      </a>
+    <div class="copySection">
-      ${expireInfo(file, state.translate)}
-
-      ${uploadedFileList(file, state, emit)}
-
       <div class="sharePage__copyText">
+        ${expireInfo(file, state.translate)}
         ${state.translate('copyUrlLabel')}
         <div class="sharePage__passwordReminder ${passwordReminderClass}">(don't forget the password too)</div>
       </div>
@@ -43,7 +40,7 @@ module.exports = function(state, emit) {
         title="${state.translate('copyUrlFormButton')}"
         onclick=${copyLink}>${state.translate('copyUrlFormButton')}
       </button>
-      
+
       <div class="sharePage__deletePopup">
         ${deletePopup(
           state.translate('deletePopupText'),
@@ -58,10 +55,8 @@ module.exports = function(state, emit) {
         title="${state.translate('deleteFileButton')}"
         onclick=${showDeletePopup}>${state.translate('deleteFileButton')}
       </button>
-
+    </div>`
-    </div>
+  );
-
-  `;
 
   function showDeletePopup() {
     const popup = document.querySelector('.popup');
@@ -91,7 +86,6 @@ module.exports = function(state, emit) {
 
   async function deleteFile() {
     emit('delete', { file, location: 'success-screen' });
-    await fadeOut('#shareWrapper');
     emit('pushState', '/');
   }
 };

app/pages/share/share.css

@@ -22,17 +22,15 @@
 }
 
 .shareTitle {
-  color: var(--textColor);
   margin: 8px auto 15px;
-  text-align: center;
-  font-family: 'SF Pro Text', sans-serif;
-  font-size: 12px;
-  font-style: italic;
-  width: 280px;
 }
 
 .copySection {
-  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 24px auto;
+  width: 80%;
 }
 
 .copySection__url {
@@ -48,6 +46,7 @@
   letter-spacing: 0;
   line-height: 18px;
   font-weight: 500;
+  width: 100%;
 }
 
 .copySection__url:disabled {

app/pages/signin/index.js

@@ -7,9 +7,6 @@ const bytes = require('../../utils').bytes;
 module.exports = function(state, emit) {
   return html`
     <div class="page signInPage">
-      <a href="/" class="goBackButton">
-        <img src="${assets.get('back-arrow.svg')}"/>
-      </a>
       ${title(state)}
       <div class="signIn__info flexible">
         ${state.translate('accountBenefitTitle')}

app/pages/split.js

@@ -0,0 +1,18 @@
+const html = require('choo/html');
+const title = require('../templates/title');
+const signupPromo = require('../templates/signupPromo');
+
+module.exports = function(state, a, b) {
+  return html`
+    <div class="split">
+      <div class="split__left">
+        ${title(state)}
+        ${a}
+      </div>
+      <div class="split__right">
+        ${signupPromo(state)}
+        ${b}
+      </div>
+    </div>
+  `;
+};

app/pages/welcome/index.js

@@ -1,163 +1,6 @@
-const html = require('choo/html');
+const fileManager = require('../../templates/fileManager');
-const assets = require('../../../common/assets');
+const split = require('../split');
-const title = require('../../templates/title');
-const signupPromo = require('../../templates/signupPromo');
-const fileList = require('../../templates/fileList');
-const setPasswordSection = require('../../templates/setPasswordSection');
-const uploadBox = require('../../templates/uploadedFileList');
-const expireInfo = require('../../templates/expireInfo');
 
 module.exports = function(state, emit) {
-  // the page flickers if both the server and browser set 'effect--fadeIn'
+  return split(state, fileManager(state, emit));
-  const fade = state.layout ? '' : 'effect--fadeIn';
-
-  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 = hasAnUpload ? 'uploadArea--faded' : '';
-  const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
-  const sendFileClass = hasAnUpload > 0 ? '' : 'btn--hidden';
-
-  let btnText = '';
-
-  if (state.encrypting) {
-    btnText = state.translate('encryptingFile');
-  } else if (state.uploading) {
-    btnText = `sending...  ${Math.floor(state.transfer.progressRatio * 100)}%`;
-  } else {
-    //default pre-upload text
-    btnText = state.translate('uploadSuccessConfirmHeader');
-  }
-
-  return html`
-  <div class="${fade} welcome">
-    ${title(state)}
-
-    <div class="welcome__file-manager">
-    </div>
-    <div class="welcome__context">
-      <div class="welcome__signup-promo">
-        ${signupPromo(state)}
-      </div>
-      <div class="welcome__file-list">
-        ${fileList(state)}
-      </div>
-      <div class="welcome__context-footer">
-        <a
-          href="https://www.mozilla.org"
-          class="socialSection__link">
-          <img
-            class="footer__mozLogo"
-            src="${assets.get('mozilla-logo.svg')}"
-            alt="mozilla"/>
-        </a>
-      </div>
-    </div>
-
-    <label class="uploadArea"
-
-      ondragover=${dragover}
-      ondragleave=${dragleave}>
-
-      ${uploadBox(state.archive, state, emit)}
-
-      <div class="uploadedFilesWrapper ${faded}">
-        <img
-          class="uploadArea__icon"
-          src="${assets.get('addfile.svg')}"
-          title="${state.translate('uploadSvgAlt')}"/>
-        <div class="uploadArea__msg">
-          ${state.translate('uploadDropDragMessage')}
-        </div>
-
-        <span class="uploadArea__clickMsg">
-          ${state.translate('uploadDropClickMessage')}
-        </span>
-      </div>
-
-      <input id="file-upload"
-        class="inputFile fileBox"
-        type="file"
-        multiple
-        name="fileUploaded"
-        onfocus=${onfocus}
-        onblur=${onblur}
-        onchange=${addFiles} />
-
-    </label>
-
-    <div class="uploadOptions ${optionClass}">
-    ${expireInfo(state, emit)}
-    ${setPasswordSection(state)}
-    </div>
-
-    <label for="file-upload"
-      class="btn btn--file ${selectFileClass}"
-      title="${state.translate('uploadPageBrowseButton1')}">
-      ${state.translate('uploadPageBrowseButton1')}
-    </label>
-
-    <button
-      class="btn ${btnUploading} ${sendFileClass}"
-      onclick=${state.uploading ? noop : upload}
-      title="${btnText}">
-      ${btnText}
-    </button>
-
-    <button class="btn--cancel uploadCancel ${cancelVisible}"
-      onclick=${cancel}>
-      ${state.translate('uploadingPageCancel')}
-    </button>
-
-  </div>
-  `;
-
-  function noop() {}
-
-  function dragover(event) {
-    const div = document.querySelector('.uploadArea');
-    div.classList.add('uploadArea--dragging');
-  }
-
-  function dragleave(event) {
-    const div = document.querySelector('.uploadArea');
-    div.classList.remove('uploadArea--dragging');
-  }
-
-  function onfocus(event) {
-    event.target.classList.add('inputFile--focused');
-  }
-
-  function onblur(event) {
-    event.target.classList.remove('inputFile--focused');
-  }
-
-  function cancel(event) {
-    if (state.uploading) {
-      emit('cancel');
-      const cancelBtn = document.querySelector('.uploadCancel');
-      cancelBtn.innerHTML = state.translate('uploadCancelNotification');
-    }
-  }
-
-  function addFiles(event) {
-    event.preventDefault();
-    const newFiles = Array.from(event.target.files);
-
-    emit('addFiles', { files: newFiles });
-  }
-
-  function upload(event) {
-    event.preventDefault();
-    event.target.disabled = true;
-    if (!state.uploading) {
-      emit('upload', {
-        type: 'click',
-        dlimit: state.downloadCount || 1,
-        password: state.password
-      });
-    }
-  }
 };

app/routes/index.js

@@ -31,17 +31,6 @@ module.exports = function() {
       ${banner(state, emit)}
       ${header(state, emit)}
       <main class="main">
-        <noscript>
-          <div class="noscript">
-            <h2>${state.translate('javascriptRequired')}</h2>
-            <p>
-              <a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
-              ${state.translate('whyJavascript')}
-              </a>
-            </p>
-            <p>${state.translate('enableJavascript')}</p>
-          </div>
-        </noscript>
         ${page(state, emit)}
       </main>
       ${footer(state)}

app/templates/fileIcon/fileIcon.css

@@ -4,7 +4,7 @@
   pointer-events: none;
   margin: 8px;
   color: #fff;
-  background-image: url('../assets/red_file.svg');
+  background-image: url('../assets/blue_file.svg');
   width: 22px;
   height: 32px;
   overflow: hidden;

app/templates/fileManager/fileManager.css

@@ -1,15 +1,19 @@
+.fileManager {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .uploadArea {
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
-  border: 2px dashed rgba(12, 12, 13, 0.2);
-  margin: 0 0 10px;
-  height: 400px;
   overflow: scroll;
   transition: transform 150ms;
   flex: 1;
+  min-height: 90px;
 }
 
 .uploadArea__msg {
@@ -70,6 +74,7 @@
   top: 0;
   left: 0;
   flex: none;
+  height: 100%;
   width: 100%;
   border: none;
   z-index: 1;
@@ -79,6 +84,7 @@
   text-align: left;
   font-size: 13px;
   color: var(--lightTextColor);
+  margin: 24px;
 }
 
 .uploadOptions--faded {

app/templates/fileManager/index.js

@@ -0,0 +1,129 @@
+const html = require('choo/html');
+const assets = require('../../../common/assets');
+const setPasswordSection = require('../setPasswordSection');
+const uploadBox = require('../uploadedFileList');
+const expireInfo = require('../expireInfo');
+
+module.exports = function(state, emit) {
+  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 = hasAnUpload ? 'noDisplay' : '';
+  const selectFileClass = hasAnUpload > 0 ? 'btn--hidden' : '';
+  const sendFileClass = hasAnUpload > 0 ? 'btn--file' : 'btn--hidden';
+
+  let btnText = '';
+
+  if (state.encrypting) {
+    btnText = state.translate('encryptingFile');
+  } else if (state.uploading) {
+    btnText = `sending...  ${Math.floor(state.transfer.progressRatio * 100)}%`;
+  } else {
+    //default pre-upload text
+    btnText = state.translate('uploadSuccessConfirmHeader');
+  }
+
+  return html`<div class="fileManager">
+    <label class="uploadArea"
+      ondragover=${dragover}
+      ondragleave=${dragleave}>
+
+      ${uploadBox(state.archive, state, emit)}
+
+      <div class="uploadedFilesWrapper ${faded}">
+        <img
+          src="${assets.get('addfile.svg')}"
+          title="${state.translate('uploadSvgAlt')}"/>
+        <div class="uploadArea__msg">
+          ${state.translate('uploadDropDragMessage')}
+        </div>
+
+        <span class="uploadArea__clickMsg">
+          ${state.translate('uploadDropClickMessage')}
+        </span>
+      </div>
+
+      <input id="file-upload"
+        class="inputFile fileBox"
+        type="file"
+        multiple
+        name="fileUploaded"
+        onfocus=${onfocus}
+        onblur=${onblur}
+        onchange=${addFiles} />
+
+    </label>
+
+    <div class="uploadOptions ${optionClass}">
+    ${expireInfo(state, emit)}
+    ${setPasswordSection(state)}
+    </div>
+
+    <label for="file-upload"
+      class="btn btn--file ${selectFileClass}"
+      title="${state.translate('uploadPageBrowseButton1')}">
+      ${state.translate('uploadPageBrowseButton1')}
+    </label>
+
+    <button
+      class="btn ${btnUploading} ${sendFileClass}"
+      onclick=${state.uploading ? noop : upload}
+      title="${btnText}">
+      ${btnText}
+    </button>
+
+    <button class="btn--cancel uploadCancel ${cancelVisible}"
+      onclick=${cancel}>
+      ${state.translate('uploadingPageCancel')}
+    </button>
+  </div>`;
+
+  function noop() {}
+
+  function dragover(event) {
+    const div = document.querySelector('.uploadArea');
+    div.classList.add('uploadArea--dragging');
+  }
+
+  function dragleave(event) {
+    const div = document.querySelector('.uploadArea');
+    div.classList.remove('uploadArea--dragging');
+  }
+
+  function onfocus(event) {
+    event.target.classList.add('inputFile--focused');
+  }
+
+  function onblur(event) {
+    event.target.classList.remove('inputFile--focused');
+  }
+
+  function cancel(event) {
+    if (state.uploading) {
+      emit('cancel');
+      const cancelBtn = document.querySelector('.uploadCancel');
+      cancelBtn.innerHTML = state.translate('uploadCancelNotification');
+    }
+  }
+
+  function addFiles(event) {
+    event.preventDefault();
+    const newFiles = Array.from(event.target.files);
+
+    emit('addFiles', { files: newFiles });
+  }
+
+  function upload(event) {
+    event.preventDefault();
+    event.target.disabled = true;
+    if (!state.uploading) {
+      emit('upload', {
+        type: 'click',
+        dlimit: state.downloadCount || 1,
+        password: state.password
+      });
+    }
+  }
+};

app/templates/footer/footer.css

@@ -1,14 +1,11 @@
 .footer {
-  margin: 0 auto;
+  flex: none;
+  margin: 24px;
   font-size: 12px;
   font-weight: 600;
   display: flex;
   flex-direction: row;
-  box-sizing: border-box;
   justify-content: flex-end;
-  align-items: center;
-  padding-top: var(--grid-basis);
-  width: 100%;
 }
 
 .legalSection {
@@ -33,19 +30,13 @@
   margin: 0 0 -5px calc(var(--grid-basis) * 2);
 }
 
-.dropDownArrow {
-  display: none;
-}
-
 .dropdown__only {
   display: none;
 }
 
-@media (max-device-width: 750px), (max-width: 750px) {
+@media (max-device-width: 720px), (max-width: 720px) {
   .footer {
-    align-items: flex-end;
+    justify-content: flex-start;
-    margin: 0;
-    min-width: 455px;
   }
 
   .footer_hiddenIcon {
@@ -56,20 +47,9 @@
     display: block;
   }
 
-  .dropDownArrow {
-    display: initial;
-    float: right;
-  }
-
   .legalSection {
-    flex: 0;
+    flex-direction: column;
-    background-color: #fff;
-    display: block;
-    border-radius: 4px;
-    border: 1px solid rgba(12, 12, 13, 0.1);
-    box-sizing: border-box;
     text-align: left;
-    margin-right: auto;
   }
 
   .legalSection__link {
@@ -93,8 +73,4 @@
     color: var(--primaryControlFGColor);
     background-color: var(--primaryControlBGColor);
   }
-
-  .footer__noDisplay {
-    display: none;
-  }
 }

app/templates/footer/index.js

@@ -3,18 +3,11 @@ const assets = require('../../../common/assets');
 
 module.exports = function(state) {
   const footer = html`<footer class="footer">
-    <div class="legalSection"
+    <div class="legalSection">
-      onmouseover=${showDropDown}
+      <a class="legalSection__link"
-      onmouseout=${hideDropDown}>
+        href="https://www.mozilla.org/about/legal">
-
+        ${state.translate('footerLinkLegal')}
-      <div class="legalSection__menu">
+      </a>
-        <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 footer__dropdown footer__noDisplay">
@@ -71,18 +64,4 @@ 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/fxPromo/fxPromo.css

@@ -10,10 +10,6 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
 }
 
 .fxPromo > div {

app/templates/header/header.css

@@ -1,16 +1,27 @@
 .header {
-  align-items: flex-end;
+  flex: none;
   display: flex;
   flex-direction: row;
-  height: calc(var(--grid-basis) * 4);
+  align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 64px;
+  background-color: white;
+  box-shadow: 0 -1px 0 0 #d7d7db7f, 0 2px 6px 0 #0000001e;
 }
 
 .header h1 {
   margin: 0;
 }
 
+.header__controls {
+  justify-self: end;
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 8px;
+  align-items: center;
+}
+
 .feedback {
   background-color: #979797;
   background-image: url('../assets/feedback.svg');
@@ -26,6 +37,4 @@
   text-indent: 2px;
   transition: all 250ms ease-in-out;
   white-space: nowrap;
-  margin-left: calc(var(--grid-basis) * 2);
-  margin-bottom: 8px;
 }

app/templates/header/index.js

@@ -9,14 +9,16 @@ module.exports = function(state, emit) {
 
   const header = html`
   <header class="header">
-    <h1>Firefox Send</h1>
+    <h1><a href="/">Firefox Send</a></h1>
-    ${userAccount(state, emit)}
+    <div class="header__controls">
-    <a href="${feedbackUrl}"
+      ${userAccount(state, emit)}
-      rel="noreferrer noopener"
+      <a href="${feedbackUrl}"
-      class="feedback"
+        rel="noreferrer noopener"
-      alt="Feedback"
+        class="feedback"
-      target="_blank">${state.translate('siteFeedback')}
+        alt="Feedback"
-    </a>
+        target="_blank">${state.translate('siteFeedback')}
+      </a>
+    </div>
   </header>`;
   // HACK
   // We only want to render this once because we

app/templates/setPasswordSection/index.js

@@ -3,7 +3,7 @@ const passwordInput = require('../passwordInput');
 
 module.exports = function(state) {
   const checked = state.password ? 'checked' : '';
-  const label = state.password ? 'addPasswordLabel' : 'addPasswordMessage';
+  const label = state.password ? '' : 'addPasswordMessage';
 
   return html`
   <div class="setPasswordSection">
@@ -15,7 +15,7 @@ module.exports = function(state) {
         autocomplete="off"
         onchange=${togglePasswordInput}/>
       <label class="checkbox__label" for="add-password">
-        ${state.translate(label)}
+        ${label && state.translate(label)}
       </label>
     </div>
 
@@ -32,7 +32,7 @@ module.exports = function(state) {
 
     const label = document.querySelector('.checkbox__label');
     if (boxChecked) {
-      label.innerHTML = state.translate('addPasswordLabel');
+      label.innerHTML = ''; //state.translate('addPasswordLabel');
       unlockInput.focus();
     } else {
       label.innerHTML = state.translate('addPasswordMessage');

app/templates/setPasswordSection/setPasswordSection.css

@@ -5,7 +5,6 @@
 }
 
 .checkbox {
-  flex: auto;
   height: 24px;
 }
 

app/templates/signupPromo/index.js

@@ -4,6 +4,7 @@ module.exports = function(state) {
   if (state.user.loggedIn || !state.capabilities.account) {
     return null;
   }
+
   return html`
   <a href="/signin" class="signupPromo">
     <div class="signupPromo__title">${state.translate('signInPromoText')}</div>

app/templates/signupPromo/signupPromo.css

@@ -9,6 +9,10 @@
   text-align: center;
   justify-content: center;
   transition: background 100ms;
+  margin: 24px;
+  position: absolute;
+  top: 0;
+  right: 0;
 }
 
 .signupPromo:hover {

app/templates/title/title.css

@@ -1,10 +1,9 @@
 .boxTitle {
-  margin: -2px 0 9px;
+  margin: 24px;
-  text-align: left;
+  text-align: center;
   font-weight: bold;
 }
 
 .boxSubtitle {
-  text-align: left;
   font-weight: normal;
 }

app/templates/uploadedFile/index.js

@@ -4,19 +4,11 @@ const bytes = require('../../utils').bytes;
 const fileIcon = require('../fileIcon');
 
 module.exports = function(file, index, state, emit, hasPassword) {
-  const transfer = state.transfer;
-  const transferState = transfer ? transfer.state : null;
-  const share = state.route.includes('share/');
-  const complete = share ? 'uploadedFile--completed' : '';
-
   const cancelVisible =
     state.route === '/' && !state.uploading
       ? 'uploadedFile__cancel--visible'
       : '';
 
-  const stampClass =
-    share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
-
   function cancel(event) {
     event.preventDefault();
     if (state.route === '/') {
@@ -25,8 +17,7 @@ module.exports = function(file, index, state, emit, hasPassword) {
   }
 
   return html`
-    <li class="uploadedFile ${complete}" id="${file.id}" 
+    <li class="uploadedFile" id="${file.id}">
-    >
 
       ${fileIcon(file.name, hasPassword)}
 
@@ -43,9 +34,6 @@ module.exports = function(file, index, state, emit, hasPassword) {
           <span>${bytes(file.size)}</span>
         </p>
       </div>
-
-      <img src="${assets.get('sent-done.svg')}"
-           class="uploadedFile__stamp ${stampClass}"/> 
     </li>
   `;
 };

app/templates/uploadedFile/uploadedFile.css

@@ -13,10 +13,6 @@
   position: relative;
 }
 
-.uploadedFile--completed {
-  background-color: #e8f2fe;
-}
-
 .uploadedFile__fileData {
   margin: 8px 16px 8px 44px;
 }

app/templates/uploadedFileList/uploadedFileList.css

@@ -1,7 +1,5 @@
 .uploadedFiles {
-  border: 1px solid rgba(12, 12, 13, 0.1);
+  background: rgba(132, 193, 255, 0.1);
-  border-radius: 4px;
-  box-sizing: border-box;
   margin: 0;
   padding: 0;
   align-content: center;

app/templates/userAccount/userAccount.css

@@ -1,6 +1,5 @@
 .account {
   padding: 0;
-  margin-bottom: var(--grid-basis);
 }
 
 .account__avatar {
@@ -12,9 +11,6 @@
 .account_dropdown {
   z-index: 2;
   position: absolute;
-  top: 30px;
-  left: -15px;
-  min-width: 150px;
   list-style-type: none;
   border: 1px solid #ccc;
   border-radius: 4px;

server/layout.js

@@ -73,6 +73,17 @@ module.exports = function(state, body = '') {
     <script defer src="${assets.get('cryptofill.js')}"></script>
     <script defer src="${assets.get('app.js')}"></script>
   </head>
+  <noscript>
+    <div class="noscript">
+      <h2>${state.translate('javascriptRequired')}</h2>
+      <p>
+        <a class="link" href="https://github.com/mozilla/send/blob/master/docs/faq.md#why-does-firefox-send-require-javascript">
+        ${state.translate('whyJavascript')}
+        </a>
+      </p>
+      <p>${state.translate('enableJavascript')}</p>
+    </div>
+  </noscript>
   ${body}
   ${initScript(state)}
   </html>