some wip. still broken

app/base.css

@@ -31,20 +31,13 @@ html {
 }
 
 body {
-  display: grid;
-  grid-template-columns: minmax(500px, 1080px);
-  grid-template-rows: 54px 700px 54px;
-  align-content: center;
-  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;
+  display: flex;
+  flex-direction: column;
+  font-family: -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,42 +53,47 @@ a {
 }
 
 .main {
+  flex: 1 1 auto;
   background: var(--pageBGColor);
   box-shadow: var(--large-box-shadow);
-  display: grid;
-  grid-template-columns: minmax(400px, 1fr) 1fr;
-  width: 100%;
+  width: 90%;
   height: 100%;
+  max-width: 960px;
+  max-height: 600px;
+  align-self: center;
+  margin: auto 0;
 }
 
-.noscript {
-  text-align: center;
-  border: 3px solid var(--errorColor);
-  border-radius: 6px;
-}
-
-.main__file-manager,
-.main__context {
-  padding: calc(var(--grid-basis) * 2);
-}
-
-.main__file-manager {
-  border-right: 2px solid black;
+.split {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 100%;
 }
 
-.main__context {
+.split__left {
+  height: 100%;
+  width: 360px;
+  margin: 0;
+  border-right: 1px solid #d7d7db;
   display: flex;
   flex-direction: column;
+  text-align: center;
 }
 
-.main__context-footer,
-.main__signup-promo {
+.split__right {
+  flex: 1;
   display: flex;
-  justify-content: flex-end;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+  position: relative;
 }
 
-.main__file-list {
-  flex: 1;
+.noscript {
+  text-align: center;
+  border: 3px solid var(--errorColor);
+  border-radius: 6px;
 }
 
 .footer__mozLogo {
@@ -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) {
-  .description {
-    margin: 0 auto 25px;
+@media (max-device-width: 720px), (max-width: 720px) {
+  body {
+    height: unset;
   }
 
   .main {
-    flex-direction: column;
-    height: 100%;
+    box-shadow: none;
+    align-items: center;
+    max-height: none;
+    width: 100%;
   }
 
-  .spacer {
-    flex: none;
-    height: 0;
+  .split {
+    flex-direction: column-reverse;
+    align-items: center;
+  }
+
+  .split__left {
+    border: none;
+    height: 600px;
   }
 
-  .stripedBox {
-    margin-top: 72px;
-    min-height: 400px;
-    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>
-      <a href="/" class="goBackButton"> 
-        <img src="${assets.get('back-arrow.svg')}"/> 
-      </a>
+    <div class="page">
       ${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`
-    <div class="page">
-      ${titleSection(state)}
-
-      ${downloadedFiles(fileInfo, state, emit)}
+  return split(
+    state,
+    downloadedFiles(fileInfo, state, emit),
+    html`
+    <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`
-    <div class="page effect--fadeIn" id="shareWrapper">
-      <a href="/" class="goBackButton"> 
-        <img src="${assets.get('back-arrow.svg')}"/> 
-      </a>
-      ${expireInfo(file, state.translate)}
-
-      ${uploadedFileList(file, state, emit)}
-
+  return split(
+    state,
+    uploadedFileList(file, state, emit),
+    html`
+    <div class="copySection">
       <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 assets = require('../../../common/assets');
-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');
+const fileManager = require('../../templates/fileManager');
+const split = require('../split');
 
 module.exports = function(state, emit) {
-  // the page flickers if both the server and browser set 'effect--fadeIn'
-  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
-      });
-    }
-  }
+  return split(state, fileManager(state, emit));
 };

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)}