From cc72d031b5fa6f7825e7f30ddc5cec781e355b37 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Sun, 12 Jan 2025 23:58:37 +0100
Subject: [PATCH] Action buttons consistency and tooltips

---
 .../NameManagerDialog/NamedRangeActive.tsx    | 14 ++++++++++---
 .../NameManagerDialog/NamedRangeInactive.tsx  | 20 +++++++++++++++++--
 webapp/src/locale/en_us.json                  |  7 ++++++-
 3 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
index 57d5e54..fdcffac 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
@@ -84,17 +84,21 @@ function NamedRangeActive(properties: NamedRangeProperties) {
           onClick={(event) => event.stopPropagation()}
         />
         <IconsWrapper>
-          <IconButton
+          <StyledIconButton
             onClick={() => {
               const error = onSave(name, scope, formula);
               if (error) {
                 setFormulaError(true);
               }
             }}
+            title={t("name_manager_dialog.apply")}
           >
             <StyledCheck size={16} />
-          </IconButton>
-          <StyledIconButton onClick={onCancel}>
+          </StyledIconButton>
+          <StyledIconButton
+            onClick={onCancel}
+            title={t("name_manager_dialog.discard")}
+          >
             <X size={16} />
           </StyledIconButton>
         </IconsWrapper>
@@ -141,6 +145,10 @@ const StyledTextField = styled(TextField)(() => ({
 
 const StyledIconButton = styled(IconButton)(({ theme }) => ({
   color: theme.palette.error.main,
+  borderRadius: "8px",
+  "&:hover": {
+    backgroundColor: theme.palette.grey["50"],
+  },
   "&.Mui-disabled": {
     opacity: 0.6,
     color: theme.palette.error.light,
diff --git a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
index 6690448..b1f7022 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
@@ -28,10 +28,18 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
         <StyledDiv>{scopeName}</StyledDiv>
         <StyledDiv>{formula}</StyledDiv>
         <IconsWrapper>
-          <StyledIconButtonBlack onClick={onEdit} disabled={!showOptions}>
+          <StyledIconButtonBlack
+            onClick={onEdit}
+            disabled={!showOptions}
+            title={t("name_manager_dialog.edit")}
+          >
             <PencilLine size={16} />
           </StyledIconButtonBlack>
-          <StyledIconButtonRed onClick={onDelete} disabled={!showOptions}>
+          <StyledIconButtonRed
+            onClick={onDelete}
+            disabled={!showOptions}
+            title={t("name_manager_dialog.delete")}
+          >
             <Trash2 size={16} />
           </StyledIconButtonRed>
         </IconsWrapper>
@@ -43,10 +51,18 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
 
 const StyledIconButtonBlack = styled(IconButton)(({ theme }) => ({
   color: theme.palette.common.black,
+  borderRadius: "8px",
+  "&:hover": {
+    backgroundColor: theme.palette.grey["50"],
+  },
 }));
 
 const StyledIconButtonRed = styled(IconButton)(({ theme }) => ({
   color: theme.palette.error.main,
+  borderRadius: "8px",
+  "&:hover": {
+    backgroundColor: theme.palette.grey["50"],
+  },
   "&.Mui-disabled": {
     opacity: 0.6,
     color: theme.palette.error.light,
diff --git a/webapp/src/locale/en_us.json b/webapp/src/locale/en_us.json
index 172af24..63e6688 100644
--- a/webapp/src/locale/en_us.json
+++ b/webapp/src/locale/en_us.json
@@ -85,6 +85,11 @@
     "help": "Learn more about Named Ranges",
     "new": "Add new",
     "workbook": "Workbook",
-    "global": "(Global)"
+    "global": "(Global)",
+    "close": "Close dialog",
+    "delete": "Delete Range",
+    "edit": "Edit Range",
+    "apply": "Apply changes",
+    "discard": "Discard changes"
   }
 }