update ui

app/templates/header/header.css

@@ -1,9 +1,31 @@
 .header {
-  align-items: flex-start;
-  box-sizing: border-box;
+  align-items: flex-end;
   display: flex;
+  flex-direction: row;
+  height: calc(var(--grid-basis) * 4);
   justify-content: space-between;
-  height: 32px;
-  padding: 10px;
   width: 100%;
 }
+
+.header h1 {
+  margin: 0;
+}
+
+.feedback {
+  background-color: #979797;
+  background-image: url('../assets/feedback.svg');
+  background-position: 2px 4px;
+  background-repeat: no-repeat;
+  background-size: 18px;
+  color: var(--primaryControlFGColor);
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  line-height: 12px;
+  padding: 5px 5px 5px 20px;
+  text-indent: 2px;
+  transition: all 250ms ease-in-out;
+  white-space: nowrap;
+  margin-left: calc(var(--grid-basis) * 2);
+  margin-bottom: 8px;
+}

app/templates/header/index.js

@@ -1,8 +1,20 @@
 const html = require('choo/html');
+const version = require('../../../package.json').version;
+const { browserName } = require('../../utils');
+
+module.exports = function(state) {
+  const browser = browserName();
+  const feedbackUrl = `https://qsurvey.mozilla.com/s3/txp-firefox-send?ver=${version}&browser=${browser}`;
 
-module.exports = function() {
   const header = html`
   <header class="header">
+    <h1>Firefox Send</h1>
+    <a href="${feedbackUrl}"
+      rel="noreferrer noopener"
+      class="feedback"
+      alt="Feedback"
+      target="_blank">${state.translate('siteFeedback')}
+    </a>
   </header>`;
   // HACK
   // We only want to render this once because we