Tweak messages layout and SCSS variables

Author: madprime

open_humans/templates/base-bs4.html

@@ -76,7 +76,7 @@
                   {% endif %}
                   <div class="dropdown-divider"></div>
                   <a class="dropdown-item logout-link" href="{% url 'account_logout' %}">
-                      Log out</a>      
+                      Log out</a>
                 </div>
               </li>
               {% else %}
@@ -114,12 +114,15 @@
         {% endif %}
         {% block messages_block %}
           {% if messages %}
+            <div class="mt-2">
             {% for message in messages %}
-            <div class="alert {% if message.tags %}
-                alert-{% ifequal message.tags 'error' %}danger{% else %}{{ message.tags }}{% endifequal %}
-                {% endif %}">
-              {{ message }}</div>
+              <div class="alert {% if message.tags %}
+                  alert-{% ifequal message.tags 'error' %}danger{% else %}{{ message.tags }}{% endifequal %}
+                  {% endif %}">
+                {{ message }}
+              </div>
             {% endfor %}
+            </div>
           {% endif %}
         {% endblock messages_block %}
 

open_humans/templates/partials/activity-permissions-bs4.html

@@ -11,5 +11,4 @@
         Username
         {% endif %}
     </div>
-</div>
-  
+</div>

static/css/oh-proj-theming.css

@@ -77,6 +77,7 @@ $(function () {
   parsleyForm('form');
 
   $('.logout-link').click(function (e) {
+    console.log("Clicked logout link");
     e.preventDefault();
 
     $.post($(this).attr('href'), function () {

static/js/main-bs4.js

@@ -162,7 +162,7 @@ body.oh-proj-template > main > div.container {
 }
 
 .navbar.navbar-open-humans {
-  background-color: #fff;
+  background-color: white;
   border-radius: 0px;
   border: 0px;
   border-bottom: 1px solid $oh-teal-light;
@@ -198,7 +198,7 @@ body.oh-proj-template > main > div.container {
 /* Button styles */
 
 .btn-default {
-  background-color: #fff;
+  background-color: white;
   border: 2px solid $oh-teal-dark;
   color: $oh-teal-dark;
 
@@ -210,7 +210,7 @@ body.oh-proj-template > main > div.container {
 }
 
 .btn-primary-hollow {
-  background-color: #fff;
+  background-color: white;
   border: 2px solid $oh-orange;
   color: $oh-teal-dark;
 
@@ -224,12 +224,12 @@ body.oh-proj-template > main > div.container {
 .btn-primary {
   background-color: $oh-orange;
   border: 2px solid $oh-orange;
-  color: #fff;
+  color: white;
 
   &:hover, &:focus {
-    background-color: #f7763e;
-    border-color: #f7763e;
-    color: #fff;
+    background-color: $oh-orange-dark;
+    border-color: $oh-orange-dark;
+    color: white;
   }
 }