🧑‍💼🎛️ Overhaul (#15270)

* Add option to search for users by email or username in admin panel

* Make Admin panel design more consistent

* fix test

* fix width of items

* escape regex for searching users

* load own user when pressing enter on empty field

* add styling for warning buttons

* improve sub styling

* fix checkbox alignment in admin panel

* Unify date preview display

* Fix bottom button display

* admin panel display improvements

* remove autocannon file

* search improvements

* time travel button display fix

* fix loading spinner

* fix sorting

* Split email search into multiple queries

* fix email search

* remove console

* fix line break

website/client/src/components/ui/loadingSpinner.vue

@@ -2,6 +2,7 @@
   <div
     v-once
     class="loading-spinner"
+    :class="{'loading-spinner-purple': darkColor}"
     role="text"
     :aria-label="$t('loading')"
   >
@@ -39,6 +40,10 @@
     border-color: $white transparent transparent transparent;
   }
 
+  .loading-spinner-purple div {
+    border-color: $purple-200 transparent transparent transparent;
+  }
+
   .loading-spinner div:nth-child(1) {
     animation-delay: -0.45s;
   }
@@ -58,3 +63,16 @@
     }
   }
 </style>
+
+<script>
+
+export default {
+  props: {
+    darkColor: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+
+</script>

website/client/src/components/ui/purchaseHistoryTable.vue

@@ -318,13 +318,18 @@
     color: $gray-50;
   }
 
+  td span {
+    line-break: anywhere;
+  }
+
   th, td {
     padding-top: 0.35rem !important;
     padding-bottom: 0.35rem !important;
   }
 
   .timestamp-column, .action-column  {
-    width: 20%;
+    width: 27%;
+
   }
 
   .amount-column {
@@ -332,7 +337,7 @@
   }
 
   .note-column {
-    width: 50%;
+    width: 35%;
   }
 
   .entry-action {