ui changes and cs prices

src/routes/projects/game-tracker/pokemon/+page.svelte

@@ -12,6 +12,8 @@
 	import { SvelteSet } from 'svelte/reactivity';
 	import type { PageProps } from './$types';
 	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
 	import PokemonDetails from '$lib/catch-em-all/PokemonDetails.svelte';
 	import { summarizeProgress } from '$lib/catch-em-all/progress';
 
@@ -171,12 +173,7 @@
 				{data.pokemon.length} Pokémon · {data.games.length} games
 			</p>
 		</div>
-		<button
-			type="button"
-			onclick={openRules}
-			class="rounded border border-[var(--site-border)] px-4 py-2 hover:bg-[var(--site-hover)]"
-			>set rules</button
-		>
+		<Button variant="outline" type="button" onclick={openRules}>set rules</Button>
 	</div>
 
 	{#if !data.user}<p class="mt-6">
@@ -232,12 +229,12 @@
 	<div class="mt-8 grid gap-4 sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
 		<label class="block"
 			>search Pokémon
-			<input
+			<Input
 				type="search"
 				bind:value={search}
 				oninput={() => (pageNumber = 1)}
 				placeholder="name or number"
-				class="mt-2 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-3"
+				class="mt-2 h-11"
 			/>
 		</label>
 		<label class="block"
@@ -348,18 +345,20 @@
 					)} of {filteredPokemon.length}
 				</p>
 				<div class="flex items-center gap-4">
-					<button
+					<Button
+						variant="outline"
+						size="sm"
 						type="button"
 						disabled={pageNumber === 1}
-						onclick={() => (pageNumber -= 1)}
-						class="disabled:opacity-40">previous</button
+						onclick={() => (pageNumber -= 1)}>previous</Button
 					>
 					<span class="text-[var(--site-muted)]">{pageNumber}/{pageCount}</span>
-					<button
+					<Button
+						variant="outline"
+						size="sm"
 						type="button"
 						disabled={pageNumber === pageCount}
-						onclick={() => (pageNumber += 1)}
-						class="disabled:opacity-40">next</button
+						onclick={() => (pageNumber += 1)}>next</Button
 					>
 				</div>
 			</div>