Skip to main content

UI Redesign Implementation Walkthrough

The redesign of the FEN app matching the new FEN Core Loop_20260703_v1.html screens has been implemented. The app now uses a consistent aesthetic featuring a custom canvas background (#F3EFE6), bespoke headers instead of standard AppBars, and custom-styled inputs.

Completed Screens​

1. Onboarding (01 · ONBOARDING)​

  • Maintained the name input field per your request.
  • Added the explanatory note: "This is the name other users will see."
  • Updated typography, colors, and button styling to match the new UI.

2. Group Home (02 · GROUPS)​

  • Replaced the standard layout with the new custom header featuring the + button.
  • Added the A-Z sorting and closed filter toolbar.
  • Restyled the ListView items to show colorful initial badges, group names, member counts, and net balances.
  • Added the bottom navigation bar.

3. Create Group (03 · CREATE A GROUP)​

  • Updated the header to the new ‹ Back | New Group layout.
  • Restyled the "Group name" and "Default currency" text fields to use the new grey, rounded-corner containers with inner padding and specific typography.
  • Updated the primary "Create Group" button.

4. Group Detail & Expenses​

We've split the monolithic expense_balance_screen.dart into three dedicated screens to match the new flow:

  1. Group Detail (03 · GROUP HOME):
    • Shows the new balance card summary ("You are owed", "You owe", "Net").
    • Includes the "View balances" and "Settle up" buttons.
    • Contains an activity feed showing expenses by date.
  2. Balances Detail (04b · BALANCES DETAIL):
    • A detailed breakdown showing exactly who owes you, and who you owe.
    • Summarizes the global owed/owe/net at the top.
  3. Add Expense (04 · ADD EXPENSE):
    • Recreated the large text input hero section for the amount.
    • Replaced the old dialogs with the structured grey box for Description, Date, and Payer.
    • Shows the visual indicator for how the expense will be split.

Verification​

  • Code compiles successfully.
  • Tests have been updated to reflect the new file names (AddExpenseScreen instead of ExpenseBalanceScreen).
  • Routing updated in app.dart.