refactored css, including some markup changes

app/pages/welcome/index.js

@@ -0,0 +1,86 @@
+/* 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 'effect--fadeIn'
+  const fade = state.layout ? '' : 'effect--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="uploadArea"
+      ondragover=${dragover}
+      ondragleave=${dragleave}>
+      <div id="upload-img">
+        <img
+          src="${assets.get('upload.svg')}"
+          title="${state.translate('uploadSvgAlt')}"/>
+      </div>
+      <div class="uploadArea__msg">
+        ${state.translate('uploadPageDropMessage')}
+      </div>
+      <span class="uploadArea__sizeMsg">
+        ${state.translate('uploadPageSizeMessage')}
+      </span>
+      <input id="file-upload"
+        class="inputFile"
+        type="file"
+        name="fileUploaded"
+        onfocus=${onfocus}
+        onblur=${onblur}
+        onchange=${upload} />
+      <label for="file-upload"
+        class="btn btn--file"
+        title="${state.translate('uploadPageBrowseButton1')}">
+        ${state.translate('uploadPageBrowseButton1')}
+      </label>
+    </div>
+    ${fileList(state, emit)}
+  </div>
+  `;
+
+  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');
+  }
+
+  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;
+};

app/pages/welcome/welcome.css

@@ -0,0 +1,71 @@
+.uploadArea {
+  border: 3px dashed rgba(0, 148, 251, 0.5);
+  margin: 0 auto 10px;
+  height: 255px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  transition: transform 150ms;
+  padding: 15px;
+}
+
+.uploadArea__msg {
+  font-size: 22px;
+  color: var(--lightTextColor);
+  margin: 20px 0 10px;
+  font-family: 'SF Pro Text', sans-serif;
+}
+
+.uploadArea__sizeMsg {
+  font-style: italic;
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--lightTextColor);
+  margin-bottom: 22px;
+}
+
+.uploadArea--dragging {
+  border: 5px dashed rgba(0, 148, 251, 0.5);
+  height: 251px;
+  transform: scale(1.04);
+  border-radius: 4.2px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+}
+
+.uploadArea--dragging * {
+  pointer-events: none;
+}
+
+.btn--file {
+  font-size: 20px;
+  min-width: 240px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 10px;
+}
+
+.btn--file:hover {
+  background-color: var(--primaryControlHoverColor);
+}
+
+.inputFile {
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+.btn--file .inputFile--focused {
+  background-color: var(--primaryControlHoverColor);
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
+}