Improve search modal styling

diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
index fb143b70ea39f4e0ed88173c4779e4e9a9a22f89..04f41a3698c717c8109919c0c85ffe87e0502050 100644 (file)
--- a/client/components/TextInput.vue
+++ b/client/components/TextInput.vue
@@ -1,8 +1,7 @@
 <template>
   <input
     type="text"
-    class="w-full rounded border border-theme-border px-3 py-2 focus:outline-none focus:ring-1 dark:bg-theme-background-elevated"
-    placeholder="Search"
+    class="w-full rounded-md border border-theme-border px-3 py-2 focus:outline-none dark:bg-theme-background-elevated"
     v-model="model"
     ref="input"
   />
@@ -13,10 +12,4 @@ import { ref } from "vue";
 
 const model = defineModel();
 const input = ref();
-
-function focus() {
-  input.value.focus();
-}
-
-defineExpose({ focus });
 </script>

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index af7947bee366cfe3edc2893ae2826352e9c56ea5..e6e2910c3a7ff5e5422827d4ac11c9785bffc535 100644 (file)
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -1,15 +1,15 @@
 <template>
-  <form class="flex w-full" @submit.prevent="search">
-    <TextInput
+  <form
+    class="flex w-full rounded-md border border-theme-border bg-theme-background px-3 py-2 dark:bg-theme-background-elevated"
+    @submit.prevent="search"
+  >
+    <IconLabel :iconPath="mdilMagnify" class="mr-2" />
+    <input
+      type="text"
       v-model="searchTerm"
       v-focus
-      :placeholder="props.hidePlaceholder ? '' : 'Search'"
-      class="rounded-r-none"
-    />
-    <CustomButton
-      :iconPath="mdilMagnify"
-      iconSize="1.75em"
-      class="rounded-l-none border border-l-0 border-theme-border focus:outline-none focus:ring-1"
+      class="w-full focus:outline-none"
+      placeholder="Search"
     />
   </form>
 </template>
@@ -21,13 +21,11 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 import * as constants from "../constants";
 
-import CustomButton from "../components/CustomButton.vue";
-import TextInput from "../components/TextInput.vue";
+import IconLabel from "../components/IconLabel.vue";
 import { getToastOptions } from "../helpers.js";
 
 const props = defineProps({
   initialSearchTerm: String,
-  hidePlaceholder: Boolean,
 });
 const emit = defineEmits(["search"]);
 

diff --git a/client/partials/SearchModal.vue b/client/partials/SearchModal.vue
index e8a2b55a5a6a3ade116e4f3b306b25c5dee87971..c754a55bd824715ea28227dda2d1c9038da3ed5d 100644 (file)
--- a/client/partials/SearchModal.vue
+++ b/client/partials/SearchModal.vue
@@ -1,19 +1,14 @@
 <template>
-  <Modal v-model="isVisible" title="Search">
+  <Modal v-model="isVisible" class="px-0 py-0 border-none">
     <SearchInput
+      class="px-5 py-4"
       @search="toggleHandler"
       @keyup.esc="toggleHandler"
-      class="mb-4"
-      hidePlaceholder
     />
-    <div class="flex justify-end">
-      <CustomButton label="Close" @click="toggleHandler" />
-    </div>
   </Modal>
 </template>
 
 <script setup>
-import CustomButton from "../components/CustomButton.vue";
 import Modal from "../components/Modal.vue";
 import SearchInput from "./SearchInput.vue";