TobaOjo/BayIQ-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- improved layouts across app

Browse Source 
- adjusted card spacing
This commit is contained in:
Toba Ojo
2025-12-05 17:01:57 +00:00
parent 9e89193747
commit f0587a2b43
7 changed files with 98 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/features/cameras/components/CameraSettings/RegionSelector.tsx
View File

@@ -106,99 +106,105 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
};
return (
<div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
<h2 className="text-2xl mb-2">Tools</h2>
<div className="flex flex-col">
<label
htmlFor="paintMode"
className={`p-4 border rounded-lg mb-2
<div className="flex flex-col gap-4 max-h-[50%]">
<div className="flex flex-row gap-3">
<div className="p-2 border border-gray-600 rounded-lg flex flex-col h-50 w-full">
<h2 className="text-2xl mb-2">Tools</h2>
<div className="flex flex-col">
<label
htmlFor="paintMode"
className={`p-4 border rounded-lg mb-2
${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
<input
id="paintMode"
type="radio"
onChange={handleChange}
checked={mode === "painter"}
value="painter"
className="sr-only"
/>
<span className="text-xl">Paint mode</span>
</label>
<label
htmlFor="eraseMode"
className={`p-4 border rounded-lg mb-2
>
<input
id="paintMode"
type="radio"
onChange={handleChange}
checked={mode === "painter"}
value="painter"
className="sr-only"
/>
<span className="text-xl">Paint mode</span>
</label>
<label
htmlFor="eraseMode"
className={`p-4 border rounded-lg mb-2
${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
hover:bg-[#202b36] hover:cursor-pointer`}
>
<input
id="eraseMode"
type="radio"
onChange={handleChange}
checked={mode === "eraser"}
value={"eraser"}
className="sr-only"
/>
<span className="text-xl">Erase mode</span>
</label>
>
<input
id="eraseMode"
type="radio"
onChange={handleChange}
checked={mode === "eraser"}
value={"eraser"}
className="sr-only"
/>
<span className="text-xl">Erase mode</span>
</label>
</div>
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col">
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
const inputId = `region-${idx}`;
return (
<label
htmlFor={inputId}
key={region.name}
className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Bay Select</h2>
<>
{regions?.map((region, idx) => {
const isSelected = selectedRegionIndex === idx;
const inputId = `region-${idx}`;
return (
<label
htmlFor={inputId}
key={region.name}
className={`items-center p-4 m-1 rounded-xl border flex flex-row justify-between
${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
>
<div className="flex flex-row gap-4 items-center">
<input
type="radio"
checked={isSelected}
id={inputId}
name="region"
className="sr-only"
onChange={() => {
handleModeChange("painter");
handleRegionSelect(idx);
}}
>
<div className="flex flex-row gap-4 items-center">
<input
type="radio"
checked={isSelected}
id={inputId}
name="region"
className="sr-only"
onChange={() => {
handleModeChange("painter");
handleRegionSelect(idx);
}}
/>
<span className="text-xl">{region.name}</span>
</div>
<ColourPicker
colour={region.brushColour}
setColour={(c: string) => handleRegionColourChange(idx, c)}
/>
<span className="text-xl">{region.name}</span>
</div>
<ColourPicker colour={region.brushColour} setColour={(c: string) => handleRegionColourChange(idx, c)} />
<div></div>
</label>
);
})}
</>
<div className="flex flex-col gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Bay
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
<div></div>
</label>
);
})}
</>
<div className="flex flex-col gap-4 mt-4">
<button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
Add Bay
</button>
<button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
Remove Bay
</button>
</div>
</div>
</div>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">
<div className="flex flex-col">
<h2 className="text-2xl mb-2">Actions</h2>
<div className="p-2 border border-gray-600 rounded-lg flex flex-col w-full">
<h2 className="text-2xl mb-2">Actions</h2>
<div className="flex flex-col md:flex-row mx-auto gap-4 justify-center">
<button
onClick={handleSaveclick}
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-[40%] hover:bg-blue-700 hover:cursor-pointer"
className="mt-2 px-4 py-2 border border-blue-600 rounded-md text-white bg-blue-600 w-full md:w-full hover:bg-blue-700 hover:cursor-pointer"
>
Save Region
</button>
<button
onClick={handleResetRegion}
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-full hover:bg-red-700 hover:cursor-pointer"
>
Reset Region
</button>