From 35c9e26aef189f5572225d98bbc041f2636864be Mon Sep 17 00:00:00 2001
From: AlphaX-Qortal <olaf.wasilewski@gmx.de>
Date: Thu, 27 Feb 2025 10:15:28 +0100
Subject: [PATCH] Add tooltips

---
 src/App.tsx                         | 227 ++++++++++++++++++++++------
 src/components/Chat/ChatOptions.tsx |  73 ++++++++-
 src/components/QMailStatus.tsx      |  32 +++-
 3 files changed, 272 insertions(+), 60 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3453234..176d140 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1547,18 +1547,38 @@ function App() {
             {!isMobile && (
               <>
                 <Spacer height="20px" />
-                <img
-                  src={Logout}
-                  onClick={() => {
-                    logoutFunc();
-                    setIsOpenDrawerProfile(false);
+                <Tooltip
+                  title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LOG OUT</span>} 
+                  placement="left"
+                  arrow
+                  sx={{ fontSize: "24" }}
+                  slotProps={{
+                    tooltip: {
+                      sx: {
+                        color: "#ffffff",
+                        backgroundColor: "#444444",
+                      },
+                    },
+                    arrow: {
+                      sx: {
+                        color: "#444444",
+                      },
+                    },
                   }}
-                  style={{
-                    cursor: "pointer",
-                    width: '20px',
-                    height: 'auto'
-                  }}
-                />
+                >
+                  <img
+                    src={Logout}
+                    onClick={() => {
+                      logoutFunc();
+                      setIsOpenDrawerProfile(false);
+                    }}
+                    style={{
+                      cursor: "pointer",
+                      width: '20px',
+                      height: 'auto'
+                    }}
+                  />
+                </Tooltip>
               </>
             )}
             <Spacer height="20px" />
@@ -1568,38 +1588,98 @@ function App() {
                 setIsSettingsOpen(true);
               }}
             >
-              <SettingsIcon
-                sx={{
-                  color: "rgba(255, 255, 255, 0.5)",
+              <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SETTINGS</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
                 }}
-              />
+              >
+                <SettingsIcon
+                  sx={{
+                    color: "rgba(255, 255, 255, 0.5)",
+                  }}
+                />
+              </Tooltip>
             </ButtonBase>
             <Spacer height="20px" />
             {authenticatedMode === "qort" && (
-              <img
-                onClick={() => {
-                  setAuthenticatedMode("ltc");
+              <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>LITECOIN WALLET</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
                 }}
-                src={ltcLogo}
-                style={{
-                  cursor: "pointer",
-                  width: "20px",
-                  height: "auto",
-                }}
-              />
+              >
+                <img
+                  onClick={() => {
+                    setAuthenticatedMode("ltc");
+                  }}
+                  src={ltcLogo}
+                  style={{
+                    cursor: "pointer",
+                    width: "20px",
+                    height: "auto",
+                  }}
+                />
+              </Tooltip>
             )}
             {authenticatedMode === "ltc" && (
-              <img
-                onClick={() => {
-                  setAuthenticatedMode("qort");
+              <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>QORTAL WALLET</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
                 }}
-                src={qortLogo}
-                style={{
-                  cursor: "pointer",
-                  width: "20px",
-                  height: "auto",
-                }}
-              />
+              >
+                <img
+                  onClick={() => {
+                    setAuthenticatedMode("qort");
+                  }}
+                  src={qortLogo}
+                  style={{
+                    cursor: "pointer",
+                    width: "20px",
+                    height: "auto",
+                  }}
+                />
+              </Tooltip>
             )}
             <Spacer height="20px" />
             <CoreSyncStatus />
@@ -1636,9 +1716,9 @@ function App() {
                  downloadResource,
                  getIndividualUserInfo,
                  isUserBlocked,
-    addToBlockList,
-    removeBlockFromList,
-    getAllBlockedUsers
+                 addToBlockList,
+                 removeBlockFromList,
+                 getAllBlockedUsers
                }}
              >
                  <TaskManager getUserInfo={getUserInfo} />
@@ -1661,30 +1741,82 @@ function App() {
                 })
               }
             }}>
-              <EngineeringIcon sx={{
-                color: 'var(--unread)'
-                 }} />
+              <Tooltip
+                title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MINTING STATUS</span>} 
+                placement="left"
+                arrow
+                sx={{ fontSize: "24" }}
+                slotProps={{
+                  tooltip: {
+                    sx: {
+                      color: "#ffffff",
+                      backgroundColor: "#444444",
+                    },
+                  },
+                  arrow: {
+                    sx: {
+                      color: "#444444",
+                    },
+                  },
+                }}
+              >
+                <EngineeringIcon sx={{ color: 'var(--unread)' }} />
+              </Tooltip>
             </ButtonBase>
           
-           
             <Spacer height="20px" />
             {(desktopViewMode === "apps" || desktopViewMode === "home") && (
                <ButtonBase onClick={()=> {
                 if(desktopViewMode === "apps"){
                   showTutorial('qapps', true)
-  
                 } else {
                   showTutorial('getting-started', true)
-  
                 }
                 }} >
-                  <HelpIcon sx={{
-                color: 'var(--unread)'
-                 }} />
+                  <Tooltip
+                    title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>TUTORIAL</span>} 
+                    placement="left"
+                    arrow
+                    sx={{ fontSize: "24" }}
+                    slotProps={{
+                      tooltip: {
+                        sx: {
+                          color: "#ffffff",
+                          backgroundColor: "#444444",
+                        },
+                      },
+                      arrow: {
+                        sx: {
+                          color: "#444444",
+                        },
+                      },
+                    }}
+                  >
+                    <HelpIcon sx={{ color: 'var(--unread)' }} />
+                  </Tooltip>
                 </ButtonBase>
               )}
             
         <Spacer height="20px" />
+        <Tooltip
+          title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>BACKUP WALLET</span>} 
+          placement="left"
+          arrow
+          sx={{ fontSize: "24" }}
+          slotProps={{
+            tooltip: {
+              sx: {
+                color: "#ffffff",
+                backgroundColor: "#444444",
+              },
+            },
+            arrow: {
+              sx: {
+                color: "#444444",
+              },
+            },
+          }}
+        >
           <img
               onClick={() => {
                 setExtstate("download-wallet");
@@ -1696,6 +1828,7 @@ function App() {
                 width: '20px'
               }}
             />
+        </Tooltip>
             <Spacer height="40px" />
             </Box>
         </AuthenticatedContainerInnerRight>
diff --git a/src/components/Chat/ChatOptions.tsx b/src/components/Chat/ChatOptions.tsx
index 3640bd1..4e7a7d3 100644
--- a/src/components/Chat/ChatOptions.tsx
+++ b/src/components/Chat/ChatOptions.tsx
@@ -6,6 +6,7 @@ import {
   MenuItem,
   Select,
   Typography,
+  Tooltip
 } from "@mui/material";
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import SearchIcon from "@mui/icons-material/Search";
@@ -575,7 +576,27 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
         <ButtonBase onClick={() => {
             setMode("search")
         }}>
-          <SearchIcon />
+          <Tooltip
+            title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>SEARCH</span>} 
+            placement="left"
+            arrow
+            sx={{ fontSize: "24" }}
+            slotProps={{
+              tooltip: {
+                sx: {
+                  color: "#ffffff",
+                  backgroundColor: "#444444",
+                },
+              },
+              arrow: {
+                sx: {
+                  color: "#444444",
+                },
+              },
+            }}
+          >
+            <SearchIcon />
+          </Tooltip>
         </ButtonBase>
         <ButtonBase onClick={() => {
             setMode("default")
@@ -583,9 +604,27 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
             setSelectedMember(0)
             openQManager()
         }}>
-          <InsertLinkIcon sx={{
-            color: 'white'
-          }} />
+          <Tooltip
+            title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MANAGER</span>} 
+            placement="left"
+            arrow
+            sx={{ fontSize: "24" }}
+            slotProps={{
+              tooltip: {
+                sx: {
+                  color: "#ffffff",
+                  backgroundColor: "#444444",
+                },
+              },
+              arrow: {
+                sx: {
+                  color: "#444444",
+                },
+              },
+            }}
+          >
+            <InsertLinkIcon sx={{ color: 'white' }} />
+          </Tooltip>
         </ButtonBase>
         <ContextMenuMentions getTimestampMention={getTimestampMention} groupId={selectedGroup}>
         <ButtonBase onClick={() => {
@@ -593,9 +632,29 @@ export const ChatOptions = ({ messages : untransformedMessages, goToMessage, mem
             setSearchValue('')
             setSelectedMember(0)
         }}>
-          <AlternateEmailIcon sx={{
-            color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white'
-          }} />
+          <Tooltip
+            title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>MENTIONED</span>} 
+            placement="left"
+            arrow
+            sx={{ fontSize: "24" }}
+            slotProps={{
+              tooltip: {
+                sx: {
+                  color: "#ffffff",
+                  backgroundColor: "#444444",
+                },
+              },
+              arrow: {
+                sx: {
+                  color: "#444444",
+                },
+              },
+            }}
+          >
+            <AlternateEmailIcon sx={{
+              color: mentionList?.length > 0 && (!lastMentionTimestamp || lastMentionTimestamp < mentionList[0]?.timestamp) ? 'var(--unread)' : 'white'
+            }} />
+          </Tooltip>
         </ButtonBase>
       
         </ContextMenuMentions>
diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx
index 2787336..cb1642a 100644
--- a/src/components/QMailStatus.tsx
+++ b/src/components/QMailStatus.tsx
@@ -3,7 +3,7 @@ import QMailLogo from '../assets/QMailLogo.png'
 import { useRecoilState } from 'recoil'
 import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global'
 import { isLessThanOneWeekOld } from './Group/QMailMessages'
-import { ButtonBase } from '@mui/material'
+import { ButtonBase, Tooltip } from '@mui/material'
 import { executeEvent } from '../utils/events'
 export const QMailStatus = () => {
      const [lastEnteredTimestamp, setLastEnteredTimestamp] = useRecoilState(qMailLastEnteredTimestampAtom)
@@ -23,7 +23,8 @@ export const QMailStatus = () => {
                             setLastEnteredTimestamp(Date.now())
                         }} style={{
         position: 'relative'
-    }}>{hasNewMail && (
+    }}>
+      {hasNewMail && (
         <div style={{
             position: 'absolute',
             zIndex: 1,
@@ -35,9 +36,28 @@ export const QMailStatus = () => {
             borderRadius: '50%',
             outline: '1px solid white'
         }} />
-    )}<img style={{
-        width: '24px',
-        height: 'auto'
-    }} src={QMailLogo} /></ButtonBase>
+      )}
+      <Tooltip
+        title={<span style={{ color: "white", fontSize: "14px", fontWeight: 700 }}>Q-MAIL</span>} 
+        placement="left"
+        arrow
+        sx={{ fontSize: "24" }}
+        slotProps={{
+          tooltip: {
+            sx: {
+              color: "#ffffff",
+              backgroundColor: "#444444",
+            },
+          },
+          arrow: {
+            sx: {
+              color: "#444444",
+            },
+          },
+        }}
+      >
+        <img style={{ width: '24px', height: 'auto' }} src={QMailLogo} />
+      </Tooltip>
+  </ButtonBase>
   )
 }