From 8ba131011e6a17963745a86ce893654c5e15a7fd Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Sun, 22 Dec 2024 14:51:50 +0100
Subject: [PATCH] FIX: Replace SVG "X" icons with Lucide icons for consistency
 in dialogs

---
 webapp/src/AppComponents/UploadFileDialog.tsx | 30 ++++---------
 .../SheetTabBar/SheetRenameDialog.tsx         | 44 +++++++++----------
 webapp/src/components/formatPicker.tsx        | 42 +++++++-----------
 3 files changed, 45 insertions(+), 71 deletions(-)

diff --git a/webapp/src/AppComponents/UploadFileDialog.tsx b/webapp/src/AppComponents/UploadFileDialog.tsx
index 775bfc2..c8ec289 100644
--- a/webapp/src/AppComponents/UploadFileDialog.tsx
+++ b/webapp/src/AppComponents/UploadFileDialog.tsx
@@ -1,5 +1,5 @@
 import styled from "@emotion/styled";
-import { BookOpen, FileUp } from "lucide-react";
+import { BookOpen, FileUp, X } from "lucide-react";
 import { type DragEvent, useEffect, useRef, useState } from "react";
 
 function UploadFileDialog(properties: {
@@ -113,30 +113,11 @@ function UploadFileDialog(properties: {
         <Cross
           style={{ marginRight: 12 }}
           onClick={handleClose}
+          title="Close Dialog"
           ref={crossRef}
           tabIndex={0}
         >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Close</title>
-            <path
-              d="M12 4.5L4 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M4 4.5L12 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <X />
         </Cross>
       </UploadTitle>
       {message === "" ? (
@@ -237,6 +218,11 @@ const Cross = styled("div")`
   cursor: pointer;
   align-items: center;
   justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
 `;
 
 const DocLink = styled("span")`
diff --git a/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx b/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
index 6299870..03971fb 100644
--- a/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
+++ b/webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
@@ -1,5 +1,6 @@
 import { Dialog, TextField, styled } from "@mui/material";
-import { useState } from "react";
+import { Check, X } from "lucide-react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { theme } from "../../theme";
 
@@ -13,6 +14,7 @@ interface SheetRenameDialogProps {
 const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
   const { t } = useTranslation();
   const [name, setName] = useState(properties.defaultName);
+  const crossRef = useRef<HTMLDivElement>(null);
   const handleClose = () => {
     properties.onClose();
   };
@@ -20,28 +22,14 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
     <Dialog open={properties.open} onClose={properties.onClose}>
       <StyledDialogTitle>
         {t("sheet_rename.title")}
-        <Cross onClick={handleClose} onKeyDown={() => {}}>
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Close</title>
-            <path
-              d="M12 4.5L4 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M4 4.5L12 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+        <Cross
+          onClick={handleClose}
+          title="Close Dialog"
+          ref={crossRef}
+          tabIndex={0}
+          onKeyDown={() => {}}
+        >
+          <X />
         </Cross>
       </StyledDialogTitle>
       <StyledDialogContent>
@@ -73,6 +61,9 @@ const SheetRenameDialog = (properties: SheetRenameDialogProps) => {
             properties.onNameChanged(name);
           }}
         >
+          <Check
+            style={{ width: "16px", height: "16px", marginRight: "8px" }}
+          />
           {t("sheet_rename.rename")}
         </StyledButton>
       </DialogFooter>
@@ -94,7 +85,7 @@ const StyledDialogTitle = styled("div")`
 
 const Cross = styled("div")`
   &:hover {
-    background-color: ${theme.palette.grey["100"]};
+    background-color: ${theme.palette.grey["50"]};
   }
   display: flex;
   border-radius: 4px;
@@ -103,6 +94,11 @@ const Cross = styled("div")`
   cursor: pointer;
   align-items: center;
   justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
 `;
 
 const StyledDialogContent = styled("div")`
diff --git a/webapp/src/components/formatPicker.tsx b/webapp/src/components/formatPicker.tsx
index eb384d8..377114c 100644
--- a/webapp/src/components/formatPicker.tsx
+++ b/webapp/src/components/formatPicker.tsx
@@ -1,7 +1,7 @@
 import styled from "@emotion/styled";
 import { Dialog, TextField } from "@mui/material";
-import { Check } from "lucide-react";
-import { useState } from "react";
+import { Check, X } from "lucide-react";
+import { useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { theme } from "../theme";
 
@@ -17,6 +17,7 @@ type FormatPickerProps = {
 const FormatPicker = (properties: FormatPickerProps) => {
   const { t } = useTranslation();
   const [formatCode, setFormatCode] = useState(properties.numFmt);
+  const crossRef = useRef<HTMLDivElement>(null);
 
   const handleClose = () => {
     properties.onClose();
@@ -36,28 +37,14 @@ const FormatPicker = (properties: FormatPickerProps) => {
     >
       <StyledDialogTitle>
         {t("num_fmt.title")}
-        <Cross onClick={handleClose} onKeyDown={() => {}}>
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <title>Close</title>
-            <path
-              d="M12 4.5L4 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M4 4.5L12 12.5"
-              stroke="#333333"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+        <Cross
+          onClick={handleClose}
+          title="Close Dialog"
+          ref={crossRef}
+          tabIndex={0}
+          onKeyDown={() => {}}
+        >
+          <X />
         </Cross>
       </StyledDialogTitle>
 
@@ -101,7 +88,7 @@ const StyledDialogTitle = styled("div")`
 
 const Cross = styled("div")`
   &:hover {
-    background-color: ${theme.palette.grey["100"]};
+    background-color: ${theme.palette.grey["50"]};
   }
   display: flex;
   border-radius: 4px;
@@ -110,6 +97,11 @@ const Cross = styled("div")`
   cursor: pointer;
   align-items: center;
   justify-content: center;
+  svg {
+    width: 16px;
+    height: 16px;
+    stroke-width: 1.5;
+  }
 `;
 
 const StyledDialogContent = styled("div")`