Audit frontend UI — identify inconsistencies and consolidation opportunities

[talissoncosta]

Summary

Audit the frontend UI to identify visual inconsistencies, consolidation opportunities, and areas for improvement.

Background

The UI has grown organically over time. There's no Figma design system for the app (the existing Figma file covers the website only). We need to take stock of what we have, find inconsistencies, and reduce them.

Scope

Visual inconsistencies

• Colours — hardcoded values, missing tokens, dark mode issues
• Typography — font sizes, weights, line heights
• Spacing — padding, margins, gaps
• Button styles and variants
• Form inputs
• Icons usage

Component duplication

• Identify components with multiple implementations of the same pattern
• Flag consolidation opportunities (e.g. confirmation modals, dropdowns)

Visual review

• Screenshot key pages and components (light + dark mode)
• Identify UI patterns that could be improved — component design, page layouts, overall look and feel

Output

• Prioritised list of findings (quick wins vs. longer-term consolidations)
• Visual inventory with improvement suggestions

[talissoncosta]

Approach

This audit combines a code scan with a visual review to get a full picture of where we stand.

Steps

1. Code audit (done) — scanned SCSS and TSX files for hardcoded colour values, missing dark mode overrides, inconsistent spacing/typography, and catalogued recurring UI components. Identified 85 findings across colours, typography, spacing, buttons, forms, icons, and notifications.

2. Visual review (in progress) — screenshotting key pages and components in both light and dark mode to spot inconsistencies that aren't obvious from code alone, and identify patterns that could be improved.

3. Prioritised report — distil findings into a short list of concrete, actionable tasks: quick wins (e.g. switching hardcoded icon colours to currentColor), and bigger consolidation opportunities (e.g. reducing 13 confirmation modal implementations to one).

4. Follow-up issues — create individual tickets for the top findings so they can be picked up independently.

The goal isn't to build a design system ( for now ) — it's to reduce inconsistencies and flag consolidation opportunities that make the UI more consistent and the codebase easier to maintain.