update ui

app/templates/footer/footer.css

@@ -1,15 +1,14 @@
 .footer {
-  bottom: 0;
-  left: 0;
-  font-size: 13px;
+  margin: 0 auto;
+  font-size: 12px;
   font-weight: 600;
   display: flex;
   flex-direction: row;
-  padding: 50px 31px 41px;
-  width: 100%;
   box-sizing: border-box;
   justify-content: flex-end;
-  align-items: flex-end;
+  align-items: center;
+  padding-top: var(--grid-basis);
+  width: 100%;
 }
 
 .legalSection {
@@ -21,49 +20,17 @@
 .legalSection__link {
   color: var(--lightTextColor);
   white-space: nowrap;
-  margin-right: 2vw;
+  margin-left: calc(var(--grid-basis) * 2);
 }
 
 .legalSection__link:hover {
   color: var(--textColor);
 }
 
-.footer__mozLogo {
-  width: 112px;
-  height: 32px;
-  margin-bottom: -5px;
-}
-
 .socialSection__icon {
   width: 32px;
   height: 32px;
-  margin: 0 0 -5px 4px;
-}
-
-.feedback {
-  background-color: #000;
-  background-image: url('../assets/feedback.svg');
-  background-position: 2px 4px;
-  background-repeat: no-repeat;
-  background-size: 18px;
-  border-radius: 3px;
-  border: 1px solid #000;
-  color: var(--primaryControlFGColor);
-  cursor: pointer;
-  display: block;
-  font-size: 12px;
-  line-height: 12px;
-  padding: 5px 5px 5px 20px;
-  overflow: hidden;
-  min-width: 30px;
-  max-width: 300px;
-  text-indent: 2px;
-  transition: all 250ms ease-in-out;
-  white-space: nowrap;
-}
-
-.feedback:active {
-  background-color: var(--primaryControlHoverColor);
+  margin: 0 0 -5px calc(var(--grid-basis) * 2);
 }
 
 .dropDownArrow {
@@ -77,7 +44,6 @@
 @media (max-device-width: 750px), (max-width: 750px) {
   .footer {
     align-items: flex-end;
-    padding: 20px 25px;
     margin: 0;
     min-width: 455px;
   }

app/templates/footer/index.js

@@ -1,19 +1,14 @@
 const html = require('choo/html');
-const version = require('../../../package.json').version;
 const assets = require('../../../common/assets');
-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"
       onmouseover=${showDropDown}
       onmouseout=${hideDropDown}>
 
       <div class="legalSection__menu">
-        <img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/> 
+        <img class="dropDownArrow" src="${assets.get('dropdown-arrow.svg')}"/>
         <a class="legalSection__link"
           href="https://www.mozilla.org/about/legal">
           ${state.translate('footerLinkLegal')}
@@ -52,13 +47,6 @@ module.exports = function(state) {
       </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">
@@ -75,15 +63,6 @@ module.exports = function(state) {
         src="${assets.get('twitter-icon.svg')}"
         alt="Twitter"/>
     </a>
-
-    <a
-      href="https://www.mozilla.org"
-      class="socialSection__link">
-      <img
-        class="footer__mozLogo"
-        src="${assets.get('mozilla-logo.svg')}"
-        alt="mozilla"/>
-    </a>
   </footer>`;
   // HACK
   // We only want to render this once because we