ui changes and cs prices

src/routes/projects/animaldex/register/+page.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Textarea } from '$lib/components/ui/textarea/index.js';
 	import { resolve } from '$app/paths';
 	import type { Map as MaptilerMap, Marker as MaptilerMarker } from '@maptiler/sdk';
 	import { onDestroy, onMount } from 'svelte';
@@ -257,8 +260,8 @@
 			<div role="alert" class="border-y border-[var(--site-border)] py-4 text-base">
 				<p class="font-medium">location required</p>
 				<p class="mt-1">{locationError}</p>
-				<button type="button" onclick={requestLocation} class="mt-3 underline underline-offset-4"
-					>try again</button
+				<Button type="button" variant="outline" onclick={requestLocation} class="mt-3"
+					>try again</Button
 				>
 			</div>
 		{/if}
@@ -276,12 +279,13 @@
 				{#each photoPreviews as preview, i (i)}
 					<div class="relative h-20 w-20 overflow-hidden rounded">
 						<img src={preview} alt="" class="h-full w-full object-cover" />
-						<button
+						<Button
+							variant="secondary"
+							size="icon-xs"
 							type="button"
 							onclick={() => removePhoto(i)}
 							aria-label={`Remove photo ${i + 1}`}
-							class="absolute top-1 right-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/60 text-xs text-white"
-							><X size={12} aria-hidden="true" /></button
+							class="absolute top-1 right-1 rounded-full"><X size={12} aria-hidden="true" /></Button
 						>
 					</div>
 				{/each}
@@ -320,30 +324,25 @@
 				</h2>
 				<div class="flex flex-wrap gap-2">
 					{#each COMMON_SPECIES as s (s)}
-						<button
+						<Button
+							variant={species === s ? 'secondary' : 'outline'}
+							size="sm"
 							onclick={() => {
 								species = s;
 								customSpecies = '';
-							}}
-							class="rounded border border-[var(--site-border)] px-3 py-1.5 text-base {species === s
-								? 'bg-[var(--site-text)] text-[var(--site-bg)]'
-								: 'bg-[var(--site-surface)] text-[var(--site-text)] hover:bg-[var(--site-hover)]'}"
-							>{s}</button
+							}}>{s}</Button
 						>
 					{/each}
-					<button
+					<Button
+						variant={species === '__custom__' ? 'secondary' : 'outline'}
+						size="sm"
 						onclick={() => {
 							species = '__custom__';
-						}}
-						class="rounded border border-[var(--site-border)] px-3 py-1.5 text-base {species ===
-						'__custom__'
-							? 'bg-[var(--site-text)] text-[var(--site-bg)]'
-							: 'bg-[var(--site-surface)] text-[var(--site-text)] hover:bg-[var(--site-hover)]'}"
-						>Other…</button
+						}}>Other…</Button
 					>
 				</div>
 				{#if species === '__custom__'}
-					<input
+					<Input
 						bind:value={customSpecies}
 						placeholder="Enter species"
 						class="mt-3 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
@@ -355,7 +354,7 @@
 				<h2 class="mb-1 text-xl font-semibold">
 					Breed <span class="text-base font-normal text-[var(--site-muted)]">(optional)</span>
 				</h2>
-				<input
+				<Input
 					bind:value={breed}
 					placeholder="e.g. Golden Retriever"
 					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
@@ -369,7 +368,7 @@
 							>(optional)</span
 						>
 					</h2>
-					<input
+					<Input
 						bind:value={animalName}
 						placeholder="e.g. Fluffy"
 						class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
@@ -381,12 +380,12 @@
 							>(optional)</span
 						>
 					</h2>
-					<textarea
+					<Textarea
 						bind:value={description}
 						placeholder="Behaviour, features, context…"
-						rows="3"
+						rows={3}
 						class="w-full resize-none rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
-					></textarea>
+					/>
 				</div>
 			</section>
 		{/if}
@@ -396,7 +395,7 @@
 				<h2 class="mb-1 text-xl font-semibold">
 					When did you see it? <span class="text-[var(--site-muted)]">*</span>
 				</h2>
-				<input
+				<Input
 					type="datetime-local"
 					bind:value={seenAt}
 					max={localDateTime()}
@@ -407,7 +406,7 @@
 				<h2 class="mb-1 text-xl font-semibold">
 					Your name <span class="text-base font-normal text-[var(--site-muted)]">(optional)</span>
 				</h2>
-				<input
+				<Input
 					bind:value={reporterName}
 					placeholder="Saved for next time"
 					class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2 text-base"
@@ -443,13 +442,13 @@
 			</div>
 		{/if}
 
-		<button
+		<Button
 			onclick={submit}
 			disabled={submitting || !!locationError || lat === null}
-			class="w-full rounded bg-[var(--site-text)] py-3 font-medium text-[var(--site-bg)] disabled:cursor-not-allowed disabled:opacity-50"
+			class="h-11 w-full"
 		>
 			{submitting ? 'Submitting…' : isNewSighting ? 'Submit sighting' : 'Register animal'}
-		</button>
+		</Button>
 
 		<p class="pb-8 text-center text-base text-[var(--site-muted)]">
 			All submissions are reviewed before appearing on the map.