From 8c6aaf2af0ccaf898c4c21c898e8e4b0c501ea8b Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Thu, 12 Dec 2024 16:15:47 +0100
Subject: [PATCH] FIX: Replace inline styles with StyledMenu component for
 improved readability

---
 webapp/src/components/formatMenu.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/formatMenu.tsx b/webapp/src/components/formatMenu.tsx
index 9afe38a..1c3be38 100644
--- a/webapp/src/components/formatMenu.tsx
+++ b/webapp/src/components/formatMenu.tsx
@@ -34,7 +34,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
       >
         {properties.children}
       </ChildrenWrapper>
-      <Menu
+      <StyledMenu
         open={isMenuOpen}
         onClose={(): void => setMenuOpen(false)}
         anchorEl={anchorElement.current}
@@ -46,14 +46,6 @@ const FormatMenu = (properties: FormatMenuProps) => {
           vertical: "top",
           horizontal: "left",
         }}
-        sx={{
-          "& .MuiPaper-root": {
-            borderRadius: "8px",
-            padding: "4px 0px",
-            marginLeft: "-4px", // Starting with a small offset
-          },
-          "& .MuiList-root": { padding: "0" },
-        }}
       >
         <MenuItemWrapper onClick={(): void => onSelect(NumberFormats.AUTO)}>
           <MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
@@ -122,7 +114,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
         <MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
           <MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
         </MenuItemWrapper>
-      </Menu>
+      </StyledMenu>
       <FormatPicker
         numFmt={properties.numFmt}
         onChange={onSelect}
@@ -134,6 +126,17 @@ const FormatMenu = (properties: FormatMenuProps) => {
   );
 };
 
+const StyledMenu = styled(Menu)`
+  & .MuiPaper-root {
+    border-radius: 8px;
+    padding: 4px 0px;
+    margin-left: -4px; // Starting with a small offset
+  }
+  & .MuiList-root {
+    padding: 0;
+  }
+`;
+
 const MenuItemWrapper = styled(MenuItem)`
   display: flex;
   justify-content: space-between;