refactor: improve InfoBox and NoteBox components with collapsible design

- Convert InfoBox to collapsible details element with chevron indicators
- Add internationalized default title support for InfoBox
- Update NoteBox styling to match new design system
- Replace custom alert styling with consistent border-based design
- Add text-base class to fieldset legends for uniform sizing
- Remove className prop from InfoBox and NoteBox (no longer needed)
- Update translations for clearer payment instruction descriptions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Knee Cola
2025-11-24 21:00:28 +01:00
parent fd0fbafb3a
commit e554fe3cb2
6 changed files with 56 additions and 33 deletions

View File

@@ -86,9 +86,9 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
<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("tenant-payment-instructions-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("tenant-payment-instructions-legend")}</legend>
<InfoBox className="p-1 pt-0 mb-1">{t("tenant-payment-instructions-code-info")}</InfoBox>
<InfoBox>{t("tenant-payment-instructions-code-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("tenant-payment-instructions-method--legend")}</legend>
@@ -217,8 +217,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
}
</fieldset>
<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("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-utility-bill-forwarding-info")}</InfoBox>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-utility-bill-forwarding-legend")}</legend>
<InfoBox>{t("auto-utility-bill-forwarding-info")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -246,8 +246,8 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
<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("auto-rent-notification-legend")}</legend>
<InfoBox className="p-1 mb-1">{t("auto-rent-notification-info")}</InfoBox>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("auto-rent-notification-legend")}</legend>
<InfoBox>{t("auto-rent-notification-info")}</InfoBox>
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -327,7 +327,7 @@ 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">
<legend className="fieldset-legend font-semibold uppercase">{t("scope-legend")}</legend>
<legend className="fieldset-legend font-semibold uppercase text-base">{t("scope-legend")}</legend>
{!location ? (
<fieldset className="fieldset">
<label className="label cursor-pointer justify-start gap-3">
@@ -342,7 +342,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
) : (
<>
<InfoBox className="p-1 mb-1">{t("update-scope-info")}</InfoBox>
<InfoBox>{t("update-scope-info")}</InfoBox>
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("update-scope-legend")}</legend>
<select defaultValue="current" className="select input-bordered w-full" name="updateScope">