reuterShawn/remnantchat
1
0
Fork 0
forked from Shiloh/remnantchat
Code Pull Requests Activity

feat(ConnectionTestResults): [closes #124] explain connection types

Browse Source
This commit is contained in:
Jeremy Kahn 2023-06-17 14:51:54 -05:00
parent 6c5c4129f1
commit ec9c9f61ce
1 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/Shell/ConnectionTestResults.tsx
View File

@ -1,4 +1,4 @@
import { Typography } from '@mui/material' import { Tooltip, Typography } from '@mui/material'
import Circle from '@mui/icons-material/FiberManualRecord' import Circle from '@mui/icons-material/FiberManualRecord'
import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest' import { ConnectionTestResults as IConnectionTestResults } from './useConnectionTest'
@ -11,39 +11,45 @@ export const ConnectionTestResults = ({
}: ConnectionTestResultsProps) => { }: ConnectionTestResultsProps) => {
if (hasHost && hasRelay) { if (hasHost && hasRelay) {
return ( return (
<Typography variant="subtitle2"> <Tooltip title="Connections can be established with all peers that also have a full network connection.">
<Typography <Typography variant="subtitle2">
component="span" <Typography
sx={theme => ({ color: theme.palette.success.main })} component="span"
> sx={theme => ({ color: theme.palette.success.main })}
<Circle sx={{ fontSize: 'small' }} /> >
</Typography>{' '} <Circle sx={{ fontSize: 'small' }} />
Full network connection </Typography>{' '}
</Typography> Full network connection
</Typography>
</Tooltip>
) )
} else if (hasHost) { } else if (hasHost) {
return ( return (
<Typography variant="subtitle2"> <Tooltip title="Relay server is unavailable. Connections can only be established when a relay server is not needed for either peer.">
<Typography <Typography variant="subtitle2">
component="span" <Typography
sx={theme => ({ color: theme.palette.warning.main })} component="span"
> sx={theme => ({ color: theme.palette.warning.main })}
<Circle sx={{ fontSize: 'small' }} /> >
</Typography>{' '} <Circle sx={{ fontSize: 'small' }} />
Partial network connection </Typography>{' '}
</Typography> Partial network connection
</Typography>
</Tooltip>
) )
} else { } else {
return ( return (
<Typography variant="subtitle2"> <Tooltip title="Pairing server is unavailable. Peer connections cannot be established.">
<Typography <Typography variant="subtitle2">
component="span" <Typography
sx={theme => ({ color: theme.palette.error.main })} component="span"
> sx={theme => ({ color: theme.palette.error.main })}
<Circle sx={{ fontSize: 'small' }} /> >
</Typography>{' '} <Circle sx={{ fontSize: 'small' }} />
No network connection </Typography>{' '}
</Typography> No network connection
</Typography>
</Tooltip>
) )
} }
} }