Merge pull request #882 from OpenSignLabs/raktima-opensignlabs-patch-10

fix: ui design of the share button in the in-progress report and various other UI issues.

Author: nxglabs

apps/OpenSign/src/components/sidebar/Sidebar.js

@@ -63,7 +63,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
   };
   return (
     <aside
-      className={`absolute lg:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] shadow-lg hide-scrollbar
+      className={`absolute lg:relative bg-base-100 h-screen overflow-y-auto transition-all z-[999] shadow-lg hide-scrollbar
      ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">

apps/OpenSign/src/pages/GenerateToken.js

@@ -135,8 +135,8 @@ function GenerateToken() {
                     id="token"
                     className={`${
                       isSubscribe || !isEnableSubscription
-                        ? "bg-white/20 pointer-events-none select-none"
-                        : ""
+                        ? ""
+                        : "bg-white/20 pointer-events-none select-none"
                     } md:text-end py-2 md:py-0`}
                   >
                     <span
@@ -146,7 +146,7 @@ function GenerateToken() {
                       {apiToken ? apiToken : "_____"}
                     </span>
                     <button
-                      className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
+                      className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2 cursor-pointer"
                       onClick={() => copytoclipboard(apiToken)}
                     >
                       <i className="fa-light fa-copy"></i>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -49,10 +49,10 @@ import { EmailBody } from "../components/pdf/EmailBody";
 import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
 import Loader from "../primitives/Loader";
-import { DotLottieReact } from "@lottiefiles/dotlottie-react";
 import { useSelector } from "react-redux";
 import TextFontSetting from "../components/pdf/TextFontSetting";
 import PdfZoom from "../components/pdf/PdfZoom";
+import LottieWithLoader from "../primitives/DotLottieReact";
 
 function PlaceHolderSign() {
   const editorRef = useRef();
@@ -1934,13 +1934,7 @@ function PlaceHolderSign() {
                     <div className="h-[100%] p-[20px]">
                       {mailStatus === "success" ? (
                         <div className="text-center mb-[10px]">
-                          <DotLottieReact
-                            dotLottieRefCallback={null}
-                            src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
-                            autoplay
-                            loop={false}
-                            className="w-[120px] h-[120px] mx-auto"
-                          />
+                          <LottieWithLoader />
                           <p>
                             You have successfully sent mails to all recipients!
                           </p>

apps/OpenSign/src/primitives/DotLottieReact.js

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react";
+import { DotLottieReact } from "@lottiefiles/dotlottie-react";
+import Loader from "./Loader";
+
+const LottieWithLoader = ({
+  src = "https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json",
+  minLoaderTime = 1000,
+  timeout = 10000
+}) => {
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [hasError, setHasError] = useState(false);
+  const [animationSrc, setAnimationSrc] = useState(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setHasError(true);
+    }, timeout);
+
+    fetch(src)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.blob();
+      })
+      .then((blob) => {
+        const objectURL = URL.createObjectURL(blob);
+        setAnimationSrc(objectURL);
+        setTimeout(() => {
+          setIsLoaded(true);
+        }, minLoaderTime);
+      })
+      .catch((error) => {
+        console.error("There was a problem with the fetch operation:", error);
+        setHasError(true);
+      });
+
+    return () => clearTimeout(timer);
+  }, [src, minLoaderTime, timeout]);
+
+  return (
+    <div>
+      {!isLoaded && !hasError && (
+        <div className="loader">
+          {" "}
+          <Loader />
+        </div>
+      )}
+      {hasError && <div className="error">Failed to load animation</div>}
+      {isLoaded && animationSrc && (
+        <DotLottieReact
+          src={animationSrc}
+          loop
+          autoplay
+          style={{ display: "block" }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default LottieWithLoader;

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -1408,6 +1408,7 @@ const ReportTable = (props) => {
                               handleClose={() => {
                                 setIsShare({});
                                 setActLoader({});
+                                setCopied(false);
                               }}
                             >
                               <div className="m-[20px]">
@@ -1416,22 +1417,23 @@ const ReportTable = (props) => {
                                     key={i}
                                     className="text-sm font-normal text-black flex my-2 justify-between items-center"
                                   >
-                                    <span className="text-sm font-semibold">
+                                    <span className="w-[150px] mr-[5px] md:mr-0 md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis text-sm font-semibold">
                                       {share.email}
                                     </span>
-                                    <div>
+                                    <div className="flex items-center gap-2">
                                       <RWebShare
                                         data={{
                                           url: share.url,
                                           title: "Sign url"
                                         }}
                                       >
-                                        <button className="bg-[#002864] text-white rounded w-[32px] h-[30px] focus:outline-none">
+                                        <button className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm ">
                                           <i className="fa-light fa-share-from-square"></i>{" "}
+                                          Share
                                         </button>
                                       </RWebShare>
                                       <button
-                                        className="ml-2 bg-[#002864] text-white rounded w-[100px] h-[30px] focus:outline-none"
+                                        className="op-btn op-btn-primary op-btn-outline op-btn-xs md:op-btn-sm"
                                         onClick={() => copytoclipboard(share)}
                                       >
                                         <i className="fa-light fa-link"></i>{" "}

apps/OpenSign/src/primitives/PdfDeclineModal.js

@@ -11,7 +11,7 @@ function CustomModal({
 }) {
   return (
     show && (
-      <dialog className="op-modal op-modal-open absolute z-[1999]">
+      <dialog className="op-modal op-modal-open absolute z-[998]">
         <div className="w-[80%] md:w-[40%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
           <h3 className="text-[#de4337] font-bold text-lg pt-[15px] px-[20px]">
             {headMsg && headMsg}