marigold-dev / tzportal

Layer 1 <-> Layer 2 exchange application for DEKU and SCORU
1 stars 3 forks source link

Mobile ux UI #17

Closed zamrokk closed 1 year ago

zamrokk commented 2 years ago

listing here improvements

zamrokk commented 2 years ago

while displaying on iphone view

image

zamrokk commented 2 years ago

combobox weird display on colors + we should have a "_blank" when clicking on the links

image

zamrokk commented 2 years ago

When connected, the address is very big and connect well fit on the page

image

zamrokk commented 2 years ago

It should be better to gather all in the app icon

image

zamrokk commented 2 years ago

it is too small

image

zamrokk commented 2 years ago

For the mobile version, we should be able to fit all info on a single page without being forced to scroll down. Even removing the footer "Powered by Marigold" if necessaey

image

zamrokk commented 2 years ago

Optimism mobile version as example (even if they have less info to display)

image

vanessamontesb commented 2 years ago

Updated:

Screen Shot 2022-09-08 at 4 23 00 PM Screen Shot 2022-09-08 at 2 26 56 PM Screen Shot 2022-09-08 at 2 27 03 PM Screen Shot 2022-09-08 at 2 27 09 PM Screen Shot 2022-09-08 at 3 24 05 PM
zamrokk commented 2 years ago

image

border square vs smooth ... ?

I think we should just have square fullwith with transparent % (like this we see a bit the planet on bakcground)

zamrokk commented 2 years ago

image

separate with a line "apps" from "documentation" items. Add a small title to each section. On click do a "_blank" , don't do fored redirection, just open a new tab

zamrokk commented 2 years ago

still not fitting in 1 page

image

remove the padding of menu white underline item

zamrokk commented 2 years ago

Claim should look like the other pages , full screen, no border left or right, we need maximum wifth to displau max information

image

zamrokk commented 2 years ago

is it possible onHover to display the title of the menu items ? It could help the user

zamrokk commented 2 years ago

deposit and withdraw page does not fit on screen without scrolling ...

image

also I have lost a part of the components on bottom, see the destop version here

image

zamrokk commented 1 year ago

desktop frames not having same width (why L1 Claim is different?)

image image

zamrokk commented 1 year ago

Can you make a pending animation when amount are fetching ?

image

meaning, when undefined, then replace it by animated skeleton https://mui.com/material-ui/react-skeleton/

zamrokk commented 1 year ago

The same way titles are done here image

First part is "L2 network" Second parts are "L1 account" & "L2 account"

image

zamrokk commented 1 year ago

not aligned

image

vanessamontesb commented 1 year ago

Updated

Screen Shot 2022-09-22 at 3 46 04 PM Screen Shot 2022-09-22 at 3 46 09 PM Screen Shot 2022-09-22 at 5 15 55 PM
zamrokk commented 1 year ago

image

zamrokk commented 1 year ago

alignment still not ok L1 claim is still not centered like all other frames (too on the left side)

image

image

zamrokk commented 1 year ago

Menu almost ok, but "L2 account" has to be under

image