FIX: Several UI fixes from Dani

* Toast has Inter font-family
* Share button has Inter font family
* More accurate menu list to design
* Removes unused navigation
* Adds link to IronCalc
* Removes line=black :O

webapp/src/components/borderPicker.tsx

@@ -371,22 +371,6 @@ const LineWrapper = styled("div")<LineWrapperProperties>`
   border: 1px solid white;
 `;
 
-const CheckIconWrapper = styled("div")`
-  width: 12px;
-`;
-
-type CheckIconProperties = { $checked: boolean };
-const CheckIcon = styled("div")<CheckIconProperties>`
-  width: 2px;
-  background-color: #eee;
-  height: 28px;
-  visibility: ${({ $checked }): string => {
-    if ($checked) {
-      return "visible";
-    }
-    return "hidden";
-  }};
-`;
 const NoneLine = styled("div")`
   width: 68px;
   border-top: 1px solid #e0e0e0;

webapp/src/components/navigation/menus.tsx

@@ -9,10 +9,15 @@ import {
 } from "@mui/material";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
+import { Check } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import type { SheetOptions } from "./types";
 
+function isWhiteColor(color: string): boolean {
+  return ["#FFF", "#FFFFFF"].includes(color);
+}
+
 interface SheetRenameDialogProps {
   isOpen: boolean;
   close: () => void;
@@ -59,11 +64,20 @@ interface SheetListMenuProps {
   anchorEl: HTMLButtonElement | null;
   onSheetSelected: (index: number) => void;
   sheetOptionsList: SheetOptions[];
+  selectedIndex: number;
 }
 
 const SheetListMenu = (properties: SheetListMenuProps) => {
-  const { isOpen, close, anchorEl, onSheetSelected, sheetOptionsList } =
-    properties;
+  const {
+    isOpen,
+    close,
+    anchorEl,
+    onSheetSelected,
+    sheetOptionsList,
+    selectedIndex,
+  } = properties;
+
+  const hasColors = sheetOptionsList.some((tab) => !isWhiteColor(tab.color));
 
   return (
     <StyledMenu
@@ -84,7 +98,16 @@ const SheetListMenu = (properties: SheetListMenuProps) => {
           key={tab.sheetId}
           onClick={() => onSheetSelected(index)}
         >
-          <ItemColor style={{ backgroundColor: tab.color }} />
+          {index === selectedIndex ? (
+            <Check
+              style={{ width: "16px", height: "16px", marginRight: "8px" }}
+            />
+          ) : (
+            <div
+              style={{ width: "16px", height: "16px", marginRight: "8px" }}
+            />
+          )}
+          {hasColors && <ItemColor style={{ backgroundColor: tab.color }} />}
           <ItemName>{tab.name}</ItemName>
         </StyledMenuItem>
       ))}

webapp/src/components/navigation/navigation.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material";
-import { ChevronLeft, ChevronRight, Menu, Plus } from "lucide-react";
+import { Menu, Plus } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { NAVIGATION_HEIGH } from "../constants";
@@ -71,11 +71,9 @@ function Navigation(props: NavigationProps) {
           ))}
         </SheetInner>
       </Sheets>
-      <LeftDivider />
-      <ChevronLeftStyled />
-      <ChevronRightStyled />
-      <RightDivider />
-      <Advert>ironcalc.com</Advert>
+      <Advert href="https://www.ironcalc.com" target="_blank">
+        ironcalc.com
+      </Advert>
       <SheetListMenu
         anchorEl={anchorEl}
         isOpen={open}
@@ -85,27 +83,12 @@ function Navigation(props: NavigationProps) {
           onSheetSelected(index);
           handleClose();
         }}
+        selectedIndex={selectedIndex}
       />
     </Container>
   );
 }
 
-const ChevronLeftStyled = styled(ChevronLeft)`
-  color: #333333;
-  width: 16px;
-  height: 16px;
-  padding: 4px;
-  cursor: pointer;
-`;
-
-const ChevronRightStyled = styled(ChevronRight)`
-  color: #333333;
-  width: 16px;
-  height: 16px;
-  padding: 4px;
-  cursor: pointer;
-`;
-
 // Note I have to specify the font-family in every component that can be considered stand-alone
 const Container = styled("div")`
   position: absolute;
@@ -129,24 +112,11 @@ const SheetInner = styled("div")`
   display: flex;
 `;
 
-const LeftDivider = styled("div")`
-  height: 10px;
-  width: 1px;
-  background-color: #eee;
-  margin: 0px 10px 0px 0px;
-`;
-
-const RightDivider = styled("div")`
-  height: 10px;
-  width: 1px;
-  background-color: #eee;
-  margin: 0px 20px 0px 10px;
-`;
-
-const Advert = styled("div")`
+const Advert = styled("a")`
   color: #f2994a;
   margin-right: 12px;
   font-size: 12px;
+  text-decoration: none;
 `;
 
 export default Navigation;

webapp/src/components/navigation/sheet.tsx

@@ -150,6 +150,7 @@ const Wrapper = styled("div")`
   border-top: 3px solid white;
   line-height: 34px;
   align-items: center;
+  cursor: pointer;
 `;
 
 const Name = styled("div")`