From ac461ec869e9ca660bfb386e5547c9ac6fe12d2e Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 18 Jul 2024 11:50:09 +0200
Subject: [PATCH 1/8] Add button tooltips to sidebar

---
 CHANGELOG.md                                  |   2 +-
 src/client/public/icons/help.svg              |   2 +-
 .../src/commons/menu/mainView/mainSideNav.tsx | 162 ++++++++++++++----
 3 files changed, 128 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7326a15c..731328d62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,7 @@
 
 - Added borehole geometry panel.
 - Added secondary header to borehole detail view.
-- Added new codelist entries for `casing_type` and `backfill_material`.
+- Added new codelist entries for `casing_type` and `backfill_material`.git 
 
 ### Changed
 
diff --git a/src/client/public/icons/help.svg b/src/client/public/icons/help.svg
index 5efd24d9e..2c5d0a9a2 100644
--- a/src/client/public/icons/help.svg
+++ b/src/client/public/icons/help.svg
@@ -1 +1 @@
-<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" stroke-width="1.25"><path d="m10 5.61328v10.58872"/><path d="m15.9103 14.4289-5.6253 1.6876c-.186.0558-.3844.0558-.57043 0l-5.62529-1.6876c-.41989-.126-.70744-.5124-.70744-.9508v-9.18309c0-.33248.3205-.57095.63897-.47541l5.69376 1.70812c.18603.05582.38443.05582.57043 0l5.6938-1.70812c.3185-.09554.639.14293.639.47541v9.18309c0 .4384-.2876.8248-.7075.9508z"/></g></svg>
\ No newline at end of file
+<svg fill="none" height="20" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><g stroke="currentColor" stroke-width="1.25"><path d="m10 5.61328v10.58872"/><path d="m15.9103 14.4289-5.6253 1.6876c-.186.0558-.3844.0558-.57043 0l-5.62529-1.6876c-.41989-.126-.70744-.5124-.70744-.9508v-9.18309c0-.33248.3205-.57095.63897-.47541l5.69376 1.70812c.18603.05582.38443.05582.57043 0l5.6938-1.70812c.3185-.09554.639.14293.639.47541v9.18309c0 .4384-.2876.8248-.7075.9508z"/></g></svg>
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index c3c11c29c..a7ce41865 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Stack } from "@mui/material";
+import { Badge, IconButton, Stack, Typography } from "@mui/material";
 import { ImportErrorModal } from "./menuComponents/importErrorModal";
 import FilterIcon from "../../../../public/icons/filter.svg?react";
 import AddIcon from "../../../../public/icons/add.svg?react";
@@ -16,13 +16,20 @@ import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfa
 import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
 import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
 import { FilterContext } from "../../../components/filter/filterContext";
+import { useTranslation } from "react-i18next";
 
 const StyledIconButton = styled(IconButton)({
   padding: "10px",
   marginBottom: "25px",
   color: theme.palette.neutral.contrastText,
   "&:hover": {
-    backgroundColor: theme.palette.background.lightgrey,
+    backgroundColor: `${theme.palette.secondary.main} !important`,
+    color: `${theme.palette.secondary.contrastText} !important`,
+    width: "fit-content",
+    whiteSpace: "nowrap",
+    zIndex: 6000,
+    paddingLeft: "16px",
+    justifyContent: "flex-start",
   },
   borderRadius: "10px",
 });
@@ -44,6 +51,7 @@ const MainSideNav = ({
 }: MainSideNavProps) => {
   const history = useHistory();
   const menuRef = useRef(null);
+  const { t } = useTranslation();
   const [creating, setCreating] = useState<boolean>(false);
   const [modal, setModal] = useState<boolean>(false);
   const [upload, setUpload] = useState<boolean>(false);
@@ -52,6 +60,7 @@ const MainSideNav = ({
   const [selectedBoreholeAttachments, setSelectedBoreholeAttachments] = useState<Blob[] | null>(null);
   const [selectedLithologyFile, setSelectedLithologyFile] = useState<Blob[] | null>(null);
   const [errorsResponse, setErrorsResponse] = useState<ErrorResponse | null>(null);
+  const [hoveredButtonId, setHoveredButtonId] = useState<string | null>(null);
   const filterContext = useContext(FilterContext);
 
   // Redux state
@@ -96,6 +105,99 @@ const MainSideNav = ({
   const isLayersPanelVisible = drawerOpen && sideDrawerContent === DrawerContentTypes.CustomLayers;
   const activeFilterCount = filterContext.activeFilterLength + (filterContext.filterPolygon === null ? 0 : 1);
 
+  function getTooltipWrapper(content: JSX.Element) {
+    return (
+      <Stack direction="row" justifyContent={"space-between"} spacing={1} sx={{ padding: 0, margin: 0 }}>
+        {content}
+      </Stack>
+    );
+  }
+
+  interface ButtonContentInterface {
+    id: string;
+    onClick: () => void;
+    sx: object;
+    defaultContent: JSX.Element;
+    hoverContent: JSX.Element;
+  }
+
+  const topButtonData: ButtonContentInterface[] = [
+    {
+      id: "show-filter-button",
+      onClick: handleToggleFilter,
+      sx: isFilterPanelVisible ? selectedButtonStyle : {},
+      defaultContent: <FilterIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <FilterIcon /> <Typography> {t("searchfilters")} </Typography>
+        </>,
+      ),
+    },
+    {
+      id: "new-borehole-button",
+      onClick: handleToggleAdd,
+      sx: isAddPanelVisible ? selectedButtonStyle : {},
+      defaultContent: <AddIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <AddIcon /> <Typography> {t("add")} </Typography>
+        </>,
+      ),
+    },
+    {
+      id: "import-borehole-button",
+      onClick: () => {
+        toggleDrawer(false);
+        setModal(true);
+        setUpload(true);
+      },
+      sx: {},
+      defaultContent: <UploadIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <UploadIcon /> <Typography> {t("upload")} </Typography>
+        </>,
+      ),
+    },
+    {
+      id: "layers-button",
+      onClick: handleToggleLayers,
+      sx: isLayersPanelVisible ? selectedButtonStyle : {},
+      defaultContent: <LayersIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <LayersIcon />
+          <Typography> {t("usersMap")} </Typography>
+        </>,
+      ),
+    },
+  ];
+
+  const bottomButtonData: ButtonContentInterface[] = [
+    {
+      id: "settings-button",
+      onClick: () => history.push(`/setting`),
+      sx: {},
+      defaultContent: <SettingsIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <SettingsIcon /> <Typography> {t("header_settings")} </Typography>
+        </>,
+      ),
+    },
+    {
+      id: "help-button",
+      onClick: () => window.open(`/help`),
+      sx: {},
+      defaultContent: <HelpIcon />,
+      hoverContent: getTooltipWrapper(
+        <>
+          <HelpIcon /> <Typography> {t("header_help")} </Typography>
+        </>,
+      ),
+    },
+  ];
+
   return (
     <Stack
       direction="column"
@@ -113,46 +215,34 @@ const MainSideNav = ({
           flex: "1 1 100%",
         }}>
         {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
-        <StyledIconButton
-          data-cy="show-filter-button"
-          onClick={handleToggleFilter}
-          sx={isFilterPanelVisible ? selectedButtonStyle : {}}>
-          <FilterIcon />
-        </StyledIconButton>
-        <StyledIconButton
-          data-cy="new-borehole-button"
-          onClick={handleToggleAdd}
-          disabled={user.data.roles.indexOf("EDIT") === -1}
-          sx={isAddPanelVisible ? selectedButtonStyle : {}}>
-          <AddIcon />
-        </StyledIconButton>
-        <StyledIconButton
-          data-cy="import-borehole-button"
-          onClick={() => {
-            setModal(true);
-            setUpload(true);
-          }}
-          disabled={user.data.roles.indexOf("EDIT") === -1}>
-          <UploadIcon />
-        </StyledIconButton>
-        <StyledIconButton
-          data-cy="layers-button"
-          onClick={handleToggleLayers}
-          sx={isLayersPanelVisible ? selectedButtonStyle : {}}>
-          <LayersIcon />
-        </StyledIconButton>
+        {topButtonData.map(button => (
+          <StyledIconButton
+            key={button.id}
+            data-cy={button.id}
+            onClick={button.onClick}
+            onMouseEnter={() => setHoveredButtonId(button.id)}
+            onMouseLeave={() => setHoveredButtonId(null)}
+            sx={button.sx}>
+            {hoveredButtonId === button.id ? button.hoverContent : button.defaultContent}
+          </StyledIconButton>
+        ))}
       </Stack>
       <Stack
         direction="column"
         sx={{
           padding: "1em",
         }}>
-        <StyledIconButton data-cy="settings-button" onClick={() => history.push(`/setting`)}>
-          <SettingsIcon />
-        </StyledIconButton>
-        <StyledIconButton>
-          <HelpIcon onClick={() => window.open(`/help`)} />
-        </StyledIconButton>
+        {bottomButtonData.map(button => (
+          <StyledIconButton
+            key={button.id}
+            data-cy={button.id}
+            onClick={button.onClick}
+            onMouseEnter={() => setHoveredButtonId(button.id)}
+            onMouseLeave={() => setHoveredButtonId(null)}
+            sx={button.sx}>
+            {hoveredButtonId === button.id ? button.hoverContent : button.defaultContent}
+          </StyledIconButton>
+        ))}
       </Stack>
       <ImportModal
         creating={creating}

From 3d80062be4fd340bc1b74feb24ad77b1d389da5e Mon Sep 17 00:00:00 2001
From: MiraGeowerkstatt <mira.bleuler@geowerkstatt.ch>
Date: Thu, 18 Jul 2024 11:51:12 +0200
Subject: [PATCH 2/8] Fix changelog

---
 CHANGELOG.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 731328d62..c081c1943 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -18,7 +18,8 @@
 
 - Added borehole geometry panel.
 - Added secondary header to borehole detail view.
-- Added new codelist entries for `casing_type` and `backfill_material`.git 
+- Added new codelist entries for `casing_type` and `backfill_material`.
+- Added tooltips to main side navigation.
 
 ### Changed
 

From 9193f705a771cf501443794d3d397ea452ad0f5a Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Fri, 19 Jul 2024 13:28:17 +0200
Subject: [PATCH 3/8] Disable buttons for view-only users

---
 src/client/src/commons/menu/mainView/mainSideNav.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index a7ce41865..fab651e90 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -119,6 +119,7 @@ const MainSideNav = ({
     sx: object;
     defaultContent: JSX.Element;
     hoverContent: JSX.Element;
+    disabled?: boolean;
   }
 
   const topButtonData: ButtonContentInterface[] = [
@@ -138,6 +139,7 @@ const MainSideNav = ({
       onClick: handleToggleAdd,
       sx: isAddPanelVisible ? selectedButtonStyle : {},
       defaultContent: <AddIcon />,
+      disabled: user.data.roles.indexOf("EDIT") === -1,
       hoverContent: getTooltipWrapper(
         <>
           <AddIcon /> <Typography> {t("add")} </Typography>
@@ -153,6 +155,7 @@ const MainSideNav = ({
       },
       sx: {},
       defaultContent: <UploadIcon />,
+      disabled: user.data.roles.indexOf("EDIT") === -1,
       hoverContent: getTooltipWrapper(
         <>
           <UploadIcon /> <Typography> {t("upload")} </Typography>
@@ -222,6 +225,7 @@ const MainSideNav = ({
             onClick={button.onClick}
             onMouseEnter={() => setHoveredButtonId(button.id)}
             onMouseLeave={() => setHoveredButtonId(null)}
+            disabled={button.disabled}
             sx={button.sx}>
             {hoveredButtonId === button.id ? button.hoverContent : button.defaultContent}
           </StyledIconButton>

From d94a906486c84c2eff9d38afa7fb792a683b7351 Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Fri, 19 Jul 2024 14:34:03 +0200
Subject: [PATCH 4/8] Add navButton component

---
 .../src/commons/menu/mainView/mainSideNav.tsx | 189 +++++-------------
 .../src/components/buttons/navButton.tsx      |  53 +++++
 2 files changed, 100 insertions(+), 142 deletions(-)
 create mode 100644 src/client/src/components/buttons/navButton.tsx

diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index fab651e90..9e79a8963 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Stack, Typography } from "@mui/material";
+import { Badge, Stack } from "@mui/material";
 import { ImportErrorModal } from "./menuComponents/importErrorModal";
 import FilterIcon from "../../../../public/icons/filter.svg?react";
 import AddIcon from "../../../../public/icons/add.svg?react";
@@ -10,34 +10,13 @@ import SettingsIcon from "../../../../public/icons/settings.svg?react";
 import HelpIcon from "../../../../public/icons/help.svg?react";
 import LayersIcon from "../../../../public/icons/layers.svg?react";
 import { theme } from "../../../AppTheme";
-import { styled } from "@mui/system";
 import ImportModal from "./actions/importModal";
 import { DrawerContentTypes } from "../../../pages/editor/editorComponentInterfaces";
 import { ErrorResponse, MainSideNavProps } from "./menuComponents/menuComponentInterfaces";
 import { ReduxRootState, User } from "../../../ReduxStateInterfaces";
 import { FilterContext } from "../../../components/filter/filterContext";
 import { useTranslation } from "react-i18next";
-
-const StyledIconButton = styled(IconButton)({
-  padding: "10px",
-  marginBottom: "25px",
-  color: theme.palette.neutral.contrastText,
-  "&:hover": {
-    backgroundColor: `${theme.palette.secondary.main} !important`,
-    color: `${theme.palette.secondary.contrastText} !important`,
-    width: "fit-content",
-    whiteSpace: "nowrap",
-    zIndex: 6000,
-    paddingLeft: "16px",
-    justifyContent: "flex-start",
-  },
-  borderRadius: "10px",
-});
-
-const selectedButtonStyle = {
-  color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.background.menuItemActive + " !important",
-};
+import { NavButton } from "../../../components/buttons/navButton";
 
 const MainSideNav = ({
   toggleDrawer,
@@ -105,102 +84,6 @@ const MainSideNav = ({
   const isLayersPanelVisible = drawerOpen && sideDrawerContent === DrawerContentTypes.CustomLayers;
   const activeFilterCount = filterContext.activeFilterLength + (filterContext.filterPolygon === null ? 0 : 1);
 
-  function getTooltipWrapper(content: JSX.Element) {
-    return (
-      <Stack direction="row" justifyContent={"space-between"} spacing={1} sx={{ padding: 0, margin: 0 }}>
-        {content}
-      </Stack>
-    );
-  }
-
-  interface ButtonContentInterface {
-    id: string;
-    onClick: () => void;
-    sx: object;
-    defaultContent: JSX.Element;
-    hoverContent: JSX.Element;
-    disabled?: boolean;
-  }
-
-  const topButtonData: ButtonContentInterface[] = [
-    {
-      id: "show-filter-button",
-      onClick: handleToggleFilter,
-      sx: isFilterPanelVisible ? selectedButtonStyle : {},
-      defaultContent: <FilterIcon />,
-      hoverContent: getTooltipWrapper(
-        <>
-          <FilterIcon /> <Typography> {t("searchfilters")} </Typography>
-        </>,
-      ),
-    },
-    {
-      id: "new-borehole-button",
-      onClick: handleToggleAdd,
-      sx: isAddPanelVisible ? selectedButtonStyle : {},
-      defaultContent: <AddIcon />,
-      disabled: user.data.roles.indexOf("EDIT") === -1,
-      hoverContent: getTooltipWrapper(
-        <>
-          <AddIcon /> <Typography> {t("add")} </Typography>
-        </>,
-      ),
-    },
-    {
-      id: "import-borehole-button",
-      onClick: () => {
-        toggleDrawer(false);
-        setModal(true);
-        setUpload(true);
-      },
-      sx: {},
-      defaultContent: <UploadIcon />,
-      disabled: user.data.roles.indexOf("EDIT") === -1,
-      hoverContent: getTooltipWrapper(
-        <>
-          <UploadIcon /> <Typography> {t("upload")} </Typography>
-        </>,
-      ),
-    },
-    {
-      id: "layers-button",
-      onClick: handleToggleLayers,
-      sx: isLayersPanelVisible ? selectedButtonStyle : {},
-      defaultContent: <LayersIcon />,
-      hoverContent: getTooltipWrapper(
-        <>
-          <LayersIcon />
-          <Typography> {t("usersMap")} </Typography>
-        </>,
-      ),
-    },
-  ];
-
-  const bottomButtonData: ButtonContentInterface[] = [
-    {
-      id: "settings-button",
-      onClick: () => history.push(`/setting`),
-      sx: {},
-      defaultContent: <SettingsIcon />,
-      hoverContent: getTooltipWrapper(
-        <>
-          <SettingsIcon /> <Typography> {t("header_settings")} </Typography>
-        </>,
-      ),
-    },
-    {
-      id: "help-button",
-      onClick: () => window.open(`/help`),
-      sx: {},
-      defaultContent: <HelpIcon />,
-      hoverContent: getTooltipWrapper(
-        <>
-          <HelpIcon /> <Typography> {t("header_help")} </Typography>
-        </>,
-      ),
-    },
-  ];
-
   return (
     <Stack
       direction="column"
@@ -218,35 +101,57 @@ const MainSideNav = ({
           flex: "1 1 100%",
         }}>
         {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
-        {topButtonData.map(button => (
-          <StyledIconButton
-            key={button.id}
-            data-cy={button.id}
-            onClick={button.onClick}
-            onMouseEnter={() => setHoveredButtonId(button.id)}
-            onMouseLeave={() => setHoveredButtonId(null)}
-            disabled={button.disabled}
-            sx={button.sx}>
-            {hoveredButtonId === button.id ? button.hoverContent : button.defaultContent}
-          </StyledIconButton>
-        ))}
+        <NavButton
+          key="show-filter-button"
+          icon={<FilterIcon />}
+          label={t("searchfilters")}
+          selected={isFilterPanelVisible}
+          onClick={handleToggleFilter}
+        />
+        <NavButton
+          key="new-borehole-button"
+          icon={<AddIcon />}
+          label={t("add")}
+          selected={isAddPanelVisible}
+          disabled={user.data.roles.indexOf("EDIT") === -1}
+          onClick={handleToggleAdd}
+        />
+        <NavButton
+          key="import-borehole-button"
+          icon={<UploadIcon />}
+          label={t("upload")}
+          disabled={user.data.roles.indexOf("EDIT") === -1}
+          onClick={() => {
+            toggleDrawer(false);
+            setModal(true);
+            setUpload(true);
+          }}
+        />
+        <NavButton
+          key="layers-button"
+          icon={<LayersIcon />}
+          label={t("usersMap")}
+          selected={isLayersPanelVisible}
+          onClick={handleToggleLayers}
+        />
       </Stack>
       <Stack
         direction="column"
         sx={{
           padding: "1em",
         }}>
-        {bottomButtonData.map(button => (
-          <StyledIconButton
-            key={button.id}
-            data-cy={button.id}
-            onClick={button.onClick}
-            onMouseEnter={() => setHoveredButtonId(button.id)}
-            onMouseLeave={() => setHoveredButtonId(null)}
-            sx={button.sx}>
-            {hoveredButtonId === button.id ? button.hoverContent : button.defaultContent}
-          </StyledIconButton>
-        ))}
+        <NavButton
+          key="settings-button"
+          icon={<SettingsIcon />}
+          label={t("header_settings")}
+          onClick={() => history.push(`/setting`)}
+        />
+        <NavButton
+          key="help-button"
+          icon={<HelpIcon />}
+          label={t("header_help")}
+          onClick={() => window.open(`/help`)}
+        />
       </Stack>
       <ImportModal
         creating={creating}
diff --git a/src/client/src/components/buttons/navButton.tsx b/src/client/src/components/buttons/navButton.tsx
new file mode 100644
index 000000000..c9aa83cfb
--- /dev/null
+++ b/src/client/src/components/buttons/navButton.tsx
@@ -0,0 +1,53 @@
+import { forwardRef, useState } from "react";
+import { ButtonProps } from "./buttonsInterface";
+import { IconButton, Stack, Typography } from "@mui/material";
+import { theme } from "../../AppTheme";
+
+export interface NavButtonProps extends ButtonProps {
+  key: string;
+  selected?: boolean;
+}
+
+export const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>((props, ref) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const handleMouseEnter = () => setIsHovered(true);
+  const handleMouseLeave = () => setIsHovered(false);
+
+  const defaultContent = props.icon;
+  const hoverContent = (
+    <>
+      {props.icon} <Typography>{props.label}</Typography>
+    </>
+  );
+
+  return (
+    <IconButton
+      ref={ref}
+      {...props}
+      key={props.key}
+      data-cy={props.key}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      sx={{
+        marginBottom: "25px",
+        padding: "10px 16px",
+        color: props.selected ? theme.palette.primary.contrastText : theme.palette.neutral.contrastText,
+        backgroundColor: props.selected ? theme.palette.background.menuItemActive + " !important" : undefined,
+        borderRadius: "10px",
+        width: "fit-content",
+        transition: "background-color 0.3s ease, color 0.3s ease, width 0.3s ease",
+        "&:hover": {
+          backgroundColor: `${theme.palette.secondary.main} !important`,
+          color: `${theme.palette.secondary.contrastText} !important`,
+          width: "fit-content",
+          whiteSpace: "nowrap",
+          zIndex: 6000,
+        },
+      }}>
+      <Stack direction="row" justifyContent={"space-between"} spacing={1} sx={{ margin: 0 }}>
+        {isHovered ? hoverContent : defaultContent}
+      </Stack>
+    </IconButton>
+  );
+});

From 37ed5e9e3d3b04600a1ea200a758e17d0e5988af Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Fri, 19 Jul 2024 14:45:14 +0200
Subject: [PATCH 5/8] Remove unused code

---
 src/client/src/commons/menu/mainView/mainSideNav.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index 9e79a8963..4a3ad3e19 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -39,7 +39,6 @@ const MainSideNav = ({
   const [selectedBoreholeAttachments, setSelectedBoreholeAttachments] = useState<Blob[] | null>(null);
   const [selectedLithologyFile, setSelectedLithologyFile] = useState<Blob[] | null>(null);
   const [errorsResponse, setErrorsResponse] = useState<ErrorResponse | null>(null);
-  const [hoveredButtonId, setHoveredButtonId] = useState<string | null>(null);
   const filterContext = useContext(FilterContext);
 
   // Redux state

From 6888e409b99941e1268e98906b207f56c70745ed Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Fri, 19 Jul 2024 15:00:48 +0200
Subject: [PATCH 6/8] Fix setting data-cy

---
 src/client/src/commons/menu/mainView/mainSideNav.tsx | 12 ++++++------
 src/client/src/components/buttons/navButton.tsx      |  6 ++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index 4a3ad3e19..f21b501ca 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -101,14 +101,14 @@ const MainSideNav = ({
         }}>
         {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
         <NavButton
-          key="show-filter-button"
+          data-cy="show-filter-button"
           icon={<FilterIcon />}
           label={t("searchfilters")}
           selected={isFilterPanelVisible}
           onClick={handleToggleFilter}
         />
         <NavButton
-          key="new-borehole-button"
+          data-cy="new-borehole-button"
           icon={<AddIcon />}
           label={t("add")}
           selected={isAddPanelVisible}
@@ -116,7 +116,7 @@ const MainSideNav = ({
           onClick={handleToggleAdd}
         />
         <NavButton
-          key="import-borehole-button"
+          data-cy="import-borehole-button"
           icon={<UploadIcon />}
           label={t("upload")}
           disabled={user.data.roles.indexOf("EDIT") === -1}
@@ -127,7 +127,7 @@ const MainSideNav = ({
           }}
         />
         <NavButton
-          key="layers-button"
+          data-cy="layers-button"
           icon={<LayersIcon />}
           label={t("usersMap")}
           selected={isLayersPanelVisible}
@@ -140,13 +140,13 @@ const MainSideNav = ({
           padding: "1em",
         }}>
         <NavButton
-          key="settings-button"
+          data-cy="settings-button"
           icon={<SettingsIcon />}
           label={t("header_settings")}
           onClick={() => history.push(`/setting`)}
         />
         <NavButton
-          key="help-button"
+          data-cy="help-button"
           icon={<HelpIcon />}
           label={t("header_help")}
           onClick={() => window.open(`/help`)}
diff --git a/src/client/src/components/buttons/navButton.tsx b/src/client/src/components/buttons/navButton.tsx
index c9aa83cfb..2fd5aee87 100644
--- a/src/client/src/components/buttons/navButton.tsx
+++ b/src/client/src/components/buttons/navButton.tsx
@@ -4,7 +4,8 @@ import { IconButton, Stack, Typography } from "@mui/material";
 import { theme } from "../../AppTheme";
 
 export interface NavButtonProps extends ButtonProps {
-  key: string;
+  label: string;
+  icon: JSX.Element;
   selected?: boolean;
 }
 
@@ -20,13 +21,10 @@ export const NavButton = forwardRef<HTMLButtonElement, NavButtonProps>((props, r
       {props.icon} <Typography>{props.label}</Typography>
     </>
   );
-
   return (
     <IconButton
       ref={ref}
       {...props}
-      key={props.key}
-      data-cy={props.key}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       sx={{

From 259d7c88f62eeef71531deafcb4e63235399167b Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Thu, 25 Jul 2024 11:02:17 +0200
Subject: [PATCH 7/8] Update badge style to match figma

---
 src/client/src/AppTheme.ts                             | 10 +++++++++-
 src/client/src/commons/menu/mainView/mainSideNav.tsx   |  2 +-
 .../src/commons/search/editor/filterComponent.jsx      |  4 ++--
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/client/src/AppTheme.ts b/src/client/src/AppTheme.ts
index 7ec3f81a2..9fffda9b8 100644
--- a/src/client/src/AppTheme.ts
+++ b/src/client/src/AppTheme.ts
@@ -43,7 +43,7 @@ export const theme = createTheme({
       lightgrey: "#f1f3f5",
       darkgrey: "#787878",
       dark: "rgba(0, 0, 0, 0.5)",
-      menuItemActive: "#D92B04",
+      menuItemActive: "#A65462",
       filterItemActive: "#1C2834",
     },
 
@@ -135,5 +135,13 @@ export const theme = createTheme({
         },
       },
     },
+    MuiBadge: {
+      styleOverrides: {
+        badge: {
+          backgroundColor: "#FF0000",
+          color: "#FFFFFF",
+        },
+      },
+    },
   },
 });
diff --git a/src/client/src/commons/menu/mainView/mainSideNav.tsx b/src/client/src/commons/menu/mainView/mainSideNav.tsx
index f21b501ca..225d47fd4 100644
--- a/src/client/src/commons/menu/mainView/mainSideNav.tsx
+++ b/src/client/src/commons/menu/mainView/mainSideNav.tsx
@@ -99,7 +99,7 @@ const MainSideNav = ({
           padding: "1em",
           flex: "1 1 100%",
         }}>
-        {activeFilterCount > 0 && <Badge color="error" sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
+        {activeFilterCount > 0 && <Badge sx={{ margin: "1px" }} badgeContent={activeFilterCount}></Badge>}
         <NavButton
           data-cy="show-filter-button"
           icon={<FilterIcon />}
diff --git a/src/client/src/commons/search/editor/filterComponent.jsx b/src/client/src/commons/search/editor/filterComponent.jsx
index 14929512b..99af9ec6d 100644
--- a/src/client/src/commons/search/editor/filterComponent.jsx
+++ b/src/client/src/commons/search/editor/filterComponent.jsx
@@ -226,7 +226,7 @@ class FilterComponent extends React.Component {
               {t("polygon_selection")}
             </Typography>
             {filterPolygon !== null && (
-              <Badge data-cy="polygon-filter-badge" color="error" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
+              <Badge data-cy="polygon-filter-badge" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
             )}
           </Button>
           {this.state?.searchList?.map((filter, idx) => {
@@ -248,7 +248,7 @@ class FilterComponent extends React.Component {
                   }}>
                   <Typography variant="h6">
                     {t(filter?.translationId)}{" "}
-                    <Badge color="error" badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
+                    <Badge badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
                   </Typography>
                 </AccordionSummary>
                 {filter?.name === "workgroup" && filter?.isSelected && (

From 40a508a397cbf0b02ec4116e3d5225a7ecf8161a Mon Sep 17 00:00:00 2001
From: tschumpr <roswita.tschuemperlin@geowerkstatt.ch>
Date: Thu, 25 Jul 2024 15:16:53 +0200
Subject: [PATCH 8/8] Center badge number

---
 src/client/src/commons/search/editor/filterComponent.jsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/client/src/commons/search/editor/filterComponent.jsx b/src/client/src/commons/search/editor/filterComponent.jsx
index 99af9ec6d..a16e32c38 100644
--- a/src/client/src/commons/search/editor/filterComponent.jsx
+++ b/src/client/src/commons/search/editor/filterComponent.jsx
@@ -24,6 +24,7 @@ import { FilterContext } from "../../../components/filter/filterContext.tsx";
 
 class FilterComponent extends React.Component {
   static contextType = FilterContext;
+
   constructor(props) {
     super(props);
     this.handleFilterReset = this.handleFilterReset.bind(this);
@@ -226,7 +227,7 @@ class FilterComponent extends React.Component {
               {t("polygon_selection")}
             </Typography>
             {filterPolygon !== null && (
-              <Badge data-cy="polygon-filter-badge" badgeContent={1} sx={{ marginLeft: "18px" }}></Badge>
+              <Badge data-cy="polygon-filter-badge" badgeContent={1} sx={{ marginLeft: "18px" }} />
             )}
           </Button>
           {this.state?.searchList?.map((filter, idx) => {
@@ -246,10 +247,8 @@ class FilterComponent extends React.Component {
                       ),
                     }));
                   }}>
-                  <Typography variant="h6">
-                    {t(filter?.translationId)}{" "}
-                    <Badge badgeContent={activeFilterLength} sx={{ marginLeft: "12px" }}></Badge>
-                  </Typography>
+                  <Typography variant="h6">{t(filter?.translationId)} </Typography>
+                  <Badge badgeContent={activeFilterLength} sx={{ marginLeft: "18px", marginTop: "10px" }} />
                 </AccordionSummary>
                 {filter?.name === "workgroup" && filter?.isSelected && (
                   <this.StyledAccordionDetails>