style: add focus state styles

greymass · Oct 7, 2024 · a4ba4ff · a4ba4ff
1 parent d0d0fc6
commit a4ba4ff
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/app.css b/src/app.css
@@ -59,7 +59,7 @@
 		@apply flex flex-wrap gap-4;
 	}
 
-	.layout-switcher>* {
+	.layout-switcher > * {
 		flex-grow: 1;
 		flex-basis: calc((var(--switcher-threshold) - 100%) * 999);
 	}
@@ -73,14 +73,6 @@
 		@apply flex flex-wrap gap-4;
 	}
 
-	.px-page {
-		@apply px-4;
-	}
-
-	.mx-page {
-		@apply px-4;
-	}
-
 	/* table styles */
 	.table-styles {
 		@apply w-full table-auto overflow-x-auto;
@@ -91,7 +83,7 @@
 
 		tr,
 		.table-row-styles {
-			@apply border-b border-neutral-300/10 bg-gradient-to-r from-transparent to-transparent last:border-none odd:via-mineShaft-950 hover:via-skyBlue-500/10 data-[clickable=true]:cursor-pointer data-[active=true]:via-skyBlue-500/10 data-[hover-effect=false]:hover:via-transparent data-[hover-effect=false]:odd:hover:via-mineShaft-950;
+			@apply table-row-border table-row-background;
 		}
 
 		th,
@@ -105,3 +97,21 @@
 		}
 	}
 }
+
+@layer utilities {
+	.px-page {
+		@apply px-4;
+	}
+
+	.mx-page {
+		@apply px-4;
+	}
+
+	.table-row-border {
+		@apply border-b border-neutral-300/10 last:border-none;
+	}
+
+	.table-row-background {
+		@apply bg-gradient-to-r from-transparent to-transparent odd:via-mineShaft-950 hover:via-skyBlue-500/10 data-[clickable=true]:cursor-pointer data-[active=true]:via-skyBlue-500/10 data-[hover-effect=false]:hover:via-transparent data-[hover-effect=false]:odd:hover:via-mineShaft-950;
+	}
+}
diff --git a/src/lib/components/input/search.svelte b/src/lib/components/input/search.svelte
@@ -206,7 +206,7 @@
 			}}
 		>
 			<Stack>
-				<form onsubmit={preventDefault(goToResult)}>
+				<form onsubmit={preventDefault(goToResult)} class="relative">
 					<input
 						type="text"
 						bind:this={ref}
@@ -215,22 +215,29 @@
 						{...props}
 						class="w-full rounded-lg border-2 border-skyBlue-500 bg-transparent p-4 focus:outline-none"
 					/>
-					<!-- <SearchIcon /> -->
+					<button
+						type="submit"
+						class="absolute right-4 top-1/2 -translate-y-1/2 outline-none focus:ring-2 focus:ring-skyBlue-500"
+					>
+						<SearchIcon class="size-5" />
+					</button>
 				</form>
 
 				{#if history.length}
 					<div class="px-2">
 						<div class="table-styles grid grid-cols-2">
-							<div
-								class="table-head-styles col-span-full grid grid-cols-subgrid border-b border-neutral-300/10"
-							>
+							<div class="table-head-styles col-span-full grid grid-cols-subgrid">
 								<span class="pl-2">Recent</span>
 								<span>Type</span>
 							</div>
 
 							{#each history as item, index}
 								<a
-									class="table-row-styles col-span-full grid grid-cols-subgrid items-center justify-items-start"
+									class="table-row-background col-span-full grid grid-cols-subgrid items-center
+									justify-items-start border-y border-neutral-300/10
+									border-transparent border-b-transparent
+									focus:border-skyBlue-500
+									focus:outline-none"
 									href={item.result}
 									onclick={closeSearch}
 									data-active={index === selectedIndex}
@@ -246,7 +253,7 @@
 											<span>{item.searchValue}</span>
 										{:else if item.searchType === 'key'}
 											<Key class="size-4" />
-											<span class="max-w-[13ch] truncate">
+											<span class="max-w-[12ch] truncate">
 												{item.searchValue}
 											</span>
 										{:else if item.searchType === 'transaction'}