From ae803bdc50a05f4cec11f5b6612aa5e0f5aaf008 Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Mon, 9 Sep 2024 12:09:03 +0200
Subject: [PATCH] Added tooltips to EditModeToggle icons and adjusted tooltip
 positioning using Material-UI

---
 components/DataSheet.js      |  3 +--
 components/EditModeToggle.js | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/components/DataSheet.js b/components/DataSheet.js
index a7ce0cf92..cc9ab003a 100644
--- a/components/DataSheet.js
+++ b/components/DataSheet.js
@@ -90,6 +90,7 @@ function DataSheet() {
               </option>
             ))}
           </select>
+          <EditModeToggle />
           <img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 ml-2 cursor-pointer" onClick={handleIconClick} />
         </div>
 
@@ -116,8 +117,6 @@ function DataSheet() {
             POIs
           </label>
         </div>
-
-        <EditModeToggle />
       </div>
     </div>
   );
diff --git a/components/EditModeToggle.js b/components/EditModeToggle.js
index 13c6860fd..3c6053bf1 100644
--- a/components/EditModeToggle.js
+++ b/components/EditModeToggle.js
@@ -1,4 +1,7 @@
 import React, { useState, useEffect } from "react";
+import DesignServicesIcon from "@mui/icons-material/DesignServices";
+import EditOffIcon from "@mui/icons-material/EditOff";
+import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
 
 function EditModeToggle() {
   const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");
@@ -17,9 +20,17 @@ function EditModeToggle() {
   }, []);
 
   return (
-    <button onClick={toggleEditMode} className="bg-gray-200 p-2 rounded">
-      {editMode ? "Bearbeitungsmodus deaktivieren" : "Bearbeitungsmodus aktivieren"}
-    </button>
+    <div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
+      {editMode ? (
+        <Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
+          <EditOffIcon />
+        </Tooltip>
+      ) : (
+        <Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
+          <DesignServicesIcon />
+        </Tooltip>
+      )}
+    </div>
   );
 }