fix colored table for user merge

evap/staff/templates/staff_user_merge.html

@@ -13,7 +13,7 @@
     <h3>{% trans 'Merge users' %}</h3>
     <div class="card mb-3">
         <div class="card-body">
-            <table class="table table-striped mb-3">
+            <table class="table mb-3">
                 <thead>
                     <tr>
                         <th style="width: 25%"></th>

evap/static/scss/components/_tables.scss

@@ -2,53 +2,23 @@
     margin-bottom: 0;
 }
 
-.table-primary,
-.table-primary > th,
-.table-primary > td {
-    background-color: $evap-dark-blue;
-    color: $white;
-}
-.table-secondary,
-.table-secondary > th,
-.table-secondary > td {
-    background-color: $medium-gray;
-    color: $black;
-}
-.table-success,
-.table-success > th,
-.table-success > td {
-    background-color: $evap-green;
-    color: $black;
-}
-.table-info,
-.table-info > th,
-.table-info > td {
-    background-color: $evap-light-blue;
-    color: $black;
-}
-.table-warning,
-.table-warning > th,
-.table-warning > td {
-    background-color: $evap-yellow;
-    color: $black;
-}
-.table-danger,
-.table-danger > th,
-.table-danger > td {
-    background-color: $evap-red;
-    color: $white;
-}
-.table-light,
-.table-light > th,
-.table-light > td {
-    background-color: $light-gray;
-    color: $black;
+$table-colors: (
+    "primary" $evap-dark-blue $white,
+    "secondary" $medium-gray $black,
+    "success" $evap-green $black,
+    "info" $evap-light-blue $black,
+    "warning" $evap-yellow $black,
+    "danger" $evap-red $white $black,
+    "light" $light-gray $black,
+    "dark" $darker-gray $white
+);
+@each $name, $bg-color, $color in $table-colors {
+    .table-#{$name},
+    .table-#{$name} > th,
+    .table-#{$name} > td {
+        background-color: $bg-color !important;
+        color: $color;
     }
-.table-dark,
-.table-dark > th,
-.table-dark > td {
-    background-color: $darker-gray;
-    color: $white;
 }
 
 .table-total-stats {