FIX: Fixes from Dani's design

webapp/src/AppComponents/FileMenu.tsx

@@ -3,7 +3,7 @@ import { Menu, MenuItem, Modal } from "@mui/material";
 import { FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { UploadFileDialog } from "./UploadFileDialog";
-import { getModelsMetadata, getSelectedUuuid } from "./storage";
+import { getModelsMetadata, getSelectedUuid } from "./storage";
 
 export function FileMenu(props: {
   newModel: () => void;
@@ -17,7 +17,7 @@ export function FileMenu(props: {
   const anchorElement = useRef<HTMLDivElement>(null);
   const models = getModelsMetadata();
   const uuids = Object.keys(models);
-  const selectedUuid = getSelectedUuuid();
+  const selectedUuid = getSelectedUuid();
 
   const elements = [];
   for (const uuid of uuids) {
@@ -32,7 +32,15 @@ export function FileMenu(props: {
         <span style={{ width: "20px" }}>
           {uuid === selectedUuid ? "•" : ""}
         </span>
-        <MenuItemText>{models[uuid]}</MenuItemText>
+        <MenuItemText
+          style={{
+            maxWidth: "240px",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {models[uuid]}
+        </MenuItemText>
       </MenuItemWrapper>,
     );
   }
@@ -144,6 +152,8 @@ const StyledTrash = styled(Trash2)`
 const MenuDivider = styled("div")`
   width: 80%;
   margin: auto;
+  margin-top: 8px;
+  margin-bottom: 8px;
   border-top: 1px solid #e0e0e0;
 `;
 
@@ -167,6 +177,7 @@ const FileMenuWrapper = styled("div")`
   padding: 10px;
   height: 20px;
   border-radius: 4px;
+  cursor: pointer;
   &:hover {
     background-color: #f2f2f2;
   }

webapp/src/AppComponents/ShareButton.tsx

@@ -1,28 +1,30 @@
+import styled from "@emotion/styled";
 import { Share2 } from "lucide-react";
 
 export function ShareButton(properties: { onClick: () => void }) {
   const { onClick } = properties;
   return (
-    <div
+    <Wrapper onClick={onClick} onKeyDown={() => {}}>
-      onClick={onClick}
-      onKeyDown={() => {}}
-      style={{
-        cursor: "pointer",
-        color: "#FFFFFF",
-        background: "#F2994A",
-        padding: "0px 10px",
-        height: "36px",
-        lineHeight: "36px",
-        borderRadius: "4px",
-        marginRight: "10px",
-        display: "flex",
-        alignItems: "center",
-        fontFamily: "Inter",
-        fontSize: "14px",
-      }}
-    >
       <Share2 style={{ width: "16px", height: "16px", marginRight: "10px" }} />
       <span>Share</span>
-    </div>
+    </Wrapper>
   );
 }
+
+const Wrapper = styled("div")`
+  cursor: pointer;
+  color: #ffffff;
+  background: #f2994a;
+  padding: 0px 10px;
+  height: 36px;
+  line-height: 36px;
+  border-radius: 4px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  font-family: "Inter";
+  font-size: 14px;
+  &:hover {
+    background: #d68742;
+  }
+`;

webapp/src/AppComponents/WorkbookTitle.tsx

@@ -97,4 +97,8 @@ const TitleWrapper = styled("textarea")`
   font-weight: inherit;
   font-family: inherit;
   font-size: inherit;
+  max-width: 520px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;

webapp/src/AppComponents/storage.ts

@@ -108,7 +108,7 @@ export function selectModelFromStorage(uuid: string): Model | null {
   return null;
 }
 
-export function getSelectedUuuid(): string | null {
+export function getSelectedUuid(): string | null {
   return localStorage.getItem("selected");
 }
 

webapp/src/components/WorksheetCanvas/worksheetCanvas.ts

@@ -1055,46 +1055,13 @@ export default class WorksheetCanvas {
       rowEnd,
       columnEnd,
     );
-    // const { border } = extendToArea;
     extendToOutline.style.border = `1px dashed ${outlineColor}`;
     extendToOutline.style.borderRadius = "3px";
-    // switch (border) {
-    //   case 'left': {
-    //     extendToOutline.style.borderLeft = 'none';
-    //     extendToOutline.style.borderTopLeftRadius = '0px';
-    //     extendToOutline.style.borderBottomLeftRadius = '0px';
 
-    //     break;
+    extendToOutline.style.left = `${areaX}px`;
-    //   }
+    extendToOutline.style.top = `${areaY}px`;
-    //   case 'right': {
+    extendToOutline.style.width = `${areaWidth - 1}px`;
-    //     extendToOutline.style.borderRight = 'none';
+    extendToOutline.style.height = `${areaHeight - 1}px`;
-    //     extendToOutline.style.borderTopRightRadius = '0px';
-    //     extendToOutline.style.borderBottomRightRadius = '0px';
-
-    //     break;
-    //   }
-    //   case 'top': {
-    //     extendToOutline.style.borderTop = 'none';
-    //     extendToOutline.style.borderTopRightRadius = '0px';
-    //     extendToOutline.style.borderTopLeftRadius = '0px';
-
-    //     break;
-    //   }
-    //   case 'bottom': {
-    //     extendToOutline.style.borderBottom = 'none';
-    //     extendToOutline.style.borderBottomRightRadius = '0px';
-    //     extendToOutline.style.borderBottomLeftRadius = '0px';
-
-    //     break;
-    //   }
-    //   default:
-    //     break;
-    // }
-    const padding = 1;
-    extendToOutline.style.left = `${areaX - padding}px`;
-    extendToOutline.style.top = `${areaY - padding}px`;
-    extendToOutline.style.width = `${areaWidth + 2 * padding}px`;
-    extendToOutline.style.height = `${areaHeight + 2 * padding}px`;
   }
 
   private getColumnWidth(sheet: number, column: number): number {
@@ -1176,8 +1143,8 @@ export default class WorksheetCanvas {
     }
 
     // Position the cell outline and clip it
-    cellOutline.style.left = `${x - padding - 1}px`;
+    cellOutline.style.left = `${x - padding - 2}px`;
-    cellOutline.style.top = `${y - padding - 1}px`;
+    cellOutline.style.top = `${y - padding - 2}px`;
     // Reset CSS properties
     cellOutline.style.minWidth = "";
     cellOutline.style.minHeight = "";
@@ -1185,8 +1152,8 @@ export default class WorksheetCanvas {
     cellOutline.style.maxHeight = "";
     cellOutline.style.overflow = "hidden";
     // New properties
-    cellOutline.style.width = `${width}px`;
+    cellOutline.style.width = `${width + 1}px`;
-    cellOutline.style.height = `${height}px`;
+    cellOutline.style.height = `${height + 1}px`;
 
     cellOutline.style.background = "none";
 
@@ -1221,10 +1188,10 @@ export default class WorksheetCanvas {
       );
       handleX = areaX + areaWidth;
       handleY = areaY + areaHeight;
-      areaOutline.style.left = `${areaX - padding}px`;
+      areaOutline.style.left = `${areaX - padding - 1}px`;
-      areaOutline.style.top = `${areaY - padding}px`;
+      areaOutline.style.top = `${areaY - padding - 1}px`;
-      areaOutline.style.width = `${areaWidth + 2 * padding}px`;
+      areaOutline.style.width = `${areaWidth + 2 * padding + 1}px`;
-      areaOutline.style.height = `${areaHeight + 2 * padding}px`;
+      areaOutline.style.height = `${areaHeight + 2 * padding + 1}px`;
       const clipLeft = rowStart < topLeftCell.row && rowStart > frozenRows;
       const clipTop =
         columnStart < topLeftCell.column && columnStart > frozenColumns;
@@ -1334,12 +1301,6 @@ export default class WorksheetCanvas {
   }
 
   renderSheet(): void {
-    console.time("renderSheet");
-    this._renderSheet();
-    console.timeEnd("renderSheet");
-  }
-
-  private _renderSheet(): void {
     const context = this.ctx;
     const { canvas } = this;
     const selectedSheet = this.model.getSelectedSheet();
@@ -1466,8 +1427,11 @@ export default class WorksheetCanvas {
     this.renderRowHeaders(frozenRows, topLeftCell, bottomRightCell);
 
     // square in the top left corner
-    context.fillStyle = headerBorderColor;
+    context.beginPath();
-    context.fillRect(0, 0, headerColumnWidth, headerRowHeight);
+    context.strokeStyle = gridSeparatorColor;
+    context.moveTo(0, 0.5);
+    context.lineTo(x + headerColumnWidth, 0.5);
+    context.stroke();
 
     this.drawCellOutline();
     this.drawCellEditor();

webapp/src/components/formatMenu.tsx

@@ -137,6 +137,7 @@ const MenuItemText = styled("div")`
 `;
 
 const MenuItemExample = styled("div")`
+  color: #bdbdbd;
   margin-left: 20px;
 `;
 

webapp/src/components/navigation/navigation.tsx

@@ -101,6 +101,7 @@ const Container = styled("div")`
   padding-left: 12px;
   font-family: Inter;
   background-color: #fff;
+  border-top: 1px solid #E0E0E0;
 `;
 
 const Sheets = styled("div")`

webapp/src/components/toolbar.tsx

@@ -438,7 +438,7 @@ export const StyledButton = styled("button")<TypeButtonProperties>(
 const Divider = styled("div")({
   width: "0px",
   height: "10px",
-  borderLeft: "1px solid #D3D6E9",
+  borderLeft: "1px solid #E0E0E0",
   marginLeft: "5px",
   marginRight: "10px",
 });

webapp/src/locale/en_us.json

@@ -27,7 +27,7 @@
       "number": "Number",
       "percentage": "Percentage",
       "currency_eur": "Euro (EUR)",
-      "currency_usd": "Dollar (USD",
+      "currency_usd": "Dollar (USD)",
       "currency_gbp": "British Pound (GBD)",
       "date_short": "Short date",
       "date_long": "Long date",