Merge branch 'master' of github.com:mozilla/send into localization

README.md

@@ -6,7 +6,7 @@
 
 ## What it does
 
-A P2P file sharing experiment which allows you to send encrypted files to other users.
+A file sharing experiment which allows you to send encrypted files to other users.
 
 ## Requirements
 
@@ -48,20 +48,3 @@ Pull requests are always welcome! Feel free to check out the list of ["good firs
 ## License
 
 [Mozilla Public License Version 2.0](LICENSE)
-
- **Entypo**
-
-   Copyright (C) 2012 by Daniel Bruce
-
-   Author:    Daniel Bruce
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.entypo.com
-
-
- **Font Awesome**
-
-   Copyright (C) 2016 by Dave Gandy
-
-   Author:    Dave Gandy
-   License:   SIL ()
-   Homepage:  http://fortawesome.github.com/Font-Awesome/

docs/faq.md

@@ -0,0 +1,32 @@
+## How big of a file can I transfer with Firefox Send?
+
+There is a 2GB file size limit built in to Send, however, in practice you may
+be unable to send files that large.  Send encrypts and decrypts the files in
+the browser which is great for security but will tax your system resources.  In
+particular you can expect to see your memory usage go up by at least the size
+of the file when the transfer is processing.  You can see [the results of some
+testing](https://github.com/mozilla/send/issues/170#issuecomment-314107793).
+For the most reliable operation on common computers, it’s probably best to stay
+under a few hundred megabytes.
+
+## Why is my browser not supported?
+
+We’re using the [Web Cryptography JavaScript API with the AES-GCM
+algorithm](https://www.w3.org/TR/WebCryptoAPI/#aes-gcm) for our encryption.
+Many browsers support this standard and should work fine, but some have not
+implemented it yet (mobile browsers lag behind on this, in
+particular).
+
+## How long are files available for?
+
+Files are available to be downloaded for 24 hours, after which they are removed
+from the server.  They are also removed immediately after a download completes.
+
+## Can a file be downloaded more than once?
+
+Not currently, but we're considering multiple download support in a future
+release.
+
+
+*Disclaimer: Send is an experiment and under active development.  The answers
+here may change as we get feedback from you and the project matures.*

frontend/src/download.js

@@ -6,9 +6,9 @@ require('jquery-circle-progress');
 const Raven = window.Raven;
 $(document).ready(function() {
   $('#download-progress').hide();
-  $('.send-new').click(() => {
+  //link back to homepage
-    window.location.replace(`${window.location.origin}`);
+  $('.send-new').attr('href', window.location.origin);
-  });
+
   const filename = $('#dl-filename').html();
 
   //initiate progress bar
@@ -21,7 +21,6 @@ $(document).ready(function() {
   $('#download-btn').click(download);
   function download() {
     const fileReceiver = new FileReceiver();
-    const name = document.createElement('p');
 
     fileReceiver.on('progress', progress => {
       $('#download-page-one').hide();
@@ -86,7 +85,6 @@ $(document).ready(function() {
         return;
       })
       .then(([decrypted, fname]) => {
-        name.innerText = fname;
         const dataView = new DataView(decrypted);
         const blob = new Blob([dataView]);
         const downloadUrl = URL.createObjectURL(blob);

frontend/src/fileSender.js

@@ -8,6 +8,7 @@ class FileSender extends EventEmitter {
     super();
     this.file = file;
     this.iv = window.crypto.getRandomValues(new Uint8Array(12));
+    this.uploadXHR = new XMLHttpRequest();
   }
 
   static delete(fileId, token) {
@@ -35,6 +36,10 @@ class FileSender extends EventEmitter {
     });
   }
 
+  cancel() {
+    this.uploadXHR.abort();
+  }
+
   upload() {
     const self = this;
     self.emit('loading', true);
@@ -103,7 +108,7 @@ class FileSender extends EventEmitter {
           const fd = new FormData();
           fd.append('data', blob, file.name);
 
-          const xhr = new XMLHttpRequest();
+          const xhr = self.uploadXHR;
 
           xhr.upload.addEventListener('progress', e => {
             if (e.lengthComputable) {

frontend/src/upload.js

@@ -47,7 +47,7 @@ $(document).ready(function() {
     //disable button for 3s
     $copyBtn.attr('disabled', true);
     $('#link').attr('disabled', true);
-    $copyBtn.html('<span class="icon-check"></span>');
+    $copyBtn.html('<img src="/resources/check-16.svg" class="icon-check"></img>');
     window.setTimeout(() => {
       $copyBtn.attr('disabled', false);
       $('#link').attr('disabled', false);
@@ -68,19 +68,10 @@ $(document).ready(function() {
     fill: '#3B9DFF',
     size: 158
   });
-  // link back to home page
+
-  $('.send-new').click(() => {
+  //link back to homepage
-    $('#upload-progress').hide();
+  $('.send-new').attr('href', window.location);
-    $('#share-link').hide();
+
-    $('#upload-error').hide();
-    $copyBtn.attr('disabled', false);
-    $('#link').attr('disabled', false);
-    $copyBtn.attr('data-l10n-id', 'copyUrlFormButton');
-    $('.upload-window').removeClass('ondrag');
-    $('#page-one').show();
-  });
-  //cancel the upload
-  $('#cancel-upload').click(() => {});
   // on file upload by browse or drag & drop
   function onUpload(event) {
     event.preventDefault();
@@ -93,6 +84,12 @@ $(document).ready(function() {
     const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field
 
     const fileSender = new FileSender(file);
+    $('#cancel-upload').click(() => {
+      fileSender.cancel();
+      location.reload();
+      notify('Your upload was cancelled.');
+    });
+
     fileSender.on('progress', progress => {
       $('#page-one').hide();
       $('#upload-error').hide();
@@ -104,19 +101,19 @@ $(document).ready(function() {
         $('.percent-number').html(`${Math.floor(percent * 100)}`);
       });
       if (progress[1] < 1000000) {
-        $('.progress-text').html(
+        $('.progress-text').text(
           `${file.name} (${(progress[0] / 1000).toFixed(
             1
           )}KB of ${(progress[1] / 1000).toFixed(1)}KB)`
         );
       } else if (progress[1] < 1000000000) {
-        $('.progress-text').html(
+        $('.progress-text').text(
           `${file.name} (${(progress[0] / 1000000).toFixed(
             1
           )}MB of ${(progress[1] / 1000000).toFixed(1)}MB)`
         );
       } else {
-        $('.progress-text').html(
+        $('.progress-text').text(
           `${file.name} (${(progress[0] / 1000000).toFixed(
             1
           )}MB of ${(progress[1] / 1000000000).toFixed(1)}GB)`
@@ -219,13 +216,16 @@ $(document).ready(function() {
     const row = document.createElement('tr');
     const name = document.createElement('td');
     const link = document.createElement('td');
+    const $copyIcon = $('<img>', { src: '/resources/copy-16.svg', class: 'icon-copy', title: 'Copy URL' });
     const expiry = document.createElement('td');
     const del = document.createElement('td');
+    const $delIcon = $('<img>', { src: '/resources/close-16.svg', class: 'icon-delete', title: 'Delete' });
     const popupDiv = document.createElement('div');
     const $popupText = $('<div>', { class: 'popuptext' });
     const cellText = document.createTextNode(file.name);
 
     const url = file.url.trim() + `#${file.secretKey}`.trim();
+
     $('#link').attr('value', url);
     $('#copy-text').attr(
       'data-l10n-args',
@@ -252,8 +252,9 @@ $(document).ready(function() {
     link.appendChild(linkSpan);
 
     link.style.color = '#0A8DFF';
+
     //copy link to clipboard when icon clicked
-    $(link).click(function() {
+    $copyIcon.click(function() {
       const aux = document.createElement('input');
       aux.setAttribute('value', url);
       document.body.appendChild(aux);
@@ -265,10 +266,11 @@ $(document).ready(function() {
         link.innerHTML = translated;
       })
       window.setTimeout(() => {
-        const linkSpan = document.createElement('span');
+        const linkImg = document.createElement('img');
-        $(linkSpan).addClass('icon-docs');
+        $(linkImg).addClass('icon-copy');
-        $(linkSpan).attr('data-l10n-id', 'copyUrlHover');
+        $(linkImg).attr('data-l10n-id', 'copyUrlHover');
-        $(link).html(linkSpan);
+        $(linkImg).attr('src', '/resources/copy-16.svg');
+        $(link).html(linkImg);
       }, 500);
     });
 
@@ -325,9 +327,22 @@ $(document).ready(function() {
     $popupText.html([
       popupDelSpan,
       '&nbsp;',
+      '&nbsp;',
       popupNvmSpan
     ]);
 
+
+    // add data cells to table row
+    row.appendChild(name);
+    $(link).append($copyIcon);
+    row.appendChild(link);
+    row.appendChild(expiry);
+    $(popupDiv).append($popupText);
+    $(del).append($delIcon);
+    del.appendChild(popupDiv);
+    row.appendChild(del);
+    $('tbody').append(row); //add row to table
+
     // delete file
     $popupText.find('.del-file').click(e => {
       FileSender.delete(file.fileId, file.deleteToken).then(() => {
@@ -342,17 +357,8 @@ $(document).ready(function() {
         location.reload();
       });
     };
-
-    // add data cells to table row
-    row.appendChild(name);
-    row.appendChild(link);
-    row.appendChild(expiry);
-    $(popupDiv).append($popupText);
-    del.appendChild(popupDiv);
-    row.appendChild(del);
-
     // show popup
-    del.addEventListener('click', function() {
+    $delIcon.click(function() {
       $popupText.addClass('show');
       $popupText.focus();
     });
@@ -368,7 +374,7 @@ $(document).ready(function() {
     $popupText.blur(() => {
       $popupText.removeClass('show');
     });
-    $('tbody').append(row); //add row to table
+
 
     toggleHeader();
   }

public/contribute.json

@@ -22,7 +22,6 @@
     "JavaScript",
     "jQuery",
     "Node",
-    "P2P",
     "Redis"
   ]
 }

public/main.css

@@ -24,7 +24,7 @@ body {
 
 .all {
   padding-top: 10%;
-  overflow-y: scroll;
+  padding-bottom: 51px;
 }
 
 input, select, textarea, button {
@@ -35,10 +35,6 @@ a {
   text-decoration: none;
 }
 
-span {
-  cursor: pointer;
-}
-
 /**   page-one    **/
 .title {
   font-size: 33px;
@@ -72,8 +68,9 @@ span {
 .upload-window.ondrag {
   border: 3px dashed rgba(0, 148, 251, 0.5);
   margin: 0 auto;
-  width: 672px;
+  width: 636px;
-  height: 267px;
+  height: 251px;
+  transform: scale(1.05);
   border-radius: 4.2px;
   display: flex;
   justify-content: center;
@@ -146,6 +143,10 @@ tbody {
   table-layout: fixed;
 }
 
+.icon-delete, .icon-copy, .icon-check {
+  cursor: pointer;
+}
+
 /* Popup container */
 .popup {
   position: relative;
@@ -166,7 +167,7 @@ tbody {
   z-index: 1;
   bottom: 20px;
   left: 50%;
-  margin-left: -96px;
+  margin-left: -88px;
   transition: opacity 0.5s;
   opacity: 0;
   outline: 0;

public/resources/check-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="#fff" d="M6 14a1 1 0 0 1-.707-.293l-3-3a1 1 0 0 1 1.414-1.414l2.157 2.157 6.316-9.023a1 1 0 0 1 1.639 1.146l-7 10a1 1 0 0 1-.732.427A.863.863 0 0 1 6 14z"/></svg>

public/resources/close-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill="#4A4A4A" d="M9.414 8l5.293-5.293a1 1 0 0 0-1.414-1.414L8 6.586 2.707 1.293a1 1 0 0 0-1.414 1.414L6.586 8l-5.293 5.293a1 1 0 1 0 1.414 1.414L8 9.414l5.293 5.293a1 1 0 0 0 1.414-1.414z"/></svg>

public/resources/copy-16.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path class="icon-copy" fill="#0A8DFF" d="M14.707 8.293l-3-3A1 1 0 0 0 11 5h-1V4a1 1 0 0 0-.293-.707l-3-3A1 1 0 0 0 6 0H3a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h3v3a2 2 0 0 0 2 2h5a2 2 0 0 0 2-2V9a1 1 0 0 0-.293-.707zM12.586 9H11V7.414zm-5-5H6V2.414zM6 7v2H3V2h2v2.5a.5.5 0 0 0 .5.5H8a2 2 0 0 0-2 2zm2 7V7h2v2.5a.5.5 0 0 0 .5.5H13v4z"/></svg>

public/resources/fontello-24c5e6ad/config.json

@@ -1,28 +0,0 @@
-{
-  "name": "",
-  "css_prefix_text": "icon-",
-  "css_use_suffix": false,
-  "hinting": true,
-  "units_per_em": 1000,
-  "ascent": 850,
-  "glyphs": [
-    {
-      "uid": "c8585e1e5b0467f28b70bce765d5840c",
-      "css": "docs",
-      "code": 61637,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c709da589c923ba3c2ad48d9fc563e93",
-      "css": "cancel-1",
-      "code": 59393,
-      "src": "entypo"
-    },
-    {
-      "uid": "14017aae737730faeda4a6fd8fb3a5f0",
-      "css": "check",
-      "code": 59394,
-      "src": "entypo"
-    }
-  ]
-}

public/resources/fontello-24c5e6ad/css/fontello.css

@@ -1,60 +0,0 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?60405031');
-  src: url('../font/fontello.eot?60405031#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?60405031') format('woff2'),
-       url('../font/fontello.woff?60405031') format('woff'),
-       url('../font/fontello.ttf?60405031') format('truetype'),
-       url('../font/fontello.svg?60405031#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?60405031#fontello') format('svg');
-  }
-}
-*/
-
- [class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
-
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
-
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
-
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
-
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
-
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
-
-.icon-cancel-1:before { content: '\e801'; font-size: 1.5em; font-weight: lighter;} /* '' */
-.icon-check:before { content: '\e802'; font-size: 1.5em;} /* '' */
-.icon-docs:before { content: '\f0c5'; font-weight: bolder;} /* '' */

public/resources/fontello-24c5e6ad/font/fontello.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
-<defs>
-<font id="fontello" horiz-adv-x="1000" >
-<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="cancel-1" unicode="&#xe801;" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
-
-<glyph glyph-name="check" unicode="&#xe802;" d="M249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
-
-<glyph glyph-name="docs" unicode="&#xf0c5;" d="M946 636q23 0 38-16t16-38v-678q0-23-16-38t-38-16h-535q-23 0-38 16t-16 38v160h-303q-23 0-38 16t-16 38v375q0 22 11 49t27 42l228 228q15 16 42 27t49 11h232q23 0 38-16t16-38v-183q38 23 71 23h232z m-303-119l-167-167h167v167z m-357 214l-167-167h167v167z m109-361l176 176v233h-214v-233q0-22-15-37t-38-16h-233v-357h286v143q0 22 11 49t27 42z m534-449v643h-215v-232q0-22-15-38t-38-15h-232v-358h500z" horiz-adv-x="1000" />
-</font>
-</defs>
-</svg>

public/resources/github-icon.svg

@@ -1,59 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="438.549" height="438.549" viewBox="0 0 438.549 438.549"><path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"/></svg>
-<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 width="438.549px" height="438.549px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;"
-	 xml:space="preserve">
-<g>
-	<path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365
-		c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63
-		c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996
-		c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136
-		c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559
-		c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559
-		c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997
-		c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851
-		c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136
-		c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41
-		c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126
-		c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817
-		c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994
-		c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849
-		c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24
-		c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979
-		c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146
-		c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995
-		c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906
-		C438.536,184.851,428.728,148.168,409.132,114.573z"/>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

public/resources/mozilla-logo.svg

@@ -1,5 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.55 185.54">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 578.55 185.54"><path d="M503.5 117.21c0 4.92 2.37 8.82 9 8.82 7.8 0 16.11-5.6 16.61-18.31a80.86 80.86 0 0 0-11-1c-7.83-.01-14.61 2.19-14.61 10.49z"/><path d="M0 0v185.54h578.55V0zm163.78 139.93h-32V96.87c0-13.22-4.41-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h10.12v16.61h-32V96.87c0-13.22-4.4-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h14.54v16.61H22.22v-16.61h10.17V80.09h-11V63.48h32.87V75c4.58-8.13 12.55-13.05 23.22-13.05 11 0 21.19 5.26 24.92 16.45 4.24-10.17 12.88-16.45 24.92-16.45 13.73 0 26.28 8.31 26.28 26.45v34.94h10.17zm48.65 1.69c-23.56 0-39.84-14.41-39.84-38.82 0-22.38 13.56-40.86 41-40.86s40.86 18.48 40.86 39.84c.02 24.42-17.61 39.85-42.02 39.85zm121.72-1.69h-66.8l-2.2-11.53 42-48.32h-23.9l-3.39 11.87-15.77-1.69 2.71-26.79H334L335.69 75l-42.4 48.34H318l3.56-11.87 17.29 1.69zm41.36 0h-22.89v-27.46h22.89zm0-49h-22.89V63.48h22.89zm12 49L420.6 23.34h21.53l-33.06 116.59zm44.42 0L465 23.34h21.53l-33.04 116.59zm113.92 1.69c-10.17 0-15.76-5.94-16.78-15.26-4.41 7.8-12.21 15.26-24.58 15.26-11 0-23.56-5.94-23.56-21.87 0-18.82 18.14-23.22 35.6-23.22a100.23 100.23 0 0 1 12.55.68v-2.54c0-7.8-.17-17.12-12.55-17.12-4.58 0-8.14.34-11.7 2.2L502 90.6l-17.46-1.87 3.39-19.83c13.39-5.43 20.17-7 32.72-7 16.45 0 30.35 8.48 30.35 25.94v33.23c0 4.41 1.69 5.94 5.26 5.94a11.5 11.5 0 0 0 3.22-.51l.17 11.53a29.57 29.57 0 0 1-13.77 3.6z"/><path d="M213.27 78.73c-11.19 0-18.14 8.3-18.14 22.72 0 13.22 6.1 23.39 18 23.39 11.36 0 18.82-9.15 18.82-23.73-.03-15.43-8.33-22.38-18.68-22.38z"/></svg>
-  <path d="M503.5 117.21c0 4.92 2.37 8.82 9 8.82 7.8 0 16.11-5.6 16.61-18.31a80.86 80.86 0 0 0-11-1c-7.83-.01-14.61 2.19-14.61 10.49z"/>
-  <path d="M0 0v185.54h578.55V0zm163.78 139.93h-32V96.87c0-13.22-4.41-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h10.12v16.61h-32V96.87c0-13.22-4.4-18.31-13.05-18.31-10.51 0-14.75 7.46-14.75 18.14v26.64h14.54v16.61H22.22v-16.61h10.17V80.09h-11V63.48h32.87V75c4.58-8.13 12.55-13.05 23.22-13.05 11 0 21.19 5.26 24.92 16.45 4.24-10.17 12.88-16.45 24.92-16.45 13.73 0 26.28 8.31 26.28 26.45v34.94h10.17zm48.65 1.69c-23.56 0-39.84-14.41-39.84-38.82 0-22.38 13.56-40.86 41-40.86s40.86 18.48 40.86 39.84c.02 24.42-17.61 39.85-42.02 39.85zm121.72-1.69h-66.8l-2.2-11.53 42-48.32h-23.9l-3.39 11.87-15.77-1.69 2.71-26.79H334L335.69 75l-42.4 48.34H318l3.56-11.87 17.29 1.69zm41.36 0h-22.89v-27.46h22.89zm0-49h-22.89V63.48h22.89zm12 49L420.6 23.34h21.53l-33.06 116.59zm44.42 0L465 23.34h21.53l-33.04 116.59zm113.92 1.69c-10.17 0-15.76-5.94-16.78-15.26-4.41 7.8-12.21 15.26-24.58 15.26-11 0-23.56-5.94-23.56-21.87 0-18.82 18.14-23.22 35.6-23.22a100.23 100.23 0 0 1 12.55.68v-2.54c0-7.8-.17-17.12-12.55-17.12-4.58 0-8.14.34-11.7 2.2L502 90.6l-17.46-1.87 3.39-19.83c13.39-5.43 20.17-7 32.72-7 16.45 0 30.35 8.48 30.35 25.94v33.23c0 4.41 1.69 5.94 5.26 5.94a11.5 11.5 0 0 0 3.22-.51l.17 11.53a29.57 29.57 0 0 1-13.77 3.6z"/>
-  <path d="M213.27 78.73c-11.19 0-18.14 8.3-18.14 22.72 0 13.22 6.1 23.39 18 23.39 11.36 0 18.82-9.15 18.82-23.73-.03-15.43-8.33-22.38-18.68-22.38z"/>
-</svg>

public/resources/send_logo.svg

@@ -1,21 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="30" height="27" viewBox="0 0 30 27" xmlns="http://www.w3.org/2000/svg"><title>send logo</title><g stroke="#3E3D40" fill="none" fill-rule="evenodd"><path d="M22.364 19.989l-2.153-2.103a2.046 2.046 0 0 0-2.665-.151l3.402 3.323a.531.531 0 0 1 0 .766l-2.466 2.408a.563.563 0 0 1-.784 0l-3.398-3.32a1.932 1.932 0 0 0 .188 2.564l2.153 2.103c.788.77 2.066.77 2.855 0l2.868-2.802a1.94 1.94 0 0 0 0-2.788M8.77 14.745a.534.534 0 0 0 0 .766l3.399 3.32a2.05 2.05 0 0 1-2.625-.184l-2.153-2.102a1.94 1.94 0 0 1 0-2.79l2.869-2.801a2.052 2.052 0 0 1 2.854 0l2.153 2.103c.73.713.775 1.83.154 2.603l-3.401-3.323a.565.565 0 0 0-.784 0L8.77 14.745zm9.464 5.682a.777.777 0 0 1 0 1.118.822.822 0 0 1-1.144 0l-5.6-5.47a.777.777 0 0 1 0-1.118.822.822 0 0 1 1.144 0l5.6 5.47z" stroke-width=".618" fill="#3E3D40"/><path d="M6.065 20.606c-2.913-1.586-3.988-3.656-3.988-6.468 0-2.81 2.265-6.425 5.786-6.289.1.004.55-.006.649 0 .895-3.27 2.508-6.353 6.898-6.353 4.557 0 7.336 3.716 6.75 7.785.08-.005 1.232.17 1.31.186 3.096.644 4.915 3.275 4.915 5.18 0 1.905-.107 3.029-2.023 4.947" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></g></svg>
-<svg width="30px" height="27px" viewBox="0 0 30 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45.2 (43514) - http://www.bohemiancoding.com/sketch -->
-    <title>send logo</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Send_logo_FINAL" transform="translate(-30.000000, -124.000000)" stroke="#3E3D40">
-            <g id="PageShots-Copy" transform="translate(31.000000, 116.000000)">
-                <g id="icon_01-copy" transform="translate(14.000000, 22.000000) rotate(-360.000000) translate(-14.000000, -22.000000) translate(0.000000, 9.000000)">
-                    <g id="send-logo">
-                        <g id="icon" transform="translate(0.800000, 0.376744)">
-                            <path d="M20.5639947,18.6120569 L18.4111528,16.5092811 C17.681129,15.7962346 16.5375329,15.7519656 15.7459993,16.3582923 L19.1476513,19.6816267 C19.3645542,19.8926948 19.3645542,20.2357793 19.1476513,20.4468474 L16.6824046,22.8547628 C16.466311,23.0666214 16.1150579,23.0666214 15.898155,22.8547628 L12.4997403,19.5361716 C11.9137789,20.3077164 11.9712419,21.3986301 12.6883163,22.0990284 L14.8411582,24.2018042 C15.6286451,24.9717679 16.9065915,24.9717679 17.6956971,24.2018042 L20.5639947,21.4002111 C21.3522909,20.6302474 21.3522909,19.3820207 20.5639947,18.6120569 M6.97033593,13.3685562 C6.7542424,13.5804149 6.7542424,13.9227088 6.97033593,14.1345674 L10.3687506,17.4539492 C9.5788357,18.0270742 8.46113846,17.9701569 7.74406406,17.2705492 L5.59122218,15.1677734 C4.80292594,14.3970191 4.80292594,13.149583 5.59122218,12.3788287 L8.45951979,9.57723567 C9.24862536,8.80806242 10.5265717,8.80806242 11.3140586,9.57723567 L13.4669005,11.6800115 C14.1969243,12.393058 14.2422473,13.5100588 13.6214843,14.2831847 L10.2198322,10.9606408 C10.0029294,10.7495727 9.65248555,10.7495727 9.43558269,10.9606408 L6.97033593,13.3685562 Z M16.4342612,19.0505568 C16.7507128,19.3596491 16.7507128,19.8592559 16.4342612,20.1683482 C16.1178097,20.4774404 15.6063074,20.4774404 15.2898558,20.1683482 L9.68922955,14.697969 C9.37277798,14.3896673 9.37277798,13.8892699 9.68922955,13.5801777 C10.0056811,13.2710855 10.5171834,13.2710855 10.833635,13.5801777 L16.4342612,19.0505568 Z" id="Fill-1" stroke-width="0.61812" fill="#3E3D40"></path>
-                            <path d="M4.26479492,19.2293105 C1.35166016,17.6433242 0.277490234,15.5730807 0.277490234,12.7617324 C0.277490234,9.95038403 2.5418457,6.33646439 6.06289062,6.47253134 C6.16279736,6.47639213 6.61272996,6.46664776 6.71166992,6.47253134 C7.60652694,3.20243504 9.22035098,0.119592569 13.6099121,0.119592569 C18.1668756,0.119592569 20.9464355,3.83546512 20.3599121,7.90445358 C20.4390641,7.89974671 21.5923993,8.07389043 21.6708008,8.09019917 C24.7664551,8.73414449 26.585498,11.3654433 26.585498,13.2704726 C26.585498,15.1755019 26.4779785,16.2990371 24.5618164,18.2176894" id="Stroke-4" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

public/resources/twitter-icon.svg

@@ -1,46 +1 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M612 116.258a250.714 250.714 0 0 1-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 0 1-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z" fill="#010002"/></svg>
-<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 612 612" style="enable-background:new 0 0 612 612;" xml:space="preserve">
-<g>
-	<g>
-		<path style="fill:#010002;" d="M612,116.258c-22.525,9.981-46.694,16.75-72.088,19.772c25.929-15.527,45.777-40.155,55.184-69.411
-			c-24.322,14.379-51.169,24.82-79.775,30.48c-22.907-24.437-55.49-39.658-91.63-39.658c-69.334,0-125.551,56.217-125.551,125.513
-			c0,9.828,1.109,19.427,3.251,28.606C197.065,206.32,104.556,156.337,42.641,80.386c-10.823,18.51-16.98,40.078-16.98,63.101
-			c0,43.559,22.181,81.993,55.835,104.479c-20.575-0.688-39.926-6.348-56.867-15.756v1.568c0,60.806,43.291,111.554,100.693,123.104
-			c-10.517,2.83-21.607,4.398-33.08,4.398c-8.107,0-15.947-0.803-23.634-2.333c15.985,49.907,62.336,86.199,117.253,87.194
-			c-42.947,33.654-97.099,53.655-155.916,53.655c-10.134,0-20.116-0.612-29.944-1.721c55.567,35.681,121.536,56.485,192.438,56.485
-			c230.948,0,357.188-191.291,357.188-357.188l-0.421-16.253C573.872,163.526,595.211,141.422,612,116.258z"/>
-	</g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>

public/resources/upload.svg

@@ -1,24 +1 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="57" height="57" viewBox="0 0 57 57" xmlns="http://www.w3.org/2000/svg"><title>upload</title><g transform="translate(1 1)" stroke-width="2" stroke="#7FC9FD" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 24l10-9 10 9M28 39.545V15"/><circle cx="27.5" cy="27.5" r="27.5"/></g></svg>
-<svg width="57px" height="57px" viewBox="0 0 57 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 45.1 (43504) - http://www.bohemiancoding.com/sketch -->
-    <title>upload</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="File-transfer_drop" transform="translate(-692.000000, -442.000000)" stroke-width="2" stroke="#7FC9FD">
-            <g id="content" transform="translate(33.000000, 215.000000)">
-                <g id="Group-4" transform="translate(351.000000, 182.000000)">
-                    <g id="Group-5" transform="translate(30.000000, 46.000000)">
-                        <g id="upload" transform="translate(279.000000, 0.000000)">
-                            <g>
-                                <polyline id="Stroke-1" points="18 24 28 15 38 24"></polyline>
-                                <path d="M28,39.5454545 L28,15" id="Stroke-3"></path>
-                                <circle id="Oval-3" cx="27.5" cy="27.5" r="27.5"></circle>
-                            </g>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

server/server.js

@@ -224,6 +224,19 @@ app.post('/upload', (req, res, next) => {
       });
     });
   });
+
+  req.on('close', err => {
+    storage
+      .forceDelete(newId)
+      .then(err => {
+        if (!err) {
+          log.info('Deleted:', newId);
+        }
+      })
+      .catch(err => {
+        log.info('DeleteError:', newId);
+      });
+  })
 });
 
 app.get('/__lbheartbeat__', (req, res) => {

server/storage.js

@@ -234,13 +234,13 @@ function awsDelete(id, delete_token) {
       if (!reply || delete_token !== reply) {
         reject();
       } else {
-        redis_client.del(id);
         const params = {
           Bucket: conf.s3_bucket,
           Key: id
         };
 
         s3.deleteObject(params, function(err, _data) {
+          redis_client.del(id);
           err ? reject(err) : resolve(err);
         });
       }
@@ -250,13 +250,13 @@ function awsDelete(id, delete_token) {
 
 function awsForceDelete(id) {
   return new Promise((resolve, reject) => {
-    redis_client.del(id);
     const params = {
       Bucket: conf.s3_bucket,
       Key: id
     };
 
     s3.deleteObject(params, function(err, _data) {
+      redis_client.del(id);
       err ? reject(err) : resolve(err);
     });
   });

views/download.handlebars

@@ -1,52 +1,46 @@
-<div class="send-logo">
+<div id="download">
-  <img src="/resources/send_logo.svg"/>
+  {{#if filename}}
-  <img src="/resources/send_logo_type.svg"/>
+  <div id="download-page-one">
-</div>
+    <div class="title">
-<div class="all">
+      <span id="dl-filename" 
-  <div id="download">
+            data-l10n-id="downloadFileName"
-    {{#if filename}}
+            data-l10n-args='{"filename": "{{filename}}"}'></span>
-    <div id="download-page-one">
+      <span data-l10n-id="downloadFileSize"
-      <div class="title">
+            data-l10n-args='{"size": "{{filesize}}"}'></span>
-        <span id="dl-filename" 
-              data-l10n-id="downloadFileName"
-              data-l10n-args='{"filename": "{{filename}}"}'></span>
-        <span data-l10n-id="downloadFileSize"
-              data-l10n-args='{"size": "{{filesize}}"}'></span>
-      </div>
-      <div class="description" data-l10n-id="downloadMessage"></div>
-      <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
-      <div>
-        <button id="download-btn" data-l10n-id="downloadButtonLabel"></button>
-      </div>
     </div>
-
+    <div class="description" data-l10n-id="downloadMessage"></div>
-    <div id="download-progress">
+    <img src="/resources/illustration_download.svg" id="download-img" data-l10n-id="downloadAltText"/>
-      <div class="title"
+    <div>
-           data-l10n-id="downloadingPageProgress"
+      <button id="download-btn" data-l10n-id="downloadButtonLabel"></button>
-           data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>
-      </div>
-      <div class="description" data-l10n-id="downloadingPageMessage"></div>
-      <!-- progress bar here -->
-      <div class="progress-bar" id="dl-progress">
-        <div class="percentage">
-          <span class="percent-number"></span>
-          <span class="percent-sign">%</span>
-        </div>
-      </div>
-      <div class="upload">
-        <div class="progress-text">{{filename}}</div>
-      </div>
     </div>
-
-    <div class="send-new" data-l10n-id="sendYourFilesLink"></div>
-    {{else}}
-    <div class="title" data-l10n-id="expiredPageHeader"></div>
-
-    <div class="share-window">
-      <img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
-    </div>
-    <div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
-    <div class="send-new" data-l10n-id="sendYourFilesLink"></div>
-    {{/if}}
   </div>
+
+  <div id="download-progress">
+    <div class="title"
+          data-l10n-id="downloadingPageProgress"
+          data-l10n-args='{"filename": "{{filename}}", "size": "{{filesize}}"}'>
+    </div>
+    <div class="description" data-l10n-id="downloadingPageMessage"></div>
+    <!-- progress bar here -->
+    <div class="progress-bar" id="dl-progress">
+      <div class="percentage">
+        <span class="percent-number"></span>
+        <span class="percent-sign">%</span>
+      </div>
+    </div>
+    <div class="upload">
+      <div class="progress-text">{{filename}}</div>
+    </div>
+  </div>
+
+  <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
+  {{else}}
+  <div class="title" data-l10n-id="expiredPageHeader"></div>
+
+  <div class="share-window">
+    <img src="/resources/illustration_expired.svg" id="expired-img" data-l10n-id="linkExpiredAlt"/>
+  </div>
+  <div class="expired-description" data-l10n-id="uploadPageExplainer"></div>
+  <a class="send-new" data-l10n-id="sendYourFilesLink"></a>
+  {{/if}}
 </div>

views/index.handlebars

@@ -1,93 +1,84 @@
-<div class="send-logo">
+<div id="page-one">
-  <img src="/resources/send_logo.svg"/>
+  <div class="title" data-l10n-id="uploadPageHeader"></div>
-  <img src="/resources/send_logo_type.svg"/>
+  <div class="description">
-</div>
+    <div data-l10n-id="uploadPageExplainer"></div>
-<div class="all">
+    <a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
-  <div id="page-one">
+  </div>
-    <div class="title" data-l10n-id="uploadPageHeader"></div>
+  <div class="upload-window" >
-    <div class="description">
+    <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
-      <div data-l10n-id="uploadPageExplainer"></div>
+    <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
-      <a href="https://testpilot.firefox.com/experiments/send" class="link" data-l10n-id="uploadPageLearnMore"></a>
-    </div>
-    <div class="upload-window" >
-      <div id="upload-img"><img data-l10n-id="uploadSvgAlt" src="/resources/upload.svg"/></div>
-      <div id="upload-text" data-l10n-id="uploadPageDropMessage"></div>
 
-      <form method="post" action="upload" enctype="multipart/form-data">
+    <form method="post" action="upload" enctype="multipart/form-data">
-        <label for="file-upload" id="browse" 
+      <label for="file-upload" id="browse" 
-               data-l10n-id="uploadPageBrowseButton"></label>
+              data-l10n-id="uploadPageBrowseButton"></label>
-        <input id="file-upload" type="file" name="fileUploaded" />
+      <input id="file-upload" type="file" name="fileUploaded" />
-      </form>
+    </form>
-    </div>
-
-    <div id="file-list">
-      <table id="uploaded-files">
-        <thead>
-          <tr>
-            <!-- htmllint attr-bans="false" -->
-            <th width="35%" data-l10n-id="sentFilesTitle1"></th>
-            <th width="25%" data-l10n-id="sentFilesTitle2"></th>
-            <th width="21%" data-l10n-id="sentFilesTitle3"></th>
-            <th width="12%" data-l10n-id="sentFilesTitle4"></th>
-            <!-- htmllint tag-bans="$previous" -->
-          </tr>
-        </thead>
-        <tbody>
-
-        </tbody>
-      </table>
-    </div>
   </div>
 
-  <div id="upload-progress">
+  <div id="file-list">
-    <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
+    <table id="uploaded-files">
-    <div class="description">
+      <thead>
-
+        <tr>
-    </div>
+          <!-- htmllint attr-bans="false" -->
-    <!-- progress bar here -->
+          <th width="35%" data-l10n-id="sentFilesTitle1"></th>
-    <div class="progress-bar" id="ul-progress">
+          <th width="25%" data-l10n-id="sentFilesTitle2"></th>
-      <div class="percentage">
+          <th width="21%" data-l10n-id="sentFilesTitle3"></th>
-        <span class="percent-number">0</span>
+          <th width="12%" data-l10n-id="sentFilesTitle4"></th>
-        <span class="percent-sign">%</span>
+          <!-- htmllint tag-bans="$previous" -->
-      </div>
+        </tr>
-    </div>
+      </thead>
-    <div class="upload">
+      <tbody>
-      <div class="progress-text"></div>
+      </tbody>
-      <div id="cancel-upload" 
+    </table>
-           data-l10n-id="uploadingPageCancel"></div>
-    </div>
-  </div>
-
-  <div id="share-link">
-    <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
-    <div id="share-window">
-      <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
-      <div id="copy">
-        <input id="link" type="url" value="" readonly/>
-        <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
-      </div>
-      <button id="delete-file" data-l10n-id="deleteFileButton"></button>
-      <div class="send-new" data-l10n-id="sendAnotherFileLink"></div>
-    </div>
-  </div>
-
-  <div id="upload-error">
-    <div class="title" data-l10n-id="errorPageHeader"></div>
-    <div class="expired-description" data-l10n-id="errorPageMessage"></div>
-    <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
-    <div class="send-new" data-l10n-id="sendAnotherFileLink"></div>
-  </div>
-
-  <div id="unsupported-browser">
-    <div class="title" data-l10n-id="notSupportedHeader"></div>
-    <div class="description" data-l10n-id="notSupportedDetail"></div>
-    <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
-      <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
-      <div id="dl-firefox-text">Firefox<br>
-        <span data-l10n-id="downloadFirefoxButtonSub"></span>
-      </div>
-    </a>
-    <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
   </div>
 </div>
+
+<div id="upload-progress">
+  <div class="title" id="upload-filename" data-l10n-id="uploadingPageHeader"></div>
+  <div class="description"></div>
+  <!-- progress bar here -->
+  <div class="progress-bar" id="ul-progress">
+    <div class="percentage">
+      <span class="percent-number">0</span>
+      <span class="percent-sign">%</span>
+    </div>
+  </div>
+  <div class="upload">
+    <div class="progress-text"></div>
+    <div id="cancel-upload" 
+          data-l10n-id="uploadingPageCancel"></div>
+  </div>
+  
+</div>
+
+<div id="share-link">
+  <div class="title" data-l10n-id="uploadSuccessTimingHeader"></div>
+  <div id="share-window">
+    <div id="copy-text" data-l10n-id="copyUrlFormLabel"></div>
+    <div id="copy">
+      <input id="link" type="url" value="" readonly/>
+      <button id="copy-btn" data-l10n-id="copyUrlFormButton"></button>
+    </div>
+    <button id="delete-file" data-l10n-id="deleteFileButton"></button>
+    <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
+  </div>
+</div>
+
+<div id="upload-error">
+  <div class="title" data-l10n-id="errorPageHeader"></div>
+  <div class="expired-description" data-l10n-id="errorPageMessage"></div>
+  <img id="upload-error-img" data-l10n-id="errorAltText" src="/resources/illustration_error.svg"/>
+  <a class="send-new" data-l10n-id="sendAnotherFileLink"></a>
+</div>
+
+<div id="unsupported-browser">
+  <div class="title" data-l10n-id="notSupportedHeader"></div>
+  <div class="description" data-l10n-id="notSupportedDetail"></div>
+  <a id="dl-firefox" href="https://www.mozilla.org/firefox/new/?scene=2" target="_blank">
+    <img src="/resources/firefox_logo-only.svg" id="firefox-logo" alt="Firefox"/>
+    <div id="dl-firefox-text">Firefox<br>
+      <span data-l10n-id="downloadFirefoxButtonSub"></span>
+    </div>
+  </a>
+  <div class="unsupported-description" data-l10n-id="uploadPageExplainer"></div>
 </div>

views/layouts/main.handlebars

@@ -7,7 +7,6 @@
   {{/if}}
   <script src="/bundle.js"></script>
   <link rel="stylesheet" type="text/css" href="/main.css" />
-  <link rel="stylesheet" type="text/css" href="/resources/fontello-24c5e6ad/css/fontello.css" />
   <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
   {{#if trackerId}}
   {{> analytics trackerId=trackerId}}
@@ -19,7 +18,13 @@
   <script defer src="/l20n/dist/web/l20n.js"></script>
 </head>
 <body>
-  {{{body}}}
+  <div class="send-logo">
+    <img src="/resources/send_logo.svg"/>
+    <img src="/resources/send_logo_type.svg"/>
+  </div>
+  <div class="all">
+    {{{body}}}
+  </div>
   <div class="footer">
     <div class="legal-links">
       <a  href="https://www.mozilla.org"><img class="mozilla-logo" src="/resources/mozilla-logo.svg"/></a>