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>

src/App.tsx

@@ -2,12 +2,11 @@ import React, { useEffect, useState } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import './App.css';
 
-import { createMuiTheme } from '@material-ui/core/styles';
 import { ThemeProvider } from '@material-ui/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
 import BaseRouter from './routes/routes';
-
+import { lightTheme, darkTheme } from './theme';
 
 declare global {
   interface Window {
@@ -16,62 +15,6 @@ declare global {
   }
 }
 
-const lightTheme = createMuiTheme({
-  palette: {
-    type: "light",
-    background: {
-      default: '#fafafa',
-    },
-    primary: {
-      main: '#6a6a6a',
-    },
-    secondary: {
-      main: '#333333',
-    },
-  },
-  typography: {
-    fontFamily: [
-      'Work Sans',
-      'Montserrat',
-      'Nunito',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif'
-    ].join(','),
-  }
-});
-
-const darkTheme = createMuiTheme({
-  palette: {
-    type: "dark",
-    background: {
-      default: '#0d1117', //'#111827',
-      paper: '#161b22', //'#1f2937',
-    },
-    primary: {
-      // light: will be calculated from palette.primary.main,
-      main: '#dd7700' //'#3f51b5',
-      // dark: will be calculated from palette.primary.main,
-      // contrastText: will be calculated to contrast with palette.primary.main
-    },
-    secondary: {
-      main: '#1f2937',
-    },
-  },
-  typography: {
-    fontFamily: [
-      'Work Sans',
-      'Montserrat',
-      'Nunito',
-      'Roboto',
-      '"Helvetica Neue"',
-      'Arial',
-      'sans-serif'
-    ].join(','),
-  }
-});
-
 
 function App() {
   const [themeMode, toggleThemeMode] = useState('light');

src/components/CashoutModal.tsx

@@ -6,16 +6,18 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
-import { Snackbar } from '@material-ui/core';
+import { Snackbar, Container, CircularProgress } from '@material-ui/core';
 
 import { beeDebugApi } from '../services/bee';
 
-export default function DepositModal() {
-  const [open, setOpen] = React.useState(false);
-  const [peerId, setPeerId] = React.useState('');
+import EthereumAddress from './EthereumAddress';
 
-  const [showToast, setToastVisibility] = React.useState(false);
-  const [toastContent, setToastContent] = React.useState('');
+export default function DepositModal() {
+  const [open, setOpen] = React.useState<boolean>(false);
+  const [peerId, setPeerId] = React.useState('');
+  const [loadingCashout, setLoadingCashout] = React.useState<boolean>(false);
+  const [showToast, setToastVisibility] = React.useState<boolean>(false);
+  const [toastContent, setToastContent] = React.useState<JSX.Element | null>(null);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -27,20 +29,31 @@ export default function DepositModal() {
 
   const handleCashout = () => {
     if (peerId) {
+        setLoadingCashout(true)
         beeDebugApi.chequebook.peerCashout(peerId)
         .then(res => {
             setOpen(false);
-            handleToast(`Successfully cashed out cheque. Transaction ${res.data.transactionHash}`)
+            handleToast(<span>Successfully cashed out cheque. Transaction 
+              <EthereumAddress
+              hideBlockie
+              transaction
+              address={res.data.transactionHash}
+              network={'goerli'}
+              />
+            </span>)
         })
         .catch(error => {
-            handleToast('Error with cashout')
+          handleToast(<span>Error with cashout</span>)
+        })
+        .finally(() => {
+          setLoadingCashout(false)
         })
     } else {
-        handleToast('Peer Id invalid')
+        handleToast(<span>Peer Id invalid</span>)
     }
   };
 
-  const handleToast = (text: string) => {
+  const handleToast = (text: JSX.Element) => {
     setToastContent(text)
     setToastVisibility(true);
     setTimeout(
@@ -61,6 +74,11 @@ export default function DepositModal() {
         />
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
         <DialogTitle id="form-dialog-title">Cashout Cheque</DialogTitle>
+        {loadingCashout ?
+          <Container style={{textAlign:'center', padding:'50px'}}>
+              <CircularProgress />
+          </Container>
+          :
         <DialogContent>
           <DialogContentText style={{marginTop: '20px'}}>
             Specify the peer Id of the peer you would like to cashout.
@@ -74,7 +92,7 @@ export default function DepositModal() {
             fullWidth
             onChange={(e) => setPeerId(e.target.value)}
           />
-        </DialogContent>
+        </DialogContent>}
         <DialogActions>
           <Button onClick={handleClose} color="primary">
             Cancel

src/components/SideBar.tsx

@@ -68,6 +68,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     activeSideBarItem: {
       borderLeft: '4px solid #dd7700',
+      backgroundColor: 'inherit !important'
     },
     toolbar: theme.mixins.toolbar,
   }),

src/index.css

@@ -1,4 +1,6 @@
 body {
+  height: 100vh;
+  min-height: 100vh;
   margin: 0;
   font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -7,6 +9,12 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+#root {
+  height: 100%;
+  min-height: 100%;
+  overflow-y: auto !important;
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;

src/layout/Dashboard.tsx

@@ -13,7 +13,6 @@ const useStyles = makeStyles((theme: Theme) =>
     toolbar: theme.mixins.toolbar,
     content: {
       marginLeft: '240px',
-      marginTop: '64px',
       flexGrow: 1,
       backgroundColor: theme.palette.background.default,
       padding: theme.spacing(3),

src/pages/accounting/ChequebookTable.tsx

@@ -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">

src/theme.tsx

@@ -0,0 +1,60 @@
+import { createMuiTheme } from '@material-ui/core/styles';
+
+declare module '@material-ui/core/styles/createPalette' {
+  interface TypeBackground {
+    appBar: string
+  }
+}
+
+export const lightTheme = createMuiTheme({
+    palette: {
+      type: "light",
+      background: {
+        default: '#fafafa',
+      },
+      primary: {
+        main: '#6a6a6a',
+      },
+      secondary: {
+        main: '#333333',
+      },
+    },
+    typography: {
+      fontFamily: [
+        'Work Sans',
+        'Montserrat',
+        'Nunito',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif'
+      ].join(','),
+    }
+});
+  
+export const darkTheme = createMuiTheme({
+    palette: {
+      type: "dark",
+      background: {
+        default: '#0d1117',
+        paper: '#161b22',
+      },
+      primary: {
+        main: '#dd7700',
+      },
+      secondary: {
+        main: '#1f2937',
+      },
+    },
+    typography: {
+      fontFamily: [
+        'Work Sans',
+        'Montserrat',
+        'Nunito',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif'
+      ].join(','),
+    }
+});