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

@@ -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: [