feat: status page redesign (#214)

* feat: initial rewrite without status indicators * feat: status icon as a component and add to the node setup * feat: added input list item component * feat: improved the topology status info * fix: disabled state of the buttons * chore: removed unused components * chore: remove debug console log * fix: deposit modal helper text
2021-10-06 18:38:54 +02:00
parent ecbc116475
commit b666cd2657
20 changed files with 453 additions and 636 deletions
@@ -0,0 +1,103 @@
+import { ReactElement, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import Collapse from '@material-ui/core/Collapse'
+import { ListItem, Typography, Grid, IconButton, InputBase, Button } from '@material-ui/core'
+import { Edit, Minus, RotateCcw, Check } from 'react-feather'
+
+import ExpandableListItemActions from './ExpandableListItemActions'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    header: {
+      backgroundColor: theme.palette.background.paper,
+      marginBottom: theme.spacing(0.25),
+      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+      wordBreak: 'break-word',
+    },
+    headerOpen: {
+      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+    },
+    copyValue: {
+      cursor: 'pointer',
+      padding: theme.spacing(1),
+      borderRadius: 0,
+      '&:hover': {
+        backgroundColor: '#fcf2e8',
+        color: theme.palette.primary.main,
+      },
+    },
+    content: {
+      marginTop: theme.spacing(1),
+      marginBottom: theme.spacing(1),
+    },
+    keyMargin: {
+      marginRight: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  label: string
+  value: string
+  onConfirm: (value: string) => void
+}
+
+export default function ExpandableListItemKey({ label, value, onConfirm }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState(false)
+  const [inputValue, setInputValue] = useState(value)
+  const toggleOpen = () => setOpen(!open)
+
+  return (
+    <>
+      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+          <Grid container direction="row" justifyContent="space-between" alignItems="center">
+            {label && <Typography variant="body1">{label}</Typography>}
+            <Typography variant="body2">
+              <div>
+                {!open && value}
+                <IconButton size="small" className={classes.copyValue}>
+                  {open ? (
+                    <Minus onClick={toggleOpen} strokeWidth={1} />
+                  ) : (
+                    <Edit onClick={toggleOpen} strokeWidth={1} />
+                  )}
+                </IconButton>
+              </div>
+            </Typography>
+          </Grid>
+          <Collapse in={open} timeout="auto" unmountOnExit>
+            <InputBase
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
+              fullWidth
+              className={classes.content}
+              autoFocus
+            />
+          </Collapse>
+        </Grid>
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <ExpandableListItemActions>
+          <Button
+            variant="contained"
+            disabled={inputValue === value}
+            startIcon={<Check size="1rem" />}
+            onClick={() => onConfirm(inputValue)}
+          >
+            Save
+          </Button>
+          <Button
+            variant="contained"
+            disabled={inputValue === value}
+            startIcon={<RotateCcw size="1rem" />}
+            onClick={() => setInputValue(value)}
+          >
+            Cancel
+          </Button>
+        </ExpandableListItemActions>
+      </Collapse>
+    </>
+  )
+}