From a06723ff3f0d19bb1a092e4c68d6aeaa059170fa Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Wed, 27 Mar 2024 11:05:24 +0530
Subject: [PATCH] refactor: reduce size of tooltip and adjust it's position

---
 .../src/components/dashboard/DashboardCard.js |  2 +-
 .../components/shared/fields/SelectFolder.js  |  2 +-
 .../components/shared/fields/SignersInput.js  |  2 +-
 apps/OpenSign/src/primitives/Tooltip.js       | 32 ++++++++++++-------
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js
index 9b54c273e..b6e12579e 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardCard.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js
@@ -353,7 +353,7 @@ const DashboardCard = (props) => {
           </div>
         </div>
       </div>
-      <div className="text-xs absolute top-1 right-1">
+      <div className="text-xs absolute top-2 right-1">
         <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
       </div>
     </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index 138648f03..dcf24e95f 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -196,7 +196,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
             {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
           </p>
         </div>
-        <div className="absolute top-1 right-1 cursor-pointer">
+        <div className="absolute top-2 right-1 cursor-pointer">
           <Tooltip
             message={
               "If you do not select a folder, your signed document will be saved in the Main OpenSign drive folder."
diff --git a/apps/OpenSign/src/components/shared/fields/SignersInput.js b/apps/OpenSign/src/components/shared/fields/SignersInput.js
index de06665d2..97d77e3fa 100644
--- a/apps/OpenSign/src/components/shared/fields/SignersInput.js
+++ b/apps/OpenSign/src/components/shared/fields/SignersInput.js
@@ -105,7 +105,7 @@ const SignersInput = (props) => {
 
   return (
     <div className="text-xs mt-2 ">
-      <label className="block">
+      <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
         <span className="absolute ml-1 text-xs z-50">
diff --git a/apps/OpenSign/src/primitives/Tooltip.js b/apps/OpenSign/src/primitives/Tooltip.js
index 41e685d7c..b3fdc3e64 100644
--- a/apps/OpenSign/src/primitives/Tooltip.js
+++ b/apps/OpenSign/src/primitives/Tooltip.js
@@ -1,14 +1,21 @@
 import React from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { openInNewTab } from "../constant/Utils";
-const Tooltip = ({ children, id, message, url, iconColor }) =>
+const Tooltip = ({ id, message, url, iconColor }) =>
   url ? (
     <button onClick={() => openInNewTab(url)} className="text-center">
-      {children ? (
-        children
-      ) : (
-        <i className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"></i>
-      )}
+      <sup>
+        <i
+          className="fa-solid fa-question rounded-full"
+          style={{
+            borderColor: iconColor ? iconColor : "#33bbff",
+            color: iconColor ? iconColor : "#33bbff",
+            fontSize: 13,
+            borderWidth: 1.5,
+            padding: "1.5px 4px"
+          }}
+        ></i>
+      </sup>
     </button>
   ) : (
     <>
@@ -17,17 +24,18 @@ const Tooltip = ({ children, id, message, url, iconColor }) =>
         data-tooltip-content={message}
         className="z-50"
       >
-        {children ? (
-          children
-        ) : (
+        <sup>
           <i
-            className="fa-solid fa-question text-xs border-[1.5px] px-1 rounded-full border-[#33bbff] text-[#33bbff]"
+            className="fa-solid fa-question rounded-full"
             style={{
               borderColor: iconColor ? iconColor : "#33bbff",
-              color: iconColor ? iconColor : "#33bbff"
+              color: iconColor ? iconColor : "#33bbff",
+              fontSize: 13,
+              borderWidth: 1.5,
+              padding: "1.5px 4px"
             }}
           ></i>
-        )}
+        </sup>
       </a>
       <ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
     </>