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