refactor(LocationEditForm): replace divs with fieldsets for better semantic structure
This commit is contained in:
@@ -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>
|
||||||
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
|
|||||||
Reference in New Issue
Block a user