Use Input component for all inputs except file-input

web/src/components/DateInput.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import Input from './Input.vue';
 const props = defineProps(["modelValue"]);
 const emit = defineEmits(['update:modelValue']);
 
@@ -25,8 +26,7 @@ function selectAll(event: FocusEvent) {
 </script>
 
 <template>
-  <input
-    class="dark:bg-slate-900"
+  <Input
     type="date"
     ref="input"
     v-bind:value="dateToYYYYMMDD(modelValue)"

web/src/components/TransactionRow.vue

@@ -6,6 +6,7 @@ import Currency from "./Currency.vue";
 import TransactionEditRow from "./TransactionEditRow.vue";
 import { formatDate } from "../date";
 import { useAccountStore } from "../stores/budget-account";
+import Input from "./Input.vue";
 
 const props = defineProps<{
     transactionid: string,
@@ -69,7 +70,7 @@ function getStatusSymbol() {
             {{ TX.GroupID ? "☀" : "" }}
             {{ getStatusSymbol() }}
             <a @click="edit = true;">✎</a>
-            <input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
+            <Input v-if="Reconciling && TX.Status != 'Reconciled'" type="checkbox" v-model="TX.Reconciled" />
         </td>
     </tr>
     <TransactionEditRow v-if="edit" :transactionid="TX.ID" @save="edit = false" />