Abi Vault - Devlog 6

This section was mainly about cleaning up the UI, making the different pages more synchron and creating a more structured UI system for the whole website.

UI System

I worked on making the design more consistent across the dashboard, transactions and receipts page. Before that many aspects were styled slightly different like the spacing, typography, buttons, dropdowns and card sizes. I started creating shared rules and components so the pages follow the same visual identity and feel more connected.

Transactions and Receipts

I created and implemented the full transactions page with filters, a filter modal, pagination, placeholder transactions and a structured transaction table. I also created the receipts page with placeholder receipts, status filters, pagination and a modal for adding new receipts. Both pages use the existing Abi Vault sidebar, topbar, colors and general design language.

Dashboard Cleanup

I added more placeholder transactions to the dashboard so the transaction history feels more complete and does not leave as much empty space. I also added another spending category and adjusted the review section so the right side feels more balanced with the transaction history on the left.

1920px and 2560px

A big part of this session was cleaning up the layout for both 1920px and 2560px screens. The layouts looked very different depending on the screen size because of adaptive heights and spacing. I adjusted the cards, rows, table containers and page spacing so the website stays inside the viewport and does not become scrollable on the supported resolutions.

The 2560px version was especially difficult because there was a lot of empty space, but simply scaling everything up did not look good. Instead I had to create separate wide-screen adjustments, add more rows and balance the different cards while keeping the 1920px layout unchanged.

Results

This was a productive session but also quite difficult because many small CSS changes affected multiple pages. The UI now feels much more consistent and the Transactions and Receipts pages are much closer to the final design. I still need to refine some spacing differences between the pages and test everything more carefully, but the main structure is now in place and the beta version is getting closer. For anyone wondering about the phone UI I havent touched it in a while and decided to just create it at the end because its such a hedache