From 5c17c8df0fbe29878063f4034b341fd9e0065be4 Mon Sep 17 00:00:00 2001
From: Tim Howitz <tim.howitz@dyson.com>
Date: Fri, 6 Jun 2025 19:59:39 +0100
Subject: [PATCH] Improved EditModal styling

---
 src/app/warehouse/page.tsx | 123 +++++++++++++++++++++----------------
 1 file changed, 70 insertions(+), 53 deletions(-)

diff --git a/src/app/warehouse/page.tsx b/src/app/warehouse/page.tsx
index 58a0a2c..3130cc4 100644
--- a/src/app/warehouse/page.tsx
+++ b/src/app/warehouse/page.tsx
@@ -440,7 +440,7 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 			className="fixed inset-0 bg-neutral-900 bg-opacity-50 flex justify-center items-center z-50"
 			onClick={handleOverlayClick}
 		>
-			<div className="bg-white rounded-lg shadow-xl max-w-md w-full p-6 border border-neutral-300">
+			<div className="bg-white rounded-lg shadow-xl max-w-lg w-full p-6 border border-neutral-300">
 				<h3 className="text-lg font-semibold mb-4 text-neutral-800">Edit Artefact</h3>
 				{error && <p className="text-red-600 text-sm mb-2">{error}</p>}
 				<div className="space-y-2">
@@ -455,59 +455,76 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
 							/>
 						</div>
 					)}
-					<input
-						type="file"
-						accept="image/jpeg,image/png"
-						onChange={handleImageChange}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
-						aria-label="Artefact Image"
-						disabled={isSubmitting}
-					/>
+					<div>
+						<input
+							type="file"
+							accept="image/jpeg,image/png"
+							onChange={handleImageChange}
+							className="w-full p-1 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							aria-label="Artefact Image"
+							disabled={isSubmitting}
+						/>
+					</div>
 					<p className="text-sm text-neutral-600">Created At: {new Date(artefact.createdAt).toLocaleDateString("en-GB")}</p>
-					<input
-						type="text"
-						placeholder="Name"
-						value={name}
-						onChange={(e) => setName(e.target.value)}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
-						aria-label="Artefact Name"
-						disabled={isSubmitting}
-					/>
-					<input
-						type="text"
-						placeholder="Type (e.g., Lava, Tephra, Ash)"
-						value={type}
-						onChange={(e) => setType(e.target.value)}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
-						aria-label="Artefact Type"
-						disabled={isSubmitting}
-					/>
-					<textarea
-						placeholder="Description"
-						value={description}
-						onChange={(e) => setDescription(e.target.value)}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
-						aria-label="Artefact Description"
-						disabled={isSubmitting}
-					/>
-					<input
-						type="text"
-						placeholder="Earthquake Code (e.g., EC-3.9-Belgium-05467)"
-						value={earthquakeCode}
-						onChange={(e) => setEarthquakeCode(e.target.value)}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
-						aria-label="Earthquake ID"
-						disabled={isSubmitting}
-					/>
-					<input
-						type="text"
-						placeholder="Warehouse Area (e.g., A-12)"
-						value={warehouseArea}
-						onChange={(e) => setWarehouseArea(e.target.value)}
-						className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
-						aria-label="Storage Location"
-						disabled={isSubmitting}
-					/>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Name</label>
+						<input
+							type="text"
+							placeholder="Name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+							className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							aria-label="Artefact Name"
+							disabled={isSubmitting}
+						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Type</label>
+						<input
+							type="text"
+							placeholder="Type (e.g., Lava, Tephra, Ash)"
+							value={type}
+							onChange={(e) => setType(e.target.value)}
+							className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							aria-label="Artefact Type"
+							disabled={isSubmitting}
+						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Description</label>
+						<textarea
+							placeholder="Description"
+							value={description}
+							onChange={(e) => setDescription(e.target.value)}
+							className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 h-16"
+							aria-label="Artefact Description"
+							disabled={isSubmitting}
+						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Earthquake Code</label>
+						<input
+							type="text"
+							placeholder="Earthquake Code (e.g., EC-3.9-Belgium-05467)"
+							value={earthquakeCode}
+							onChange={(e) => setEarthquakeCode(e.target.value)}
+							className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							aria-label="Earthquake ID"
+							disabled={isSubmitting}
+						/>
+					</div>
+					<div>
+						<label className="text-sm font-medium text-neutral-600">Warehouse Area</label>
+						<input
+							type="text"
+							placeholder="Warehouse Area (e.g., A-12)"
+							value={warehouseArea}
+							onChange={(e) => setWarehouseArea(e.target.value)}
+							className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500"
+							aria-label="Storage Location"
+							disabled={isSubmitting}
+						/>
+					</div>
 					<div className="flex items-center gap-2">
 						<input
 							type="checkbox"