Action buttons consistency and tooltips

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>
-          <StyledIconButton onClick={onCancel}>
+          <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,

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,

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"
   }
 }