UI Polishing

[rodvar]

Prior to release we need to fix all the small nuances we left aside during the complex functionality implementation on development.
This is normally referred by the team as the "polishing stage"

General guidelines

• Maintain a consistent communication. E.g. same type of buttons should have the same size, spacing, padding ,etc. Look the same so the user understand is our app action button without even thinking. Same goes for every UI component

Specific comments per screen / UI component

Offerbook (market list)

• Add Button (+) -> 2 issues, should be more rounded (circle like) and the "+" is not very visible, probably good to replace with a + white asset

Offers (selected market)

• Add Button (+) is missing (it should show the workflow skipping the "select currency" because its already selected)
• bug: Sell to / Buy From selector overlaps end of the component when buy from is selected

Offer card

• bug: misplacement of elements, language should be anchored to bottom left w/ padding, payment methods should be anchored to bottom right w/ padding, overall spacing is not consistent across offers

Create Offer

• how To build reputation?: Learn how to build reputation button does nothing, should open browser to corresponding bisq2 wiki
• Amount: Several minor UI issues with paddings (subtitles too compressed), selector not covering "Fixed amount" text when selected,
• Amount: Range amount gets out of aligment with the most inflationary currencies (because they need more text and the space is not fixated). It should have a fix space and reduce the font size to make it fit
• Currency: Search does not work (cannot write anything in the search box)

Trade Flow: payment method

• Fiat transfer currency text is hardcoded to USD, should use the selected currency by the user
• pre title "Step x/3" and title spacing too shallow

TODO (completeme with a full list)