From a6a1ab71c23264805d61b5312982e6d345454027 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Tue, 9 Jan 2024 17:20:53 +0100
Subject: [PATCH] fix(front): various UI improvements

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
 src/assets/oruga-tailwindcss.css           | 11 +++++++----
 src/components/Event/EventMetadataList.vue |  5 ++++-
 src/components/Report/ReportModal.vue      |  2 +-
 src/components/TagElement.vue              |  2 +-
 src/oruga-config.ts                        |  1 +
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css
index e23492cdd..8f25dd8f6 100644
--- a/src/assets/oruga-tailwindcss.css
+++ b/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 */
diff --git a/src/components/Event/EventMetadataList.vue b/src/components/Event/EventMetadataList.vue
index cf4180e5f..c76805bb8 100644
--- a/src/components/Event/EventMetadataList.vue
+++ b/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" />
diff --git a/src/components/Report/ReportModal.vue b/src/components/Report/ReportModal.vue
index f06a5f771..00561925a 100644
--- a/src/components/Report/ReportModal.vue
+++ b/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"
diff --git a/src/components/TagElement.vue b/src/components/TagElement.vue
index 128751d82..25448d0fa 100644
--- a/src/components/TagElement.vue
+++ b/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,
diff --git a/src/oruga-config.ts b/src/oruga-config.ts
index fe26be357..af0a27dc8 100644
--- a/src/oruga-config.ts
+++ b/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: {