BMP Web App

Several UI inconsistencies have been identified across finance-related screens when compared to the approved Figma design system. These inconsistencies impact visual alignment, spacing, typography, and overall user experience.

This task aims to standardize and refactor all finance module screens to strictly follow the Figma design specifications, ensuring a consistent and polished UI/UX across the application.

🎯 Scope of Work:
Review all finance screens against Figma design
Identify mismatches in:
Layout structure
Spacing (padding/margin)
Typography (font size, weight, line height)
Colors and theme usage
Button styles and states
Input fields and form elements
Icons and images
Fix responsiveness issues (if any)

Ensure consistency across:
Dashboard
Transaction screens
Wallet / Balance UI
Any finance-related modules

🛠️ Tasks:
Compare implemented UI with Figma designs
Fix spacing inconsistencies (padding/margin)
Align typography with design system
Standardize button styles and variants
Update color usage as per theme
Fix misaligned components
Ensure consistent form field styling
Validate responsive behavior
Remove unused / redundant UI elements
Cross-browser/UI testing

✅ Acceptance Criteria:
All finance screens visually match Figma design
Consistent spacing and alignment across all screens
Typography follows design system guidelines
UI components (buttons, inputs, cards) are standardized
No layout breaking issues on different screen sizes
Pixel-perfect (or near pixel-perfect) implementation

⚠️ Notes:
Follow design system strictly (no custom deviations)
Reusable components should be preferred
Avoid hardcoded styles; use centralized theme/config