diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
index 25c903d..9a86040 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTab.tsx
@@ -1,6 +1,12 @@
import { Button, Menu, MenuItem, styled } from "@mui/material";
import type { MenuItemProps } from "@mui/material";
-import { ChevronDown } from "lucide-react";
+import {
+ ChevronDown,
+ EyeOff,
+ PaintBucket,
+ TextCursorInput,
+ Trash2,
+} from "lucide-react";
import { useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { theme } from "../../theme";
@@ -98,7 +104,8 @@ function SheetTab(props: SheetTabProps) {
handleClose();
}}
>
- Rename
+
+ {t("sheet_tab.rename")}
{
@@ -106,16 +113,8 @@ function SheetTab(props: SheetTabProps) {
handleClose();
}}
>
- Change Color
-
- {
- handleOpenDeleteDialog();
- handleClose();
- }}
- >
- Delete
+
+ {t("sheet_tab.change_color")}
- Hide sheet
+
+ {t("sheet_tab.hide_sheet")}
+
+ {
+ handleOpenDeleteDialog();
+ handleClose();
+ }}
+ >
+
+ {t("sheet_tab.delete")}
+
(() => ({
display: "flex",
- justifyContent: "space-between",
+ justifyContent: "flex-start",
+ alignItems: "center",
+ gap: "8px",
fontSize: "12px",
width: "calc(100% - 8px)",
margin: "0px 4px",
@@ -188,6 +201,11 @@ const StyledMenuItem = styled(MenuItem)(() => ({
"&:disabled": {
color: "#BDBDBD",
},
+ "& svg": {
+ width: "16px",
+ height: "16px",
+ color: `${theme.palette.grey[600]}`,
+ },
}));
const TabWrapper = styled("div")<{ $color: string; $selected: boolean }>`
@@ -233,4 +251,25 @@ const Name = styled("div")`
user-select: none;
`;
+const MenuDivider = styled("div")`
+ width: 100%;
+ margin: auto;
+ margin-top: 4px;
+ margin-bottom: 4px;
+ border-top: 1px solid ${theme.palette.grey[200]};
+`;
+
+const DeleteButton = styled(StyledMenuItem)`
+ color: ${theme.palette.error.main};
+ svg {
+ color: ${theme.palette.error.main};
+ }
+ &:hover {
+ background-color: ${theme.palette.error.main}1A;
+ }
+ &:active {
+ background-color: ${theme.palette.error.main}1A;
+ }
+`;
+
export default SheetTab;
diff --git a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
index 0443cfd..c35837c 100644
--- a/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
+++ b/webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx
@@ -1,7 +1,9 @@
import { styled } from "@mui/material";
+import { Tooltip } from "@mui/material";
import { Menu, Plus } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
+import { IronCalcLogo } from "../../icons";
import { theme } from "../../theme";
import { StyledButton } from "../Toolbar/Toolbar";
import { NAVIGATION_HEIGHT } from "../constants";
@@ -49,20 +51,16 @@ function SheetTabBar(props: SheetTabBarProps) {
return (
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
@@ -90,9 +88,15 @@ function SheetTabBar(props: SheetTabBarProps) {
))}
-
- ironcalc.com
-
+
+
+ window.open("https://www.ironcalc.com", "_blank")}
+ >
+
+
+
+