From 56163572696257c4ca3f46dcf1768dec158a93c0 Mon Sep 17 00:00:00 2001
From: Stephen Adamson <popertots@gmail.com>
Date: Sun, 5 Jul 2026 22:26:28 +0100
Subject: [PATCH] style: standardise input styling in booking create, business
 settings, custom services, patch test, walk-in create

Update input element classes to consistent h-9, py-1, shadow-xs, focus-visible border-ring with ring-[3px] and ring-ring/50 for visual consistency across admin components.

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/src/lib/components/admin/BookingCreateModal.svelte     | 2 +-
 frontend/src/lib/components/admin/BusinessSettings.svelte       | 2 +-
 .../src/lib/components/admin/CustomServicesManagement.svelte    | 2 +-
 frontend/src/lib/components/admin/PatchTestModal.svelte         | 2 +-
 frontend/src/lib/components/admin/WalkInCreateModal.svelte      | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/admin/BookingCreateModal.svelte b/frontend/src/lib/components/admin/BookingCreateModal.svelte
index 2cdcc1e..f81a400 100644
--- a/frontend/src/lib/components/admin/BookingCreateModal.svelte
+++ b/frontend/src/lib/components/admin/BookingCreateModal.svelte
@@ -1420,7 +1420,7 @@
 													(customServiceErrors.duration_minutes = validateCsDuration(
 														newCustomService.duration_minutes
 													))}
-												class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none {customServiceErrors.duration_minutes
+												class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 {customServiceErrors.duration_minutes
 													? 'border-red-500'
 													: ''}"
 											>
diff --git a/frontend/src/lib/components/admin/BusinessSettings.svelte b/frontend/src/lib/components/admin/BusinessSettings.svelte
index 842b9d1..271fd2c 100644
--- a/frontend/src/lib/components/admin/BusinessSettings.svelte
+++ b/frontend/src/lib/components/admin/BusinessSettings.svelte
@@ -623,7 +623,7 @@
 						<Label.Root for="voucher_type">Voucher Type</Label.Root>
 						<select
 							id="voucher_type"
-							class="flex h-10 w-full rounded-md border border-input bg-white px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+							class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
 							bind:value={form.voucher_type}
 							onchange={() => validateField('voucher_type')}
 						>
diff --git a/frontend/src/lib/components/admin/CustomServicesManagement.svelte b/frontend/src/lib/components/admin/CustomServicesManagement.svelte
index 39f4587..765ba71 100644
--- a/frontend/src/lib/components/admin/CustomServicesManagement.svelte
+++ b/frontend/src/lib/components/admin/CustomServicesManagement.svelte
@@ -483,7 +483,7 @@
 						id="cs-duration"
 						bind:value={newService.duration_minutes}
 						onchange={() => validateField('duration_minutes')}
-						class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none {serviceErrors.duration_minutes
+						class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 {serviceErrors.duration_minutes
 							? 'border-red-500'
 							: ''}"
 					>
diff --git a/frontend/src/lib/components/admin/PatchTestModal.svelte b/frontend/src/lib/components/admin/PatchTestModal.svelte
index aba0f05..2d1cf78 100644
--- a/frontend/src/lib/components/admin/PatchTestModal.svelte
+++ b/frontend/src/lib/components/admin/PatchTestModal.svelte
@@ -116,7 +116,7 @@
 					<select
 						id="service-select"
 						bind:value={selectedServiceId}
-						class="mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+						class="mt-1 flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
 					>
 						{#each eligibleServices as service (service.id)}
 							<option value={service.id}>
diff --git a/frontend/src/lib/components/admin/WalkInCreateModal.svelte b/frontend/src/lib/components/admin/WalkInCreateModal.svelte
index a13fe44..f78056c 100644
--- a/frontend/src/lib/components/admin/WalkInCreateModal.svelte
+++ b/frontend/src/lib/components/admin/WalkInCreateModal.svelte
@@ -981,7 +981,7 @@
 													(customServiceErrors.duration_minutes = validateCsDuration(
 														newCustomService.duration_minutes
 													))}
-												class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none {customServiceErrors.duration_minutes
+												class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs ring-offset-background transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 {customServiceErrors.duration_minutes
 													? 'border-red-500'
 													: ''}"
 											>