Improved EditModal styling

This commit is contained in:
Tim Howitz 2025-06-06 19:59:39 +01:00
parent b750c5fd74
commit 5c17c8df0f

View File

@ -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,15 +455,19 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
/>
</div>
)}
<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"
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>
<div>
<label className="text-sm font-medium text-neutral-600">Name</label>
<input
type="text"
placeholder="Name"
@ -473,6 +477,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
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)"
@ -482,6 +489,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
aria-label="Artefact Type"
disabled={isSubmitting}
/>
</div>
<div>
<label className="text-sm font-medium text-neutral-600">Description</label>
<textarea
placeholder="Description"
value={description}
@ -490,6 +500,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
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)"
@ -499,6 +512,9 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
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)"
@ -508,6 +524,7 @@ function EditModal({ artefact, onClose }: { artefact: ExtendedArtefact; onClose:
aria-label="Storage Location"
disabled={isSubmitting}
/>
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"