hook multifile to ui

app/templates/footer/footer.css

@@ -3,13 +3,14 @@
   bottom: 0;
   left: 0;
   font-size: 13px;
+  font-weight: 600;
   display: flex;
   align-items: flex-end;
   flex-direction: row;
-  justify-content: space-between;
   padding: 50px 31px 41px;
   width: 100%;
   box-sizing: border-box;
+  justify-content: flex-end;
 }
 
 .legalSection {
@@ -20,18 +21,18 @@
 }
 
 .legalSection__link {
-  color: var(--lightTextColor);
-  opacity: 0.9;
+  color: #fff;
+  text-shadow: 0 0 3px #000;
   white-space: nowrap;
   margin-right: 2vw;
 }
 
-.legalSection__link:hover {
-  opacity: 1;
+.legalSection__link:visited {
+  color: #ededf0;
 }
 
-.legalSection__link:visited {
-  color: var(--lightTextColor);
+.legalSection__link:hover {
+  color: #d7d7db;
 }
 
 .legalSection__mozLogo {
@@ -60,12 +61,12 @@
   margin-bottom: -5px;
 }
 
-@media (max-device-width: 768px), (max-width: 768px) {
+@media (max-device-width: 750px), (max-width: 750px) {
   .footer {
-    flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     max-width: 630px;
+    padding: 20px 31px;
     margin: auto;
   }
 

app/templates/footer/index.js

@@ -38,8 +38,6 @@ module.exports = function(state) {
         class="legalSection__link">
         ${state.translate('reportIPInfringement')}
       </a>
-    </div>
-    <div class="socialSection">
       <a
         href="https://github.com/mozilla/send"
         class="socialSection__link">
@@ -52,9 +50,9 @@ module.exports = function(state) {
         href="https://twitter.com/FxTestPilot"
         class="socialSection__link">
         <img
-          class="socialSection__icon"
-          src="${assets.get('twitter-icon.svg')}"
-          alt="twitter"/>
+          class="legalSection__mozLogo"
+          src="${assets.get('mozilla-logo.svg')}"
+          alt="mozilla"/>
       </a>
     </div>
   </footer>`;