improve tab appearance

data/static/admin.js

@@ -8,10 +8,10 @@ const tabs = {
             tabs.accountsEl.classList.add('unfocused');
             tabs.invitesEl.classList.remove('unfocused');
         }
-        if (tabs.invitesTabButton.classList.contains("text-muted")) {
+        if (tabs.accountsTabButton.classList.contains("active")) {
-            tabs.invitesTabButton.classList.remove("text-muted");
+            tabs.accountsTabButton.classList.remove("active");
-            tabs.accountsTabButton.classList.add("text-muted");
         }
+        tabs.invitesTabButton.classList.add("active");
     },
     accounts: function() {
         populateUsers();
@@ -19,9 +19,9 @@ const tabs = {
             tabs.invitesEl.classList.add('unfocused');
             tabs.accountsEl.classList.remove('unfocused');
         }
-        if (tabs.accountsTabButton.classList.contains("text-muted")) {
+        if (tabs.invitesTabButton.classList.contains("active")) {
-            tabs.accountsTabButton.classList.remove("text-muted");
+            tabs.invitesTabButton.classList.remove("active");
-            tabs.invitesTabButton.classList.add("text-muted");
+            tabs.accountsTabButton.classList.add("active");
         }
     }
 };

data/templates/admin.html

@@ -303,7 +303,14 @@
             </div>
         </div>
         <div class="pageContainer">
-            <h1><a id="invitesTabButton" class="text-button">invites </a><a id="accountsTabButton" class="text-button text-muted">accounts</a></h1>
+            <ul class="nav nav-pills" style="margin-bottom: 2rem;">
+                <li class="nav-item">
+                    <h2><a id="invitesTabButton" class="nl nav-link active">Invites</a></h2>
+                </li>
+                <li class="nav-item">
+                    <h2><a id="accountsTabButton" class="nl nav-link">Accounts</a></h2>
+                </li>
+            </ul>
             <div class="btn-group" role="group" id="headerButtons">
                 <button type="button" class="btn btn-primary" id="openSettings">
                     Settings <i class="fa fa-cog"></i>

scss/base.scss

@@ -73,31 +73,43 @@ body.modal-open {
     overflow: hidden;
 }
 
-@mixin scut-link-unstyled {
+@mixin white-text {
   &, &:visited, &:hover, &:active {
     font-style: inherit;
     color: inherit;
-    background-color: transparent;
     font-size: inherit;
     text-decoration: none;
     font-variant: inherit;
     font-weight: inherit;
     line-height: inherit;
     font-family: inherit;
-    margin-right: 1rem;
   }
 }
 
-%scut-link-unstyled {
+%white-text {
-    @include scut-link-unstyled;
+    @include white-text;
+}
+
+%link-unstyled {
+    @include white-text;
+    background-color: transparent;
+    margin-right: 0.5rem;
 }
 
 .text-button {
-    @extend %scut-link-unstyled;
+    @extend %link-unstyled;
 }
 
 .text-button:hover {
-    @extend %scut-link-unstyled;
+    @extend %link-unstyled;
+}
+
+.nl {
+    @extend %link-unstyled;
+}
+
+.nl:hover {
+    @extend %white-text;
 }
 
 .unfocused {

scss/bs4/bs4-jf.scss

@@ -138,4 +138,8 @@ $list-group-action-active-bg: $jf-blue-focus;
     background-color: $success;
 }
 
+.nav-link:hover {
+    background-color: $jf-blue-hover;
+}
+
 @import "../base.scss";

scss/bs4/bs4.scss

@@ -12,4 +12,8 @@
     color: $text-muted;
 }
 
+.nav-link:hover {
+    background-color: $list-group-hover-bg;
+}
+
 @import "../base.scss";

scss/bs5/bs5-jf.scss

@@ -138,4 +138,8 @@ $list-group-action-active-bg: $jf-blue-focus;
     background-color: $success;
 }
 
+.nav-link:hover {
+    background-color: $jf-blue-hover;
+}
+
 @import "../base.scss";

scss/bs5/bs5.scss

@@ -12,4 +12,8 @@
     color: $text-muted;
 }
 
+.nav-link:hover {
+    background-color: $list-group-hover-bg;
+}
+
 @import "../base.scss";