From 9a0de78da76a1c002fc87c0509f25672605c4d60 Mon Sep 17 00:00:00 2001
From: Sylvain <sylvain@sleede.com>
Date: Tue, 12 Apr 2022 16:53:31 +0200
Subject: [PATCH] (ui) adjust tooltip aspect

+ (bug) do not ignore clipboard.writeText promise
+ (i18n) fix typo in translation
---
 .../javascript/components/base/fab-output-copy.tsx | 13 ++++++++-----
 .../src/stylesheets/modules/form/form-item.scss    | 14 +++++++++++---
 config/locales/app.admin.en.yml                    |  2 +-
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/app/frontend/src/javascript/components/base/fab-output-copy.tsx b/app/frontend/src/javascript/components/base/fab-output-copy.tsx
index 235bc859a..98cfed9e3 100644
--- a/app/frontend/src/javascript/components/base/fab-output-copy.tsx
+++ b/app/frontend/src/javascript/components/base/fab-output-copy.tsx
@@ -15,11 +15,14 @@ export const FabOutputCopy: React.FC<FabOutputCopyProps> = ({ label, text, onCop
    * Copy the given text to the clipboard.
    */
   const textToClipboard = () => {
-    if (navigator && navigator.clipboard && navigator.clipboard.writeText) {
-      navigator.clipboard.writeText(text);
-      if (typeof onCopy === 'function') onCopy();
-      setCopied(true);
-      setTimeout(() => setCopied(false), 1000);
+    if (navigator?.clipboard?.writeText) {
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1000);
+        if (onCopy) {
+          onCopy();
+        }
+      });
     }
   };
 
diff --git a/app/frontend/src/stylesheets/modules/form/form-item.scss b/app/frontend/src/stylesheets/modules/form/form-item.scss
index 8557fc7a3..75d01cb2c 100644
--- a/app/frontend/src/stylesheets/modules/form/form-item.scss
+++ b/app/frontend/src/stylesheets/modules/form/form-item.scss
@@ -29,12 +29,20 @@
         position: absolute;
         right: 0;
         top: 0;
-        background-color: white;
-        color: var(--gray-hard);
+        background-color: var(--information-lightest);
+        color: var(--information);
+        border: 1px solid var(--information);
         border-radius: 8px;
         padding: 1rem;
-        font-size: 12px;
+        font-size: 14px;
         width: auto;
+        font-weight: normal;
+        line-height: 1.2em;
+
+        & a {
+          color: var(--gray-hard);
+          text-decoration: underline;
+        }
 
         &:hover {
           display: block;
diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml
index c925a889e..2eef1641c 100644
--- a/config/locales/app.admin.en.yml
+++ b/config/locales/app.admin.en.yml
@@ -1074,7 +1074,7 @@ en:
           api_endpoint_url: "API endpoint or URL"
           api_type: "API type"
           api_field: "API field"
-          api_field_help_html: '<a href="https://jsonpath.com/" target="_blank">JsonPath</a> syntax is supported.<br> If many fields are selected, the first one will be used.<br> Example: $.data[*].name"'
+          api_field_help_html: '<a href="https://jsonpath.com/" target="_blank">JsonPath</a> syntax is supported.<br> If many fields are selected, the first one will be used.<br> Example: $.data[*].name'
           data_mapping: "Data mapping"
         type_mapping_modal:
           data_mapping: "Data mapping"