add cancel buttons

app/base.css

@@ -139,6 +139,18 @@ a {
   }
 }
 
+.btn--cancel {
+  font-size: 13px;
+  font-weight: 700;
+  background: none;
+  color: var(--errorColor);
+  border: none;
+}
+
+.uploadCancel:hover {
+  text-decoration: underline;
+}
+
 .input {
   border: 1px solid var(--lightBorderColor);
   font-size: 20px;

app/fileManager.js

@@ -228,7 +228,6 @@ export default function(state, emitter) {
       state.storage.totalDownloads += 1;
       state.transfer.reset();
       metrics.completedDownload({ size, time, speed });
-      //emitter.emit('pushState', '/completed');
     } catch (err) {
       if (err.message === '0') {
         // download cancelled

app/pages/preview/index.js

@@ -5,9 +5,23 @@ const downloadedFiles = require('../../templates/uploadedFileList');
 
 module.exports = function(state, emit) {
   const storageFile = state.storage.getFileById(state.params.id);
-
   const multifiles = Array.from(storageFile.manifest.files);
 
+  const trySendLink = html`
+    <a class="link link--action" href="/">
+      ${state.translate('sendYourFilesLink')}
+    </a>`;
+  const cancelButton = html`
+    <button class="btn--cancel"
+      onclick=${cancel}
+    >
+      ${state.translate('downloadCancel')}
+    </button>
+  `;
+
+  const bottomLink =
+    state.transfer.state === 'downloading' ? cancelButton : trySendLink;
+
   return html`
     <div class="page">
       ${titleSection(state)}
@@ -16,10 +30,14 @@ module.exports = function(state, emit) {
       <div class="description">${state.translate('downloadMessage2')}</div>
       ${downloadButton(state, emit)}
 
-      <a class="link link--action" href="/">
+      ${bottomLink}
-        ${state.translate('sendYourFilesLink')}
-      </a>
 
     </div>
   `;
+
+  function cancel() {
+    if (state.transfer.state === 'downloading') {
+      emit('cancel');
+    }
+  }
 };

app/pages/share/index.js

@@ -57,11 +57,11 @@ module.exports = function(state, emit) {
         )}
       </div>
 
-      <a
+      <button
-        class="error btn--delete"
+        class="btn--cancel btn--delete"
         title="${state.translate('deleteFileButton')}"
         onclick=${showPopup}>${state.translate('deleteFileButton')}
-      </a>
+      </button>
 
     </div>
 

app/pages/share/share.css

@@ -58,15 +58,10 @@
   border-color: var(--successControlBGColor);
 }
 
-.copyBtn {
-  transition: background 0.5s;
-}
-
 .copyBtn--copied,
 .copyBtn--copied:hover {
   background: var(--successControlBGColor);
   color: var(--successControlFGColor);
-  transition: background 0s;
 }
 
 .btn--delete {

app/pages/welcome/index.js

@@ -13,6 +13,7 @@ module.exports = function(state, emit) {
 
   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 selectFileClass = files.length > 0 ? 'btn--hidden' : '';
   const sendFileClass = files.length > 0 ? '' : 'btn--hidden';
@@ -81,6 +82,11 @@ module.exports = function(state, emit) {
       ${btnText}
     </button>
 
+    <button class="btn--cancel uploadCancel ${cancelVisible}"
+      onclick=${cancel}>
+      ${state.translate('uploadingPageCancel')}
+    </button>
+
   </div>
   `;
 
@@ -102,6 +108,14 @@ module.exports = function(state, emit) {
     event.target.classList.remove('inputFile--focused');
   }
 
+  function cancel(event) {
+    if (state.uploading) {
+      emit('cancel');
+      const cancelBtn = document.querySelector('.uploadCancel');
+      cancelBtn.innerHTML = state.translate('uploadCancelNotification');
+    }
+  }
+
   async function addFiles(event) {
     event.preventDefault();
     const target = event.target;

app/pages/welcome/welcome.css

@@ -87,3 +87,7 @@
   opacity: 0.5;
   pointer-events: none;
 }
+
+.uploadCancel {
+  margin: 6px 0 0;
+}

app/templates/footer/index.js

@@ -4,14 +4,6 @@ const assets = require('../../../common/assets');
 module.exports = function(state) {
   const footer = html`<footer class="footer">
     <div class="legalSection">
-      <a
-        href="https://www.mozilla.org"
-        class="legalSection__link">
-        <img
-          class="legalSection__mozLogo"
-          src="${assets.get('mozilla-logo.svg')}"
-          alt="mozilla"/>
-      </a>
       <a
         href="https://www.mozilla.org/about/legal"
         class="legalSection__link">
@@ -38,6 +30,16 @@ module.exports = function(state) {
         class="legalSection__link">
         ${state.translate('reportIPInfringement')}
       </a>
+
+      <a
+        href="https://www.mozilla.org"
+        class="legalSection__link">
+        <img
+          class="legalSection__mozLogo"
+          src="${assets.get('mozilla-logo.svg')}"
+          alt="mozilla"/>
+      </a>
+
       <a
         href="https://github.com/mozilla/send"
         class="socialSection__link">
@@ -50,9 +52,9 @@ module.exports = function(state) {
         href="https://twitter.com/FxTestPilot"
         class="socialSection__link">
         <img
-          class="legalSection__mozLogo"
+          class="socialSection__icon"
-          src="${assets.get('mozilla-logo.svg')}"
+          src="${assets.get('twitter-icon.svg')}"
-          alt="mozilla"/>
+          alt="twitter"/>
       </a>
     </div>
   </footer>`;

app/templates/uploadedFile/index.js

@@ -6,23 +6,20 @@ const fileIcon = require('../fileIcon');
 module.exports = function(file, state, emit) {
   const transfer = state.transfer;
   const transferState = transfer ? transfer.state : null;
-  const transferring = state.uploading || state.downloading;
   const share = state.route.includes('share/');
   const complete = share ? 'uploadedFile--completed' : '';
 
   const cancelVisible =
-    transferring || state.route === '/' ? 'uploadedFile__cancel--visible' : '';
+    state.route === '/' && !state.uploading
+      ? 'uploadedFile__cancel--visible'
+      : '';
 
   const stampClass =
     share || transferState === 'complete' ? 'uploadedFile__stamp--visible' : '';
 
   function cancel(event) {
     event.preventDefault();
-    const btn = document.querySelector('.uploadedFile__cancel');
+    if (state.route === '/') {
-    btn.disabled = true;
-    if (transferring) {
-      emit('cancel');
-    } else if (state.route === '/') {
       emit('removeUpload', { file });
     }
   }