refactored css, including some markup changes

app/pages/welcome.js

@@ -1,84 +0,0 @@
-/* global MAXFILESIZE */
-const html = require('choo/html');
-const assets = require('../../common/assets');
-const fileList = require('../templates/fileList');
-const { bytes, fadeOut } = require('../utils');
-
-module.exports = function(state, emit) {
-  // the page flickers if both the server and browser set 'fadeIn'
-  const fade = state.layout ? '' : 'fadeIn';
-  const div = html`
-  <div id="page-one" class="${fade}">
-    <div class="title">${state.translate('uploadPageHeader')}</div>
-    <div class="description">
-      <div>${state.translate('uploadPageExplainer')}</div>
-      <a
-        href="https://testpilot.firefox.com/experiments/send"
-        class="link">
-        ${state.translate('uploadPageLearnMore')}
-      </a>
-    </div>
-    <div class="upload-window"
-      ondragover=${dragover}
-      ondragleave=${dragleave}>
-      <div id="upload-img">
-        <img
-          src="${assets.get('upload.svg')}"
-          title="${state.translate('uploadSvgAlt')}"/>
-      </div>
-      <div id="upload-text">${state.translate('uploadPageDropMessage')}</div>
-      <span id="file-size-msg">
-        <em>${state.translate('uploadPageSizeMessage')}</em>
-      </span>
-      <input id="file-upload"
-        type="file"
-        name="fileUploaded"
-        onfocus=${onfocus}
-        onblur=${onblur}
-        onchange=${upload} />
-      <label for="file-upload"
-        id="browse"
-        class="btn browse"
-        title="${state.translate('uploadPageBrowseButton1')}">
-        ${state.translate('uploadPageBrowseButton1')}
-      </label>
-    </div>
-    ${fileList(state, emit)}
-  </div>
-  `;
-
-  function dragover(event) {
-    const div = document.querySelector('.upload-window');
-    div.classList.add('ondrag');
-  }
-
-  function dragleave(event) {
-    const div = document.querySelector('.upload-window');
-    div.classList.remove('ondrag');
-  }
-
-  function onfocus(event) {
-    event.target.classList.add('has-focus');
-  }
-
-  function onblur(event) {
-    event.target.classList.remove('has-focus');
-  }
-
-  async function upload(event) {
-    event.preventDefault();
-    const target = event.target;
-    const file = target.files[0];
-    if (file.size === 0) {
-      return;
-    }
-    if (file.size > MAXFILESIZE) {
-      window.alert(state.translate('fileTooBig', { size: bytes(MAXFILESIZE) }));
-      return;
-    }
-
-    await fadeOut('page-one');
-    emit('upload', { file, type: 'click' });
-  }
-  return div;
-};