From 0a7130c7a3bad3e7ecbdc22fa2414e36b999579f Mon Sep 17 00:00:00 2001
From: Jeannie McGill <jeanniecaitlyn@gmail.com>
Date: Sun, 27 Aug 2023 09:57:13 -0400
Subject: [PATCH 1/3] Add icon for search and clear search

---
 src/lib/components/TextInput.svelte |  2 +-
 src/routes/+page.svelte             | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/TextInput.svelte b/src/lib/components/TextInput.svelte
index a89b626..5f780f9 100644
--- a/src/lib/components/TextInput.svelte
+++ b/src/lib/components/TextInput.svelte
@@ -20,7 +20,7 @@
     on:change
     on:keyup={keyReleased}
     class:invalid
-    class="px-4 py-2 brutal hovers outline-none {customClass}"
+    class="w-full px-4 py-2 pl-10 brutal hovers outline-none {customClass}"
 />
 
 <style lang="postcss">
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 5b357a0..94a9dbb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -17,6 +17,10 @@
 		const urlParams = new URLSearchParams(window.location.search);
     $wishListFilter = urlParams.get('showWishList') === 'true';
 	});
+
+	const clearSearch = () => {
+		$searchFilter = '';
+	}
 </script>
 
 <div class="mx-3 lg:mx-auto lg:w-3/4">
@@ -29,7 +33,17 @@
 				<CategoryChooserView />
 				<WishListButtonView />
 			</div>
-			<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+			<div class='relative'>
+				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 absolute top-2.5 left-2 transform">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+				</svg>
+				<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+				{#if $searchFilter.length > 0}
+				<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+				  </button>
+				{/if}
+			</div>
 		</div>
 		<div class="mb-8">
 			{#if $filteredThings.length > 0}

From d6504b2000de2f9dca75f5798a34e0d3b24924aa Mon Sep 17 00:00:00 2001
From: Jeannie McGill <jeanniecaitlyn@gmail.com>
Date: Mon, 28 Aug 2023 19:29:08 -0400
Subject: [PATCH 2/3] Move to view and add magnifying glass svg

---
 src/lib/icons/magnifying-glass.svg   |  3 +++
 src/lib/views/SearchInputView.svelte | 21 +++++++++++++++++++++
 src/routes/+page.svelte              | 21 ++++-----------------
 3 files changed, 28 insertions(+), 17 deletions(-)
 create mode 100644 src/lib/icons/magnifying-glass.svg
 create mode 100644 src/lib/views/SearchInputView.svelte

diff --git a/src/lib/icons/magnifying-glass.svg b/src/lib/icons/magnifying-glass.svg
new file mode 100644
index 0000000..19b91c5
--- /dev/null
+++ b/src/lib/icons/magnifying-glass.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
+</svg>
\ No newline at end of file
diff --git a/src/lib/views/SearchInputView.svelte b/src/lib/views/SearchInputView.svelte
new file mode 100644
index 0000000..a7b49e1
--- /dev/null
+++ b/src/lib/views/SearchInputView.svelte
@@ -0,0 +1,21 @@
+<script>
+	import { TextInput } from '$lib/components';
+	import { t } from '$lib/language/translate';
+	import { searchFilter } from '$lib/stores/catalog';
+	import XMarkIcon from '$lib/icons/x-mark.svg';
+    import SearchIcon from '$lib/icons/magnifying-glass.svg';
+
+	const clearSearch = () => {
+		$searchFilter = '';
+	};
+</script>
+
+<div class="relative">
+    <img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform">
+    <TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+    {#if $searchFilter.length > 0}
+	    <button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+		    <img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform">
+	    </button>
+    {/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94a9dbb..b85b09e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -7,20 +7,17 @@
 	import ThingsView from '$lib/views/ThingsView.svelte';
 	import WishListButtonView from '$lib/views/WishListButtonView.svelte';
 	import CategoryChooserView from '$lib/views/CategoryChooserView.svelte';
+	import SearchInputView from '$lib/views/SearchInputView.svelte';
 
 	export let data;
 
 	$things = data.things;
-  $categories = data.categories;
+	$categories = data.categories;
 
 	onMount(() => {
 		const urlParams = new URLSearchParams(window.location.search);
-    $wishListFilter = urlParams.get('showWishList') === 'true';
+		$wishListFilter = urlParams.get('showWishList') === 'true';
 	});
-
-	const clearSearch = () => {
-		$searchFilter = '';
-	}
 </script>
 
 <div class="mx-3 lg:mx-auto lg:w-3/4">
@@ -33,17 +30,7 @@
 				<CategoryChooserView />
 				<WishListButtonView />
 			</div>
-			<div class='relative'>
-				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 absolute top-2.5 left-2 transform">
-					<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
-				</svg>
-				<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
-				{#if $searchFilter.length > 0}
-				<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
-					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
-				  </button>
-				{/if}
-			</div>
+				<SearchInputView />
 		</div>
 		<div class="mb-8">
 			{#if $filteredThings.length > 0}

From b13f0bfa2a3da2b4e3e98806a7e5a89b153eebe5 Mon Sep 17 00:00:00 2001
From: Jeannie McGill <jeanniecaitlyn@gmail.com>
Date: Mon, 28 Aug 2023 19:30:52 -0400
Subject: [PATCH 3/3] Update spacing

---
 src/lib/views/SearchInputView.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/views/SearchInputView.svelte b/src/lib/views/SearchInputView.svelte
index a7b49e1..ec599d5 100644
--- a/src/lib/views/SearchInputView.svelte
+++ b/src/lib/views/SearchInputView.svelte
@@ -3,7 +3,7 @@
 	import { t } from '$lib/language/translate';
 	import { searchFilter } from '$lib/stores/catalog';
 	import XMarkIcon from '$lib/icons/x-mark.svg';
-    import SearchIcon from '$lib/icons/magnifying-glass.svg';
+	import SearchIcon from '$lib/icons/magnifying-glass.svg';
 
 	const clearSearch = () => {
 		$searchFilter = '';
@@ -11,11 +11,11 @@
 </script>
 
 <div class="relative">
-    <img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform">
-    <TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
-    {#if $searchFilter.length > 0}
-	    <button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
-		    <img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform">
-	    </button>
-    {/if}
-</div>
\ No newline at end of file
+	<img src={SearchIcon} alt="searchIcon" class="w-6 h-6 absolute top-2.5 left-2 transform" />
+	<TextInput bind:value={$searchFilter} placeholder={$t('Input.Search')} />
+	{#if $searchFilter.length > 0}
+		<button class="btn btn-circle btn-sm btn-ghost absolute right-2 top-1.5" on:click={clearSearch}>
+			<img src={XMarkIcon} alt="searchIcon" class="w-5 h-5 absolute top-1.75 left-2.25 transform" />
+		</button>
+	{/if}
+</div>