Add expand and fade-in animations to conditional form sections

Add smooth animations to form sections that appear when toggles are enabled, improving user experience with visual feedback.

Changes:
- Add expandFadeIn keyframe animation to Tailwind config
- Apply expand-fade-in animation to UserSettingsForm payment sections
- Apply expand-fade-in animation to LocationEditForm conditional fields
- Update account page HomeIcon color from green to white for consistency

🤖 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-26 20:31:41 +01:00
parent eed92b5ac3
commit 4f38fa4496
4 changed files with 22 additions and 9 deletions

View File

@@ -119,7 +119,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
{formValues.tenantPaymentMethod === "iban" && userSettings?.enableIbanPayment ? (
<>
<div className="animate-expand-fade-in origin-top">
<div className="divider mt-4 mb-2 font-bold uppercase">{t("iban-payment--form-title")}</div>
<div className="form-control w-full">
<label className="label">
@@ -192,7 +192,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
))}
</div>
</div>
</>
</div>
) : // ELSE include hidden inputs to preserve existing values
<>
<input
@@ -266,7 +266,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
</fieldset>
{formValues.rentDueNotification && (
<>
<div className="animate-expand-fade-in origin-top">
<fieldset className="fieldset mt-2 p-2">
<legend className="fieldset-legend">{t("rent-due-day-label")}</legend>
<select defaultValue={formValues.rentDueDay}
@@ -301,7 +301,7 @@ export const LocationEditForm: FC<LocationEditFormProps> = ({ location, yearMont
))}
</div>
</fieldset>
</>
</div>
)}
</fieldset>