From ae1afac049afab87bcbff74faf787d09eea1226e Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Wed, 6 May 2020 09:02:39 +0200
Subject: [PATCH] Added tooltips for regenerate buttons

no issues.
- added tooltip for icon-only regenerate button in custom integrations and Zapier details screen so that users understand what the button does
---
 .../admin/app/templates/settings/integration.hbs | 16 ++++++++--------
 .../templates/settings/integrations/zapier.hbs   |  6 +++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ghost/admin/app/templates/settings/integration.hbs b/ghost/admin/app/templates/settings/integration.hbs
index 31f8fd500f..5b484aef27 100644
--- a/ghost/admin/app/templates/settings/integration.hbs
+++ b/ghost/admin/app/templates/settings/integration.hbs
@@ -95,13 +95,13 @@
                 <tbody>
                     <tr>
                         <td class="pa3 pl0 fw7 f8 w35 v-top">Content API Key</td>
-                        <td class="pa0 truncate bb b--lightgrey">
-                            <div class="pt3 pb3 relative truncate flex items-center {{unless this.copyContentKey.isRunning "hide-child-instant"}}">
-                                <span class="midlightgrey" data-test-text="content-key">
+                        <td class="pa0 bb b--lightgrey">
+                            <div class="pt3 pb3 relative flex items-center {{unless this.copyContentKey.isRunning "hide-child-instant"}}">
+                                <span class="midlightgrey truncate" data-test-text="content-key">
                                     {{this.integration.contentKey.secret}}
                                 </span>
                                 <div class="absolute top-2 right-0 flex items-stretch child">
-                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.contentKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2">
+                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.contentKey}} class="bg-white ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2" data-tooltip="Regenerate">
                                         {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
                                     </button>
                                     <button type="button" {{action (perform this.copyContentKey)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
@@ -120,13 +120,13 @@
                     </tr>
                     <tr>
                         <td class="pa3 pl0 w50 fw7 f8 w35 v-top">Admin API Key</td>
-                        <td class="pa0 truncate bb b--lightgrey">
-                            <div class="pt3 pb3 relative truncate flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
-                                <span class="midlightgrey" data-test-text="admin-key">
+                        <td class="pa0 bb b--lightgrey">
+                            <div class="pt3 pb3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
+                                <span class="midlightgrey truncate" data-test-text="admin-key">
                                     {{this.integration.adminKey.secret}}
                                 </span>
                                 <div class="absolute top-2 right-0 flex items-stretch child">
-                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2">
+                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="bg-white ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2" data-tooltip="Regenerate">
                                         {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
                                     </button>
                                     <button type="button" {{action (perform this.copyAdminKey)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">
diff --git a/ghost/admin/app/templates/settings/integrations/zapier.hbs b/ghost/admin/app/templates/settings/integrations/zapier.hbs
index 950099efd8..08140f0d87 100644
--- a/ghost/admin/app/templates/settings/integrations/zapier.hbs
+++ b/ghost/admin/app/templates/settings/integrations/zapier.hbs
@@ -26,12 +26,12 @@
                     <tr class="bb b--lightgrey">
                         <td class="pa3 w50 fw7 v-top">Admin API Key</td>
                         <td class="pa0">
-                            <div class="pa3 relative truncate flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
-                                <span class="midgrey" data-test-text="admin-key">
+                            <div class="pa3 relative flex items-center {{unless this.copyAdminKey.isRunning "hide-child-instant"}}">
+                                <span class="midgrey truncate" data-test-text="admin-key">
                                     {{this.integration.adminKey.secret}}
                                 </span>
                                 <div class="absolute top-2 right-2 flex items-stretch child">
-                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2">
+                                    <button type="button" {{action "confirmRegenerateKeyModal" this.integration.adminKey}} class="ba b--lightgrey-d1 br3 pa1 pl2 pr2 flex items-center mr2 bg-white" data-tooltip="Regenerate">
                                         {{svg-jar "reload" class="w4 h4 stroke-midgrey"}}
                                     </button>
                                     <button type="button" {{action (perform this.copyAdminKey)}} class="bg-black-70 f8 pa1 pr3 pl3 br3 white fw4 flex items-center">