fix(front): various UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

src/assets/oruga-tailwindcss.css

@@ -149,6 +149,9 @@ body {
 .taginput-autocomplete {
   @apply flex-1 !drop-shadow-none;
 }
+.taginput-container {
+  @apply border-none;
+}
 
 .taginput-item:first-child {
   @apply ml-2;
@@ -162,12 +165,12 @@ body {
   @apply max-h-[200px] drop-shadow-md text-black z-10;
 }
 
-.autocomplete-item {
-  @apply py-1.5 px-4 text-start;
+.autocomplete .autocomplete-item {
+  @apply text-start p-0;
 }
 
-.autocomplete-item-group-title {
-  @apply opacity-50 py-0 px-2;
+.autocomplete .autocomplete-item-group-title {
+  @apply opacity-50 py-1.5 px-2 dark:text-white dark:opacity-75;
 }
 
 /* Dropdown */

src/components/Event/EventMetadataList.vue

@@ -30,7 +30,9 @@
         class="flex-1 min-w-[200px]"
       >
         <template v-slot="props">
-          <div class="dark:bg-violet-3 p-1 flex items-center gap-1">
+          <div
+            class="dark:bg-violet-3 p-1 flex items-center gap-1 flex-1 dark:text-white"
+          >
             <div class="">
               <img
                 v-if="
@@ -41,6 +43,7 @@
                 width="24"
                 height="24"
                 alt=""
+                class="dark:fill-white"
               />
               <o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
               <o-icon v-else icon="help-circle" />

src/components/Report/ReportModal.vue

@@ -6,7 +6,7 @@
 
     <section>
       <div
-        class="flex gap-1 flex-row mb-3 bg-mbz-yellow p-3 rounded items-center"
+        class="flex gap-1 flex-row mb-3 bg-mbz-yellow dark:text-black p-3 rounded items-center"
       >
         <o-icon
           icon="alert"

src/components/TagElement.vue

@@ -1,6 +1,6 @@
 <template>
   <span
-    class="rounded-md truncate text-sm text-violet-title px-2 py-1"
+    class="rounded-md truncate text-sm text-black px-2 py-1"
     :class="[
       typeClasses,
       capitalize,

src/oruga-config.ts

@@ -27,6 +27,7 @@ export const orugaConfig = {
   taginput: {
     itemClass: "taginput-item",
     rootClass: "taginput",
+    containerClass: "taginput-container",
     autocompleteClasses: {
       rootClass: "taginput-autocomplete",
       inputClasses: {