From ec9c9f61cef57aca26a9fee238a7c0e54ce5f061 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sat, 17 Jun 2023 14:51:54 -0500
Subject: [PATCH] feat(ConnectionTestResults): [closes #124] explain connection
 types

---
 .../Shell/ConnectionTestResults.tsx           | 62 ++++++++++---------
 1 file changed, 34 insertions(+), 28 deletions(-)

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