thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved EditModal styling

Browse Source
This commit is contained in:
Tim Howitz 2025-06-06 19:59:39 +01:00
parent b750c5fd74
commit 5c17c8df0f
1 changed files with 70 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/app/warehouse/page.tsx
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,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"