Tooltips

package.json

@@ -36,6 +36,8 @@
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
     "react-google-charts": "^3.0.15",
+    "react-hotkeys-hook": "^3.4.7",
+    "react-keyboard": "^1.0.10",
     "react-qr-code": "^2.0.15",
     "react-redux": "^8.0.5",
     "react-scripts": "^5.0.1",
@@ -75,5 +77,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2"
   }
 }

src/components/navbars/appNavBar.tsx

@@ -10,6 +10,7 @@ import {
     AppBar,
     Toolbar,
     Typography,
+    Tooltip,
     // useMediaQuery,
     // useTheme
 } from '@mui/material';
@@ -59,9 +60,11 @@ export default function AppNavBar(props) {
                         <Grid container alignItems="center" justifyContent="space-between" sx={{ width: '100%' }}>
                             {/* Left Section: Menu Icon and Title */}
                             <Grid item sx={{ display: 'flex', alignItems: 'center' }}>
-                                <IconButton edge="start" sx={{ color: 'white' }} aria-label="menu" onClick={toggleDrawer(true)}>
-                                    <MenuIcon />
-                                </IconButton>
+                                <Tooltip title = "Menu">
+                                    <IconButton edge="start" sx={{ color: 'white' }} aria-label="menu" onClick={toggleDrawer(true)}>
+                                        <MenuIcon />
+                                    </IconButton>
+                                </Tooltip>
                                 <Drawer anchor="left" open={isDrawerOpen} onClose={toggleDrawer(false)}>
                                     <SideBar isRecording={props.isRecording} onClose={toggleDrawer(false)} />
                                 </Drawer>
@@ -94,4 +97,4 @@ export default function AppNavBar(props) {
             </AppBar>
         </ThemeProvider>
     );
-}
+}

src/components/navbars/topbar/listening.tsx

@@ -5,36 +5,36 @@ import { ControlStatus } from '../../../react-redux&middleware/redux/typesImport
 import Theme from '../../theme'
 import * as React from 'react';
 
-
    export default function CustomizedMenus(props) {
     console.log(Theme())
      const dispatch = useDispatch()
+
 
      let controlStatus = useSelector((state: RootState) => {
           return state.ControlReducer as ControlStatus;
      });
 
-     const handleClick = (event: React.KeyboardEvent | React.MouseEvent) => {
+     const handleClick = (event: React.KeyboardEvent | React.MouseEvent | KeyboardEvent) => {
           controlStatus.listening = !controlStatus.listening
           dispatch({type: 'FLIP_RECORDING', payload: controlStatus})
-     }
+     } 
+
      const {myTheme} = Theme()
 
      // color "primary" comes from Theme()
      return (
-       <div>
-        <ThemeProvider theme={myTheme}>
-          <Tooltip title = 
-            {props.listening === false ? "Begin Listening" : "Pause Listening"}>
-            <IconButton color="primary" onClick={handleClick}>
-              {props.listening ? 
-                <MicIcon color="primary" fontSize="large"/> : 
-                <MicOffIcon color="primary" fontSize="large"/>
-              }
-            </IconButton>
-          </Tooltip>
-         </ThemeProvider>
-
-       </div>
+        <div>
+            <ThemeProvider theme={myTheme}>
+                    <Tooltip title = 
+                        {props.listening === false ? "Begin Listening" : "Pause Listening"}>
+                        <IconButton color="primary" onClick={handleClick}>
+                            {props.listening ? 
+                                <MicIcon color="primary" fontSize="large"/> : 
+                                <MicOffIcon color="primary" fontSize="large"/>
+                            }
+                        </IconButton>
+                    </Tooltip>
+            </ThemeProvider>
+        </div>
      );
    }