From 85cd7ab6a34aad3a7c2b616a48623d786923e8b8 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Fri, 29 Nov 2024 00:11:17 +0100
Subject: [PATCH] UPDATE: design adjustments in 'File' menu

---
 webapp/src/AppComponents/FileMenu.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/webapp/src/AppComponents/FileMenu.tsx b/webapp/src/AppComponents/FileMenu.tsx
index d390d57..57cf8d5 100644
--- a/webapp/src/AppComponents/FileMenu.tsx
+++ b/webapp/src/AppComponents/FileMenu.tsx
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
-import { FileDown, FileUp, Plus, Trash2 } from "lucide-react";
+import { FileDown, FileUp, Plus, Trash2, Check } from "lucide-react";
 import { useRef, useState } from "react";
 import { UploadFileDialog } from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
@@ -29,9 +29,9 @@ export function FileMenu(props: {
           setMenuOpen(false);
         }}
       >
-        <span style={{ width: "20px" }}>
-          {uuid === selectedUuid ? "•" : ""}
-        </span>
+        <CheckIndicator>
+          {uuid === selectedUuid ? <StyledCheck /> : ""}
+        </CheckIndicator>
         <MenuItemText
           style={{
             maxWidth: "240px",
@@ -149,6 +149,13 @@ const StyledTrash = styled(Trash2)`
   padding-right: 10px;
 `;
 
+const StyledCheck = styled(Check)`
+  width: 16px;
+  height: 16px;
+  color: #333333;
+  padding-right: 10px;
+`;
+
 const MenuDivider = styled("div")`
   width: 80%;
   margin: auto;
@@ -182,3 +189,9 @@ const FileMenuWrapper = styled("div")`
     background-color: #f2f2f2;
   }
 `;
+
+const CheckIndicator = styled("span")`
+  display: flex;
+  justify-content: center;
+  min-width: 26px;
+`;