style: widget footer improvements (#503)

* fix: add menu items to translation file

* style: tooltips, icons and paddings in footer

* style: beautify link to main site

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
+          <TextCursorInput />
+          {t("sheet_tab.rename")}
         </StyledMenuItem>
         <StyledMenuItem
           onClick={() => {
@@ -106,16 +113,8 @@ function SheetTab(props: SheetTabProps) {
             handleClose();
           }}
         >
-          Change Color
+          <PaintBucket />
-        </StyledMenuItem>
+          {t("sheet_tab.change_color")}
-        <StyledMenuItem
-          disabled={!props.canDelete}
-          onClick={() => {
-            handleOpenDeleteDialog();
-            handleClose();
-          }}
-        >
-          Delete
         </StyledMenuItem>
         <StyledMenuItem
           disabled={!props.canDelete}
@@ -124,8 +123,20 @@ function SheetTab(props: SheetTabProps) {
             handleClose();
           }}
         >
-          Hide sheet
+          <EyeOff />
+          {t("sheet_tab.hide_sheet")}
         </StyledMenuItem>
+        <MenuDivider />
+        <DeleteButton
+          disabled={!props.canDelete}
+          onClick={() => {
+            handleOpenDeleteDialog();
+            handleClose();
+          }}
+        >
+          <Trash2 />
+          {t("sheet_tab.delete")}
+        </DeleteButton>
       </StyledMenu>
       <SheetRenameDialog
         open={renameDialogOpen}
@@ -178,7 +189,9 @@ const StyledMenu = styled(Menu)`
 
 const StyledMenuItem = styled(MenuItem)<MenuItemProps>(() => ({
   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)<MenuItemProps>(() => ({
   "&: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;

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 (
     <Container>
       <LeftButtonsContainer>
-        <StyledButton
+        <Tooltip title={t("navigation.add_sheet")}>
-          title={t("navigation.add_sheet")}
+          <StyledButton $pressed={false} onClick={props.onAddBlankSheet}>
-          $pressed={false}
-          onClick={props.onAddBlankSheet}
-        >
             <Plus />
           </StyledButton>
-        <StyledButton
+        </Tooltip>
-          onClick={handleClick}
+        <Tooltip title={t("navigation.sheet_list")}>
-          title={t("navigation.sheet_list")}
+          <StyledButton onClick={handleClick} $pressed={false}>
-          $pressed={false}
-        >
             <Menu />
           </StyledButton>
+        </Tooltip>
       </LeftButtonsContainer>
       <VerticalDivider />
       <Sheets>
@@ -90,9 +88,15 @@ function SheetTabBar(props: SheetTabBarProps) {
           ))}
         </SheetInner>
       </Sheets>
-      <Advert href="https://www.ironcalc.com" target="_blank">
+      <RightContainer>
-        ironcalc.com
+        <Tooltip title={t("navigation.link")}>
-      </Advert>
+          <LogoLink
+            onClick={() => window.open("https://www.ironcalc.com", "_blank")}
+          >
+            <IronCalcLogo />
+          </LogoLink>
+        </Tooltip>
+      </RightContainer>
       <SheetListMenu
         anchorEl={anchorEl}
         open={open}
@@ -119,14 +123,11 @@ const Container = styled("div")`
   display: flex;
   height: ${NAVIGATION_HEIGHT}px;
   align-items: center;
-  padding: 0px 12px;
+  padding: 0px;
   font-family: Inter;
+  overflow: hidden;
   background-color: ${theme.palette.common.white};
   border-top: 1px solid ${theme.palette.grey["300"]};
-  @media (max-width: 769px) {
-    padding-right: 0px;
-    padding-left: 8px;
-  }
 `;
 
 const Sheets = styled("div")`
@@ -143,30 +144,15 @@ const SheetInner = styled("div")`
   display: flex;
 `;
 
-const Advert = styled("a")`
-  display: flex;
-  align-items: center;
-  color: ${theme.palette.primary.main};
-  padding: 0px 0px 0px 12px;
-  font-size: 12px;
-  text-decoration: none;
-  border-left: 1px solid ${theme.palette.grey["300"]};
-  transition: color 0.2s ease-in-out;
-  &:hover {
-    text-decoration: underline;
-  }
-  @media (max-width: 769px) {
-    display: none;
-  }
-`;
-
 const LeftButtonsContainer = styled("div")`
   display: flex;
   flex-direction: row;
+  align-items: center;
+  height: 100%;
   gap: 4px;
-  padding-right: 12px;
+  padding: 0px 12px;
   @media (max-width: 769px) {
-    padding-right: 8px;
+    padding: 0px 8px;
   }
 `;
 
@@ -178,4 +164,29 @@ const VerticalDivider = styled("div")`
   }
 `;
 
+const RightContainer = styled("a")`
+  display: flex;
+  align-items: center;
+  color: ${theme.palette.primary.main};
+  height: 100%;
+  padding: 0px 8px;
+  @media (max-width: 769px) {
+    display: none;
+  }
+`;
+
+const LogoLink = styled("div")`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: 4px;
+  svg {
+    height: 14px;
+    width: auto;
+  }
+  &:hover {
+    background-color: ${theme.palette.grey["100"]};
+  }
+`;
+
 export default SheetTabBar;

webapp/IronCalc/src/locale/en_us.json

@@ -81,6 +81,12 @@
     "confirm": "Yes, delete sheet",
     "cancel": "Cancel"
   },
+  "sheet_tab": {
+    "rename": "Rename",
+    "change_color": "Change Color",
+    "delete": "Delete",
+    "hide_sheet": "Hide sheet"
+  },
   "formula_input": {
     "update": "Update",
     "label": "Formula",
@@ -88,7 +94,8 @@
   },
   "navigation": {
     "add_sheet": "Add sheet",
-    "sheet_list": "Sheet list"
+    "sheet_list": "Sheet list",
+    "link": "Open ironcalc.com"
   },
   "name_manager_dialog": {
     "title": "Named Ranges",