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>
+        <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 w-64 p-2">
+        <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"

web/src/components/DateInput.vue

@@ -26,6 +26,7 @@ function selectAll(event: FocusEvent) {
 
 <template>
   <input
+    class="dark:bg-slate-900"
     type="date"
     ref="input"
     v-bind:value="dateToYYYYMMDD(modelValue)"

web/src/components/Input.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+const props = defineProps(["modelValue"]);
+</script>
+
+<template>
+    <input 
+        v-model="modelValue"
+        @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
+        class="dark:bg-slate-900">
+</template>

web/src/components/TransactionEditRow.vue

@@ -4,6 +4,8 @@ import Autocomplete from './Autocomplete.vue'
 import { useAccountStore } from '../stores/budget-account'
 import DateInput from "./DateInput.vue";
 import { useTransactionsStore } from "../stores/transactions";
+import Input from "./Input.vue";
+import Button from "./Button.vue";
 
 const props = defineProps<{
     transactionid: string
@@ -37,28 +39,28 @@ function saveTransaction(e: MouseEvent) {
 
 <template>
     <tr>
-        <td style="width: 90px;" class="text-sm">
+        <td class="text-sm">
             <DateInput class="border-b-2 border-black" v-model="TX.Date" />
         </td>
-        <td style="max-width: 150px;">
+        <td>
             <Autocomplete v-model:text="TX.Payee" v-model:id="TX.PayeeID" v-model:type="payeeType" model="payees" />
         </td>
-        <td style="max-width: 200px;">
+        <td>
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
         <td>
-            <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
+            <Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
-        <td style="width: 80px;" class="text-right">
+        <td class="text-right">
-            <input
+            <Input
                 class="text-right block w-full border-b-2 border-black"
                 type="currency"
                 v-model="TX.Amount"
             />
         </td>
-        <td style="width: 20px;">
+        <td>
-            <input type="submit" @click="saveTransaction" value="Save" />
+            <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
         </td>
-        <td style="width: 20px;"></td>
+        <td></td>
     </tr>
 </template>

web/src/components/TransactionInputRow.vue

@@ -4,6 +4,7 @@ import Autocomplete from '../components/Autocomplete.vue'
 import { Transaction, useTransactionsStore } from "../stores/transactions";
 import DateInput from "./DateInput.vue";
 import Button from "./Button.vue";
+import Input from "./Input.vue";
 
 const props = defineProps<{
     budgetid: string
@@ -65,11 +66,11 @@ function saveTransaction(e: MouseEvent) {
             <Autocomplete v-model:text="TX.Category" v-model:id="TX.CategoryID" model="categories" />
         </td>
         <td class="col-span-2">
-            <input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
+            <Input class="block w-full border-b-2 border-black" type="text" v-model="TX.Memo" />
         </td>
         <label class="md:hidden">Amount</label>
         <td class="text-right">
-            <input
+            <Input
                 class="text-right block w-full border-b-2 border-black"
                 type="currency"
                 v-model="TX.Amount"