From 0e4e9bcf686bba1dc1b708bae3f7f16cfc0a65c6 Mon Sep 17 00:00:00 2001 From: matmertz25 <40722304+matmertz25@users.noreply.github.com> Date: Thu, 1 Apr 2021 06:14:49 -0700 Subject: [PATCH] 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 --- src/App.tsx | 59 +---------------------- src/components/CashoutModal.tsx | 40 +++++++++++----- src/components/SideBar.tsx | 1 + src/index.css | 8 ++++ src/layout/Dashboard.tsx | 1 - src/pages/accounting/ChequebookTable.tsx | 28 +++++------ src/theme.tsx | 60 ++++++++++++++++++++++++ 7 files changed, 113 insertions(+), 84 deletions(-) create mode 100644 src/theme.tsx diff --git a/src/App.tsx b/src/App.tsx index 7e5e6a7..1162e77 100644 --- a/src/App.tsx +++ b/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'); diff --git a/src/components/CashoutModal.tsx b/src/components/CashoutModal.tsx index f4abb4c..7b21c05 100644 --- a/src/components/CashoutModal.tsx +++ b/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(false); + const [peerId, setPeerId] = React.useState(''); + const [loadingCashout, setLoadingCashout] = React.useState(false); + const [showToast, setToastVisibility] = React.useState(false); + const [toastContent, setToastContent] = React.useState(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(Successfully cashed out cheque. Transaction + + ) }) .catch(error => { - handleToast('Error with cashout') + handleToast(Error with cashout) + }) + .finally(() => { + setLoadingCashout(false) }) } else { - handleToast('Peer Id invalid') + handleToast(Peer Id invalid) } }; - const handleToast = (text: string) => { + const handleToast = (text: JSX.Element) => { setToastContent(text) setToastVisibility(true); setTimeout( @@ -61,6 +74,11 @@ export default function DepositModal() { /> Cashout Cheque + {loadingCashout ? + + + + : 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)} /> - + }