fix: zindex of tooltip, decrease size of loader, remove description from signyourseld and requestsign form

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -2,7 +2,6 @@ import React, { useEffect, useState, forwardRef, useRef } from "react";
 import {
   getMonth,
   getYear,
-  isMobile,
   onChangeHeightOfTextArea,
   onChangeInput,
   radioButtonWidget,
@@ -14,7 +13,10 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import "../../styles/signature.css";
 import RegexParser from "regex-parser";
-
+const textWidgetCls =
+  "w-full h-full md:min-w-full md:min-h-full z-[999] text-[12px] rounded-[2px] border-[1px] border-[#007bff] overflow-hidden resize-none outline-none text-base-content bg-base-100 whitespace-pre-wrap";
+const selectWidgetCls =
+  "w-full h-full absolute left-0 top-0 border-[1px] border-[#007bff] rounded-[2px] focus:outline-none bg-base-100 text-base-content";
 function PlaceholderType(props) {
   const type = props?.pos?.type;
   const [selectOption, setSelectOption] = useState("");
@@ -137,13 +139,13 @@ function PlaceholderType(props) {
 
   const ExampleCustomInput = forwardRef(({ value, onClick }, ref) => (
     <div
-      className="inputPlaceholder"
-      style={{ overflow: "hidden", fontSize: calculateFontSize() }}
+      className={`${selectWidgetCls} overflow-hidden`}
+      style={{ fontSize: calculateFontSize() }}
       onClick={onClick}
       ref={ref}
     >
       {value}
-      <i className="fa-regular fa-calendar" style={{ marginLeft: "5px" }}></i>
+      <i className="fa-regular fa-calendar ml-[5px]"></i>
     </div>
   ));
   ExampleCustomInput.displayName = "ExampleCustomInput";
@@ -304,17 +306,13 @@ function PlaceholderType(props) {
     case "signature":
       return props.pos.SignUrl ? (
         <img
-          alt="signimg"
+          alt="signature"
           draggable="false"
           src={props.pos.SignUrl}
-          style={{
-            width: "99%",
-            height: "100%",
-            objectFit: "contain"
-          }}
+          className="w-[99%] h-full object-contain"
         />
       ) : (
-        <div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
+        <div className="text-[11px] text-black justify-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -326,17 +324,13 @@ function PlaceholderType(props) {
     case "stamp":
       return props.pos.SignUrl ? (
         <img
-          alt="signimg"
+          alt="stamp"
           draggable="false"
           src={props.pos.SignUrl}
-          style={{
-            width: "99%",
-            height: "100%",
-            objectFit: "contain"
-          }}
+          className="w-[99%] h-full object-contain"
         />
       ) : (
-        <div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
+        <div className="text-[11px] text-black justify-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -417,12 +411,7 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          className={textWidgetCls}
           cols="50"
         />
       ) : (
@@ -438,9 +427,8 @@ function PlaceholderType(props) {
     case "dropdown":
       return props.data?.signerObjId === props.signerObjId ? (
         <select
-          className="inputPlaceholder"
+          className={`${selectWidgetCls} text-[12px]`}
           id="myDropdown"
-          style={{ fontSize: "12px", color: "initial" }}
           value={selectOption}
           onChange={(e) => {
             setSelectOption(e.target.value);
@@ -470,7 +458,7 @@ function PlaceholderType(props) {
         </select>
       ) : (
         <div
-          className="inputPlaceholder"
+          className={selectWidgetCls}
           style={{ fontSize: calculateFontSize() }}
         >
           {props.pos?.options?.name ? props.pos.options.name : type}
@@ -479,17 +467,13 @@ function PlaceholderType(props) {
     case "initials":
       return props.pos.SignUrl ? (
         <img
-          alt="signimg"
+          alt="initials"
           draggable="false"
           src={props.pos.SignUrl}
-          style={{
-            width: "99%",
-            height: "100%",
-            objectFit: "contain"
-          }}
+          className="w-[99%] h-full object-contain"
         />
       ) : (
-        <div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
+        <div className="text-[11px] text-black justify-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -520,12 +504,7 @@ function PlaceholderType(props) {
               isDefault
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          className={textWidgetCls}
           cols="50"
         />
       ) : (
@@ -559,12 +538,7 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          className={textWidgetCls}
           cols="50"
         />
       ) : (
@@ -598,12 +572,7 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          className={textWidgetCls}
           cols="50"
         />
       ) : (
@@ -655,8 +624,7 @@ function PlaceholderType(props) {
             }
             onBlur={handleInputBlur}
             closeOnScroll={true}
-            className="inputPlaceholder"
-            style={{ outlineColor: "#007bff" }}
+            className={`${selectWidgetCls} outline-[#007bff]`}
             selected={
               props?.startDate
                 ? props?.startDate
@@ -679,17 +647,13 @@ function PlaceholderType(props) {
     case "image":
       return props.pos.SignUrl ? (
         <img
-          alt="signimg"
+          alt="image"
           draggable="false"
           src={props.pos.SignUrl}
-          style={{
-            width: "99%",
-            height: "100%",
-            objectFit: "contain"
-          }}
+          className="w-[99%] h-full object-contain"
         />
       ) : (
-        <div style={{ fontSize: 11, color: "black", justifyContent: "center" }}>
+        <div className="text-[11px] text-black justify-center">
           {props?.handleUserName &&
             props?.handleUserName(
               props?.data?.Id,
@@ -720,12 +684,7 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          className={textWidgetCls}
           cols="50"
         />
       ) : (
@@ -791,31 +750,18 @@ function PlaceholderType(props) {
               false
             );
           }}
-          className={
-            isMobile
-              ? "labelTextArea labelWidthMobile"
-              : "labelTextArea labelWidthDesktop"
-          }
-          style={{
-            whiteSpace: "pre-wrap",
-            overflow: "hidden",
-            color: "initial"
-          }}
+          className={textWidgetCls}
           cols="50"
         />
       );
     default:
       return props.pos.SignUrl ? (
-        <div style={{ pointerEvents: "none" }}>
+        <div className="pointer-events-none">
           <img
-            alt="signimg"
+            alt="image"
             draggable="false"
             src={props.pos.SignUrl}
-            style={{
-              width: "99%",
-              height: "100%",
-              objectFit: "contain"
-            }}
+            className="w-[99%] h-full object-contain"
           />
         </div>
       ) : (

apps/OpenSign/src/pages/Form.js

@@ -701,15 +701,17 @@ const Forms = (props) => {
                 required
               />
             </div>
-            <div className="text-xs mt-2">
-              <label className="block">Description</label>
-              <input
-                name="Description"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                value={formData.Description}
-                onChange={(e) => handleStrInput(e)}
-              />
-            </div>
+            {props.title === "New Template" && (
+              <div className="text-xs mt-2">
+                <label className="block">Description</label>
+                <input
+                  name="Description"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  value={formData.Description}
+                  onChange={(e) => handleStrInput(e)}
+                />
+              </div>
+            )}
             {props.signers && (
               <SignersInput
                 onChange={handleSigners}

apps/OpenSign/src/pages/Managesign.js

@@ -293,7 +293,7 @@ const ManageSign = () => {
                     {image ? (
                       <div className="signatureCanvas relative border-[2px] border-[#888]">
                         <img
-                          alt="preview image"
+                          alt="signature"
                           src={image}
                           className="w-full h-full object-contain"
                         />
@@ -401,7 +401,7 @@ const ManageSign = () => {
                     className="intialSignature"
                   >
                     <img
-                      alt="preview image"
+                      alt="inititals"
                       src={Initials}
                       style={{
                         width: "100%",
@@ -424,17 +424,10 @@ const ManageSign = () => {
                     dotSize={1}
                   />
                 )}
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    justifyContent: "space-between"
-                  }}
-                  className="penContainerInitial"
-                >
+                <div className="flex flex-row justify-between w-[183px]">
                   <div>
                     {!isInitials && (
-                      <div style={{ display: "flex", flexDirection: "row" }}>
+                      <div className="flex flex-row">
                         {allColor.map((data, key) => {
                           return (
                             <i

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -965,7 +965,7 @@ const ReportTable = (props) => {
         </div>
         <div
           className={`${
-            isDashboard ? "h-[317px]" : "h-full"
+            isDashboard && props.List?.length > 0 ? "h-[317px]" : "h-full"
           } overflow-x-auto w-full`}
         >
           <table className="op-table border-collapse w-full">
@@ -1604,7 +1604,11 @@ const ReportTable = (props) => {
           )}
         </div>
         {props.List?.length <= 0 && (
-          <div className="flex flex-col items-center justify-center w-full bg-base-100 text-base-content rounded-xl py-4">
+          <div
+            className={`${
+              isDashboard ? "h-[330px]" : ""
+            } flex flex-col items-center justify-center w-ful bg-base-100 text-base-content rounded-xl py-4`}
+          >
             <div className="w-[60px] h-[60px] overflow-hidden">
               <img
                 className="w-full h-full object-contain"

apps/OpenSign/src/primitives/Loader.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const Loader = () => {
   return (
-    <div className="op-loading op-loading-infinity w-[5rem] text-accent"></div>
+    <div className="op-loading op-loading-infinity w-[4rem] text-accent"></div>
   );
 };
 

apps/OpenSign/src/primitives/Tooltip.js

@@ -6,13 +6,10 @@ const Tooltip = ({ id, message, url, iconColor }) =>
     <button onClick={() => openInNewTab(url)} className={"text-center"}>
       <sup>
         <i
-          className="fa-solid fa-question rounded-full"
+          className="fa-solid fa-question rounded-full border-[1.5px] py-[1.5px] px-[4px] text-[13px]"
           style={{
             borderColor: iconColor ? iconColor : "#33bbff",
-            color: iconColor ? iconColor : "#33bbff",
-            fontSize: 13,
-            borderWidth: 1.5,
-            padding: "1.5px 4px"
+            color: iconColor ? iconColor : "#33bbff"
           }}
         ></i>
       </sup>
@@ -26,18 +23,18 @@ const Tooltip = ({ id, message, url, iconColor }) =>
       >
         <sup>
           <i
-            className="fa-solid fa-question rounded-full"
+            className="fa-solid fa-question rounded-full border-[1.5px] py-[1.5px] px-[4px] text-[13px]"
             style={{
               borderColor: iconColor ? iconColor : "#33bbff",
-              color: iconColor ? iconColor : "#33bbff",
-              fontSize: 13,
-              borderWidth: 1.5,
-              padding: "1.5px 4px"
+              color: iconColor ? iconColor : "#33bbff"
             }}
           ></i>
         </sup>
       </a>
-      <ReactTooltip id={id ? id : "my-tooltip"} className="max-w-[200px]" />
+      <ReactTooltip
+        id={id ? id : "my-tooltip"}
+        className="max-w-[200px]  z-[200]"
+      />
     </>
   );
 

apps/OpenSign/src/styles/signature.css

@@ -15,9 +15,6 @@
   border-width: 0.2px;
 }
 
-.dragCursor {
-  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC"), auto;
-}
 
 .react-datepicker__input-container {
   position: initial !important;
@@ -30,16 +27,6 @@
   user-select: none;
 }
 
-.inputPlaceholder {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  /* font-size: 12px; */
-  border: 1px solid #007bff;
-  border-radius: 2px;
-}
 
 .radioButton {
   width: 100%;
@@ -52,10 +39,6 @@
   border-radius: 50px;
 }
 
-.inputPlaceholder:focus {
-  outline: none;
-  border: 1px solid #188ae2;
-}
 
 .drodown-input {
   padding: 5px;
@@ -79,7 +62,6 @@
 
 .dropdownAdd {
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
-
   color: white;
   font-weight: 600;
   font-size: 13px;