From b344d0ec7c1f634478ba28b5be03fb20d68bef80 Mon Sep 17 00:00:00 2001
From: "Rudy (zarya)" <git@gigafreak.net>
Date: Mon, 14 Oct 2024 16:47:19 +0200
Subject: [PATCH] Added list-group-item-action to backoffice and economy

---
 .../templates/autoschedule_index.html         | 10 ++++----
 .../templates/backoffice_proxy.html           |  2 +-
 src/backoffice/templates/camp_select.html     |  2 +-
 .../templates/coinify_dashboard.html          |  8 +++----
 .../templates/event_location_list.html        |  2 +-
 .../event_session_create_location_select.html |  2 +-
 .../event_session_create_type_select.html     |  2 +-
 .../templates/event_session_detail.html       |  2 +-
 src/backoffice/templates/event_slot_list.html |  2 +-
 .../templates/event_type_detail.html          |  4 ++--
 .../event_proposal_list_table_backoffice.html |  2 +-
 .../templates/includes/index_content.html     | 24 +++++++++----------
 .../templates/includes/index_economy.html     | 24 +++++++++----------
 .../templates/includes/index_facilities.html  |  6 ++---
 .../templates/includes/index_game.html        |  4 ++--
 .../templates/includes/index_info.html        | 12 +++++-----
 .../templates/includes/index_map.html         |  2 +-
 .../templates/includes/index_orga.html        | 18 +++++++-------
 .../templates/includes/index_permissions.html |  6 ++---
 .../templates/includes/index_pos.html         | 10 ++++----
 .../speaker_list_table_backoffice.html        |  2 +-
 .../templates/scan_ticket_pos_select.html     |  2 +-
 .../templates/team_permissions_index.html     |  2 +-
 .../templates/zettle_dashboard.html           |  6 ++---
 src/economy/templates/chain_list.html         |  2 +-
 src/static_src/css/bootstrap-slate.css        |  2 +-
 26 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/src/backoffice/templates/autoschedule_index.html b/src/backoffice/templates/autoschedule_index.html
index 9155a2aea..81ecc7362 100644
--- a/src/backoffice/templates/autoschedule_index.html
+++ b/src/backoffice/templates/autoschedule_index.html
@@ -8,7 +8,7 @@ <h3 class="card-title">Manage AutoScheduler</h3>
     <div class="card-body">
       <p class="lead">Select your desired action below</p>
       <div class="list-group">
-        <a href="{% url 'backoffice:autoschedule_validate' camp_slug=camp.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:autoschedule_validate' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             <i class="fas fa-fire-extinguisher fa-fw"></i> Validate Schedule
           </h4>
@@ -16,7 +16,7 @@ <h4 class="list-group-item-heading">
             Validate published or draft schedule. Useful to check if the published schedule is still valid after making changes to the underlying data. Can also check the draft schedule.
           </p>
         </a>
-        <a href="{% url 'backoffice:autoschedule_diff' camp_slug=camp.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:autoschedule_diff' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             <i class="fas fa-random fa-fw"></i> Show Schedule Diff
           </h4>
@@ -24,7 +24,7 @@ <h4 class="list-group-item-heading">
             Show the differences between the published schedule and the similar draft schedule. Use this to predict what schedule changes would happen if the draft schedule was applied now. <i>This view takes a while to load.</i>
           </p>
         </a>
-        <a href="{% url 'backoffice:autoschedule_apply' camp_slug=camp.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:autoschedule_apply' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             <i class="fas fa-check fa-fw"></i> Apply Schedule
           </h4>
@@ -32,7 +32,7 @@ <h4 class="list-group-item-heading">
             Apply the draft schedule by unscheduling any currently autoscheduled Events and scheduling new Events in EventSlots to match the Slot/Event combinations in the draft schedule. It is prudent to check the validity and diff for the draft schedule before applying!
           </p>
         </a>
-        <a href="{% url 'backoffice:autoschedule_debug_event_slot_unavailability' camp_slug=camp.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:autoschedule_debug_event_slot_unavailability' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             <i class="fas fa-chess-board fa-fw"></i> Debug Event/Slot Unavailability
           </h4>
@@ -40,7 +40,7 @@ <h4 class="list-group-item-heading">
             This debug view shows a matrix/table with all AutoScheduler Events on the Y axis and all AutoScheduler Slots on the X axis, and red/green table cells to indicate whether an event can be scheduled in that Slot. <i>This view takes a while to load.</i>
           </p>
         </a>
-        <a href="{% url 'backoffice:autoschedule_debug_event_conflicts' camp_slug=camp.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:autoschedule_debug_event_conflicts' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             <i class="fas fa-chess-board fa-fw"></i> Debug Event Conflicts
           </h4>
diff --git a/src/backoffice/templates/backoffice_proxy.html b/src/backoffice/templates/backoffice_proxy.html
index 39392addb..7edd9dead 100644
--- a/src/backoffice/templates/backoffice_proxy.html
+++ b/src/backoffice/templates/backoffice_proxy.html
@@ -7,7 +7,7 @@
     <div class="card-body">
       <ul class="list-group">
         {% for slug, urltuple in urls.items %}
-          <a class="list-group-item" href="{% url 'backoffice:proxy' camp_slug=camp.slug proxy_slug=slug %}"><span class="h4">{{ urltuple.0 }}</span><span class="pull-right">{{ urltuple.1 }}</span></a>
+          <a class="list-group-item list-group-item-action" href="{% url 'backoffice:proxy' camp_slug=camp.slug proxy_slug=slug %}"><span class="h4">{{ urltuple.0 }}</span><span class="pull-right">{{ urltuple.1 }}</span></a>
         {% endfor %}
       </ul>
     </div>
diff --git a/src/backoffice/templates/camp_select.html b/src/backoffice/templates/camp_select.html
index b937460dd..011b2229c 100644
--- a/src/backoffice/templates/camp_select.html
+++ b/src/backoffice/templates/camp_select.html
@@ -17,7 +17,7 @@ <h2>BornHack Backoffice Camp Picker</h2>
     <p>
       <div class="list-group">
         {% for camp in camp_list %}
-          <a href="{% url 'backoffice:camp_index' camp_slug=camp.slug %}" class="list-group-item">
+          <a href="{% url 'backoffice:camp_index' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
             <h4 class="list-group-item-heading">{{ camp.title }}</h4>
             <p class="list-group-item-text">Manage {{ camp.title }}</p>
           </a>
diff --git a/src/backoffice/templates/coinify_dashboard.html b/src/backoffice/templates/coinify_dashboard.html
index 6964254e4..b15271ad2 100644
--- a/src/backoffice/templates/coinify_dashboard.html
+++ b/src/backoffice/templates/coinify_dashboard.html
@@ -26,19 +26,19 @@
       {% endif %}
 
       <div class="list-group">
-        <a class="list-group-item" href="{% url 'backoffice:coinifyinvoice_list' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:coinifyinvoice_list' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading">Coinify Invoices</h4>
           <p class="list-group-item-text">Use this view to see {{ invoices }} Coinify invoices.</p>
         </a>
-        <a class="list-group-item" href="{% url 'backoffice:coinifypayout_list' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:coinifypayout_list' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading">Coinify Payouts</h4>
           <p class="list-group-item-text">Use this view to see {{ payouts }} Coinify payouts.</p>
         </a>
-        <a class="list-group-item" href="{% url 'backoffice:coinifybalance_list' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:coinifybalance_list' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading">Coinify Balances</h4>
           <p class="list-group-item-text">Use this view to see {{ balances }} Coinify balances.</p>
         </a>
-        <a class="list-group-item" href="{% url 'backoffice:coinify_csv_import' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:coinify_csv_import' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading">Import CSV Files</h4>
           <p class="list-group-item-text">Use this view to import CSV files with new invoices, payouts or balances.</p>
         </a>
diff --git a/src/backoffice/templates/event_location_list.html b/src/backoffice/templates/event_location_list.html
index aa278942d..e035232cb 100644
--- a/src/backoffice/templates/event_location_list.html
+++ b/src/backoffice/templates/event_location_list.html
@@ -38,7 +38,7 @@
                   {% if location.conflicts.exists %}
                     <ul class="list-group">
                       {% for conflict in location.conflicts.all %}
-                        <a href="{% url 'backoffice:event_location_detail' camp_slug=camp.slug slug=conflict.slug %}"class="list-group-item"><i class="fas fa-{{ conflict.icon }}"></i> {{ conflict.name }}</a>
+                        <a href="{% url 'backoffice:event_location_detail' camp_slug=camp.slug slug=conflict.slug %}"class="list-group-item list-group-item-action"><i class="fas fa-{{ conflict.icon }}"></i> {{ conflict.name }}</a>
                       {% endfor %}
                   {% else %}
                     N/A
diff --git a/src/backoffice/templates/event_session_create_location_select.html b/src/backoffice/templates/event_session_create_location_select.html
index 84499f5c7..3ae6738f7 100644
--- a/src/backoffice/templates/event_session_create_location_select.html
+++ b/src/backoffice/templates/event_session_create_location_select.html
@@ -10,7 +10,7 @@ <h3 class="card-title">Create New EventSession - Select Event Location</h3>
       <p class="lead">Select Event Location for the new EventSession</p>
       <div class="list-group">
         {% for location in event_location_list %}
-          <a href="{%url 'backoffice:event_session_create' camp_slug=camp.slug event_type_slug=event_type.slug event_location_slug=location.slug %}" class="list-group-item">
+          <a href="{%url 'backoffice:event_session_create' camp_slug=camp.slug event_type_slug=event_type.slug event_location_slug=location.slug %}" class="list-group-item list-group-item-action">
             <h4 class="list-group-item-heading">
               <i class="fas fa-{{ location.icon }} fa-2x fa-pull-left fa-fw"></i>
               {{ location.name }}<span class="pull-right"><i class="fas fa-plus fa-2x fa-pull-right"></i></span>
diff --git a/src/backoffice/templates/event_session_create_type_select.html b/src/backoffice/templates/event_session_create_type_select.html
index c03078363..0d2540c9d 100644
--- a/src/backoffice/templates/event_session_create_type_select.html
+++ b/src/backoffice/templates/event_session_create_type_select.html
@@ -10,7 +10,7 @@ <h3 class="card-title">Create New EventSession - Select Event Type</h3>
       <p class="lead">Select Event Type for the new EventSession</p>
       <div class="list-group">
         {% for event_type in event_type_list %}
-          <a href="{%url 'backoffice:event_session_create_location_select' camp_slug=camp.slug event_type_slug=event_type.slug %}" class="list-group-item">
+          <a href="{%url 'backoffice:event_session_create_location_select' camp_slug=camp.slug event_type_slug=event_type.slug %}" class="list-group-item list-group-item-action">
             <h4 class="list-group-item-heading">
               <i class="fas fa-{{ event_type.icon }} fa-2x fa-pull-left fa-fw" style="color: {{ event_type.color }};"></i>
               {{ event_type.name }}<span class="pull-right"><i class="fas fa-plus fa-2x fa-pull-right" style="color: {{ event_type.color }};"></i></span>
diff --git a/src/backoffice/templates/event_session_detail.html b/src/backoffice/templates/event_session_detail.html
index 84f868b75..598bc78eb 100644
--- a/src/backoffice/templates/event_session_detail.html
+++ b/src/backoffice/templates/event_session_detail.html
@@ -60,7 +60,7 @@ <h3 class="card-title">EventSession Details</h3>
                         {% if slot.event.speakers.exists %}
                           <ul class="list-group">
                             {% for speaker in slot.event.speakers.all %}
-                              <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item"><i class="fas fa-user"></i> {{ speaker.name }}</a>
+                              <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item list-group-item-action"><i class="fas fa-user"></i> {{ speaker.name }}</a>
                             {% endfor %}
                           </ul>
                         {% else %}
diff --git a/src/backoffice/templates/event_slot_list.html b/src/backoffice/templates/event_slot_list.html
index d6c1465ce..3874aa18f 100644
--- a/src/backoffice/templates/event_slot_list.html
+++ b/src/backoffice/templates/event_slot_list.html
@@ -48,7 +48,7 @@
                     {% if slot.event.speakers.exists %}
                       <ul class="list-group">
                         {% for speaker in slot.event.speakers.all %}
-                          <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item"><i class="fas fa-user"></i> {{ speaker.name }}</li></a>
+                          <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item list-group-item-action"><i class="fas fa-user"></i> {{ speaker.name }}</li></a>
                         {% endfor %}
                     {% else %}
                       N/A
diff --git a/src/backoffice/templates/event_type_detail.html b/src/backoffice/templates/event_type_detail.html
index 646fa46cc..521db2819 100644
--- a/src/backoffice/templates/event_type_detail.html
+++ b/src/backoffice/templates/event_type_detail.html
@@ -65,7 +65,7 @@ <h3 class="card-title">Details for EventType: {{ event_type.name }}</h3>
                         <td>
                           <ul class="list-group">
                             {% for speaker in event.speakers.all %}
-                              <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item"><i class="fas fa-user"></i> {{ speaker.name }}</a>
+                              <a href="{% url 'backoffice:speaker_detail' camp_slug=camp.slug slug=speaker.slug %}" class="list-group-item list-group-item-action"><i class="fas fa-user"></i> {{ speaker.name }}</a>
                             {% empty %}
                               N/A
                             {% endfor %}
@@ -74,7 +74,7 @@ <h3 class="card-title">Details for EventType: {{ event_type.name }}</h3>
                         <td>
                           <ul class="list-group">
                             {% for slot in event.event_slots.all %}
-                              <a href="{% url 'backoffice:event_slot_detail' camp_slug=camp.slug pk=slot.pk %}" class="list-group-item">From {{ slot.when.lower }} to {{ slot.when.upper }} at {{ slot.event_location.name }}</a>{% endfor %}</td>
+                              <a href="{% url 'backoffice:event_slot_detail' camp_slug=camp.slug pk=slot.pk %}" class="list-group-item list-group-item-action">From {{ slot.when.lower }} to {{ slot.when.upper }} at {{ slot.event_location.name }}</a>{% endfor %}</td>
                         </tr>
                     {% endfor %}
                   </tbody>
diff --git a/src/backoffice/templates/includes/event_proposal_list_table_backoffice.html b/src/backoffice/templates/includes/event_proposal_list_table_backoffice.html
index 1716083a6..f248d661c 100644
--- a/src/backoffice/templates/includes/event_proposal_list_table_backoffice.html
+++ b/src/backoffice/templates/includes/event_proposal_list_table_backoffice.html
@@ -28,7 +28,7 @@
           {% if proposal.speakers.exists %}
             <ul class="list-group">
               {% for speaker in proposal.speakers.all %}
-                <a href="{% url 'backoffice:speaker_proposal_detail' camp_slug=camp.slug pk=speaker.pk %}" class="list-group-item"><i class="fas fa-user{% if speaker.proposal_status == "approved" %} text-success{% elif speaker.proposal_status == "rejected" %} text-danger{% endif %}" data-bs-toggle="tooltip" data-bs-title="Proposal {{ speaker.proposal_status }}"></i> {{ speaker.name }}</a>
+                <a href="{% url 'backoffice:speaker_proposal_detail' camp_slug=camp.slug pk=speaker.pk %}" class="list-group-item list-group-item-action"><i class="fas fa-user{% if speaker.proposal_status == "approved" %} text-success{% elif speaker.proposal_status == "rejected" %} text-danger{% endif %}" data-bs-toggle="tooltip" data-bs-title="Proposal {{ speaker.proposal_status }}"></i> {{ speaker.name }}</a>
               {% endfor %}
           {% else %}
             N/A
diff --git a/src/backoffice/templates/includes/index_content.html b/src/backoffice/templates/includes/index_content.html
index bdea47339..3738ba61d 100644
--- a/src/backoffice/templates/includes/index_content.html
+++ b/src/backoffice/templates/includes/index_content.html
@@ -1,50 +1,50 @@
 {% if perms.camps.content_team_member %}
   <h3>Content Team</h3>
-  <a href="{% url 'backoffice:approve_event_feedback' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:approve_event_feedback' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Approve Feedback</h4>
     <p class="list-group-item-text">Use these views to approve or reject EventFeedback</p>
   </a>
-  <a href="{% url 'backoffice:pending_proposals' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:pending_proposals' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Approve/Reject Pending Proposals</h4>
     <p class="list-group-item-text">Use these views to approve/reject pending SpeakerProposals and EventProposals</p>
   </a>
-  <a href="{% url 'backoffice:autoschedule_manage' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:autoschedule_manage' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">AutoScheduler</h4>
     <p class="list-group-item-text">Use these views to manage the AutoScheduler</p>
   </a>
-  <a href="{% url 'backoffice:event_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Events</h4>
     <p class="list-group-item-text">Use these views to manage Events</p>
   </a>
-  <a href="{% url 'backoffice:event_location_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_location_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">EventLocations</h4>
     <p class="list-group-item-text">Use these views to manage EventLocations</p>
   </a>
-  <a href="{% url 'backoffice:event_proposal_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_proposal_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">EventProposals</h4>
     <p class="list-group-item-text">Use these views to see all EventProposals</p>
   </a>
-  <a href="{% url 'backoffice:event_session_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_session_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">EventSessions</h4>
     <p class="list-group-item-text">Use these views to manage <i>EventSession</i> objects. Each <i>EventSession</i> is parent to one or more related <i>EventSlot</i> objects, which is what <i>Events</i> are scheduled in.</p>
   </a>
-  <a href="{% url 'backoffice:event_slot_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_slot_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">EventSlots</h4>
     <p class="list-group-item-text">Use these views to see <i>EventSlot</i> objects. <i>Events</i> are scheduled in <i>EventSlots</i>. An <i>EventSlot</i> belong to an <i>EventSession</i>, which is what defines the <i>EventType</i> and <i>EventLocation</i> of the <i>EventSlot</i>.</p>
   </a>
-  <a href="{% url 'backoffice:event_type_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:event_type_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">EventTypes</h4>
     <p class="list-group-item-text">Use these views to manage EventTypes</p>
   </a>
-  <a href="{% url 'backoffice:speaker_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:speaker_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Speakers</h4>
     <p class="list-group-item-text">Use these views to manage Speakers</p>
   </a>
-  <a href="{% url 'backoffice:speaker_proposal_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:speaker_proposal_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">SpeakerProposals</h4>
     <p class="list-group-item-text">Use these views to see all SpeakerProposals</p>
   </a>
-  <a href="{% url 'backoffice:add_eventrecording' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:add_eventrecording' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Add Recordings</h4>
     <p class="list-group-item-text">Use this view to add recordings to events</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_economy.html b/src/backoffice/templates/includes/index_economy.html
index a32b76459..a63aa90bf 100644
--- a/src/backoffice/templates/includes/index_economy.html
+++ b/src/backoffice/templates/includes/index_economy.html
@@ -1,51 +1,51 @@
 {% if perms.camps.economy_team_member %}
   <h3>Economy Team</h3>
-  <a href="{% url 'backoffice:chain_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:chain_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Chains</h4>
     <p class="list-group-item-text">Use this view to see the Chains and Credebtors registered in the system.</p>
   </a>
-  <a href="{% url 'backoffice:expense_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:expense_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Expenses</h4>
     <p class="list-group-item-text">Use this view to see and approve/reject expenses.</p>
   </a>
-  <a href="{% url 'backoffice:reimbursement_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:reimbursement_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Reimbursements</h4>
     <p class="list-group-item-text">Use this view to view and create reimbursements for approved expenses.</p>
   </a>
-  <a href="{% url 'backoffice:revenue_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:revenue_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Revenues</h4>
     <p class="list-group-item-text">Use this view to see and approve/reject revenues.</p>
   </a>
-  <a href="{% url 'backoffice:bank_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:bank_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Banks</h4>
     <p class="list-group-item-text">Use this view to see our banks, bank accounts and bank transactions.</p>
   </a>
-  <a href="{% url 'backoffice:coinify_dashboard' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:coinify_dashboard' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Coinify Dashboard</h4>
     <p class="list-group-item-text">Use this view to see Coinify invoices, payouts and balances imported from CSV (from the Coinify webinterface).</p>
   </a>
-  <a href="{% url 'backoffice:epaytransaction_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:epaytransaction_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">ePay Transactions</h4>
     <p class="list-group-item-text">Use this view to see ePay (Bambora) Transactions imported from CSV (from the ePay webinterface).</p>
   </a>
-  <a href="{% url 'backoffice:clearhaussettlement_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:clearhaussettlement_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Clearhaus Settlements</h4>
     <p class="list-group-item-text">Use this view to see all Clearhaus Settlements. Clearhaus creates a settlement (bank payout) weekly (if needed). The data is imported from CSV (from the Clearhaus webinterface).</p>
   </a>
-  <a href="{% url 'backoffice:zettle_dashboard' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:zettle_dashboard' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Zettle Dashboard</h4>
     <p class="list-group-item-text">Use this view to see Zettle (iZettle) receipts and balances (account movements). All data is imported from Excel files from the Zettle webinterface.</p>
   </a>
-  <a href="{% url 'backoffice:mobilepaytransaction_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:mobilepaytransaction_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">MobilePay Transactions</h4>
     <p class="list-group-item-text">Use this view to see all MobilePay sales, refunds, payouts and other transactions. The data is imported via CSV from the MobilePay webinterface.</p>
   </a>
-  <a href="{% url 'backoffice:accountingexport_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:accountingexport_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Accounting Exports</h4>
     <p class="list-group-item-text">Use this view to see and generate Accounting Exports for bookkeeping purposes. The exports include bank accounts, PSP data, expenses, revenues, and reimbursements, invoices and creditnotes.</p>
   </a>
   <a href="{% url 'backoffice:invoice_download_multiple' camp_slug=camp.slug %}"
-     class="list-group-item">
+     class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">
       Download Multiple invoices or orders
     </h4>
diff --git a/src/backoffice/templates/includes/index_facilities.html b/src/backoffice/templates/includes/index_facilities.html
index ed55cf514..7bf24a685 100644
--- a/src/backoffice/templates/includes/index_facilities.html
+++ b/src/backoffice/templates/includes/index_facilities.html
@@ -2,7 +2,7 @@
   <h3>Facilities</h3>
   <div class="list-group list-group-flush">
     {% if perms.camps.orga_team_member %}
-      <a href="{% url 'backoffice:facility_type_list' camp_slug=camp.slug %}" class="list-group-item">
+      <a href="{% url 'backoffice:facility_type_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
         <h4 class="list-group-item-heading">
           Facility Types
         </h4>
@@ -13,7 +13,7 @@ <h4 class="list-group-item-heading">
     {% endif %}
 
     {% if is_team_facilitator %}
-      <a href="{% url 'backoffice:facility_list' camp_slug=camp.slug %}" class="list-group-item">
+      <a href="{% url 'backoffice:facility_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
         <h4 class="list-group-item-heading">
           Facilities
         </h4>
@@ -25,7 +25,7 @@ <h4 class="list-group-item-heading">
 
     {% for team in facilityfeedback_teams %}
       {% if team.member_permission_set in perms %}
-        <a href="{% url 'backoffice:facilityfeedback' camp_slug=camp.slug team_slug=team.slug %}" class="list-group-item">
+        <a href="{% url 'backoffice:facilityfeedback' camp_slug=camp.slug team_slug=team.slug %}" class="list-group-item list-group-item-action">
           <h4 class="list-group-item-heading">
             Feedback for {{ team.name }} Team
           </h4>
diff --git a/src/backoffice/templates/includes/index_game.html b/src/backoffice/templates/includes/index_game.html
index e87f5fe48..889b48a17 100644
--- a/src/backoffice/templates/includes/index_game.html
+++ b/src/backoffice/templates/includes/index_game.html
@@ -1,10 +1,10 @@
 {% if perms.camps.game_team_member %}
   <h3>Secret Tokens</h3>
-  <a href="{% url 'backoffice:token_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:token_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Tokens</h4>
     <p class="list-group-item-text">Use this view to see a list of Tokens, and to create, update and delete them</p>
   </a>
-  <a href="{% url 'backoffice:token_stats' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:token_stats' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Token Stats</h4>
     <p class="list-group-item-text">Use this view to see token find stats</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_info.html b/src/backoffice/templates/includes/index_info.html
index 58483cafd..304a2eea6 100644
--- a/src/backoffice/templates/includes/index_info.html
+++ b/src/backoffice/templates/includes/index_info.html
@@ -1,7 +1,7 @@
 {% if perms.camps.info_team_member %}
   <h3>Info Team</h3>
   <a href="{% url 'backoffice:order_list' camp_slug=camp.slug %}"
-     class="list-group-item">
+     class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">
       Orders
     </h4>
@@ -10,7 +10,7 @@ <h4 class="list-group-item-heading">
     </p>
   </a>
   <a href="{% url 'backoffice:invoice_list' camp_slug=camp.slug %}"
-     class="list-group-item">
+     class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">
       Invoices
     </h4>
@@ -19,7 +19,7 @@ <h4 class="list-group-item-heading">
     </p>
   </a>
   <a href="{% url 'backoffice:refund_list' camp_slug=camp.slug %}"
-     class="list-group-item">
+     class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">
       Refunds
     </h4>
@@ -28,7 +28,7 @@ <h4 class="list-group-item-heading">
     </p>
   </a>
   <a href="{% url 'backoffice:credit_note_list' camp_slug=camp.slug %}"
-     class="list-group-item">
+     class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">
       Credit Notes
     </h4>
@@ -38,7 +38,7 @@ <h4 class="list-group-item-heading">
   </a>
   {% if not camp.read_only %}
     <a href="{% url 'backoffice:scan_tickets_pos_select' camp_slug=camp.slug %}"
-       class="list-group-item">
+       class="list-group-item list-group-item-action">
       <h4 class="list-group-item-heading">
         Scan tickets
       </h4>
@@ -47,7 +47,7 @@ <h4 class="list-group-item-heading">
       </p>
     </a>
   {% endif %}
-  <a href="{% url 'backoffice:shop_ticket_overview' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:shop_ticket_overview' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Shop Ticket Overview</h4>
     <p class="list-group-item-text">Use this to list shop tickets</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_map.html b/src/backoffice/templates/includes/index_map.html
index 36d4d82a0..db8f3d98d 100644
--- a/src/backoffice/templates/includes/index_map.html
+++ b/src/backoffice/templates/includes/index_map.html
@@ -1,6 +1,6 @@
 {% if perms.camps.gis_team_member or is_team_mapper %}
   <h3>Maps</h3>
-  <a href="{% url 'backoffice:map_layer_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:map_layer_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Layers</h4>
     <p class="list-group-item-text">Use this view to manage map layers.</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_orga.html b/src/backoffice/templates/includes/index_orga.html
index 3171e233f..d75f699ed 100644
--- a/src/backoffice/templates/includes/index_orga.html
+++ b/src/backoffice/templates/includes/index_orga.html
@@ -1,26 +1,26 @@
 {% if perms.camps.orga_team_member %}
   <h3>Orga Team</h3>
-  <a href="{% url 'backoffice:public_credit_names' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:public_credit_names' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Approve Public Credit Names</h4>
     <p class="list-group-item-text">Use this view to check and approve users Public Credit Names</p>
   </a>
-  <a href="{% url 'backoffice:merchandise_orders' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:merchandise_orders' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Merchandise Orders</h4>
     <p class="list-group-item-text">Use this view to look at Merchandise Orders</p>
   </a>
-  <a href="{% url 'backoffice:merchandise_to_order' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:merchandise_to_order' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Merchandise To Order</h4>
     <p class="list-group-item-text">Use this view to generate a list of merchandise that needs to be ordered</p>
   </a>
-  <a href="{% url 'backoffice:village_orders' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:village_orders' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Village Orders</h4>
     <p class="list-group-item-text">Use this view to look at Village category OrderProductRelations</p>
   </a>
-  <a href="{% url 'backoffice:village_to_order' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:village_to_order' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Village Gear To Order</h4>
     <p class="list-group-item-text">Use this view to generate a list of village gear that needs to be ordered</p>
   </a>
-  <a href="{% url 'backoffice:outgoing_email_release' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:outgoing_email_release' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Edit and Release Held Emails</h4>
     {% if held_email_count %}
       <p class="list-group-item-text">Use this view to edit and release <span class="badge rounded-pill bg-danger">{{ held_email_count }}</span> OutgoingEmailQueue objects on hold.</p>
@@ -28,15 +28,15 @@ <h4 class="list-group-item-heading">Edit and Release Held Emails</h4>
       <p class="list-group-item-text">No emails are currently held for release. Check back later!</p>
     {% endif %}
   </a>
-  <a href="{% url 'backoffice:irc_overview' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:irc_overview' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">IRC Overview</h4>
     <p class="list-group-item-text">Use this view to see IRC channels for this years teams</p>
   </a>
-  <a href="{% url 'backoffice:shop_ticket_stats' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:shop_ticket_stats' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Webshop Ticket Stats</h4>
     <p class="list-group-item-text">Use this view to see stats for tickets created from webshop sales. This includes tickets for people (adults and children, full week and oneday tickets), merchandise, village gear, parking and so on. This view does not include sponsor tickets.</p>
   </a>
-  <a href="{% url 'backoffice:proxy' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:proxy' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Proxied Content</h4>
     <p class="list-group-item-text">Use this view to see proxied content</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_permissions.html b/src/backoffice/templates/includes/index_permissions.html
index 3362c8780..98581835d 100644
--- a/src/backoffice/templates/includes/index_permissions.html
+++ b/src/backoffice/templates/includes/index_permissions.html
@@ -1,14 +1,14 @@
 {% if perms.camps.orga_team_member or is_team_lead %}
   <h3>Permissions</h3>
-  <a href="{% url 'backoffice:permission_list_by_user' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:permission_list_by_user' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Show Permissions (by User)</h4>
     <p class="list-group-item-text">Use this view to see permissions in a table with a row per user.</p>
   </a>
-  <a href="{% url 'backoffice:permission_list_by_permission' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:permission_list_by_permission' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Show Permissions (by Permission)</h4>
     <p class="list-group-item-text">Use this view to see permissions in a table with a row per permission.</p>
   </a>
-  <a href="{% url 'backoffice:team_permission_index' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:team_permission_index' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Manage Team Permissions</h4>
     <p class="list-group-item-text">Use this view to manage team permissions.</p>
   </a>
diff --git a/src/backoffice/templates/includes/index_pos.html b/src/backoffice/templates/includes/index_pos.html
index f99ee4620..9c2459dab 100644
--- a/src/backoffice/templates/includes/index_pos.html
+++ b/src/backoffice/templates/includes/index_pos.html
@@ -1,22 +1,22 @@
 {% if perms.camps.orga_team_member or is_team_pos %}
   <h3>Point of Sale</h3>
-  <a href="{% url 'backoffice:pos_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:pos_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Point of Sale Locations</h4>
     <p class="list-group-item-text">Use this view to see a list of Pos objects, and to see and submit PosReports</p>
   </a>
-  <a href="{% url 'backoffice:posproduct_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:posproduct_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Point of Sale Products</h4>
     <p class="list-group-item-text">Use this view to see a list of Pos products.</p>
   </a>
-  <a href="{% url 'backoffice:posproductcost_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:posproductcost_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Point of Sale Product Costs</h4>
     <p class="list-group-item-text">Use this view to see and update Pos Product Cost objects. They are used when calculating the profits for Pos sales.</p>
   </a>
-  <a href="{% url 'backoffice:postransaction_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:postransaction_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Point of Sale Transactions</h4>
     <p class="list-group-item-text">Use this view to see a list of Pos transactions.</p>
   </a>
-  <a href="{% url 'backoffice:possale_list' camp_slug=camp.slug %}" class="list-group-item">
+  <a href="{% url 'backoffice:possale_list' camp_slug=camp.slug %}" class="list-group-item list-group-item-action">
     <h4 class="list-group-item-heading">Point of Sale Sales</h4>
     <p class="list-group-item-text">Use this view to see a list of Pos sales.</p>
   </a>
diff --git a/src/backoffice/templates/includes/speaker_list_table_backoffice.html b/src/backoffice/templates/includes/speaker_list_table_backoffice.html
index 0712e053f..ecf2deb36 100644
--- a/src/backoffice/templates/includes/speaker_list_table_backoffice.html
+++ b/src/backoffice/templates/includes/speaker_list_table_backoffice.html
@@ -18,7 +18,7 @@
           {% if speaker.events.all %}
             <ul class="list-group">
               {% for event in speaker.events.all %}
-                <a href="{% url 'backoffice:event_detail' camp_slug=camp.slug slug=event.slug %}" class="list-group-item">
+                <a href="{% url 'backoffice:event_detail' camp_slug=camp.slug slug=event.slug %}" class="list-group-item list-group-item-action">
                   <i class="fas fa-{{ event.event_type.icon }} fa-lg fa-fw" style="color: {{ event.event_type.color }};"></i> {{ event.title }}
                 </a>
               {% endfor %}
diff --git a/src/backoffice/templates/scan_ticket_pos_select.html b/src/backoffice/templates/scan_ticket_pos_select.html
index 87e7829af..eae17df80 100644
--- a/src/backoffice/templates/scan_ticket_pos_select.html
+++ b/src/backoffice/templates/scan_ticket_pos_select.html
@@ -7,7 +7,7 @@
 {% block content %}
   <div class="list-group">
     {% for pos in pos_list %}
-      <a href="{% url 'backoffice:scan_tickets' camp_slug=camp.slug pos_slug=pos.slug %}" class="list-group-item">
+      <a href="{% url 'backoffice:scan_tickets' camp_slug=camp.slug pos_slug=pos.slug %}" class="list-group-item list-group-item-action">
         <h4 class="list-group-item-heading">{{ pos.name }}</h4>
       </a>
     {% endfor %}
diff --git a/src/backoffice/templates/team_permissions_index.html b/src/backoffice/templates/team_permissions_index.html
index 244452e23..ea4b8d179 100644
--- a/src/backoffice/templates/team_permissions_index.html
+++ b/src/backoffice/templates/team_permissions_index.html
@@ -16,7 +16,7 @@ <h3 class="card-title">Team Permissions - {{ camp.title }} Backoffice</h3>
       <p><a href="{% url 'backoffice:index' camp_slug=camp.slug %}" class="btn btn-secondary"><i class="fas fa-undo"></i> Backoffice</a></p>
       <div class="list-group">
         {% for team in teams %}
-          <a href="{% url 'backoffice:team_permission_manage' camp_slug=camp.slug team_slug=team.slug %}" class="list-group-item">
+          <a href="{% url 'backoffice:team_permission_manage' camp_slug=camp.slug team_slug=team.slug %}" class="list-group-item list-group-item-action">
             <h4 class="list-group-item-heading">{{ team.name }} Team</h4>
             <p class="list-group-item-text">Manage permissions for {{ team.approved_members.count }} members of the {{  team.name }} Team.</p>
           </a>
diff --git a/src/backoffice/templates/zettle_dashboard.html b/src/backoffice/templates/zettle_dashboard.html
index c93843e26..ab21798e9 100644
--- a/src/backoffice/templates/zettle_dashboard.html
+++ b/src/backoffice/templates/zettle_dashboard.html
@@ -20,15 +20,15 @@
       {% endif %}
 
       <div class="list-group">
-        <a class="list-group-item" href="{% url 'backoffice:zettlereceipt_list' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:zettlereceipt_list' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading"><i class="fas fa-list"></i> Zettle Receipts</h4>
           <p class="list-group-item-text">Use this view to see {{ receipts }} receipts.</p>
         </a>
-        <a class="list-group-item" href="{% url 'backoffice:zettlebalance_list' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:zettlebalance_list' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading"><i class="fas fa-balance-scale"></i> Zettle Balances</h4>
           <p class="list-group-item-text">Use this view to see {{ balances }} account movements for our Zettle account. Each entry in the table represents money going into or out of our Zettle account.</p>
         </a>
-        <a class="list-group-item" href="{% url 'backoffice:zettle_import' camp_slug=camp.slug %}">
+        <a class="list-group-item list-group-item-action" href="{% url 'backoffice:zettle_import' camp_slug=camp.slug %}">
           <h4 class="list-group-item-heading"><i class="fas fa-file-excel"></i> Import Zettle Data</h4>
           <p class="list-group-item-text">Use this view to import Excel files with new receipts and balances.</p>
         </a>
diff --git a/src/economy/templates/chain_list.html b/src/economy/templates/chain_list.html
index 0610b2750..f89fa9de5 100644
--- a/src/economy/templates/chain_list.html
+++ b/src/economy/templates/chain_list.html
@@ -16,7 +16,7 @@ <h3 class="card-header">Existing Chains</h3>
       <div class="card-body">
         <div class="list-group">
           {% for chain in chain_list %}
-            <a href="{% url 'economy:credebtor_list' camp_slug=camp.slug chain_slug=chain.slug %}" class="list-group-item">
+            <a href="{% url 'economy:credebtor_list' camp_slug=camp.slug chain_slug=chain.slug %}" class="list-group-item list-group-item-action">
               <h4 class="list-group-item-heading">
                 <b>{{ chain.name }}</b> ({{ chain.credebtors.count }} credebtors)
               </h4>
diff --git a/src/static_src/css/bootstrap-slate.css b/src/static_src/css/bootstrap-slate.css
index 69630b8f8..ad97d458f 100644
--- a/src/static_src/css/bootstrap-slate.css
+++ b/src/static_src/css/bootstrap-slate.css
@@ -4962,7 +4962,7 @@ textarea.form-control-lg {
 }
 .list-group-item-action:hover, .list-group-item-action:focus {
   z-index: 1;
-  color: var(--bs-list-group-action-hover-color);
+  color: initial;
   text-decoration: none;
   background-color: var(--bs-list-group-action-hover-bg);
 }