updates before nlc

src/app.css

@@ -14,10 +14,12 @@
     --popover-foreground: oklch(0.141 0.005 285.823);
     --primary: oklch(0.5852 0.25 292.717);
     --primary-foreground: oklch(0.969 0.016 293.756);
+    --dull-primary: oklch(0.8225 0.0927 293.01);
+    --dull-primary-foreground: oklch(0.0 0.016 293.756);
     --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.552 0.016 285.938);
+    --muted-foreground: oklch(0.402 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);
@@ -40,7 +42,7 @@
     --warning: oklch(0.6 0.16 84);
     --error: oklch(0.577 0.245 27.325);
     --positive: oklch(0.5 0.2067 147.18);
-    --action: oklch(0.5852 0.2263 260.47);
+    --action: oklch(0.4852 0.2263 260.47);
 }
 
 .dark {
@@ -50,12 +52,15 @@
     --card-foreground: oklch(0.985 0 0);
     --popover: oklch(0.21 0.006 285.885);
     --popover-foreground: oklch(0.985 0 0);
-    --primary: oklch(0.541 0.281 293.009);
-    --primary-foreground: oklch(0.969 0.016 293.756);
+    --primary: oklch(0.72 0.331 293.009);
+    --primary-foreground: oklch(0.0 0.016 293.756);
+    --dull-primary: oklch(0.35 0.281 293.009);
+    --dull-primary-foreground: oklch(0.969 0.016 293.756);
+    /*--primary-foreground: oklch(0.969 0.016 293.756);*/
     --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.705 0.015 286.067);
+    --muted-foreground: oklch(0.755 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);
@@ -78,7 +83,7 @@
     --warning: oklch(0.84 0.16 84);
     --error: oklch(0.704 0.191 22.216);
     --positive: oklch(0.7522 0.2067 147.18);
-    --action: oklch(0.6098 0.1872 260.47);
+    --action: oklch(0.7098 0.1872 260.47);
 }
 
 @theme inline {
@@ -94,6 +99,8 @@
     --color-popover-foreground: var(--popover-foreground);
     --color-primary: var(--primary);
     --color-primary-foreground: var(--primary-foreground);
+    --color-dull-primary: var(--dull-primary);
+    --color-dull-primary-foreground: var(--dull-primary-foreground);
     --color-secondary: var(--secondary);
     --color-secondary-foreground: var(--secondary-foreground);
     --color-muted: var(--muted);

src/lib/components/ui/button/button.svelte

@@ -8,6 +8,7 @@
 		variants: {
 			variant: {
 				default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs',
+				dull_default: 'bg-dull-primary text-dull-primary-foreground hover:bg-dull-primary/90 shadow-xs',
 				destructive:
 					'bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs',
 				outline:

src/routes/+page.svelte

@@ -24,7 +24,7 @@
 		<div class="mt-10 flex flex-col items-center justify-center gap-4 ">
 			<a
 				href="/items"
-				class={cn(buttonVariants({ variant: 'default', size: 'xl' }), 'text-base')}
+				class={cn(buttonVariants({ variant: 'dull_default', size: 'xl' }), 'text-base')}
 				aria-label="Browse lost items"
 			>
 				Browse lost items

src/routes/items/+page.svelte

@@ -59,12 +59,12 @@
 		<form action="" class="w-full">
 			<Field.Field orientation="horizontal" class="w-full max-w-md">
 				<Input type="search" name="search" id="search" placeholder="Search..." />
-				<Button variant="default" type="submit">Search</Button>
+				<Button variant="dull_default" type="submit">Search</Button>
 			</Field.Field>
 		</form>
 		<!--		<h1 class="text-3xl mb-2 mt-2">Found Items</h1>-->
 		<div class="hidden md:inline-block">
-			<Button variant="default" class="" onclick={openCreateDialog}>
+			<Button variant="dull_default" class="" onclick={openCreateDialog}>
 				Submit a found item
 			</Button>
 		</div>

src/routes/items/[itemId]/inquiries/[inquiryId]/+page.svelte

@@ -9,6 +9,7 @@
 	import * as item from 'valibot';
 	import NoImagePlaceholder from '$lib/components/custom/no-image-placeholder.svelte';
 	import { Separator } from '$lib/components/ui/separator';
+	import { dateFormatOptions } from '$lib/shared';
 
 	let { data } = $props();
 
@@ -35,6 +36,14 @@
 		}
 	};
 
+	const dateTimeFormatOptions: Intl.DateTimeFormatOptions = {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+		hour: 'numeric',
+		minute: 'numeric',
+	};
+
 </script>
 
 <div class="max-w-2xl mx-auto p-4">
@@ -78,7 +87,7 @@
 
 						<div class="bg-card rounded-lg p-3 shadow-sm max-w-xl">
 							<p class="text-sm">{msg.body}</p>
-							<span class="text-xs text-muted-foreground mt-1 block">{msg.createdAt.toLocaleString()}</span>
+							<span class="text-xs text-muted-foreground mt-1 block">{new Date(msg.createdAt as unknown as string).toLocaleDateString('en-US', dateTimeFormatOptions)}</span>
 						</div>
 					</div>
 				{/each}
@@ -88,11 +97,11 @@
 
 	<!-- Input area -->
 	<form class="mt-6 flex flex-col gap-2" method="post" action="?/reply&token={page.url.searchParams.get('token')}">
-    <Textarea
+    <Input
+			type="text"
 			placeholder="Write a message..."
 			class="resize-none"
 			name="message"
-			rows={3}
 		/>
 		<Button class="self-end" type="submit">Send
 			<SendIcon />