diff --git a/webapp/app.ironcalc.com/frontend/src/components/FileMenu.tsx b/webapp/app.ironcalc.com/frontend/src/components/FileMenu.tsx
index 7866f84..9e4c261 100644
--- a/webapp/app.ironcalc.com/frontend/src/components/FileMenu.tsx
+++ b/webapp/app.ironcalc.com/frontend/src/components/FileMenu.tsx
@@ -32,7 +32,13 @@ export function FileMenu(props: {
}}
>
- {uuid === selectedUuid ? : ""}
+ {uuid === selectedUuid ? (
+
+
+
+ ) : (
+ ""
+ )}
{models[uuid]}
- ,
+
);
}
return (
<>
@@ -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}
>
{
@@ -72,7 +87,9 @@ export function FileMenu(props: {
setMenuOpen(false);
}}
>
-
+
+
+
New
-
+
+
+
Import
-
+
+
+
Download (.xlsx)
@@ -96,7 +117,9 @@ export function FileMenu(props: {
setMenuOpen(false);
}}
>
-
+
+
+
Delete workbook
@@ -133,42 +156,18 @@ export function FileMenu(props: {
);
}
-const StyledPlus = styled(Plus)`
- width: 16px;
- height: 16px;
- color: #333333;
- padding-right: 10px;
+const StyledIcon = styled.div`
+ display: flex;
+ align-items: center;
+ svg {
+ width: 16px;
+ height: 100%;
+ color: #757575;
+ padding-right: 10px;
+ }
`;
-const StyledFileDown = styled(FileDown)`
- 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")`
+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;