From: Adam Dullage <redacted>
Date: Wed, 8 May 2024 19:26:49 +0000 (+0100)
Subject: Improve search modal styling
X-Git-Url: http://git.99rst.org/?a=commitdiff_plain;h=e99680fb66fad6c73df817e2b2840f38d6774d59;p=flatnotes.git

Improve search modal styling
---

diff --git a/client/components/TextInput.vue b/client/components/TextInput.vue
index fb143b7..04f41a3 100644
--- 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 af7947b..e6e2910 100644
--- 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 e8a2b55..c754a55 100644
--- 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";