ux updates

src/app.css

@@ -19,7 +19,7 @@
     --secondary: oklch(0.967 0.001 286.375);
     --secondary-foreground: oklch(0.21 0.006 285.885);
     --muted: oklch(0.967 0.001 286.375);
-    --muted-foreground: oklch(0.402 0.016 285.938);
+    --muted-foreground: oklch(0.502 0.016 285.938);
     --accent: oklch(0.967 0.001 286.375);
     --accent-foreground: oklch(0.21 0.006 285.885);
     --destructive: oklch(0.577 0.245 27.325);
@@ -60,7 +60,7 @@
     --secondary: oklch(0.274 0.006 286.033);
     --secondary-foreground: oklch(0.985 0 0);
     --muted: oklch(0.274 0.006 286.033);
-    --muted-foreground: oklch(0.755 0.015 286.067);
+    --muted-foreground: oklch(0.655 0.015 286.067);
     --accent: oklch(0.274 0.006 286.033);
     --accent-foreground: oklch(0.985 0 0);
     --destructive: oklch(0.704 0.191 22.216);

src/lib/components/custom/item-listing.svelte

@@ -40,8 +40,8 @@
 
 </script>
 
-<div
-	class="h-full bg-card text-card-foreground flex flex-col gap-2 rounded-xl border shadow-sm max-w-sm overflow-hidden min-w-2xs">
+<button type="button"
+	class="text-left h-full bg-card text-card-foreground flex flex-col gap-2 rounded-xl border shadow-sm max-w-sm overflow-hidden min-w-2xs" onclick={() => {claimCallback(item)}}>
 	{#if item.image}
 		<img src="https://fbla26.marinodev.com/uploads/{item.id}.jpg" class="object-cover min-h-48 max-h-48"
 				 alt="Lost item">
@@ -83,10 +83,7 @@
 				<Tooltip.Provider>
 					<Tooltip.Root>
 						<Tooltip.Trigger>
-							<div class="mt-2 text-muted-foreground flex">
-								<LocationIcon class="float-left mr-1" size={24} />
-								<div>{item.foundLocation}</div>
-							</div>
+							<span class="mt-2 flex"><strong class="mr-1">Found at:</strong> {item.foundLocation}</span>
 						</Tooltip.Trigger
 						>
 						<Tooltip.Content>
@@ -152,5 +149,5 @@
 
 	</div>
 
-</div>
+</button>