frontend: revamp send confirm dialog / view #2863
Conversation
shonsirsha
force-pushed
the
frontend-revamp-send-summary
branch
3 times, most recently
from
0694e58
to
68c0880
Compare
shonsirsha
force-pushed
the
frontend-revamp-send-summary
branch
from
68c0880
to
8a90c48
Compare
frontends/web/src/routes/account/send/components/confirm/confirm.module.css
Show resolved
Hide resolved
| } | ||
|
|
||
| .confirmationItemWrapper { | ||
| align-items: center; |
There was a problem hiding this comment.
please change so that the left and right numbers are both on the same text base line regardless of the fontsize (currently left value uses bigger font-size).
| align-items: center; | |
| align-items: baseline; |
| } | ||
|
|
||
| .totalWrapper { | ||
| align-items: center; |
There was a problem hiding this comment.
| align-items: center; | |
| align-items: baseline; |
| const canShowTotalFiatValue = (proposedTotal && proposedTotal.conversions) && proposedTotal.conversions[fiatUnit]; | ||
|
|
||
|
|
||
| return <View fullscreen> |
There was a problem hiding this comment.
tiny style nit:
| return <View fullscreen> | |
| return ( | |
| <View fullscreen> |
| <div className={style.confirmItem}> | ||
| <label>{t('button.send')}</label> | ||
| <div className={style.confirmationItemWrapper}> | ||
| <p className={`${style.valueOriginalLarge}`}> |
There was a problem hiding this comment.
| <p className={`${style.valueOriginalLarge}`}> | |
| <p className={style.valueOriginalLarge}> |
| {/*Selected UTXOs*/} | ||
| { | ||
| hasSelectedUTXOs && ( | ||
| <div className={[style.confirmItem].join(' ')}> |
There was a problem hiding this comment.
| <div className={[style.confirmItem].join(' ')}> | |
| <div className={style.confirmItem}> |
|
|
||
|
|
||
| const FiatValue = ({ baseCurrencyUnit, amount }: TFiatValueProps) => { | ||
| return <p className={style.fiatValue}> |
There was a problem hiding this comment.
style nit:
| return <p className={style.fiatValue}> | |
| return ( | |
| <p className={style.fiatValue}> |
shonsirsha
force-pushed
the
frontend-revamp-send-summary
branch
2 times, most recently
from
7a8b168
to
d3c6c7c
Compare
|
Thanks! PTAL @thisconnect |
|
Screenshots for second commit (design change; font size & text colour). 
|
|
|
||
| .bitBoxContainer img { | ||
| max-width: 220px; | ||
| } |
There was a problem hiding this comment.
nit: I would just use the device image as is, without this max width, unless it is really necessary for some reason.
frontends/web/src/routes/account/send/components/confirm/confirm.module.css
Show resolved
Hide resolved
| .bitBoxContainer img { | ||
| padding-right: 16px; | ||
| max-width: 190px; | ||
| } |
There was a problem hiding this comment.
We use this graphic in different places, this could make sense in all other places, but lets discuss with @jadzeidan first.
|
|
||
|
|
||
| return ( | ||
| <View fullscreen> |
There was a problem hiding this comment.
On desktop the content is a bit wide. I think we should limit to width="740px" here (there is already width prop that we use in many places).
I came up with 740px as it looks ok and should work with German banner translation, but ofc this depends how it is translated.
I'll post a screenshot somewhere in dm..
shonsirsha
force-pushed
the
frontend-revamp-send-summary
branch
from
07e5128
to
301bab5
Compare
Using `View fullscreen` instead of WaitDialog for bb02 and UI improvement in general in order to improve UX (easier to read).
shonsirsha
force-pushed
the
frontend-revamp-send-summary
branch
from
301bab5
to
f1aa65d
Compare
Using
View fullscreeninstead of WaitDialog and UI improvement in general in order to improve UX (easier to read).