feat: update design of the accounting page (#209)

* feat: update design of the accounting page, fixed the worsed graphical offenders

* chore: button alignment

* chore: removed unused dependency

* chore: buttons are underneath the action

* feat: refactored the peers table to be in line with the new design

* feat: add total uncashed amount and sorting for the peers

* feat: action buttons are now properly aligned

* chore: typo in comment

src/components/CashoutModal.tsx

@@ -7,6 +7,7 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useState, useContext } from 'react'
+import { Zap } from 'react-feather'
 import { Context as SettingsContext } from '../providers/Settings'
 import EthereumAddress from './EthereumAddress'
 
@@ -59,8 +60,8 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
 
   return (
     <div>
-      <Button variant="contained" color="primary" onClick={handleClickOpen} style={{ marginLeft: '7px' }}>
-        Cashout
+      <Button variant="contained" onClick={handleClickOpen} startIcon={<Zap size="1rem" />}>
+        Cash out peer {peerId.substr(0, 8)}[…]
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>