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

src/components/TopologyStats.tsx

@@ -1,64 +1,44 @@
 import type { Topology } from '@ethersphere/bee-js'
-import { Grid } from '@material-ui/core/'
 import type { ReactElement } from 'react'
 import { pickThreshold, ThresholdValues } from '../utils/threshold'
-import StatCard from './StatCard'
+import ExpandableList from './ExpandableList'
+import ExpandableListItem from './ExpandableListItem'
 
-interface RootProps {
+interface Props {
   topology: Topology | null
 }
 
-interface Props extends RootProps {
-  thresholds: ThresholdValues
-}
-
-const TopologyStats = (props: RootProps): ReactElement => {
+const TopologyStats = (props: Props): ReactElement => {
   const thresholds: ThresholdValues = {
     connectedPeers: pickThreshold('connectedPeers', props.topology?.connected || 0),
     population: pickThreshold('population', props.topology?.population || 0),
     depth: pickThreshold('depth', props.topology?.depth || 0),
   }
 
-  return (
-    <>
-      <Indicator {...props} thresholds={thresholds} />
-      <Metrics {...props} thresholds={thresholds} />
-    </>
-  )
-}
-
-const Indicator = ({ thresholds }: Props): ReactElement => {
   const maximumTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.maximumScore, 0)
   const actualTotalScore = Object.values(thresholds).reduce((sum, item) => sum + item.score, 0)
   const percentageText = Math.round((actualTotalScore / maximumTotalScore) * 100) + '%'
 
   return (
-    <div style={{ marginBottom: '20px' }}>
-      <StatCard label="Overall Health Indicator" statistic={percentageText} />
-    </div>
+    <ExpandableList label="Connectivity" defaultOpen>
+      <ExpandableListItem label="Overall Health Indicator" value={percentageText} />
+      <ExpandableListItem
+        label="Connected Peers"
+        value={props.topology?.connected.toString()}
+        tooltip={thresholds.connectedPeers.explanation}
+      />
+      <ExpandableListItem
+        label="Pupulation"
+        value={props.topology?.population.toString()}
+        tooltip={thresholds.population.explanation}
+      />
+      <ExpandableListItem
+        label="Depth"
+        value={props.topology?.depth.toString()}
+        tooltip={thresholds.depth.explanation}
+      />
+    </ExpandableList>
   )
 }
 
-const Metrics = ({ topology, thresholds }: Props): ReactElement => (
-  <Grid container spacing={3} style={{ marginBottom: '20px' }}>
-    <Grid key={1} item xs={12} sm={12} md={6} lg={4} xl={4}>
-      <StatCard
-        label="Connected Peers"
-        statistic={topology?.connected.toString()}
-        tooltip={thresholds.connectedPeers.explanation}
-      />
-    </Grid>
-    <Grid key={2} item xs={12} sm={12} md={6} lg={4} xl={4}>
-      <StatCard
-        label="Population"
-        statistic={topology?.population.toString()}
-        tooltip={thresholds.population.explanation}
-      />
-    </Grid>
-    <Grid key={3} item xs={12} sm={12} md={6} lg={4} xl={4}>
-      <StatCard label="Depth" statistic={topology?.depth.toString()} tooltip={thresholds.depth.explanation} />
-    </Grid>
-  </Grid>
-)
-
 export default TopologyStats