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
-      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",
-      }}
-    >
+    <Wrapper onClick={onClick} onKeyDown={() => {}}>
       <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

@@ -77,24 +77,28 @@ export function WorkbookTitle(props: {
 }
 
 const TitleWrapper = styled("textarea")`
-    vertical-align: middle;
-    text-align: center;
-    height: 20px;
-    line-height: 20px;
-    border-radius: 4px;
-    padding: inherit;
-    overflow: hidden;
-    outline: none;
-    resize: none;
-    text-wrap: nowrap;
-    border: none;
-    &:hover {
-      background-color: #f2f2f2;
-    }
-    &:focus {
-      border: 1px solid grey;
-    }
-    font-weight: inherit;
-    font-family: inherit;
-    font-size: inherit;
-  `;
+  vertical-align: middle;
+  text-align: center;
+  height: 20px;
+  line-height: 20px;
+  border-radius: 4px;
+  padding: inherit;
+  overflow: hidden;
+  outline: none;
+  resize: none;
+  text-wrap: nowrap;
+  border: none;
+  &:hover {
+    background-color: #f2f2f2;
+  }
+  &:focus {
+    border: 1px solid grey;
+  }
+  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");
 }