Updated Footer Styling

analytics_dashboard/static/sass/_base.scss

@@ -312,10 +312,21 @@ hr.has-emphasis {
   }
 
   .footer {
-    padding-top: ($padding-large-vertical);
-    padding-bottom: ($padding-large-vertical*3);
+    padding-bottom: ($padding-large-vertical);
     font-size: $font-size-small;
     color: $gray;
+    background-color: $gray-d2;
+
+    .legal {
+      padding-top: ($padding-large-vertical*2);
+    }
+
+    .feedback {
+      border-top: solid 2px $edx-blue;
+      background-color: white;
+      text-align: center;
+      padding: ($padding-large-vertical*2) 0;
+    }
   }
 
   // CASE: larger than small screen breakpoint

analytics_dashboard/static/sass/_developer.scss

@@ -50,10 +50,6 @@
 // --------------------
 
 
-.footer {
-  padding: 0 ($padding-large-horizontal*2);
-}
-
 .section-title-button {
   float: right;
 }

analytics_dashboard/templates/footer.html

 {% load i18n %}
 {% load dashboard_extras %}
 
-<div class="footer">
-  <hr/>
-  <div class="row">
-    <div class="col-xs-6 col-md-6">
-      {% captureas email_link %}
-        <a class="feedback-email" href="mailto:{% settings_value 'FEEDBACK_EMAIL' %}?Subject=Feedback">
-        {% settings_value 'FEEDBACK_EMAIL' %}</a>{% endcaptureas %}
-      {% blocktrans %}We want this dashboard to work for you! Please send suggestions, comments, and critiques to {{ email_link }}.{% endblocktrans %}
+<footer class="footer">
+  <div class="feedback">
+    <div class="container">
+      <div class="row">
+        {% captureas email_link %}
+          <a class="feedback-email" href="mailto:{% settings_value 'FEEDBACK_EMAIL' %}?Subject=Feedback">
+            {% settings_value 'FEEDBACK_EMAIL' %}
+          </a>
+        {% endcaptureas %}
+        {% blocktrans %}We want this dashboard to work for you! Please send suggestions, comments, and critiques to
+          {{ email_link }}.{% endblocktrans %}
+      </div>
     </div>
-    <div class="col-xs-6 col-md-6 text-right">
-      <a href="{% settings_value 'TERMS_OF_SERVICE_URL' %}" target="_blank" data-role="tos">
-        {% blocktrans %}Terms of Service{% endblocktrans %}</a>
-      <br>
-      <a href="{% settings_value 'PRIVACY_POLICY_URL' %}" target="_blank" data-role="privacy-policy">
-        {% blocktrans %}Privacy Policy{% endblocktrans %}
-      </a>
+  </div>
+  <div class="legal">
+    <div class="container">
+      <div class="row">
+        <div class="col-xs-6 col-md-6">
+          <a href="{% settings_value 'TERMS_OF_SERVICE_URL' %}" target="_blank" data-role="tos">
+            {% blocktrans %}Terms of Service{% endblocktrans %}
+          </a>
+          &nbsp;
+          <a href="{% settings_value 'PRIVACY_POLICY_URL' %}" target="_blank" data-role="privacy-policy">
+            {% blocktrans %}Privacy Policy{% endblocktrans %}
+          </a>
+        </div>
+        <div class="col-xs-6 col-md-6 text-right">
+          {% captureas platform_name %}{% settings_value 'PLATFORM_NAME' %}{% endcaptureas %}
+          {% captureas current_year %}{% now "Y" %}{% endcaptureas %}
+          {# Translators: The © symbol appears directly before this line. #}
+          <p class="copyright">© {% blocktrans %} {{ current_year }} {{ platform_name }}, except where noted, all rights
+            reserved. {% endblocktrans %}</p>
+        </div>
+      </div>
     </div>
   </div>
-</div>
+</footer>