refactor: misc tooltip improvements (#895)

* refactor: improve tooltip text

* refactor: fix project edit button tooltip position

* refactor: fix header docs link tooltip position

frontend/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>

frontend/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>

frontend/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>

frontend/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',
-    },
 }));

frontend/src/component/menu/Header/Header.tsx

@@ -120,15 +120,14 @@ const Header = () => {
                         />
                     </div>
                     <div className={styles.userContainer}>
-                        <Tooltip title="Go to the documentation">
+                        <Tooltip title="Documentation">
-                            <a
+                            <IconButton
                                 href="https://docs.getunleash.io/"
                                 target="_blank"
                                 rel="noopener noreferrer"
-                                className={styles.docsLink}
                             >
-                                <MenuBookIcon className={styles.docsIcon} />
+                                <MenuBookIcon />
-                            </a>
+                            </IconButton>
                         </Tooltip>
                         <ConditionallyRender
                             condition={admin}
@@ -139,9 +138,7 @@ const Header = () => {
                                             setAnchorEl(e.currentTarget)
                                         }
                                     >
-                                        <SettingsIcon
+                                        <SettingsIcon />
-                                            className={styles.docsIcon}
-                                        />
                                     </IconButton>
                                 </Tooltip>
                             }

frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx

@@ -49,17 +49,19 @@ const ProjectInfo = ({
         [styles.permissionButtonShortDesc]: isShortDescription,
     });
     const permissionButton = (
-        <PermissionIconButton
+        <div>
-            permission={UPDATE_PROJECT}
+            <PermissionIconButton
-            projectId={id}
+                permission={UPDATE_PROJECT}
-            component={Link}
+                projectId={id}
-            className={permissionButtonClass}
+                component={Link}
-            data-loading
+                className={permissionButtonClass}
-            to={`/projects/${id}/edit`}
+                data-loading
-            tooltip="Edit description"
+                to={`/projects/${id}/edit`}
-        >
+                tooltip="Edit description"
-            <Edit />
+            >
-        </PermissionIconButton>
+                <Edit />
+            </PermissionIconButton>
+        </div>
     );
 
     return (

frontend/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>