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/AppComponents/FileBar.tsx

@@ -51,7 +51,9 @@ export function FileBar(properties: {
         {toast ? (
           <Toast>
             <CircleCheck style={{ width: 12 }} />
-            <span style={{ marginLeft: 8, marginRight: 12 }}>
+            <span
+              style={{ marginLeft: 8, marginRight: 12, fontFamily: "Inter" }}
+            >
               URL copied to clipboard
             </span>
           </Toast>

webapp/src/AppComponents/ShareButton.tsx

@@ -7,8 +7,6 @@ export function ShareButton(properties: { onClick: () => void }) {
       onClick={onClick}
       onKeyDown={() => {}}
       style={{
-        // position: "absolute",
-        // right: "0px",
         cursor: "pointer",
         color: "#FFFFFF",
         background: "#F2994A",
@@ -19,6 +17,8 @@ export function ShareButton(properties: { onClick: () => void }) {
         marginRight: "10px",
         display: "flex",
         alignItems: "center",
+        fontFamily: "Inter",
+        fontSize: "14px",
       }}
     >
       <Share2 style={{ width: "16px", height: "16px", marginRight: "10px" }} />

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 } =
+  const {
-    properties;
+    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 />
+      <Advert href="https://www.ironcalc.com" target="_blank">
-      <ChevronLeftStyled />
+        ironcalc.com
-      <ChevronRightStyled />
+      </Advert>
-      <RightDivider />
-      <Advert>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")`
+const Advert = styled("a")`
-  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")`
   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")`

webapp/src/icons/border-style.svg

@@ -1,15 +1,7 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<!-- <path d="M14 4H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<line x1="0" y1="2" x2="16" y2="2" stroke="#000"/>
-<path d="M14 8H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="2 2"/>
-<path d="M14 12H2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="0.01 2"/> -->
-<style>
-    line {
-      stroke: black;
-    }
-  </style>
-<line x1="0" y1="2" x2="16" y2="2" />
   <!-- Dashes and gaps of the same size -->
-<line x1="0" y1="8" x2="16" y2="8" stroke-dasharray="2.28 2.28" />
+<line x1="0" y1="8" x2="16" y2="8" stroke-dasharray="2.28 2.28" stroke="#000"/>
   <!-- Dashes and gaps of different sizes -->
-<line x1="0" y1="14" x2="16" y2="14" stroke-dasharray="1 2" />
+<line x1="0" y1="14" x2="16" y2="14" stroke-dasharray="1 2" stroke="#000"/>
 </svg>