wip

app/templates/footer/footer.css

@@ -6,6 +6,7 @@
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
+  align-items: center;
 }
 
 .legalSection {
@@ -34,6 +35,24 @@
   display: none;
 }
 
+.feedback {
+  background-color: #000;
+  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: 12px;
+}
+
 @media (max-device-width: 720px), (max-width: 720px) {
   .footer {
     justify-content: flex-start;

app/templates/footer/index.js

@@ -1,7 +1,11 @@
 const html = require('choo/html');
 const assets = require('../../../common/assets');
+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}`;
   const footer = html`<footer class="footer">
     <div class="legalSection">
       <a class="legalSection__link"
@@ -39,7 +43,12 @@ module.exports = function(state) {
         Twitter
       </a>
     </div>
-
+    <a href="${feedbackUrl}"
+        rel="noreferrer noopener"
+        class="feedback"
+        alt="Feedback"
+        target="_blank">${state.translate('siteFeedback')}
+      </a>
     <a
       href="https://github.com/mozilla/send"
       class="socialSection__link footer_hiddenIcon">