add mozilla logo

server/src/footer-view.js

@@ -4,14 +4,19 @@ exports.Footer = class Footer extends React.Component {
   render() {
     return (
       <div className="footer">
-        <div className="responsive-wrapper row-space">
-          <div className="legal-links">
-          <a href="/terms">Terms</a>
-          <a href="/privacy">Privacy Notice</a>
-          <a href="https://www.mozilla.org/en-US/about/legal/report-infringement/" target="_blank">Report IP Infringement</a>
-          <a href={ `mailto:pageshot-feedback@mozilla.com?subject=Page%20Shot%20Feedback&body=Feedback%20regarding:%20${this.props.forUrl}` } target="_blank">Send Feedback</a>
-          <a href="https://github.com/mozilla-services/pageshot" target="_blank">GitHub</a>
-          {this.props.authenticated ? <a href="/leave-page-shot">Leave Page Shot</a> : null}
+        <div className="responsive-wrapper row-space-end">
+          <div className="footer-left">
+            <a href="https://www.mozilla.org" target="_blank" className="mozilla-logo" title="Mozilla"/>
+          </div>
+          <div className="footer-right">
+            <div className="legal-links">
+              <a href="/terms">Terms</a>
+              <a href="/privacy">Privacy Notice</a>
+              <a href="https://www.mozilla.org/en-US/about/legal/report-infringement/" target="_blank">Report IP Infringement</a>
+              <a href={ `mailto:pageshot-feedback@mozilla.com?subject=Page%20Shot%20Feedback&body=Feedback%20regarding:%20${this.props.forUrl}` } target="_blank">Send Feedback</a>
+              <a href="https://github.com/mozilla-services/pageshot" target="_blank">GitHub</a>
+              {this.props.authenticated ? <a href="/leave-page-shot">Remove All Data</a> : null}
+            </div>
           </div>
         </div>
       </div>

static/css/partials/_footer.scss

@@ -1,21 +1,70 @@
 .footer {
+
+  @include respond-to('small') {
+    .legal-links {
+      @include flex-container(column, flex-start, stretch);
+    }
+
+    a {
+      margin-bottom: 5px;
+    }
+
+    .mozilla-logo {
+      margin-bottom: 10px;
+    }
+  }
+
+  @include respond-to('medium') {
+    .legal-links {
+      @include flex-container(row, flex-end, flex-end);
+      height: 20px;
+    }
+  }
+
+
+
   padding: $base-gutter;
 
+  .row-space-end {
+    @include respond-to('small') {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
   a {
     font-size: 12px;
   }
 
   .legal-links a {
+    line-height: 12px;
     margin-right: 16px;
   }
-
+  
   .inverse-color-scheme & a {
     opacity: .5;
   }
 
   .default-color-scheme & a {
     color: $light-grey;
   }
+
+  .mozilla-logo {
+    background-repeat: no-repeat;
+    background-size: 77px 20px;
+    display: block;
+    height: 20px;
+    width: 77px;
+  }
+
+  .inverse-color-scheme & .mozilla-logo {
+    background-image: url("../img/mozilla@2x.png");
+  }
+
+  .default-color-scheme & .mozilla-logo {
+    background-image: url("../img/mozilla-dark@2x.png");
+  }
+
 }
 
 

static/css/partials/_layout.scss

@@ -26,6 +26,10 @@
   &.row-center {
     @include flex-container(row, center, center);
   }
+
+  &.row-space-end {
+    @include flex-container(row, space-between, flex-end);
+  }
 }
 
 .wrapper {