refactor to UI components

src/components/ViewModes/ListView.vue

@@ -53,12 +53,12 @@ const deleteSelectedNotes = (closeModal: () => void) => {
           <UIButton size="sm" @click="close">Close</UIButton>
         </template>
       </UIModal>
-      <UITextInput
+      <UIInputText
         size="sm"
         v-model="filter"
         placeholder="Start typing to filter"
         class="my-1 ml-auto mr-1 max-w-xs flex-grow"
-      ></UITextInput>
+      ></UIInputText>
     </div>
     <UITable density="compact" class="w-full">
       <thead>
@@ -74,17 +74,16 @@ const deleteSelectedNotes = (closeModal: () => void) => {
         <tr
           v-for="note in notesWithReferences"
           :key="note.id"
-          class="hover hover:cursor-pointer"
+          class="dui-hover hover:cursor-pointer"
           @click="setActiveNote(note.id)"
         >
           <th @click.stop="toggleRow(note)" class="text-center">
             <label>
-              <input
-                type="checkbox"
-                class="checkbox-primary checkbox checkbox-sm border-secondary"
+              <UIInputCheckbox
+                color="primary"
                 :checked="Boolean(selectedNotes[note.id])"
                 :disabled="note.isRoot"
-              />
+              ></UIInputCheckbox>
             </label>
           </th>
           <td>