From 8c1efafb11a73493adff8396d0b068b3f6d6d847 Mon Sep 17 00:00:00 2001
From: olav <mail@olav.io>
Date: Thu, 21 Apr 2022 11:01:42 +0200
Subject: [PATCH] refactor: misc tooltip improvements (#895)

* refactor: improve tooltip text

* refactor: fix project edit button tooltip position

* refactor: fix header docs link tooltip position
---
 .../FeatureStrategyRemove.tsx                 |  8 +++----
 .../FeatureOverviewEnvironmentStrategy.tsx    |  2 +-
 .../feature/FeatureView/FeatureView.tsx       |  2 +-
 src/component/menu/Header/Header.styles.ts    | 12 ----------
 src/component/menu/Header/Header.tsx          | 13 ++++------
 .../Project/ProjectInfo/ProjectInfo.tsx       | 24 ++++++++++---------
 .../project/ProjectCard/ProjectCard.tsx       |  2 +-
 7 files changed, 25 insertions(+), 38 deletions(-)

diff --git a/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
index 5954c35c10..cd44236066 100644
--- a/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
@@ -69,7 +69,7 @@ export const FeatureStrategyRemove = ({
                         disabled={disabled}
                         permission={DELETE_FEATURE_STRATEGY}
                         data-testid={STRATEGY_FORM_REMOVE_ID}
-                        tooltip="Delete strategy"
+                        tooltip="Remove strategy"
                         type="button"
                     >
                         <Delete />
@@ -87,20 +87,20 @@ export const FeatureStrategyRemove = ({
                         variant="text"
                         type="button"
                     >
-                        Delete strategy
+                        Remove strategy
                     </PermissionButton>
                 }
             />
             <Dialogue
                 title="Are you sure you want to delete this strategy?"
                 open={openDialogue}
-                primaryButtonText="Delete strategy"
+                primaryButtonText="Remove strategy"
                 secondaryButtonText="Cancel"
                 onClick={onRemove}
                 onClose={() => setOpenDialogue(false)}
             >
                 <Alert severity="error">
-                    Deleting the strategy will change which users receive access
+                    Removing the strategy will change which users receive access
                     to the feature.
                 </Alert>
             </Dialogue>
diff --git a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
index e6d2004ae5..487348827d 100644
--- a/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
@@ -53,7 +53,7 @@ const FeatureOverviewEnvironmentStrategy = ({
                         projectId={projectId}
                         component={Link}
                         to={editStrategyPath}
-                        tooltip="Edit"
+                        tooltip="Edit strategy"
                     >
                         <Edit />
                     </PermissionIconButton>
diff --git a/src/component/feature/FeatureView/FeatureView.tsx b/src/component/feature/FeatureView/FeatureView.tsx
index 7d7f3e54cd..96d356dbb0 100644
--- a/src/component/feature/FeatureView/FeatureView.tsx
+++ b/src/component/feature/FeatureView/FeatureView.tsx
@@ -138,7 +138,7 @@ export const FeatureView = () => {
                                     data-loading
                                     component={Link}
                                     to={`/projects/${projectId}/features/${featureId}/strategies/copy`}
-                                    tooltip="Copy feature"
+                                    tooltip="Copy feature toggle"
                                 >
                                     <FileCopy />
                                 </PermissionIconButton>
diff --git a/src/component/menu/Header/Header.styles.ts b/src/component/menu/Header/Header.styles.ts
index f95cb9167b..f2cdd17ae3 100644
--- a/src/component/menu/Header/Header.styles.ts
+++ b/src/component/menu/Header/Header.styles.ts
@@ -81,16 +81,4 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         color: '#000',
     },
-    docsLink: {
-        color: '#000',
-        textDecoration: 'none',
-        padding: '0.25rem 0.8rem',
-        display: 'flex',
-        alignItems: 'center',
-    },
-    docsIcon: {
-        color: '#6C6C6C',
-        height: '25px',
-        width: '25px',
-    },
 }));
diff --git a/src/component/menu/Header/Header.tsx b/src/component/menu/Header/Header.tsx
index 2596251696..ecddde0b31 100644
--- a/src/component/menu/Header/Header.tsx
+++ b/src/component/menu/Header/Header.tsx
@@ -120,15 +120,14 @@ const Header = () => {
                         />
                     </div>
                     <div className={styles.userContainer}>
-                        <Tooltip title="Go to the documentation">
-                            <a
+                        <Tooltip title="Documentation">
+                            <IconButton
                                 href="https://docs.getunleash.io/"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className={styles.docsLink}
                             >
-                                <MenuBookIcon className={styles.docsIcon} />
-                            </a>
+                                <MenuBookIcon />
+                            </IconButton>
                         </Tooltip>
                         <ConditionallyRender
                             condition={admin}
@@ -139,9 +138,7 @@ const Header = () => {
                                             setAnchorEl(e.currentTarget)
                                         }
                                     >
-                                        <SettingsIcon
-                                            className={styles.docsIcon}
-                                        />
+                                        <SettingsIcon />
                                     </IconButton>
                                 </Tooltip>
                             }
diff --git a/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 8fc563217d..e4bf8829fe 100644
--- a/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -49,17 +49,19 @@ const ProjectInfo = ({
         [styles.permissionButtonShortDesc]: isShortDescription,
     });
     const permissionButton = (
-        <PermissionIconButton
-            permission={UPDATE_PROJECT}
-            projectId={id}
-            component={Link}
-            className={permissionButtonClass}
-            data-loading
-            to={`/projects/${id}/edit`}
-            tooltip="Edit description"
-        >
-            <Edit />
-        </PermissionIconButton>
+        <div>
+            <PermissionIconButton
+                permission={UPDATE_PROJECT}
+                projectId={id}
+                component={Link}
+                className={permissionButtonClass}
+                data-loading
+                to={`/projects/${id}/edit`}
+                tooltip="Edit description"
+            >
+                <Edit />
+            </PermissionIconButton>
+        </div>
     );
 
     return (
diff --git a/src/component/project/ProjectCard/ProjectCard.tsx b/src/component/project/ProjectCard/ProjectCard.tsx
index e0e2e01baa..5ee4b06bf0 100644
--- a/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/src/component/project/ProjectCard/ProjectCard.tsx
@@ -73,7 +73,7 @@ export const ProjectCard = ({
                     className={styles.actionsBtn}
                     data-loading
                     onClick={handleClick}
-                    tooltip="Menu"
+                    tooltip="Options"
                 >
                     <MoreVertIcon />
                 </PermissionIconButton>