[ui] Wallet Screen : Design Changes
prameetc opened this issue · comments
Feature / Issue
The latest design specs require slight modifications to the body of the current UI of the wallet screen. We need to address these changes to match the design in the specifications. Please find the example below.
Keep the rows structure, rather than converting to 'cards', to save time.
The body of the screen is below the title (Wallet) and above the tab bar at bottom.
Pixel-perfect layouts are at in the "Wallets" row, at https://xd.adobe.com/spec/230e899d-f6c5-4936-7539-59dbab1a414d-553f/
The screen uses at 8pt grid. The left/right margins for the wallet entries is 8pt.
The wallets are "cards" in material design ( https://material.io/design/components/cards.html# ). This might seem strange, since they are in a scrolling list, but the idea is that a wallet card could appear in other places beyond the list of wallets, e.g. on a dashboard.
The 3-dot menu in the top-right of the screen is the "more" menu, but we do not have code for it yet. This menu icon should appear on many screens, although the menu changes depending on the screen.
Acceptance criteria
- Update the body of the layout of the Wallet Screen to meet the design specifications. You can find the Wallet screen in
/screens/WalletScreen. - Change the wallet icon shown in the sketch to an icon for the currency, e.g. for ETH and XPAT. You will have to find these icons somewhere in the existing graphics files.
Additional information
There are further updated designs for receiving ETH and XPAT pages respectively that can be considered to be updated at a later stage if desired.
Can you please estimate how long it will take you to fix this issue?
What exactly does the menu do (3 little dots - in the upper right corner)?
@florianlenz This will take only a few hours as they are just modifications. I'm not sure what the dots do, I think @mimetic can provide some light on that. If it's not anything urgent we can omit that.
@mimetic Is there any design for the "Transactions" Page?
@prameetc for now we should just open etherscan.io. https://etherscan.io/address/$ADDRESS just replace the address in the link when opening it
@florianlenz Ok, cool
This can be done by today @kevowevo
@florianlenz Can the needs review label be removed now?
@florianlenz @mimetic Can this be closed now?
@florianlenz The functionality of the 3 dots button at the top has not yet been decided as of now.
Done by #477.