Improve Readability and Feedback

The Ledger’s visual identity depends on warm paper colors and muted ink, but “muted” should never mean “hard to read.” The same principle applies to feedback: the user should be able to tell when something is loading, failing, or finished.

Open client/src/lib/constants.js. Keep a small text hierarchy:

javascript

export const INK = "#1f2a24";
export const TEXT_SECONDARY = "#5d5f57";
export const TEXT_MUTED = "#77786f";

Use the roles consistently:

INK for transaction descriptions, headings, and other primary information.
TEXT_SECONDARY for dates, supporting labels, categories, and explanatory messages.
TEXT_MUTED only for low-priority metadata that is still supposed to be readable.

Do not solve contrast by making every element black. The visual hierarchy is part of the design; the fix is to stop using the palest tone for information a learner actually needs.

Now check the existing mutation state values in BudgetContext.jsx. The project keeps separate flags for loading, saving a transaction, deleting a transaction, saving a category, and deleting a category. A component can use those values to disable the relevant control and show progress while the request is in flight.

For example, the entry button changes from a plus icon to a loading indicator or save icon while a transaction is being saved. That is more useful than allowing a second click and hoping the first request finishes first.

Test it

Look at the Ledger, Summary, and Categories pages at normal display brightness. Confirm that dates, labels, category names, error messages, and dialog text can all be read without changing the screen zoom.

Trigger a save and a delete. Confirm that the affected control visibly changes while the request is running and becomes available again afterward.

Checkpoint

The paper-ledger style remains intact, but important secondary information and operation states are readable and understandable at a glance.