style: improve LocationEditForm fieldset styling and formatting
- Wrap location name input in styled fieldset matching other sections - Add consistent bg-base-200 border styling to location name fieldset - Fix indentation and whitespace for better code consistency - Remove trailing whitespace throughout the file 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
@@ -27,7 +27,7 @@ export type LocationEditFormProps = {
|
|||||||
|
|
||||||
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
|
export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMonth, userSettings }) => {
|
||||||
const initialState = { message: null, errors: {} };
|
const initialState = { message: null, errors: {} };
|
||||||
|
|
||||||
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
|
const handleAction = updateOrAddLocation.bind(null, location?._id, location?.yearMonth ?? yearMonth);
|
||||||
|
|
||||||
const [state, dispatch] = useFormState(handleAction, initialState);
|
const [state, dispatch] = useFormState(handleAction, initialState);
|
||||||
@@ -65,24 +65,26 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
|||||||
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
|
<TrashIcon className="h-[1em] w-[1em] text-error text-2xl" />
|
||||||
</Link>
|
</Link>
|
||||||
}
|
}
|
||||||
<fieldset className="fieldset mt-2 p-2">
|
<fieldset className="fieldset bg-base-200 border-base-300 rounded-box w-xs border p-4 pb-2 pt-3 mt-4">
|
||||||
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
|
<legend className="fieldset-legend font-semibold uppercase text-base">{t("location-name-legend")}</legend>
|
||||||
<input id="locationName"
|
<fieldset className="fieldset p-2 pt-0">
|
||||||
name="locationName"
|
<input id="locationName"
|
||||||
type="text"
|
name="locationName"
|
||||||
placeholder={t("location-name-placeholder")}
|
type="text"
|
||||||
className="input input-bordered w-full placeholder:text-gray-600"
|
placeholder={t("location-name-placeholder")}
|
||||||
value={formValues.locationName}
|
className="input input-bordered w-full placeholder:text-gray-600"
|
||||||
onChange={(e) => handleInputChange("locationName", e.target.value)}
|
value={formValues.locationName}
|
||||||
|
onChange={(e) => handleInputChange("locationName", e.target.value)}
|
||||||
/>
|
/>
|
||||||
<div id="status-error" aria-live="polite" aria-atomic="true">
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
||||||
{state.errors?.locationName &&
|
{state.errors?.locationName &&
|
||||||
state.errors.locationName.map((error: string) => (
|
state.errors.locationName.map((error: string) => (
|
||||||
<p className="mt-2 text-sm text-red-500" key={error}>
|
<p className="mt-2 text-sm text-red-500" key={error}>
|
||||||
{error}
|
{error}
|
||||||
</p>
|
</p>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
</fieldset>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<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">
|
||||||
@@ -105,7 +107,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
|||||||
t("tenant-payment-instructions-method--iban") :
|
t("tenant-payment-instructions-method--iban") :
|
||||||
t("tenant-payment-instructions-method--iban-disabled")
|
t("tenant-payment-instructions-method--iban-disabled")
|
||||||
}
|
}
|
||||||
</option>
|
</option>
|
||||||
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
|
<option value="revolut" disabled={!userSettings?.enableRevolutPayment}>
|
||||||
{
|
{
|
||||||
userSettings?.enableRevolutPayment ?
|
userSettings?.enableRevolutPayment ?
|
||||||
@@ -116,7 +118,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
|||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
{ formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
|
{formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
|
||||||
<>
|
<>
|
||||||
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
|
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
|
||||||
<div className="form-control w-full">
|
<div className="form-control w-full">
|
||||||
@@ -192,30 +194,30 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : // ELSE include hidden inputs to preserve existing values
|
) : // ELSE include hidden inputs to preserve existing values
|
||||||
<>
|
<>
|
||||||
<input
|
<input
|
||||||
id="tenantName"
|
id="tenantName"
|
||||||
name="tenantName"
|
name="tenantName"
|
||||||
type="hidden"
|
type="hidden"
|
||||||
maxLength={30}
|
maxLength={30}
|
||||||
defaultValue={formValues.tenantName}
|
defaultValue={formValues.tenantName}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
id="tenantStreet"
|
id="tenantStreet"
|
||||||
name="tenantStreet"
|
name="tenantStreet"
|
||||||
type="hidden"
|
type="hidden"
|
||||||
className="input input-bordered w-full placeholder:text-gray-600"
|
className="input input-bordered w-full placeholder:text-gray-600"
|
||||||
defaultValue={formValues.tenantStreet}
|
defaultValue={formValues.tenantStreet}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
id="tenantTown"
|
id="tenantTown"
|
||||||
name="tenantTown"
|
name="tenantTown"
|
||||||
type="hidden"
|
type="hidden"
|
||||||
defaultValue={formValues.tenantTown}
|
defaultValue={formValues.tenantTown}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<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 text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
|
<legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
|
||||||
<InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
|
<InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
|
||||||
@@ -270,7 +272,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
|
|||||||
<select defaultValue={formValues.rentDueDay}
|
<select defaultValue={formValues.rentDueDay}
|
||||||
className="select input-bordered w-full"
|
className="select input-bordered w-full"
|
||||||
name="rentDueDay"
|
name="rentDueDay"
|
||||||
onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value,10))
|
onChange={(e) => handleInputChange("rentDueDay", parseInt(e.target.value, 10))
|
||||||
}>
|
}>
|
||||||
{Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
|
{Array.from({ length: 28 }, (_, i) => i + 1).map(day => (
|
||||||
<option key={day} value={day}>{day}</option>
|
<option key={day} value={day}>{day}</option>
|
||||||
@@ -328,31 +330,31 @@ 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 text-base">{t("scope-legend")}</legend>
|
<legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
|
||||||
{!location ? (
|
{!location ? (
|
||||||
<fieldset className="fieldset">
|
<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"
|
||||||
/>
|
/>
|
||||||
<legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
|
<legend className="fieldset-legend">{t("add-to-subsequent-months")}</legend>
|
||||||
</label>
|
</label>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<InfoBox>{t("update-scope-info")}</InfoBox>
|
<InfoBox>{t("update-scope-info")}</InfoBox>
|
||||||
<fieldset className="fieldset mt-2 p-2">
|
<fieldset className="fieldset mt-2 p-2">
|
||||||
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
|
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
|
||||||
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
|
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">
|
||||||
<option value="current">{t("update-current-month")}</option>
|
<option value="current">{t("update-current-month")}</option>
|
||||||
<option value="subsequent">{t("update-subsequent-months")}</option>
|
<option value="subsequent">{t("update-subsequent-months")}</option>
|
||||||
<option value="all">{t("update-all-months")}</option>
|
<option value="all">{t("update-all-months")}</option>
|
||||||
</select>
|
</select>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</fieldset>
|
</fieldset>
|
||||||
|
|
||||||
<div id="status-error" aria-live="polite" aria-atomic="true">
|
<div id="status-error" aria-live="polite" aria-atomic="true">
|
||||||
@@ -378,7 +380,7 @@ export const LocationEditFormSkeleton: FC = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
<div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
|
||||||
|
|
||||||
<div className="card-body">
|
<div className="card-body">
|
||||||
<fieldset className="fieldset mt-2 p-2">
|
<fieldset className="fieldset mt-2 p-2">
|
||||||
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
|
<legend className="fieldset-legend font-semibold uppercase">{t("location-name-legend")}</legend>
|
||||||
|
|||||||
Reference in New Issue
Block a user