Merge pull request #242 from mozilla/ui

Make only icons clickable in file list
2017-07-19 12:53:27 -04:00 · 2017-07-19 12:53:27 -04:00 · 6e7283664c
commit 6e7283664c
parent 5822900508 3cdd207953
17 changed files with 186 additions and 301 deletions
--- a/README.md
+++ b/README.md
@ -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/
--- a/frontend/src/upload.js
+++ b/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);
@ -213,8 +213,10 @@ $(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);
@ -228,13 +230,10 @@ $(document).ready(function() {

    name.appendChild(cellText);

-    // create delete button
-    del.innerHTML = '<span class="icon-cancel-1" title="Delete"></span>';
+    link.style.color = '#0A8DFF'; //font colour

-    link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>';
-    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);
@ -243,7 +242,7 @@ $(document).ready(function() {
      document.body.removeChild(aux);
      link.innerHTML = 'Copied!';
      window.setTimeout(() => {
-        link.innerHTML = '<span class="icon-docs" title="Copy URL"></span>';
+        link.innerHTML = '<img src="/resources/copy-16.svg" class="icon-copy" title="Copy URL" />';
      }, 500);
    });

@ -290,9 +289,20 @@ $(document).ready(function() {
    // create popup
    popupDiv.classList.add('popup');
    $popupText.html(
-      '<span class="del-file">Delete</span><span class="nvm" > Nevermind</span>'
+      '<span class="del-file">Delete </span><span class="nvm" > Nevermind</span>'
    );

+    // 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(() => {
@ -307,17 +317,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();
    });
@ -333,7 +334,7 @@ $(document).ready(function() {
    $popupText.blur(() => {
      $popupText.removeClass('show');
    });
-    $('tbody').append(row); //add row to table
+

    toggleHeader();
  }
--- a/public/main.css
+++ b/public/main.css
@ -35,10 +35,6 @@ a {
  text-decoration: none;
 }

-span {
-  cursor: pointer;
-}
-
 /**   page-one    **/
 .title {
  font-size: 33px;
@ -146,6 +142,10 @@ tbody {
  table-layout: fixed;
 }

+.icon-delete, .icon-copy, .icon-check {
+  cursor: pointer;
+}
+
 /* Popup container */
 .popup {
  position: relative;
@ -166,7 +166,7 @@ tbody {
  z-index: 1;
  bottom: 20px;
  left: 50%;
-  margin-left: -96px;
+  margin-left: -88px;
  transition: opacity 0.5s;
  opacity: 0;
  outline: 0;
--- a/public/resources/check-16.svg
+++ b/public/resources/check-16.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 16 16"><path fill="white" 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>
--- a/public/resources/close-16.svg
+++ b/public/resources/close-16.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg 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>
--- a/public/resources/copy-16.svg
+++ b/public/resources/copy-16.svg
@ -0,0 +1,4 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg 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>
--- a/public/resources/fontello-24c5e6ad/config.json
+++ b/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"
-    }
-  ]
-}
--- a/public/resources/fontello-24c5e6ad/css/fontello.css
+++ b/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;} /* '' */
--- a/public/resources/fontello-24c5e6ad/font/fontello.eot
+++ b/public/resources/fontello-24c5e6ad/font/fontello.eot
--- a/public/resources/fontello-24c5e6ad/font/fontello.svg
+++ b/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>
--- a/public/resources/fontello-24c5e6ad/font/fontello.ttf
+++ b/public/resources/fontello-24c5e6ad/font/fontello.ttf
--- a/public/resources/fontello-24c5e6ad/font/fontello.woff
+++ b/public/resources/fontello-24c5e6ad/font/fontello.woff
--- a/public/resources/fontello-24c5e6ad/font/fontello.woff2
+++ b/public/resources/fontello-24c5e6ad/font/fontello.woff2
--- a/public/resources/send_logo_type.svg
+++ b/public/resources/send_logo_type.svg
--- a/views/download.handlebars
+++ b/views/download.handlebars
@ -1,60 +1,53 @@
-
-<div class="send-logo">
-  <img src="/resources/send_logo.svg"/>
-  <img src="/resources/send_logo_type.svg"/>
-</div>
-<div class="all">
-  <div id="download">
-    {{#if filename}}
-    <div id="download-page-one">
-      <div class="title">
-        Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
-      </div>
-      <div class="description">
-        Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
-      </div>
-      <img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
-      <div>
-        <button id="download-btn" title="Download">Download</button>
-      </div>
-    </div>
-
-    <div id="download-progress">
-      <div class="title">
-        Downloading {{filename}} ({{filesize}})
-      </div>
-      <div class="description">
-        Please leave this tab open while we fetch your file and decrypt it.
-      </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" title="Try Firefox Send">
-      Try Firefox Send
-    </a>
-    {{else}}
+<div id="download">
+  {{#if filename}}
+  <div id="download-page-one">
    <div class="title">
-      This link has expired or never existed in the first place.
+      Download <span id="dl-filename">{{filename}}</span> ({{filesize}})
    </div>
-
-    <div class="share-window">
-      <img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
+    <div class="description">
+      Your friend is sending you a file with Firefox Send, a service that allows you to share files with a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
    </div>
-    <div class="expired-description">
-      Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+    <img src="/resources/illustration_download.svg" id="download-img" alt="Download"/>
+    <div>
+      <button id="download-btn" title="Download">Download</button>
    </div>
-    <a class="send-new" title="Try Firefox Send">
-      Try Firefox Send
-    </a>
-    {{/if}}
  </div>
+
+  <div id="download-progress">
+    <div class="title">
+      Downloading {{filename}} ({{filesize}})
+    </div>
+    <div class="description">
+      Please leave this tab open while we fetch your file and decrypt it.
+    </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" title="Try Firefox Send">
+    Try Firefox Send
+  </a>
+  {{else}}
+  <div class="title">
+    This link has expired or never existed in the first place.
+  </div>
+
+  <div class="share-window">
+    <img src="/resources/illustration_expired.svg" id="expired-img" alt="Link expired" />
+  </div>
+  <div class="expired-description">
+    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+  </div>
+  <a class="send-new" title="Try Firefox Send">
+    Try Firefox Send
+  </a>
+  {{/if}}
 </div>
--- a/views/index.handlebars
+++ b/views/index.handlebars
@ -1,113 +1,105 @@
-<div class="send-logo">
-  <img src="/resources/send_logo.svg"/>
-  <img src="/resources/send_logo_type.svg"/>
+<div id="page-one">
+  <div class="title">
+    Private, Encrypted File Sharing
+  </div>
+  <div class="description">
+    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
+  </div>
+  <div class="upload-window" >
+    <div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
+    <div id="upload-text">
+      Drop your files here to start uploading
+    </div>
+
+    <form method="post" action="upload" enctype="multipart/form-data">
+      <label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
+      <input id="file-upload" type="file" name="fileUploaded" />
+    </form>
+  </div>
+
+  <div id="file-list">
+    <table id="uploaded-files">
+      <thead>
+        <tr>
+          <!-- htmllint attr-bans="false" -->
+          <th width="35%">File</th>
+          <th width="25%">Copy URL</th>
+          <th width="21%">Expires in</th>
+          <th width="12%">Delete</th>
+          <!-- htmllint tag-bans="$previous" -->
+        </tr>
+      </thead>
+      <tbody>
+
+      </tbody>
+    </table>
+  </div>
 </div>
-<div class="all">
-  <div id="page-one">
-    <div class="title">
-      Private, Encrypted File Sharing
-    </div>
-    <div class="description">
-      Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.<br> <a href="https://testpilot.firefox.com/experiments/send" class="link">Learn more</a>
-    </div>
-    <div class="upload-window" >
-      <div id="upload-img"><img src="/resources/upload.svg" alt="Upload"/></div>
-      <div id="upload-text">
-        Drop your files here to start uploading
-      </div>

-      <form method="post" action="upload" enctype="multipart/form-data">
-        <label for="file-upload" id="browse" title="Upload file">Select a file on your computer</label>
-        <input id="file-upload" type="file" name="fileUploaded" />
-      </form>
-    </div>
+<div id="upload-progress">
+  <div class="title" id="upload-filename">
+    Uploading Your File
+  </div>
+  <div class="description">

-    <div id="file-list">
-      <table id="uploaded-files">
-        <thead>
-          <tr>
-            <!-- htmllint attr-bans="false" -->
-            <th width="35%">File</th>
-            <th width="25%">Copy URL</th>
-            <th width="21%">Expires in</th>
-            <th width="12%">Delete</th>
-            <!-- htmllint tag-bans="$previous" -->
-          </tr>
-        </thead>
-        <tbody>
-
-        </tbody>
-      </table>
+  </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 id="upload-progress">
-    <div class="title" id="upload-filename">
-      Uploading Your File
-    </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" title="Cancel Upload">Cancel Upload</div>
-    </div>
+  <div class="upload">
+    <div class="progress-text"></div>
+    <div id="cancel-upload" title="Cancel Upload">Cancel Upload</div>
  </div>
+</div>

-  <div id="share-link">
-    <div class="title">
-      This encrypted link will expire after 1 download or in 24 hours
-    </div>
-    <div id="share-window">
-      <div id="copy-text">
-        Copy and share the link to send your file:
-      </div>
-      <div id="copy">
-        <input id="link" type="url" value="" readonly/>
-        <button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
-      </div>
-      <button id="delete-file" title="Delete file">Delete file</button>
-      <a class="send-new" title="Send another file">
-        Send another file
-      </a>
-    </div>
+<div id="share-link">
+  <div class="title">
+    This encrypted link will expire after 1 download or in 24 hours
  </div>
-
-  <div id="upload-error">
-    <div class="title">
-      Something went wrong!
+  <div id="share-window">
+    <div id="copy-text">
+      Copy and share the link to send your file:
    </div>
-    <div class="expired-description">
-      There has been an error uploading the file.
+    <div id="copy">
+      <input id="link" type="url" value="" readonly/>
+      <button id="copy-btn" title="Copy to Clipboard">Copy to Clipboard</button>
    </div>
-    <img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
+    <button id="delete-file" title="Delete file">Delete file</button>
    <a class="send-new" title="Send another file">
      Send another file
    </a>
  </div>
+</div>

-  <div id="unsupported-browser">
-    <div class="title">
-      Your browser is not supported.
-    </div>
-    <div class="description">
-      Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
-    </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>Free Download</span></div>
-    </a>
-    <div class="unsupported-description">
-      Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
-    </div>
+<div id="upload-error">
+  <div class="title">
+    Something went wrong!
  </div>
+  <div class="expired-description">
+    There has been an error uploading the file.
+  </div>
+  <img id="upload-error-img" src="/resources/illustration_error.svg" alt="Upload error" />
+  <a class="send-new" title="Send another file">
+    Send another file
+  </a>
+</div>

-</div>
+<div id="unsupported-browser">
+  <div class="title">
+    Your browser is not supported.
+  </div>
+  <div class="description">
+    Unfortunately this browser does not support the web technology that powers Firefox Send. You'll need to try another browser. We recommend Firefox!
+  </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>Free Download</span></div>
+  </a>
+  <div class="unsupported-description">
+    Send files through a safe, private, and encrypted link that automatically expires to ensure your stuff does not remain online forever.
+  </div>
 </div>
--- a/views/layouts/main.handlebars
+++ b/views/layouts/main.handlebars
@ -7,14 +7,19 @@
  {{/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}}
  {{/if}}
 </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>