fix: make buttons dimmer and make modal colors correct

[pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

Author: amcsz

othello/static/css/base.css

@@ -143,8 +143,25 @@ input, button{
     background-color: #f8d7da;
 }
 
+.accept {
+    background-color: #60cc7d;
+}
+
+.reject {
+    background-color: #f04646;
+}
+
 .nav-button {
     background-color: transparent;
     border: transparent;
     color: white;
+}
+
+.status-btn:hover {
+  cursor: default !important;
+}
+
+.status-btn:focus {
+    outline: none !important;
+    box-shadow: none !important;
 }

othello/templates/auth/rankings.html

@@ -6,14 +6,15 @@
 {% block main %}
 <div class="container">
     <h1>User Rankings</h1>
-    <table class="table table-striped">
+    <table class="table">
         <thead>
             <tr>
                 <th>Rank</th>
                 <th>Username</th>
                 <th>Rating</th>
-                <th>Request Unranked</th>
-                <th>Request Ranked</th>
+                <th>Unranked</th>
+                <th>Ranked</th>
+                <th></th>
             </tr>
         </thead>
         <tbody>
@@ -22,8 +23,18 @@ <h1>User Rankings</h1>
                 <td>{{ page_obj.start_index|add:forloop.counter|add:-1 }}</td>
                 <td><a href="{% url 'auth:profile' user.username %}">{{ user.username }}</a></td>
                 <td>{{ user.rating }}</td>
-                <td>{% if user.username in users_with_submissions and user.accept_unranked_matches %}<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#requestMatchModal" data-username="{{ user.username }}" data-type="unranked">Request Unranked</button>{% endif %}</td>
-                <td>{% if user.username in users_with_submissions and user.accept_ranked_matches %}<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#requestMatchModal" data-username="{{ user.username }}" data-type="ranked">Request Ranked</button>{% endif %}</td>
+                <td>{% if user.accept_unranked_matches %}
+                    <button class="btn btn-sm win status-btn">Auto-Accept</button>
+                    {% else %}
+                    <button class="btn btn-sm lose status-btn">Auto-Reject</button>
+                    {% endif %}
+                </td>
+                <td>{% if user.accept_ranked_matches %}
+                    <button class="btn btn-sm win status-btn">Auto-Accept</button>
+                    {% else %}
+                    <button class="btn btn-sm lose status-btn">Auto-Reject</button>
+                    {% endif %}</td>
+                <td>{% if user.username in users_with_submissions %}<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#requestMatchModal" data-username="{{ user.username }}">Request Match</button>{% endif %}</td>
             </tr>
             {% endfor %}
         </tbody>
@@ -73,7 +84,6 @@ <h5 class="modal-title" id="requestMatchModalLabel">Request a Match</h5>
 $('#requestMatchModal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget);
     var username = button.data('username');
-    var type = button.data('type');
     var form = $('#requestMatchForm');
     var action = form.attr('action');
     if (action.indexOf('?') > -1) {
@@ -90,28 +100,16 @@ <h5 class="modal-title" id="requestMatchModalLabel">Request a Match</h5>
     });
 
     select.prop('disabled', true);
-
-    var isRankedCheckbox = form.find('input[name="is_ranked"]');
-    if (type === 'ranked') {
-        isRankedCheckbox.prop('checked', true);
-    } else {
-        isRankedCheckbox.prop('checked', false);
-    }
-    isRankedCheckbox.prop('disabled', true);
 });
 
 $('#requestMatchForm').on('submit', function() {
     $(this).find('select[name="opponent"]').prop('disabled', false);
-    $(this).find('input[name="is_ranked"]').prop('disabled', false);
 });
 
 $('#requestMatchModal').on('hidden.bs.modal', function () {
     var form = $('#requestMatchForm');
     var select = form.find('select[name="opponent"]');
     select.prop('disabled', false);
-    var isRankedCheckbox = form.find('input[name="is_ranked"]');
-    isRankedCheckbox.prop('disabled', false);
 });
-
 </script>
 {% endblock %}

othello/templates/base.html

@@ -85,7 +85,8 @@
         <div class="main" id="main">
             <div id="messages" class="messages">
                 {% for message in messages %}
-                    <div class="alert alert-{{ message.tags }} alert-dismissible fade show my-2" role="alert">
+                    <div class="alert alert-{% if message.tags == 'error' %}danger{% elif message.tags == 'success' %}success{% elif message.tags == 'warning' %}warning{% endif %} alert-dismissible fade show my-2"
+                        role="alert">
                         {{ message }}
                         <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                             <span aria-hidden="true">&times;</span>