fix: Setting explicit Typography components to fix invalid DOM (#25)

* fix: Setting explicit Typography components to fix invalid DOM

Typography, by default, uses <p> as it's underlying component. When used
to embed other components it resulted in a DOM errors like: "<p> cannot appear
as descendant of <p>"... and more.

fix: Linting

* chore: apply suggestions from code review

Co-authored-by: Vojtech Simetka <vojtech@simetka.cz>
This commit is contained in:
Andrew LeTourneau
2021-03-29 03:23:12 -05:00
committed by GitHub
parent 0cab024b69
commit 325a59098e
15 changed files with 37 additions and 48 deletions
@@ -24,18 +24,18 @@ export default function PeerConnection(props: any) {
</div>
<div style={{display:'flex'}}>
<div style={{marginRight:'30px'}}>
<Typography variant="subtitle1" gutterBottom color="textSecondary">
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Connected Peers</span>
</Typography>
<Typography variant="h5" component="h2">
<Typography component="h2" variant="h5">
{ props.nodeTopology.connected }
</Typography>
</div>
<div>
<Typography variant="subtitle1" gutterBottom color="textSecondary">
<Typography component="div" variant="subtitle1" gutterBottom color="textSecondary">
<span>Discovered Nodes</span>
</Typography>
<Typography variant="h5" component="h2">
<Typography component="h2" variant="h5">
{ props.nodeTopology.population }
</Typography>
</div>