add tooltip

package.json

@@ -23,7 +23,10 @@
     "react-scripts": "^5.0.1",
     "react-select": "^5.8.0",
     "sass": "^1.45.0",
-    "web-vitals": "^1.0.1"
+    "web-vitals": "^1.0.1",
+    "@mui/material": "latest",
+    "@emotion/react": "latest",
+    "@emotion/styled": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

src/containers/MenuItem.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { FaAngleDown, FaAngleUp } from "react-icons/fa";
+import { FaAngleDown } from "react-icons/fa";
 import { motion } from 'framer-motion';
 
 const MenuItem = ({ label, icon, onClick, isActive, children, link }) => {

src/containers/TheHeader.js

@@ -3,11 +3,10 @@ import { FaBars } from "react-icons/fa";
 import axios from "axios";
 import { motion } from "framer-motion";
 import { toast } from 'react-hot-toast';
+import { Tooltip } from '@mui/material';
 
 const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
   const [group0State, setGroup0State] = useState(false);
-  const [install, setInstall] = useState(false);
-  const [check, setCheck] = useState(false);
   const [swstate, getState] = useState("noupdates");
 
   const iconVariants = {
@@ -27,8 +26,6 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
         axios
           .get(`${HOST_IP}/api/${API_KEY}/config/swupdate2`)
           .then((result) => {
-            setInstall(result.data["install"]);
-            setCheck(result.data["checkforupdate"]);
             getState(result.data["state"]);
           })
           .catch((error) => {
@@ -106,7 +103,7 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
     else if (state === "noupdates" || state === "unknown") {
       return "No Update";
     }
-    else if (state === "installing"){
+    else if (state === "installing") {
       return "installing..."
     }
   }
@@ -118,11 +115,23 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
     else if (state === "noupdates" || state === "unknown") {
       return "updatebtn check";
     }
-    else if (state === "installing"){
+    else if (state === "installing") {
       return "updatebtn install"
     }
   }
 
+  const getTitleState = (state) => {
+    if (state === "anyreadytoinstall" || state === "allreadytoinstall") {
+      return "Install update";
+    }
+    else if (state === "noupdates" || state === "unknown") {
+      return "Check for update";
+    }
+    else if (state === "installing") {
+      return "Update is installing"
+    }
+  }
+
   return (
     <div className="topbarRight">
       <motion.div
@@ -137,14 +146,15 @@ const TheHeader = ({ HOST_IP, showSidebar, setShowSidebar, API_KEY }) => {
 
       <div className="switchContainer">
         <form className="add-form" onSubmit={(e) => handleupdate(swstate, e)}>
-          <input
-            type="submit"
-            value={getValueState(swstate)}
-            className={getClassState(swstate)}
-          />
+          <Tooltip title={<p style={{ fontSize: "18px" }}>{getTitleState(swstate)}</p>} arrow>
+            <input
+              type="submit"
+              value={getValueState(swstate)}
+              className={getClassState(swstate)}
+            />
+          </Tooltip>
         </form>
       </div>
-
 
       <div className="onbtn">
         <p>Turn all lights {group0State ? "off" : "on"}</p>

src/containers/TheSidebar.js

@@ -1,4 +1,4 @@
-import { MenuItem, SubMenu } from './MenuItem';
+import { SubMenu } from './MenuItem';
 import { memo, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import {