adds tooltip to theme toggler and corrects the icon displayed while in light/dark themes

Author: Emile Frey

frontend/src/components/Layout/TopBar.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
+import { AppBar, IconButton, Toolbar, Tooltip, Typography } from '@material-ui/core';
 import { APP_NAME } from '../../settings'
 import { AccountCircle } from '@material-ui/icons';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -24,16 +24,18 @@ const useStyles = makeStyles((theme) => ({
 export default function TopBar(props: AppProps) {
   const classes = useStyles();
   const { darkMode, setDarkMode } = useContext(ThemeContext);
-  
+
   return (
     <AppBar position="relative">
       <Toolbar className={props.isAuthenticated ? classes.authToolbar : undefined}>
         <Typography variant="h5" align="center" className={classes.title}>
           {APP_NAME}
         </Typography>
-        <IconButton color="inherit" onClick={() => setDarkMode(!darkMode)} >
-        {darkMode ? <Brightness4Icon/> : <Brightness7Icon />}
-        </IconButton>
+        <Tooltip title={`Toggle light/dark theme`}>
+          <IconButton color="inherit" onClick={() => setDarkMode(!darkMode)} >
+            {darkMode ? <Brightness7Icon /> : <Brightness4Icon />}
+          </IconButton>
+        </Tooltip>
         {props.isAuthenticated && (
           <DropdownMenu dropdownButtonIcon={<AccountCircle />}>
             <div>