Add title and close button to search modal

diff --git a/client/components/ConfirmModal.vue b/client/components/ConfirmModal.vue
index 502213ada768265f46a5354f962a9229211091b7..4036bcdf7f229589c6bc118b47330e6336ea057f 100644 (file)
--- a/client/components/ConfirmModal.vue
+++ b/client/components/ConfirmModal.vue
@@ -1,11 +1,10 @@
 <template>
   <Modal
     ref="modal"
-    :class="{ 'border-l-theme-danger border border-l-4': isDanger }"
+    :title="title"
+    :class="{ 'border border-l-4 border-l-theme-danger': isDanger }"
     :closeHandler="cancelHandler"
   >
-    <!-- Title -->
-    <div class="mb-6 text-xl">{{ title }}</div>
     <!-- Message -->
     <div class="mb-6">{{ message }}</div>
     <!-- Buttons -->

diff --git a/client/components/Modal.vue b/client/components/Modal.vue
index e1f8ec1ea48b652f499be2044998bd536241a7f1..0db3ed70c5ba6787e69dfbcd51208e3b50d2b0bc 100644 (file)
--- a/client/components/Modal.vue
+++ b/client/components/Modal.vue
@@ -2,7 +2,7 @@
   <!-- Mask -->
   <div
     v-if="isVisible"
-    class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center backdrop-blur-sm"
+    class="fixed left-0 top-0 z-50 flex h-dvh w-dvw items-center justify-center bg-slate-950/40 backdrop-blur-sm"
   >
     <!-- Modal -->
     <div
@@ -10,24 +10,29 @@
       :class="$attrs.class"
     >
       <CustomButton
+        v-if="props.showClose"
         :iconPath="mdiWindowClose"
         @click="close"
         class="absolute right-1 top-1"
       />
+      <!-- Title -->
+      <div class="mb-6 text-xl">{{ title }}</div>
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
 import { mdiWindowClose } from "@mdi/js";
+import { ref } from "vue";
 
 defineOptions({
   inheritAttrs: false,
 });
 
 const props = defineProps({
+  title: { type: String, default: "Confirm" },
+  showClose: { type: Boolean },
   closeHandler: Function,
   modalClasses: String,
 });

diff --git a/client/partials/SearchInput.vue b/client/partials/SearchInput.vue
index 7b9d34895eeb9728958029e6102b87baae935a68..c374c10d63d76f3cf36cea156571540e9ffa868d 100644 (file)
--- a/client/partials/SearchInput.vue
+++ b/client/partials/SearchInput.vue
@@ -2,7 +2,7 @@
   <form class="flex w-full" @submit.prevent="search">
     <TextInput
       v-model="searchTerm"
-      placeholder="Search"
+      :placeholder="props.hidePlaceholder ? '' : 'Search'"
       class="rounded-r-none"
       ref="textInput"
     />
@@ -17,7 +17,7 @@
 <script setup>
 import { mdilMagnify } from "@mdi/light-js";
 import { useToast } from "primevue/usetoast";
-import { ref, onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { useRouter } from "vue-router";
 import * as constants from "../constants";
 
@@ -25,7 +25,10 @@ import CustomButton from "../components/CustomButton.vue";
 import TextInput from "../components/TextInput.vue";
 import { getToastOptions } from "../helpers.js";
 
-const props = defineProps({ initialSearchTerm: String });
+const props = defineProps({
+  initialSearchTerm: String,
+  hidePlaceholder: Boolean,
+});
 const emit = defineEmits(["search"]);
 
 const router = useRouter();

diff --git a/client/partials/SearchModal.vue b/client/partials/SearchModal.vue
index 2d7ea635cae322d5977119b20e70acf61c16d876..353cf904d856585e72bb28f94ede0222c1dee486 100644 (file)
--- a/client/partials/SearchModal.vue
+++ b/client/partials/SearchModal.vue
@@ -1,16 +1,18 @@
 <template>
-  <Modal ref="modal" class="flex flex-col items-center">
-    <Logo class="mb-4" />
-    <SearchInput @search="toggle" />
+  <Modal ref="modal" title="Search">
+    <SearchInput @search="toggle" class="mb-4" hidePlaceholder />
+    <div class="flex justify-end">
+      <CustomButton label="Close" @click="toggle" />
+    </div>
   </Modal>
 </template>
 
 <script setup>
 import { ref } from "vue";
 
+import CustomButton from "../components/CustomButton.vue";
 import Modal from "../components/Modal.vue";
 import SearchInput from "./SearchInput.vue";
-import Logo from "../components/Logo.vue";
 
 const modal = ref();