refactor: remove unncessary images and organize folders

apps/OpenSign/src/App.js

@@ -1,33 +1,53 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, Suspense, lazy } from "react";
 import { Routes, Route, BrowserRouter } from "react-router-dom";
 import { pdfjs } from "react-pdf";
-import Pgsignup from "./pages/Pgsignup";
 import Login from "./pages/Login";
-import Signup from "./pages/Signup";
 import Form from "./pages/Form";
 import Report from "./pages/Report";
 import Dashboard from "./pages/Dashboard";
-import Subscriptions from "./pages/PlanSubscriptions";
 import HomeLayout from "./layout/HomeLayout";
-import UserProfile from "./pages/UserProfile";
 import PageNotFound from "./pages/PageNotFound";
-import ForgetPassword from "./pages/ForgetPassword";
-import ChangePassword from "./pages/ChangePassword";
-import GenerateToken from "./pages/GenerateToken";
 import ValidateRoute from "./primitives/ValidateRoute";
-import Webhook from "./pages/Webhook";
 import Validate from "./primitives/Validate";
-import DebugPdf from "./pages/DebugPdf";
 import ManageSign from "./pages/Managesign";
-import Opensigndrive from "./pages/Opensigndrive";
 import TemplatePlaceholder from "./pages/TemplatePlaceholder";
 import SignYourSelf from "./pages/SignyourselfPdf";
 import DraftDocument from "./components/pdf/DraftDocument";
 import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
-import GuestLogin from "./pages/GuestLogin";
+const DebugPdf = lazy(() => import("./pages/DebugPdf"));
+const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
+const GuestLogin = lazy(() => import("./pages/GuestLogin"));
+const Pgsignup = lazy(() => import("./pages/Pgsignup"));
+const Subscriptions = lazy(() => import("./pages/PlanSubscriptions"));
+const ChangePassword = lazy(() => import("./pages/ChangePassword"));
+const UserProfile = lazy(() => import("./pages/UserProfile"));
+const Signup = lazy(() => import("./pages/Signup"));
+const GenerateToken = lazy(() => import("./pages/GenerateToken"));
+const Webhook = lazy(() => import("./pages/Webhook"));
+const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
+const Loader = () => {
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          fontSize: "45px",
+          color: "#3dd3e0"
+        }}
+        className="loader-37"
+      ></div>
+    </div>
+  );
+};
 function App() {
   const [isloading, setIsLoading] = useState(true);
   useEffect(() => {
@@ -55,99 +75,86 @@ function App() {
   return (
     <div className="bg-[#eef1f5]">
       {isloading ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
-        </div>
+        <Loader />
       ) : (
         <BrowserRouter>
-          <Routes>
-            <Route element={<ValidateRoute />}>
-              <Route exact path="/" element={<Login />} />
-              <Route exact path="/signup" element={<Signup />} />
-            </Route>
-            <Route element={<Validate />}>
+          <Suspense fallback={<Loader />}>
+            <Routes>
+              <Route element={<ValidateRoute />}>
+                <Route exact path="/" element={<Login />} />
+                <Route exact path="/signup" element={<Signup />} />
+              </Route>
+              <Route element={<Validate />}>
+                <Route
+                  path="/load/template/:templateId"
+                  element={<TemplatePlaceholder />}
+                />
+                <Route
+                  exact
+                  path="/load/placeholdersign/:docId"
+                  element={<PlaceHolderSign />}
+                />
+                <Route
+                  exact
+                  path="/load/recipientSignPdf/:docId/:contactBookId"
+                  element={<PdfRequestFiles />}
+                />
+              </Route>
               <Route
-                exact
-                path="/load/template/:templateId"
-                element={<TemplatePlaceholder />}
+                path="/loadmf/signmicroapp/login"
+                element={<GuestLogin />}
               />
               <Route
-                exact
-                path="/load/placeholdersign/:docId"
-                element={<PlaceHolderSign />}
+                path="/login/:id/:userMail/:contactBookId/:serverUrl"
+                element={<GuestLogin />}
               />
-              <Route
-                exact
-                path="/load/recipientSignPdf/:docId/:contactBookId"
-                element={<PdfRequestFiles />}
-              />
-            </Route>
-            <Route path="/loadmf/signmicroapp/login" element={<GuestLogin />} />
-            {/* login page route */}
-            <Route
-              path="/login/:id/:userMail/:contactBookId/:serverUrl"
-              element={<GuestLogin />}
-            />
-
-            <Route path="/debugpdf" element={<DebugPdf />} />
-            <Route exact path="/forgetpassword" element={<ForgetPassword />} />
-            {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
-              <>
-                <Route exact path="/pgsignup" element={<Pgsignup />} />
-                <Route exact path="/subscription" element={<Subscriptions />} />
-              </>
-            )}
-            <Route element={<HomeLayout />}>
-              <Route path="/changepassword" element={<ChangePassword />} />
-              <Route path="/form/:id" element={<Form />} />
-              <Route path="/report/:id" element={<Report />} />
-              <Route path="/dashboard/:id" element={<Dashboard />} />
-              <Route path="/profile" element={<UserProfile />} />
-              <Route path="/generatetoken" element={<GenerateToken />} />
-              <Route path="/webhook" element={<Webhook />} />
-              <Route path="/managesign" element={<ManageSign />} />
-              <Route path="/opensigndrive" element={<Opensigndrive />} />
-              <Route
-                path="/template/:templateId"
-                element={<TemplatePlaceholder />}
-              />
-              {/* signyouself route with no rowlevel data using docId from url */}
-              <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
-              {/* draft document route to handle and navigate route page accordiing to document status */}
-              <Route path="/draftDocument" element={<DraftDocument />} />
-              {/* recipient placeholder set route with no rowlevel data using docId from url*/}
-              <Route
-                path="/placeHolderSign/:docId"
-                element={<PlaceHolderSign />}
-              />
-              {/* for user signature (need your sign route) with row level data */}
-              <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
-              {/* for user signature (need your sign route) with no row level data */}
-              <Route
-                path="/pdfRequestFiles/:docId"
-                element={<PdfRequestFiles />}
-              />
-              {/* recipient signature route with no rowlevel data using docId from url */}
-              <Route
-                path="/recipientSignPdf/:docId/:contactBookId"
-                element={<PdfRequestFiles />}
-              />
-            </Route>
-            <Route path="*" element={<PageNotFound />} />
-          </Routes>
+              <Route path="/debugpdf" element={<DebugPdf />} />
+              <Route path="/forgetpassword" element={<ForgetPassword />} />
+              {process.env.REACT_APP_ENABLE_SUBSCRIPTION && (
+                <>
+                  <Route exact path="/pgsignup" element={<Pgsignup />} />
+                  <Route path="/subscription" element={<Subscriptions />} />
+                </>
+              )}
+              <Route element={<HomeLayout />}>
+                <Route path="/changepassword" element={<ChangePassword />} />
+                <Route path="/form/:id" element={<Form />} />
+                <Route path="/report/:id" element={<Report />} />
+                <Route path="/dashboard/:id" element={<Dashboard />} />
+                <Route path="/profile" element={<UserProfile />} />
+                <Route path="/generatetoken" element={<GenerateToken />} />
+                <Route path="/webhook" element={<Webhook />} />
+                <Route path="/managesign" element={<ManageSign />} />
+                <Route path="/opensigndrive" element={<Opensigndrive />} />
+                <Route
+                  path="/template/:templateId"
+                  element={<TemplatePlaceholder />}
+                />
+                {/* signyouself route with no rowlevel data using docId from url */}
+                <Route path="/signaturePdf/:docId" element={<SignYourSelf />} />
+                {/* draft document route to handle and navigate route page accordiing to document status */}
+                <Route path="/draftDocument" element={<DraftDocument />} />
+                {/* recipient placeholder set route with no rowlevel data using docId from url*/}
+                <Route
+                  path="/placeHolderSign/:docId"
+                  element={<PlaceHolderSign />}
+                />
+                {/* for user signature (need your sign route) with row level data */}
+                <Route path="/pdfRequestFiles" element={<PdfRequestFiles />} />
+                {/* for user signature (need your sign route) with no row level data */}
+                <Route
+                  path="/pdfRequestFiles/:docId"
+                  element={<PdfRequestFiles />}
+                />
+                {/* recipient signature route with no rowlevel data using docId from url */}
+                <Route
+                  path="/recipientSignPdf/:docId/:contactBookId"
+                  element={<PdfRequestFiles />}
+                />
+              </Route>
+              <Route path="*" element={<PageNotFound />} />
+            </Routes>
+          </Suspense>
         </BrowserRouter>
       )}
     </div>

apps/OpenSign/src/components/AddSigner.js

@@ -3,7 +3,7 @@ import Parse from "parse";
 import axios from "axios";
 import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
-const AppendFormInForm = (props) => {
+const AddSigner = (props) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
@@ -312,4 +312,4 @@ const AppendFormInForm = (props) => {
   );
 };
 
-export default AppendFormInForm;
+export default AddSigner;

apps/OpenSign/src/components/dashboard/GetDashboard.js

@@ -12,7 +12,21 @@ const GetDashboard = (props) => {
             data-tut={col.widget.data.tourSection}
             style={{ background: col.widget.bgColor }}
           >
-            <Suspense fallback={<div>please wait</div>}>
+            <Suspense
+              fallback={
+                <div style={{ height: "300px" }}>
+                  <div
+                    style={{
+                      marginLeft: "45%",
+                      marginTop: "150px",
+                      fontSize: "45px",
+                      color: "#3dd3e0"
+                    }}
+                    className="loader-37"
+                  ></div>
+                </div>
+              }
+            >
               <DashboardCard
                 Icon={col.widget.icon}
                 Label={col.widget.label}

apps/OpenSign/src/components/opensigndrive/DriveBody.js

@@ -1,7 +1,6 @@
 import React, { useState, useEffect, useRef } from "react";
 import folder from "../../assets/images/folder.png";
 import "../../styles/opensigndrive.css";
-import draftDoc from "../../assets/images/draftDoc1.png";
 import pdfLogo from "../../assets/images/pdf3.png";
 import axios from "axios";
 import * as ContextMenu from "@radix-ui/react-context-menu";
@@ -9,7 +8,7 @@ import { saveAs } from "file-saver";
 import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
-import SelectFolder from "../fields/SelectFolder"; //check this one
+import SelectFolder from "../shared/fields/SelectFolder"; //check this one
 import ModalUi from "../../primitives/ModalUi";
 import { themeColor } from "../../constant/const";
 
@@ -291,10 +290,6 @@ function DriveBody({
     }
   };
 
-  const handleDraftDoc = (data) => {
-    navigate(`/legagenie?${data.objectId}`);
-  };
-
   //component to handle type of document and render according to type
   const handleFolderData = (data, ind, listType) => {
     let createddate, status, isDecline, signerExist, isComplete, isPlaceholder;
@@ -373,25 +368,6 @@ function DriveBody({
           <td>_</td>
           <td>_</td>
         </tr>
-      ) : data.Type === "AIDoc" ? (
-        <tr onClick={() => handleDraftDoc(data)}>
-          <td
-            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
-          >
-            <i
-              className="fa fa-file-text"
-              style={{ color: "#0ea3ed", marginRight: "8px", fontSize: "26px" }}
-            ></i>
-
-            <span style={{ fontSize: "12px", fontWeight: "500" }}>
-              {data.Name}
-            </span>
-          </td>
-          <td>{createddate}</td>
-          <td>LegaGenie Draft</td>
-          <td>_</td>
-          <td>_</td>
-        </tr>
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
           <td
@@ -470,71 +446,6 @@ function DriveBody({
             </div>
           </ContextMenu.Trigger>
 
-          <ContextMenu.Portal>
-            <ContextMenu.Content
-              className="ContextMenuContent"
-              sideOffset={5}
-              align="end"
-            >
-              <ContextMenu.Item
-                onClick={() => handleMenuItemClick("Rename", data)}
-                className="ContextMenuItem"
-              >
-                <i className="fa-solid fa-font"></i>
-                <span style={{ marginLeft: "8px" }}>Rename</span>
-              </ContextMenu.Item>
-            </ContextMenu.Content>
-          </ContextMenu.Portal>
-        </ContextMenu.Root>
-      </div>
-    ) : data.Type === "AIDoc" ? (
-      <div key={ind} className="folderBox">
-        <ContextMenu.Root>
-          <ContextMenu.Trigger className="ContextMenuTrigger">
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                cursor: "pointer"
-              }}
-            >
-              <img
-                alt="no img"
-                onClick={() => handleDraftDoc(data)}
-                src={draftDoc}
-                width={100}
-                height={103}
-              />
-              {rename === data.objectId ? (
-                <input
-                  onFocus={() => {
-                    inputRef.current.setSelectionRange(0, 0);
-                    const input = inputRef.current;
-                    if (input) {
-                      input.select();
-                    }
-                  }}
-                  autoFocus={true}
-                  type="text"
-                  onBlur={() => handledRenameDoc(data)}
-                  onKeyDown={(e) => handleEnterPress(e, data)}
-                  ref={inputRef}
-                  defaultValue={renameValue}
-                  // value={renameValue}
-                  onChange={(e) => setRenameValue(e.target.value)}
-                  style={{
-                    width: "100px",
-                    border: "1.5px solid black",
-                    borderRadius: "2px",
-                    fontSize: "10px"
-                  }}
-                />
-              ) : (
-                <span className="foldName">{data.Name}</span>
-              )}
-            </div>
-          </ContextMenu.Trigger>
-
           <ContextMenu.Portal>
             <ContextMenu.Content
               className="ContextMenuContent"

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

@@ -1,5 +1,5 @@
 import React from "react";
-import ModalUi from "./ModalUi";
+import ModalUi from "../../primitives/ModalUi";
 
 const AddRoleModal = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import opensignLogo from "../../assets/images/open-sign-logo.png";
+import opensignLogo from "../../assets/images/logo.png";
 import {
   Page,
   Text,

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import Loader from "./Loader";
+import Loader from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
 function DraftDocument() {

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

@@ -28,7 +28,6 @@ function EmailComponent({
       try {
         const imgPng =
           "https://qikinnovation.ams3.digitaloceanspaces.com/logo.png";
-        // "https://qikinnovation.ams3.digitaloceanspaces.com/mailLogo_2023-08-18T12%3A51%3A31.573Z.png";
 
         let url = `${localStorage.getItem("baseUrl")}functions/sendmailv3/`;
         const headers = {

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

@@ -131,20 +131,15 @@ function Header({
                 }}
               >
                 <i
-                  className="fa fa-certificate"
-                  style={{
-                    marginRight: "2px"
-                  }}
+                  className="fa-solid fa-award"
+                  style={{ marginRight: "2px" }}
                   aria-hidden="true"
                 ></i>
                 Certificate
               </div>
             ) : (
               <div
-                style={{
-                  border: "none",
-                  backgroundColor: "#fff"
-                }}
+                style={{ border: "none", backgroundColor: "#fff" }}
                 onClick={() =>
                   handleDownload(
                     blob,
@@ -155,10 +150,8 @@ function Header({
                 }
               >
                 <i
-                  className="fa fa-certificate"
-                  style={{
-                    marginRight: "2px"
-                  }}
+                  className="fa-solid fa-award"
+                  style={{ marginRight: "2px" }}
                   aria-hidden="true"
                 ></i>
                 Certificate
@@ -190,7 +183,7 @@ function Header({
             }}
           >
             <i
-              className="fa fa-certificate"
+              className="fa-solid fa-award"
               style={{
                 color: "white",
                 fontSize: "15px",

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

@@ -1,8 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import redPen from "../../assets/images/redPen.png";
-import bluePen from "../../assets/images/bluePen.png";
-import blackPen from "../../assets/images/blackPen.png";
 import { themeColor } from "../../constant/const";
 
 function SignPad({
@@ -26,7 +23,7 @@ function SignPad({
   widgetType
 }) {
   const [penColor, setPenColor] = useState("blue");
-  const allColor = [bluePen, redPen, blackPen];
+  const allColor = ["blue", "red", "black"];
   const canvasRef = useRef(null);
   const [isDefaultSign, setIsDefaultSign] = useState(false);
   const [isTab, setIsTab] = useState("draw");
@@ -630,12 +627,10 @@ function SignPad({
                     <div style={{ display: "flex", flexDirection: "row" }}>
                       {allColor.map((data, key) => {
                         return (
-                          <img
-                            key={key}
-                            alt="pen img"
+                          <i
                             style={{
-                              border: "none",
                               margin: "5px",
+                              color: data,
                               borderBottom:
                                 key === 0 && penColor === "blue"
                                   ? "2px solid blue"
@@ -654,14 +649,14 @@ function SignPad({
                                 setPenColor("black");
                               }
                             }}
-                            src={data}
+                            key={key}
+                            className="fa solid fa-pen-nib"
                             width={20}
                             height={20}
-                          />
+                          ></i>
                         );
                       })}
                     </div>
-
                     <SaveBtn />
                   </div>
                 </>

apps/OpenSign/src/components/shared/fields/CreateFolder.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
-import Alert from "../../primitives/Alert";
+import Alert from "../../../primitives/Alert";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {

apps/OpenSign/src/components/shared/fields/DropboxChoose.js

@@ -41,12 +41,15 @@ export default function DropboxChooser({ children, onSuccess, onCancel }) {
     [onSuccess, onCancel]
   );
 
-  const handleChoose = useCallback((e) => {
-    e.preventDefault()
-    if (window.Dropbox) {
-      window.Dropbox.choose(options);
-    }
-  }, [options]);
+  const handleChoose = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (window.Dropbox) {
+        window.Dropbox.choose(options);
+      }
+    },
+    [options]
+  );
 
   return (
     <div onClick={handleChoose}>

apps/OpenSign/src/components/shared/fields/SelectFolder.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import CreateFolder from "./CreateFolder";
-import ModalUi from "../../primitives/ModalUi";
+import ModalUi from "../../../primitives/ModalUi";
 
 const SelectFolder = ({ required, onSuccess, folderCls }) => {
   const [isOpen, SetIsOpen] = useState(false);

apps/OpenSign/src/components/shared/fields/SelectSigners.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import Parse from "parse";
-import "../styles/AddUser.css";
+import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
 const customStyles = {

apps/OpenSign/src/components/shared/fields/SignersInput.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
-import AppendFormInForm from "../AppendFormInForm";
+import AddSigner from "../../AddSigner";
 import Modal from "react-modal";
 import Parse from "parse";
 function arrayMove(array, from, to) {
@@ -172,7 +172,7 @@ const SignersInput = (props) => {
             </div>
 
             {isModal && (
-              <AppendFormInForm
+              <AddSigner
                 valueKey={"objectId"}
                 displayKey={"Name"}
                 details={handleNewDetails}

apps/OpenSign/src/pages/Form.js

@@ -6,8 +6,8 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import Parse from "parse";
 import DropboxChooser from "../components/fields/DropboxChoose";
 import Alert from "../primitives/Alert";
-import SelectFolder from "../components/fields/SelectFolder";
-import SignersInput from "../components/fields/SignersInput";
+import SelectFolder from "../components/shared/fields/SelectFolder";
+import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 

apps/OpenSign/src/pages/Managesign.js

@@ -1,8 +1,5 @@
 import React, { useState, useRef, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import redPen from "../assets/images/redPen.png";
-import bluePen from "../assets/images/bluePen.png";
-import blackPen from "../assets/images/blackPen.png";
 import "../styles/managesign.css";
 import "../styles/signature.css";
 import axios from "axios";
@@ -18,7 +15,7 @@ const ManageSign = () => {
   const [warning, setWarning] = useState(false);
   const [nameWarning, setNameWarning] = useState(false);
   const [isvalue, setIsValue] = useState(false);
-  const allColor = [bluePen, redPen, blackPen];
+  const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
   const [isSuccess, setIsSuccess] = useState(false);
   const [Initials, setInitials] = useState("");
@@ -316,6 +313,21 @@ const ManageSign = () => {
         overflow: "auto"
       }}
     >
+      {isLoader && (
+        <div className="absolute bg-black bg-opacity-75 inset-0 z-50 flex justify-center items-center">
+          <div style={{ height: "300px" }}>
+            <div
+              style={{
+                marginLeft: "45%",
+                marginTop: "150px",
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        </div>
+      )}
       {isSuccess && (
         <div
           className="alert alert-success successBox"
@@ -497,11 +509,10 @@ const ManageSign = () => {
                           >
                             {allColor.map((data, key) => {
                               return (
-                                <img
-                                  alt="black img"
+                                <i
                                   style={{
-                                    border: "none",
                                     margin: "5px",
+                                    color: data,
                                     borderBottom:
                                       key === 0 && penColor === "blue"
                                         ? "2px solid blue"
@@ -521,10 +532,10 @@ const ManageSign = () => {
                                     }
                                   }}
                                   key={key}
-                                  src={data}
+                                  className="fa solid fa-pen-nib"
                                   width={20}
                                   height={20}
-                                />
+                                ></i>
                               );
                             })}
                           </div>
@@ -533,7 +544,7 @@ const ManageSign = () => {
                       <div>
                         <div
                           type="button"
-                          className="clearbtn"
+                          className="clearbtn cursor-pointer"
                           onClick={() => handleClear()}
                         >
                           Clear
@@ -613,11 +624,10 @@ const ManageSign = () => {
                       <div style={{ display: "flex", flexDirection: "row" }}>
                         {allColor.map((data, key) => {
                           return (
-                            <img
-                              alt="pen"
+                            <i
                               style={{
-                                border: "none",
                                 margin: "5px",
+                                color: data,
                                 borderBottom:
                                   key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
@@ -637,10 +647,10 @@ const ManageSign = () => {
                                 }
                               }}
                               key={key}
-                              src={data}
+                              className="fa solid fa-pen-nib"
                               width={20}
                               height={20}
-                            />
+                            ></i>
                           );
                         })}
                       </div>
@@ -649,7 +659,7 @@ const ManageSign = () => {
                   <div>
                     <div
                       type="button"
-                      className="clearbtn"
+                      className="clearbtn cursor-pointer"
                       onClick={() => handleClearInitials()}
                     >
                       Clear
@@ -677,11 +687,6 @@ const ManageSign = () => {
             </button>
           </div>
         </div>
-        {isLoader && (
-          <div className="loaderContainer">
-            <div className="loader"></div>
-          </div>
-        )}
       </div>
     </div>
   );

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -21,9 +21,9 @@ import {
   onSaveImage,
   addDefaultSignatureImg
 } from "../constant/Utils";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
 import PdfDeclineModal from "../primitives/PdfDeclineModal";
 import Title from "../components/Title";

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -12,10 +12,10 @@ import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
 import loader from "../assets/images/loader2.gif";
 import { useLocation, useParams } from "react-router-dom";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import {
   pdfNewWidthFun,
   contractDocument,

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -4,7 +4,7 @@ import "../styles/signature.css";
 import { themeColor } from "../constant/const";
 import axios from "axios";
 import moment from "moment";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
@@ -30,7 +30,7 @@ import { useParams } from "react-router-dom";
 import Tour from "reactour";
 import Signedby from "../components/pdf/Signedby";
 import HandleError from "../primitives/HandleError";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -9,10 +9,10 @@ import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import Loader from "../components/pdf/Loader";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
-import Header from "../components/pdf/Header";
+import Header from "../components/pdf/PdfHeader";
 import WidgetNameModal from "../components/pdf/WidgetNameModal";
 import {
   pdfNewWidthFun,
@@ -29,7 +29,7 @@ import Title from "../components/Title";
 import LinkUserModal from "../primitives/LinkUserModal";
 import EditTemplate from "../components/pdf/EditTemplate";
 import ModalUi from "../primitives/ModalUi";
-import AddRoleModal from "../primitives/AddRoleModal";
+import AddRoleModal from "../components/pdf/AddRoleModal";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -3,7 +3,7 @@ import pad from "../assets/images/pad.svg";
 import { useNavigate } from "react-router-dom";
 import axios from "axios";
 import ModalUi from "./ModalUi";
-import AppendFormInForm from "../components/AppendFormInForm";
+import AddSigner from "../components/AddSigner";
 import { modalSubmitBtnColor, modalCancelBtnColor } from "../constant/const";
 import Alert from "./Alert";
 const ReportTable = ({
@@ -498,7 +498,7 @@ const ReportTable = ({
         isOpen={isContactform}
         handleClose={handleContactFormModal}
       >
-        <AppendFormInForm
+        <AddSigner
           handleUserData={handleUserData}
           closePopup={handleContactFormModal}
         />

apps/OpenSign/src/primitives/LinkUserModal.js

@@ -1,5 +1,5 @@
 import React from "react";
-import SelectSigners from "./SelectSigners";
+import SelectSigners from "../components/shared/fields/SelectSigners";
 import AddUser from "./AddUser";
 import ModalUi from "./ModalUi";
 

apps/OpenSign/src/primitives/LoaderWithMsg.js

@@ -1,5 +1,5 @@
 import React from "react";
-import loader from "../../assets/images/loader2.gif";
+import loader from "../assets/images/loader2.gif";
 
 function Loader({ isLoading }) {
   return (