update: adjustments in file menu

webapp/app.ironcalc.com/frontend/src/components/FileMenu.tsx

@@ -32,7 +32,13 @@ export function FileMenu(props: {
         }}
       >
         <CheckIndicator>
-          {uuid === selectedUuid ? <StyledCheck /> : ""}
+          {uuid === selectedUuid ? (
+            <StyledIcon>
+              <Check />
+            </StyledIcon>
+          ) : (
+            ""
+          )}
         </CheckIndicator>
         <MenuItemText
           style={{
@@ -43,15 +49,17 @@ export function FileMenu(props: {
         >
           {models[uuid]}
         </MenuItemText>
-      </MenuItemWrapper>,
+      </MenuItemWrapper>
     );
   }
 
   return (
     <>
       <FileMenuWrapper
+        id="file-menu-button"
         onClick={(): void => setMenuOpen(true)}
         ref={anchorElement}
+        $isActive={isMenuOpen}
       >
         File
       </FileMenuWrapper>
@@ -59,12 +67,19 @@ export function FileMenu(props: {
         open={isMenuOpen}
         onClose={(): void => setMenuOpen(false)}
         anchorEl={anchorElement.current}
+        autoFocus={false}
+        disableRestoreFocus={true}
         sx={{
           "& .MuiPaper-root": { borderRadius: "8px", padding: "4px 0px" },
           "& .MuiList-root": { padding: "0" },
+          transform: "translate(-4px, 4px)",
+        }}
+        slotProps={{
+          list: {
+            "aria-labelledby": "file-menu-button",
+            tabIndex: -1,
+          },
         }}
-
-        // anchorOrigin={properties.anchorOrigin}
       >
         <MenuItemWrapper
           onClick={() => {
@@ -72,7 +87,9 @@ export function FileMenu(props: {
             setMenuOpen(false);
           }}
         >
-          <StyledPlus />
+          <StyledIcon>
+            <Plus />
+          </StyledIcon>
           <MenuItemText>New</MenuItemText>
         </MenuItemWrapper>
         <MenuItemWrapper
@@ -81,11 +98,15 @@ export function FileMenu(props: {
             setMenuOpen(false);
           }}
         >
-          <StyledFileUp />
+          <StyledIcon>
+            <FileUp />
+          </StyledIcon>
           <MenuItemText>Import</MenuItemText>
         </MenuItemWrapper>
         <MenuItemWrapper>
-          <StyledFileDown />
+          <StyledIcon>
+            <FileDown />
+          </StyledIcon>
           <MenuItemText onClick={props.onDownload}>
             Download (.xlsx)
           </MenuItemText>
@@ -96,7 +117,9 @@ export function FileMenu(props: {
             setMenuOpen(false);
           }}
         >
-          <StyledTrash />
+          <StyledIcon>
+            <Trash2 />
+          </StyledIcon>
           <MenuItemText>Delete workbook</MenuItemText>
         </MenuItemWrapper>
         <MenuDivider />
@@ -133,42 +156,18 @@ export function FileMenu(props: {
   );
 }
 
-const StyledPlus = styled(Plus)`
+const StyledIcon = styled.div`
-  width: 16px;
+  display: flex;
-  height: 16px;
+  align-items: center;
-  color: #333333;
+  svg {
-  padding-right: 10px;
+    width: 16px;
+    height: 100%;
+    color: #757575;
+    padding-right: 10px;
+  }
 `;
 
-const StyledFileDown = styled(FileDown)`
+const MenuDivider = styled.div`
-  width: 16px;
-  height: 16px;
-  color: #333333;
-  padding-right: 10px;
-`;
-
-const StyledFileUp = styled(FileUp)`
-  width: 16px;
-  height: 16px;
-  color: #333333;
-  padding-right: 10px;
-`;
-
-const StyledTrash = styled(Trash2)`
-  width: 16px;
-  height: 16px;
-  color: #333333;
-  padding-right: 10px;
-`;
-
-const StyledCheck = styled(Check)`
-  width: 16px;
-  height: 16px;
-  color: #333333;
-  padding-right: 10px;
-`;
-
-const MenuDivider = styled("div")`
   width: 100%;
   margin: auto;
   margin-top: 4px;
@@ -176,7 +175,7 @@ const MenuDivider = styled("div")`
   border-top: 1px solid #eeeeee;
 `;
 
-const MenuItemText = styled("div")`
+const MenuItemText = styled.div`
   color: #000;
   font-size: 12px;
 `;
@@ -193,7 +192,7 @@ const MenuItemWrapper = styled(MenuItem)`
   height: 32px;
 `;
 
-const FileMenuWrapper = styled("div")`
+const FileMenuWrapper = styled.div<{ $isActive?: boolean }>`
   display: flex;
   align-items: center;
   font-size: 12px;
@@ -201,12 +200,13 @@ const FileMenuWrapper = styled("div")`
   padding: 8px;
   border-radius: 4px;
   cursor: pointer;
+  background-color: ${(props) => (props.$isActive ? "#e6e6e6" : "transparent")};
   &:hover {
     background-color: #f2f2f2;
   }
 `;
 
-const CheckIndicator = styled("span")`
+const CheckIndicator = styled.span`
   display: flex;
   justify-content: center;
   min-width: 26px;