feat: various UI improvements (#36)

* fix: content offset

When the appbar was changed to a `div` the content became offset, this fixes that.

* style: make display of cheques table more readable

* style: restyle sidebar

* fix: content overflow

* chore: split theme into separate file

* feat: show ethereum transaction link for cashout

* feat: make cashout link to etherscan transaction

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
matmertz25
2021-04-01 06:14:49 -07:00
committed by GitHub
parent fc1a8cb0a0
commit 0e4e9bcf68
7 changed files with 113 additions and 84 deletions
+14 -14
View File
@@ -68,34 +68,34 @@ function ChequebookTable(props: IProps) {
<ClipboardCopy value={peerCheque.peer} />
</div>
</TableCell>
<TableCell style={{maxWidth:'200px'}}>
<p style={{marginBottom: '0px', fontFamily: 'monospace, monospace'}}>
{peerCheque.lastreceived?.payout ? ConvertBalanceToBZZ(peerCheque.lastreceived?.payout).toFixed(7).toLocaleString() : '-'}
</p>
<p style={{marginBottom: '0px'}}>
<small>{peerCheque.lastreceived ?
<TableCell style={{maxWidth:'320px'}}>
<p style={{marginBottom: '0px', fontFamily: 'monospace, monospace', display:'flex'}}>
<span style={{whiteSpace: 'nowrap', marginRight:'12px', paddingTop:'3px'}}>
{peerCheque.lastreceived?.payout ?
`${ConvertBalanceToBZZ(peerCheque.lastreceived?.payout).toFixed(7).toLocaleString()} from`
: '-'}
</span>
{peerCheque.lastreceived ?
<EthereumAddress
hideBlockie
truncate
network='goerli'
address={peerCheque.lastreceived.beneficiary}
/> : null}
</small>
</p>
</TableCell>
<TableCell style={{maxWidth:'200px'}}>
<p style={{marginBottom: '0px', fontFamily: 'monospace, monospace'}}>
{peerCheque.lastsent?.payout ? ConvertBalanceToBZZ(peerCheque.lastsent?.payout).toFixed(7).toLocaleString() : '-'}
</p>
<p style={{marginBottom: '0px'}}>
<small>{peerCheque.lastsent ?
<TableCell style={{maxWidth:'320px'}}>
<p style={{marginBottom: '0px', fontFamily: 'monospace, monospace', display:'flex'}}>
<span style={{whiteSpace: 'nowrap', marginRight:'12px', paddingTop:'3px'}}>
{peerCheque.lastsent?.payout ? `${ConvertBalanceToBZZ(peerCheque.lastsent?.payout).toFixed(7).toLocaleString()} to` : '-'}
</span>
{peerCheque.lastsent ?
<EthereumAddress
hideBlockie
truncate
network='goerli'
address={peerCheque.lastsent.beneficiary}
/> : null}
</small>
</p>
</TableCell>
<TableCell align="right">