feat: updated the postage stamps page design (#217)

* feat: updated the settings page design

* chore: removed unused dependencies

src/pages/stamps/CreatePostageStampModal.tsx

@@ -111,7 +111,7 @@ export default function FormDialog({ label }: Props): ReactElement {
     >
       {({ submitForm, isValid, isSubmitting, values }) => (
         <Form>
-          <Button variant="outlined" color="primary" onClick={handleClickOpen}>
+          <Button variant="contained" onClick={handleClickOpen}>
             {label || 'Buy Postage Stamp'}
             {isSubmitting && <CircularProgress size={24} className={classes.buttonProgress} />}
           </Button>
@@ -138,12 +138,11 @@ export default function FormDialog({ label }: Props): ReactElement {
               <Field component={TextField} name="label" label="Label" fullWidth className={classes.field} />
             </DialogContent>
             <DialogActions>
-              <Button onClick={handleClose} color="primary">
+              <Button onClick={handleClose} variant="contained">
                 Cancel
               </Button>
               <div className={classes.wrapper}>
                 <Button
-                  color="primary"
                   disabled={isSubmitting || !isValid || !values.amount || !values.depth}
                   type="submit"
                   variant="contained"

src/pages/stamps/StampsTable.tsx

@@ -1,53 +1,25 @@
-import { Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@material-ui/core'
-import { makeStyles } from '@material-ui/core/styles'
 import type { ReactElement } from 'react'
-import ClipboardCopy from '../../components/ClipboardCopy'
-import PeerDetailDrawer from '../../components/PeerDetail'
 import { EnrichedPostageBatch } from '../../providers/Stamps'
+import ExpandableList from '../../components/ExpandableList'
+import ExpandableListItem from '../../components/ExpandableListItem'
+import ExpandableListItemKey from '../../components/ExpandableListItemKey'
 
-const useStyles = makeStyles({
-  table: {
-    minWidth: 650,
-  },
-  values: {
-    textAlign: 'right',
-    fontFamily: 'monospace, monospace',
-  },
-})
 interface Props {
   postageStamps: EnrichedPostageBatch[] | null
 }
 
 function StampsTable({ postageStamps }: Props): ReactElement | null {
   if (postageStamps === null) return null
-  const classes = useStyles()
 
   return (
-    <TableContainer component={Paper}>
+    <ExpandableList label="Postage Stamps" defaultOpen>
-      <Table className={classes.table} size="small" aria-label="Balances Table">
+      {postageStamps.map(({ batchID, usageText }) => (
-        <TableHead>
+        <ExpandableList key={batchID} label={`${batchID.substr(0, 8)}[…]`} level={1} info={`${usageText} (used)`}>
-          <TableRow>
+          <ExpandableListItemKey label="Batch ID" value={batchID} />
-            <TableCell>Batch ID</TableCell>
+          <ExpandableListItem label="Usage" value={usageText} />
-            <TableCell align="right">Usage</TableCell>
+        </ExpandableList>
-          </TableRow>
+      ))}
-        </TableHead>
+    </ExpandableList>
-        <TableBody>
-          {postageStamps.map(({ batchID, usageText }) => (
-            <TableRow key={batchID}>
-              <TableCell>
-                <div style={{ display: 'flex' }}>
-                  <small>
-                    <PeerDetailDrawer peerId={batchID} />
-                  </small>
-                  <ClipboardCopy value={batchID} />
-                </div>
-              </TableCell>
-              <TableCell className={classes.values}>{usageText}</TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
   )
 }
 

src/pages/stamps/index.tsx

@@ -1,26 +1,21 @@
 import { ReactElement, useContext, useEffect } from 'react'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { createStyles, makeStyles } from '@material-ui/core/styles'
 import { Container, CircularProgress } from '@material-ui/core'
 
 import StampsTable from './StampsTable'
-import TroubleshootConnectionCard from '../../components/TroubleshootConnectionCard'
 import CreatePostageStampModal from './CreatePostageStampModal'
 
 import { Context } from '../../providers/Stamps'
-import { Context as BeeContext } from '../../providers/Bee'
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     root: {
       width: '100%',
       display: 'grid',
-      rowGap: theme.spacing(2),
     },
     actions: {
       display: 'flex',
       width: '100%',
-      columnGap: theme.spacing(1),
-      rowGap: theme.spacing(1),
       flex: '0 1 auto',
       flexWrap: 'wrap',
       alignItems: 'center',
@@ -30,8 +25,6 @@ const useStyles = makeStyles((theme: Theme) =>
 
 export default function Accounting(): ReactElement {
   const classes = useStyles()
-
-  const beeContext = useContext(BeeContext)
   const { stamps, isLoading, error, start, stop } = useContext(Context)
   useEffect(() => {
     start()
@@ -39,16 +32,6 @@ export default function Accounting(): ReactElement {
     return () => stop()
   }, [])
 
-  if (beeContext.isLoading) {
-    return (
-      <Container style={{ textAlign: 'center', padding: '50px' }}>
-        <CircularProgress />
-      </Container>
-    )
-  }
-
-  if (!beeContext.status.all) return <TroubleshootConnectionCard />
-
   return (
     <div className={classes.root}>
       {error && (