Resolved Issue [#1742] Implemented MUI Tooltip for the UserAvatar com…

…ponent, displays the user's name on hover.
Greenstand · Jan 6, 2024 · 6c72095 · 6c72095
1 parent 509c2ca
commit 6c72095
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/src/components/UserAvatar.js b/src/components/UserAvatar.js
@@ -1,40 +1,46 @@
-import { Box, Link, Avatar, Typography } from '@mui/material';
+import React from 'react';
+import { Box, Link, Avatar, Typography, Tooltip } from '@mui/material';
 
 function UserAvatar({ auth }) {
   if (!auth?.isAuthenticated) {
     return null;
   }
+
+  const userName = auth?.user?.profile.preferred_username[0] || null;
+
   return (
-    <Box>
-      <Link
-        href="https://dev-k8s.treetracker.org/keycloak/realms/treetracker/account/#/personal-info"
-        target="_blank"
-        rel="noopener noreferrer"
-        sx={{
-          color: ({ palette }) => palette.text.primary,
-        }}
-      >
-        <Avatar
+    <Tooltip title={userName} arrow>
+      <Box>
+        <Link
+          href="https://dev-k8s.treetracker.org/keycloak/realms/treetracker/account/#/personal-info"
+          target="_blank"
+          rel="noopener noreferrer"
           sx={{
-            width: 24,
-            height: 24,
-            background: ({ palette }) => palette.background.greenGradient,
+            color: ({ palette }) => palette.text.primary,
           }}
         >
-          <Typography
-            variant="caption"
+          <Avatar
             sx={{
-              textTransform: 'uppercase',
-              fontSize: 16,
-              textDecoration: 'none',
-              color: ({ palette }) => palette.text.contrast,
+              width: 24,
+              height: 24,
+              background: ({ palette }) => palette.background.greenGradient,
             }}
           >
-            {auth?.user?.profile.preferred_username[0] || null}
-          </Typography>
-        </Avatar>
-      </Link>
-    </Box>
+            <Typography
+              variant="caption"
+              sx={{
+                textTransform: 'uppercase',
+                fontSize: 16,
+                textDecoration: 'none',
+                color: ({ palette }) => palette.text.contrast,
+              }}
+            >
+              {userName}
+            </Typography>
+          </Avatar>
+        </Link>
+      </Box>
+    </Tooltip>
   );
 }