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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user