From 6c72095788c776173c955c0f76494e9994822640 Mon Sep 17 00:00:00 2001
From: Nitant Makwana <nmakwana496@gmail.com>
Date: Sat, 6 Jan 2024 15:38:27 +0530
Subject: [PATCH 1/2] Resolved Issue [#1742] Implemented MUI Tooltip for the
 UserAvatar component, displays the user's name on hover.

---
 src/components/UserAvatar.js | 56 ++++++++++++++++++++----------------
 1 file changed, 31 insertions(+), 25 deletions(-)

diff --git a/src/components/UserAvatar.js b/src/components/UserAvatar.js
index cb0fa4c89..ba1099292 100644
--- 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>
   );
 }
 

From 471d4b01f702338b20cae332228e08975617ab2c Mon Sep 17 00:00:00 2001
From: Nitant Makwana <nmakwana496@gmail.com>
Date: Tue, 9 Jan 2024 13:32:25 +0530
Subject: [PATCH 2/2] Resolved ESlint error

---
 src/components/UserAvatar.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/UserAvatar.js b/src/components/UserAvatar.js
index ba1099292..585543a0e 100644
--- a/src/components/UserAvatar.js
+++ b/src/components/UserAvatar.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import { Box, Link, Avatar, Typography, Tooltip } from '@mui/material';
 
 function UserAvatar({ auth }) {