Extract Input component and add some dark color tags

web/src/components/Autocomplete.vue

@@ -2,6 +2,7 @@
 import { ref, watch } from "vue"
 import { GET } from "../api";
 import { useBudgetsStore } from "../stores/budget";
+import Input from "./Input.vue";
 
 export interface Suggestion {
     ID: string
@@ -77,14 +78,15 @@ function clear() {
 
 <template>
     <div>
-        <input
+        <Input
+            type="text"
             class="border-b-2 border-black"
             @keypress="keypress"
             v-if="id == undefined"
             v-model="SearchQuery"
         />
-        <span @click="clear" v-if="id != undefined" class="bg-gray-300">{{ text }}</span>
-        <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 w-64 p-2">
+        <span @click="clear" v-if="id != undefined" class="bg-gray-300 dark:bg-gray-700">{{ text }}</span>
+        <div v-if="Suggestions.length > 0" class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
             <span
                 v-for="suggestion in Suggestions"
                 class="block"