sirtimbly/IronCalc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: Replace SVG "X" icons with Lucide icons for consistency in dialogs

Browse Source
This commit is contained in:
Daniel
2024-12-22 14:51:50 +01:00
committed by Nicolás Hatcher Andrés
parent dbddc027fb
commit 8ba131011e
3 changed files with 45 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
webapp/src/AppComponents/UploadFileDialog.tsx
View File

@@ -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")`

44
webapp/src/components/SheetTabBar/SheetRenameDialog.tsx
View File

@@ -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")`

42
webapp/src/components/formatPicker.tsx
View File

@@ -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")`