From f164e3966c898f9a9d48b14dd267c28ee6d8791a Mon Sep 17 00:00:00 2001
From: Ian Donahue <idonahue@users.noreply.github.com>
Date: Fri, 10 Mar 2023 22:21:47 +0100
Subject: [PATCH] Fixing search in nav bar.

---
 src/routes/+page.svelte                        |  4 +---
 src/routes/projects/[projectId]/+layout.svelte | 17 +++++++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fe3e3a38b..bb4ba4e72 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -181,9 +181,7 @@
 												{project.path}
 											</div>
 										</div>
-										<div
-											class="font-mono flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 text-zinc-300"
-										>
+										<div class="font-mono flex-grow-0 rounded-b-lg border-t border-zinc-600 bg-zinc-600 px-3 py-1 text-zinc-300">
 											{#if project.api}
 												<div class="flex flex-row items-center space-x-2 ">
 													<div class="h-2 w-2 rounded-full bg-green-700" />
diff --git a/src/routes/projects/[projectId]/+layout.svelte b/src/routes/projects/[projectId]/+layout.svelte
index 04660e913..a621b99c1 100644
--- a/src/routes/projects/[projectId]/+layout.svelte
+++ b/src/routes/projects/[projectId]/+layout.svelte
@@ -35,19 +35,24 @@
 		class="flex flex-none select-none items-center justify-between space-x-3 border-b border-zinc-700 py-1 px-8 text-zinc-300"
 	>
 		<div class="flex flex-row items-center space-x-2">
-			<form action="/projects/{$project?.id}/search" method="GET">
+			<form action="/projects/{$project?.id}/search" method="GET" class="rounded-lg border-0 py-1.5 px-2 bg-zinc-800 ring-1 ring-inset ring-zinc-700">
 				<div class="flex w-48 max-w-lg rounded-md shadow-sm">
+					<div class="h-5 w-5 mr-2">
+						<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8 12a4 4 0 110-8 4 4 0 010 8zm9.707 4.293l-4.82-4.82A5.968 5.968 0 0014 8 6 6 0 002 8a6 6 0 006 6 5.968 5.968 0 003.473-1.113l4.82 4.82a.997.997 0 001.414 0 .999.999 0 000-1.414z" fill="#5C5F62"/></svg>
+					</div>
 					<input
 						type="text"
 						name="search"
 						id="search"
 						placeholder="search"
-						class="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-0 border-r-0 bg-zinc-900 py-1.5 pl-3 text-zinc-200 ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-1 focus:ring-inset focus:ring-blue-600 sm:text-sm sm:leading-6"
+						autocomplete="off"
+						aria-label="Search input"
+						class="block w-full min-w-0 flex-1 placeholder:text-zinc-500  text-zinc-200 sm:text-sm sm:leading-6 bg-zinc-800 focus:border-pink-400"
+						style=""
 					/>
-					<span
-						class="inline-flex items-center rounded-r-md border border-l-0 border-zinc-700 bg-zinc-900 px-3 text-gray-500 sm:text-sm"
-						>&#8984;K</span
-					>
+					<span class="inline-flex items-center rounded border bg-zinc-700/50 border-zinc-700/20 px-1 text-gray-500 sm:text-sm shadow">
+						&#8984;K
+					</span>
 				</div>
 			</form>
 			<a href="/projects/{$project?.id}/player" class="text-zinc-400 hover:text-zinc-200">