Merge pull request #205 from ironcalc/bugfix/nico-dialog-fixes

FIX[WebApp]: Some fixes to the DeleteWorkbook and Import dialogs

webapp/src/AppComponents/DeleteWorkbookDialog.tsx

@@ -1,21 +1,24 @@
 import styled from "@emotion/styled";
 import { Trash2 } from "lucide-react";
-import { forwardRef, useEffect } from "react";
-import { theme } from "../theme";
+import { useEffect, useRef } from "react";
+
+interface DeleteWorkbookDialogProperties {
+  onClose: () => void;
+  onConfirm: () => void;
+  workbookName: string;
+}
+
+function DeleteWorkbookDialog(properties: DeleteWorkbookDialogProperties) {
+  const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
-export const DeleteWorkbookDialog = forwardRef<
-  HTMLDivElement,
-  {
-    onClose: () => void;
-    onConfirm: () => void;
-    workbookName: string;
-  }
->((properties, ref) => {
   useEffect(() => {
     const root = document.getElementById("root");
     if (root) {
       root.style.filter = "blur(2px)";
     }
+    if (deleteButtonRef.current) {
+      deleteButtonRef.current.focus();
+    }
     return () => {
       const root = document.getElementById("root");
       if (root) {
@@ -26,8 +29,12 @@ export const DeleteWorkbookDialog = forwardRef<
 
   return (
     <DialogWrapper
-      ref={ref}
       tabIndex={-1}
+      onKeyDown={(event) => {
+        if (event.code === "Escape") {
+          properties.onClose();
+        }
+      }}
       role="dialog"
       aria-labelledby="delete-dialog-title"
       aria-describedby="delete-dialog-description"
@@ -47,6 +54,7 @@ export const DeleteWorkbookDialog = forwardRef<
               properties.onConfirm();
               properties.onClose();
             }}
+            ref={deleteButtonRef}
           >
             Yes, delete workbook
           </DeleteButton>
@@ -55,10 +63,25 @@ export const DeleteWorkbookDialog = forwardRef<
       </ContentWrapper>
     </DialogWrapper>
   );
-});
+}
 
 DeleteWorkbookDialog.displayName = "DeleteWorkbookDialog";
 
+// some colors taken from the IronCalc palette
+const COMMON_WHITE = "#FFF";
+const COMMON_BLACK = "#272525";
+
+const ERROR_MAIN = "#EB5757";
+const ERROR_DARK = "#CB4C4C";
+
+const GREY_200 = "#EEEEEE";
+const GREY_300 = "#E0E0E0";
+const GREY_700 = "#616161";
+const GREY_900 = "#333333";
+
+const PRIMARY_MAIN = "#F2994A";
+const PRIMARY_DARK = "#D68742";
+
 const DialogWrapper = styled.div`
   position: fixed;
   top: 50%;
@@ -70,7 +93,7 @@ const DialogWrapper = styled.div`
   gap: 16px;
   padding: 12px;
   border-radius: 8px;
-  box-shadow: 0px 1px 3px 0px ${theme.palette.common.black}1A;
+  box-shadow: 0px 1px 3px 0px ${COMMON_BLACK}1A;
   width: 280px;
   max-width: calc(100% - 40px);
   z-index: 50;
@@ -84,9 +107,9 @@ const IconWrapper = styled.div`
   width: 36px;
   height: 36px;
   border-radius: 4px;
-  background-color: ${theme.palette.error.main}1A;
+  background-color: ${ERROR_MAIN}1A;
   margin: 12px auto 0 auto;
-  color: ${theme.palette.error.main};
+  color: ${ERROR_MAIN};
   svg {
     width: 16px;
     height: 16px;
@@ -106,13 +129,13 @@ const Title = styled.h2`
   margin: 0;
   font-weight: 600;
   font-size: inherit;
-  color: ${theme.palette.grey["900"]};
+  color: ${GREY_900};
 `;
 
 const Body = styled.p`
   margin: 0;
   text-align: center;
-  color: ${theme.palette.grey["900"]};
+  color: ${GREY_900};
   font-size: 12px;
 `;
 
@@ -126,8 +149,8 @@ const ButtonGroup = styled.div`
 
 const Button = styled.button`
   cursor: pointer;
-  color: ${theme.palette.common.white};
-  background-color: ${theme.palette.primary.main};
+  color: ${COMMON_WHITE};
+  background-color: ${PRIMARY_MAIN};
   padding: 0px 10px;
   height: 36px;
   border-radius: 4px;
@@ -139,22 +162,24 @@ const Button = styled.button`
   text-overflow: ellipsis;
   transition: background-color 150ms;
   &:hover {
-    background-color: ${theme.palette.primary.dark};
+    background-color: ${PRIMARY_DARK};
   }
 `;
 
 const DeleteButton = styled(Button)`
-  background-color: ${theme.palette.error.main};
-  color: ${theme.palette.common.white};
+  background-color: ${ERROR_MAIN};
+  color: ${COMMON_WHITE};
   &:hover {
-    background-color: ${theme.palette.error.dark};
+    background-color: ${ERROR_DARK};
   }
 `;
 
 const CancelButton = styled(Button)`
-  background-color: ${theme.palette.grey["200"]};
-  color: ${theme.palette.grey["700"]};
+  background-color: ${GREY_200};
+  color: ${GREY_700};
   &:hover {
-    background-color: ${theme.palette.grey["300"]};
+    background-color: ${GREY_300};
   }
 `;
+
+export default DeleteWorkbookDialog;

webapp/src/AppComponents/FileMenu.tsx

@@ -2,8 +2,8 @@ import styled from "@emotion/styled";
 import { Menu, MenuItem, Modal } from "@mui/material";
 import { Check, FileDown, FileUp, Plus, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
-import { DeleteWorkbookDialog } from "./DeleteWorkbookDialog";
-import { UploadFileDialog } from "./UploadFileDialog";
+import DeleteWorkbookDialog from "./DeleteWorkbookDialog";
+import UploadFileDialog from "./UploadFileDialog";
 import { getModelsMetadata, getSelectedUuid } from "./storage";
 
 export function FileMenu(props: {
@@ -105,10 +105,6 @@ export function FileMenu(props: {
       <Modal
         open={isImportMenuOpen}
         onClose={() => {
-          const root = document.getElementById("root");
-          if (root) {
-            root.style.filter = "";
-          }
           setImportMenuOpen(false);
         }}
         aria-labelledby="modal-modal-title"
@@ -117,10 +113,6 @@ export function FileMenu(props: {
         <>
           <UploadFileDialog
             onClose={() => {
-              const root = document.getElementById("root");
-              if (root) {
-                root.style.filter = "";
-              }
               setImportMenuOpen(false);
             }}
             onModelUpload={props.onModelUpload}
@@ -133,11 +125,13 @@ export function FileMenu(props: {
         aria-labelledby="delete-dialog-title"
         aria-describedby="delete-dialog-description"
       >
-        <DeleteWorkbookDialog
-          onClose={() => setDeleteDialogOpen(false)}
-          onConfirm={props.onDelete}
-          workbookName={selectedUuid ? models[selectedUuid] : ""}
-        />
+        <>
+          <DeleteWorkbookDialog
+            onClose={() => setDeleteDialogOpen(false)}
+            onConfirm={props.onDelete}
+            workbookName={selectedUuid ? models[selectedUuid] : ""}
+          />
+        </>
       </Modal>
     </>
   );

webapp/src/AppComponents/UploadFileDialog.tsx

@@ -1,17 +1,34 @@
 import styled from "@emotion/styled";
 import { BookOpen, FileUp } from "lucide-react";
-import { type DragEvent, useRef, useState } from "react";
+import { type DragEvent, useEffect, useRef, useState } from "react";
 
-export function UploadFileDialog(properties: {
+function UploadFileDialog(properties: {
   onClose: () => void;
   onModelUpload: (blob: ArrayBuffer, fileName: string) => Promise<void>;
 }) {
   const [hover, setHover] = useState(false);
   const [message, setMessage] = useState("");
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const crossRef = useRef<HTMLDivElement>(null);
 
   const { onModelUpload } = properties;
 
+  useEffect(() => {
+    const root = document.getElementById("root");
+    if (root) {
+      root.style.filter = "blur(2px)";
+    }
+    if (crossRef.current) {
+      crossRef.current.focus();
+    }
+    return () => {
+      const root = document.getElementById("root");
+      if (root) {
+        root.style.filter = "none";
+      }
+    };
+  }, []);
+
   const handleClose = () => {
     properties.onClose();
   };
@@ -79,12 +96,16 @@ export function UploadFileDialog(properties: {
     reader.readAsArrayBuffer(file);
   };
 
-  const root = document.getElementById("root");
-  if (root) {
-    root.style.filter = "blur(4px)";
-  }
   return (
-    <UploadDialog>
+    <UploadDialog
+      tabIndex={-1}
+      role="dialog"
+      onKeyDown={(event) => {
+        if (event.code === "Escape") {
+          handleClose();
+        }
+      }}
+    >
       <UploadTitle>
         <span style={{ flexGrow: 2, marginLeft: 12 }}>
           Import an .xlsx file
@@ -92,7 +113,8 @@ export function UploadFileDialog(properties: {
         <Cross
           style={{ marginRight: 12 }}
           onClick={handleClose}
-          onKeyDown={() => {}}
+          ref={crossRef}
+          tabIndex={0}
         >
           <svg
             width="16"
@@ -300,3 +322,5 @@ const DropZone = styled("div")`
   gap: 16px;
   transition: 0.2s ease-in-out;
 `;
+
+export default UploadFileDialog;