Use non-outline secondary buttons with new styling

Author: JelteF

media/commitfest/css/commitfest.css

@@ -152,6 +152,20 @@ a:hover .badge {
     white-space: nowrap;
 }
 
+/* Light grey btn-secondary with dark text that darkens on hover */
+.btn-secondary {
+    --bs-btn-color: #495057;
+    --bs-btn-bg: #f2f2f2;
+    --bs-btn-border-color: #f2f2f2;
+    --bs-btn-hover-color: #212529;
+    --bs-btn-hover-bg: #dee2e6;
+    --bs-btn-hover-border-color: #dee2e6;
+    --bs-btn-focus-shadow-rgb: 222, 226, 230;
+    --bs-btn-active-color: #212529;
+    --bs-btn-active-bg: #ced4da;
+    --bs-btn-active-border-color: #ced4da;
+}
+
 /* Responsive navbar layout */
 .navbar-content-wrapper {
     display: flex;

pgcommitfest/commitfest/templates/base_form.html

@@ -59,7 +59,7 @@ <h3 class="modal-title">Search user</h3>
       <form class="d-flex gap-2" style="margin-bottom: 5px;">
        <div class="input-group">
         <input id="searchUserSearchField" type="text" class="form-control" autocomplete="off">
-        <button id="searchUserSearchButton" onclick="return findUsers()" class="btn btn-outline-secondary">Search</button>
+        <button id="searchUserSearchButton" onclick="return findUsers()" class="btn btn-secondary">Search</button>
        </div>
       </form>
       <div>Search for users above and then pick one in the list below:</div>
@@ -68,7 +68,7 @@ <h3 class="modal-title">Search user</h3>
       </div>
      </div>
      <div class="modal-footer">
-      <a href="#" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</a>
+      <a href="#" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
       <a href="#" id="doSelectUserButton" class="btn btn-primary disabled">Add user to system</a>
      </div>
     </div>
@@ -83,7 +83,7 @@ <h3 class="modal-title">Search user</h3>
  <script>
   {%if user.is_staff%}
    $('.selectize-control.add-user-picker').after(
-    $('<a href="#" class="btn btn-outline-secondary btn-sm">Import user not listed</a>').click(function () {
+    $('<a href="#" class="btn btn-secondary btn-sm">Import user not listed</a>').click(function () {
      search_and_store_user();
     })
    );

pgcommitfest/commitfest/templates/commitfest.html

@@ -2,12 +2,12 @@
 {%load commitfest %}
 {%block contents%}
 
- <button type="button" class="btn btn-outline-secondary active" id="filterButton" onClick="togglePatchFilterButton('filterButton', 'collapseFilters')">Search/filter</button>
- <a class="btn btn-outline-secondary{% if request.GET.reviewer == '-2' %} active{% endif %}" href="?reviewer=-2">No reviewers</a>
- <a class="btn btn-outline-secondary{% if request.GET.author == '-3' %} active{% endif %}" href="?author=-3">My patches</a>
- <a class="btn btn-outline-secondary{% if request.GET.reviewer == '-3' %} active{% endif %}" href="?reviewer=-3">My reviews</a>
+ <button type="button" class="btn btn-secondary active" id="filterButton" onClick="togglePatchFilterButton('filterButton', 'collapseFilters')">Search/filter</button>
+ <a class="btn btn-secondary{% if request.GET.reviewer == '-2' %} active{% endif %}" href="?reviewer=-2">No reviewers</a>
+ <a class="btn btn-secondary{% if request.GET.author == '-3' %} active{% endif %}" href="?author=-3">My patches</a>
+ <a class="btn btn-secondary{% if request.GET.reviewer == '-3' %} active{% endif %}" href="?reviewer=-3">My reviews</a>
  {%if cf.is_open or user.is_staff %}
-  <a class="btn btn-outline-secondary" href="new/">New patch</a>
+  <a class="btn btn-secondary" href="new/">New patch</a>
  {%endif%}
  {%include "filter_form.html" %}
 
@@ -111,11 +111,11 @@ <h3>{{p.is_open|yesno:"Active patches,Closed patches"}}</h3>
 
  <div>
   {%if cf.is_open or user.is_staff %}
-   <a class="btn btn-outline-secondary" href="new/">New patch</a>
+   <a class="btn btn-secondary" href="new/">New patch</a>
   {%endif%}
   {%if user.is_staff%}
    <div class="btn-group dropup">
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Send private mail</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Send private mail</button>
     <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="javascript:send_selected()">Selected</a></li>
      <li><a class="dropdown-item" href="send_email/?reviewers={{openpatchids|join:","}}">All reviewers (open patches)</a></li>
@@ -125,7 +125,7 @@ <h3>{{p.is_open|yesno:"Active patches,Closed patches"}}</h3>
    </div>
 
    <div class="btn-group dropup">
-    <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Reports</button>
+    <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Reports</button>
     <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="reports/authorstats/">Author stats</a></li>
     </ul>

pgcommitfest/commitfest/templates/filter_form.html

@@ -23,8 +23,8 @@
       </td>
      {%endfor%}
      <td>
-      <input type="submit" class="btn btn-outline-secondary" value="Filter">
-      <a class="btn btn-outline-secondary" href=".">Clear</a>
+      <input type="submit" class="btn btn-secondary" value="Filter">
+      <a class="btn btn-secondary" href=".">Clear</a>
      </td>
     </tr>
    </tbody>

pgcommitfest/commitfest/templates/patch.html

@@ -43,7 +43,7 @@
       {%endfor%}
      {%endif%}
      {%if cfbot_branch %}
-      <button class="btn btn-outline-secondary" title="This adds the following to your clipboard (needs to be run in an existing git repo):
+      <button class="btn btn-secondary" title="This adds the following to your clipboard (needs to be run in an existing git repo):
                                                        git remote add commitfest https://github.com/postgresql-cfbot/postgresql.git
                                                        git fetch commitfest cf/{{patch.id}}
                                                        git checkout commitfest/cf/{{patch.id}}" onclick="addGitCheckoutToClipboard({{patch.id}})">Copy git checkout commands</button>
@@ -106,12 +106,12 @@
    </tr>
    <tr>
     <th>Reviewers</th>
-    <td>{{patch.reviewers_string}}<a href="reviewer/{{is_reviewer|yesno:"remove,become"}}/" class="btn btn-outline-secondary float-end">{{is_reviewer|yesno:"Remove from reviewers,Become reviewer"}}</a></td>
+    <td>{{patch.reviewers_string}}<a href="reviewer/{{is_reviewer|yesno:"remove,become"}}/" class="btn btn-secondary float-end">{{is_reviewer|yesno:"Remove from reviewers,Become reviewer"}}</a></td>
    </tr>
    <tr>
     <th>Committer</th>
     <td>{%if patch.committer%}{{patch.committer.fullname}}{%endif%}
-     {%if is_committer%}<a href="committer/{{is_this_committer|yesno:"remove,become"}}/" class="btn btn-outline-secondary float-end">{{is_this_committer|yesno:"Unclaim as committer,Claim as committer"}}</a>{%endif%}
+     {%if is_committer%}<a href="committer/{{is_this_committer|yesno:"remove,become"}}/" class="btn btn-secondary float-end">{{is_this_committer|yesno:"Unclaim as committer,Claim as committer"}}</a>{%endif%}
     </td>
    </tr>
    <tr>
@@ -129,9 +129,9 @@
     <th>Emails</th>
     <td>
      {%if user.is_authenticated%}
-      <div style="float:right"><button class="btn btn-outline-secondary" onclick="attachThread({{cf.id}},{{patch.id}})">Attach thread</button></div>
+      <div style="float:right"><button class="btn btn-secondary" onclick="attachThread({{cf.id}},{{patch.id}})">Attach thread</button></div>
      {%else%}
-      <div style="float:right"><button class="btn btn-outline-secondary" onclick="location.href='/account/login/?next=/{{cf.id}}/{{patch.id}}/%3Fattachthreadnow'">Attach thread</button></div>
+      <div style="float:right"><button class="btn btn-secondary" onclick="location.href='/account/login/?next=/{{cf.id}}/{{patch.id}}/%3Fattachthreadnow'">Attach thread</button></div>
      {%endif%}
      <dl>
       {%for t in patch.mailthread_set.all%}
@@ -141,7 +141,7 @@
         Latest at <a href="https://www.postgresql.org/message-id/{{t.latestmsgid}}">{{t.latestmessage}}</a> by {{t.latestauthor|hidemail}}<br/>
         {%for ta in t.mailthreadattachment_set.all%}
          {%if forloop.first%}
-          Latest attachment (<a href="https://www.postgresql.org/message-id/attachment/{{ta.attachmentid}}/{{ta.filename}}">{{ta.filename}}</a>) at <a href="https://www.postgresql.org/message-id/{{ta.messageid}}">{{ta.date}}</a> from {{ta.author|hidemail}} <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#att{{t.pk}}" title="Show all attachments">+</button>
+          Latest attachment (<a href="https://www.postgresql.org/message-id/attachment/{{ta.attachmentid}}/{{ta.filename}}">{{ta.filename}}</a>) at <a href="https://www.postgresql.org/message-id/{{ta.messageid}}">{{ta.date}}</a> from {{ta.author|hidemail}} <button type="button" class="btn btn-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#att{{t.pk}}" title="Show all attachments">+</button>
           <div id="att{{t.pk}}" class="collapse">
          {%endif%}
          &nbsp;&nbsp;&nbsp;&nbsp;Attachment (<a href="https://www.postgresql.org/message-id/attachment/{{ta.attachmentid}}/{{ta.filename}}">{{ta.filename}}</a>) at <a href="https://www.postgresql.org/message-id/{{ta.messageid}}">{{ta.date}}</a> from {{ta.author|hidemail}} (Patch: {{ta.ispatch|yesno:"Yes,No,Pending check"}})<br/>
@@ -173,7 +173,7 @@ <h4>Annotations</h4>
            </table>
           {%endif%}
          {%endfor%}
-         {%if user.is_authenticated%}<button class="btn btn-sm btn-outline-secondary" onclick="addAnnotation({{t.id}})">Add annotation</button>{%endif%}
+         {%if user.is_authenticated%}<button class="btn btn-sm btn-secondary" onclick="addAnnotation({{t.id}})">Add annotation</button>{%endif%}
         </div>
        </dd>
       {%endfor%}
@@ -204,7 +204,7 @@ <h4>Annotations</h4>
       </table>
      </div>
      {%if user.is_authenticated%}
-      <a href="{{is_subscribed|yesno:"unsubscribe,subscribe"}}/" class="btn btn-outline-secondary">{{is_subscribed|yesno:"Unsubscribe from patch update emails,Subscribe to patch update emails"}}</a>
+      <a href="{{is_subscribed|yesno:"unsubscribe,subscribe"}}/" class="btn btn-secondary">{{is_subscribed|yesno:"Unsubscribe from patch update emails,Subscribe to patch update emails"}}</a>
      {%endif%}
     </td>
    </tr>
@@ -237,7 +237,7 @@ <h3>Flag as committed</h3>
      </form>
     </div>
     <div class="modal-footer">
-     <a href="#" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</a>
+     <a href="#" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
      <a href="#" class="btn btn-primary" id="doCommitButton">Flag as committed</a>
     </div>
    </div>
@@ -269,7 +269,7 @@ <h3>Add annotation</h3>
     </div>
    </div>
    <div class="modal-footer">
-    <a href="#" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</a>
+    <a href="#" class="btn btn-secondary" data-bs-dismiss="modal">Close</a>
     <a href="#" id="doAnnotateMessageButton" class="btn btn-primary disabled">Add annotation</a>
    </div>
   </div></div>

pgcommitfest/commitfest/templates/patch_commands.inc

@@ -1,16 +1,16 @@
 <div style="margin-bottom:5px;">
- <a class="btn btn-outline-secondary" href="edit/">Edit</a>
+ <a class="btn btn-secondary" href="edit/">Edit</a>
 
  <div class="btn-group">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Comment/Review</button>
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Comment/Review</button>
   <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="comment/">Comment</a></li>
    <li><a class="dropdown-item" href="review/">Review</a></li>
   </ul>
  </div>
 
  <div class="btn-group">
-  <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Change Status</button>
+  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Change Status</button>
   <ul class="dropdown-menu">
    <li><h6 class="dropdown-header">Open statuses</h6></li>
    <li><a class="dropdown-item" href="status/review/">Needs review</a></li>
@@ -48,7 +48,7 @@
 
  {%if request.user.is_staff%}
   <div class="btn-group">
-   <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Send private mail</button>
+   <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Send private mail</button>
    <ul class="dropdown-menu">
     <li><a class="dropdown-item" href="send_email/?authors={{patch.id}}">Send mail to authors</a></li>
     <li><a class="dropdown-item" href="send_email/?reviewers={{patch.id}}">Send mail to reviewers</a></li>

pgcommitfest/commitfest/templates/patchsearch.html

@@ -6,7 +6,7 @@
   <div class="form-group">
    <input type="text" class="form-control" id="searchterm" name="searchterm" placeholder="Global search">
   </div>
-  <button type="submit" class="btn btn-outline-secondary">Search</button>
+  <button type="submit" class="btn btn-secondary">Search</button>
  </form>
 
  <table class="table table-striped table-bordered table-hover">

pgcommitfest/commitfest/templates/thread_attach.inc

@@ -10,7 +10,7 @@
     <input type="hidden" id="attachThreadAttachOnly" value="0">
     <div class="input-group">
      <input id="attachThreadSearchField" type="text" class="form-control" placeholder="Search subject or name">
-     <button id="attachThreadSearchButton" onclick="return findLatestThreads()" class="btn btn-outline-secondary">Search</button>
+     <button id="attachThreadSearchButton" onclick="return findLatestThreads()" class="btn btn-secondary">Search</button>
     </div>
    </form>
    <div class="mb-3">Pick one of the recent emails from pgsql-hackers, or search above for subject or name:</div>
@@ -22,7 +22,7 @@
    <input type="text" id="attachThreadMessageId" class="form-control" placeholder="Message id" onkeypress="attachThreadChanged()" onchange="attachThreadChanged()">
   </div>
   <div class="modal-footer">
-   <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
+   <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
    <button type="button" id="doAttachThreadButton" class="btn btn-primary disabled">Attach thread</button>
   </div>
  </div></div>

pgcommitfest/commitfest/widgets.py

@@ -8,7 +8,7 @@ def render(self, name, value, attrs=None, renderer=None):
         html = super(ThreadPickWidget, self).render(name, value, attrs)
         html = (
             html
-            + '&nbsp;<button class="btn btn-outline-secondary attachThreadButton" id="btn_%s">Find thread</button>'
+            + '&nbsp;<button class="btn btn-secondary attachThreadButton" id="btn_%s">Find thread</button>'
             % name
         )
         return mark_safe(html)