From 4f38fa44964b981277f00f55d3097d29dc4da1f7 Mon Sep 17 00:00:00 2001
From: Knee Cola <kneecola@duck.com>
Date: Wed, 26 Nov 2025 20:31:41 +0100
Subject: [PATCH] Add expand and fade-in animations to conditional form
 sections
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 app/[locale]/home/account/page.tsx |  2 +-
 app/ui/LocationEditForm.tsx        |  8 ++++----
 app/ui/UserSettingsForm.tsx        |  8 ++++----
 tailwind.config.ts                 | 13 +++++++++++++
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/app/[locale]/home/account/page.tsx b/app/[locale]/home/account/page.tsx
index 257f59c..d1371d7 100644
--- a/app/[locale]/home/account/page.tsx
+++ b/app/[locale]/home/account/page.tsx
@@ -17,7 +17,7 @@ const Page: FC = async () => {
                 <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
                     <div className="card-body">
                         <h2 className="card-title"><AccountCircle /> {t('title')}</h2>
-                        <Link href={`/${locale}/home`} className='btn btn-neutral'><HomeIcon className='text-green-300' /> {t('goto-home-button-label')}</Link>
+                        <Link href={`/${locale}/home`} className='btn btn-neutral'><HomeIcon className='text-white'/> {t('goto-home-button-label')}</Link>
                         <Link href={`/${locale}/home/account/settings`} className='btn btn-neutral'><SettingsIcon className='text-blue-400' /> {t('goto-settings-button-label')}</Link>
                         <LogoutButton />
                     </div>
diff --git a/app/ui/LocationEditForm.tsx b/app/ui/LocationEditForm.tsx
index 00bf303..d63c4cb 100644
--- a/app/ui/LocationEditForm.tsx
+++ b/app/ui/LocationEditForm.tsx
@@ -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>
 
diff --git a/app/ui/UserSettingsForm.tsx b/app/ui/UserSettingsForm.tsx
index 581407e..b508932 100644
--- a/app/ui/UserSettingsForm.tsx
+++ b/app/ui/UserSettingsForm.tsx
@@ -129,7 +129,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                 </fieldset>
 
                 { formValues.enableIbanPayment ? (
-                <>
+                <div className="animate-expand-fade-in origin-top">
                     <div className="divider mt-2 mb-2 font-bold uppercase">{t("iban-form-title")}</div>
                     <div className="form-control w-full">
                         <label className="label">
@@ -231,7 +231,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                     </div>
 
                     <NoteBox>{t("payment-additional-notes")}</NoteBox>
-                </>
+                </div>
                 ) : // ELSE include hidden inputs to preserve existing values
                 <>
                     <input
@@ -281,7 +281,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                 </fieldset>
                 
                 { formValues.enableRevolutPayment ? (
-                <>
+                <div className="animate-expand-fade-in origin-top">
                     <div className="divider mt-2 mb-2 font-bold uppercase">{t("revolut-form-title")}</div>
                     <div className="form-control w-full">
                         <label className="label">
@@ -326,7 +326,7 @@ const FormFields: FC<FormFieldsProps> = ({ userSettings, errors, message }) => {
                          }
                     </div>
                     <NoteBox>{t("payment-additional-notes")}</NoteBox>
-                </>
+                </div>
                 )
                 : // ELSE include hidden input to preserve existing value
                 <>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2889b2d..bbe32ba 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,6 +18,9 @@ const config: Config = {
           600: '#2F6FEB',
         },
       },
+      animation: {
+        'expand-fade-in': 'expandFadeIn 0.3s ease-in-out forwards',
+      },
     },
     keyframes: {
       shimmer: {
@@ -37,6 +40,16 @@ const config: Config = {
           maxHeight: '200px',
         },
       },
+      expandFadeIn: {
+        '0%': {
+          opacity: '0',
+          transform: 'scaleY(0.95)',
+        },
+        '100%': {
+          opacity: '1',
+          transform: 'scaleY(1)',
+        },
+      },
     },
   },
   plugins: [