feat: info page redesign (#207)

* feat: info page redesign * style: headers and nesting for expandable lists * style: body typography * chore: bee version check * feat: key list item component * style: hover state for the key displaying component * style: left border on expanded items * fix: word break and splitting for hexstrings divisible by 6 * chore: moved the styles to classes * style: tooltips now have arrow * feat: indicate value has been copied * feat: removed the connectivity table in favor of info page * feat: added health tooltips for connectivity * refactor: simplified the topology into single component * fix: spacing between the bee version and the update button/chip * fix: spacing on devices not supporting rowGap
2021-10-04 12:26:13 +02:00
parent c4c7d9619d
commit 57f5a73f3a
11 changed files with 309 additions and 305 deletions
@@ -0,0 +1,65 @@
+import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
+import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
+import { ExpandLess, ExpandMore } from '@material-ui/icons'
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: '100%',
+      padding: 0,
+      margin: 0,
+      marginTop: theme.spacing(4),
+      '&:first-child': {
+        marginTop: 0,
+      },
+    },
+    rootLevel1: { marginTop: theme.spacing(1) },
+    rootLevel2: { marginTop: theme.spacing(0.5) },
+    header: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    content: {
+      marginTop: theme.spacing(1),
+    },
+  }),
+)
+
+interface Props {
+  children?: ReactNode
+  label: ReactNode
+  level?: 0 | 1 | 2
+  defaultOpen?: boolean
+}
+
+export default function ExpandableList({ children, label, level, defaultOpen }: Props): ReactElement | null {
+  const classes = useStyles()
+  const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
+
+  const handleClick = () => {
+    setOpen(!open)
+  }
+
+  let rootLevelClass = ''
+  let typographyVariant: 'h1' | 'h2' | 'h3' = 'h1'
+
+  if (level === 1) {
+    rootLevelClass = classes.rootLevel1
+    typographyVariant = 'h2'
+  } else if (level === 2) {
+    rootLevelClass = classes.rootLevel2
+    typographyVariant = 'h3'
+  }
+
+  return (
+    <div className={`${classes.root} ${rootLevelClass}`}>
+      <ListItem button onClick={handleClick} className={classes.header}>
+        <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
+        {open ? <ExpandLess /> : <ExpandMore />}
+      </ListItem>
+      <Collapse in={open} timeout="auto" unmountOnExit>
+        <div className={classes.content}>{children}</div>
+      </Collapse>
+    </div>
+  )
+}