refactor: misc tooltip improvements (#895)

* refactor: improve tooltip text * refactor: fix project edit button tooltip position * refactor: fix header docs link tooltip position
2025-10-27 11:02:16 +01:00 · 2022-04-21 11:01:42 +02:00 · 2022-04-21 11:01:42 +02:00 · fd8e1c196c
commit fd8e1c196c
parent e5e8349593
7 changed files with 25 additions and 38 deletions
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/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>
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/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>
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/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>
--- a/frontend/src/component/menu/Header/Header.styles.ts
+++ b/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',
-    },
 }));
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/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>
                            }
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/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 (
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/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>