UX/UI: Transaction history / details + menu display

[swedishfrenchpress]

One concern I have is the color choices of green and red for the incoming and outgoing satoshi amounts in the transaction history. Given that red/green color blindness is the most prevalent, using this color combination without a "+" or "-" indicator could be confusing for users. This indicator would clearly signify the direction of funds, making it best practice.

I also have feedback on the display of line items in the settings. The current UI encloses the text in ovals, which seem to add unnecessary visual elements. Some suggestions:

Transaction History

• Streamline the settings display with underlined rows.
• Use left and right arrows to indicate incoming and outgoing transactions.
• Add "+" and "-" to transactions for clarity on direction.
• Displaying dates under each transaction seems redundant; consider grouping transactions under a date header.
• Use a space, not a comma, as the thousands separator for better legibility.
• Replaced thunderbolt icon with sats denomination

Payment Details

• Add a "Transaction Details" header.
• Remove the comma between the date and time.
• Renames satoshi to sats

Miscellaneous Thoughts
I'm open to all any feedback here. I know this design is suggestion a pretty large change from the existing UI and the last thing I want do is create extra work for the sake of work, but I do believe that some of these suggestions would help.

[swedishfrenchpress]

Exploring a version with 15px icons.

[KKA11010]

Converting this into a discussion

[swedishfrenchpress]

If we are planning to modify the menu styling for transactions, nostr contact list, and so on, then I believe it is needed to update the styling for consistency across various sections of the screen. Other areas of the app, such as the disclaimer and settings, will also benefit from styling updates. For example:

[swedishfrenchpress]

Some continuous iteration here. I think this design does a better job of separating the sections and increasing contrast between the menu options and the background (something you did very well in your original design. It may require some styling changes across the application though. Would love to know what you think.

[KKA11010]

Thank you very much for this proposals. I prefer A and I have already done a bit regarding the screens designs. Please run the branch nostr-cache to see the dark theme changes.

[KKA11010]

the branch is a work in progress so dont be surprised if the nostr intergration still dont work as expected

[KKA11010]

@swedishfrenchpress Actually I like both and its hard for me to decide :) but we should make a decision asap so we can mark the dark theme design as done and move forward. After thinking more about it, I would prefer B even tho it introduces more changes to the current design.

[swedishfrenchpress]

I've had time to sit on it and get some feedback during the hackday. B is the clear winner and I think it's the way to go for menu items / input fields going forward. I've updated the "production ready" Figma page to match this style.