refactor(LocationEditForm): replace divs with fieldsets for better semantic structure

This commit is contained in:
Knee Cola
2025-11-18 12:01:04 +01:00
parent 92b2b74b66
commit 5d1b7fd6b4

View File

@@ -83,7 +83,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<InfoBox className="p-1 mb-1">{t("tenant-2d-code-info")}</InfoBox> <InfoBox className="p-1 mb-1">{t("tenant-2d-code-info")}</InfoBox>
<div className="form-control"> <fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3"> <label className="label cursor-pointer justify-start gap-3">
<input <input
type="checkbox" type="checkbox"
@@ -92,9 +92,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
checked={generateTenantCode} checked={generateTenantCode}
onChange={(e) => setGenerateTenantCode(e.target.checked)} onChange={(e) => setGenerateTenantCode(e.target.checked)}
/> />
<span className="label-text">{t("tenant-2d-code-toggle-label")}</span> <legend className="fieldset-legend">{t("tenant-2d-code-toggle-label")}</legend>
</label> </label>
</div> </fieldset>
{generateTenantCode && ( {generateTenantCode && (
<> <>
@@ -152,7 +152,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend> <legend className="fieldset-legend font-semibold uppercase">{t("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox> <InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
<div className="form-control"> <fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3"> <label className="label cursor-pointer justify-start gap-3">
<input <input
type="checkbox" type="checkbox"
@@ -161,9 +161,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
checked={autoBillFwd} checked={autoBillFwd}
onChange={(e) => setautoBillFwd(e.target.checked)} onChange={(e) => setautoBillFwd(e.target.checked)}
/> />
<span className="label-text">{t("auto-utility-bill-forwarding-toggle-label")}</span> <legend className="fieldset-legend">{t("auto-utility-bill-forwarding-toggle-label")}</legend>
</label> </label>
</div> </fieldset>
{autoBillFwd && ( {autoBillFwd && (
<fieldset className="fieldset mt-2 p-2"> <fieldset className="fieldset mt-2 p-2">
@@ -180,7 +180,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<legend className="fieldset-legend font-semibold uppercase">{t("auto-rent-notification-legend")}</legend> <legend className="fieldset-legend font-semibold uppercase">{t("auto-rent-notification-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox> <InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
<div className="form-control"> <fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3"> <label className="label cursor-pointer justify-start gap-3">
<input <input
type="checkbox" type="checkbox"
@@ -189,9 +189,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
checked={rentDueNotification} checked={rentDueNotification}
onChange={(e) => setrentDueNotification(e.target.checked)} onChange={(e) => setrentDueNotification(e.target.checked)}
/> />
<span className="label-text">{t("auto-rent-notification-toggle-label")}</span> <legend className="fieldset-legend">{t("auto-rent-notification-toggle-label")}</legend>
</label> </label>
</div> </fieldset>
{rentDueNotification && ( {rentDueNotification && (
<fieldset className="fieldset mt-2 p-2"> <fieldset className="fieldset mt-2 p-2">
@@ -231,16 +231,16 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4"> <fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 mt-4">
<legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend> <legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend>
{!location ? ( {!location ? (
<div className="form-control"> <fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3"> <label className="label cursor-pointer justify-start gap-3">
<input <input
type="checkbox" type="checkbox"
name="addToSubsequentMonths" name="addToSubsequentMonths"
className="toggle toggle-primary" className="toggle toggle-primary"
/> />
<span className="label-text">{t("add-to-subsequent-months")}</span> <legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
</label> </label>
</div> </fieldset>
) : ( ) : (
<> <>