Add custom checkbox component

web/src/components/Checkbox.vue

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

web/src/components/TransactionRow.vue

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