docs: update .all-contributorsrc

.all-contributorsrc

@@ -215,22 +215,14 @@
         "code"
       ]
     },
-    {
-      "login": "daniel-mutwiri",
-      "name": "Daniel Mutwiri",
-      "avatar_url": "https://avatars.githubusercontent.com/u/8936960?v=4",
-      "profile": "https://github.com/daniel-mutwiri",
-      "contributions": [
-        "code"
-      ]
-    },
     {
       "login": "Zathiel",
       "name": "Zathiel",
       "avatar_url": "https://avatars.githubusercontent.com/u/26553418?v=4",
       "profile": "https://github.com/Zathiel",
       "contributions": [
-        "code"
+        "code",
+        "security"
       ]
     }
   ]

.env.local_dev

@@ -40,7 +40,7 @@ DO_SECRET_ACCESS_KEY=
 # Digital ocean spaces region or AWS s3 region
 DO_REGION=us-west
 # local storage
-USE_LOCAL=true
+USE_LOCAL=TRUE
 
 # Email mailgun or set SMTP_ENABLE true to use SMTP config (The app will not initialize if any of these 3 variables are not set) *********************************************************************************************************************
 MAILGUN_API_KEY=

.github/workflows/Docker.yml

@@ -2,7 +2,7 @@ name: ci
 on:
   push:
     branches:
-      - 'main'
+      - 'staging'
 
 jobs:
   docker:

README.md

@@ -135,8 +135,7 @@ We would like to thank all our contributors and users for their support and feed
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/VikramNagwal"><img src="https://avatars.githubusercontent.com/u/123088024?v=4?s=100" width="100px;" alt="Vikram"/><br /><sub><b>Vikram</b></sub></a><br /><a href="#code-VikramNagwal" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/ugoconsonni"><img src="https://avatars.githubusercontent.com/u/13661702?v=4?s=100" width="100px;" alt="ugoconsonni"/><br /><sub><b>ugoconsonni</b></sub></a><br /><a href="#code-ugoconsonni" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/daniel-mutwiri"><img src="https://avatars.githubusercontent.com/u/8936960?v=4?s=100" width="100px;" alt="Daniel Mutwiri"/><br /><sub><b>Daniel Mutwiri</b></sub></a><br /><a href="#code-daniel-mutwiri" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a><a href="#security-Zathiel" title="Security">🛡️</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/Zathiel"><img src="https://avatars.githubusercontent.com/u/26553418?v=4?s=100" width="100px;" alt="Zathiel"/><br /><sub><b>Zathiel</b></sub></a><br /><a href="#code-Zathiel" title="Code">💻</a> <a href="#security-Zathiel" title="Security">🛡️</a></td>
     </tr>
   </tbody>
 </table>

apps/OpenSign/package.json

@@ -4,23 +4,21 @@
   "private": true,
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@radix-ui/themes": "^3.0.5",
+    "@radix-ui/themes": "^2.0.3",
     "@react-pdf/renderer": "^3.4.4",
-    "@reduxjs/toolkit": "^2.2.5",
-    "axios": "^1.7.2",
+    "@reduxjs/toolkit": "^2.2.1",
+    "axios": "^1.6.8",
     "file-saver": "^2.0.5",
     "jwt-decode": "^4.0.0",
     "moment": "^2.30.1",
-    "nth-check": "^2.1.1",
-    "parse": "^5.1.0",
+    "parse": "^4.3.1",
     "pdf-lib": "^1.17.1",
     "print-js": "^1.6.0",
     "radix-ui": "^1.0.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
-    "react-confetti": "^6.1.0",
     "react-cookie": "^7.1.4",
-    "react-datepicker": "^6.9.0",
+    "react-datepicker": "^6.4.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dnd-multi-backend": "^8.0.3",
@@ -29,24 +27,25 @@
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-konva": "^18.2.10",
-    "react-pdf": "^9.0.0",
+    "react-modal": "^3.16.1",
+    "react-pdf": "^7.7.1",
     "react-quill": "^2.0.0",
-    "react-redux": "^9.1.2",
-    "react-rnd": "^10.4.11",
+    "react-redux": "^9.1.0",
+    "react-rnd": "^10.4.10",
     "react-router-dom": "^6.22.3",
     "react-scripts": "5.0.1",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.8.0",
     "react-signature-canvas": "^1.0.6",
-    "react-tooltip": "^5.26.4",
+    "react-tooltip": "^5.26.3",
     "react-web-share": "^2.0.2",
-    "reactour": "^1.19.4",
+    "reactour": "^1.19.3",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",
     "regex-parser": "^2.3.0",
-    "serve": "^14.2.3",
+    "serve": "^14.2.1",
     "styled-components": "^4.4.1",
-    "web-vitals": "^4.0.1"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "serve -s build",
@@ -84,20 +83,16 @@
     }
   },
   "devDependencies": {
-    "@babel/runtime-corejs2": "^7.24.7",
+    "@babel/runtime-corejs2": "^7.24.5",
     "autoprefixer": "^10.4.19",
     "commitizen": "^4.3.0",
-    "daisyui": "^4.12.2",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.34.1",
-    "lint-staged": "^15.2.5",
+    "lint-staged": "^15.2.2",
     "postcss": "^8.4.38",
     "prettier": "^2.8.8",
     "pretty-quick": "^3.3.1",
-    "tailwindcss": "^3.4.4"
-  },
-  "overrides": {
-    "nth-check": "$nth-check"
+    "tailwindcss": "^3.4.1"
   }
 }

apps/OpenSign/public/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="opensigncss">
+<html lang="en">
 
 <head>
   <meta charset="utf-8" />
@@ -50,4 +50,4 @@
     -->
 </body>
 
-</html>
+</html>

apps/OpenSign/src/App.js

@@ -16,8 +16,6 @@ import PlaceHolderSign from "./pages/PlaceHolderSign";
 import PdfRequestFiles from "./pages/PdfRequestFiles";
 import LazyPage from "./primitives/LazyPage";
 import { isEnableSubscription } from "./constant/const";
-import SSOVerify from "./pages/SSOVerify";
-import Loader from "./primitives/Loader";
 const DebugPdf = lazy(() => import("./pages/DebugPdf"));
 const ForgetPassword = lazy(() => import("./pages/ForgetPassword"));
 const GuestLogin = lazy(() => import("./pages/GuestLogin"));
@@ -30,13 +28,25 @@ const Opensigndrive = lazy(() => import("./pages/Opensigndrive"));
 const ManageSign = lazy(() => import("./pages/Managesign"));
 const GenerateToken = lazy(() => import("./pages/GenerateToken"));
 const Webhook = lazy(() => import("./pages/Webhook"));
+pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;
 
-pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`;
-
-const AppLoader = () => {
+const Loader = () => {
   return (
-    <div className="flex justify-center items-center h-[100vh]">
-      <Loader />
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          fontSize: "45px",
+          color: "#3dd3e0"
+        }}
+        className="loader-37"
+      ></div>
     </div>
   );
 };
@@ -65,9 +75,9 @@ function App() {
   };
 
   return (
-    <div className="bg-base-200">
+    <div className="bg-[#eef1f5]">
       {isloading ? (
-        <AppLoader />
+        <Loader />
       ) : (
         <BrowserRouter>
           <Routes>
@@ -171,7 +181,6 @@ function App() {
                 element={<PdfRequestFiles />}
               />
             </Route>
-            <Route path="/sso" element={<SSOVerify />} />
             <Route path="*" element={<PageNotFound />} />
           </Routes>
         </BrowserRouter>

apps/OpenSign/src/components/AddSigner.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
-import Loader from "../primitives/Loader";
+import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 const AddSigner = (props) => {
   const [name, setName] = useState("");
@@ -23,7 +23,7 @@ const AddSigner = (props) => {
     );
     if (savedUserDetails && addYourself) {
       setName(savedUserDetails.name);
-      setPhone(savedUserDetails?.phone || "");
+      setPhone(savedUserDetails.phone);
       setEmail(savedUserDetails.email);
     }
   }, [addYourself]);
@@ -49,162 +49,144 @@ const AddSigner = (props) => {
     e.preventDefault();
     e.stopPropagation();
     setIsLoader(true);
-    if (localStorage.getItem("TenantId")) {
+    try {
+      const contactQuery = new Parse.Object("contracts_Contactbook");
+      contactQuery.set("Name", name);
+      contactQuery.set("Phone", phone);
+      contactQuery.set("Email", email);
+      contactQuery.set("UserRole", "contracts_Guest");
+
+      if (localStorage.getItem("TenantId")) {
+        contactQuery.set("TenantId", {
+          __type: "Pointer",
+          className: "partners_Tenant",
+          objectId: localStorage.getItem("TenantId")
+        });
+      }
+
       try {
-        const user = Parse.User.current();
-        const query = new Parse.Query("contracts_Contactbook");
-        query.equalTo("CreatedBy", user);
-        query.notEqualTo("IsDeleted", true);
-        query.equalTo("Email", email);
-        const res = await query.first();
-        // console.log(res);
-        if (!res) {
-          const contactQuery = new Parse.Object("contracts_Contactbook");
-          contactQuery.set("Name", name);
-          if (phone) {
-            contactQuery.set("Phone", phone);
+        const _users = Parse.Object.extend("User");
+        const _user = new _users();
+        _user.set("name", name);
+        _user.set("username", email);
+        _user.set("email", email);
+        _user.set("phone", phone);
+        _user.set("password", phone);
+
+        const user = await _user.save();
+        if (user) {
+          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+          const headers = {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": parseAppId,
+            sessionToken: localStorage.getItem("accesstoken")
+          };
+          const body = {
+            appName: localStorage.getItem("_appName"),
+            roleName: "contracts_Guest",
+            userId: user.id
+          };
+          await axios.post(roleurl, body, { headers: headers });
+          const currentUser = Parse.User.current();
+          contactQuery.set(
+            "CreatedBy",
+            Parse.User.createWithoutData(currentUser.id)
+          );
+
+          contactQuery.set("UserId", user);
+          const acl = new Parse.ACL();
+          acl.setPublicReadAccess(true);
+          acl.setPublicWriteAccess(true);
+          acl.setReadAccess(currentUser.id, true);
+          acl.setWriteAccess(currentUser.id, true);
+
+          contactQuery.setACL(acl);
+
+          const res = await contactQuery.save();
+
+          const parseData = JSON.parse(JSON.stringify(res));
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
           }
-          contactQuery.set("Email", email);
-          contactQuery.set("UserRole", "contracts_Guest");
-
-          contactQuery.set("TenantId", {
-            __type: "Pointer",
-            className: "partners_Tenant",
-            objectId: localStorage.getItem("TenantId")
-          });
-
-          try {
-            const _users = Parse.Object.extend("User");
-            const _user = new _users();
-            _user.set("name", name);
-            _user.set("username", email);
-            _user.set("email", email);
-            _user.set("password", email);
-            if (phone) {
-              _user.set("phone", phone);
-            }
-            const user = await _user.save();
-            if (user) {
-              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
-              const headers = {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": parseAppId,
-                sessionToken: localStorage.getItem("accesstoken")
-              };
-              const body = {
-                appName: localStorage.getItem("_appName"),
-                roleName: "contracts_Guest",
-                userId: user.id
-              };
-              await axios.post(roleurl, body, { headers: headers });
-              const currentUser = Parse.User.current();
-              contactQuery.set(
-                "CreatedBy",
-                Parse.User.createWithoutData(currentUser.id)
-              );
-
-              contactQuery.set("UserId", user);
-              const acl = new Parse.ACL();
-              acl.setPublicReadAccess(true);
-              acl.setPublicWriteAccess(true);
-              acl.setReadAccess(currentUser.id, true);
-              acl.setWriteAccess(currentUser.id, true);
-
-              contactQuery.setACL(acl);
-
-              const res = await contactQuery.save();
-
-              const parseData = JSON.parse(JSON.stringify(res));
-              if (props.details) {
-                props.details({
-                  value: parseData[props.valueKey],
-                  label: parseData[props.displayKey]
-                });
-              }
-              if (props.closePopup) {
-                props.closePopup();
-              }
-              if (props.handleUserData) {
-                props.handleUserData(parseData);
-              }
-
-              setIsLoader(false);
-              // Reset the form fields
-              setAddYourself(false);
-              setName("");
-              setPhone("");
-              setEmail("");
-            }
-          } catch (err) {
-            console.log("err ", err);
-            if (err.code === 202) {
-              const params = { email: email };
-              const userRes = await Parse.Cloud.run("getUserId", params);
-              const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
-              const headers = {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": parseAppId,
-                sessionToken: localStorage.getItem("accesstoken")
-              };
-              const body = {
-                appName: localStorage.getItem("_appName"),
-                roleName: "contracts_Guest",
-                userId: userRes.id
-              };
-              await axios.post(roleurl, body, { headers: headers });
-              const currentUser = Parse.User.current();
-              contactQuery.set(
-                "CreatedBy",
-                Parse.User.createWithoutData(currentUser.id)
-              );
-
-              contactQuery.set("UserId", {
-                __type: "Pointer",
-                className: "_User",
-                objectId: userRes.id
-              });
-              const acl = new Parse.ACL();
-              acl.setPublicReadAccess(true);
-              acl.setPublicWriteAccess(true);
-              acl.setReadAccess(currentUser.id, true);
-              acl.setWriteAccess(currentUser.id, true);
-
-              contactQuery.setACL(acl);
-              const res = await contactQuery.save();
-
-              const parseData = JSON.parse(JSON.stringify(res));
-              if (props.details) {
-                props.details({
-                  value: parseData[props.valueKey],
-                  label: parseData[props.displayKey]
-                });
-              }
-              if (props.closePopup) {
-                props.closePopup();
-              }
-              if (props.handleUserData) {
-                props.handleUserData(parseData);
-              }
-              setIsLoader(false);
-              // Reset the form fields
-              setAddYourself(false);
-              setName("");
-              setPhone("");
-              setEmail("");
-            }
+          if (props.closePopup) {
+            props.closePopup();
           }
-        } else {
-          alert("Contact already exist!");
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
+
           setIsLoader(false);
+          // Reset the form fields
+          setAddYourself(false);
+          setName("");
+          setPhone("");
+          setEmail("");
         }
       } catch (err) {
-        console.log("err in fetch contact", err);
-        setIsLoader(false);
-        alert("something went wrong, please try again later");
+        console.log("err ", err);
+        if (err.code === 202) {
+          const params = { email: email };
+          const userRes = await Parse.Cloud.run("getUserId", params);
+          const roleurl = `${parseBaseUrl}functions/AddUserToRole`;
+          const headers = {
+            "Content-Type": "application/json",
+            "X-Parse-Application-Id": parseAppId,
+            sessionToken: localStorage.getItem("accesstoken")
+          };
+          const body = {
+            appName: localStorage.getItem("_appName"),
+            roleName: "contracts_Guest",
+            userId: userRes.id
+          };
+          await axios.post(roleurl, body, { headers: headers });
+          const currentUser = Parse.User.current();
+          contactQuery.set(
+            "CreatedBy",
+            Parse.User.createWithoutData(currentUser.id)
+          );
+
+          contactQuery.set("UserId", {
+            __type: "Pointer",
+            className: "_User",
+            objectId: userRes.id
+          });
+          const acl = new Parse.ACL();
+          acl.setPublicReadAccess(true);
+          acl.setPublicWriteAccess(true);
+          acl.setReadAccess(currentUser.id, true);
+          acl.setWriteAccess(currentUser.id, true);
+
+          contactQuery.setACL(acl);
+          const res = await contactQuery.save();
+
+          const parseData = JSON.parse(JSON.stringify(res));
+          if (props.details) {
+            props.details({
+              value: parseData[props.valueKey],
+              label: parseData[props.displayKey]
+            });
+          }
+          if (props.closePopup) {
+            props.closePopup();
+          }
+          if (props.handleUserData) {
+            props.handleUserData(parseData);
+          }
+          setIsLoader(false);
+          // Reset the form fields
+          setAddYourself(false);
+          setName("");
+          setPhone("");
+          setEmail("");
+        }
       }
-    } else {
+    } catch (err) {
+      // console.log("err", err);
       setIsLoader(false);
-      alert("something went wrong, please try again later");
+      alert("something went wrong!");
     }
   };
 
@@ -227,29 +209,38 @@ const AddSigner = (props) => {
     <div className="h-full p-[20px]">
       {isLoader && (
         <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
-      <div className="w-full mx-auto p-2 text-base-content">
+      <div className="w-full mx-auto p-2">
         {isUserExist && (
-          <div className="mb-3 flex items-center">
+          <div className="mb-3">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="op-checkbox op-checkbox-sm"
+              className="form-checkbox"
             />
-            <label htmlFor="addYourself" className="ml-2 mb-0">
+            <label htmlFor="addYourself" className="ml-2 text-gray-700">
               Add Yourself
             </label>
           </div>
         )}
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
-            <label htmlFor="name" className="block text-xs font-semibold">
+            <label
+              htmlFor="name"
+              className="block text-xs text-gray-700 font-semibold"
+            >
               Name
-              <span className="text-[red] text-[13px]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
@@ -258,45 +249,59 @@ const AddSigner = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
           <div className="mb-3">
-            <label htmlFor="email" className="block text-xs font-semibold">
+            <label
+              htmlFor="email"
+              className="block text-xs text-gray-700 font-semibold"
+            >
               Email
-              <span className="text-[red] text-[13px]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="email"
               id="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
+              onChange={(e) => setEmail(e.target.value)}
               required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
           <div className="mb-3">
-            <label htmlFor="phone" className="block text-xs font-semibold">
+            <label
+              htmlFor="phone"
+              className="block text-xs text-gray-700 font-semibold"
+            >
               Phone
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
               id="phone"
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
+              required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
-          <div className="mt-4 flex gap-x-2 justify-start">
-            <button type="submit" className="op-btn op-btn-primary">
+
+          <div className="mt-4 flex justify-start">
+            <button
+              type="submit"
+              style={{ backgroundColor: modalSubmitBtnColor }}
+              className="mr-2 px-[20px] py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+            >
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="op-btn op-btn-secondary"
+              style={{ backgroundColor: modalCancelBtnColor }}
+              className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
             >
               Reset
             </button>

apps/OpenSign/src/components/AddUser.js

@@ -3,7 +3,6 @@ import Parse from "parse";
 import axios from "axios";
 import Title from "./Title";
 import Alert from "../primitives/Alert";
-import Loader from "../primitives/Loader";
 
 const AddUser = (props) => {
   const [name, setName] = useState("");
@@ -63,10 +62,8 @@ const AddUser = (props) => {
           _user.set("name", name);
           _user.set("username", email);
           _user.set("email", email);
-          _user.set("password", email);
-          if (phone) {
-            _user.set("phone", phone);
-          }
+          _user.set("phone", phone);
+          _user.set("password", phone);
 
           const user = await _user.save();
           if (user) {
@@ -196,7 +193,13 @@ const AddUser = (props) => {
       {isUserExist && <Alert type="danger">User already exists!</Alert>}
       {isLoader && (
         <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50">
-          <Loader />
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
       <div className="w-full mx-auto">
@@ -208,7 +211,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Name
-              <span className="text-[red] text-[13px]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
@@ -216,7 +219,7 @@ const AddUser = (props) => {
               value={name}
               onChange={(e) => setName(e.target.value)}
               required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
           <div className="mb-3">
@@ -225,7 +228,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Email
-              <span className="text-[red] text-[13px]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="email"
@@ -233,7 +236,7 @@ const AddUser = (props) => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
           <div className="mb-3">
@@ -242,7 +245,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Phone
-              <span className="text-[red] text-[13px]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
@@ -250,7 +253,7 @@ const AddUser = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
             />
           </div>
 

apps/OpenSign/src/components/BulkSendUi.js

@@ -1,256 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import axios from "axios";
-import SuggestionInput from "./shared/fields/SuggestionInput";
-import Loader from "../primitives/Loader";
-
-const BulkSendUi = (props) => {
-  const [forms, setForms] = useState([]);
-  const [formId, setFormId] = useState(2);
-  const formRef = useRef(null);
-  const [scrollOnNextUpdate, setScrollOnNextUpdate] = useState(false);
-  const [isSubmit, setIsSubmit] = useState(false);
-  const [allowedForm, setAllowedForm] = useState(0);
-  const [isSignatureExist, setIsSignatureExist] = useState();
-  const allowedSigners = 50;
-  useEffect(() => {
-    signatureExist();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  //function to check atleast one signature field exist
-  const signatureExist = () => {
-    const getPlaceholder = props.item?.Placeholders;
-    const checkIsSignatureExistt = getPlaceholder?.every((placeholderObj) =>
-      placeholderObj?.placeHolder?.some((holder) =>
-        holder?.pos?.some((posItem) => posItem?.type === "signature")
-      )
-    );
-    setIsSignatureExist(checkIsSignatureExistt);
-  };
-  useEffect(() => {
-    if (scrollOnNextUpdate && formRef.current) {
-      formRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "end",
-        inline: "nearest"
-      });
-      setScrollOnNextUpdate(false);
-    }
-  }, [forms, scrollOnNextUpdate]);
-
-  useEffect(() => {
-    (() => {
-      if (props?.Placeholders?.length > 0) {
-        let users = [];
-        props?.Placeholders?.forEach((element) => {
-          if (!element.signerObjId) {
-            users = [
-              ...users,
-              {
-                fieldId: element.Id,
-                email: "",
-                label: element.Role,
-                signer: {}
-              }
-            ];
-          }
-        });
-        setForms((prevForms) => [...prevForms, { Id: 1, fields: users }]);
-        const totalForms = Math.floor(allowedSigners / users?.length);
-        setAllowedForm(totalForms);
-      }
-    })();
-    // eslint-disable-next-line
-  }, []);
-  const handleInputChange = (index, signer, fieldIndex) => {
-    const newForms = [...forms];
-    newForms[index].fields[fieldIndex].email = signer?.Email
-      ? signer?.Email
-      : signer || "";
-    newForms[index].fields[fieldIndex].signer = signer?.objectId ? signer : "";
-    setForms(newForms);
-  };
-
-  const handleAddForm = (e) => {
-    e.preventDefault();
-    // Check if the quick send limit has been reached
-    if (forms?.length < allowedForm) {
-      if (props?.Placeholders.length > 0) {
-        let newForm = [];
-        props?.Placeholders?.forEach((element) => {
-          if (!element.signerObjId) {
-            newForm = [
-              ...newForm,
-              {
-                fieldId: element.Id,
-                email: "",
-                label: element.Role,
-                signer: {}
-              }
-            ];
-          }
-        });
-        setForms([...forms, { Id: formId, fields: newForm }]);
-      }
-      setFormId(formId + 1);
-      setScrollOnNextUpdate(true);
-    } else {
-      // If the limit has been reached, throw an error with the appropriate message
-      alert("Quick send reached limit.");
-    }
-  };
-
-  const handleRemoveForm = (index) => {
-    const updatedForms = forms.filter((_, i) => i !== index);
-    setForms(updatedForms);
-  };
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsSubmit(true);
-
-    // Create a copy of Placeholders array from props.item
-    let Placeholders = [...props.item.Placeholders];
-    // Initialize an empty array to store updated documents
-    let Documents = [];
-
-    // Loop through each form
-    forms.forEach((form) => {
-      // Map through the copied Placeholders array to update email values
-      const updatedPlaceholders = Placeholders.map((placeholder) => {
-        // Find the field in the current form that matches the placeholder Id
-        const field = form.fields.find(
-          (element) => parseInt(element.fieldId) === placeholder.Id
-        );
-        // If a matching field is found, update the email value in the placeholder
-        const signer = field?.signer?.objectId ? field.signer : {};
-        if (field) {
-          return {
-            ...placeholder,
-            email: field.email,
-            signerObjId: field?.signer?.objectId || "",
-            signerPtr: signer
-          };
-        }
-        // If no matching field is found, keep the placeholder as is
-        return placeholder;
-      });
-
-      // Push a new document object with updated Placeholders into the Documents array
-      Documents.push({ ...props.item, Placeholders: updatedPlaceholders });
-    });
-    // console.log("Documents ", Documents);
-    await batchQuery(Documents);
-  };
-
-  const batchQuery = async (Documents) => {
-    const serverUrl = localStorage.getItem("baseUrl");
-    const functionsUrl = `${serverUrl}functions/batchdocuments`;
-    const headers = {
-      "Content-Type": "application/json",
-      "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-      sessionToken: localStorage.getItem("accesstoken")
-    };
-    const params = {
-      Documents: JSON.stringify(Documents)
-    };
-    try {
-      const res = await axios.post(functionsUrl, params, { headers: headers });
-      // console.log("res ", res);
-      if (res.data && res.data.result) {
-        props.handleClose("success", Documents?.length);
-      }
-    } catch (err) {
-      console.log("Err ", err);
-      props.handleClose("error", 0);
-    } finally {
-      setIsSubmit(false);
-    }
-  };
-
-  return (
-    <>
-      {isSubmit && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
-        </div>
-      )}
-      {props.Placeholders?.length > 0 ? (
-        isSignatureExist ? (
-          <>
-            {props.Placeholders?.some((x) => !x.signerObjId) ? (
-              <form onSubmit={handleSubmit}>
-                <div className="min-h-max max-h-[250px] overflow-y-auto">
-                  {forms?.map((form, index) => (
-                    <div
-                      key={form.Id}
-                      className="p-3 op-card border-[1px] border-gray-400 mt-3 mx-4 mb-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
-                    >
-                      {form?.fields?.map((field, fieldIndex) => (
-                        <div className="flex flex-col" key={field.fieldId}>
-                          <label>{field.label}</label>
-                          <SuggestionInput
-                            required
-                            type="email"
-                            value={field.value}
-                            index={fieldIndex}
-                            onChange={(signer) =>
-                              handleInputChange(index, signer, fieldIndex)
-                            }
-                          />
-                        </div>
-                      ))}
-                      {forms?.length > 1 && (
-                        <button
-                          onClick={() => handleRemoveForm(index)}
-                          className="absolute right-3 top-1 text-[red] border-[1px] border-[red] rounded-lg w-[1.7rem] h-[1.7rem]"
-                        >
-                          <i className="fa-solid fa-trash"></i>
-                        </button>
-                      )}
-                      <div ref={formRef}></div>
-                    </div>
-                  ))}
-                </div>
-                <div className="flex flex-col mx-4 mb-4 gap-3">
-                  <button
-                    onClick={handleAddForm}
-                    className="op-btn op-btn-primary focus:outline-none"
-                  >
-                    <i className="fa-solid fa-plus"></i> <span>Add new</span>
-                  </button>
-                  <button
-                    type="submit"
-                    className="op-btn op-btn-secondary focus:outline-none"
-                  >
-                    <i className="fa-solid fa-paper-plane"></i>{" "}
-                    <span>Send</span>
-                  </button>
-                </div>
-              </form>
-            ) : (
-              <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-                All roles in this document are currently linked to contacts. To
-                &apos;quick send&apos; copies of this template to multiple
-                signers, please ensure that at least one role is not linked to
-                any contact.
-              </div>
-            )}
-          </>
-        ) : (
-          <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-            Please ensure there&#39;s at least one signature widget added for
-            all recipients.
-          </div>
-        )
-      ) : (
-        <div className="text-black p-3 bg-white w-full text-sm md:text-base flex justify-center items-center">
-          Please add at least one role to this template in order to &apos;quick
-          send&apos; copies of it to multiple signers.
-        </div>
-      )}
-    </>
-  );
-};
-
-export default BulkSendUi;

apps/OpenSign/src/components/Footer.js

@@ -45,16 +45,12 @@ const Footer = () => {
   };
   return (
     <>
-      <footer className="op-footer op-footer-center py-3 bg-base-300 text-base-content text-center text-[13px]">
-        <aside>
-          <p>
-            All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
-            <span onClick={openUrl} className="hover:underline cursor-pointer">
-              {appName} ( version: {version ? version : `${Package.version} `})
-            </span>
-          </p>
-        </aside>
-      </footer>
+      <div className="bg-[#222c3c] text-[#98a6ba] text-center text-[13px] py-3">
+        All Rights Reserved &copy; {new Date().getFullYear()} &nbsp;
+        <span onClick={openUrl} className="hover:underline cursor-pointer">
+          {appName} ( version: {version ? version : `${Package.version} `})
+        </span>
+      </div>
       <button
         className={`${
           showButton ? "block" : "hidden"

apps/OpenSign/src/components/FullScreenButton.js

@@ -67,7 +67,7 @@ const FullScreenButton = () => {
     <div className="flex items-center">
       <button
         onClick={toggleFullScreen}
-        className="text-base-content p-2 text-sm focus:outline-none"
+        className="text-black p-2 text-sm focus:outline-none"
       >
         {isFullScreen ? (
           <i className="fa-solid fa-compress"></i>

apps/OpenSign/src/components/Header.js

@@ -44,13 +44,7 @@ const Header = ({ showSidebar }) => {
 
   const closeDropdown = () => {
     setIsOpen(false);
-    if (Parse?.User?.current()) {
-      try {
-        Parse.User.logOut();
-      } catch (err) {
-        console.log("Err", err);
-      }
-    }
+    Parse.User.logOut();
     let appdata = localStorage.getItem("userSettings");
     let applogo = localStorage.getItem("appLogo");
     let appName = localStorage.getItem("appName");
@@ -93,16 +87,14 @@ const Header = ({ showSidebar }) => {
   }, [isOpen]);
 
   return (
-    <div className="op-navbar bg-base-100 shadow">
-      <div className="flex-none">
-        <button
-          className="op-btn op-btn-square op-btn-ghost focus:outline-none"
-          onClick={showSidebar}
-        >
-          <i className="fa-solid fa-bars text-xl text-base-content"></i>
-        </button>
-      </div>
-      <div className="flex-1 ml-2">
+    <div className="flex flex-row justify-between items-center gap-x-3 md:gap-x-4 bg-white md:px-4 px-2 shadow h-[50px] md:w-full ">
+      <button
+        className="cursor-pointer focus:outline-none"
+        onClick={showSidebar}
+      >
+        <i className={`fa-solid fa-bars text-xl `}></i>
+      </button>
+      <div className="flex-1">
         <div className="h-[25px] md:h-[40px] w-auto overflow-hidden">
           <img
             className="object-contain h-full w-auto"
@@ -111,7 +103,10 @@ const Header = ({ showSidebar }) => {
           />
         </div>
       </div>
-      <div id="profile-menu" className="flex-none gap-2">
+      <div
+        id="profile-menu"
+        className="flex justify-between items-center gap-x-3"
+      >
         {!isSubscribe && (
           <div>
             <button
@@ -123,7 +118,7 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {isPro && (
-          <div className="w-[35px] h-[35px] bg-white rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
+          <div className="w-[35px] h-[35px] rounded-full ring-[1px] ring-offset-2 ring-[#002862] text-[#002862] overflow-hidden font-semibold flex items-center justify-center">
             PRO
           </div>
         )}
@@ -143,66 +138,60 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {width >= 768 && (
-          <div
-            onClick={toggleDropdown}
-            className="cursor-pointer text-base-content text-sm"
-          >
+          <div onClick={toggleDropdown} className="cursor-pointer text-sm">
             {username && username}
           </div>
         )}
-        <div className="op-dropdown op-dropdown-end" id="profile-menu">
-          <div tabIndex={0} role="button" className="op-btn op-btn-ghost">
-            <i
-              tabIndex={0}
-              role="button"
-              onClick={toggleDropdown}
-              className="fa-solid fa-angle-down text-base-content"
-            ></i>
+        <div className="relative">
+          <div className="cursor-pointer">
+            <i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
           </div>
-          <ul
-            tabIndex={0}
-            className="mt-3 z-[1] p-2 shadow op-menu op-menu-sm op-dropdown-content text-base-content bg-base-100 rounded-box w-52"
+          <div
+            className={`dropdown absolute text-sm text-gray-700 font-light right-0 mt-4 p-1 w-48 bg-white border rounded-lg shadow-lg z-10 ${
+              isOpen ? "block" : "hidden"
+            }`}
           >
-            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
-              <span>
+            <ul>
+              <li
+                className="hover:bg-gray-100 rounded-t-lg py-1 px-2 cursor-pointer font-normal"
+                onClick={() => openInNewTab("https://docs.opensignlabs.com")}
+              >
                 <i className="fa-solid fa-book"></i> Docs
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                setIsOpen(false);
-                navigate("/profile");
-              }}
-            >
-              <span>
+              </li>
+              <li
+                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
+                onClick={() => {
+                  setIsOpen(false);
+                  navigate("/profile");
+                }}
+              >
                 <i className="fa-regular fa-user"></i> Profile
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                setIsOpen(false);
-                navigate("/changepassword");
-              }}
-            >
-              <span>
+              </li>
+              <li
+                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
+                onClick={() => {
+                  setIsOpen(false);
+                  navigate("/changepassword");
+                }}
+              >
                 <i className="fa-solid fa-lock"></i> Change Password
-              </span>
-            </li>
-            <li
-              onClick={() => {
-                window.open("https://console.opensignlabs.com/");
-              }}
-            >
-              <span>
+              </li>
+              <li
+                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
+                onClick={() => {
+                  window.open("https://console.opensignlabs.com/");
+                }}
+              >
                 <i className="fa-regular fa-id-card"></i> Console
-              </span>
-            </li>
-            <li onClick={closeDropdown}>
-              <span>
+              </li>
+              <li
+                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
+                onClick={closeDropdown}
+              >
                 <i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
-              </span>
-            </li>
-          </ul>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>

apps/OpenSign/src/components/LoginFacebook.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import Parse from "parse";
-import Loader from "../primitives/Loader";
 // import FacebookLogin from "react-facebook-login";
 
 const LoginFacebook = ({
@@ -50,7 +49,7 @@ const LoginFacebook = ({
     const extRes = await Parse.Cloud.run("getUserDetails", params);
     // console.log("extRes ", extRes);
     if (extRes) {
-      const params = { ...details, Phone: extRes?.get("Phone") || "" };
+      const params = { ...details, Phone: extRes.get("Phone") };
       const payload = await Parse.Cloud.run("facebooksign", params);
       //   console.log("payload ", payload);
       if (payload && payload.sessiontoken) {
@@ -60,7 +59,7 @@ const LoginFacebook = ({
         const LocalUserDetails = {
           name: details.Name,
           email: details.Email,
-          phone: extRes?.get("Phone") || "",
+          phone: extRes.get("Phone"),
           company: extRes.get("Company")
         };
         localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
@@ -76,7 +75,7 @@ const LoginFacebook = ({
   const handleSubmitbtn = async () => {
     if (userDetails.Phone && userDetails.Company) {
       setThirdpartyLoader(true);
-      const params = { ...fBDetails, Phone: userDetails?.Phone || "" };
+      const params = { ...fBDetails, Phone: userDetails.Phone };
       const payload = await Parse.Cloud.run("facebooksign", params);
       // console.log("payload ", payload);
 
@@ -86,7 +85,7 @@ const LoginFacebook = ({
             name: userDetails.Name,
             email: userDetails.Email,
             // "passsword":userDetails.Phone,
-            phone: userDetails?.Phone || "",
+            phone: userDetails.Phone,
             role: "contracts_User",
             company: userDetails.Company
           }
@@ -97,7 +96,7 @@ const LoginFacebook = ({
           const LocalUserDetails = {
             name: userDetails.Name,
             email: userDetails.Email,
-            phone: userDetails?.Phone || "",
+            phone: userDetails.Phone,
             company: userDetails.Company
           };
           localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
@@ -113,10 +112,29 @@ const LoginFacebook = ({
     }
   };
   return (
-    <div className="relative">
+    <div style={{ position: "relative" }}>
       {thirdpartyLoader && (
-        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
-          <Loader />
+        <div
+          style={{
+            position: "fixed",
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            top: 0,
+            left: 0,
+            zIndex: 2
+          }}
+        >
+          <div
+            style={{
+              position: "fixed",
+              fontSize: "50px",
+              color: "#3ac9d6",
+              top: "50%",
+              left: "45%"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
       {/* <FacebookLogin
@@ -128,10 +146,11 @@ const LoginFacebook = ({
       /> */}
       {isModal && (
         <div
-          className="modal fade show block z-[1]"
+          className="modal fade show"
           id="exampleModal"
           tabIndex="-1"
           role="dialog"
+          style={{ display: "block", zIndex: 1 }}
         >
           <div className="modal-dialog" role="document">
             <div className="modal-content">
@@ -144,8 +163,13 @@ const LoginFacebook = ({
               <div className="modal-body">
                 <form>
                   <div className="form-group">
-                    <label htmlFor="Phone" className="col-form-label">
-                      Phone <span className="text-[red] text-[13px]">*</span>
+                    <label
+                      htmlFor="Phone"
+                      style={{ display: "flex" }}
+                      className="col-form-label"
+                    >
+                      Phone{" "}
+                      <span style={{ fontSize: 13, color: "red" }}>*</span>
                     </label>
                     <input
                       type="tel"
@@ -162,8 +186,13 @@ const LoginFacebook = ({
                     />
                   </div>
                   <div className="form-group">
-                    <label htmlFor="Company" className="col-form-label">
-                      Company <span className="text-[red] text-[13px]">*</span>
+                    <label
+                      htmlFor="Company"
+                      style={{ display: "flex" }}
+                      className="col-form-label"
+                    >
+                      Company{" "}
+                      <span style={{ fontSize: 13, color: "red" }}>*</span>
                     </label>
                     <input
                       type="text"
@@ -183,14 +212,16 @@ const LoginFacebook = ({
                     <button
                       type="button"
                       onClick={() => handleSubmitbtn()}
-                      className="btn btn-info mr-[10px]"
+                      className="btn btn-info"
+                      style={{ marginRight: 10 }}
                     >
                       Sign up
                     </button>
                     <button
                       type="button"
-                      className="btn btn-secondary w-[90px]"
+                      className="btn btn-secondary"
                       onClick={() => setIsModal(false)}
+                      style={{ width: 90 }}
                     >
                       Cancel
                     </button>

apps/OpenSign/src/components/LoginGoogle.js

@@ -3,7 +3,7 @@ import Parse from "parse";
 import { jwtDecode } from "jwt-decode";
 import { useScript } from "../hook/useScript";
 import ModalUi from "../primitives/ModalUi";
-import Loader from "../primitives/Loader";
+import { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -110,7 +110,7 @@ const GoogleSignInBtn = ({
     const extRes = await Parse.Cloud.run("getUserDetails", params);
     // console.log("extRes ", extRes);
     if (extRes) {
-      const params = { ...details, Phone: extRes?.get("Phone") || "" };
+      const params = { ...details, Phone: extRes.get("Phone") };
       const payload = await Parse.Cloud.run("googlesign", params);
       // console.log("payload ", payload);
       if (payload && payload.sessiontoken) {
@@ -121,7 +121,7 @@ const GoogleSignInBtn = ({
         const LocalUserDetails = {
           name: details.Name,
           email: details.Gmail,
-          phone: extRes?.get("Phone") || "",
+          phone: extRes.get("Phone"),
           company: extRes.get("Company")
         };
         localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
@@ -139,7 +139,7 @@ const GoogleSignInBtn = ({
       setThirdpartyLoader(true);
       // e.preventDefault()
       // console.log("handelSubmit", userDetails);
-      const params = { ...googleDetails, Phone: userDetails?.Phone };
+      const params = { ...googleDetails, Phone: userDetails.Phone };
       const payload = await Parse.Cloud.run("googlesign", params);
 
       // console.log("payload ", payload);
@@ -149,7 +149,7 @@ const GoogleSignInBtn = ({
             name: userDetails.Name,
             email: userDetails.Email,
             // "passsword":userDetails.Phone,
-            phone: userDetails?.Phone || "",
+            phone: userDetails.Phone,
             role: "contracts_User",
             company: userDetails.Company,
             jobTitle: userDetails.Destination
@@ -161,7 +161,7 @@ const GoogleSignInBtn = ({
           const LocalUserDetails = {
             name: userDetails.Name,
             email: userDetails.Email,
-            phone: userDetails?.Phone || "",
+            phone: userDetails.Phone,
             company: userDetails.Company
             // jobTitle: userDetails.JobTitle
           };
@@ -207,22 +207,45 @@ const GoogleSignInBtn = ({
     localStorage.setItem("parseAppId", appid);
   };
   return (
-    <div className="relative">
+    <div style={{ position: "relative" }}>
       {thirdpartyLoader && (
-        <div className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
-          <Loader />
+        <div
+          style={{
+            position: "fixed",
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            top: 0,
+            left: 0,
+            zIndex: 2
+          }}
+        >
+          <div
+            style={{
+              position: "fixed",
+              fontSize: "50px",
+              color: "#3ac9d6",
+              top: "50%",
+              left: "45%"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
       <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
-        <form className="px-4 py-3 text-base-content">
+        <form className="px-4 py-3">
           <div className="mb-3">
-            <label htmlFor="Phone" className="block text-xs font-semibold">
-              Phone <span className="text-[13px] text-[red]">*</span>
+            <label
+              htmlFor="Phone"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
             </label>
             <input
               type="tel"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               id="Phone"
               value={userDetails.Phone}
               onChange={(e) =>
@@ -235,12 +258,16 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label htmlFor="Company" className="block text-xs font-semibold">
-              Company <span className="text-[13px] text-[red]">*</span>
+            <label
+              htmlFor="Company"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Company <span style={{ fontSize: 13, color: "red" }}>*</span>
             </label>
             <input
               type="text"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               id="Company"
               value={userDetails.Company}
               onChange={(e) =>
@@ -253,12 +280,16 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label htmlFor="JobTitle" className="block text-xs font-semibold">
-              Job Title <span className="text-[13px] text-[red]">*</span>
+            <label
+              htmlFor="JobTitle"
+              style={{ display: "flex" }}
+              className="block text-xs text-gray-700 font-semibold"
+            >
+              Job Title <span style={{ fontSize: 13, color: "red" }}>*</span>
             </label>
             <input
               type="text"
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               id="JobTitle"
               value={userDetails.Destination}
               onChange={(e) =>
@@ -270,18 +301,20 @@ const GoogleSignInBtn = ({
               required
             />
           </div>
-          <div className="flex flex-row gap-2">
+          <div>
             <button
               type="button"
-              className="op-btn op-btn-primary"
+              className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
               onClick={() => handleSubmitbtn()}
+              style={{ marginRight: 10, backgroundColor: modalSubmitBtnColor }}
             >
               Sign up
             </button>
             <button
               type="button"
-              className="op-btn op-btn-ghost"
+              className="p-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
               onClick={handleCloseModal}
+              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
             >
               Cancel
             </button>

apps/OpenSign/src/components/RenderDebugPdf.js

@@ -4,11 +4,26 @@ import { Stage, Layer, Rect } from "react-konva";
 const RenderDebugPdf = (props) => {
   return (
     <div>
-      <div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
+      <div
+        style={{
+          position: "sticky",
+          top: 0,
+          padding: 10,
+          zIndex: 1,
+          backgroundColor: "white",
+          border: "1px solid grey",
+          margin: "5px 0"
+        }}
+      >
         {`Co-ordinates: X - ${props.hoverCoordinates.x}, Y - ${props.hoverCoordinates.y}`}
       </div>
       <div
-        className="relative flex-1 cursor-crosshair border-[1px] border-[gray] overflow-auto"
+        style={{
+          flex: 1,
+          position: "relative",
+          border: "1px solid grey",
+          overflow: "auto"
+        }}
         onMouseMove={props.handleMouseMoveDiv}
       >
         <Document
@@ -41,7 +56,7 @@ const RenderDebugPdf = (props) => {
           onMouseUp={props.handleMouseUp}
           width={props.pdfDimension.width}
           height={props.pdfDimension.height}
-          className="absolute top-0 right-0"
+          style={{ position: "absolute", top: 0, left: 0 }}
         >
           <Layer>
             {props.annotations

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

@@ -26,18 +26,18 @@ const DashboardButton = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
+      } w-full px-3 py-2 flex text-white rounded-md shadow overflow-hidden`}
     >
-      <div className="flex flex-row items-center">
-        <span className="rounded-full bg-base-content bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
+      <div className="flex items-center justify-start gap-5">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="op-card-title text-lg ml-3 text-base-content">
-          {props.Label}
+        <div className="">
+          <div className="text-base lg:text-lg text-black"> {props.Label}</div>
         </div>
       </div>
     </div>

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

@@ -336,29 +336,25 @@ const DashboardCard = (props) => {
         props.Data && props.Data.Redirect_type
           ? "cursor-pointer"
           : "cursor-default"
-      }`}
+      } w-full h-[140px] px-3 pt-4 pb-10 text-white rounded-md shadow overflow-hidden relative`}
     >
-      <div className="flex items-center justify-start gap-5 text-white">
-        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px] self-start flex justify-center items-center">
+      <div className="flex items-center justify-start gap-5">
+        <span className="rounded-full bg-black bg-opacity-20 w-[60px] h-[60px]  self-start flex justify-center items-center">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="font-medium">
+        <div className="">
           <div className="text-base lg:text-lg"> {props.Label}</div>
           <div className="text-2xl font-light">
             {loading ? <div className="loader-01"></div> : setFormat(response)}
           </div>
         </div>
       </div>
-      <div className="text-xs absolute top-3 right-2">
-        <Tooltip
-          id={props.Label}
-          iconColor={"white"}
-          message={props?.Data?.tourMessage}
-        />
+      <div className="text-xs absolute top-2 right-1">
+        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
       </div>
     </div>
   );

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

@@ -3,7 +3,6 @@ import Parse from "parse";
 import ReportTable from "../../primitives/GetReportDisplay";
 import reportJson from "../../json/ReportJson";
 import axios from "axios";
-import Loader from "../../primitives/Loader";
 function DashboardReport(props) {
   // console.log("props ", props)
   const [List, setList] = useState([]);
@@ -122,8 +121,21 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div className="h-[250px] flex justify-center items-center">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
         <>

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

@@ -18,26 +18,51 @@ const buttonList = [
 ];
 const GetDashboard = (props) => {
   const Button = ({ label, redirectId, redirectType, icon }) => (
-    <DashboardButton
-      Icon={icon}
-      Label={label}
-      Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
-    />
+    <div className={"bg-white rounded-md shadow  w-full"}>
+      <Suspense
+        fallback={
+          <div style={{ height: "300px" }}>
+            <div
+              style={{
+                marginLeft: "45%",
+                marginTop: "150px",
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
+          </div>
+        }
+      >
+        <DashboardButton
+          Icon={icon}
+          Label={label}
+          Data={{ Redirect_type: redirectType, Redirect_id: redirectId }}
+        />
+      </Suspense>
+    </div>
   );
   const renderSwitchWithTour = (col) => {
     switch (col.widget.type) {
       case "Card":
         return (
           <div
-            className={`${
-              col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
-            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
+            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
             data-tut={col.widget.data.tourSection}
+            style={{ background: col.widget.bgColor }}
           >
             <Suspense
               fallback={
-                <div className="h-[150px] w-full flex justify-center items-center">
-                  loading...
+                <div style={{ height: "300px" }}>
+                  <div
+                    style={{
+                      marginLeft: "45%",
+                      marginTop: "150px",
+                      fontSize: "45px",
+                      color: "#3dd3e0"
+                    }}
+                    className="loader-37"
+                  ></div>
                 </div>
               }
             >
@@ -47,6 +72,7 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
+                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -63,7 +89,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return <></>;
+        return null;
     }
   };
   const renderSwitch = (col) => {
@@ -71,9 +97,8 @@ const GetDashboard = (props) => {
       case "Card":
         return (
           <div
-            className={`${
-              col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
-            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
+            className={"bg-[#2ed8b6] rounded-md shadow mb-3 md:mb-0"}
+            style={{ background: col.widget.bgColor }}
           >
             <Suspense fallback={<div>please wait</div>}>
               <DashboardCard
@@ -82,6 +107,7 @@ const GetDashboard = (props) => {
                 Format={col.widget.format && col.widget.format}
                 Data={col.widget.data}
                 FilterData={col.widget.filter}
+                DefaultQuery={props.DefaultQuery}
               />
             </Suspense>
           </div>
@@ -96,7 +122,7 @@ const GetDashboard = (props) => {
         );
       }
       default:
-        return <></>;
+        return null;
     }
   };
   return (
@@ -104,7 +130,7 @@ const GetDashboard = (props) => {
       <div className="mb-3">
         <div
           data-tut={"tourbutton"}
-          className="flex flex-col md:flex-row gap-4"
+          className="flex flex-col md:flex-row gap-6 md:gap-8"
         >
           {buttonList.map((btn) => (
             <Button
@@ -117,19 +143,21 @@ const GetDashboard = (props) => {
           ))}
         </div>
       </div>
-      <div className="grid grid-cols-12 w-full gap-x-4">
-        {props?.dashboard?.columns?.map((col, i) =>
-          col.widget.data && col.widget.data.tourSection ? (
-            <div key={i} className={col?.colsize}>
-              {renderSwitchWithTour(col)}
-            </div>
-          ) : (
-            <div key={i} className={col?.colsize}>
-              {renderSwitch(col)}
-            </div>
-          )
-        )}
-      </div>
+      {props.dashboard.map((val, key) => (
+        <div key={"a" + key} className="row">
+          {val.columns.map((col, i) =>
+            col.widget.data && col.widget.data.tourSection ? (
+              <div key={i} className={props.classnameArray[key][i]}>
+                {renderSwitchWithTour(col)}
+              </div>
+            ) : (
+              <div key={i} className={props.classnameArray[key][i]}>
+                {renderSwitch(col)}
+              </div>
+            )
+          )}
+        </div>
+      ))}
     </div>
   );
 };

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

@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 import Table from "react-bootstrap/Table";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import ModalUi from "../../primitives/ModalUi";
+import { themeColor } from "../../constant/const";
 import FolderModal from "../shared/fields/FolderModal";
 
 function DriveBody(props) {
@@ -312,21 +313,32 @@ function DriveBody(props) {
 
     const signersName = () => {
       const getSignersName = signerExist.map((data) => data.Name);
-      const signerName = getSignersName.join(", ");
+      const signerName = getSignersName.join(",");
 
       return (
-        <span className="statusSpan w-[90%] break-words">{signerName}</span>
+        <span
+          className="statusSpan"
+          style={{ width: "90%", wordWrap: "break-word" }}
+        >
+          {signerName}{" "}
+        </span>
       );
     };
     return listType === "table" ? (
       data.Type === "Folder" ? (
         <tr onClick={() => handleOnclikFolder(data)}>
-          <td className="cursor-pointer flex items-center">
+          <td
+            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
+          >
             <i
-              className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
+              className="fa fa-folder"
               aria-hidden="true"
+              style={{ color: "#f0ad26", marginRight: "8px", fontSize: "26px" }}
             ></i>
-            <span className="text-[12px] font-medium">{data.Name}</span>
+
+            <span style={{ fontSize: "12px", fontWeight: "500" }}>
+              {data.Name}
+            </span>
           </td>
           <td>_</td>
           <td>Folder</td>
@@ -335,9 +347,17 @@ function DriveBody(props) {
         </tr>
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
-          <td className="cursor-pointer flex items-center">
-            <i className="fa fa-file-pdf mr-[8px] text-[26px] text-[#ed4d0e]"></i>
-            <span className="text-[12px] font-medium">{data.Name}</span>
+          <td
+            style={{ cursor: "pointer", display: "flex", alignItems: "center" }}
+          >
+            <i
+              className="fa fa-file-pdf"
+              style={{ color: "#ed4d0e", marginRight: "8px", fontSize: "26px" }}
+            ></i>
+
+            <span style={{ fontSize: "12px", fontWeight: "500" }}>
+              {data.Name}
+            </span>
           </td>
           <td>{createddate}</td>
           <td>Pdf</td>
@@ -348,22 +368,31 @@ function DriveBody(props) {
                 e.stopPropagation();
                 handleMenuItemClick("Download", data);
               }}
-              className="fa fa-download mr-[8px] text-[#ed280e]"
+              className="fa fa-download"
               aria-hidden="true"
+              style={{ color: "#ed280e", marginRight: "8px" }}
             ></i>
           </td>
         </tr>
       )
     ) : listType === "list" && data.Type === "Folder" ? (
-      <div key={ind} className="icon-container">
+      <div key={ind} className="folderBox">
         <ContextMenu.Root>
           <ContextMenu.Trigger className="ContextMenuTrigger">
-            <div data-tut={props.dataTutSeventh}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                cursor: "pointer"
+              }}
+              data-tut={props.dataTutSeventh}
+            >
               <img
-                alt="folder"
+                alt="no img"
                 onClick={() => handleOnclikFolder(data)}
                 src={folder}
-                className="w-full h-full"
+                width={100}
+                height={103}
               />
               {rename === data.objectId ? (
                 <input
@@ -382,7 +411,12 @@ function DriveBody(props) {
                   defaultValue={renameValue}
                   // value={renameValue}
                   onChange={(e) => setRenameValue(e.target.value)}
-                  className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                  style={{
+                    width: "100px",
+                    border: "1.5px solid black",
+                    borderRadius: "2px",
+                    fontSize: "10px"
+                  }}
                 />
               ) : (
                 <span className="foldName">{data.Name}</span>
@@ -400,8 +434,8 @@ function DriveBody(props) {
                 onClick={() => handleMenuItemClick("Rename", data)}
                 className="ContextMenuItem"
               >
-                <i className="fa-solid fa-font mr-[8px]"></i>
-                <span>Rename</span>
+                <i className="fa-solid fa-font"></i>
+                <span style={{ marginLeft: "8px" }}>Rename</span>
               </ContextMenu.Item>
             </ContextMenu.Content>
           </ContextMenu.Portal>
@@ -416,7 +450,7 @@ function DriveBody(props) {
                 <ContextMenu.Trigger className="ContextMenuTrigger">
                   <img
                     alt="PDF"
-                    className="w-full h-full"
+                    className="pdf-icon"
                     src={pdfLogo}
                     onClick={() => checkPdfStatus(data)}
                     data-tut={props.dataTutSixth}
@@ -438,7 +472,12 @@ function DriveBody(props) {
                       defaultValue={renameValue}
                       // value={renameValue}
                       onChange={(e) => setRenameValue(e.target.value)}
-                      className="w-[100px] border-[1.5px] border-black rounded-sm text-[10px]"
+                      style={{
+                        width: "100px",
+                        border: "1.5px solid black",
+                        borderRadius: "2px",
+                        fontSize: "10px"
+                      }}
                     />
                   ) : (
                     <span className="fileName">{data.Name}</span>
@@ -483,7 +522,7 @@ function DriveBody(props) {
                         className="ContextMenuItem"
                       >
                         <i className={menu.icon}></i>
-                        <span className="ml-[8px]">{menu.type}</span>
+                        <span style={{ marginLeft: "8px" }}>{menu.type}</span>
                       </ContextMenu.Item>
                     );
                   })}
@@ -494,21 +533,21 @@ function DriveBody(props) {
         </HoverCard.Trigger>
         <HoverCard.Portal>
           <HoverCard.Content className="HoverCardContent" sideOffset={5}>
-            <strong className="text-[13px]">Title: </strong>
+            <strong style={{ fontSize: "13px" }}>Title: </strong>
             <span className="statusSpan" style={{ marginBottom: "0px" }}>
               {" "}
               {data.Name}
             </span>
             <br />
-            <strong className="text-[13px]">Status: </strong>
+            <strong style={{ fontSize: "13px" }}>Status: </strong>
             <span className="statusSpan"> {status}</span>
             <br />
-            <strong className="text-[13px]">Created Date: </strong>
+            <strong style={{ fontSize: "13px" }}>Created Date: </strong>
             <span className="statusSpan">{createddate}</span>
             <br />
             {signerExist && (
               <>
-                <strong className="text-[13px]">Signers: </strong>
+                <strong style={{ fontSize: "13px" }}>Signers: </strong>
                 {/* <span className="statusSpan">kjefjjnejkfnkbjs bbfjkdsbjbfjkbjk kscbjkbjkb</span> */}
                 {signersName()}
               </>
@@ -548,9 +587,13 @@ function DriveBody(props) {
           </Table>
         </div>
       ) : (
-        <div className="flex flex-row flex-wrap items-center mt-1 pb-[20px] mx-[5px]">
+        <div className="pdfContainer">
           {props.pdfData.map((data, ind) => {
-            return <div key={ind}>{handleFolderData(data, ind, "list")}</div>;
+            return (
+              <div className="box" key={ind}>
+                {handleFolderData(data, ind, "list")}
+              </div>
+            );
           })}
         </div>
       )}
@@ -566,23 +609,44 @@ function DriveBody(props) {
       )}
       <ModalUi
         isOpen={isDeleteDoc}
+        headerColor={themeColor}
         title={"Delete Document"}
-        handleClose={() => setIsDeleteDoc(false)}
+        handleClose={() => {
+          setIsDeleteDoc(false);
+        }}
       >
-        <div className="h-full p-[20px] text-base-content">
+        <div style={{ height: "100%", padding: 20 }}>
           <p>Are you sure you want to delete this document?</p>
-          <div className="h-[1px] w-full bg-[#9f9f9f] my-[15px]"></div>
+
+          <div
+            style={{
+              height: "1px",
+              backgroundColor: "#9f9f9f",
+              width: "100%",
+              marginTop: "15px",
+              marginBottom: "15px"
+            }}
+          ></div>
+
           <button
-            onClick={() => handleDeleteDocument(selectDoc)}
+            onClick={() => {
+              handleDeleteDocument(selectDoc);
+            }}
+            style={{
+              background: themeColor,
+              color: "white"
+            }}
             type="button"
-            className="op-btn op-btn-primary mr-2"
+            className="finishBtn"
           >
             Yes
           </button>
           <button
-            onClick={() => setIsDeleteDoc(false)}
+            onClick={() => {
+              setIsDeleteDoc(false);
+            }}
             type="button"
-            className="op-btn op-btn-neutral"
+            className="finishBtn cancelBtn"
           >
             No
           </button>

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

@@ -8,8 +8,11 @@ const AddRoleModal = (props) => {
       isOpen={props.isModalRole}
       handleClose={props.handleCloseRoleModal}
     >
-      <div className="h-full py-[10px] px-[20px]">
-        <form className="flex flex-col" onSubmit={props.handleAddRole}>
+      <div className="addusercontainer">
+        <form
+          style={{ display: "flex", flexDirection: "column" }}
+          onSubmit={props.handleAddRole}
+        >
           <input
             value={props.roleName}
             onChange={(e) => props.setRoleName(e.target.value)}
@@ -18,20 +21,39 @@ const AddRoleModal = (props) => {
                 ? "User " + (props.signersdata.length + 1)
                 : "User 1"
             }
-            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs mt-1"
+            className="addUserInput"
           />
-          <p className="text-[gray] text-[11px] mt-[5px] mb-[10px] ml-[10px]">
+          <p
+            style={{
+              color: "grey",
+              fontSize: 11,
+              margin: "10px 0 10px 5px"
+            }}
+          >
             e.g: Customer, Hr, Director, Manager, Student, etc...
           </p>
           <div>
-            <div className="h-[1px] w-full bg-[#9f9f9f] mb-[10px]"></div>
-            <button type="submit" className="op-btn op-btn-primary">
+            <div
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginBottom: "15px"
+              }}
+            ></div>
+            <button
+              type="submit"
+              style={{
+                background: "#00a2b7"
+              }}
+              className="finishBtn"
+            >
               Add
             </button>
             <button
               onClick={props.handleCloseRoleModal}
               type="button"
-              className="op-btn op-btn-ghost ml-2"
+              className="finishBtn cancelBtn"
             >
               Close
             </button>

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { themeColor } from "../../constant/const";
 function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
   const confirmToaddDefaultSign = () => {
     if (xyPostion.length > 0) {
@@ -16,26 +17,55 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) {
   };
 
   return (
-    <div data-tut="reactourThird">
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+    <div>
+      <div
+        style={{
+          background: themeColor,
+          color: "white",
+          padding: "5px",
+          fontFamily: "sans-serif",
+          marginTop: "5px"
+        }}
+      >
         Signature
       </div>
-      <div className="flex flex-col items-center mt-[10px] font-semibold">
-        <p className="text-base-content">Your Signature</p>
-        <div className="op-card shadow-md h-[111px] w-[90%] p-2">
-          <img
-            alt="signature"
-            className="w-full h-full object-contain"
-            src={defaultSignImg}
-          />
-        </div>
-        <button
-          type="button"
-          className="op-btn op-btn-primary op-btn-sm mt-[10px]"
-          onClick={() => confirmToaddDefaultSign()}
-        >
-          Auto Sign All
-        </button>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          marginTop: "10px",
+          fontWeight: "600"
+        }}
+      >
+        <>
+          <p>Your Signature</p>
+          <div className="defaultSignBox">
+            <img
+              alt="default img"
+              style={{
+                width: "100%",
+                height: "100%",
+                objectFit: "contain"
+              }}
+              src={defaultSignImg}
+            />
+          </div>
+          <button
+            style={{
+              background: themeColor,
+              color: "white",
+              marginTop: "20px",
+              cursor: "pointer",
+              marginBottom: "10px"
+            }}
+            type="button"
+            className="finishBtn finishnHover"
+            onClick={() => confirmToaddDefaultSign()}
+          >
+            Auto Sign All
+          </button>
+        </>
       </div>
     </div>
   );

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import LoaderWithMsg from "../../primitives/LoaderWithMsg";
+import Loader from "../../primitives/LoaderWithMsg";
 import { contractDocument } from "../../constant/Utils";
 import HandleError from "../../primitives/HandleError";
 function DraftDocument() {
@@ -86,7 +86,7 @@ function DraftDocument() {
   return (
     <div>
       {isLoading.isLoader ? (
-        <LoaderWithMsg isLoading={isLoading} />
+        <Loader isLoading={isLoading} />
       ) : (
         <HandleError handleError={isLoading.message} />
       )}

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { isEnableSubscription } from "../../constant/const";
+import { isEnableSubscription, themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { radioButtonWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
@@ -147,7 +147,7 @@ function DropdownWidgetOption(props) {
 
   return (
     <ModalUi isOpen={props.showDropdown} title={props.title} showClose={false}>
-      <div className="h-full p-[15px] text-base-content">
+      <div className="h-full p-[15px]">
         <form
           onSubmit={(e) => {
             e.preventDefault();
@@ -155,25 +155,38 @@ function DropdownWidgetOption(props) {
           }}
         >
           <div>
-            <label className="text-[13px] font-semibold">
-              Name<span className="text-[red] text-[13px]"> *</span>
+            <label style={{ fontSize: "13px", fontWeight: "600" }}>
+              Name<span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               required
               defaultValue={dropdownName}
               value={dropdownName}
               onChange={(e) => setDropdownName(e.target.value)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="drodown-input"
             />
 
-            <label className="text-[13px] font-semibold mt-[5px]">
+            <label
+              style={{ fontSize: "13px", fontWeight: "600", marginTop: "5px" }}
+            >
               Options
             </label>
-            <div className="flex flex-col">
+
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column"
+              }}
+            >
               {dropdownOptionList.map((option, index) => (
                 <div
                   key={index}
-                  className="flex flex-row mb-[5px] items-center"
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    marginBottom: "5px",
+                    alignItems: "center"
+                  }}
                 >
                   {props.type === "checkbox" && !props.isSignYourself && (
                     <input
@@ -193,34 +206,51 @@ function DropdownWidgetOption(props) {
                           setDefaultCheckbox(removeOption);
                         }
                       }}
-                      className="op-checkbox focus:outline-none hover:border-base-content mr-[5px]"
+                      style={{
+                        width: "23px",
+                        height: "19px",
+                        marginRight: "5px"
+                      }}
                     />
                   )}
                   <input
                     required
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    className="drodown-input"
                     type="text"
                     value={option}
                     onChange={(e) => handleInputChange(index, e.target.value)}
                   />
 
                   <i
-                    className="fa-solid fa-rectangle-xmark text-[25px] ml-[10px] text-error"
+                    className="fa-solid fa-rectangle-xmark"
                     onClick={() => handleDeleteInput(index)}
+                    style={{
+                      color: "red",
+                      fontSize: "25px",
+                      marginLeft: "10px"
+                    }}
                   ></i>
                 </div>
               ))}
               <i
                 onClick={handleAddInput}
-                className="fa-solid fa-square-plus text-[25px] ml-[10px] text-primary"
+                style={{
+                  cursor: "pointer",
+                  color: themeColor,
+                  fontSize: "25px",
+                  marginLeft: "10px"
+                }}
+                className="fa-solid fa-square-plus"
               ></i>
               <div>
                 {props.type === "checkbox" && !props.isSignYourself && (
                   <>
                     <label
-                      className={`${
-                        !props.isSubscribe ? "text-[gray]" : ""
-                      } text-[13px] font-semibold`}
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
                     >
                       Minimun check
                     </label>
@@ -233,16 +263,18 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMinCount(count);
                       }}
-                      className={`${
+                      className={
                         props.isSubscribe || !isEnableSubscription
-                          ? ""
-                          : "pointer-events-none bg-opacity-50"
-                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
                     />
                     <label
-                      className={`${
-                        !props.isSubscribe ? "text-[gray]" : ""
-                      } text-[13px] font-semibold`}
+                      style={{
+                        fontSize: "13px",
+                        fontWeight: "600",
+                        color: !props.isSubscribe && "gray"
+                      }}
                     >
                       Maximum check
                     </label>
@@ -254,11 +286,11 @@ function DropdownWidgetOption(props) {
                         const count = handleSetMinMax(e);
                         setMaxCount(count);
                       }}
-                      className={`${
+                      className={
                         props.isSubscribe || !isEnableSubscription
-                          ? ""
-                          : "pointer-events-none bg-opacity-50"
-                      } op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs`}
+                          ? "drodown-input"
+                          : "disabled drodown-input"
+                      }
                     />
                   </>
                 )}
@@ -266,22 +298,32 @@ function DropdownWidgetOption(props) {
             </div>
             {["dropdown", radioButtonWidget].includes(props.type) && (
               <>
-                <label className="text-[13px] font-semibold mt-[5px]">
+                <label
+                  style={{
+                    fontSize: "13px",
+                    fontWeight: "600",
+                    marginTop: "5px"
+                  }}
+                >
                   Default value
                 </label>
                 <select
                   onChange={(e) => setDefaultValue(e.target.value)}
-                  className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  className="drodown-input"
                   name="defaultvalue"
                   value={defaultValue}
                   placeholder="select default value"
                 >
-                  <option value="" disabled hidden className="text-[13px]">
+                  <option value="" disabled hidden style={{ fontSize: "13px" }}>
                     Select...
                   </option>
                   {dropdownOptionList.map((data, ind) => {
                     return (
-                      <option className="text-[13px]" key={ind} value={data}>
+                      <option
+                        style={{ fontSize: "13px" }}
+                        key={ind}
+                        value={data}
+                      >
                         {data}
                       </option>
                     );
@@ -291,21 +333,35 @@ function DropdownWidgetOption(props) {
             )}
             {props.type !== "checkbox" && props.type !== radioButtonWidget && (
               <>
-                <div className="flex flex-row gap-[10px] mt-[0.5rem]">
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: 10,
+                    marginTop: "0.5rem"
+                  }}
+                >
                   {statusArr.map((data, ind) => {
                     return (
                       <div
                         key={ind}
-                        className="flex flex-row gap-[5px] items-center"
+                        style={{
+                          display: "flex",
+                          flexDirection: "row",
+                          gap: 5,
+                          alignItems: "center"
+                        }}
                       >
                         <input
-                          className="op-radio op-radio-xs my-1"
+                          style={{ accentColor: "red" }}
                           type="radio"
                           name="status"
                           onChange={() => setStatus(data.toLowerCase())}
                           checked={status.toLowerCase() === data.toLowerCase()}
                         />
-                        <div className="text-[13px] font-500">{data}</div>
+                        <div style={{ fontSize: "13px", fontWeight: "500" }}>
+                          {data}
+                        </div>
                       </div>
                     );
                   })}
@@ -313,31 +369,33 @@ function DropdownWidgetOption(props) {
               </>
             )}
             {["checkbox", radioButtonWidget].includes(props.type) && (
-              <div className="flex flex-row gap-5 my-2 items-center text-center">
+              <div className="flex flex-row gap-5 mt-2 items-center text-center">
                 {!props.isSignYourself && (
-                  <div className="flex items-center">
+                  <div>
                     <input
                       id="isreadonly"
                       type="checkbox"
                       checked={isReadOnly}
-                      className="op-checkbox op-checkbox-sm"
-                      onChange={(e) => setIsReadOnly(e.target.checked)}
+                      onChange={(e) => {
+                        setIsReadOnly(e.target.checked);
+                      }}
                     />
-                    <label className="ml-1 mb-0" htmlFor="isreadonly">
+                    <label className="ml-1" htmlFor="isreadonly">
                       Is read only
                     </label>
                   </div>
                 )}
-                <div className="flex items-center">
+                <div>
                   <input
                     id="ishidelabel"
                     type="checkbox"
                     checked={isHideLabel}
-                    className="op-checkbox op-checkbox-sm"
-                    onChange={(e) => setIsHideLabel(e.target.checked)}
+                    onChange={(e) => {
+                      setIsHideLabel(e.target.checked);
+                    }}
                   />
 
-                  <label className="ml-1 mb-0" htmlFor="ishidelabel">
+                  <label className="ml-1" htmlFor="ishidelabel">
                     Hide labels
                   </label>
                 </div>
@@ -363,15 +421,19 @@ function DropdownWidgetOption(props) {
 
           <button
             disabled={dropdownOptionList.length === 0 && true}
+            style={{
+              background: themeColor,
+              color: "white"
+            }}
             type="submit"
-            className="op-btn op-btn-primary"
+            className={"finishBtn"}
           >
             Save
           </button>
           {props.currWidgetsDetails?.options?.values?.length > 0 && (
             <button
               type="submit"
-              className="op-btn op-btn-ghost ml-1"
+              className="finishBtn cancelBtn"
               onClick={() => {
                 props.handleClose && props.handleClose();
                 resetState();

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

@@ -1,8 +1,6 @@
-import React, { useState, useEffect } from "react";
-import { checkIsSubscribed, getFileName } from "../../constant/Utils";
-import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
-import Upgrade from "../../primitives/Upgrade";
-import { isEnableSubscription } from "../../constant/const";
+import React, { useState } from "react";
+import "../../styles/AddUser.css";
+import { getFileName } from "../../constant/Utils";
 // import SelectFolder from "../../premitives/SelectFolder";
 
 const EditTemplate = ({ template, onSuccess }) => {
@@ -11,21 +9,9 @@ const EditTemplate = ({ template, onSuccess }) => {
     Name: template?.Name || "",
     Note: template?.Note || "",
     Description: template?.Description || "",
-    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false",
-    AutomaticReminders: template?.AutomaticReminders || false,
-    RemindOnceInEvery: template?.RemindOnceInEvery || 5
+    SendinOrder: template?.SendinOrder ? `${template?.SendinOrder}` : "false"
   });
-  const [isSubscribe, setIsSubscribe] = useState(false);
-  useEffect(() => {
-    fetchSubscription();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const fetchSubscription = async () => {
-    if (isEnableSubscription) {
-      const getIsSubscribe = await checkIsSubscribed();
-      setIsSubscribe(getIsSubscribe);
-    }
-  };
+
   const handleStrInput = (e) => {
     setFormData({ ...formData, [e.target.name]: e.target.value });
   };
@@ -39,40 +25,34 @@ const EditTemplate = ({ template, onSuccess }) => {
     e.preventDefault();
     e.stopPropagation();
     const isChecked = formData.SendinOrder === "true" ? true : false;
-    const AutoReminder = formData?.AutomaticReminders || false;
-
-    let reminderDate = {};
-    if (AutoReminder) {
-      const RemindOnceInEvery = parseInt(formData?.RemindOnceInEvery);
-      const ReminderDate = new Date(template?.createdAt);
-      ReminderDate.setDate(ReminderDate.getDate() + RemindOnceInEvery);
-      reminderDate = { NextReminderDate: ReminderDate };
-    }
-    const data = { ...formData, SendinOrder: isChecked, ...reminderDate };
+    const data = { ...formData, SendinOrder: isChecked };
     onSuccess(data);
   };
-  const handleAutoReminder = () => {
-    setFormData((prev) => ({
-      ...prev,
-      AutomaticReminders: !formData.AutomaticReminders
-    }));
-  };
+
   return (
-    <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
-      <div className="text-base-content">
+    <div className="addusercontainer">
+      <div className="form-wrapper">
         <form onSubmit={handleSubmit}>
           <div>
-            <label htmlFor="name" className="text-[13px]">
+            <label htmlFor="name" style={{ fontSize: 13 }}>
               File
             </label>
-            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
+            <div
+              style={{
+                padding: "0.5rem 0.75rem",
+                border: "1px solid #d1d5db",
+                borderRadius: "0.375rem",
+                fontSize: "0.75rem",
+                fontWeight: "700"
+              }}
+            >
               {getFileName(template.URL)}
             </div>
           </div>
           <div className="form-section">
-            <label htmlFor="name" className="text-[13px]">
+            <label htmlFor="name" style={{ fontSize: 13 }}>
               Name
-              <span className="text-[13px] text-[red]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
@@ -80,11 +60,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               value={formData.Name}
               onChange={(e) => handleStrInput(e)}
               required
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Note" className="text-[13px]">
+            <label htmlFor="Note" style={{ fontSize: 13 }}>
               Note
             </label>
             <input
@@ -93,11 +73,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Note"
               value={formData.Note}
               onChange={(e) => handleStrInput(e)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Description" className="text-[13px]">
+            <label htmlFor="Description" style={{ fontSize: 13 }}>
               Description
             </label>
             <input
@@ -106,85 +86,51 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Description"
               value={formData.Description}
               onChange={(e) => handleStrInput(e)}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
             />
           </div>
           <div className="form-section">
-            <label className="text-[13px]">Send In Order</label>
-            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+            <label style={{ fontSize: 13 }}>Send In Order</label>
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginLeft: 8,
+                marginBottom: 5
+              }}
+            >
               <input
                 type="radio"
                 value={"true"}
-                className="op-radio op-radio-xs"
                 name="SendinOrder"
                 checked={formData.SendinOrder === "true"}
                 onChange={handleStrInput}
               />
-              <div className="text-[12px]">Yes</div>
+              <div style={{ fontSize: 12 }}>Yes</div>
             </div>
-            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
+            <div
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginLeft: 8,
+                marginBottom: 5
+              }}
+            >
               <input
                 type="radio"
                 value={"false"}
                 name="SendinOrder"
-                className="op-radio op-radio-xs"
                 checked={formData.SendinOrder === "false"}
                 onChange={handleStrInput}
               />
-              <div className="text-[12px]">No</div>
+              <div style={{ fontSize: 12 }}>No</div>
             </div>
           </div>
-          <div className="text-xs mt-2">
-            {!isEnableSubscription && (
-              <PremiumAlertHeader
-                message={
-                  "Disable Auto reminder is free in beta, this feature will incur a fee later."
-                }
-              />
-            )}
-            <span
-              className={
-                isSubscribe || !isEnableSubscription
-                  ? "font-semibold"
-                  : "font-semibold text-gray-300"
-              }
-            >
-              Auto reminder{"  "}
-              {!isSubscribe && isEnableSubscription && <Upgrade />}
-            </span>
-            <label
-              className={`${
-                isSubscribe || !isEnableSubscription
-                  ? "cursor-pointer "
-                  : "pointer-events-none opacity-50"
-              } relative block items-center mb-0`}
-            >
-              <input
-                checked={formData.AutomaticReminders}
-                onChange={handleAutoReminder}
-                type="checkbox"
-                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
-              />
-            </label>
-          </div>
-          {isSubscribe && formData?.AutomaticReminders === true && (
-            <div className="text-xs mt-2">
-              <label className="block">
-                Remind once in every (Days)
-                <span className="text-red-500 text-[13px]">*</span>
-              </label>
-              <input
-                type="number"
-                value={formData.RemindOnceInEvery}
-                name="RemindOnceInEvery"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                onChange={handleStrInput}
-                required
-              />
-            </div>
-          )}
-          <div className="mt-[1rem] flex justify-start">
-            <button type="submit" className="op-btn op-btn-primary">
+          {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
+          <div className="buttoncontainer">
+            <button type="submit" className="submitbutton">
               Submit
             </button>
           </div>

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

@@ -1,42 +1,52 @@
 import React from "react";
 import Tooltip from "../../primitives/Tooltip";
+
 import ReactQuill from "react-quill";
 import "react-quill/dist/quill.snow.css";
 import EditorToolbar, { module1, formats } from "./EditorToolbar";
 
 export function EmailBody(props) {
   return (
-    <form className="flex flex-col text-base-content text-lg font-normal">
-      <div className="m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
-        <label className="text-sm ml-2">
-          Subject <Tooltip message={"email subject"} />
-        </label>
-        <input
-          required
-          value={props.requestSubject}
-          onChange={(e) => props.setRequestSubject(e.target.value)}
-          placeholder='${senderName} has requested you to sign "${documentName}"'
-          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-        />
-        <label className="text-sm ml-2 mt-3">
-          Body <Tooltip message={"email body"} />
-        </label>
-        <div className="px-3 py-2 w-full focus:outline-none text-xs">
-          <EditorToolbar containerId="toolbar1" />
-          <ReactQuill
-            theme="snow"
-            value={props.requestBody}
-            // value={typedText}
-            placeholder="add body of email "
-            // readOnly={loading}
-            // onChangeSelection={handleTextSelection} // Listen for text selection
-            ref={props.editorRef}
-            modules={module1}
-            formats={formats}
-            onChange={props.handleOnchangeRequest}
-          />
+    <React.Fragment>
+      <div className={`flex justify-center  py-1 p-2`}>
+        <div className=" flex flex-col">
+          <form>
+            <div className="text-lg font-normal text-black">
+              <div className=" m-2 md:m-10 p-3 md:p-10 shadow-md hover:shadow-lg border-[1px] border-indigo-800 rounded-md">
+                <label className="text-sm ml-2">
+                  Subject <Tooltip message={"email subject"} />
+                </label>
+                <input
+                  required
+                  value={props.requestSubject}
+                  onChange={(e) => props.setRequestSubject(e.target.value)}
+                  placeholder='${senderName} has requested you to sign "${documentName}"'
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                />
+                <label className="text-sm ml-2 mt-3">
+                  Body <Tooltip message={"email body"} />
+                </label>
+
+                <div className="px-3 py-2 w-full focus:outline-none text-xs">
+                  <EditorToolbar containerId="toolbar1" />
+                  <ReactQuill
+                    theme="snow"
+                    value={props.requestBody}
+                    // value={typedText}
+                    placeholder="add body of email "
+                    // readOnly={loading}
+                    // onChangeSelection={handleTextSelection} // Listen for text selection
+                    ref={props.editorRef}
+                    modules={module1}
+                    formats={formats}
+                    onChange={props.handleOnchangeRequest}
+                  />
+                </div>
+              </div>
+            </div>
+          </form>
         </div>
       </div>
-    </form>
+    </React.Fragment>
   );
 }

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

@@ -5,11 +5,12 @@ import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 import printModule from "print-js";
-import Loader from "../../primitives/Loader";
+import loader from "../../assets/images/loader2.gif";
 
 function EmailComponent({
   isEmail,
   pdfUrl,
+  isCeleb,
   setIsEmail,
   setSuccessEmail,
   pdfName,
@@ -21,7 +22,6 @@ function EmailComponent({
   const [emailList, setEmailList] = useState([]);
   const [emailValue, setEmailValue] = useState();
   const [isLoading, setIsLoading] = useState(false);
-  const [isEmailCelebration, setIsEmailCelebration] = useState(false);
   //function for send email
   const sendEmail = async () => {
     setIsLoading(true);
@@ -62,10 +62,6 @@ function EmailComponent({
             " target=_blank>here</a> </p></div></div></body></html>"
         };
         sendMail = await axios.post(url, params, { headers: headers });
-        setIsEmailCelebration(true);
-        setTimeout(() => {
-          setIsEmailCelebration(false);
-        }, 3000);
       } catch (error) {
         console.log("error", error);
         setIsLoading(false);
@@ -173,59 +169,148 @@ function EmailComponent({
         <div className="modaloverlay">
           <div className="modalcontainer">
             {isLoading && (
-              <div className="absolute w-full h-full flex flex-col justify-center items-center z-[20] bg-[#e6f2f2] bg-opacity-80">
-                <Loader />
-                <span className="text-[12px] font-bold">
+              <div
+                style={{
+                  position: "absolute",
+                  height: "100%",
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  zIndex: "20",
+                  backgroundColor: "#e6f2f2",
+                  opacity: 0.8
+                }}
+              >
+                <img
+                  alt="no img"
+                  src={loader}
+                  style={{ width: "70px", height: "70px" }}
+                />
+                <span style={{ fontSize: "12px", fontWeight: "bold" }}>
                   This might take some time
                 </span>
               </div>
             )}
             <div style={{ background: "#32a3ac" }} className="modalheader">
-              <span className="text-white">Successfully signed!</span>
-              <div className="flex flex-row">
+              <span style={{ color: "white" }}>Successfully signed!</span>
+
+              <div style={{ display: "flex", flexDirection: "row" }}>
                 <div></div>
                 {!isAndroid && (
                   <button
                     onClick={handleToPrint}
-                    className="op-btn op-btn-neutral op-btn-sm text-[15px]"
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center"
+                    }}
+                    className="btn btn-primary btn-sm"
                   >
-                    <i className="fa fa-print" aria-hidden="true"></i>
+                    <i
+                      className="fa fa-print"
+                      style={{
+                        fontSize: "15px",
+                        marginRight: "3px",
+                        color: "white"
+                      }}
+                      aria-hidden="true"
+                    ></i>
                     Print
                   </button>
                 )}
+
                 <button
-                  className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
+                  className="btn btn-danger btn-sm"
                   onClick={() => handleDownloadPdf()}
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    marginLeft: "10px"
+                  }}
                 >
-                  <i className="fa fa-download" aria-hidden="true"></i>
+                  <i
+                    className="fa fa-download"
+                    style={{
+                      color: "white",
+                      fontSize: "15px",
+                      marginRight: "3px"
+                    }}
+                    aria-hidden="true"
+                  ></i>
                   Download
                 </button>
               </div>
             </div>
-            <div className="h-full p-[20px]">
-              {isEmailCelebration && (
-                <div className="absolute w-[100%] flex justify-center items-center">
-                  <img alt="celeb" width={300} height={250} src={celebration} />
+            <div style={{ height: "100%", padding: 20 }}>
+              {isCeleb && (
+                <div
+                  style={{
+                    position: "absolute",
+                    marginLeft: "50px"
+                  }}
+                >
+                  <img
+                    alt="print img"
+                    width={300}
+                    height={250}
+                    // style={styles.gifCeleb}
+                    src={celebration}
+                  />
                 </div>
               )}
-              <p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
+              <p
+                style={{
+                  fontFamily: "system-ui",
+                  verticalAlign: "baseline",
+                  fontWeight: "500",
+                  color: "#403f3e",
+                  fontSize: "15px",
+                  marginBottom: "5px"
+                }}
+              >
                 Recipients added here will get a copy of the signed document.
               </p>
               {emailList.length > 0 ? (
                 <>
                   <div className="addEmail">
-                    <div className="flex flex-row flex-wrap">
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "row",
+
+                        flexWrap: "wrap"
+                      }}
+                    >
                       {emailList.map((data, ind) => {
                         return (
                           <div
-                            className="flex flex-row items-center bg-[#47a3ad] m-[4px] rounded-md py-[5px] px-[10px]"
+                            className="emailChip"
+                            style={{
+                              display: "flex",
+                              flexDirection: "row",
+                              alignItems: "center"
+                            }}
                             key={ind}
                           >
-                            <span className="text-white text-[13px]">
+                            <span
+                              style={{
+                                color: "white",
+                                fontSize: "13px"
+                              }}
+                            >
                               {data}
                             </span>
                             <span
-                              className="text-white text-[13px] font-semibold ml-[7px] cursor-pointer"
+                              style={{
+                                color: "white",
+                                fontSize: 13,
+                                fontWeight: 600,
+                                marginLeft: 7,
+                                cursor: "pointer"
+                              }}
                               onClick={() => removeChip(ind)}
                             >
                               <i className="fa-solid fa-xmark"></i>
@@ -238,7 +323,7 @@ function EmailComponent({
                       <input
                         type="text"
                         value={emailValue}
-                        className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-white outline-none"
+                        className="addEmailInput"
                         onChange={handleEmailValue}
                         onKeyDown={handleEnterPress}
                         onBlur={() => {
@@ -256,7 +341,7 @@ function EmailComponent({
                   <input
                     type="text"
                     value={emailValue}
-                    className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-white border-2 border-[#47a3ad]"
+                    className="emailInput"
                     onChange={handleEmailValue}
                     onKeyDown={handleEnterPress}
                     placeholder="Add the email addresses"
@@ -269,36 +354,67 @@ function EmailComponent({
                   />
                 </div>
               )}
-              <button
-                className={`${
-                  emailValue ? "cursor-pointer" : "cursor-default"
-                } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
+              <span
+                style={{
+                  cursor: emailValue && "pointer"
+                }}
                 onClick={() => {
                   if (emailValue) {
                     handleEnterPress("add");
                   }
                 }}
               >
-                <i className="fa fa-plus" aria-hidden="true"></i>
-              </button>
+                <i
+                  style={{
+                    backgroundColor: themeColor,
+                    padding: "5px 7px",
+                    marginTop: "10px",
+                    color: "white",
+                    borderRadius: "2px"
+                  }}
+                  className="fa fa-plus"
+                  aria-hidden="true"
+                ></i>
+              </span>
 
-              <div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
-                <span className="font-bold">Note: </span>
-                <span className="text-[15px]">
+              <div
+                style={{
+                  background: "#e3e2e1",
+                  marginTop: "10px",
+                  padding: "5px",
+                  borderRadius: "3px"
+                }}
+              >
+                <span style={{ fontWeight: "700" }}>Note:</span>
+                <span style={{ fontSize: "15px" }}>
+                  {" "}
                   You can only send to ten recipients at a time.
                 </span>
               </div>
-              <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+              <div
+                style={{
+                  height: "1px",
+                  backgroundColor: "#9f9f9f",
+                  width: "100%",
+                  marginTop: "15px",
+                  marginBottom: "15px"
+                }}
+              ></div>
               <button
+                disabled={emailList.length === 0 && true}
+                style={{
+                  background: themeColor,
+                  color: "white"
+                }}
                 type="button"
-                className="op-btn op-btn-primary"
-                onClick={() => emailList.length > 0 && sendEmail()}
+                className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
+                onClick={() => sendEmail()}
               >
                 Send
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-ghost ml-2"
+                className="finishBtn cancelBtn"
                 onClick={() => {
                   setIsEmail(false);
                   setEmailValue("");

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

@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 import PrevNext from "./PrevNext";
-import {
-  handleDownloadCertificate,
-  handleDownloadPdf,
-  handleToPrint
-} from "../../constant/Utils";
+import printModule from "print-js";
+import { getBase64FromUrl } from "../../constant/Utils";
+import { saveAs } from "file-saver";
 import "../../styles/signature.css";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useNavigate } from "react-router-dom";
+import { themeColor } from "../../constant/const";
+import axios from "axios";
 import ModalUi from "../../primitives/ModalUi";
-import Loader from "../../primitives/Loader";
+import Parse from "parse";
 
 function Header({
   isPdfRequestFiles,
@@ -40,9 +40,16 @@ function Header({
     signerPos && signerPos?.filter((data) => data.Role !== "prefill");
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
-  const [isDownloading, setIsDownloading] = useState("");
+  const [isCertificate, setIsCertificate] = useState(false);
   const isGuestSigner = localStorage.getItem("isGuestSigner");
-
+  //for go to previous page
+  function previousPage() {
+    changePage(-1);
+  }
+  //for go to next page
+  function nextPage() {
+    changePage(1);
+  }
   //function for show decline alert
   const handleDeclinePdfAlert = async () => {
     const currentDecline = {
@@ -52,6 +59,99 @@ function Header({
     setIsDecline(currentDecline);
   };
 
+  //function for print digital sign pdf
+  const handleToPrint = async (event) => {
+    event.preventDefault();
+
+    try {
+      const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+      const pdf = await getBase64FromUrl(url);
+      const isAndroidDevice = navigator.userAgent.match(/Android/i);
+      const isAppleDevice =
+        (/iPad|iPhone|iPod/.test(navigator.platform) ||
+          (navigator.platform === "MacIntel" &&
+            navigator.maxTouchPoints > 1)) &&
+        !window.MSStream;
+      if (isAndroidDevice || isAppleDevice) {
+        const byteArray = Uint8Array.from(
+          atob(pdf)
+            .split("")
+            .map((char) => char.charCodeAt(0))
+        );
+        const blob = new Blob([byteArray], { type: "application/pdf" });
+        const blobUrl = URL.createObjectURL(blob);
+        window.open(blobUrl, "_blank");
+      } else {
+        printModule({ printable: pdf, type: "pdf", base64: true });
+      }
+    } catch (err) {
+      console.log("err in getsignedurl", err);
+      alert("something went wrong, please try again later.");
+    }
+  };
+
+  //handle download signed pdf
+  const handleDownloadPdf = async () => {
+    const pdfName = pdfDetails[0] && pdfDetails[0].Name;
+    try {
+      const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
+      saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
+    } catch (err) {
+      console.log("err in getsignedurl", err);
+      alert("something went wrong, please try again later.");
+    }
+  };
+
+  const sanitizeFileName = (pdfName) => {
+    // Replace spaces with underscore
+    return pdfName.replace(/ /g, "_");
+  };
+
+  //handle download signed pdf
+  const handleDownloadCertificate = async () => {
+    if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
+      try {
+        await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
+        const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
+        saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+      } catch (err) {
+        console.log("err in download in certificate", err);
+      }
+    } else {
+      setIsCertificate(true);
+      try {
+        const data = {
+          docId: pdfDetails[0]?.objectId
+        };
+        const docDetails = await axios.post(
+          `${localStorage.getItem("baseUrl")}functions/getDocument`,
+          data,
+          {
+            headers: {
+              "Content-Type": "application/json",
+              "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+              sessionToken: localStorage.getItem("accesstoken")
+            }
+          }
+        );
+        if (docDetails.data && docDetails.data.result) {
+          const doc = docDetails.data.result;
+          if (doc?.CertificateUrl) {
+            await fetch(doc?.CertificateUrl);
+            const certificateUrl = doc?.CertificateUrl;
+            saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
+            setIsCertificate(false);
+          } else {
+            setIsCertificate(true);
+          }
+        }
+      } catch (err) {
+        console.log("err in download in certificate", err);
+        alert("something went wrong, please try again later.");
+      }
+    }
+  };
+
   return (
     <div style={{ padding: "5px 0px 5px 0px" }} className="mobileHead">
       {isMobile && isShowHeader ? (
@@ -64,22 +164,56 @@ function Header({
               : window.innerWidth - 30 + "px"
           }}
         >
-          <div className="flex justify-between items-center py-[5px] px-[10px] ">
+          <div className="preBtn2">
             <div onClick={() => navigate(-1)}>
               <i
-                className="fa fa-arrow-left text-base-content"
+                className="fa fa-arrow-left"
                 aria-hidden="true"
+                style={{ color: themeColor, cursor: "pointer" }}
+              ></i>
+            </div>
+            <div>
+              <i
+                onClick={() => {
+                  if (pageNumber > 1) {
+                    previousPage();
+                  }
+                }}
+                className="fa fa-backward"
+                style={{ color: "gray", cursor: "pointer" }}
+              ></i>
+              <span
+                style={{
+                  fontSize: "13px",
+                  fontWeight: "600",
+                  marginLeft: "10px",
+                  marginRight: "10px"
+                }}
+              >
+                {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
+              </span>
+              <i
+                onClick={() => {
+                  if (pageNumber < allPages) {
+                    nextPage();
+                  }
+                }}
+                className="fa fa-forward"
+                style={{ color: "gray", cursor: "pointer" }}
               ></i>
             </div>
-            <PrevNext
-              pageNumber={pageNumber}
-              allPages={allPages}
-              changePage={changePage}
-            />
             {pdfUrl && alreadySign ? (
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger asChild>
-                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
+                  <div
+                    style={{
+                      color: themeColor,
+                      border: "none",
+                      fontWeight: "650",
+                      fontSize: "16px",
+                      padding: "0px 3px 0px 5px"
+                    }}
+                  >
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                   </div>
                 </DropdownMenu.Trigger>
@@ -90,14 +224,18 @@ function Header({
                   >
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={() =>
-                        handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                      }
+                      onClick={() => handleDownloadPdf()}
                     >
-                      <div className="flex flex-row">
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "row"
+                        }}
+                      >
                         <i
-                          className="fa fa-arrow-down mr-[2px]"
+                          className="fa fa-arrow-down"
                           aria-hidden="true"
+                          style={{ marginRight: "2px" }}
                         ></i>
                         Download
                       </div>
@@ -105,16 +243,17 @@ function Header({
                     {isCompleted && (
                       <DropdownMenu.Item
                         className="DropdownMenuItem"
-                        onClick={() =>
-                          handleDownloadCertificate(
-                            pdfDetails,
-                            setIsDownloading
-                          )
-                        }
+                        onClick={() => handleDownloadCertificate()}
                       >
-                        <div className="border-none bg-[#fff]">
+                        <div
+                          style={{
+                            border: "none",
+                            backgroundColor: "#fff"
+                          }}
+                        >
                           <i
-                            className="fa-solid fa-award mr-[2px]"
+                            className="fa-solid fa-award"
+                            style={{ marginRight: "2px" }}
                             aria-hidden="true"
                           ></i>
                           Certificate
@@ -126,9 +265,15 @@ function Header({
                         className="DropdownMenuItem"
                         onClick={() => setIsEmail(true)}
                       >
-                        <div className="flex flex-row">
+                        <div
+                          style={{
+                            display: "flex",
+                            flexDirection: "row"
+                          }}
+                        >
                           <i
-                            className="fa fa-envelope mr-[2px]"
+                            className="fa fa-envelope"
+                            style={{ marginRight: "2px" }}
                             aria-hidden="true"
                           ></i>
                           Mail
@@ -137,14 +282,18 @@ function Header({
                     )}
                     <DropdownMenu.Item
                       className="DropdownMenuItem"
-                      onClick={(e) =>
-                        handleToPrint(e, pdfUrl, setIsDownloading)
-                      }
+                      onClick={handleToPrint}
                     >
-                      <div className="flex flex-row">
+                      <div
+                        style={{
+                          display: "flex",
+                          flexDirection: "row"
+                        }}
+                      >
                         <i
-                          className="fa fa-print mr-[2px]"
+                          className="fa fa-print"
                           aria-hidden="true"
+                          style={{ marginRight: "2px" }}
                         ></i>
                         Print
                       </div>
@@ -153,16 +302,24 @@ function Header({
                 </DropdownMenu.Portal>
               </DropdownMenu.Root>
             ) : (
-              <div className="flex justify-around items-center">
+              <div style={{ display: "flex", justifyContent: "space-around" }}>
                 {/* current signer is checking user send request and check status of pdf sign than if current 
                 user exist than show finish button else no
                 */}
                 {currentSigner && (
-                  <div className="flex items-center" data-tut="reactourFifth">
+                  <>
                     {decline && (
                       <div
-                        onClick={() => handleDeclinePdfAlert()}
-                        className="text-[red] border-none font-[650] text-[14px] mr-2"
+                        onClick={() => {
+                          handleDeclinePdfAlert();
+                        }}
+                        style={{
+                          color: "red",
+                          border: "none",
+                          fontWeight: "650",
+                          fontSize: "16px",
+                          marginRight: "10px"
+                        }}
                       >
                         Decline
                       </div>
@@ -174,9 +331,12 @@ function Header({
                             alertSendEmail();
                           }
                         }}
-                        className={`${
-                          isMailSend ? "" : "op-link-primary"
-                        } op-link no-underline font-[650] text-[14px]`}
+                        style={{
+                          color: isMailSend ? "gray" : themeColor,
+                          border: "none",
+                          fontWeight: "650",
+                          fontSize: "16px"
+                        }}
                         data-tut={dataTut4}
                       >
                         {completeBtnTitle ? completeBtnTitle : "Send"}
@@ -191,45 +351,17 @@ function Header({
                             embedWidgetsData();
                           }
                         }}
-                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
+                        style={{
+                          color: themeColor,
+                          border: "none",
+                          fontWeight: "650",
+                          fontSize: "16px"
+                        }}
                       >
                         Finish
                       </div>
                     )}
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild>
-                        <div className="font-[650] text-[18px] px-2 ml-[4px] op-link op-link-info no-underline">
-                          <i
-                            className="fa fa-ellipsis-v"
-                            aria-hidden="true"
-                          ></i>
-                        </div>
-                      </DropdownMenu.Trigger>
-                      <DropdownMenu.Portal>
-                        <DropdownMenu.Content
-                          className="bg-white shadow-md rounded px-2 py-1"
-                          sideOffset={5}
-                        >
-                          <DropdownMenu.Item
-                            className="flex flex-row justify-center items-center text-[13px] focus:outline-none cursor-pointer"
-                            onClick={() =>
-                              handleDownloadPdf(
-                                pdfDetails,
-                                pdfUrl,
-                                setIsDownloading
-                              )
-                            }
-                          >
-                            <i
-                              className="fa fa-arrow-down mr-[5px]"
-                              aria-hidden="true"
-                            ></i>
-                            <span className="font-[500]">Download</span>
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                      </DropdownMenu.Portal>
-                    </DropdownMenu.Root>
-                  </div>
+                  </>
                 )}
               </div>
             )}
@@ -250,12 +382,12 @@ function Header({
                   signersdata.length !== filterPrefill.length && (
                     <div>
                       {filterPrefill.length === 0 ? (
-                        <span className="text-[13px] text-[#f5405e]">
+                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
                           Add {signersdata.length - filterPrefill.length}{" "}
                           recipients signature
                         </span>
                       ) : (
-                        <span className="text-[13px] text-[#f5405e]">
+                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
                           Add {signersdata.length - filterPrefill.length} more
                           recipients signature
                         </span>
@@ -275,175 +407,158 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
                 >
                   Back
                 </button>
                 <button
                   disabled={isMailSend && true}
                   data-tut="reactourFour"
-                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
-                  onClick={() => alertSendEmail()}
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] font-[500] text-sm mr-[5px]"
+                  style={{
+                    background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2",
+                    color: isMailSend ? "rgb(77, 75, 75)" : "white"
+                  }}
+                  onClick={() => {
+                    alertSendEmail();
+                  }}
                 >
                   {completeBtnTitle
                     ? completeBtnTitle
                     : isMailSend
-                      ? "Sent"
-                      : "Send"}
+                    ? "Sent"
+                    : "Send"}
                 </button>
               </div>
             </>
           ) : isPdfRequestFiles ? (
             alreadySign ? (
-              <div className="flex flex-row">
+              <div style={{ display: "flex", flexDirection: "row" }}>
                 {isCompleted && (
                   <button
                     type="button"
-                    onClick={() =>
-                      handleDownloadCertificate(pdfDetails, setIsDownloading)
-                    }
-                    className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
+                    onClick={() => handleDownloadCertificate()}
+                    className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
                   >
                     <i
                       className="fa-solid fa-award py-[3px]"
                       aria-hidden="true"
                     ></i>
-                    <span className="hidden lg:block">Certificate</span>
+                    <span className="hidden lg:block ml-1">Certificate</span>
                   </button>
                 )}
 
                 <button
-                  onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
+                  onClick={handleToPrint}
                   type="button"
-                  className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
+                  className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                 >
                   <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block">Print</span>
+                  <span className="hidden lg:block ml-1">Print</span>
                 </button>
 
                 <button
                   type="button"
-                  className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
-                  onClick={() =>
-                    handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                  }
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                  onClick={() => handleDownloadPdf()}
                 >
                   <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block">Download</span>
+                  <span className="hidden lg:block ml-1">Download</span>
                 </button>
               </div>
             ) : (
-              <div className="flex" data-tut="reactourFifth">
+              <div className="flex">
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
                 >
                   Back
                 </button>
                 {currentSigner && (
                   <>
                     <button
-                      className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
-                      onClick={() => handleDeclinePdfAlert()}
+                      style={{ background: "#de4337" }}
+                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                      onClick={() => {
+                        handleDeclinePdfAlert();
+                      }}
                     >
                       Decline
                     </button>
                     <button
+                      style={{
+                        background: "#188ae2"
+                      }}
                       type="button"
-                      className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
-                      onClick={() => embedWidgetsData()}
+                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                      onClick={() => {
+                        embedWidgetsData();
+                      }}
                     >
                       Finish
                     </button>
-                    <div className="op-dropdown op-dropdown-end">
-                      <div
-                        tabIndex={0}
-                        role="button"
-                        className="op-btn op-btn-info op-btn-sm shadow"
-                      >
-                        <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
-                      </div>
-                      <ul
-                        tabIndex={0}
-                        className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1"
-                      >
-                        <li
-                          onClick={() =>
-                            handleDownloadPdf(
-                              pdfDetails,
-                              pdfUrl,
-                              setIsDownloading
-                            )
-                          }
-                        >
-                          <span className="font-semibold text-[12px]">
-                            <i
-                              className="fa fa-arrow-down"
-                              aria-hidden="true"
-                            ></i>{" "}
-                            Download
-                          </span>
-                        </li>
-                      </ul>
-                    </div>
                   </>
                 )}
               </div>
             )
           ) : isCompleted ? (
-            <div className="flex flex-row">
+            <div style={{ display: "flex", flexDirection: "row" }}>
               {isCompleted && (
                 <button
                   type="button"
-                  onClick={() =>
-                    handleDownloadCertificate(pdfDetails, setIsDownloading)
-                  }
-                  className="op-btn op-btn-secondary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                  onClick={() => handleDownloadCertificate()}
+                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
                 >
-                  <i className="fa-solid fa-award" aria-hidden="true"></i>
-                  <span className="hidden lg:block">Certificate</span>
+                  <i
+                    className="fa-solid fa-award py-[3px]"
+                    aria-hidden="true"
+                  ></i>
+                  <span className="hidden lg:block ml-1">Certificate</span>
                 </button>
               )}
               <button
-                onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
+                onClick={handleToPrint}
                 type="button"
-                className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
               >
-                <i className="fa fa-print" aria-hidden="true"></i>
-                <span className="hidden lg:block">Print</span>
+                <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Print</span>
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-primary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
-                onClick={() =>
-                  handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
-                }
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                onClick={() => handleDownloadPdf()}
               >
-                <i className="fa fa-download" aria-hidden="true"></i>
-                <span className="hidden lg:block">Download</span>
+                <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Download</span>
               </button>
               <button
                 type="button"
-                className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#3ba7e5]"
                 onClick={() => setIsEmail(true)}
               >
-                <i className="fa fa-envelope" aria-hidden="true"></i>
-                <span className="hidden lg:block">Mail</span>
+                <i className="fa fa-envelope py-[3px]" aria-hidden="true"></i>
+                <span className="hidden lg:block ml-1">Mail</span>
               </button>
             </div>
           ) : (
             <div className="flex">
               <button
-                onClick={() => navigate(-1)}
+                onClick={() => {
+                  navigate(-1);
+                }}
                 type="button"
-                className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
               >
                 Back
               </button>
               <button
+                style={{
+                  background: "#188ae2"
+                }}
                 type="button"
-                className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
                 onClick={() => {
                   if (!pdfUrl) {
                     embedWidgetsData();
@@ -456,29 +571,14 @@ function Header({
           )}
         </div>
       )}
-      {isDownloading === "pdf" && (
-        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
-        </div>
-      )}
       <ModalUi
-        isOpen={isDownloading === "certificate"}
-        title={
-          isDownloading === "certificate"
-            ? "Generating certificate"
-            : "PDF Download"
-        }
-        handleClose={() => setIsDownloading("")}
+        isOpen={isCertificate}
+        title={"Generating certificate"}
+        handleClose={() => setIsCertificate(false)}
       >
-        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
-          {isDownloading === "certificate"}{" "}
-          <p>
-            Your completion certificate is being generated. Please wait
-            momentarily.
-          </p>
-          <p>
-            If the download doesn&apos;t start shortly, click the button again.
-          </p>
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center">
+          <p>Completion certificate is generating,</p>
+          <p>please wait for some time if not download try again later</p>
         </div>
       </ModalUi>
     </div>

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

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { themeColor } from "../../constant/const";
 import ModalUi from "../../primitives/ModalUi";
 import { randomId, textWidget } from "../../constant/Utils";
 
@@ -194,13 +195,13 @@ function PlaceholderCopy(props) {
         props.setIsPageCopy(false);
       }}
     >
-      <div className="h-full p-[20px] text-base-content">
+      <div style={{ height: "100%", padding: 20 }}>
         {copyType.map((data, key) => {
           return (
-            <div key={key} className="flex flex-col">
-              <label className="text-[16px] font-medium">
+            <div key={key} style={{ display: "flex", flexDirection: "column" }}>
+              <label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
                 <input
-                  className="mr-[8px] op-radio op-radio-xs"
+                  style={{ accentColor: "red", marginRight: "10px" }}
                   type="radio"
                   value={data}
                   onChange={() => setSelectCopyType(data)}
@@ -213,22 +214,33 @@ function PlaceholderCopy(props) {
           );
         })}
 
-        <div className="flex bg-[#9f9f9f] w-full my-[15px]"></div>
+        <div
+          style={{
+            height: "1px",
+            backgroundColor: "#9f9f9f",
+            width: "100%",
+            marginTop: "15px",
+            marginBottom: "15px"
+          }}
+        ></div>
         <button
           onClick={() => {
             handleApplyCopy();
             handleUniqueId();
           }}
+          style={{ background: themeColor }}
           type="button"
           disabled={!selectCopyType}
-          className="op-btn op-btn-primary"
+          className="finishBtn"
         >
           Apply
         </button>
         <button
           type="button"
-          className="op-btn op-btn-ghost"
-          onClick={() => handleUniqueId()}
+          className="finishBtn cancelBtn"
+          onClick={() => {
+            handleUniqueId();
+          }}
         >
           Cancel
         </button>

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

@@ -352,9 +352,12 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  className={`${
-                    ind === 0 ? "mt-0" : "mt-[5px]"
-                  } flex justify-center op-checkbox op-checkbox-xs rounded-[0.350rem]`}
+                  style={{
+                    // width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: ind === 0 ? 0 : "5px"
+                  }}
                   onBlur={handleInputBlur}
                   disabled={
                     props.isNeedSign &&
@@ -422,7 +425,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />
       ) : (
@@ -440,7 +443,7 @@ function PlaceholderType(props) {
         <select
           className="inputPlaceholder"
           id="myDropdown"
-          style={{ fontSize: "12px", color: "initial" }}
+          style={{ fontSize: "12px" }}
           value={selectOption}
           onChange={(e) => {
             setSelectOption(e.target.value);
@@ -525,7 +528,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />
       ) : (
@@ -564,7 +567,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />
       ) : (
@@ -603,7 +606,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />
       ) : (
@@ -725,7 +728,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{ whiteSpace: "pre-wrap", color: "initial" }}
+          style={{ whiteSpace: "pre-wrap" }}
           cols="50"
         />
       ) : (
@@ -745,11 +748,12 @@ function PlaceholderType(props) {
             return (
               <div key={ind} className="flex items-center text-center gap-0.5">
                 <input
-                  className={`${ind === 0 ? "mt-0" : "mt-[5px]"} ${
-                    props?.pos?.Width
-                      ? `w-[${props?.pos?.Width}px] h-[${props?.pos?.Width}px]`
-                      : "w-[15px] h-[15px]"
-                  } flex justify-center op-radio`}
+                  style={{
+                    width: props.pos.Width,
+                    display: "flex",
+                    justifyContent: "center",
+                    marginTop: ind === 0 ? 0 : "5px"
+                  }}
                   type="radio"
                   disabled={
                     props.isNeedSign &&
@@ -796,11 +800,7 @@ function PlaceholderType(props) {
               ? "labelTextArea labelWidthMobile"
               : "labelTextArea labelWidthDesktop"
           }
-          style={{
-            whiteSpace: "pre-wrap",
-            overflow: "hidden",
-            color: "initial"
-          }}
+          style={{ whiteSpace: "pre-wrap", overflow: "hidden" }}
           cols="50"
         />
       );

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { themeColor } from "../../constant/const";
 
 function PrevNext({ pageNumber, allPages, changePage }) {
   //for go to previous page
@@ -11,30 +12,40 @@ function PrevNext({ pageNumber, allPages, changePage }) {
   }
 
   return (
-    <div className="flex items-center">
-      <button
-        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
-        disabled={pageNumber <= 1}
-        onClick={previousPage}
-      >
-        <span className="block lg:hidden">
-          <i className="fa fa-backward" aria-hidden="true"></i>
+    <div>
+      <div className="preBtn1">
+        <button
+          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] mr-[5px]"
+          disabled={pageNumber <= 1}
+          onClick={previousPage}
+        >
+          <span className="block lg:hidden">
+            <i
+              className="fa fa-backward"
+              aria-hidden="true"
+              style={{ color: themeColor, cursor: "pointer" }}
+            ></i>
+          </span>
+          <span className="lg:block hidden">Prev</span>
+        </button>
+        <span className="text-xs font-[500]">
+          {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
         </span>
-        <span className="lg:block hidden">Prev</span>
-      </button>
-      <span className="text-xs text-base-content font-medium mx-2">
-        {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"}
-      </span>
-      <button
-        className="op-btn op-btn-secondary op-btn-xs md:op-btn-sm font-semibold text-xs"
-        disabled={pageNumber >= allPages}
-        onClick={nextPage}
-      >
-        <span className="block lg:hidden">
-          <i className="fa fa-forward" aria-hidden="true"></i>
-        </span>
-        <span className="lg:block hidden">Next</span>
-      </button>
+        <button
+          className="py-[3px] px-[10px] text-xs bg-[#d3edeb] font-[600] ml-[5px]"
+          disabled={pageNumber >= allPages}
+          onClick={nextPage}
+        >
+          <span className="block lg:hidden">
+            <i
+              className="fa fa-forward"
+              aria-hidden="true"
+              style={{ color: themeColor, cursor: "pointer" }}
+            ></i>
+          </span>
+          <span className="lg:block hidden">Next</span>
+        </button>
+      </div>
     </div>
   );
 }

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

@@ -7,15 +7,37 @@ import {
   isMobile,
   nameColor
 } from "../../constant/Utils";
-const cursor =
-  "cursor-[url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAACXBIWXMAAAsTAAALEwEAmpwYAAAASElEQVR4nGNgwAMkJSUbpKSkOvCpIaT5PxSTbogUQjMYMwxeIIXmVFIxA8UGDDyQGg0DnIDi6JKUlCxHMqCeZAOghjSAMD5FAKfeaURdUFxCAAAAAElFTkSuQmCC'),_pointer]";
+
 const RecipientList = (props) => {
   const [animationParent] = useAutoAnimate();
   const [isHover, setIsHover] = useState();
   const [isEdit, setIsEdit] = useState(false);
   //function for onhover signer name change background color
   const inputRef = useRef(null);
-
+  const onHoverStyle = (ind, blockColor) => {
+    const style = {
+      background: blockColor ? blockColor : color[ind % color.length],
+      padding: "10px",
+      marginTop: "2px",
+      display: "flex",
+      flexDirection: "row",
+      borderBottom: "1px solid #e3e1e1",
+      alignItems: "center"
+    };
+    return style;
+  };
+  //function for onhover signer name remove background color
+  const nonHoverStyle = () => {
+    const style = {
+      padding: "10px",
+      marginTop: "2px",
+      display: "flex",
+      flexDirection: "row",
+      borderBottom: "1px solid #e3e1e1",
+      alignItems: "center"
+    };
+    return style;
+  };
   const isWidgetExist = (Id) => {
     return props.signerPos.some((x) => x.Id === Id);
   };
@@ -94,21 +116,18 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              className={`${
+              className={
                 props.sendInOrder
                   ? props.isMailSend
-                    ? "pointer-events-none bg-opacity-80"
-                    : `text-[12px] font-bold ${cursor}`
-                  : props.isMailSend && "pointer-events-none bg-opacity-80"
-              } flex flex-row rounded-xl px-2 py-[10px] mt-1 mx-1 items-center last:mb-0.5`}
-              style={{
-                background:
-                  (!isMobile && isHover === ind) || props.isSelectListId === ind
-                    ? obj?.blockColor
-                      ? obj?.blockColor
-                      : color[ind % color.length]
-                    : "transparent"
-              }}
+                    ? "disabled"
+                    : "dragCursor"
+                  : props.isMailSend && "disabled"
+              }
+              style={
+                (!isMobile && isHover === ind) || props.isSelectListId === ind
+                  ? onHoverStyle(ind, obj?.blockColor)
+                  : nonHoverStyle(ind)
+              }
               onClick={(e) => {
                 e.preventDefault();
                 props.setSignerObjId(obj?.objectId || "");
@@ -122,16 +141,38 @@ const RecipientList = (props) => {
                 }
               }}
             >
-              <div className="flex flex-row items-center w-full">
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  alignItems: "center",
+                  width: "100%"
+                }}
+              >
                 <div
-                  className="flex w-[30px] h-[30px] rounded-full items-center justify-center mr-2"
                   style={{
                     background: obj?.blockColor
                       ? darkenColor(obj?.blockColor, 0.4)
-                      : nameColor[ind % nameColor.length]
+                      : nameColor[ind % nameColor.length],
+                    width: 30,
+                    height: 30,
+                    display: "flex",
+                    borderRadius: 30 / 2,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    marginRight: "12px"
                   }}
                 >
-                  <span className="text-white uppercase font-bold text-center text-[12px]">
+                  <span
+                    className={props.sendInOrder && "dragCursor"}
+                    style={{
+                      fontSize: "12px",
+                      textAlign: "center",
+                      fontWeight: "bold",
+                      color: "white",
+                      textTransform: "uppercase"
+                    }}
+                  >
                     {isWidgetExist(obj.Id) ? (
                       <i className="fa-solid fa-check"></i>
                     ) : (
@@ -144,72 +185,67 @@ const RecipientList = (props) => {
                   </span>
                 </div>
                 <div
-                  className={`${
-                    obj?.Name ? "flex-col" : "flex-row"
-                  } flex items-center`}
+                  style={{
+                    display: "flex",
+                    flexDirection: obj.Name ? "column" : "row",
+                    alignItems: "center"
+                  }}
                 >
                   {obj.Name ? (
-                    <span
-                      className={`${
-                        (!isMobile && isHover === ind) ||
-                        props.isSelectListId === ind
-                          ? "text-[#424242]"
-                          : "text-base-content"
-                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
-                    >
-                      {obj.Name}
-                    </span>
+                    <span className={"userName"}>{obj.Name}</span>
                   ) : (
-                    <span
-                      className={`${
-                        (!isMobile && isHover === ind) ||
-                        props.isSelectListId === ind
-                          ? "text-[#424242]"
-                          : "text-base-content"
-                      } text-[12px] font-bold w-[100px] whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer`}
-                      onClick={() => {
-                        setIsEdit({ [obj.Id]: true });
-                        props.setRoleName(obj.Role);
-                      }}
-                    >
-                      {isEdit?.[obj.Id] && props.handleRoleChange ? (
-                        <input
-                          ref={inputRef}
-                          className="bg-transparent p-[3px"
-                          value={obj.Role}
-                          onChange={(e) => props.handleRoleChange(e, obj.Id)}
-                          onBlur={() => {
-                            setIsEdit({});
-                            props.handleOnBlur(obj.Role, obj.Id);
-                          }}
-                          onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                              e.preventDefault();
-                              inputRef.current.blur();
-                            }
-                          }}
-                        />
-                      ) : (
-                        <span className="p-[3px]">{obj.Role}</span>
-                      )}
-                    </span>
+                    <>
+                      <span
+                        className="userName"
+                        style={{ cursor: "pointer" }}
+                        onClick={() => {
+                          setIsEdit({ [obj.Id]: true });
+                          props.setRoleName(obj.Role);
+                        }}
+                      >
+                        {isEdit?.[obj.Id] && props.handleRoleChange ? (
+                          <input
+                            ref={inputRef}
+                            style={{
+                              backgroundColor: "transparent",
+                              width: "inherit",
+                              padding: "3px"
+                            }}
+                            value={obj.Role}
+                            onChange={(e) => props.handleRoleChange(e, obj.Id)}
+                            onBlur={() => {
+                              setIsEdit({});
+                              props.handleOnBlur(obj.Role, obj.Id);
+                            }}
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter") {
+                                e.preventDefault();
+                                inputRef.current.blur();
+                              }
+                            }}
+                          />
+                        ) : (
+                          <span style={{ padding: "3px" }}>{obj.Role}</span>
+                        )}
+                      </span>
+                    </>
                   )}
                   {obj.Name && (
-                    <span
-                      className={` ${
-                        (!isMobile && isHover === ind) ||
-                        props.isSelectListId === ind
-                          ? "text-[#424242]"
-                          : "text-base-content"
-                      } text-[10px] font-medium w-[100px] whitespace-nowrap overflow-hidden text-ellipsis`}
-                    >
+                    <span className={"useEmail"}>
                       {obj?.Role || obj?.Email}
                     </span>
                   )}
                 </div>
               </div>
               {isMobile && props.sendInOrder && (
-                <div className="flex flex-row items-center gap-[5px]">
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                    gap: 5
+                  }}
+                >
                   <div
                     onClick={(e) => {
                       if (ind !== 0) {
@@ -217,7 +253,7 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, "up");
                       }
                     }}
-                    className={ind === 0 ? "text-[gray]" : "text-black"}
+                    style={{ color: ind === 0 ? "gray" : "black" }}
                   >
                     ▲
                   </div>
@@ -228,11 +264,10 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, null, "down");
                       }
                     }}
-                    className={
-                      ind === props.signersdata.length - 1
-                        ? "text-[gray]"
-                        : "text-black"
-                    }
+                    style={{
+                      color:
+                        ind === props.signersdata.length - 1 ? "gray" : "black"
+                    }}
                   >
                     ▼
                   </div>
@@ -244,12 +279,7 @@ const RecipientList = (props) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  className={`${
-                    (!isMobile && isHover === ind) ||
-                    props.isSelectListId === ind
-                      ? "text-[#424242]"
-                      : "text-base-content"
-                  } cursor-pointer ml-[5px]`}
+                  style={{ cursor: "pointer", marginLeft: "5px" }}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>

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

@@ -1,6 +1,7 @@
-import React, { useState } from "react";
+import React from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
+import { themeColor } from "../../constant/const";
 
 function RenderAllPdfPage({
   signPdfUrl,
@@ -8,51 +9,32 @@ function RenderAllPdfPage({
   setAllPages,
   setPageNumber,
   setSignBtnPosition,
-  pageNumber,
-  signerPos,
-  signerObjectId
+  pageNumber
 }) {
-  const [signPageNumber, setSignPageNumber] = useState([]);
-  const [bookmarkColor, setBookmarkColor] = useState("");
   //set all number of pages after load pdf
   function onDocumentLoad({ numPages }) {
     setAllPages(numPages);
-    //check if signerPos array exist then save page number exist in signerPos array to show bookmark icon
-    if (signerPos) {
-      const checkUser = signerPos.filter(
-        (data) => data.signerObjId === signerObjectId
-      );
-      setBookmarkColor(checkUser[0]?.blockColor);
-      let pageNumberArr = [];
-      if (checkUser?.length > 0) {
-        checkUser[0]?.placeHolder?.map((data) => {
-          pageNumberArr.push(data?.pageNumber);
-        });
-
-        setSignPageNumber(pageNumberArr);
-      }
-    }
   }
 
-  //'function `addSignatureBookmark` is used to display the page where the user's signature is located.
-  const addSignatureBookmark = (index) => {
-    const ispageNumber = signPageNumber.includes(index + 1);
-    return (
-      ispageNumber && (
-        <div className="absolute z-20 top-[1px] -right-[13px] -translate-x-1/2 -translate-y-1/2">
-          <i
-            style={{ color: bookmarkColor || "red" }}
-            className="fa-solid fa-bookmark"
-          ></i>
-        </div>
-      )
-    );
-  };
   return (
-    <div>
-      <div className=" hidden md:flex flex-row bg-base-100 h-full">
-        <div className="w-[140px]">
-          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+    <div className="showPages">
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
+          backgroundColor: "white",
+          height: "100%"
+        }}
+      >
+        <div style={{ width: "140px" }}>
+          <div
+            style={{
+              background: themeColor
+              //  color:"white"
+            }}
+            className="signedStyle"
+          >
             Pages
           </div>
 
@@ -72,11 +54,20 @@ function RenderAllPdfPage({
                 {Array.from(new Array(allPages), (el, index) => (
                   <div
                     key={index}
-                    className={`${
-                      pageNumber - 1 === index
-                        ? "border-[red]"
-                        : "border-[#878787]"
-                    } border-2 w-[100px] m-[10px] flex justify-center items-center relative`}
+                    style={{
+                      width: "100px",
+                      border:
+                        pageNumber - 1 === index
+                          ? "2px solid red"
+                          : "2px solid #878787",
+                      // padding: "5px",
+                      margin: "10px",
+
+                      display: "flex",
+                      justifyContent: "center",
+                      alignItems: "center",
+                      contain: "content"
+                    }}
                     onClick={() => {
                       setPageNumber(index + 1);
                       if (setSignBtnPosition) {
@@ -84,19 +75,15 @@ function RenderAllPdfPage({
                       }
                     }}
                   >
-                    {signerPos && addSignatureBookmark(index)}
-
-                    <div className="relative z-[1] overflow-hidden">
-                      <Page
-                        key={`page_${index + 1}`}
-                        pageNumber={index + 1}
-                        width={100}
-                        height={100}
-                        scale={1}
-                        renderAnnotationLayer={false}
-                        renderTextLayer={false}
-                      />
-                    </div>
+                    <Page
+                      key={`page_${index + 1}`}
+                      pageNumber={index + 1}
+                      width={100}
+                      height={100}
+                      scale={1}
+                      renderAnnotationLayer={false}
+                      renderTextLayer={false}
+                    />
                   </div>
                 ))}
               </Document>

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

@@ -204,32 +204,34 @@ function RenderPdf({
   };
   //function for render placeholder block over pdf document
   const checkSignedSignes = (data) => {
-    let checkSign = [];
-    //condition to handle quick send flow and using normal request sign flow
-    checkSign = signedSigners.filter(
-      (sign) => sign?.Id === data?.Id || sign?.objectId === data?.signerObjId
+    const checkSign = signedSigners.filter(
+      (sign) => sign.objectId === data.signerObjId
     );
     if (data.signerObjId === signerObjectId) {
       setCurrentSigner(true);
     }
     const handleAllUserName = (Id, Role, type) => {
-      return (
-        <React.Fragment>
-          <div className="text-black text-[8px] font-medium">
-            {
-              pdfDetails[0].Signers?.find(
-                (signer) => signer.objectId === data.signerObjId
-              )?.Name
-            }
-          </div>
-          {type && <div className="text-[11px] font-bold">{type}</div>}
-          {Role && (
-            <div className="text-black text-[8px] font-medium">
-              {`(${Role})`}
-            </div>
-          )}
-        </React.Fragment>
-      );
+      return pdfDetails[0].Signers.map((signerData, key) => {
+        return (
+          signerData.objectId === data.signerObjId && (
+            <React.Fragment key={key}>
+              {signerData?.Name && (
+                <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+                  {signerData.Name}
+                </div>
+              )}
+              {type && (
+                <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
+              )}
+              {Role && (
+                <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+                  {`(${Role})`}
+                </div>
+              )}
+            </React.Fragment>
+          )
+        );
+      });
     };
 
     return (
@@ -288,12 +290,14 @@ function RenderPdf({
       if (checkSign?.Name) {
         return (
           <>
-            <div className="text-black text-[8px] font-medium">
+            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
               {checkSign?.Name}
             </div>
-            {type && <div className="text-[11px] font-bold">{type}</div>}
+            {type && (
+              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
+            )}
             {Role && (
-              <div className="text-black text-[8px] font-medium">
+              <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
                 {`(${Role})`}
               </div>
             )}
@@ -302,16 +306,24 @@ function RenderPdf({
       } else {
         return (
           <>
-            {type && <div className="text-[11px] font-bold">{type}</div>}
-            <div className="text-black text-[8px] font-medium">{Role}</div>
+            {type && (
+              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
+            )}
+            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+              {Role}
+            </div>
           </>
         );
       }
     } else {
       return (
         <>
-          {type && <div className="text-[11px] font-bold">{type}</div>}
-          <div className="text-black text-[8px] font-medium">{Role}</div>
+          {type && (
+            <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
+          )}
+          <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+            {Role}
+          </div>
         </>
       );
     }
@@ -322,7 +334,6 @@ function RenderPdf({
       {successEmail && <Alert type={"success"}>Email sent successfully!</Alert>}
       {isMobile && scale ? (
         <div
-          data-tut="reactourForth"
           style={{
             border: "0.1px solid #ebe8e8",
             marginTop: isGuestSigner && "30px"
@@ -450,9 +461,17 @@ function RenderPdf({
                   }))}
 
           {/* this component for render pdf document is in middle of the component */}
-          <div className="flex items-center justify-center">
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center"
+            }}
+          >
             <Document
-              onLoadError={() => setPdfLoadFail(true)}
+              onLoadError={() => {
+                setPdfLoadFail(true);
+              }}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               // ref={pdfRef}'
@@ -498,8 +517,10 @@ function RenderPdf({
           noScrollX={pdfNewWidth < pdfOriginalWidth ? false : true}
         >
           <div
-            data-tut="reactourForth"
-            style={{ border: "0.1px solid #ebe8e8", width: pdfOriginalWidth }}
+            style={{
+              border: "0.1px solid #ebe8e8",
+              width: pdfOriginalWidth
+            }}
             ref={drop}
             id="container"
           >

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

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
+import { themeColor } from "../../constant/const";
 
 function SignPad({
   isSignPad,
@@ -77,16 +78,21 @@ function SignPad({
   //save button component
   const SaveBtn = () => {
     return (
-      <div>
+      <div style={{ marginTop: "2px" }}>
         {(isTab === "draw" || isTab === "uploadImage") && (
           <button
+            style={{
+              color: "black",
+              border: "1px solid #ccc"
+            }}
             type="button"
-            className="op-btn op-btn-ghost mr-1 mt-[2px]"
+            className="finishBtn saveBtn"
             onClick={() => handleClear()}
           >
             Clear
           </button>
         )}
+
         <button
           onClick={() => {
             setCurrWidgetsDetails({});
@@ -121,12 +127,19 @@ function SignPad({
             setSignValue("");
             setIsStamp(false);
           }}
+          style={{
+            background: themeColor,
+            color: "white"
+          }}
+          disabled={
+            isSignImg || image || isDefaultSign || textWidth ? false : true
+          }
           type="button"
-          className={`${
+          className={
             isSignImg || image || isDefaultSign || textWidth
-              ? ""
-              : "pointer-events-none"
-          } op-btn op-btn-primary shadow-lg`}
+              ? "finishBtn saveBtn"
+              : "disabledFinish saveBtn"
+          }
         >
           Save
         </button>
@@ -201,8 +214,8 @@ function SignPad({
     const fontfamily = fontStyle
       ? fontStyle
       : fontSelect
-        ? fontSelect
-        : "Fasthand";
+      ? fontSelect
+      : "Fasthand";
 
     //creating span for getting text content width
     const span = document.createElement("span");
@@ -243,7 +256,7 @@ function SignPad({
 
   const PenColorComponent = (props) => {
     return (
-      <div className="flex flex-row items-start">
+      <div style={{ display: "flex", flexDirection: "row" }}>
         {allColor.map((data, key) => {
           return (
             <i
@@ -254,10 +267,10 @@ function SignPad({
                   key === 0 && penColor === "blue"
                     ? "2px solid blue"
                     : key === 1 && penColor === "red"
-                      ? "2px solid red"
-                      : key === 2 && penColor === "black"
-                        ? "2px solid black"
-                        : "2px solid white"
+                    ? "2px solid red"
+                    : key === 2 && penColor === "black"
+                    ? "2px solid black"
+                    : "2px solid white"
               }}
               onClick={() => {
                 props?.convertToImg &&
@@ -283,14 +296,33 @@ function SignPad({
   return (
     <div>
       {isSignPad && (
-        <div className="op-modal op-modal-open">
-          <div className="op-modal-box px-[13px] pt-2 pb-0">
-            <div className="flex justify-between text-base-content items-center">
-              <div className="text-[1.2rem]">
-                <div className="flex flex-row justify-between mt-[3px]">
-                  <div className="flex flex-row justify-between gap-[5px] md:gap-[8px] text-[11px] md:text-base">
+        <div className="modaloverlay">
+          <div className="modalcontainer">
+            <div
+              className="modalheader"
+              style={{ padding: "0 13px", marginTop: "5px" }}
+            >
+              <div className="modaltitle">
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    background: "white",
+                    marginTop: "3px"
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-around",
+                      alignItems: "end",
+                      gap: 10
+                    }}
+                  >
                     {isStamp ? (
-                      <span className="op-link-primary op-link">
+                      <span style={{ color: themeColor }} className="signTab">
                         {widgetType === "image"
                           ? "Upload image"
                           : "Upload stamp image"}
@@ -305,14 +337,23 @@ function SignPad({
                               setIsTab("draw");
                               setImage();
                             }}
-                            className={`${
-                              isTab === "draw"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
+                            style={{
+                              color: isTab === "draw" ? themeColor : "#515252",
+                              marginLeft: "2px"
+                            }}
+                            className="signTab"
                           >
                             Draw
                           </span>
+
+                          <div
+                            style={{
+                              border:
+                                isTab === "draw"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
                         </div>
                         <div>
                           <span
@@ -322,14 +363,22 @@ function SignPad({
                               setIsTab("uploadImage");
                               setSignatureType("");
                             }}
-                            className={`${
-                              isTab === "uploadImage"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
+                            style={{
+                              color:
+                                isTab === "uploadImage" ? themeColor : "#515252"
+                            }}
+                            className="signTab"
                           >
                             Upload Image
                           </span>
+                          <div
+                            style={{
+                              border:
+                                isTab === "uploadImage"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
                         </div>
                         <div>
                           <span
@@ -340,14 +389,23 @@ function SignPad({
                               setSignatureType("");
                               setImage();
                             }}
-                            className={`${
-                              isTab === "type"
-                                ? "op-link-primary"
-                                : "no-underline"
-                            } op-link underline-offset-8 ml-[2px]`}
+                            style={{
+                              color: isTab === "type" ? themeColor : "#515252",
+                              marginLeft: "2px"
+                            }}
+                            className="signTab"
                           >
                             Type
                           </span>
+
+                          <div
+                            style={{
+                              border:
+                                isTab === "type"
+                                  ? "1.5px solid #108783"
+                                  : "1.5px solid #ffffff"
+                            }}
+                          ></div>
                         </div>
                         {!isInitial && defaultSign ? (
                           <div>
@@ -359,14 +417,24 @@ function SignPad({
                                 setSignatureType("");
                                 setImage();
                               }}
-                              className={`${
-                                isTab === "mysignature"
-                                  ? "op-link-primary"
-                                  : "no-underline"
-                              } op-link underline-offset-8 ml-[2px]`}
+                              style={{
+                                color:
+                                  isTab === "mysignature"
+                                    ? themeColor
+                                    : "#515252"
+                              }}
+                              className="signTab"
                             >
                               My Signature
                             </span>
+                            <div
+                              style={{
+                                border:
+                                  isTab === "mysignature"
+                                    ? "1.5px solid #108783"
+                                    : "1.5px solid #ffffff"
+                              }}
+                            ></div>
                           </div>
                         ) : (
                           isInitial &&
@@ -380,14 +448,24 @@ function SignPad({
                                   setSignatureType("");
                                   setImage();
                                 }}
-                                className={`${
-                                  isTab === "mysignature"
-                                    ? "op-link-primary"
-                                    : "no-underline"
-                                } op-link underline-offset-8 ml-[2px]`}
+                                style={{
+                                  color:
+                                    isTab === "mysignature"
+                                      ? themeColor
+                                      : "#515252"
+                                }}
+                                className="signTab"
                               >
                                 My Initials
                               </span>
+                              <div
+                                style={{
+                                  border:
+                                    isTab === "mysignature"
+                                      ? "1.5px solid #108783"
+                                      : "1.5px solid #ffffff"
+                                }}
+                              ></div>
                             </div>
                           )
                         )}
@@ -397,7 +475,8 @@ function SignPad({
                 </div>
               </div>
               <div
-                className="text-[1.5rem] cursor-pointer"
+                className="closebtn"
+                style={{ color: "black" }}
                 onClick={() => {
                   setPenColor("blue");
                   setIsSignPad(false);
@@ -414,10 +493,10 @@ function SignPad({
                 &times;
               </div>
             </div>
-            <div className="p-[20px] h-full">
+            <div style={{ height: "100%", padding: 20 }}>
               {isDefaultSign ? (
                 <>
-                  <div className="flex justify-center">
+                  <div style={{ display: "flex", justifyContent: "center" }}>
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -435,19 +514,24 @@ function SignPad({
                     >
                       <img
                         alt="stamp img"
-                        className="w-full h-full object-contain bg-white"
+                        style={{
+                          width: "100%",
+                          height: "100%",
+                          background: "rgb(255, 255, 255)",
+                          objectFit: "contain"
+                        }}
                         draggable="false"
                         src={isInitial ? myInitial : defaultSign}
                       />
                     </div>
                   </div>
-                  <div className="flex justify-end">
+                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
                     <SaveBtn />
                   </div>
                 </>
               ) : isImageSelect || isStamp ? (
                 !image ? (
-                  <div className="flex justify-center">
+                  <div style={{ display: "flex", justifyContent: "center" }}>
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -478,7 +562,7 @@ function SignPad({
                   </div>
                 ) : (
                   <>
-                    <div className="flex justify-center">
+                    <div style={{ display: "flex", justifyContent: "center" }}>
                       <div
                         style={{
                           border: "1.3px solid #007bff",
@@ -497,26 +581,39 @@ function SignPad({
                           ref={imageRef}
                           src={image.src}
                           draggable="false"
-                          className=" object-contain h-full w-full"
+                          style={{
+                            objectFit: "contain",
+                            height: "100%",
+                            width: "100%"
+                          }}
                         />
                       </div>
                     </div>
-                    <div className="flex justify-end">
+                    <div
+                      style={{ display: "flex", justifyContent: "flex-end" }}
+                    >
                       <SaveBtn />
                     </div>
                   </>
                 )
               ) : isTab === "type" ? (
                 <div>
-                  <div className="flex justify-between items-center">
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center"
+                    }}
+                  >
                     <span className="signatureText">
                       {isInitial ? "Initials" : "Signature"}:
                     </span>
+
                     <input
                       maxLength={isInitial ? 3 : 30}
                       style={{ fontFamily: fontSelect, color: penColor }}
                       type="text"
-                      className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
+                      className="signatureInput"
                       placeholder="Your signature"
                       value={signValue}
                       onChange={(e) => {
@@ -525,6 +622,7 @@ function SignPad({
                       }}
                     />
                   </div>
+
                   <div className="fontOptionContainer">
                     {fontOptions.map((font, ind) => {
                       return (
@@ -555,14 +653,21 @@ function SignPad({
                     })}
                   </div>
 
-                  <div className="flex flex-row justify-between mt-[10px]">
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      marginTop: "10px"
+                    }}
+                  >
                     <PenColorComponent convertToImg={convertToImg} />
                     <SaveBtn />
                   </div>
                 </div>
               ) : (
                 <>
-                  <div className="flex justify-center">
+                  <div style={{ display: "flex", justifyContent: "center" }}>
                     <SignatureCanvas
                       ref={canvasRef}
                       penColor={penColor}
@@ -582,7 +687,14 @@ function SignPad({
                       dotSize={1}
                     />
                   </div>
-                  <div className="flex flex-row justify-between mt-[10px]">
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-between",
+                      marginTop: "10px"
+                    }}
+                  >
                     <PenColorComponent />
                     <SaveBtn />
                   </div>

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { themeColor } from "../../constant/const";
 import "../../styles/signature.css";
 function Signedby({ pdfDetails }) {
   const getFirstLetter = (name) => {
@@ -7,18 +8,50 @@ function Signedby({ pdfDetails }) {
   };
 
   return (
-    <div className="hidden md:block w-[180px] h-full bg-base-100">
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
+    <div className="signerComponent">
+      <div
+        style={{
+          background: themeColor,
+          color: "white"
+        }}
+        className="signedStyle"
+      >
         Signed By
       </div>
-      <div className="mt-[2px] bg-base-100">
-        <div className="bg-[#93a3db] rounded-xl mx-1 flex flex-row items-center py-[10px]">
-          <div className="bg-[#576081] flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1">
-            <span className="text-[12px] text-center font-bold text-white uppercase">
+      <div style={{ marginTop: "2px", background: "white" }}>
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            padding: "10px",
+            background: "#93a3db"
+          }}
+        >
+          <div
+            className="signerStyle"
+            style={{
+              background: "#abd1d0",
+              width: 20,
+              height: 20,
+              display: "flex",
+              borderRadius: 30 / 2,
+              justifyContent: "center",
+              alignItems: "center",
+              marginRight: "20px",
+              marginTop: "5px"
+            }}
+          >
+            <span
+              style={{
+                fontSize: "8px",
+                textAlign: "center",
+                fontWeight: "bold"
+              }}
+            >
               {getFirstLetter(pdfDetails.ExtUserPtr.Name)}
             </span>
           </div>
-          <div className="flex flex-col">
+          <div style={{ display: "flex", flexDirection: "column" }}>
             <span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
             <span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
           </div>

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

@@ -1,22 +1,37 @@
 import React from "react";
+import { themeColor } from "../../constant/const";
 import RecipientList from "./RecipientList";
 import { Tooltip } from "react-tooltip";
 
 function SignerListPlace(props) {
   return (
     <div>
-      <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-        <span>
+      <div
+        style={{
+          background: themeColor,
+          padding: "5px"
+        }}
+      >
+        <span className="signedStyle">
           {props.title ? props.title : "Recipients"}
-          <span className="text-xs mt-1 ml-0.5">
+          <span className="absolute text-xs z-[30] mt-1 ml-0.5">
             {props?.title === "Roles" && (
               <>
                 <a data-tooltip-id="my-tooltip">
                   <sup>
-                    <i className="fa-solid fa-question rounded-full border-[1.5px] border-base-content text-[11px] py-[1px] px-[3px]"></i>
+                    <i
+                      className="fa-solid fa-question rounded-full"
+                      style={{
+                        borderColor: "white",
+                        color: "white",
+                        fontSize: 11,
+                        borderWidth: 1.5,
+                        padding: "1px 3px"
+                      }}
+                    ></i>
                   </sup>
                 </a>
-                <Tooltip id="my-tooltip" className="z-[100]">
+                <Tooltip id="my-tooltip">
                   <div className="max-w-[450px]">
                     <p className="font-bold">What are template roles?</p>
                     <p>
@@ -53,32 +68,36 @@ function SignerListPlace(props) {
           </span>
         </span>
       </div>
-      <div className="overflow-auto hide-scrollbar max-h-[180px]">
+      <div className="signerList">
         <RecipientList {...props} />
       </div>
-      <div className="mx-1">
-        {props.handleAddSigner ? (
-          <div
-            role="button"
-            data-tut="reactourAddbtn"
-            className="op-btn op-btn-accent op-btn-outline w-full mt-[14px]"
-            disabled={props?.isMailSend ? true : false}
-            onClick={() => props.handleAddSigner()}
-          >
-            <i className="fa-solid fa-plus"></i> Add role
-          </div>
-        ) : (
-          <div
-            role="button"
-            data-tut="reactourAddbtn"
-            className="op-btn op-btn-accent op-btn-outline w-full mt-[14px]"
-            disabled={props?.isMailSend ? true : false}
-            onClick={() => props.setIsAddSigner(true)}
-          >
-            <i className="fa-solid fa-plus"></i> Add recipients
-          </div>
-        )}
-      </div>
+      {props.handleAddSigner ? (
+        <div
+          data-tut="reactourAddbtn"
+          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
+          onClick={() => props.handleAddSigner()}
+          style={{
+            opacity: props.isMailSend && "0.5",
+            pointerEvents: props.isMailSend && "none"
+          }}
+        >
+          <i className="fa-solid fa-plus"></i>
+          <span style={{ marginLeft: 2 }}>Add role</span>
+        </div>
+      ) : (
+        <div
+          data-tut="reactourAddbtn"
+          className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad]  hover:text-white cursor-pointer"
+          onClick={() => props.setIsAddSigner(true)}
+          style={{
+            opacity: props.isMailSend && "0.5",
+            pointerEvents: props.isMailSend && "none"
+          }}
+        >
+          <i className="fa-solid fa-plus"></i>
+          <span style={{ marginLeft: 2 }}>Add recipients</span>
+        </div>
+      )}
     </div>
   );
 }

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

@@ -1,13 +1,16 @@
 import React from "react";
-import Loader from "../../primitives/Loader";
+import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
 
 function VerifyEmail(props) {
   return (
-    <dialog className="op-modal op-modal-open absolute z-[1999]">
-      <div className="md:w-[40%] w-[80%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
-        <h3 className="font-bold text-lg pt-[15px] px-[20px] text-base-content">
+    <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
+      <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
+        <div
+          style={{ backgroundColor: themeColor }}
+          className=" text-white p-[10px] rounded-t"
+        >
           OTP verification
-        </h3>
+        </div>
         {props.isVerifyModal ? (
           <form
             onSubmit={(e) => {
@@ -15,24 +18,25 @@ function VerifyEmail(props) {
               props.handleVerifyEmail(e);
             }}
           >
-            <div className="px-6 py-3 text-base-content">
+            <div className="px-6 py-3">
               <label className="mb-2">Enter OTP</label>
               <input
                 required
                 type="tel"
                 pattern="[0-9]{4}"
-                className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 placeholder="Enter OTP received over email"
                 value={props.otp}
                 onChange={(e) => props.setOtp(e.target.value)}
               />
             </div>
+            <hr />
             <div className="px-6 my-3">
-              <button type="submit" className="op-btn op-btn-primary">
+              <button type="submit" className={submitBtn}>
                 Verify
               </button>
               <button
-                className="op-btn op-btn-secondary ml-2"
+                className={`${rejectBtn} ml-2`}
                 onClick={(e) => props.handleResend(e)}
               >
                 Resend
@@ -40,15 +44,29 @@ function VerifyEmail(props) {
             </div>
           </form>
         ) : props.otpLoader ? (
-          <div className="h-[150px] flex items-center justify-center">
-            <Loader />
+          <div
+            style={{
+              height: "150px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }}
+          >
+            <div
+              style={{
+                fontSize: "45px",
+                color: "#3dd3e0"
+              }}
+              className="loader-37"
+            ></div>
           </div>
         ) : (
-          <div className="px-6 py-3 text-base-content">
-            <p className="mb-2 text-sm">Please verify your email !</p>
+          <div className="px-6 py-3">
+            <p className="mb-2">Please verify your email !</p>
+            <hr />
             <div className="px-0 mt-3">
               <button
-                className="op-btn op-btn-primary"
+                className={submitBtn}
                 type="submit"
                 onClick={() => {
                   props.handleVerifyBtn();
@@ -60,7 +78,7 @@ function VerifyEmail(props) {
           </div>
         )}
       </div>
-    </dialog>
+    </div>
   );
 }
 

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

@@ -9,6 +9,7 @@ import {
   textWidget,
   widgets
 } from "../../constant/Utils";
+import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
   signRef,
@@ -255,82 +256,117 @@ function WidgetComponent({
             className="stickyfooter"
             style={{ width: window.innerWidth + "px" }}
           >
-            <div className="mx-1">
-              {isSigners && (
-                <div
-                  data-tut={dataTut}
-                  className="py-[10px] flex justify-center items-center op-card"
+            {isSigners && (
+              <div
+                data-tut={dataTut}
+                style={{
+                  background: blockColor
+                    ? blockColor
+                    : isSelectListId
+                      ? color[isSelectListId % color.length]
+                      : color[0],
+                  padding: "10px 20px",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                }}
+                onClick={() => handleModal()}
+              >
+                <span
                   style={{
-                    background: blockColor
-                      ? blockColor
-                      : isSelectListId
-                        ? color[isSelectListId % color.length]
-                        : color[0]
+                    fontSize: "13px",
+                    fontWeight: "700",
+                    textAlign: "center"
                   }}
-                  onClick={() => handleModal()}
                 >
-                  <span className="text-[13px] font-bold flex items-center">
-                    {title ? title : "Recipient"}
-                    {signersdata[isSelectListId]?.Role && (
-                      <div>
-                        {signersdata[isSelectListId]?.Name ? (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Name?.length > 12
-                              ? `${signersdata[isSelectListId].Name.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Name}
-                          </>
-                        ) : (
-                          <>
-                            :{" "}
-                            {signersdata[isSelectListId]?.Role?.length > 12
-                              ? `${signersdata[isSelectListId].Role.slice(
-                                  0,
-                                  12
-                                )}...`
-                              : signersdata[isSelectListId]?.Role}
-                          </>
-                        )}
-                      </div>
-                    )}
-                    <div className="ml-[6px] text-[16px]">
-                      <i className="fa-solid fa-angle-down"></i>
+                  {title ? title : "Recipient"}
+                </span>
+                <span
+                  style={{
+                    fontSize: "13px",
+                    fontWeight: "700",
+                    display: "flex",
+                    alignItems: "center"
+                  }}
+                >
+                  {signersdata[isSelectListId]?.Role && (
+                    <div>
+                      {signersdata[isSelectListId]?.Name ? (
+                        <>
+                          :{" "}
+                          {signersdata[isSelectListId]?.Name?.length > 12
+                            ? `${signersdata[isSelectListId].Name.slice(
+                                0,
+                                12
+                              )}...`
+                            : signersdata[isSelectListId]?.Name}
+                        </>
+                      ) : (
+                        <>
+                          :{" "}
+                          {signersdata[isSelectListId]?.Role?.length > 12
+                            ? `${signersdata[isSelectListId].Role.slice(
+                                0,
+                                12
+                              )}...`
+                            : signersdata[isSelectListId]?.Role}
+                        </>
+                      )}
                     </div>
-                  </span>
-                </div>
-              )}
-            </div>
-            <div className="mx-1">
-              {handleAddSigner ? (
+                  )}
+                  <div style={{ marginLeft: 6, fontSize: 16 }}>
+                    <i className="fa-solid fa-angle-down"></i>
+                  </div>
+                </span>
+              </div>
+            )}
+            {handleAddSigner ? (
+              <div
+                data-tut="reactourAddbtn"
+                style={{
+                  margin: "5px 0 5px 0",
+                  backgroundColor: themeColor,
+                  color: "white"
+                }}
+                className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
+                onClick={() => handleAddSigner()}
+              >
+                <i className="fa-solid fa-plus"></i>
+                <span style={{ marginLeft: 2 }}>Add role</span>
+              </div>
+            ) : (
+              setIsAddSigner && (
                 <div
                   data-tut="reactourAddbtn"
-                  className="op-btn op-btn-accent w-full my-[2px]"
-                  onClick={() => handleAddSigner()}
+                  style={{
+                    margin: "5px 0 5px 0",
+                    backgroundColor: themeColor,
+                    color: "white"
+                  }}
+                  className="p-[10px] my-[2px] flex flex-row items-center justify-center border-[1px] border-[#47a3ad] hover:bg-[#47a3ad] text-[#47a3ad] hover:text-white cursor-pointer"
+                  onClick={() => setIsAddSigner(true)}
                 >
                   <i className="fa-solid fa-plus"></i>
-                  <span>Add role</span>
+                  <span style={{ marginLeft: 2 }}>Add recipients</span>
                 </div>
-              ) : (
-                setIsAddSigner && (
-                  <div
-                    data-tut="reactourAddbtn"
-                    className="op-btn op-btn-accent w-full my-[2px]"
-                    onClick={() => setIsAddSigner(true)}
-                  >
-                    <i className="fa-solid fa-plus"></i>
-                    <span>Add recipients</span>
-                  </div>
-                )
-              )}
-            </div>
+              )
+            )}
+
             <div
               ref={scrollContainerRef}
-              className="bg-base-100 border-[2px] border-t-primary"
+              style={{
+                background: "white",
+                borderTop: `2px solid ${themeColor}`
+              }}
             >
-              <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
+              <div
+                style={{
+                  display: "flex",
+                  overflowX: "scroll",
+                  whiteSpace: "nowrap",
+                  padding: "10px 5px 10px 1px"
+                }}
+              >
                 <WidgetList
                   updateWidgets={updateWidgets}
                   handleDivClick={handleDivClick}
@@ -347,14 +383,20 @@ function WidgetComponent({
       ) : (
         <div
           data-tut={dataTut}
-          className={`${
-            isMailSend ? "bg-opacity-50 pointer-events-none" : ""
-          } hidden md:block w-[180px] h-full bg-base-100`}
+          className={
+            isMailSend ? "disabled signerComponent " : "signerComponent"
+          }
         >
-          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
-            <span>Fields</span>
+          <div
+            style={{
+              background: themeColor,
+              padding: "5px"
+            }}
+          >
+            <span className="signedStyle">Fields</span>
           </div>
-          <div className="flex flex-col items-center my-3">
+
+          <div className="signLayoutContainer1">
             <WidgetList
               updateWidgets={updateWidgets}
               handleDivClick={handleDivClick}
@@ -371,7 +413,7 @@ function WidgetComponent({
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <div className="max-h-[600px] overflow-auto pb-1">
+            <div style={{ maxHeight: "600px", overflow: "auto" }}>
               <RecipientList
                 signerPos={signerPos}
                 signersdata={signersdata}
@@ -391,7 +433,14 @@ function WidgetComponent({
               />
             </div>
           ) : (
-            <div className=" p-[20px] text-[15px] font-medium text-center">
+            <div
+              style={{
+                padding: 20,
+                fontSize: 15,
+                fontWeight: "500",
+                textAlign: "center"
+              }}
+            >
               Please add a {title ? title : "recipients"}
             </div>
           )}

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

@@ -4,9 +4,9 @@ import { getWidgetType } from "../../constant/Utils";
 function WidgetList(props) {
   return props.updateWidgets.map((item, ind) => {
     return (
-      <div key={ind} className="mb-[5px]">
+      <div key={ind} style={{ marginBottom: "5px" }}>
         <div
-          className="select-none"
+          className="widgets"
           onClick={() => {
             props.addPositionOfSignature &&
               props.addPositionOfSignature("onclick", item);

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

@@ -6,7 +6,6 @@ import { textInputWidget } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 import Upgrade from "../../primitives/Upgrade";
 import { isEnableSubscription } from "../../constant/const";
-import Tooltip from "../../primitives/Tooltip";
 
 const WidgetNameModal = (props) => {
   const [formdata, setFormdata] = useState({
@@ -122,15 +121,15 @@ const WidgetNameModal = (props) => {
           props.widgetName === textInputWidget
             ? "pt-0"
             : ""
-        } p-[20px] text-base-content`}
+        } p-[20px]`}
       >
-        <div className="mb-[0.75rem] text-[13px]">
-          <label htmlFor="name">
+        <div className="form-section">
+          <label htmlFor="name" style={{ fontSize: 13 }}>
             Name
-            <span className="text-[red]"> *</span>
+            <span style={{ color: "red", fontSize: 13 }}> *</span>
           </label>
           <input
-            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+            className="addUserInput"
             name="name"
             value={formdata.name}
             onChange={(e) => handleChange(e)}
@@ -140,41 +139,39 @@ const WidgetNameModal = (props) => {
         {(props.defaultdata?.type === textInputWidget ||
           props.widgetName === textInputWidget) && (
           <>
-            <div className="mb-[0.75rem]">
-              <div className="flex items-center gap-1">
-                <label
-                  htmlFor="textvalidate"
-                  className={`${
-                    !props.isSubscribe && isEnableSubscription
-                      ? "bg-opacity-50 pointer-events-none"
-                      : ""
-                  } text-[13px]`}
-                >
-                  Validation
-                </label>
-                <Tooltip
-                  url={"https://www.w3schools.com/jsref/jsref_obj_regexp.asp"}
-                />
-                {!props.isSubscribe && isEnableSubscription && <Upgrade />}
-              </div>
-              <div
-                className={`${
-                  !props.isSubscribe && isEnableSubscription
-                    ? "bg-opacity-50 pointer-events-none"
-                    : ""
-                } flex flex-row gap-[10px] mb-[0.5rem]`}
+            <div className="form-section">
+              <label
+                htmlFor="textvalidate"
+                className={
+                  !props.isSubscribe && isEnableSubscription && "disabled"
+                }
+                style={{ fontSize: 13 }}
               >
-                <div className="w-full relative group">
+                Validation
+              </label>
+              {!props.isSubscribe && isEnableSubscription && <Upgrade />}
+              <div
+                className={
+                  !props.isSubscribe && isEnableSubscription && "disabled"
+                }
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: 10,
+                  marginBottom: "0.5rem"
+                }}
+              >
+                <div style={{ width: "100%", position: "relative" }}>
                   <input
-                    className="z-20 relative op-input op-input-bordered rounded-r-none op-input-sm focus:outline-none group-hover:border-base-content w-[87%] md:w-[92%] text-xs"
+                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
                     name="textvalidate"
-                    placeholder="Enter custom regular expression"
+                    placeholder="Enter custom expression"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    className="validationlist op-input op-input-bordered op-input-sm focus:outline-none group-hover:border-base-content w-full text-xs"
+                    className="validationlist addUserInput"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
@@ -182,13 +179,17 @@ const WidgetNameModal = (props) => {
                   >
                     <option
                       disabled={formdata?.textvalidate}
-                      className="text-[13px]"
+                      style={{ fontSize: "13px" }}
                     >
                       Select...
                     </option>
                     {inputOpt.map((data, ind) => {
                       return (
-                        <option className="text-[13px]" key={ind} value={data}>
+                        <option
+                          style={{ fontSize: "13px" }}
+                          key={ind}
+                          value={data}
+                        >
                           {data}
                         </option>
                       );
@@ -198,12 +199,12 @@ const WidgetNameModal = (props) => {
               </div>
             </div>
 
-            <div className="mb-[0.75rem]">
-              <label htmlFor="name" className="text-[13px]">
+            <div className="form-section">
+              <label htmlFor="name" style={{ fontSize: 13 }}>
                 Default value
               </label>
               <input
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                className="addUserInput"
                 name="defaultValue"
                 value={formdata.defaultValue}
                 onChange={(e) => handledefaultChange(e)}
@@ -221,22 +222,37 @@ const WidgetNameModal = (props) => {
                   style={{ fontSize: 12 }}
                 >
                   <i
-                    className="fas fa-exclamation-circle text-[15px]"
-                    style={{ color: "#fab005" }}
-                  ></i>
+                    className="fas fa-exclamation-circle"
+                    style={{ color: "#fab005", fontSize: 15 }}
+                  ></i>{" "}
                   invalid default value
                 </div>
               )}
             </div>
           </>
         )}
-        <div className="mb-[0.75rem]">
-          <div className="flex flex-row gap-[10px] mb-[0.5rem]">
+        <div className="form-section">
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 10,
+              marginBottom: "0.5rem"
+            }}
+          >
             {statusArr.map((data, ind) => {
               return (
-                <div key={ind} className="flex flex-row gap-[5px] items-center">
+                <div
+                  key={ind}
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    gap: 5,
+                    alignItems: "center"
+                  }}
+                >
                   <input
-                    className="mr-[2px] op-radio op-radio-xs"
+                    style={{ accentColor: "red", marginRight: "10px" }}
                     type="radio"
                     name="status"
                     onChange={() =>
@@ -246,7 +262,9 @@ const WidgetNameModal = (props) => {
                       formdata.status.toLowerCase() === data.toLowerCase()
                     }
                   />
-                  <div className="text-[13px] font-medium">{data}</div>
+                  <div style={{ fontSize: "13px", fontWeight: "500" }}>
+                    {data}
+                  </div>
                 </div>
               );
             })}
@@ -254,20 +272,35 @@ const WidgetNameModal = (props) => {
         </div>
         {(props.defaultdata?.type === textInputWidget ||
           props?.widgetName === textInputWidget) && (
-          <div className="mb-[0.75rem]">
-            <label htmlFor="hint" className="text-[13px]">
+          <div className="form-section">
+            <label htmlFor="hint" style={{ fontSize: 13 }}>
               Hint
             </label>
             <input
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
               name="hint"
               value={formdata.hint}
               onChange={(e) => handleChange(e)}
             />
           </div>
         )}
-        <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
-        <button type="submit" className="op-btn op-btn-primary">
+        <div
+          style={{
+            height: 1,
+            backgroundColor: "#b7b3b3",
+            width: "100%",
+            marginBottom: "16px"
+          }}
+        ></div>
+        <button
+          style={{
+            color: "white",
+            padding: "5px 20px",
+            backgroundColor: "#32a3ac"
+          }}
+          type="submit"
+          className="finishBtn"
+        >
           Save
         </button>
       </form>

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

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
 import Alert from "../../../primitives/Alert";
-import Loader from "../../../primitives/Loader";
 
 const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
   const folderPtr = {
@@ -26,11 +25,9 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       if (parentFolderId) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();
@@ -52,7 +49,6 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       const exsitQuery = new Parse.Query(folderCls);
       exsitQuery.equalTo("Name", name);
       exsitQuery.equalTo("Type", "Folder");
-      exsitQuery.notEqualTo("IsArchive", true);
       if (parentFolderId) {
         exsitQuery.equalTo("Folder", folderPtr);
       }
@@ -114,8 +110,11 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
       {isAlert && <Alert type={alert.type}>{alert.message}</Alert>}
       <div id="createFolder" className="relative">
         {isLoader && (
-          <div className="absolute h-full w-full flex justify-center items-center">
-            <Loader />
+          <div className="absolute h-full w-full flex justify-center items-center ">
+            <div
+              style={{ fontSize: "45px", color: "#3dd3e0" }}
+              className="loader-37"
+            ></div>
           </div>
         )}
         <h1 className="text-base font-semibold">Create Folder</h1>

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

@@ -25,11 +25,9 @@ const FolderModal = (props) => {
       if (folderPtr) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();

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

@@ -45,11 +45,9 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       if (folderPtr) {
         FolderQuery.equalTo("Folder", folderPtr);
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       } else {
         FolderQuery.doesNotExist("Folder");
         FolderQuery.equalTo("Type", "Folder");
-        FolderQuery.notEqualTo("IsArchive", true);
       }
 
       const res = await FolderQuery.find();
@@ -171,40 +169,32 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
           {required && <span className="text-red-500 text-[13px]">*</span>}
         </label>
       </div>
-      <div className="relative max-w-sm">
-        <div
-          onClick={() => SetIsOpen(true)}
-          className=" cursor-pointer rounded px-[20px] py-[20px] bg-base-100 border-[1px] border-base-200 shadow flex max-w-sm gap-8 items-center"
-        >
-          <div>
-            <i
-              className="far fa-folder-open text-[40px] text-[#33bbff]"
-              style={{ fontSize: "40px" }}
-              aria-hidden="true"
-            ></i>
-          </div>
-          <div className="font-semibold ">
-            <div className="flex items-center gap-2">
-              <p>
-                {selectFolder && selectFolder.Name
-                  ? selectFolder.Name
-                  : "OpenSign™ Drive"}
-              </p>
-              <div
-                className="text-black text-sm"
-                // onClick={() => SetIsOpen(true)}
-              >
-                <i
-                  className="fa fa-pencil cursor-pointer"
-                  title="Select Folder"
-                  aria-hidden="true"
-                ></i>
-              </div>
-            </div>
-            <p className="text-[10px] text-gray-400">
-              {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+      <div className="relative rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center">
+        <div>
+          <i
+            className="far fa-folder-open text-[40px] text-[#33bbff]"
+            style={{ fontSize: "40px" }}
+            aria-hidden="true"
+          ></i>
+        </div>
+        <div className="font-semibold ">
+          <div className="flex items-center gap-2">
+            <p>
+              {selectFolder && selectFolder.Name
+                ? selectFolder.Name
+                : "OpenSign™ Drive"}
             </p>
+            <div className="text-black text-sm" onClick={() => SetIsOpen(true)}>
+              <i
+                className="fa fa-pencil"
+                title="Select Folder"
+                aria-hidden="true"
+              ></i>
+            </div>
           </div>
+          <p className="text-[10px] text-gray-400">
+            {selectFolder && selectFolder.Name ? `(${folderPath})` : ""}
+          </p>
         </div>
         <div className="absolute top-2 right-1 cursor-pointer">
           <Tooltip

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

@@ -3,6 +3,16 @@ import Parse from "parse";
 import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
+const customStyles = {
+  control: (provided) => ({
+    ...provided,
+    fontSize: "13px" // Font size for the control
+  }),
+  option: (provided) => ({
+    ...provided,
+    fontSize: "13px" // Font size for the options
+  })
+};
 const SelectSigners = (props) => {
   const [userList, setUserList] = useState([]);
   const [selected, setSelected] = useState();
@@ -69,44 +79,32 @@ const SelectSigners = (props) => {
   };
 
   return (
-    <div className="h-full px-[20px] py-[10px] text-base-content">
-      <div className="w-full mx-auto p-[8px]">
-        <div className="mb-0">
-          <label className="text-[14px] font-bold">Choose from contacts</label>
+    <div className="addusercontainer">
+      <div className="form-wrapper">
+        <div className="form-section" style={{ marginBottom: 0 }}>
+          <label style={{ fontSize: 14, fontWeight: "700" }}>Choose User</label>
           <AsyncSelect
             cacheOptions
             defaultOptions
             value={selected}
             loadingMessage={() => "Loading..."}
-            noOptionsMessage={() => "Contact not found"}
+            noOptionsMessage={() => "User not Found"}
             loadOptions={loadOptions}
             onChange={handleOptions}
-            unstyled
-            classNames={{
-              control: () =>
-                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
-              valueContainer: () =>
-                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
-              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
-              multiValueLabel: () => "mb-[2px]",
-              menu: () =>
-                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
-              menuList: () => "shadow-md rounded-lg overflow-hidden",
-              option: () =>
-                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
-              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
-            }}
+            styles={customStyles}
           />
         </div>
-        <p
-          className={`${
-            isError ? "text-[red]" : "text-transparent"
-          } text-[11px] ml-[6px] my-[2px]`}
-        >
-          Please select signer
-        </p>
+        {isError ? (
+          <p style={{ color: "red", fontSize: "12px", margin: "5px" }}>
+            Please select signer
+          </p>
+        ) : (
+          <p style={{ color: "transparent", fontSize: "12px", margin: "5px" }}>
+            .
+          </p>
+        )}
         <div>
-          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
+          <button className="submitbutton" onClick={() => handleAdd()}>
             Submit
           </button>
         </div>

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

@@ -1,30 +1,15 @@
 import React, { useState, useEffect } from "react";
 import Select from "react-select";
 import AddSigner from "../../AddSigner";
+import Modal from "react-modal";
 import Parse from "parse";
 import Tooltip from "../../../primitives/Tooltip";
-import { createPortal } from "react-dom";
 function arrayMove(array, from, to) {
   array = array.slice();
   array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
   return array;
 }
 
-const AddSignerModal = ({ isOpen, children }) => {
-  if (!isOpen) {
-    return null;
-  }
-
-  return createPortal(
-    <div className="op-modal op-modal-open">
-      <div className="op-modal-box p-0 min-w-[90%] md:min-w-[500px] max-h-90 overflow-y-auto hide-scrollbar text-sm">
-        {children}
-      </div>
-    </div>,
-    document.body
-  );
-};
-
 /**
  * react-sortable-hoc is depcreated not usable from react 18.x.x
  *  need to replace it with @dnd-kit
@@ -32,6 +17,7 @@ const AddSignerModal = ({ isOpen, children }) => {
  */
 
 const SignersInput = (props) => {
+  Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
   const [selected, setSelected] = useState([]);
@@ -122,17 +108,15 @@ const SignersInput = (props) => {
       <label className="block relative">
         Signers
         {props.required && <span className="text-red-500 text-[13px]">*</span>}
-        <span className="absolute ml-1 text-xs z-30">
+        <span className="absolute ml-1 text-xs z-50">
           <Tooltip
             id={"signer-tooltip"}
-            message={
-              "Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."
-            }
+            message={"Begin typing a contact's name to see suggested signers from your saved contacts or add new ones. Arrange the signing order by adding signers in the desired sequence. Use the '+' button to include signers and the 'x' to remove them. Each signer will receive an email prompt to sign the document in the order listed."}
           />
         </span>
       </label>
-      <div className="flex gap-x-[5px]">
-        <div className="w-full">
+      <div style={{ display: "flex", gap: 5 }}>
+        <div style={{ flexWrap: "wrap", width: "100%" }}>
           <Select
             onSortEnd={onSortEnd}
             distance={4}
@@ -142,22 +126,6 @@ const SignersInput = (props) => {
             onChange={onChange}
             closeMenuOnSelect={false}
             required={props.required}
-            noOptionsMessage={() => "Contact not found"}
-            unstyled
-            classNames={{
-              control: () =>
-                "op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full h-full text-[11px]",
-              valueContainer: () =>
-                "flex flex-row gap-x-[2px] gap-y-[2px] md:gap-y-0 w-full my-[2px]",
-              multiValue: () => "op-badge op-badge-primary h-full text-[11px]",
-              multiValueLabel: () => "mb-[2px]",
-              menu: () =>
-                "mt-1 shadow-md rounded-lg bg-base-200 text-base-content",
-              menuList: () => "shadow-md rounded-lg overflow-hidden",
-              option: () =>
-                "bg-base-200 text-base-content rounded-lg m-1 hover:bg-base-300 p-2",
-              noOptionsMessage: () => "p-2 bg-base-200 rounded-lg m-1 p-2"
-            }}
           />
         </div>
         <div
@@ -165,29 +133,66 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          className="cursor-pointer op-input op-input-bordered focus:outline-none hover:border-base-content max-h-[38px] min-w-[48px] flex justify-center items-center"
+          style={{
+            cursor: "pointer",
+            borderRadius: 4,
+            border: "1px solid #ccc",
+            minHeight: 38,
+            minWidth: 48,
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+          }}
         >
           <i className="fas fa-plus"></i>
         </div>
-        <AddSignerModal isOpen={modalIsOpen}>
-          <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
-            Add Signer
-          </h3>
-          <button
-            onClick={handleModalCloseClick}
-            className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
-          >
-            ✕
-          </button>
-          {isModal && (
-            <AddSigner
-              valueKey={"objectId"}
-              displayKey={"Name"}
-              details={handleNewDetails}
-              closePopup={handleModalCloseClick}
-            />
-          )}
-        </AddSignerModal>
+        <Modal
+          isOpen={modalIsOpen}
+          onRequestClose={handleModalCloseClick}
+          shouldCloseOnOverlayClick={false}
+          id="modal1"
+          contentLabel="Modal"
+          style={{
+            content: {
+              top: "50%",
+              left: "50%",
+              right: "auto",
+              bottom: "auto",
+              transform: "translate(-50%, -50%)",
+              border: "1px transparent",
+              padding: 0
+            },
+            overlay: {
+              width: "100%",
+              backgroundColor: "rgba(0, 0, 0, 0.75)",
+              zIndex: 50
+            }
+          }}
+        >
+          <div className="min-w-full md:min-w-[500px]">
+            <div
+              className="flex justify-between rounded-t items-center py-[10px] px-[20px] text-white"
+              style={{ background: "#32a3ac" }}
+            >
+              <div className="text-[1.2rem] font-normal">Add Signer</div>
+              <button
+                onClick={handleModalCloseClick}
+                className="text-[1.5rem] cursor-pointer focus:outline-none"
+              >
+                &times;
+              </button>
+            </div>
+
+            {isModal && (
+              <AddSigner
+                valueKey={"objectId"}
+                displayKey={"Name"}
+                details={handleNewDetails}
+                closePopup={handleModalCloseClick}
+              />
+            )}
+          </div>
+        </Modal>
       </div>
     </div>
   );

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

@@ -1,92 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { findContact } from "../../../constant/Utils";
-const SuggestionInput = (props) => {
-  const [inputValue, setInputValue] = useState(props?.value || "");
-  const [suggestions, setSuggestions] = useState([]);
-  const [showSuggestions, setShowSuggestions] = useState(false);
-  const ref = useRef(null);
-
-  useEffect(() => {
-    document.addEventListener("mousedown", Clickout);
-    return () => {
-      document.removeEventListener("mousedown", Clickout);
-    };
-  }, []);
-
-  const Clickout = (event) => {
-    if (ref.current && !ref.current.contains(event.target)) {
-      setShowSuggestions(false);
-    }
-  };
-  // create debounce to avoid unnecessay api calls
-  useEffect(() => {
-    let timer;
-    if (inputValue) {
-      if (timer) clearTimeout(timer);
-      timer = setTimeout(() => {
-        (async () => {
-          const res = await findContact(inputValue);
-          if (res?.length > 0) {
-            setSuggestions(res);
-            setShowSuggestions(true);
-          } else {
-            setSuggestions(res);
-            setShowSuggestions(false);
-          }
-        })();
-      }, 1000);
-    }
-    return () => clearTimeout(timer);
-  }, [inputValue]);
-
-  const handleInputChange = async (e) => {
-    const value = e.target.value;
-    setInputValue(value?.toLowerCase());
-    if (props.onChange) {
-      props.onChange(value);
-    }
-
-    if (value.trim() === "") {
-      setSuggestions([]);
-      setShowSuggestions(false);
-      return;
-    }
-  };
-  const handleSuggestionClick = (suggestion) => {
-    setInputValue(suggestion.Email);
-    setSuggestions([]);
-    setShowSuggestions(false);
-    if (props.onChange) {
-      props.onChange(suggestion);
-    }
-  };
-  return (
-    <div className="flex flex-col items-center relative text-base-content">
-      <input
-        type={props?.type || "text"}
-        value={inputValue}
-        onChange={handleInputChange}
-        placeholder="Enter Email..."
-        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
-        required={props.required}
-      />
-      {showSuggestions && (
-        <ul
-          ref={ref}
-          className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-base-200 border border-gray-300 rounded shadow-md"
-        >
-          {suggestions.map((suggestion, index) => (
-            <li
-              key={index}
-              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
-              onClick={() => handleSuggestionClick(suggestion)}
-            >
-              {suggestion.Email}
-            </li>
-          ))}
-        </ul>
-      )}
-    </div>
-  );
-};
-export default SuggestionInput;

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

@@ -3,18 +3,14 @@ import { NavLink } from "react-router-dom";
 
 const Menu = ({ item, isOpen, closeSidebar }) => {
   return (
-    <li key={item.title} role="none" className="my-0.5">
+    <li key={item.title} role="none">
       <NavLink
         to={
           item.pageType
             ? `/${item.pageType}/${item.objectId}`
             : `/${item.objectId}`
         }
-        className={({ isActive }) =>
-          `${
-            isActive ? " bg-base-300 text-base-content" : ""
-          } flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
-        }
+        className="mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer  focus:text-[#0056b3] focus:bg-[#eef1f5]"
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}
         role="menuitem"

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

@@ -9,7 +9,6 @@ import dp from "../../assets/images/dp.png";
 
 const Sidebar = ({ isOpen, closeSidebar }) => {
   const [menuList, setmenuList] = useState([]);
-  const [submenuOpen, setSubmenuOpen] = useState(false);
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
   const tenantname = localStorage.getItem("TenantName");
@@ -34,18 +33,10 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     }
   };
 
-  const toggleSubmenu = (title) => {
-    setSubmenuOpen({ [title]: !submenuOpen[title] });
-  };
-
-  const handleMenuItem = () => {
-    closeSidebar();
-    setSubmenuOpen({});
-  };
   return (
     <aside
-      className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] hide-scrollbar
-     ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
+      className={`bg-white text-[#444] h-screen w-full md:w-[300px] overflow-y-auto transform transition-transform z-40 md:translate-x-0
+      ${isOpen ? "translate-x-0 block" : "-translate-x-full hidden"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">
         <div className="w-[75px] h-[75px] rounded-full ring-[2px] ring-offset-2 ring-gray-400 overflow-hidden">
@@ -56,20 +47,13 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
           />
         </div>
         <div>
-          <p className="text-[14px] font-bold text-base-content">{username}</p>
-          <p
-            className={`text-[12px] text-base-content ${
-              tenantname ? "mt-2" : ""
-            }`}
-          >
+          <p className="text-[14px] font-bold">{username}</p>
+          <p className={`text-[12px] ${tenantname ? "mt-2" : ""}`}>
             {tenantname}
           </p>
         </div>
       </div>
-      <nav
-        className="op-menu op-menu-sm"
-        aria-label="OpenSign Sidebar Navigation"
-      >
+      <nav aria-label="OpenSign Sidebar Navigation">
         <ul
           className="text-sm"
           role="menubar"
@@ -81,21 +65,19 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
                 key={item.title}
                 item={item}
                 isOpen={isOpen}
-                closeSidebar={handleMenuItem}
+                closeSidebar={closeSidebar}
               />
             ) : (
               <Submenu
                 key={item.title}
                 item={item}
                 closeSidebar={closeSidebar}
-                toggleSubmenu={toggleSubmenu}
-                submenuOpen={submenuOpen}
               />
             )
           )}
         </ul>
       </nav>
-      <footer className="mt-4 flex justify-center items-center text-[25px] text-base-content gap-3">
+      <footer className="mt-4 flex justify-center items-center text-[25px] text-black gap-3">
         <SocialMedia />
       </footer>
     </aside>

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

@@ -1,13 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 
-const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
+const Submenu = ({ item, closeSidebar }) => {
+  const [submenuOpen, setSubmenuOpen] = useState(false);
   const { title, icon, children } = item;
+
+  const toggleSubmenu = () => {
+    setSubmenuOpen(!submenuOpen);
+  };
+
   return (
-    <li role="none" className="my-0.5">
+    <li role="none">
       <button
-        onClick={() => toggleSubmenu(item.title)}
-        className="flex items-center text-left p-3 lg:p-4 text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none "
+        onClick={toggleSubmenu}
+        className="w-full flex items-center text-left text-[#444] p-3 lg:p-4 hover:bg-[#eef1f5] focus:outline-none focus:text-[#0056b3] focus:bg-[#eef1f5]"
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -17,29 +23,23 @@ const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
           <span className="ml-3 lg:ml-4">{title}</span>
           <i
             className={`${
-              submenuOpen[item.title]
-                ? "fa-solid fa-angle-down"
-                : "fa-solid fa-angle-right"
+              submenuOpen ? "fa-solid fa-angle-down" : "fa-solid fa-angle-right"
             }`}
             aria-hidden="true"
           ></i>
         </div>
       </button>
-      {submenuOpen[item.title] && (
+      {submenuOpen && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
-            <li key={childItem.title} role="none" className="my-0.5">
+            <li key={childItem.title} role="none">
               <NavLink
                 to={
                   childItem.pageType
                     ? `/${childItem.pageType}/${childItem.objectId}`
                     : `/${childItem.objectId}`
                 }
-                className={({ isActive }) =>
-                  `${
-                    isActive ? "bg-base-300 text-base-content" : ""
-                  } flex items-center text-left pl-6 md:pl-8 py-2 text-sm cursor-pointer text-base-content hover:text-base-content focus:bg-base-300 hover:bg-base-300 hover:no-underline focus:outline-none`
-                }
+                className="block pl-6 md:pl-8 py-2 text-sm text-gray-700 hover:bg-blue-500 hover:text-white focus:text-[#0056b3] focus:bg-[#eef1f5] cursor-pointer"
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}

apps/OpenSign/src/constant/Utils.js

@@ -1,23 +1,16 @@
 import axios from "axios";
 import moment from "moment";
-import { isEnableSubscription } from "./const";
+import { isEnableSubscription, themeColor } from "./const";
 import React from "react";
 import { rgb } from "pdf-lib";
 import Parse from "parse";
-import { appInfo } from "./appinfo";
-import { saveAs } from "file-saver";
-import printModule from "print-js";
 
 export const isMobile = window.innerWidth < 767;
 export const textInputWidget = "text input";
 export const textWidget = "text";
 export const radioButtonWidget = "radio button";
-export const openInNewTab = (url, target) => {
-  if (target) {
-    window.open(url, target, "noopener,noreferrer");
-  } else {
-    window.open(url, "_blank", "noopener,noreferrer");
-  }
+export const openInNewTab = (url) => {
+  window.open(url, "_blank", "noopener,noreferrer");
 };
 
 export async function fetchSubscription(
@@ -26,12 +19,11 @@ export async function fetchSubscription(
   isGuestSign = false
 ) {
   try {
-    const Extand_Class = localStorage.getItem("Extand_Class");
-    const extClass = Extand_Class && JSON.parse(Extand_Class);
-    // console.log("extClass ", extClass);
+    const extClass = localStorage.getItem("Extand_Class");
     let extUser;
-    if (extClass && extClass.length > 0) {
-      extUser = extClass[0].objectId;
+    if (extClass) {
+      const jsonSender = JSON.parse(extClass);
+      extUser = jsonSender[0].objectId;
     } else {
       extUser = extUserId;
     }
@@ -179,10 +171,11 @@ export const contractUsers = async (email) => {
     .then((Listdata) => {
       const json = Listdata.data;
       let data = [];
+
       if (json && json.result) {
         data.push(json.result);
+        return data;
       }
-      return data;
     })
     .catch((err) => {
       console.log("Err ", err);
@@ -376,21 +369,43 @@ export const addWidgetOptions = (type) => {
       return {};
   }
 };
-export const getWidgetType = (item) => {
+export const getWidgetType = (item, marginLeft) => {
   return (
-    <div className="op-btn op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] w-fit md:w-[150px] ml-[6px] md:ml-0 p-0 overflow-hidden">
-      <div className="w-full h-full flex md:justify-between items-center">
-        <div className="flex justify-start items-center text-[13px] ml-1">
-          {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
-          <span className="text-center text-[15px] ml-[5px] font-semibold">
+    <>
+      <div
+        className="signatureBtn widgets"
+        style={{
+          boxShadow:
+            "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18)",
+          marginLeft: marginLeft && `${marginLeft}px`
+        }}
+      >
+        <div className="flex items-center mr-1">
+          {!isMobile && (
+            <i
+              className="fa-sharp fa-solid fa-grip-vertical"
+              style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }}
+            ></i>
+          )}
+          <span className=" font-[400] text-[15px] text-black ml-[5px]">
             {item.type}
           </span>
         </div>
-        <div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
-          <i className={item.icon}></i>
+        <div
+          style={{
+            backgroundColor: themeColor,
+            padding: "0 5px",
+            display: "flex",
+            alignItems: "center"
+          }}
+        >
+          <i
+            style={{ color: "white", fontSize: item.iconSize }}
+            className={item.icon}
+          ></i>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 
@@ -546,18 +561,18 @@ export const signPdfFun = async (
         isCustomCompletionMail = true;
       }
     }
-
+    
     // below for loop is used to get first signature of user to send if to signpdf
     // for adding it in completion certificate
     let getSignature;
     for (let item of xyPosition) {
-      if (!getSignature) {
-        const typeExist = item.pos.some((data) => data?.type);
-        if (typeExist) {
-          getSignature = item.pos.find((data) => data?.type === "signature");
-        } else {
-          getSignature = item.pos.find((data) => !data.isStamp);
-        }
+      const typeExist = item.pos.some((data) => data?.type);
+      if (typeExist) {
+        getSignature = item.pos.find((data) => data?.type === "signature");
+        break;
+      } else {
+        getSignature = item.pos.find((data) => !data.isStamp);
+        break;
       }
     }
 
@@ -647,7 +662,6 @@ export const createDocument = async (template, placeholders, signerData) => {
       Name: Doc.Name,
       URL: Doc.URL,
       SignedUrl: Doc.SignedUrl,
-      SentToOthers: Doc.SentToOthers,
       Description: Doc.Description,
       Note: Doc.Note,
       Placeholders: placeholdersArr,
@@ -662,9 +676,7 @@ export const createDocument = async (template, placeholders, signerData) => {
         objectId: Doc.CreatedBy.objectId
       },
       Signers: signers,
-      SendinOrder: Doc?.SendinOrder || false,
-      AutomaticReminders: Doc?.AutomaticReminders || false,
-      RemindOnceInEvery: parseInt(Doc?.RemindOnceInEvery || 5)
+      SendinOrder: Doc?.SendinOrder || false
     };
 
     try {
@@ -1337,8 +1349,8 @@ export const multiSignEmbed = async (
           position.type === radioButtonWidget
             ? 10
             : position.type === "checkbox"
-              ? 10
-              : newUpdateHeight;
+            ? 10
+            : newUpdateHeight;
         const newHeight = ind ? (ind > 0 ? widgetHeight : 0) : widgetHeight;
 
         if (signyourself) {
@@ -2016,150 +2028,3 @@ export const handleSendOTP = async (email) => {
     alert(error.message);
   }
 };
-//handle download signed pdf
-export const handleDownloadPdf = async (
-  pdfDetails,
-  pdfUrl,
-  setIsDownloading
-) => {
-  const pdfName = pdfDetails[0] && pdfDetails[0].Name;
-  setIsDownloading("pdf");
-  try {
-    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
-    const axiosRes = await axios.post(
-      `${appInfo.baseUrl}/functions/getsignedurl`,
-      { url: pdfUrl },
-      {
-        headers: {
-          "content-type": "Application/json",
-          "X-Parse-Application-Id": appInfo.appId,
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-        }
-      }
-    );
-    const url = axiosRes.data.result;
-    saveAs(url, `${sanitizeFileName(pdfName)}_signed_by_OpenSign™.pdf`);
-    setIsDownloading("");
-  } catch (err) {
-    console.log("err in getsignedurl", err);
-    setIsDownloading("");
-    alert("something went wrong, please try again later.");
-  }
-};
-
-export const sanitizeFileName = (pdfName) => {
-  // Replace spaces with underscore
-  return pdfName.replace(/ /g, "_");
-};
-//function for print digital sign pdf
-export const handleToPrint = async (event, pdfUrl, setIsDownloading) => {
-  event.preventDefault();
-  setIsDownloading("pdf");
-  try {
-    // const url = await Parse.Cloud.run("getsignedurl", { url: pdfUrl });
-    const axiosRes = await axios.post(
-      `${appInfo.baseUrl}/functions/getsignedurl`,
-      { url: pdfUrl },
-      {
-        headers: {
-          "content-type": "Application/json",
-          "X-Parse-Application-Id": appInfo.appId,
-          "X-Parse-Session-Token": localStorage.getItem("accesstoken")
-        }
-      }
-    );
-    const url = axiosRes.data.result;
-    const pdf = await getBase64FromUrl(url);
-    const isAndroidDevice = navigator.userAgent.match(/Android/i);
-    const isAppleDevice =
-      (/iPad|iPhone|iPod/.test(navigator.platform) ||
-        (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1)) &&
-      !window.MSStream;
-    if (isAndroidDevice || isAppleDevice) {
-      const byteArray = Uint8Array.from(
-        atob(pdf)
-          .split("")
-          .map((char) => char.charCodeAt(0))
-      );
-      const blob = new Blob([byteArray], { type: "application/pdf" });
-      const blobUrl = URL.createObjectURL(blob);
-      window.open(blobUrl, "_blank");
-      setIsDownloading("");
-    } else {
-      printModule({ printable: pdf, type: "pdf", base64: true });
-      setIsDownloading("");
-    }
-  } catch (err) {
-    setIsDownloading("");
-    console.log("err in getsignedurl", err);
-    alert("something went wrong, please try again later.");
-  }
-};
-
-//handle download signed pdf
-export const handleDownloadCertificate = async (
-  pdfDetails,
-  setIsDownloading
-) => {
-  if (pdfDetails?.length > 0 && pdfDetails[0]?.CertificateUrl) {
-    try {
-      await fetch(pdfDetails[0] && pdfDetails[0]?.CertificateUrl);
-      const certificateUrl = pdfDetails[0] && pdfDetails[0]?.CertificateUrl;
-      saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
-    } catch (err) {
-      console.log("err in download in certificate", err);
-    }
-  } else {
-    setIsDownloading("certificate");
-    try {
-      const data = {
-        docId: pdfDetails[0]?.objectId
-      };
-      const docDetails = await axios.post(
-        `${localStorage.getItem("baseUrl")}functions/getDocument`,
-        data,
-        {
-          headers: {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-            sessionToken: localStorage.getItem("accesstoken")
-          }
-        }
-      );
-      if (docDetails.data && docDetails.data.result) {
-        const doc = docDetails.data.result;
-        if (doc?.CertificateUrl) {
-          await fetch(doc?.CertificateUrl);
-          const certificateUrl = doc?.CertificateUrl;
-          saveAs(certificateUrl, `Certificate_signed_by_OpenSign™.pdf`);
-          setIsDownloading("");
-        } else {
-          setIsDownloading("certificate");
-        }
-      }
-    } catch (err) {
-      console.log("err in download in certificate", err);
-      alert("something went wrong, please try again later.");
-    }
-  }
-};
-export async function findContact(value) {
-  try {
-    const currentUser = Parse.User.current();
-    const contactbook = new Parse.Query("contracts_Contactbook");
-    contactbook.equalTo(
-      "CreatedBy",
-      Parse.User.createWithoutData(currentUser.id)
-    );
-    contactbook.notEqualTo("IsDeleted", true);
-    contactbook.matches("Email", new RegExp(value, "i"));
-
-    const contactRes = await contactbook.find();
-    if (contactRes) {
-      const res = JSON.parse(JSON.stringify(contactRes));
-      return res;
-    }
-  } catch (error) {
-    console.error("Error fetching suggestions:", error);
-  }
-}

apps/OpenSign/src/constant/const.js

@@ -1,6 +1,12 @@
 export const contactCls = "contracts_Contactbook";
 export const templateCls = "contracts_Template";
 export const documentCls = "contracts_Document";
+export const rejectBtn =
+  "bg-[#ffffff] rounded-sm shadow-md text-[12px] font-semibold uppercase text-black py-1.5 px-4 focus:outline-none text-center border-[1px] border-[#b4b4b4]";
+export const submitBtn =
+  "bg-[#32a3ac] rounded-sm shadow-md text-[12px] font-semibold uppercase text-white py-1.5 px-4 focus:outline-none text-center";
+export const modalSubmitBtnColor = "#17a2b8";
+export const modalCancelBtnColor = "white";
 export const themeColor = "#47a3ad";
 export const iconColor = "#686968";
 export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION;

apps/OpenSign/src/index.css

@@ -2,16 +2,17 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  background-color: white;
+body{
+    background-color: white;
 }
 
 /* Custom CSS to hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
+    display: none;
+  }
+  
 .hide-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 }
+  

apps/OpenSign/src/index.js

@@ -16,7 +16,6 @@ import {
 import DragElement from "./components/pdf/DragElement";
 import TagManager from "react-gtm-module";
 import Parse from "parse";
-import './polyfills'
 const appId = process.env.REACT_APP_APPID
   ? process.env.REACT_APP_APPID
   : "opensign";

apps/OpenSign/src/json/ReportJson.js

@@ -3,7 +3,7 @@ export default function reportJson(id) {
   const head = ["Sr.No", "Title", "Note", "Folder", "File", "Owner", "Signers"];
   const contactbook = ["Sr.No", "Title", "Email", "Phone"];
   const dashboardReportHead = ["Title", "File", "Owner", "Signers"];
-  const templateReport = ["Sr.No", "Title", "File", "Owner", "Signers"];
+
   switch (id) {
     // draft documents report
     case "ByHuevtCFY":
@@ -14,7 +14,8 @@ export default function reportJson(id) {
           {
             btnId: "1231",
             hoverLabel: "Edit",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -22,7 +23,8 @@ export default function reportJson(id) {
           {
             btnId: "2142",
             hoverLabel: "Delete",
-            btnColor: "op-btn-secondary",
+            btnColor: "#ff4848",
+            textColor: "white",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -41,7 +43,8 @@ export default function reportJson(id) {
             btnId: "4536",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "op-btn-primary",
+            btnColor: "#3ac9d6",
+            textColor: "white",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -59,7 +62,8 @@ export default function reportJson(id) {
           {
             btnId: "8901",
             hoverLabel: "Share",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -67,7 +71,8 @@ export default function reportJson(id) {
           {
             btnId: "1588",
             hoverLabel: "View",
-            btnColor: "op-btn-secondary",
+            btnColor: "#3ac9d6",
+            textColor: "white",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -75,19 +80,11 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "",
+            btnColor: "transparent",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
             subaction: [
-              {
-                btnId: "1630",
-                btnLabel: "Resend",
-                hoverLabel: "Resend",
-                btnIcon: "fa-solid fa-envelope",
-                redirectUrl: "",
-                action: "resend"
-              },
               {
                 btnId: "1688",
                 btnLabel: "Revoke",
@@ -119,7 +116,8 @@ export default function reportJson(id) {
           {
             btnId: "1378",
             hoverLabel: "Edit",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -127,7 +125,8 @@ export default function reportJson(id) {
           {
             btnId: "1278",
             hoverLabel: "Delete",
-            btnColor: "op-btn-secondary",
+            btnColor: "#ff4848",
+            textColor: "white",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -145,7 +144,8 @@ export default function reportJson(id) {
           {
             btnId: "1458",
             hoverLabel: "View",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -153,7 +153,8 @@ export default function reportJson(id) {
           {
             btnId: "1358",
             hoverLabel: "Delete",
-            btnColor: "op-btn-secondary",
+            btnColor: "#ff4848",
+            textColor: "white",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -171,7 +172,8 @@ export default function reportJson(id) {
           {
             btnId: "1898",
             hoverLabel: "View",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -179,7 +181,8 @@ export default function reportJson(id) {
           {
             btnId: "1998",
             hoverLabel: "Delete",
-            btnColor: "op-btn-secondary",
+            btnColor: "#ff4848",
+            textColor: "white",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -197,7 +200,8 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "Share",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -205,7 +209,8 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "View",
-            btnColor: "op-btn-secondary",
+            btnColor: "#3ac9d6",
+            textColor: "white",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -213,19 +218,11 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "",
+            btnColor: "transparent",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
             subaction: [
-              {
-                btnId: "1631",
-                btnLabel: "Resend",
-                hoverLabel: "Resend",
-                btnIcon: "fa-solid fa-envelope",
-                redirectUrl: "",
-                action: "resend"
-              },
               {
                 btnId: "6788",
                 btnLabel: "Revoke",
@@ -256,7 +253,8 @@ export default function reportJson(id) {
             btnId: "2001",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "op-btn-primary",
+            btnColor: "#3ac9d6",
+            textColor: "white",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -272,7 +270,8 @@ export default function reportJson(id) {
           {
             btnId: "2003",
             hoverLabel: "Edit",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -280,7 +279,8 @@ export default function reportJson(id) {
           {
             btnId: "2004",
             hoverLabel: "Delete",
-            btnColor: "op-btn-secondary",
+            btnColor: "#ff4848",
+            textColor: "white",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -296,7 +296,8 @@ export default function reportJson(id) {
           {
             btnId: "2204",
             hoverLabel: "Delete",
-            btnColor: "op-btn-outline op-btn-error",
+            btnColor: "#f55a42",
+            textColor: "white",
             btnIcon: "fa-solid fa-trash",
             action: "delete"
           }
@@ -309,13 +310,14 @@ export default function reportJson(id) {
     case "6TeaPr321t":
       return {
         reportName: "Templates",
-        heading: templateReport,
+        heading: head,
         actions: [
           {
             btnId: "2234",
             btnLabel: "Use",
             hoverLabel: "Use",
-            btnColor: "op-btn-primary",
+            btnColor: "#4bd396",
+            textColor: "white",
             btnIcon: "fa fa-plus",
             redirectUrl: "placeHolderSign",
             action: "redirect",
@@ -323,22 +325,10 @@ export default function reportJson(id) {
             message:
               "Click the 'Use' button to create a new document from an existing template. "
           },
-          {
-            btnId: "1631",
-            btnLabel: "Quick send",
-            hoverLabel: "Quick send",
-            btnColor: "op-btn-secondary",
-            btnIcon: "fa-solid fa-envelope",
-            redirectUrl: "",
-            action: "bulksend",
-            selector: "tourbulksend",
-            message:
-              "To quickly create and send multiple documents using an existing template, click the 'Quick Send' button."
-          },
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "",
+            btnColor: "transparent",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",

apps/OpenSign/src/json/dashboardJson.js

@@ -1,90 +0,0 @@
-const dashboardJson = [
-  {
-    id: "35KBoSgoAK",
-    columns: [
-      {
-        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
-        widget: {
-          type: "Card",
-          icon: "fas fa-signature",
-          bgColor: "bg-[#f0058e]",
-          label: "Need your Signature",
-          description: null,
-          data: {
-            id: "e04ee9dc-932d-6b80-0202-703fd154eb74",
-            queryType: "",
-            class: "contracts_Document",
-            query:
-              'where={"$and":[{"AuditTrail.UserPtr":{"$ne":{"__type":"Pointer","className": "contracts_Users","objectId":"#objectId#"}}},{"AuditTrail.Activity":{"$ne":"Signed"}}],"Signers":{"$in":[{"__type":"Pointer","className":"contracts_Users","objectId":"#objectId#"}]},"IsDeclined":{"$ne":true},"IsCompleted":{"$ne":true},"Type":{"$ne":"Folder"},"Placeholders":{"$ne":null},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
-            key: "count",
-            Redirect_type: "Report",
-            Redirect_id: "4Hhwbp482K",
-            tourSection: "tourcard1",
-            tourMessage:
-              "Clicking on this card will take you to the list of documents awaiting your review."
-          }
-        }
-      },
-      {
-        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
-        widget: {
-          type: "Card",
-          icon: "fas fa-sign-out-alt",
-          bgColor: "bg-[#2ed8b6]",
-          label: "Out for signatures",
-          description: null,
-          data: {
-            id: "c1935cc0-28d4-3d73-b72a-8c1e3d18a17f",
-            queryType: "",
-            class: "contracts_Document",
-            query:
-              'where={"Type":{"#*ne":"Folder"},"Signers":{"#*exists":true,"#*ne":[]},"Placeholders":{"#*ne":null},"IsCompleted":{"#*ne":true},"IsDeclined":{"#*ne":true},"IsArchive":{"#*ne":true},"CreatedBy":{"__type":"Pointer","className":"_User","objectId":"#UserId.objectId#"},"ExpiryDate":{"#*gt":{"__type":"#Date#","iso":"#today#"}}}&count=1',
-            key: "count",
-            Redirect_type: "Report",
-            Redirect_id: "1MwEuxLEkF",
-            tourSection: "tourcard2",
-            tourMessage:
-              "Clicking on this card will take you to a list of documents awaiting signature."
-          }
-        }
-      },
-      {
-        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
-        widget: {
-          type: "report",
-          reportId: "5Go51Q7T8r",
-          data: {
-            tourSection: "tourreport1",
-            tourMessage:
-              "This is a list of documents that are waiting for your signature."
-          }
-        }
-      },
-      {
-        colsize: "col-span-12 md:col-span-6 lg:col-span-6",
-        widget: {
-          type: "report",
-          reportId: "d9k3UfYHBc",
-          data: {
-            tourSection: "tourreport2",
-            tourMessage:
-              "This is a list of documents you've sent to other parties for signature."
-          }
-        }
-      },
-      {
-        colsize: "col-span-12 md:col-span-12 lg:col-span-12",
-        widget: {
-          type: "report",
-          reportId: "kC5mfynCi4",
-          data: {
-            tourSection: "tourreport3",
-            tourMessage:
-              "This are documents you have started but have not finalized for sending."
-          }
-        }
-      }
-    ]
-  }
-];
-export default dashboardJson;

apps/OpenSign/src/json/plansArr.js

@@ -52,8 +52,7 @@ const plans = [
       "API Access",
       "100 API signatures included",
       "DocumentId removal from signed docs",
-      "Custom email templates",
-      "Auto reminders"
+      "Custom email templates"
     ]
   },
   {

apps/OpenSign/src/layout/HomeLayout.js

@@ -12,7 +12,6 @@ import { useNavigate, useLocation, Outlet } from "react-router-dom";
 import { isEnableSubscription } from "../constant/const";
 import { useCookies } from "react-cookie";
 import { fetchSubscription } from "../constant/Utils";
-import Loader from "../primitives/Loader";
 
 const HomeLayout = () => {
   const navigate = useNavigate();
@@ -29,34 +28,29 @@ const HomeLayout = () => {
   const [tourConfigs, setTourConfigs] = useState([]);
   const [, setCookie] = useCookies(["accesstoken", "main_Domain"]);
 
-  const tenantId = localStorage.getItem("TenantId");
   useEffect(() => {
-    if (!tenantId) {
-      setIsUserValid(false);
-    } else {
-      (async () => {
-        try {
-          // Use the session token to validate the user
-          const userQuery = new Parse.Query(Parse.User);
-          const user = await userQuery.get(Parse.User.current().id, {
-            sessionToken: localStorage.getItem("accesstoken")
-          });
-          if (user) {
-            localStorage.setItem("profileImg", user.get("ProfilePic") || "");
-            checkIsSubscribed();
-          } else {
-            setIsUserValid(false);
-          }
-        } catch (error) {
-          // Session token is invalid or there was an error
+    (async () => {
+      try {
+        // Use the session token to validate the user
+        const userQuery = new Parse.Query(Parse.User);
+        const user = await userQuery.get(Parse.User.current().id, {
+          sessionToken: localStorage.getItem("accesstoken")
+        });
+        if (user) {
+          localStorage.setItem("profileImg", user.get("ProfilePic") || "");
+          checkIsSubscribed();
+        } else {
           setIsUserValid(false);
         }
-      })();
-      saveCookies();
-    }
+      } catch (error) {
+        // Session token is invalid or there was an error
+        setIsUserValid(false);
+      }
+    })();
+    saveCookies();
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [tenantId]);
+  }, []);
   //function to use save data in cookies storage
   const saveCookies = () => {
     const main_Domain = window.location.origin;
@@ -248,14 +242,27 @@ const HomeLayout = () => {
   };
   return (
     <div>
-      <div className="sticky top-0 z-[101]">
+      <div className="sticky top-0 z-50">
         {!isLoader && <Header showSidebar={showSidebar} />}
       </div>
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div className="flex h-[100vh] justify-center items-center">
-              <Loader />
+            <div
+              style={{
+                height: "100vh",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <div
+                style={{
+                  fontSize: "45px",
+                  color: "#3dd3e0"
+                }}
+                className="loader-37"
+              ></div>
             </div>
           ) : (
             <>
@@ -265,7 +272,7 @@ const HomeLayout = () => {
                   id="renderList"
                   className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
                 >
-                  <div className="bg-base-200 p-3">{<Outlet />}</div>
+                  <div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />
                   </div>
@@ -286,10 +293,13 @@ const HomeLayout = () => {
           )}
         </>
       ) : (
-        <ModalUi showHeader={false} isOpen={true} showClose={false}>
+        <ModalUi title={"Session Expired"} isOpen={true} showClose={false}>
           <div className="flex flex-col justify-center items-center py-4 md:py-5 gap-5">
-            <p className="text-xl font-medium">Your session has expired.</p>
-            <button onClick={handleLoginBtn} className="op-btn op-btn-neutral">
+            <p className="text-xl font-normal">Your session has expired.</p>
+            <button
+              onClick={handleLoginBtn}
+              className="text-base px-3 py-1.5 rounded shadow-md text-white bg-[#1ab6ce]"
+            >
               Login
             </button>
           </div>

apps/OpenSign/src/pages/ChangePassword.js

@@ -49,13 +49,13 @@ function ChangePassword() {
     return <Navigate to="/" />;
   }
   return (
-    <div className="w-full bg-base-100 text-base-content shadow rounded p-2">
+    <div className="w-full bg-white shadow rounded p-2">
       <Title title={"Change Password"} />
       <div className="text-xl font-bold border-b-[1px] border-gray-300">
         Change Password
       </div>
       <div className="m-2">
-        <form onSubmit={handleSubmit} className=" flex flex-col gap-y-2">
+        <form onSubmit={handleSubmit}>
           <div>
             <label htmlFor="currentpassword" className="block text-xs ml-1">
               Current Password
@@ -65,7 +65,7 @@ function ChangePassword() {
               name="currentpassword"
               value={currentpassword}
               onChange={(e) => setCurrentPassword(e.target.value)}
-              className="op-input op-input-bordered op-input-sm text-xs w-full"
+              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               placeholder="Current Password"
               required
             />
@@ -79,7 +79,7 @@ function ChangePassword() {
               name="newpassword"
               value={newpassword}
               onChange={(e) => setnewpassword(e.target.value)}
-              className="op-input op-input-bordered op-input-sm text-xs w-full"
+              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               placeholder="New Password"
               required
             />
@@ -91,14 +91,17 @@ function ChangePassword() {
             <input
               type="password"
               name="confirmpassword"
-              className="op-input op-input-bordered op-input-sm text-xs w-full"
+              className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
               value={confirmpassword}
               onChange={(e) => setconfirmpassword(e.target.value)}
               placeholder="Confirm Password"
               required
             />
           </div>
-          <button type="submit" className="op-btn op-btn-primary shadow-md m-2">
+          <button
+            type="submit"
+            className="bg-[#188ae2] m-2 px-4 py-3 rounded-sm shadow-md text-white text-xs font-semibold uppercase"
+          >
             Change Password
           </button>
         </form>

apps/OpenSign/src/pages/Dashboard.js

@@ -1,19 +1,20 @@
 import React, { useState, useEffect } from "react";
+import Parse from "parse";
 import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
 import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
 import { useDispatch } from "react-redux";
 import { saveTourSteps } from "../redux/reducers/TourStepsReducer";
-import dashboardJson from "../json/dashboardJson";
-import Loader from "../primitives/Loader";
 
 const Dashboard = () => {
   const navigate = useNavigate();
   const dispatch = useDispatch();
   const { id } = useParams();
-  const [dashboard, setdashboard] = useState({});
-  const [loading, setloading] = useState(true);
+  const [dashboard, setdashboard] = useState([]);
+  const [classnameArray, setclassnameArray] = useState([]);
+  const [loading, setloading] = useState(false);
+  const [defaultQuery, setDefaultQuery] = useState("");
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -23,16 +24,59 @@ const Dashboard = () => {
         getDashboard(localStorage.getItem("PageLanding"));
       }
     } else {
-      navigate("/", { replace: true, state: { from: "" } });
+      navigate("/", { replace: true, state: { from: location } });
     }
     // eslint-disable-next-line
   }, [id]);
 
   const getDashboard = async (id) => {
+    setloading(true);
     try {
-      const dashboard = dashboardJson.find((x) => x.id === id);
-      setdashboard(dashboard);
-      const dashboardTour = dashboard.columns
+      var forms = Parse.Object.extend("w_dashboard");
+      var query = new Parse.Query(forms);
+      query.equalTo("objectId", id);
+      const results = await query.first();
+      const resultjson = results.toJSON();
+      let classArray = [];
+      let DefaultQuery = "";
+      resultjson.rows.forEach((x) => {
+        let col_lg = "",
+          col_md = "",
+          col_xs = "",
+          col_sm = "",
+          col_ = "",
+          obj = {};
+        let subItem = [];
+        let item = "";
+        x.columns.forEach((y) => {
+          if (y.widget.type === "customeHtml") {
+            DefaultQuery = y.widget.data[0].default;
+          }
+          if (Number(y["collg"]) > 0) {
+            col_lg = "col-lg-" + y["collg"];
+          }
+          if (Number(y["colmd"]) > 0) {
+            col_md = "col-md-" + y["colmd"];
+          }
+          if (Number(y["colxs"]) > 0) {
+            col_xs = "col-xs-" + y["colxs"];
+          }
+          if (Number(y["colsm"]) > 0) {
+            col_sm = "col-sm-" + y["colsm"];
+          }
+          if (Number(y["col"]) > 0) {
+            col_ = "col-" + y["col"];
+          }
+          item =
+            col_lg + " " + col_md + " " + col_xs + " " + col_sm + " " + col_;
+          subItem.push(item);
+        });
+        obj = subItem;
+        classArray.push(obj);
+      });
+      setdashboard(resultjson.rows);
+      // console.log("resultjson.rows ", resultjson.rows);
+      const arr = resultjson.rows[0].columns
         .filter((col) => {
           if (col.widget.data && col.widget.data.tourSection) {
             return col;
@@ -46,7 +90,14 @@ const Dashboard = () => {
             // style: { backgroundColor: "#abd4d2" },
           };
         });
-      dispatch(saveTourSteps(dashboardTour));
+      dispatch(saveTourSteps(arr));
+      // console.log("arr ", arr);
+      setclassnameArray(classArray);
+      if (localStorage.getItem("DashboardDefaultFilter")) {
+        setDefaultQuery(localStorage.getItem("DashboardDefaultFilter"));
+      } else {
+        setDefaultQuery(DefaultQuery);
+      }
       setloading(false);
     } catch (e) {
       console.error("Problem", e);
@@ -54,16 +105,32 @@ const Dashboard = () => {
     }
   };
 
+  let _dash = (
+    <GetDashboard
+      dashboard={dashboard}
+      classnameArray={classnameArray}
+      DefaultQuery={defaultQuery}
+    />
+  );
+  if (loading) {
+    _dash = (
+      <div style={{ height: "300px", backgroundColor: "white" }}>
+        <div
+          style={{
+            marginLeft: "45%",
+            marginTop: "150px",
+            fontSize: "45px",
+            color: "#3dd3e0"
+          }}
+          className="loader-37"
+        ></div>
+      </div>
+    );
+  }
   return (
     <React.Fragment>
       <Title title="Dashboard" />
-      {loading ? (
-        <div className="h-[300px] w-full bg-white flex justify-center items-center rounded-md">
-          <Loader />
-        </div>
-      ) : (
-        <GetDashboard dashboard={dashboard} />
-      )}
+      {_dash}
     </React.Fragment>
   );
 };

apps/OpenSign/src/pages/ForgetPassword.js

@@ -1,26 +1,21 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
-import { useNavigate } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import Parse from "parse";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
-import { isEnableSubscription } from "../constant/const";
-import { getAppLogo } from "../constant/Utils";
 
 function ForgotPassword() {
   const dispatch = useDispatch();
-  const navigate = useNavigate();
   const [state, setState] = useState({
     email: "",
     password: "",
     hideNav: ""
   });
   const [sentStatus, setSentStatus] = useState("");
-  const [image, setImage] = useState();
-
   const handleChange = (event) => {
     const { name, value } = event.target;
     setState({ ...state, [name]: value });
@@ -56,26 +51,15 @@ function ForgotPassword() {
 
   useEffect(() => {
     dispatch(fetchAppInfo());
-    saveLogo();
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
-  const saveLogo = async () => {
-    if (isEnableSubscription) {
-      const logo = await getAppLogo();
-      if (logo) {
-        setImage(logo);
-      } else {
-        setImage(appInfo?.applogo || undefined);
-      }
-    } else {
-      setImage(appInfo?.applogo || undefined);
-    }
-  };
+
+  let image = appInfo.applogo;
   return (
-    <div>
+    <div className="bg-white">
       <Title title="Forgot password page" />
       {sentStatus === "success" && (
         <Alert type="success">
@@ -85,31 +69,29 @@ function ForgotPassword() {
       {sentStatus === "failed" && (
         <Alert type={"danger"}>Please setup email adapter </Alert>
       )}
-      <div className="md:p-10 lg:p-16">
-        <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
-          <div className="w-[250px] h-[66px] inline-block overflow-hidden">
-            {image && (
-              <img
-                src={image}
-                className="object-contain h-full"
-                alt="applogo"
-              />
+      <div>
+        <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
+          <div className="w-[250px] h-[66px] inline-block">
+            {state.hideNav ? (
+              <img src={image} width="100%" alt="" />
+            ) : (
+              <img src={image} width="100%" alt="" />
             )}
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-            <div>
+            <div className="">
               <form onSubmit={handleSubmit}>
                 <h2 className="text-[30px] mt-6">Welcome Back !</h2>
                 <span className="text-[12px] text-[#878787]">
                   Reset Your Password
                 </span>
-                <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
+                <div className="shadow-md rounded my-4">
                   <div className="px-6 py-4">
                     <label className="block text-xs">Email</label>
                     <input
-                      type="email"
+                      type="text"
+                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                       name="email"
-                      className="op-input op-input-bordered op-input-sm w-full"
                       value={state.email}
                       onChange={handleChange}
                       required
@@ -117,16 +99,19 @@ function ForgotPassword() {
                     <hr className="my-2 border-none" />
                   </div>
                 </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold">
-                  <button type="submit" className="op-btn op-btn-primary">
+                <div className="flex justify-between items-center px-4">
+                  <button
+                    type="submit"
+                    className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase"
+                  >
                     Submit
                   </button>
-                  <button
-                    onClick={() => navigate("/", { replace: true })}
-                    className="op-btn op-btn-secondary"
+                  <NavLink
+                    to="/"
+                    className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase"
                   >
                     Login
-                  </button>
+                  </NavLink>
                 </div>
               </form>
             </div>

apps/OpenSign/src/pages/Form.js

@@ -11,15 +11,11 @@ import SignersInput from "../components/shared/fields/SignersInput";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 import { SaveFileSize } from "../constant/saveFileSize";
-import { checkIsSubscribed, getFileName, toDataUrl } from "../constant/Utils";
+import { getFileName, toDataUrl } from "../constant/Utils";
 import { PDFDocument } from "pdf-lib";
 import axios from "axios";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, submitBtn } from "../constant/const";
 import ModalUi from "../primitives/ModalUi";
-import { Tooltip } from "react-tooltip";
-import Upgrade from "../primitives/Upgrade";
-import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
-import Loader from "../primitives/Loader";
 
 // `Form` render all type of Form on this basis of their provided in path
 function Form() {
@@ -51,9 +47,7 @@ const Forms = (props) => {
     TimeToCompleteDays: 15,
     SendinOrder: "false",
     password: "",
-    file: "",
-    remindOnceInEvery: 5,
-    autoreminder: false
+    file: ""
   });
   const [fileupload, setFileUpload] = useState("");
   const [fileload, setfileload] = useState(false);
@@ -65,7 +59,6 @@ const Forms = (props) => {
   const [isPassword, setIsPassword] = useState(false);
   const [isDecrypting, setIsDecrypting] = useState(false);
   const [isCorrectPass, setIsCorrectPass] = useState(true);
-  const [isSubscribe, setIsSubscribe] = useState(false);
   const handleStrInput = (e) => {
     setIsCorrectPass(true);
     setFormData({ ...formData, [e.target.name]: e.target.value });
@@ -76,17 +69,6 @@ const Forms = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.title]);
 
-  useEffect(() => {
-    fetchSubscription();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-  const fetchSubscription = async () => {
-    if (isEnableSubscription) {
-      const getIsSubscribe = await checkIsSubscribed();
-      setIsSubscribe(getIsSubscribe);
-    }
-  };
-
   function getFileAsArrayBuffer(file) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
@@ -400,8 +382,6 @@ const Forms = (props) => {
         if (props.title !== "Sign Yourself") {
           const isChecked = formData.SendinOrder === "false" ? false : true;
           object.set("SendinOrder", isChecked);
-          object.set("AutomaticReminders", formData.autoreminder);
-          object.set("RemindOnceInEvery", parseInt(formData.remindOnceInEvery));
         }
         object.set("URL", fileupload);
         object.set("CreatedBy", Parse.User.createWithoutData(currentUser.id));
@@ -421,6 +401,7 @@ const Forms = (props) => {
           className: "contracts_Users",
           objectId: ExtCls[0].objectId
         });
+
         const res = await object.save();
         if (res) {
           setSigners([]);
@@ -475,19 +456,12 @@ const Forms = (props) => {
           ? "Note to myself"
           : "Please review and sign this document",
       TimeToCompleteDays: 15,
-      SendinOrder: "true",
-      password: "",
-      file: "",
-      remindOnceInEvery: 5,
-      autoreminder: false
+      SendinOrder: "true"
     });
     setFileUpload("");
     setpercentage(0);
     setTimeout(() => setIsReset(false), 50);
   };
-  const handleCancel = () => {
-    navigate("/dashboard/35KBoSgoAK");
-  };
   const handlePasswordSubmit = async (e) => {
     e.preventDefault();
     setIsPassword(false);
@@ -561,11 +535,8 @@ const Forms = (props) => {
       inputFileRef.current.value = ""; // Set file input value to empty string
     }
   };
-  const handleAutoReminder = () => {
-    setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
-  };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
@@ -575,8 +546,16 @@ const Forms = (props) => {
         </Alert>
       )}
       {isSubmit ? (
-        <div className="h-[300px] flex justify-center items-center">
-          <Loader />
+        <div style={{ height: "300px" }}>
+          <div
+            style={{
+              marginLeft: "45%",
+              marginTop: "150px",
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
         <>
@@ -587,30 +566,29 @@ const Forms = (props) => {
           >
             <form onSubmit={handlePasswordSubmit}>
               <div className="px-6 pt-3 pb-2">
-                <label className="mb-2 text-xs text-base-content">
-                  Password
-                </label>
+                <label className="mb-2 text-xs">Password</label>
                 <input
                   type="text"
                   name="password"
                   value={formData.password}
                   onChange={(e) => handleStrInput(e)}
-                  className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                   placeholder="Enter pdf password"
                   required
                 />
-                <p
-                  className={`${
-                    !isCorrectPass
-                      ? "text-red-600"
-                      : "text-transparent pointer-events-none"
-                  } ml-2 text-[11px] `}
-                >
-                  Please provide correct password
-                </p>
+                {!isCorrectPass ? (
+                  <p className="ml-2 text-[11px] text-red-600">
+                    Please provide correct password
+                  </p>
+                ) : (
+                  <p className="ml-2 text-[11px] text-transparent text-red-600">
+                    .
+                  </p>
+                )}
               </div>
-              <div className="px-6 mb-3">
-                <button type="submit" className="op-btn op-btn-primary">
+              <hr />
+              <div className="px-6 my-3">
+                <button type="submit" className={submitBtn}>
                   Submit
                 </button>
               </div>
@@ -626,12 +604,12 @@ const Forms = (props) => {
                     style={{ width: `${percentage}%` }}
                   ></div>
                 </div>
-                <span className="text-base-content text-sm">{percentage}%</span>
+                <span className="text-black text-sm">{percentage}%</span>
               </div>
             )}
             {isDecrypting && (
               <div className="flex items-center gap-x-2">
-                <span className="text-base-content text-sm">
+                <span className="text-black text-sm">
                   Decrypting pdf please wait...
                 </span>
               </div>
@@ -645,13 +623,13 @@ const Forms = (props) => {
               </label>
               {fileupload.length > 0 ? (
                 <div className="flex gap-2 justify-center items-center">
-                  <div className="flex justify-between items-center op-input op-input-bordered op-input-sm w-full text-x text-[13px]">
+                  <div className="flex justify-between items-center px-2 py-2 w-full font-bold rounded border-[1px] border-[#ccc] text-gray-500 bg-white text-[13px]">
                     <div className="break-all">
                       file selected : {getFileName(fileupload)}
                     </div>
                     <div
                       onClick={() => setFileUpload("")}
-                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
+                      className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
                     >
                       <i className="fa-solid fa-xmark"></i>
                     </div>
@@ -664,10 +642,10 @@ const Forms = (props) => {
                   )}
                 </div>
               ) : (
-                <div className="flex gap-2 justify-center items-center ">
+                <div className="flex gap-2 justify-center items-center">
                   <input
                     type="file"
-                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                    className="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                     onChange={(e) => handleFileInput(e)}
                     ref={inputFileRef}
                     accept={
@@ -695,7 +673,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Name"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -705,7 +683,7 @@ const Forms = (props) => {
               <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"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Description}
                 onChange={(e) => handleStrInput(e)}
               />
@@ -723,19 +701,18 @@ const Forms = (props) => {
               </label>
               <input
                 name="Note"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
               />
             </div>
-            {props.title !== "New Template" && (
-              <SelectFolder
-                onSuccess={handleFolder}
-                folderCls={props.Cls}
-                isReset={isReset}
-              />
-            )}
+            <SelectFolder
+              onSuccess={handleFolder}
+              folderCls={props.Cls}
+              isReset={isReset}
+            />
+
             {props.title === "Request Signatures" && (
               <div className="text-xs mt-2">
                 <label className="block">
@@ -745,7 +722,7 @@ const Forms = (props) => {
                 <input
                   type="number"
                   name="TimeToCompleteDays"
-                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -753,156 +730,46 @@ const Forms = (props) => {
               </div>
             )}
             {props.title !== "Sign Yourself" && (
-              <>
-                <div className="text-xs mt-2">
-                  <label className="block">
-                    Send In Order
-                    <a data-tooltip-id="sendInOrder-tooltip" className="ml-1">
-                      <sup>
-                        <i
-                          className="fa-solid fa-question rounded-full"
-                          style={{
-                            borderColor: "#33bbff",
-                            color: "#33bbff",
-                            fontSize: 13,
-                            borderWidth: 1.5,
-                            padding: "1.5px 4px"
-                          }}
-                        ></i>
-                      </sup>
-                    </a>
-                    <Tooltip id="sendInOrder-tooltip" className="z-50">
-                      <div className="max-w-[200px] md:max-w-[450px]">
-                        <p className="font-bold">Send in Order</p>
-                        <p>
-                          Choose how you want the signing requests to be sent to
-                          the document signers:
-                        </p>
-                        <p className="p-[5px]">
-                          <ol className="list-disc">
-                            <li>
-                              <span className="font-bold">Yes:</span>
-                              <span>
-                                Selecting this option will send the signing
-                                request to the first signer initially. Once the
-                                first signer completes their part, the next
-                                signer in the sequence will receive the request.
-                                This process continues until all signers have
-                                signed the document. This method ensures that
-                                the document is signed in a specific order.
-                              </span>
-                            </li>
-                            <li>
-                              <span className="font-bold">No: </span>
-                              <span>
-                                Selecting this option will send the signing
-                                links to all signers simultaneously. Every
-                                signer can sign the document at their
-                                convenience, regardless of whether other signers
-                                have completed their signatures. This method is
-                                faster but does not enforce any signing order
-                                among the participants.
-                              </span>
-                            </li>
-                          </ol>
-                        </p>
-
-                        <p>
-                          Select the option that best suits the needs of your
-                          document processing.
-                        </p>
-                      </div>
-                    </Tooltip>
-                  </label>
-                  <div className="flex items-center gap-2 ml-2 mb-1">
-                    <input
-                      type="radio"
-                      value={"true"}
-                      className="op-radio op-radio-xs"
-                      name="SendinOrder"
-                      checked={formData.SendinOrder === "true"}
-                      onChange={handleStrInput}
-                    />
-                    <div className="text-center">Yes</div>
-                  </div>
-                  <div className="flex items-center gap-2 ml-2 mb-1">
-                    <input
-                      type="radio"
-                      value={"false"}
-                      name="SendinOrder"
-                      className="op-radio op-radio-xs"
-                      checked={formData.SendinOrder === "false"}
-                      onChange={handleStrInput}
-                    />
-                    <div className="text-center">No</div>
-                  </div>
+              <div className="text-xs mt-2">
+                <label className="block">Send In Order</label>
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"true"}
+                    name="SendinOrder"
+                    checked={formData.SendinOrder === "true"}
+                    className=""
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">Yes</div>
                 </div>
-                <div className="text-xs mt-2">
-                  {!isEnableSubscription && (
-                    <PremiumAlertHeader
-                      message={
-                        "Disable Auto reminder is free in beta, this feature will incur a fee later."
-                      }
-                    />
-                  )}
-                  <span
-                    className={
-                      isSubscribe || !isEnableSubscription
-                        ? "font-semibold"
-                        : "font-semibold text-gray-300"
-                    }
-                  >
-                    Auto reminder{"  "}
-                    {!isSubscribe && isEnableSubscription && <Upgrade />}
-                  </span>
-                  <label
-                    className={`${
-                      isSubscribe || !isEnableSubscription
-                        ? "cursor-pointer "
-                        : "pointer-events-none opacity-50"
-                    } relative block items-center mb-0`}
-                  >
-                    <input
-                      type="checkbox"
-                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
-                      checked={formData.autoreminder}
-                      onChange={handleAutoReminder}
-                    />
-                  </label>
+                <div className="flex items-center gap-2 ml-2 mb-1">
+                  <input
+                    type="radio"
+                    value={"false"}
+                    name="SendinOrder"
+                    checked={formData.SendinOrder === "false"}
+                    onChange={handleStrInput}
+                  />
+                  <div className="text-center">No</div>
                 </div>
-                {formData?.autoreminder === true && (
-                  <div className="text-xs mt-2">
-                    <label className="block">
-                      Remind once in every (Days)
-                      <span className="text-red-500 text-[13px]">*</span>
-                    </label>
-                    <input
-                      type="number"
-                      value={formData.remindOnceInEvery}
-                      name="remindOnceInEvery"
-                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                      onChange={handleStrInput}
-                      required
-                    />
-                  </div>
-                )}
-              </>
+              </div>
             )}
-            <div className="flex items-center mt-3 gap-2">
+            <div className="flex items-center mt-3 gap-2 text-white">
               <button
                 className={`${
-                  isSubmit ? "cursor-progress" : ""
-                } op-btn op-btn-primary`}
+                  isSubmit && "cursor-progress"
+                } bg-[#1ab6ce] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 focus:outline-none`}
                 type="submit"
                 disabled={isSubmit}
               >
                 Next
               </button>
               <div
-                className="op-btn op-btn-ghost"
-                onClick={() => handleCancel()}
+                className="cursor-pointer bg-[#188ae2] rounded-sm shadow-md text-[13px] font-semibold uppercase text-white py-1.5 px-2.5 text-center ml-[2px] focus:outline-none"
+                onClick={() => handleReset()}
               >
-                Cancel
+                Reset
               </div>
             </div>
           </form>

apps/OpenSign/src/pages/GenerateToken.js

@@ -4,11 +4,10 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
 import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import Loader from "../primitives/Loader";
 
 function GenerateToken() {
   const navigation = useNavigate();
@@ -110,11 +109,24 @@ function GenerateToken() {
       {copied && <Alert type="success">Copied</Alert>}
       {isErr && <Alert type="danger">Something went wrong!</Alert>}
       {isLoader ? (
-        <div className="flex justify-center items-center h-screen">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
-        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
+        <div className="bg-white flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ API{" "}
@@ -132,32 +144,29 @@ function GenerateToken() {
                 : "w-full flex flex-col p-2 text-sm opacity-20 pointer-events-none select-none"
             }
           >
-            <li className="flex flex-col md:flex-row justify-between items-center border-y-[1px] border-gray-300 break-all py-2">
-              <div className="w-full md:w-[70%] flex-col md:flex-row text-xs md:text-[15px] flex items-center gap-x-5 ">
+            <li
+              className={`flex flex-col md:flex-row  justify-between items-center border-y-[1px] border-gray-300 break-all py-2`}
+            >
+              <div className="w-[70%] flex-col md:flex-row flex items-center gap-5 ">
                 <span className="">Api Token:</span>{" "}
-                <span id="token" className="md:text-end py-2 md:py-0">
-                  <span
-                    className="cursor-pointer"
-                    onClick={() => copytoclipboard(apiToken)}
-                  >
-                    {apiToken ? apiToken : "_____"}
-                  </span>
-                  <button
-                    className="op-btn op-btn-accent op-btn-outline op-btn-sm ml-2"
-                    onClick={() => copytoclipboard(apiToken)}
-                  >
-                    <i className="fa-solid fa-copy"></i>
-                  </button>
+                <span
+                  id="token"
+                  className=" md:text-end cursor-pointer"
+                  onClick={() => copytoclipboard(apiToken)}
+                >
+                  {apiToken ? apiToken : "_____"}
                 </span>
               </div>
               <button
+                type="button"
                 onClick={apiToken ? handleModal : handleSubmit}
-                className="op-btn op-btn-primary"
+                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
               >
                 {apiToken ? "Regenerate Token" : "Generate Token"}
               </button>
             </li>
           </ul>
+
           <div className="flex   items-center justify-center ">
             <button
               type="button"
@@ -166,7 +175,7 @@ function GenerateToken() {
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                 )
               }
-              className="op-btn op-btn-secondary my-2"
+              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
             >
               View Docs
             </button>
@@ -207,7 +216,7 @@ function GenerateToken() {
             handleClose={handleModal}
           >
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-base-content">
+              <div className="text-lg font-normal text-black">
                 Are you sure you want to regenerate token it will expire old
                 token?
               </div>
@@ -215,14 +224,11 @@ function GenerateToken() {
               <div className="flex items-center mt-3 gap-2 text-white">
                 <button
                   onClick={handleSubmit}
-                  className="op-btn op-btn-primary ml-[2px]"
+                  className={submitBtn + "ml-[2px]"}
                 >
                   Yes
                 </button>
-                <button
-                  onClick={handleModal}
-                  className="op-btn op-btn-secondary"
-                >
+                <button onClick={handleModal} className={rejectBtn}>
                   No
                 </button>
               </div>

apps/OpenSign/src/pages/GuestLogin.js

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import "../styles/loginPage.css";
+import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { contractUsers, getAppLogo } from "../constant/Utils";
 import logo from "../assets/images/logo.png";
 import { appInfo } from "../constant/appinfo";
-import Parse from "parse";
-import Loader from "../primitives/Loader";
 
 function GuestLogin() {
   const { id, userMail, contactBookId, base64url } = useParams();
-  const navigate = useNavigate();
+  let navigate = useNavigate();
   const [email, setEmail] = useState(userMail);
   const [OTP, setOTP] = useState("");
   const [EnterOTP, setEnterOtp] = useState(false);
@@ -19,10 +19,9 @@ function GuestLogin() {
   const [appLogo, setAppLogo] = useState("");
   const [documentId, setDocumentId] = useState(id);
   const [contactId, setContactId] = useState(contactBookId);
-  const [sendmail, setSendmail] = useState();
-  const [contact, setContact] = useState({ name: "", phone: "", email: "" });
   useEffect(() => {
     handleServerUrl();
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -53,49 +52,51 @@ function GuestLogin() {
       //split url in array from '/'
       const checkSplit = decodebase64.split("/");
       setDocumentId(checkSplit[0]);
-      setContact((prev) => ({ ...prev, email: checkSplit[1] }));
       setEmail(checkSplit[1]);
-      const contactId = checkSplit?.[2];
-      setSendmail(checkSplit[3]);
-      if (!contactId) {
-        const params = { email: checkSplit[1], docId: checkSplit[0] };
-        try {
-          const linkContactRes = await Parse.Cloud.run(
-            "linkcontacttodoc",
-            params
-          );
-          // console.log("linkContactRes ", linkContactRes);
-          setContactId(linkContactRes?.contactId);
-        } catch (err) {
-          console.log("Err in link ext contact", err);
-        }
-      } else {
-        setContactId(checkSplit[2]);
-      }
+      setContactId(checkSplit[2]);
     }
 
     setIsLoading(false);
   };
 
-  //send email OTP function
-  const SendOtp = async () => {
-    setLoading(true);
-    setEmail(email);
-    try {
-      const params = { email: email.toString(), docId: documentId };
-      const Otp = await Parse.Cloud.run("SendOTPMailV1", params);
-      if (Otp) {
-        setLoading(false);
-        setEnterOtp(true);
-      }
-    } catch (error) {
-      alert("something went wrong!");
-    }
+  const handleChange = (event) => {
+    const { value } = event.target;
+    setOTP(value);
   };
 
-  const handleSendOTPBtn = async (e) => {
-    e.preventDefault();
-    await SendOtp();
+  //send email OTP function
+  const SendOtp = async (e) => {
+    const serverUrl =
+      localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
+    const parseId =
+      localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
+    if (serverUrl && localStorage) {
+      setLoading(true);
+      e.preventDefault();
+      setEmail(email);
+
+      try {
+        let url = `${serverUrl}functions/SendOTPMailV1/`;
+        const headers = {
+          "Content-Type": "application/json",
+          "X-Parse-Application-Id": parseId
+        };
+        let body = {
+          email: email.toString(),
+          docId: documentId
+        };
+        let Otp = await axios.post(url, body, { headers: headers });
+
+        if (Otp) {
+          setLoading(false);
+          setEnterOtp(true);
+        }
+      } catch (error) {
+        alert("something went wrong!");
+      }
+    } else {
+      alert("something went wrong!");
+    }
   };
 
   //verify OTP send on via email
@@ -133,8 +134,7 @@ function GuestLogin() {
             `Parse/${parseId}/currentUser`,
             JSON.stringify(_user)
           );
-          // console.log("contractUserDetails ", contractUserDetails);
-          if (contractUserDetails && contractUserDetails.length > 0) {
+          if (contractUserDetails) {
             localStorage.setItem(
               "Extand_Class",
               JSON.stringify(contractUserDetails)
@@ -146,13 +146,7 @@ function GuestLogin() {
           //save isGuestSigner true in local to handle login flow header in mobile view
           localStorage.setItem("isGuestSigner", true);
           setLoading(false);
-          if (sendmail === "false") {
-            navigate(
-              `/load/recipientSignPdf/${documentId}/${contactId}?sendmail=${sendmail}`
-            );
-          } else {
-            navigate(`/load/recipientSignPdf/${documentId}/${contactId}`);
-          }
+          navigate(`/load/recipientSignPdf/${documentId}/${contactId}`);
         }
       } catch (error) {
         console.log("err ", error);
@@ -161,169 +155,156 @@ function GuestLogin() {
       alert("Please Enter OTP!");
     }
   };
-  const handleUserData = async (e) => {
-    e.preventDefault();
-    const params = { ...contact, docId: documentId };
-    try {
-      setLoading(true);
-      const linkContactRes = await Parse.Cloud.run("linkcontacttodoc", params);
-      // console.log("linkContactRes ", linkContactRes);
-      setContactId(linkContactRes.contactId);
-      setEnterOtp(true);
-      await SendOtp();
-    } catch (err) {
-      setLoading(false);
-      alert("something went wron, please try agian later.");
-      console.log("Err in link ext contact", err);
-    }
-  };
-  const handleInputChange = (e) => {
-    setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
-  };
+
   return (
-    <div className="p-[2rem]">
+    <div style={{ padding: "2rem", background: "white" }}>
       {isLoading ? (
-        <div className="flex flex-col justify-center items-center h-[100vh]">
-          <Loader />
-          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100vh",
+            flexDirection: "column"
+          }}
+        >
+          <img
+            alt="no img"
+            src={loader}
+            style={{ width: "80px", height: "80px" }}
+          />
+          <span style={{ fontSize: "13px", color: "gray" }}>
+            {isLoading.message}
+          </span>
         </div>
       ) : (
-        <div className="m-1 md:m-2 p-[30px] text-base-content bg-base-100 op-card shadow-md">
-          <div className="md:w-[250px] md:h-[66px] inline-block overflow-hidden mt-2 mb-11">
-            {appLogo && (
-              <img src={appLogo} className="object-contain h-full" alt="logo" />
-            )}
+        <div
+          style={{
+            margin: "10px",
+            border: "0.5px solid #c5c7c9",
+            padding: "30px",
+            boxShadow: "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"
+          }}
+        >
+          <div className="main_head">
+            <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+              {appLogo && (
+                <img
+                  src={appLogo}
+                  className="object-contain h-full"
+                  alt="logo"
+                />
+              )}
+            </div>
           </div>
-          {contactId ? (
-            <>
-              {!EnterOTP ? (
-                <div className="w-full md:w-[50%] text-base-content">
-                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
-                  <legend className="text-[12px] text-[#878787] mt-2">
-                    Verification code is sent to your email
-                  </legend>
-                  <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
+
+          {!EnterOTP ? (
+            <div className="row">
+              <div className="col-sm-6 KLO">
+                <span className="welcomeText">Welcome Back !</span>
+                <br />
+                <span className="KNLO">
+                  Verification code is sent to your email
+                </span>
+                <div className="card card-box" style={{ borderRadius: "0px" }}>
+                  <div className="card-body">
                     <input
                       type="email"
                       name="mobile"
                       value={email}
-                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       disabled
+                      className="loginInput"
                     />
-                  </div>
-                  <div className="mt-2">
-                    <button
-                      className="op-btn op-btn-primary"
-                      onClick={(e) => handleSendOTPBtn(e)}
-                      disabled={loading}
-                    >
-                      {loading ? "Loading..." : "Send OTP"}
-                    </button>
+                    <br />
                   </div>
                 </div>
-              ) : (
-                <form
-                  className="w-full md:w-[50%] text-base-content"
-                  onSubmit={VerifyOTP}
-                >
-                  <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
-                  <legend className="text-[12px] text-[#878787] mt-2">
-                    You will get a OTP via Email
-                  </legend>
-                  <div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 op-card my-2 shadow-md">
-                    <p className="text-sm">Enter Verification Code</p>
+                <div className="btnContainer">
+                  {loading ? (
+                    <button
+                      type="button"
+                      style={{
+                        background: themeColor,
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                      disabled
+                    >
+                      <span
+                        className="spinner-border spinner-border-sm "
+                        role="status"
+                        aria-hidden="true"
+                      ></span>
+                      Loading...
+                    </button>
+                  ) : (
+                    <button
+                      className="verifyBtn"
+                      style={{
+                        background: themeColor,
+                        color: "white",
+                        marginLeft: "0px !important"
+                      }}
+                      onClick={(e) => SendOtp(e)}
+                    >
+                      Send OTP
+                    </button>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="row">
+              <div className="col-sm-6 KLO">
+                <span className="welcomeText">Welcome Back !</span>
+                <br />
+                <span className="KNLO">You will get a OTP via Email</span>
+                <div className="card card-box">
+                  <div className="card-body">
+                    <label>Enter Verification Code</label>
                     <input
                       type="number"
-                      className="mt-2 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                      className="loginInput"
                       name="OTP"
                       value={OTP}
-                      onChange={(e) => setOTP(e.target.value)}
+                      onChange={handleChange}
                     />
+
+                    <br />
                   </div>
-                  <div className="mt-2">
+                </div>
+                <div>
+                  {loading ? (
                     <button
-                      className="op-btn op-btn-primary"
-                      type="submit"
-                      disabled={loading}
+                      style={{
+                        background: themeColor,
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                      type="button"
+                      disabled
                     >
-                      {loading ? "Loading..." : "Verify"}
+                      <span
+                        className="spinner-border spinner-border-sm "
+                        role="status"
+                        aria-hidden="true"
+                      ></span>
+                      Loading...
                     </button>
-                  </div>
-                </form>
-              )}
-            </>
-          ) : (
-            <div className="w-full md:w-[50%] text-base-content">
-              <h1 className="text-2xl md:text-[30px]">Welcome</h1>
-              <legend className="text-[12px] text-[#878787] mt-2">
-                Provide your details
-              </legend>
-              <form
-                className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md"
-                onSubmit={handleUserData}
-              >
-                <div className="mb-2">
-                  <label
-                    htmlFor="name"
-                    className="block text-xs text-gray-700 font-semibold"
-                  >
-                    Name
-                    <span className="text-[red] text-[13px]"> *</span>
-                  </label>
-                  <input
-                    type="text"
-                    name="name"
-                    value={contact.name}
-                    onChange={handleInputChange}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                    disabled={loading}
-                    required
-                  />
+                  ) : (
+                    <button
+                      type="button"
+                      onClick={(e) => VerifyOTP(e)}
+                      style={{
+                        background: themeColor,
+                        color: "white"
+                      }}
+                      className="verifyBtn"
+                    >
+                      Verify
+                    </button>
+                  )}
                 </div>
-                <div className="mb-2">
-                  <label
-                    htmlFor="email"
-                    className="block text-xs text-gray-700 font-semibold"
-                  >
-                    Email
-                    <span className="text-[red] text-[13px]"> *</span>
-                  </label>
-                  <input
-                    type="email"
-                    name="email"
-                    value={contact.email}
-                    onChange={handleInputChange}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                    required
-                    disabled
-                  />
-                </div>
-                <div className="mb-2">
-                  <label
-                    htmlFor="phone"
-                    className="block text-xs text-gray-700 font-semibold"
-                  >
-                    Phone
-                  </label>
-                  <input
-                    type="text"
-                    name="phone"
-                    value={contact.phone}
-                    onChange={handleInputChange}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                    disabled={loading}
-                  />
-                </div>
-                <div className="mt-2 flex justify-start">
-                  <button
-                    type="submit"
-                    className="op-btn op-btn-primary"
-                    disabled={loading}
-                  >
-                    {loading ? "Loading..." : "Next"}
-                  </button>
-                </div>
-              </form>
+              </div>
             </div>
           )}
         </div>

apps/OpenSign/src/pages/Login.js

@@ -10,13 +10,16 @@ import { NavLink, useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription } from "../constant/const";
+import {
+  isEnableSubscription,
+  modalCancelBtnColor,
+  modalSubmitBtnColor
+} from "../constant/const";
 import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
-import { fetchSubscription, getAppLogo, openInNewTab } from "../constant/Utils";
-import Loader from "../primitives/Loader";
+import { fetchSubscription, getAppLogo } from "../constant/Utils";
 function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -42,7 +45,6 @@ function Login() {
   });
   const [isModal, setIsModal] = useState(false);
   const [image, setImage] = useState();
-  const [isLoginSSO, setIsLoginSSO] = useState(false);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -261,7 +263,7 @@ function Login() {
                                         const LocalUserDetails = {
                                           name: results[0].get("Name"),
                                           email: results[0].get("Email"),
-                                          phone: results[0]?.get("Phone") || "",
+                                          phone: results[0].get("Phone"),
                                           company: results[0].get("Company")
                                         };
                                         localStorage.setItem(
@@ -315,7 +317,7 @@ function Login() {
                                       const LocalUserDetails = {
                                         name: _user.name,
                                         email: email,
-                                        phone: _user?.phone || ""
+                                        phone: _user.phone
                                         // company: results.get("Company"),
                                       };
                                       localStorage.setItem(
@@ -866,7 +868,7 @@ function Login() {
                               const LocalUserDetails = {
                                 name: results[0].get("Name"),
                                 email: results[0].get("Email"),
-                                phone: results[0]?.get("Phone") || "",
+                                phone: results[0].get("Phone"),
                                 company: results[0].get("Company")
                               };
                               localStorage.setItem(
@@ -903,7 +905,7 @@ function Login() {
                             const LocalUserDetails = {
                               name: results[0].get("Name"),
                               email: results[0].get("Email"),
-                              phone: results[0]?.get("Phone") || ""
+                              phone: results[0].get("Phone")
                               // company: results.get("Company"),
                             };
                             localStorage.setItem(
@@ -980,7 +982,7 @@ function Login() {
           userDetails: {
             name: userInformation.name,
             email: userInformation.email,
-            phone: userInformation?.phone || "",
+            phone: userInformation.phone,
             role: "contracts_User",
             company: userDetails.Company,
             jobTitle: userDetails.Destination
@@ -992,7 +994,7 @@ function Login() {
           const LocalUserDetails = {
             name: userInformation.name,
             email: userInformation.email,
-            phone: userInformation?.phone || "",
+            phone: userInformation.phone,
             company: userDetails.Company,
             jobTitle: userDetails.JobTitle
           };
@@ -1014,9 +1016,8 @@ function Login() {
 
   const handleCloseModal = () => {
     setIsModal(false);
-    if (Parse?.User?.current()) {
-      Parse.User.logOut();
-    }
+    Parse.User.logOut();
+
     let appdata = localStorage.getItem("userSettings");
     let applogo = localStorage.getItem("appLogo");
     let appName = localStorage.getItem("appName");
@@ -1039,172 +1040,201 @@ function Login() {
     localStorage.setItem("baseUrl", baseUrl);
     localStorage.setItem("parseAppId", appid);
   };
-
-  // `handleSignInWithSSO` is trigger when user click sign in with sso and open sso authorize endpoint
-  const handleSignInWithSSO = () => {
-    if (isLoginSSO === false) {
-      if (state?.email) {
-        setIsLoginSSO(true);
-        const encodedEmail = encodeURIComponent(state.email);
-        const clientUrl = window.location.origin;
-        const domain = state.email.split("@")?.pop();
-        const ssoApiUrl =
-          process.env.SSO_API_URL || "https://sso.opensignlabs.com/api";
-        openInNewTab(
-          `${ssoApiUrl}/oauth/authorize?response_type=code&provider=saml&tenant=${domain}&product=OpenSign&redirect_uri=${clientUrl}/sso&state=${encodedEmail}`,
-          "_self"
-        );
-      } else {
-        alert("Please provide email.");
-      }
-    }
-  };
   return (
-    <div>
+    <div className="bg-white">
       <Title title={"Login Page"} />
       {state.loading && (
         <div
           aria-live="assertive"
-          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50"
+          style={{
+            position: "fixed",
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            top: 0,
+            left: 0,
+            zIndex: 2
+          }}
         >
-          <Loader />
+          <div
+            role="status"
+            style={{
+              position: "fixed",
+              fontSize: "50px",
+              color: "#3ac9d6",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)"
+            }}
+            className="loader-37"
+          >
+            <span className="sr-only">Loading...</span>
+          </div>
         </div>
       )}
       {appInfo && appInfo.appId ? (
         <>
-          <div
-            aria-labelledby="loginHeading"
-            role="region"
-            className="md:p-10 lg:p-16"
-          >
-            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+          <div aria-labelledby="loginHeading" role="region">
+            <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
               <div className="w-[250px] h-[66px] inline-block overflow-hidden">
                 {image && (
                   <img
                     src={image}
                     className="object-contain h-full"
-                    alt="applogo"
+                    alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
                   />
                 )}
               </div>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
                 <div>
-                  <form onSubmit={handleSubmit} aria-label="Login Form">
-                    <h1 className="text-[30px] mt-6">Welcome Back!</h1>
-                    <fieldset>
-                      <legend className="text-[12px] text-[#878787]">
-                        Login to your account
-                      </legend>
-                      <div className="w-full px-6 py-3 my-1 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
-                        <label className="block text-xs" htmlFor="email">
-                          Email
-                        </label>
-                        <input
-                          id="email"
-                          type="email"
-                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                          name="email"
-                          value={state.email}
-                          onChange={handleChange}
-                          required
-                        />
-                        <hr className="my-1 border-none" />
-                        {!isLoginSSO && (
-                          <>
-                            <label className="block text-xs" htmlFor="password">
-                              Password
-                            </label>
-                            <div className="relative">
-                              <input
-                                id="password"
-                                type={
-                                  state.passwordVisible ? "text" : "password"
-                                }
-                                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                                name="password"
-                                value={state.password}
-                                onChange={handleChange}
-                                required
-                              />
-                              <span
-                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
-                                onClick={togglePasswordVisibility}
-                              >
-                                {state.passwordVisible ? (
-                                  <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
-                                ) : (
-                                  <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
-                                )}
-                              </span>
-                            </div>
-                          </>
-                        )}
-                        <div className="relative mt-1">
+                  <div>
+                    <form onSubmit={handleSubmit} aria-label="Login Form">
+                      <h1 className="text-[30px] mt-6">Welcome Back!</h1>
+                      <fieldset>
+                        <legend className="text-[12px] text-[#878787]">
+                          Login to your account
+                        </legend>
+                        <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
+                          <label className="block text-xs" htmlFor="email">
+                            Username
+                          </label>
+                          <input
+                            id="email"
+                            type="text"
+                            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                            name="email"
+                            value={state.email}
+                            onChange={handleChange}
+                            required
+                          />
+                          <hr className="my-2 border-none" />
+                          <label className="block text-xs" htmlFor="password">
+                            Password
+                          </label>
+                          <div className="relative">
+                            <input
+                              id="password"
+                              type={state.passwordVisible ? "text" : "password"}
+                              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                              name="password"
+                              value={state.password}
+                              onChange={handleChange}
+                              required
+                            />
+                            <span
+                              className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
+                                state.passwordVisible
+                                  ? "text-[#007bff]"
+                                  : "text-black"
+                              }`}
+                              onClick={togglePasswordVisibility}
+                            >
+                              {state.passwordVisible ? (
+                                <i className="fa fa-eye-slash text-xs pb-1" /> // Close eye icon
+                              ) : (
+                                <i className="fa fa-eye text-xs pb-1 " /> // Open eye icon
+                              )}
+                            </span>
+                          </div>
+                        </div>
+                      </fieldset>
+                      <div className="flex flex-row justify-between items-center ml-4 py-2">
+                        <div>
+                          <label
+                            className="form-check-label inline-block cursor-pointer"
+                            htmlFor="rememberpassword"
+                          >
+                            <input
+                              type="checkbox"
+                              className="form-check-input mr-1"
+                              value=""
+                              id="rememberpassword"
+                            />
+                            <span className="text-[13px]">
+                              Remember Password
+                            </span>
+                          </label>
+                        </div>
+                        <div>
                           <NavLink
                             to="/forgetpassword"
-                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
+                            className="text-[13px] underline focus:outline-none focus:ring-2 focus:ring-blue-600"
                           >
-                            Forgot Password?
+                            Forgot Password ?
                           </NavLink>
                         </div>
                       </div>
-                    </fieldset>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
-                      <button
-                        type="submit"
-                        className="op-btn op-btn-primary"
-                        disabled={state.loading}
-                      >
-                        {state.loading ? "Loading..." : "Login"}
-                      </button>
-                      <button
-                        type="button"
-                        className="op-btn op-btn-accent"
-                        disabled={state.loading}
-                        onClick={() =>
-                          navigate(
+                      <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                        <button
+                          type="submit"
+                          className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow outline-none uppercase focus:ring-2 focus:ring-blue-600"
+                          disabled={state.loading}
+                        >
+                          {state.loading ? "Loading..." : "Login"}
+                        </button>
+                        <NavLink
+                          className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
+                          to={
                             location.search
                               ? "/signup" + location.search
                               : "/signup"
-                          )
-                        }
-                      >
-                        Create Account
-                      </button>
-                    </div>
-                  </form>
-                  {(appInfo.googleClietId || isEnableSubscription) && (
-                    <div className="op-divider my-4 text-sm">OR</div>
-                  )}
-                  <div className="flex flex-col justify-center items-center gap-y-3">
-                    {/* {appInfo?.fbAppId && (
+                          }
+                          style={width < 768 ? { textAlign: "center" } : {}}
+                        >
+                          Create Account
+                        </NavLink>
+                      </div>
+                    </form>
+                    <br />
+                    {(appInfo.fbAppId || appInfo.googleClietId) && (
+                      <div className="text-sm flex justify-center items-center">
+                        <hr className="border-[1px] border-gray-300 w-full" />
+                        <span className="px-2 text-gray-500 cursor-default">
+                          OR
+                        </span>
+                        <hr className="border-[1px] border-gray-300 w-full" />
+                      </div>
+                    )}
+                    <br />
+                    <div
+                      style={{
+                        textAlign: "center",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {/* {appInfo.fbAppId && appInfo.fbAppId !== "" ? (
                       <LoginFacebook
                         FBCred={appInfo.fbAppId}
                         thirdpartyLoginfn={thirdpartyLoginfn}
                         thirdpartyLoader={state.thirdpartyLoader}
                         setThirdpartyLoader={setThirdpartyLoader}
                       />
-                    )} */}
-                    {appInfo?.googleClietId && (
-                      <GoogleSignInBtn
-                        GoogleCred={appInfo.googleClietId}
-                        thirdpartyLoginfn={thirdpartyLoginfn}
-                        thirdpartyLoader={state.thirdpartyLoader}
-                        setThirdpartyLoader={setThirdpartyLoader}
-                      />
-                    )}
-                    {isEnableSubscription && (
-                      <div
-                        className="cursor-pointer border-[1px] border-gray-300 rounded px-[40px] py-2 font-semibold text-sm hover:border-[#d2e3fc] hover:bg-[#ecf3feb7]"
-                        onClick={() => handleSignInWithSSO()}
-                      >
-                        Sign in with SSO
-                      </div>
-                    )}
+                    ) : null} */}
+                    </div>
+                    <div style={{ margin: "10px 0" }}></div>
+                    <div
+                      style={{
+                        textAlign: "center",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
+                      }}
+                    >
+                      {appInfo.googleClietId && appInfo.googleClietId !== "" ? (
+                        <GoogleSignInBtn
+                          GoogleCred={appInfo.googleClietId}
+                          thirdpartyLoginfn={thirdpartyLoginfn}
+                          thirdpartyLoader={state.thirdpartyLoader}
+                          setThirdpartyLoader={setThirdpartyLoader}
+                        />
+                      ) : null}
+                    </div>
                   </div>
                 </div>
                 {width >= 768 && (
-                  <div className="place-self-center">
+                  <div className="self-center">
                     <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
                       <img
                         src={login_img}
@@ -1219,18 +1249,18 @@ function Login() {
             <Alert type={state.alertType}>{state.alertMsg}</Alert>
           </div>
           <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
-            <form className="px-4 py-3 text-base-content">
+            <form className="px-4 py-3">
               <div className="mb-3">
                 <label
                   htmlFor="Company"
                   style={{ display: "flex" }}
                   className="block text-xs text-gray-700 font-semibold"
                 >
-                  Company <span className="text-[red] text-[13px]">*</span>
+                  Company <span style={{ fontSize: 13, color: "red" }}>*</span>
                 </label>
                 <input
                   type="text"
-                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                   id="Company"
                   value={userDetails.Company}
                   onChange={(e) =>
@@ -1249,11 +1279,11 @@ function Login() {
                   className="block text-xs text-gray-700 font-semibold"
                 >
                   Job Title
-                  <span className="text-[red] text-[13px]">*</span>
+                  <span style={{ fontSize: 13, color: "red" }}>*</span>
                 </label>
                 <input
                   type="text"
-                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                   id="JobTitle"
                   value={userDetails.Destination}
                   onChange={(e) =>
@@ -1265,18 +1295,23 @@ function Login() {
                   required
                 />
               </div>
-              <div className="mt-4 gap-2 flex flex-row">
+              <div className="mt-4">
                 <button
                   type="button"
-                  className="op-btn op-btn-primary"
+                  className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
                   onClick={(e) => handleSubmitbtn(e)}
+                  style={{
+                    marginRight: 10,
+                    backgroundColor: modalSubmitBtnColor
+                  }}
                 >
                   Login
                 </button>
                 <button
                   type="button"
-                  className="op-btn op-btn-ghost"
+                  className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
                   onClick={handleCloseModal}
+                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
                 >
                   Cancel
                 </button>
@@ -1286,11 +1321,15 @@ function Login() {
         </>
       ) : (
         <div
-          aria-live="assertive"
-          className="fixed w-full h-full flex justify-center items-center z-50"
-        >
-          <Loader />
-        </div>
+          style={{
+            position: "fixed",
+            fontSize: "50px",
+            color: "#3ac9d6",
+            top: "50%",
+            left: "45%"
+          }}
+          className="loader-37"
+        ></div>
       )}
     </div>
   );

apps/OpenSign/src/pages/Managesign.js

@@ -6,8 +6,6 @@ import { toDataUrl } from "../constant/Utils";
 import Parse from "parse";
 import { appInfo } from "../constant/appinfo";
 import { SaveFileSize } from "../constant/saveFileSize";
-import Alert from "../primitives/Alert";
-import Loader from "../primitives/Loader";
 const ManageSign = () => {
   const appName = appInfo.appname;
   const [penColor, setPenColor] = useState("blue");
@@ -19,7 +17,7 @@ const ManageSign = () => {
   const [isvalue, setIsValue] = useState(false);
   const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
-  const [isAlert, setIsAlert] = useState({ type: "success", message: "" });
+  const [isSuccess, setIsSuccess] = useState(false);
   const [Initials, setInitials] = useState("");
   const [isInitials, setIsInitials] = useState(false);
   const [id, setId] = useState("");
@@ -187,20 +185,12 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsAlert({
-          type: "success",
-          message: "Signature saved successfully."
-        });
-        setTimeout(() => setIsAlert({}), 2000);
+        setIsSuccess(true);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        setIsAlert({
-          type: "danger",
-          message: `${err.message}`
-        });
-        setTimeout(() => setIsAlert({}), 2000);
+        alert(`${err.message}`);
       }
     } else {
       try {
@@ -211,20 +201,12 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsAlert({
-          type: "success",
-          message: "Signature saved successfully."
-        });
-        setTimeout(() => setIsAlert({}), 2000);
+        setIsSuccess(true);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        setIsAlert({
-          type: "success",
-          message: `${err.message}`
-        });
-        setTimeout(() => setIsAlert({}), 2000);
+        alert(`${err.message}`);
       }
     }
   };
@@ -242,13 +224,24 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
+    <div className="relative h-full bg-white flex shadow rounded overflow-auto">
       {isLoader && (
-        <div className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
-          <Loader />
+        <div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center">
+          <div
+            style={{ color: "#3dd3e0" }}
+            className="loader-37 text-[45px]"
+          ></div>
+        </div>
+      )}
+      {isSuccess && (
+        <div
+          className="alert alert-success successBox"
+          role="alert"
+          onAnimationEnd={() => setIsSuccess(false)}
+        >
+          Signature saved successfully!
         </div>
       )}
-      {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       <div
         className="mainDiv"
         style={{
@@ -256,13 +249,39 @@ const ManageSign = () => {
           paddingRight: "10px"
         }}
       >
-        <div className="m-[20px]">
-          <div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
+        <div style={{ margin: 20 }}>
+          <div
+            style={{
+              fontWeight: "700",
+              fontSize: 15,
+              color: "#000",
+              paddingBottom: 8
+            }}
+          >
+            My Signature
+          </div>
           <div className="signBlock mt-4">
             <div>
-              <div className="relative">
-                <div className="flex flex-row justify-between w-1/2 pl-[10px]">
-                  <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]">
+              <div style={{ position: "relative" }}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "space-between",
+                    width: "50%",
+                    paddingLeft: 10
+                  }}
+                >
+                  <div
+                    style={{
+                      display: "flex",
+                      flexDirection: "row",
+                      justifyContent: "space-around",
+                      alignItems: "center",
+                      gap: 10,
+                      marginBottom: 10
+                    }}
+                  >
                     <>
                       <span
                         onClick={() => handleSignatureBtn()}
@@ -288,14 +307,24 @@ const ManageSign = () => {
                     />
                   </div>
                 </div>
-                <div className="relative">
+                <div style={{ position: "relative" }}>
                   <div>
                     {image ? (
-                      <div className="signatureCanvas relative border-[2px] border-[#888]">
+                      <div
+                        style={{
+                          position: "relative",
+                          border: "2px solid #888"
+                        }}
+                        className="signatureCanvas"
+                      >
                         <img
                           alt="preview image"
                           src={image}
-                          className="w-full h-full object-contain"
+                          style={{
+                            width: "100%",
+                            height: "100%",
+                            objectFit: "contain"
+                          }}
                         />
                       </div>
                     ) : (
@@ -337,10 +366,10 @@ const ManageSign = () => {
                                       key === 0 && penColor === "blue"
                                         ? "2px solid blue"
                                         : key === 1 && penColor === "red"
-                                          ? "2px solid red"
-                                          : key === 2 && penColor === "black"
-                                            ? "2px solid black"
-                                            : "2px solid white"
+                                        ? "2px solid red"
+                                        : key === 2 && penColor === "black"
+                                        ? "2px solid black"
+                                        : "2px solid white"
                                   }}
                                   onClick={() => {
                                     if (key === 0) {
@@ -445,10 +474,10 @@ const ManageSign = () => {
                                   key === 0 && initialPen === "blue"
                                     ? "2px solid blue"
                                     : key === 1 && initialPen === "red"
-                                      ? "2px solid red"
-                                      : key === 2 && initialPen === "black"
-                                        ? "2px solid black"
-                                        : "2px solid white"
+                                    ? "2px solid red"
+                                    : key === 2 && initialPen === "black"
+                                    ? "2px solid black"
+                                    : "2px solid white"
                               }}
                               onClick={() => {
                                 if (key === 0) {
@@ -480,11 +509,20 @@ const ManageSign = () => {
                   </div>
                 </div>
               </div>
+              {/* {!warning && (
+                <div className="warning signWarning" style={{ fontSize: 12 }}>
+                  <i
+                    className="fas fa-exclamation-circle"
+                    style={{ color: "#fab005", fontSize: 15 }}
+                  ></i>{" "}
+                  Please upload signature/Image
+                </div>
+              )} */}
             </div>
           </div>
           <div style={{ paddingTop: 10 }}>
             <button
-              className="op-btn op-btn-primary"
+              className="customBtn successBtn"
               onClick={(e) => handleSubmit(e)}
             >
               save

apps/OpenSign/src/pages/Opensigndrive.js

@@ -1,6 +1,7 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
-import { iconColor } from "../constant/const";
+import loader from "../assets/images/loader2.gif";
+import { themeColor, iconColor } from "../constant/const";
 import { getDrive } from "../constant/Utils";
 import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
@@ -9,15 +10,27 @@ import ModalUi from "../primitives/ModalUi";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import Tour from "reactour";
 import axios from "axios";
-import Loader from "../primitives/Loader";
 
 const DriveBody = React.lazy(
   () => import("../components/opensigndrive/DriveBody")
 );
-const AppLoader = () => {
+const Loader = () => {
   return (
-    <div className="h-[100vh] flex justify-center items-center">
-      <Loader />
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }}
+    >
+      <div
+        style={{
+          fontSize: "45px",
+          color: "#3dd3e0"
+        }}
+        className="loader-37"
+      ></div>
     </div>
   );
 };
@@ -266,8 +279,7 @@ function Opensigndrive() {
     setNewFolderName(value);
   };
   //function for create folder
-  const handleAddFolder = async (e) => {
-    e.preventDefault();
+  const handleAddFolder = async () => {
     if (newFolderName) {
       setIsFolderLoader(true);
       const getParentObjId = folderName[folderName.length - 1];
@@ -288,7 +300,6 @@ function Opensigndrive() {
         const exsitQuery = new Parse.Query(foldercls);
         exsitQuery.equalTo("Name", newFolderName);
         exsitQuery.equalTo("Type", "Folder");
-        exsitQuery.notEqualTo("IsArchive", true);
         if (parentId) {
           exsitQuery.equalTo("Folder", folderPtr);
         }
@@ -438,10 +449,21 @@ function Opensigndrive() {
         <React.Fragment key={id}>
           <span
             onClick={() => handleRoute(id, folderData)}
-            className="text-[#a64b4e] font-normal cursor-pointer"
+            style={{
+              color: "#a64b4e",
+              fontWeight: "400",
+              cursor: "pointer"
+            }}
           >
             {data.name}
-            <span className="text-[#a64b4e] font-extralight cursor-pointer mx-[4px]">
+            <span
+              style={{
+                color: "#a64b4e",
+                fontWeight: "200",
+                cursor: "pointer",
+                margin: "0 4px"
+              }}
+            >
               &gt;
             </span>
           </span>
@@ -522,290 +544,411 @@ function Opensigndrive() {
     }
   }
   return (
-    <div className="bg-base-100 text-base-content rounded-xl w-full">
+    <div style={{ backgroundColor: "white" }} className="folderComponent">
       <Title title={"OpenSign™ Drive"} drive={true} />
-      <ModalUi
-        isOpen={isAlert.isShow}
-        title={"Alert"}
-        handleClose={() => {
-          setIsAlert({
-            isShow: false,
-            alertMessage: ""
-          });
-        }}
-      >
-        <div className="h-full p-[20px] pb-[15px]">
-          <p>{isAlert.alertMessage}</p>
-          <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
-          <button
-            onClick={() =>
-              setIsAlert({
-                isShow: false,
-                alertMessage: ""
-              })
-            }
-            type="button"
-            className="op-btn op-btn-neutral op-btn-sm"
-          >
-            Close
-          </button>
-        </div>
-      </ModalUi>
-      <ModalUi
-        isOpen={isFolder}
-        title={"Add New Folder"}
-        handleClose={oncloseFolder}
-      >
-        <div className="h-full p-[20px] pt-[10px] pb-[15px]">
-          {folderLoader ? (
-            <div className="h-[200px] flex justify-center items-center">
-              <Loader />
-            </div>
-          ) : (
-            <form
-              onSubmit={handleAddFolder}
-              className="flex flex-col text-base-content"
-            >
-              <label className="py-[8px] text-[15px] font-[400] mb-0">
-                Name
-                <span className="text-[red]">*</span>
-              </label>
-              <input
-                required
-                className="op-input op-input-bordered op-input-sm"
-                type="text"
-                value={newFolderName}
-                onChange={(e) => handleFolderName(e)}
-              />
-              <span className="text-[red] text-[12px] mt-[6px]">{error}</span>
-              <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-              <div className="flex flex-row">
-                <button type="submit" className="op-btn op-btn-primary">
-                  Add
-                </button>
-                <button
-                  type="button"
-                  className="op-btn op-btn-ghost ml-1"
-                  onClick={oncloseFolder}
-                >
-                  Close
-                </button>
-              </div>
-            </form>
-          )}
-        </div>
-      </ModalUi>
-      {isLoading.isLoad ? (
-        <div className="flex flex-col justify-center items-center h-[100vh] w-full">
-          <Loader />
-          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
-        </div>
-      ) : handleError ? (
-        <div className="flex justify-center items-center h-[100vh] w-full">
-          <span className="text-[20px] text-[gray]">{handleError}</span>
-        </div>
-      ) : (
-        <>
-          <div className="flex flex-row justify-between items-center px-[25px] pt-[20px]">
-            {tourData && (
-              <Tour
-                onRequestClose={closeTour}
-                steps={tourData}
-                isOpen={isTour}
-                closeWithMask={false}
-                scrollOffset={-100}
-                rounded={5}
-              />
-            )}
+
+      <div>
+        <ModalUi
+          headerColor={"#dc3545"}
+          isOpen={isAlert.isShow}
+          title={"Alert"}
+          handleClose={() => {
+            setIsAlert({
+              isShow: false,
+              alertMessage: ""
+            });
+          }}
+        >
+          <div style={{ height: "100%", padding: 20 }}>
+            <p>{isAlert.alertMessage}</p>
+
             <div
-              data-tut="reactourFirst"
-              onMouseEnter={(e) => handleMouseEnter(e)}
-              ref={scrollRef}
-              className="w-full whitespace-nowrap cursor-pointer select-none overflow-x-auto"
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginTop: "15px",
+                marginBottom: "15px"
+              }}
+            ></div>
+            <button
+              onClick={() =>
+                setIsAlert({
+                  isShow: false,
+                  alertMessage: ""
+                })
+              }
+              type="button"
+              className="finishBtn cancelBtn"
             >
-              {handleFolderTab(folderName)}
-            </div>
-            <div className="dropMenuBD">
+              Close
+            </button>
+          </div>
+        </ModalUi>
+        <ModalUi
+          isOpen={isFolder}
+          title={"Add New Folder"}
+          handleClose={oncloseFolder}
+        >
+          <div style={{ height: "100%", padding: 20 }}>
+            {folderLoader ? (
               <div
-                id="folder-menu"
-                className={
-                  isNewFol ? "dropdown show dropDownStyle" : "dropdown"
-                }
-                onClick={() => setIsNewFol(!isNewFol)}
+                style={{
+                  height: "200px",
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center"
+                }}
               >
-                <div className="sort" data-tut="reactourSecond">
-                  <i
-                    className="fa fa-plus-square"
-                    aria-hidden="true"
-                    style={{ fontSize: "25px", color: `${iconColor}` }}
-                  ></i>
-                </div>
-                <div
-                  className={isNewFol ? "dropdown-menu show" : "dropdown-menu"}
-                  aria-labelledby="dropdownMenuButton"
-                  aria-expanded={isNewFol ? "true" : "false"}
-                >
-                  <div className="flex flex-col">
-                    <span
-                      className="dropdown-item itemColor"
-                      onClick={() => setIsFolder(true)}
-                    >
-                      <i className="fa fa-plus mr-[5px]" aria-hidden="true"></i>
-                      Create folder
-                    </span>
-                    <span
-                      className="dropdown-item itemColor"
-                      onClick={() => navigate("/form/sHAnZphf69")}
-                    >
-                      <i className="fas fa-pen-nib mr-[5px"></i>
-                      Sign Yourself
-                    </span>
-                    <span
-                      className="dropdown-item itemColor"
-                      onClick={() => navigate("/form/8mZzFxbG1z")}
-                    >
-                      <i className="fa fa-file-signature mr-[5px"></i>
-                      Request Signatures
-                    </span>
-                  </div>
-                </div>
+                <img
+                  alt="loader img"
+                  src={loader}
+                  style={{ width: "50px", height: "50px" }}
+                />
+                <span style={{ fontSize: "13px", color: "gray" }}>
+                  Loading...
+                </span>
               </div>
-              <div
-                id="menu-container"
-                className={isShowSort ? "dropdown show" : "dropdown"}
-                onClick={() => setIsShowSort(!isShowSort)}
+            ) : (
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  handleAddFolder();
+                }}
+                style={{ display: "flex", flexDirection: "column" }}
               >
-                <div
-                  data-tut="reactourThird"
-                  className="sort "
-                  data-toggle="dropdown"
+                <label
+                  style={{
+                    margin: "10px 0px 10px 0px",
+                    fontSize: "15px",
+                    fontWeight: "400"
+                  }}
                 >
-                  <i
-                    className="fa fa-sort-amount-asc mr-[5px] text-[14px]"
-                    aria-hidden="true"
-                    style={{ color: `${iconColor}` }}
-                  ></i>
-                  <span style={{ fontSize: "15px", color: `${iconColor}` }}>
-                    {selectedSort}
-                  </span>
-                </div>
+                  Name
+                  <span style={{ color: "red" }}>*</span>
+                </label>
+
+                <input
+                  required
+                  className="form-control inputStyle"
+                  type="text"
+                  value={newFolderName}
+                  onChange={(e) => handleFolderName(e)}
+                  // className="addFolderInput"
+                />
+                <span
+                  style={{ color: "red", fontSize: "12px", marginTop: "6px" }}
+                >
+                  {error}
+                </span>
                 <div
+                  style={{
+                    height: "1px",
+                    backgroundColor: "#9f9f9f",
+                    width: "100%",
+                    marginTop: "15px",
+                    marginBottom: "15px"
+                  }}
+                ></div>
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                  <button
+                    style={{ background: themeColor }}
+                    type="submit"
+                    className="finishBtn"
+                  >
+                    Add
+                  </button>
+                  <button
+                    type="button"
+                    className="finishBtn cancelBtn"
+                    onClick={oncloseFolder}
+                  >
+                    Close
+                  </button>
+                </div>
+              </form>
+            )}
+          </div>
+        </ModalUi>
+
+        {isLoading.isLoad ? (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100vh",
+              width: "100%",
+              flexDirection: "column"
+            }}
+          >
+            <img
+              alt="loader img"
+              src={loader}
+              style={{ width: "80px", height: "80px" }}
+            />
+            <span style={{ fontSize: "13px", color: "gray" }}>
+              {isLoading.message}
+            </span>
+          </div>
+        ) : handleError ? (
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              height: "100vh",
+              width: "100%"
+            }}
+          >
+            <span style={{ fontSize: "20px", color: "gray" }}>
+              {handleError}
+            </span>
+          </div>
+        ) : (
+          <>
+            <div className="folderContainer">
+              {tourData && (
+                <Tour
+                  onRequestClose={closeTour}
+                  steps={tourData}
+                  isOpen={isTour}
+                  closeWithMask={false}
+                  scrollOffset={-100}
+                  rounded={5}
+                />
+              )}
+
+              <div
+                data-tut="reactourFirst"
+                onMouseEnter={(e) => handleMouseEnter(e)}
+                ref={scrollRef}
+                style={{
+                  width: "100%"
+                }}
+                className="folderPath"
+              >
+                {handleFolderTab(folderName)}
+              </div>
+              <div className="dropMenuBD">
+                <div
+                  id="folder-menu"
                   className={
-                    isShowSort ? "dropdown-menu show" : "dropdown-menu"
+                    isNewFol ? "dropdown show dropDownStyle" : "dropdown"
                   }
-                  aria-labelledby="dropdownMenuButton"
-                  aria-expanded={isShowSort ? "true" : "false"}
+                  onClick={() => setIsNewFol(!isNewFol)}
                 >
-                  {sortingValue.map((value, ind) => {
-                    return (
-                      <span
-                        key={ind}
-                        onClick={() => {
-                          setSelectedSort(value);
-                          sortingData(value, null, pdfData);
-                        }}
-                        className="dropdown-item itemColor"
-                        style={{
-                          paddingLeft: selectedSort !== value && "33px"
-                        }}
-                      >
-                        {selectedSort === value && (
-                          <i
-                            className="fa fa-check mr-[5px"
-                            aria-hidden="true"
-                          ></i>
-                        )}
-                        {value}
-                      </span>
-                    );
-                  })}
-
-                  <hr className="hrStyle" />
-                  {sortOrder.map((order, ind) => {
-                    return (
-                      <span
-                        key={ind}
-                        onClick={() => {
-                          setSortingOrder(order);
-                          sortingData(null, order, pdfData);
-                        }}
-                        className="dropdown-item itemColor"
-                        style={{
-                          paddingLeft: sortingOrder !== order && "33px"
-                        }}
-                      >
-                        {sortingOrder === order && (
-                          <i
-                            className="fa fa-check mr-[5px"
-                            aria-hidden="true"
-                          ></i>
-                        )}
-                        {order}
-                      </span>
-                    );
-                  })}
-                </div>
-              </div>
-
-              <div>
-                {isList ? (
-                  <div className="sort" onClick={() => setIsList(!isList)}>
+                  <div className="sort" data-tut="reactourSecond">
                     <i
-                      onClick={() => setIsList(!isList)}
-                      className="fa fa-th-large"
-                      style={{ fontSize: "24px", color: `${iconColor}` }}
+                      className="fa fa-plus-square"
                       aria-hidden="true"
+                      style={{ fontSize: "25px", color: `${iconColor}` }}
                     ></i>
                   </div>
-                ) : (
                   <div
-                    data-tut="reactourForth"
-                    className="sort"
-                    onClick={() => setIsList(!isList)}
+                    className={
+                      isNewFol ? "dropdown-menu show" : "dropdown-menu"
+                    }
+                    aria-labelledby="dropdownMenuButton"
+                    aria-expanded={isNewFol ? "true" : "false"}
+                  >
+                    {" "}
+                    <div
+                      style={{
+                        display: "flex",
+                        flexDirection: "column"
+                      }}
+                    >
+                      <span
+                        className="dropdown-item itemColor"
+                        onClick={() => setIsFolder(true)}
+                      >
+                        <i
+                          style={{ marginRight: "5px" }}
+                          className="fa fa-plus"
+                          aria-hidden="true"
+                        ></i>
+                        Create folder
+                      </span>
+                      <span
+                        className="dropdown-item itemColor"
+                        onClick={() => navigate("/form/sHAnZphf69")}
+                      >
+                        <i
+                          style={{ marginRight: "5px" }}
+                          className="fas fa-pen-nib"
+                        ></i>
+                        Sign Yourself
+                      </span>
+                      <span
+                        className="dropdown-item itemColor"
+                        onClick={() => navigate("/form/8mZzFxbG1z")}
+                      >
+                        {" "}
+                        <i
+                          style={{ marginRight: "5px" }}
+                          className="fa fa-file-signature"
+                        ></i>
+                        Request Signatures{" "}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  id="menu-container"
+                  className={isShowSort ? "dropdown show" : "dropdown"}
+                  onClick={() => setIsShowSort(!isShowSort)}
+                >
+                  <div
+                    data-tut="reactourThird"
+                    className=" sort  "
+                    data-toggle="dropdown"
                   >
                     <i
-                      className="fa fa-list"
+                      className="fa fa-sort-amount-asc"
                       aria-hidden="true"
-                      style={{ fontSize: "23px", color: `${iconColor}` }}
+                      style={{
+                        marginRight: "5px",
+                        fontSize: "14px",
+                        color: `${iconColor}`
+                      }}
                     ></i>
+                    <span
+                      style={{
+                        fontSize: "15px",
+                        color: `${iconColor}`
+                      }}
+                    >
+                      {selectedSort}
+                    </span>
                   </div>
-                )}
+                  <div
+                    className={
+                      isShowSort ? "dropdown-menu show" : "dropdown-menu"
+                    }
+                    aria-labelledby="dropdownMenuButton"
+                    aria-expanded={isShowSort ? "true" : "false"}
+                  >
+                    {sortingValue.map((value, ind) => {
+                      return (
+                        <span
+                          key={ind}
+                          onClick={() => {
+                            setSelectedSort(value);
+                            sortingData(value, null, pdfData);
+                          }}
+                          className="dropdown-item itemColor"
+                          style={{
+                            paddingLeft: selectedSort !== value && "33px"
+                          }}
+                        >
+                          {selectedSort === value && (
+                            <i
+                              className="fa fa-check"
+                              aria-hidden="true"
+                              style={{ marginRight: "5px" }}
+                            ></i>
+                          )}
+                          {value}
+                        </span>
+                      );
+                    })}
+
+                    <hr className="hrStyle" />
+                    {sortOrder.map((order, ind) => {
+                      return (
+                        <span
+                          key={ind}
+                          onClick={() => {
+                            setSortingOrder(order);
+                            sortingData(null, order, pdfData);
+                          }}
+                          className="dropdown-item itemColor"
+                          style={{
+                            paddingLeft: sortingOrder !== order && "33px"
+                          }}
+                        >
+                          {sortingOrder === order && (
+                            <i
+                              className="fa fa-check"
+                              aria-hidden="true"
+                              style={{ marginRight: "5px" }}
+                            ></i>
+                          )}
+                          {order}
+                        </span>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div>
+                  {isList ? (
+                    <div className="sort" onClick={() => setIsList(!isList)}>
+                      <i
+                        onClick={() => setIsList(!isList)}
+                        className="fa fa-th-large"
+                        style={{ fontSize: "24px", color: `${iconColor}` }}
+                        aria-hidden="true"
+                      ></i>
+                    </div>
+                  ) : (
+                    <div
+                      data-tut="reactourForth"
+                      className="sort"
+                      onClick={() => setIsList(!isList)}
+                    >
+                      <i
+                        className="fa fa-list"
+                        aria-hidden="true"
+                        style={{ fontSize: "23px", color: `${iconColor}` }}
+                      ></i>
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
 
-          {pdfData && pdfData.length === 0 ? (
-            <div className="flex justify-center items-center w-full h-[50vh]">
-              <span className="text-base-content font-bold">
-                No Data Found!
-              </span>
-            </div>
-          ) : (
-            <div data-tut="reactourFifth">
-              <React.Suspense fallback={<AppLoader />}>
-                <DriveBody
-                  dataTutSixth="reactourSixth"
-                  dataTutSeventh="reactourSeventh"
-                  pdfData={pdfData}
-                  setFolderName={setFolderName}
-                  setIsLoading={setIsLoading}
-                  setDocId={setDocId}
-                  getPdfDocumentList={getPdfDocumentList}
-                  isDocId={docId}
-                  setPdfData={setPdfData}
-                  isList={isList}
-                  setIsAlert={setIsAlert}
-                  setSkip={setSkip}
-                  sortingData={sortingData}
-                />
-                {loading && (
-                  <div className="text-center pb-[20px]">Loading...</div>
-                )}
-              </React.Suspense>
-            </div>
-          )}
-        </>
-      )}
+            {pdfData && pdfData.length === 0 ? (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "50vh",
+                  width: "100%"
+                }}
+              >
+                <span style={{ fontWeight: "bold" }}>No Data Found!</span>
+              </div>
+            ) : (
+              <div data-tut="reactourFifth">
+                <React.Suspense fallback={<Loader />}>
+                  <DriveBody
+                    dataTutSixth="reactourSixth"
+                    dataTutSeventh="reactourSeventh"
+                    pdfData={pdfData}
+                    setFolderName={setFolderName}
+                    setIsLoading={setIsLoading}
+                    setDocId={setDocId}
+                    getPdfDocumentList={getPdfDocumentList}
+                    isDocId={docId}
+                    setPdfData={setPdfData}
+                    isList={isList}
+                    setIsAlert={setIsAlert}
+                    setSkip={setSkip}
+                    sortingData={sortingData}
+                  />
+                  {loading && (
+                    <div style={{ textAlign: "center" }}>Loading...</div>
+                  )}
+                </React.Suspense>
+              </div>
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 }

apps/OpenSign/src/pages/PageNotFound.js

@@ -4,11 +4,13 @@ import Title from "../components/Title";
 
 const PageNotFound = ({ prefix }) => {
   return (
-    <div className="flex items-center justify-center h-screen w-full bg-base-100 text-base-content rounded">
+    <div className="flex items-center justify-center h-screen w-full bg-white rounded">
       <Title title={"Page Not Found"} />
       <div className="text-center">
-        <h1 className="text-[60px] lg:text-[120px] font-semibold">404</h1>
-        <p className="text-[30px] lg:text-[50px]">
+        <h1 className="text-[60px] lg:text-[120px] font-semibold text-black">
+          404
+        </h1>
+        <p className="text-[30px] lg:text-[50px] text-black">
           {prefix ? prefix : "Page"} Not Found
         </p>
       </div>

apps/OpenSign/src/pages/Pgsignup.js

@@ -8,7 +8,6 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { appInfo } from "../constant/appinfo";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
-import Loader from "../primitives/Loader";
 
 const PgSignUp = () => {
   const navigate = useNavigate();
@@ -128,9 +127,7 @@ const PgSignUp = () => {
       user.set("username", zohoRes.data.result.email);
       user.set("password", obj.password);
       user.set("email", zohoRes.data.result.email);
-      if (zohoRes?.data?.result?.phone) {
-        user.set("phone", zohoRes.data.result.phone);
-      }
+      user.set("phone", zohoRes.data.result.phone);
       user.set("name", zohoRes.data.result.name);
 
       const res = await user.signUp();
@@ -143,7 +140,7 @@ const PgSignUp = () => {
             company: zohoRes.data.result.company,
             name: zohoRes.data.result.name,
             email: zohoRes.data.result.email,
-            phone: zohoRes?.data?.result?.phone || "",
+            phone: zohoRes.data.result.phone,
             role: obj.role
           },
           subscription: zohoRes.data.result.subscription
@@ -412,8 +409,21 @@ const PgSignUp = () => {
     <div className="bg-white">
       <Title title={"Pgsignup page"} />
       {isLoader ? (
-        <div className="flex justify-center items-center h-[100vh]">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
         <form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -10,8 +10,9 @@ import { useDrag, useDrop } from "react-dnd";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 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 LoaderWithMsg from "../primitives/LoaderWithMsg";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
@@ -48,8 +49,7 @@ import { SaveFileSize } from "../constant/saveFileSize";
 import { EmailBody } from "../components/pdf/EmailBody";
 import Upgrade from "../primitives/Upgrade";
 import Alert from "../primitives/Alert";
-import Loader from "../primitives/Loader";
-import mail_sent_gif from "../assets/gif/mail_sent.gif";
+
 function PlaceHolderSign() {
   const editorRef = useRef();
   const navigate = useNavigate();
@@ -405,14 +405,11 @@ function PlaceHolderSign() {
       };
       setHandleError("Error: Something went wrong!");
       setIsLoading(loadObj);
-    } else if (res.length && res[0]?.objectId) {
+    } else if (res[0] && res.length) {
       setActiveMailAdapter(res[0]?.active_mail_adapter);
       setSignerUserId(res[0].objectId);
       const tourstatus = res[0].TourStatus && res[0].TourStatus;
-      const alreadyPlaceholder = documentData[0]?.SignedUrl;
-      if (alreadyPlaceholder) {
-        setCheckTourStatus(true);
-      } else if (tourstatus && tourstatus.length > 0) {
+      if (tourstatus && tourstatus.length > 0) {
         setTourStatus(tourstatus);
         const checkTourRecipients = tourstatus.filter(
           (data) => data.placeholder
@@ -833,11 +830,11 @@ function PlaceHolderSign() {
       return pdfDetails[0].URL;
     }
   };
+
   const alertSendEmail = async () => {
     const filterPrefill = signerPos?.filter((data) => data.Role !== "prefill");
     const getPrefill = signerPos?.filter((data) => data.Role === "prefill");
     let isLabel = false;
-    //condition is used to check text widget data is empty or have response
     if (getPrefill && getPrefill.length > 0) {
       const prefillPlaceholder = getPrefill[0].placeHolder;
       if (prefillPlaceholder) {
@@ -848,29 +845,6 @@ function PlaceHolderSign() {
         });
       }
     }
-    let isSignatureExist = true; // variable is used to check a signature widget exit or not then execute other code
-    //for loop is used to check signature widget exist or not
-    for (let item of filterPrefill) {
-      let signatureExist = false; // Reset for each iteration
-      for (let x of item.placeHolder) {
-        if (!signatureExist) {
-          const typeExist = x.pos.some((data) => data?.type);
-          if (typeExist) {
-            signatureExist = x.pos.some((data) => data?.type === "signature");
-          } else {
-            signatureExist = x.pos.some((data) => !data.isStamp);
-          }
-        }
-      }
-      if (!signatureExist) {
-        isSignatureExist = false;
-        const alert = {
-          mssg: "sure",
-          alert: true
-        };
-        setIsSendAlert(alert);
-      }
-    }
 
     if (getPrefill && isLabel) {
       const alert = {
@@ -878,26 +852,23 @@ function PlaceHolderSign() {
         alert: true
       };
       setIsSendAlert(alert);
-    } else if (isSignatureExist) {
-      if (filterPrefill.length === signersdata.length) {
-        const IsSignerNotExist = filterPrefill?.filter((x) => !x.signerObjId);
-        if (IsSignerNotExist && IsSignerNotExist?.length > 0) {
-          setSignerExistModal(true);
-          setSelectWidgetId(
-            IsSignerNotExist[0]?.placeHolder?.[0]?.pos?.[0]?.key
-          );
-        } else {
-          saveDocumentDetails();
-        }
+    } else if (filterPrefill.length === signersdata.length) {
+      const IsSignerNotExist = filterPrefill?.filter((x) => !x.signerObjId);
+      if (IsSignerNotExist && IsSignerNotExist?.length > 0) {
+        setSignerExistModal(true);
+        setSelectWidgetId(IsSignerNotExist[0]?.placeHolder?.[0]?.pos?.[0]?.key);
       } else {
-        const alert = {
-          mssg: "sure",
-          alert: true
-        };
-        setIsSendAlert(alert);
+        saveDocumentDetails();
       }
+    } else {
+      const alert = {
+        mssg: "sure",
+        alert: true
+      };
+      setIsSendAlert(alert);
     }
   };
+
   //function to use save placeholder details in contracts_document
   const saveDocumentDetails = async () => {
     setIsUiLoading(true);
@@ -936,7 +907,6 @@ function PlaceHolderSign() {
           Placeholders: filterPrefill,
           SignedUrl: pdfUrl,
           Signers: signers,
-          SentToOthers: true,
           ExpiryDate: {
             iso: updateExpiryDate,
             __type: "Date"
@@ -946,8 +916,7 @@ function PlaceHolderSign() {
         data = {
           Placeholders: filterPrefill,
           SignedUrl: pdfUrl,
-          Signers: signers,
-          SentToOthers: true
+          Signers: signers
         };
       }
       await axios
@@ -1000,10 +969,9 @@ function PlaceHolderSign() {
     for (let i = 0; i < signerMail.length; i++) {
       const objectId = signerMail[i].objectId;
       const hostUrl = window.location.origin;
-      const sendMail = false;
       //encode this url value `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}` to base64 using `btoa` function
       const encodeBase64 = btoa(
-        `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}/${sendMail}`
+        `${pdfDetails?.[0].objectId}/${signerMail[i].Email}/${objectId}`
       );
       let signPdf = `${hostUrl}/login/${encodeBase64}`;
       shareLinkList.push({ signerEmail: signerMail[i].Email, url: signPdf });
@@ -1014,11 +982,7 @@ function PlaceHolderSign() {
           className="flex flex-row justify-between items-center mb-1"
           key={ind}
         >
-          {copied && (
-            <Alert type="success">
-              <div className="ml-3">Copied</div>
-            </Alert>
-          )}
+          {copied && <Alert type="success">Copied</Alert>}
           <span className="w-[220px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis  ">
             {data.signerEmail}
           </span>
@@ -1026,13 +990,26 @@ function PlaceHolderSign() {
             <button
               onClick={() => copytoclipboard(data.url)}
               type="button"
-              className="flex flex-row items-center op-link op-link-primary"
+              className="flex flex-row items-center text-white font-[500]"
             >
-              <i className="fa-solid fa-link" aria-hidden="true"></i>
-              <span className=" hidden md:block ml-1 ">Copy link</span>
+              <i
+                className="fa-solid fa-link underline text-blue-700"
+                aria-hidden="true"
+              ></i>
+              <span className=" hidden md:block ml-1 underline text-blue-700">
+                Copy link
+              </span>
             </button>
-            <RWebShare data={{ url: data.url, title: "Sign url" }}>
-              <i className="fa-solid fa-share-from-square op-link op-link-secondary no-underline"></i>
+            <RWebShare
+              data={{
+                url: data.url,
+                title: "Sign url"
+              }}
+            >
+              <i
+                className="fa-solid fa-share-from-square cursor-pointer "
+                style={{ color: themeColor }}
+              ></i>
             </RWebShare>
           </div>
         </div>
@@ -1101,10 +1078,10 @@ function PlaceHolderSign() {
             document_title: documentName,
             sender_name: senderName,
             sender_mail: senderEmail,
-            sender_phone: senderPhone || "",
+            sender_phone: senderPhone,
             receiver_name: signerMail[i].Name,
             receiver_email: signerMail[i].Email,
-            receiver_phone: signerMail[i]?.Phone || "",
+            receiver_phone: signerMail[i].Phone,
             expiry_date: localExpireDate,
             company_name: orgName,
             signing_url: `<a href=${signPdf}>Sign here</a>`
@@ -1156,45 +1133,40 @@ function PlaceHolderSign() {
     }
     if (sendMail.data.result.status === "success") {
       setMailStatus("success");
-      try {
-        let data;
-        if (
-          requestBody &&
-          requestSubject &&
-          isCustomize &&
-          (isSubscribe || !isEnableSubscription)
-        ) {
-          data = {
-            RequestBody: htmlReqBody,
-            RequestSubject: requestSubject,
-            SendMail: true
-          };
-        } else {
-          data = {
-            SendMail: true
-          };
-        }
 
-        await axios
-          .put(
-            `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-              "_appName"
-            )}_Document/${documentId}`,
-            data,
-            {
-              headers: {
-                "Content-Type": "application/json",
-                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
-                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+      if (
+        requestBody &&
+        requestSubject &&
+        isCustomize &&
+        (isSubscribe || !isEnableSubscription)
+      ) {
+        try {
+          const data = {
+            RequestBody: htmlReqBody,
+            RequestSubject: requestSubject
+          };
+
+          await axios
+            .put(
+              `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+                "_appName"
+              )}_Document/${documentId}`,
+              data,
+              {
+                headers: {
+                  "Content-Type": "application/json",
+                  "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+                  "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+                }
               }
-            }
-          )
-          .then(() => {})
-          .catch((err) => {
-            console.log("axois err ", err);
-          });
-      } catch (e) {
-        console.log("error", e);
+            )
+            .then(() => {})
+            .catch((err) => {
+              console.log("axois err ", err);
+            });
+        } catch (e) {
+          console.log("error", e);
+        }
       }
 
       setIsSend(true);
@@ -1624,18 +1596,32 @@ function PlaceHolderSign() {
       <Title title={state?.title ? state.title : "New Document"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
-          <LoaderWithMsg isLoading={isLoading} />
+          <Loader isLoading={isLoading} />
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div
-            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
-            ref={divRef}
-          >
+          <div className="signatureContainer" ref={divRef}>
             {isUiLoading && (
-              <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
-                <Loader />
-                <span className="text-[13px] font-bold">
+              <div
+                style={{
+                  position: "absolute",
+                  height: "100vh",
+                  width: "100%",
+                  display: "flex",
+                  justifyContent: "center",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  zIndex: "999",
+                  backgroundColor: "#e6f2f2",
+                  opacity: 0.8
+                }}
+              >
+                <img
+                  alt="no img"
+                  src={loader}
+                  style={{ width: "100px", height: "100px" }}
+                />
+                <span style={{ fontSize: "13px", fontWeight: "bold" }}>
                   This might take some time
                 </span>
               </div>
@@ -1681,6 +1667,11 @@ function PlaceHolderSign() {
               {/* this modal is used show alert set placeholder for all signers before send mail */}
 
               <ModalUi
+                headerColor={
+                  isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
+                    ? "#dc3545"
+                    : isSendAlert.mssg === "confirm" && themeColor
+                }
                 isOpen={isSendAlert.alert}
                 title={
                   isSendAlert.mssg === "sure" || isSendAlert.mssg === textWidget
@@ -1690,78 +1681,102 @@ function PlaceHolderSign() {
                 handleClose={() => setIsSendAlert({})}
                 showHeaderMessage={isSendAlert.mssg === "confirm"}
               >
-                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
+                <div
+                  className="max-h-96 overflow-y-scroll scroll-hide"
+                  style={{ padding: 20 }}
+                >
                   {isSendAlert.mssg === "sure" ? (
                     <span>
-                      Please ensure there&apos;s at least one signature widget
-                      added for all recipients.
+                      Please add at least one signature field for all
+                      recipients.
                     </span>
                   ) : isSendAlert.mssg === textWidget ? (
                     <p>Please confirm that you have filled the text field.</p>
                   ) : (
                     isSendAlert.mssg === "confirm" && (
                       <>
-                        {!isCustomize && (
-                          <span>
-                            Are you sure you want to send out this document for
-                            signatures?
-                          </span>
-                        )}
-                        {isCustomize &&
-                          (!isEnableSubscription || isSubscribe) && (
-                            <>
-                              <EmailBody
-                                editorRef={editorRef}
-                                requestBody={requestBody}
-                                requestSubject={requestSubject}
-                                handleOnchangeRequest={handleOnchangeRequest}
-                                setRequestSubject={setRequestSubject}
-                              />
-                              <div
-                                className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
-                                onClick={() => {
-                                  setRequestBody(defaultBody);
-                                  setRequestSubject(defaultSubject);
+                        <>
+                          {!isCustomize && (
+                            <span>
+                              Are you sure you want to send out this document
+                              for signatures?
+                            </span>
+                          )}
+                          {isCustomize &&
+                            (!isEnableSubscription || isSubscribe) && (
+                              <>
+                                <EmailBody
+                                  editorRef={editorRef}
+                                  requestBody={requestBody}
+                                  requestSubject={requestSubject}
+                                  handleOnchangeRequest={handleOnchangeRequest}
+                                  setRequestSubject={setRequestSubject}
+                                />
+                                <div
+                                  className={
+                                    "flex justify-end  items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer "
+                                  }
+                                  onClick={() => {
+                                    setRequestBody(defaultBody);
+                                    setRequestSubject(defaultSubject);
+                                  }}
+                                >
+                                  <span>Reset to default</span>
+                                </div>
+                              </>
+                            )}
+                          <div
+                            className={
+                              "flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
+                            }
+                          >
+                            <div className="flex flex-row gap-2">
+                              <button
+                                onClick={() => sendEmailToSigners()}
+                                className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm "
+                                style={{
+                                  background: themeColor,
+                                  color: "white"
                                 }}
                               >
-                                <span>Reset to default</span>
-                              </div>
-                            </>
-                          )}
-                        <div className="flex flex-row md:items-center gap-2 md:gap-6 mt-2">
-                          <div className="flex flex-row gap-2">
-                            <button
-                              onClick={() => sendEmailToSigners()}
-                              className="op-btn op-btn-primary font-[500] text-sm shadow"
-                            >
-                              Send
-                            </button>
-                            {isCustomize && (
-                              <button
-                                onClick={() => setIsCustomize(false)}
-                                className="op-btn op-btn-ghost font-[500] text-sm"
-                              >
-                                Close
+                                Send
                               </button>
+                              {isCustomize && (
+                                <button
+                                  onClick={() => {
+                                    setIsCustomize(false);
+                                  }}
+                                  className=" shadow rounded-[2px] py-[3px] px-[25px] font-[500] text-sm border-[0.1px] border-gray-300"
+                                >
+                                  Close
+                                </button>
+                              )}
+                            </div>
+
+                            {!isCustomize &&
+                              (isSubscribe || !isEnableSubscription) && (
+                                <span
+                                  className={
+                                    "cursor-pointer underline text-blue-700 focus:outline-none"
+                                  }
+                                  onClick={() => {
+                                    setIsCustomize(!isCustomize);
+                                  }}
+                                >
+                                  Cutomize Email
+                                </span>
+                              )}
+
+                            {!isSubscribe && isEnableSubscription && (
+                              <div className="mt-2">
+                                <Upgrade
+                                  message="Upgrade to customize Email"
+                                  newWindow={true}
+                                />
+                              </div>
                             )}
                           </div>
-
-                          {!isCustomize &&
-                            (isSubscribe || !isEnableSubscription) && (
-                              <span
-                                className="op-link op-link-accent text-sm"
-                                onClick={() => setIsCustomize(!isCustomize)}
-                              >
-                                Cutomize Email
-                              </span>
-                            )}
-
-                          {!isSubscribe && isEnableSubscription && (
-                            <div className="mt-2">
-                              <Upgrade message="Upgrade to customize Email" />
-                            </div>
-                          )}
-                        </div>
+                        </>
                       </>
                     )
                   )}
@@ -1769,15 +1784,28 @@ function PlaceHolderSign() {
                   {isSendAlert.mssg === "confirm" && (
                     <>
                       <div className="flex justify-center items-center mt-3">
-                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
+                        <span
+                          style={{
+                            height: 1,
+                            width: "20%",
+                            backgroundColor: "#ccc"
+                          }}
+                        ></span>
                         <span className="ml-[5px] mr-[5px]">or</span>
-                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
+                        <span
+                          style={{
+                            height: 1,
+                            width: "20%",
+                            backgroundColor: "#ccc"
+                          }}
+                        ></span>
                       </div>
                       <div className="mt-3 mb-3">{handleShareList()}</div>
                     </>
                   )}
                 </div>
               </ModalUi>
+
               {/* this modal is used show send mail  message and after send mail success message */}
               <ModalUi
                 isOpen={isSend}
@@ -1787,61 +1815,77 @@ function PlaceHolderSign() {
                   setSignerPos([]);
                 }}
               >
-                <div className="h-[100%] p-[20px]">
+                <div style={{ height: "100%", padding: 20 }}>
                   {mailStatus === "success" ? (
-                    <div className="text-center mb-[10px]">
-                      <img
-                        src={mail_sent_gif}
-                        className="w-[120px] h-[120px] mx-auto"
-                      />
-                      <p>You have successfully sent mails to all recipients!</p>
-                      {isCurrUser && (
-                        <p>Do you want to sign documents right now ?</p>
-                      )}
-                    </div>
+                    <p>You have successfully sent mails to all recipients!</p>
                   ) : (
                     <p>Please setup mail adapter to send mail!</p>
                   )}
-                  {!mailStatus && (
-                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+                  {isCurrUser && (
+                    <p>Do you want to sign documents right now ?</p>
                   )}
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   {isCurrUser && (
                     <button
-                      onClick={() => handleRecipientSign()}
+                      onClick={() => {
+                        handleRecipientSign();
+                      }}
+                      style={{
+                        background: themeColor,
+                        color: "white"
+                      }}
                       type="button"
-                      className="op-btn op-btn-primary mr-1"
+                      className="finishBtn"
                     >
                       Yes
                     </button>
                   )}
+
                   <button
                     onClick={() => {
                       setIsSend(false);
                       setSignerPos([]);
                     }}
                     type="button"
-                    className="op-btn op-btn-ghost"
+                    className="finishBtn cancelBtn"
                   >
                     {isCurrUser ? "No" : "Close"}
                   </button>
                 </div>
               </ModalUi>
               <ModalUi
+                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div className="h-[100%] p-[20px]">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>Please select signer for add placeholder!</p>
-                  <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   <button
                     onClick={() => {
                       setIsShowEmail(false);
                     }}
                     type="button"
-                    className="op-btn op-btn-primary"
+                    className="finishBtn cancelBtn"
                   >
                     Ok
                   </button>
@@ -1995,13 +2039,12 @@ function PlaceHolderSign() {
               </div>
             ) : (
               <div>
-                <div
-                  className="hidden md:block w-[180px] h-full bg-base-100"
-                  aria-disabled
-                >
+                <div className="signerComponent" aria-disabled>
                   <div
-                    style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                    className="overflow-y-auto hide-scrollbar"
+                    style={{
+                      maxHeight: window.innerHeight - 70 + "px"
+                    }}
+                    className="autoSignScroll"
                   >
                     <SignerListPlace
                       signerPos={signerPos}
@@ -2047,22 +2090,33 @@ function PlaceHolderSign() {
       </DndProvider>
       <div>
         <ModalUi
+          headerColor={"#dc3545"}
           isOpen={isAlreadyPlace.status}
           title={"Document Alert"}
           showClose={false}
         >
-          <div className="h-[100%] p-[20px]">
+          <div style={{ height: "100%", padding: 20 }}>
             <p>{isAlreadyPlace.message}</p>
-            <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+
+            <div
+              style={{
+                height: "1px",
+                backgroundColor: "#9f9f9f",
+                width: "100%",
+                marginTop: "15px",
+                marginBottom: "15px"
+              }}
+            ></div>
             <button
               onClick={() => handleRecipientSign()}
               type="button"
-              className="op-btn op-btn-primary"
+              className="finishBtn cancelBtn"
             >
               View
             </button>
           </div>
         </ModalUi>
+
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/pages/PlanSubscriptions.js

@@ -4,8 +4,6 @@ import checkmark from "../assets/images/checkmark.png";
 import plansArr from "../json/plansArr";
 import Title from "../components/Title";
 import Parse from "parse";
-import { openInNewTab } from "../constant/Utils";
-import Loader from "../primitives/Loader";
 const listItemStyle = {
   paddingLeft: "20px", // Add padding to create space for the image
   backgroundImage: `url(${checkmark})`, // Set your image as the list style image
@@ -18,17 +16,8 @@ const PlanSubscriptions = () => {
   const navigate = useNavigate();
   const [yearlyVisible, setYearlyVisible] = useState(false);
   const [isLoader, setIsLoader] = useState(true);
-  const extUser =
-    localStorage.getItem("Extand_Class") &&
-    JSON.parse(localStorage.getItem("Extand_Class"))?.[0];
-  const user = {
-    name: extUser?.Name,
-    email: extUser?.Email,
-    company: extUser?.Company,
-    phone: extUser?.Phone
-  };
-  const userDetails = JSON.parse(localStorage.getItem("userDetails")) || user;
-  // console.log("userDetails ", userDetails);
+
+  const userDetails = JSON.parse(localStorage.getItem("userDetails"));
   const name =
     userDetails && userDetails.name
       ? "first_name=" + encodeURIComponent(userDetails.name)
@@ -86,33 +75,55 @@ const PlanSubscriptions = () => {
     <>
       <Title title={"Subscriptions"} />
       {isLoader ? (
-        <div className="flex items-center justify-center h-screen">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
-        <div className="overflow-y-auto max-h-full">
+        <div
+          style={{
+            backgroundColor: "white",
+            overflowY: "auto",
+            maxHeight: "100%"
+          }}
+        >
           <div className="block my-2">
             <div className="flex flex-col justify-center items-center w-full">
-              <div
-                role="tablist"
-                className="op-tabs op-tabs-boxed bg-base-100 my-2 shadow-lg transition-all"
-              >
-                <a
+              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
+                <span
                   onClick={() => setYearlyVisible(false)}
-                  role="tab"
-                  className={`${!yearlyVisible ? "op-tab-active" : ""} op-tab`}
+                  className={`${
+                    !yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
                 >
                   Monthly
-                </a>
-                <a
+                </span>
+                <span
                   onClick={() => setYearlyVisible(true)}
-                  role="tab"
-                  className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
+                  className={`${
+                    yearlyVisible
+                      ? "bg-[#002862] text-white"
+                      : "bg-white text-black"
+                  } px-4 py-1 rounded cursor-pointer`}
                 >
                   Yearly (10% off)
-                </a>
+                </span>
               </div>
-              <ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
+              <ul className="flex flex-col md:flex-row h-full bg-white justify-center">
                 {plansArr.map((item) => (
                   <li
                     className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
@@ -187,7 +198,9 @@ const PlanSubscriptions = () => {
                     <ul className="mx-1 p-3 text-left break-words text-sm list-none">
                       {item.benefits.map((subitem, index) => (
                         <li style={listItemStyle} key={index} className="m-1">
-                          <span className="relative">{subitem}</span>
+                          <span style={{ position: "relative" }}>
+                            {subitem}
+                          </span>
                         </li>
                       ))}
                     </ul>
@@ -195,23 +208,22 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
-            <div className="text-sm flex justify-center items-center mt-3 mb-2">
-              <hr className="border-[2px] border-gray-350 w-[20%]" />
-              <span className="px-2 text-base-content cursor-default">or</span>
-              <hr className="border-[2px] border-gray-350 w-[20%]" />
+            <div className="text-sm flex justify-center items-center">
+              <hr className="border-[1px] border-gray-300 w-[20%]" />
+              <span className="px-2 text-gray-500 cursor-default">or</span>
+              <hr className="border-[1px] border-gray-300 w-[20%]" />
             </div>
-            <div className="flex flex-col justify-center items-center">
+            <div className="flex flex-col justify-center w-full items-center">
               <h3 className="text-[#002862] mt-1 mb-2">
                 Host it yourself for free
               </h3>
-              <div
-                className="op-btn op-btn-primary w-[200px]"
-                onClick={() =>
-                  openInNewTab("https://github.com/OpenSignLabs/OpenSign")
-                }
+              <NavLink
+                to={"https://github.com/OpenSignLabs/OpenSign"}
+                className="bg-[#002862] w-[200px] text-center text-white py-2 rounded uppercase hover:no-underline hover:text-white cursor-pointer"
+                target={"_blank"}
               >
                 Visit Github
-              </div>
+              </NavLink>
             </div>
           </div>
         </div>

apps/OpenSign/src/pages/Report.js

@@ -7,7 +7,6 @@ import { useParams } from "react-router-dom";
 import Title from "../components/Title";
 import PageNotFound from "./PageNotFound";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
-import Loader from "../primitives/Loader";
 
 const Report = () => {
   const { id } = useParams();
@@ -174,8 +173,21 @@ const Report = () => {
     <>
       <Title title={reportName} />
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
         <>

apps/OpenSign/src/pages/SSOVerify.js

@@ -1,384 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
-import Parse from "parse";
-import axios from "axios";
-import { appInfo } from "../constant/appinfo";
-import { isEnableSubscription } from "../constant/const";
-import { fetchSubscription } from "../constant/Utils";
-import { useDispatch } from "react-redux";
-import { showTenant } from "../redux/reducers/ShowTenant";
-import ModalUi from "../primitives/ModalUi";
-import Loader from "../primitives/Loader";
-
-const SSOVerify = () => {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const dispatch = useDispatch();
-  const [isModal, setIsModal] = useState(false);
-  const [message, setMessage] = useState("Verifying SSO...");
-  const [isLoader, setIsLoader] = useState(false);
-  const [userDetails, setUserDetails] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    Destination: "",
-    Company: ""
-  });
-
-  useEffect(() => {
-    linkUserWithSSO();
-    // eslint-disable-next-line
-  }, []);
-
-  // `linkUserWithSSO` is used to sign in or sign up a user using an SSO code and check if the user is present in the extended class
-  const linkUserWithSSO = async () => {
-    const param = new URLSearchParams(location.search);
-    const code = param?.get("code");
-    const state = param?.get("state");
-    try {
-      // The `ssosign` cloud function is used to sign in or sign up a user
-      const ssosign = await Parse.Cloud.run("ssosign", {
-        code: code,
-        email: state
-      });
-      localStorage.setItem("accesstoken", ssosign.sessiontoken);
-      // `checkExtUser` checks if the user is present in the extended class `contracts_Users` and if not, initiates the new user flow
-      await checkExtUser(ssosign);
-    } catch (err) {
-      setMessage("Error: " + err.message);
-      console.log("err", err.message);
-    }
-  };
-  const checkExtUser = async (ssosign) => {
-    const params = { email: ssosign?.email };
-    try {
-      // `isextenduser` checks if the current user is present in the extended class
-      const extRes = await Parse.Cloud.run("isextenduser", params);
-      if (extRes?.isUserExist) {
-        // `getUserDetails` retrieves the current user's details from the extended class
-        const extRes = await Parse.Cloud.run("getUserDetails", params);
-        if (ssosign && ssosign.sessiontoken) {
-          const LocalUserDetails = {
-            name: extRes.Name,
-            email: extRes.email,
-            phone: extRes?.get("Phone") || "",
-            company: extRes.get("Company")
-          };
-          localStorage.setItem("userDetails", JSON.stringify(LocalUserDetails));
-          thirdpartyLoginfn(ssosign.sessiontoken);
-        }
-      } else {
-        setIsModal(true);
-        setUserDetails((prev) => ({
-          ...prev,
-          name: ssosign.name,
-          email: ssosign.email,
-          phone: ssosign?.phone || ""
-        }));
-      }
-    } catch (err) {
-      console.log("Err in isextenduser or getuserdetails cloud function", err);
-      setMessage("Error: " + err.message);
-    }
-  };
-  // `handleSubmitbtn` is used to create a user in the extended class
-  const handleSubmitbtn = async (e) => {
-    e.preventDefault();
-    setIsLoader(true);
-    let phone;
-    if (userDetails?.phone) {
-      phone = validateInput(userDetails?.phone);
-    } else {
-      phone = true;
-    }
-    if (userDetails.Destination && userDetails.Company && phone) {
-      const payload = { sessionToken: localStorage.getItem("accesstoken") };
-      if (payload && payload.sessionToken) {
-        const params = {
-          userDetails: {
-            name: userDetails.name,
-            email: userDetails.email,
-            phone: userDetails?.phone || "",
-            role: "contracts_User",
-            company: userDetails.Company,
-            jobTitle: userDetails.Destination
-          }
-        };
-        try {
-          const userSignUp = await Parse.Cloud.run("usersignup", params);
-          if (userSignUp && userSignUp.sessionToken) {
-            const LocalUserDetails = params.userDetails;
-            localStorage.setItem(
-              "userDetails",
-              JSON.stringify(LocalUserDetails)
-            );
-            await thirdpartyLoginfn(userSignUp.sessionToken);
-            setIsLoader(false);
-          } else {
-            alert(userSignUp.message);
-            setIsLoader(false);
-          }
-        } catch (err) {
-          console.log("error in usersignup", err);
-          localStorage.removeItem("accesstoken");
-          alert("Something went wrong.");
-          setIsLoader(false);
-        }
-      } else {
-        localStorage.removeItem("accesstoken");
-        alert("Internal server error.");
-        setIsLoader(false);
-      }
-    } else {
-      alert("Please fill required details correctly.");
-      setIsLoader(false);
-    }
-  };
-  // `thirdpartyLoginfn` is used to save necessary parameters locally for the logged-in user
-  const thirdpartyLoginfn = async (sessionToken) => {
-    const baseUrl = localStorage.getItem("baseUrl");
-    const parseAppId = localStorage.getItem("parseAppId");
-    try {
-      const validUser = await Parse.User.become(sessionToken);
-      if (validUser) {
-        localStorage.setItem("accesstoken", sessionToken);
-        const _user = JSON.parse(JSON.stringify(validUser));
-        localStorage.setItem("UserInformation", JSON.stringify(_user));
-        if (_user.ProfilePic) {
-          localStorage.setItem("profileImg", _user.ProfilePic);
-        } else {
-          localStorage.setItem("profileImg", "");
-        }
-        // Check extended class user role and tenentId
-        try {
-          let userRoles = [];
-          const userSettings = appInfo.settings;
-          //Get Current user roles
-          const url = `${baseUrl}functions/UserGroups`;
-          const headers = {
-            "Content-Type": "application/json",
-            "X-Parse-Application-Id": parseAppId,
-            sessionToken: _user.sessionToken
-          };
-          const body = { appname: appInfo.appname };
-          const UserGroupsRes = await axios.post(url, JSON.stringify(body), {
-            headers: headers
-          });
-          userRoles = (UserGroupsRes.data && UserGroupsRes.data.result) || [];
-          if (userRoles) {
-            let _currentRole = "";
-            const excludeRoles = ["contracts_Guest", `contracts_appeditor`];
-            const filteredRole = userRoles.filter(
-              (x) => !excludeRoles.includes(x)
-            );
-            if (filteredRole?.length > 1) {
-              console.log("user has two roles");
-              // _currentRole = filteredRole.filter((x) => x === "contracts_User");
-            } else {
-              _currentRole = filteredRole?.[0] || "";
-            }
-            if (_currentRole) {
-              const roleSetting = userSettings?.find(
-                (setting) => setting.role === _currentRole
-              );
-              const redirectUrl =
-                location?.state?.from ||
-                `/${roleSetting.pageType}/${roleSetting.pageId}`;
-              const _role = _currentRole.replace(`${appInfo.appname}_`, "");
-              localStorage.setItem("_user_role", _role);
-              // Get TenentID from Extendend Class
-              localStorage.setItem(
-                "extended_class",
-                roleSetting.extended_class
-              );
-              try {
-                const extUser = await Parse.Cloud.run("getUserDetails", {
-                  email: _user.email
-                });
-                if (extUser) {
-                  const _extUser = JSON.parse(JSON.stringify(extUser));
-                  localStorage.setItem("userEmail", _extUser.Email);
-                  localStorage.setItem("username", _extUser.Name);
-                  localStorage.setItem("scriptId", true);
-                  let tenentInfo = [];
-                  const results = [extUser];
-                  if (results) {
-                    let extendedInfo_stringify = JSON.stringify(results);
-                    localStorage.setItem(
-                      "Extand_Class",
-                      extendedInfo_stringify
-                    );
-                    if (_extUser.TenantId) {
-                      const obj = {
-                        tenentId: _extUser.TenantId.objectId,
-                        tenentName: _extUser.TenantId.TenantName || ""
-                      };
-                      localStorage.setItem("TenantId", obj.tenentId);
-                      tenentInfo.push(obj);
-                      dispatch(showTenant(obj.tenentName || ""));
-                      localStorage.setItem("TenantName", obj.tenentName || "");
-                    }
-                    localStorage.setItem("PageLanding", roleSetting.pageId);
-                    localStorage.setItem("defaultmenuid", roleSetting.menuId);
-                    localStorage.setItem("pageType", roleSetting.pageType);
-                    if (isEnableSubscription) {
-                      const res = await fetchSubscription();
-                      const plan = res.plan;
-                      const billingDate = res.billingDate;
-                      if (plan === "freeplan") {
-                        navigate(redirectUrl);
-                      } else if (billingDate) {
-                        if (new Date(billingDate) > new Date()) {
-                          localStorage.removeItem("userDetails");
-                          navigate(redirectUrl);
-                        } else {
-                          navigate(`/subscription`, {
-                            replace: true
-                          });
-                        }
-                      } else {
-                        navigate(`/subscription`, {
-                          replace: true
-                        });
-                      }
-                    } else {
-                      navigate(redirectUrl);
-                    }
-                  }
-                }
-              } catch (err) {
-                alert("user not exist.");
-                setMessage("Error: User not exist.");
-                console.log("err in get extUser", err);
-              }
-            } else {
-              alert("Role does not exists.");
-              setMessage("Error: Role does not exists.");
-            }
-          } else {
-            alert("Role does not exists.");
-            setMessage("Error: Role does not exists.");
-          }
-        } catch (err) {
-          console.log("err in usergroups", err);
-        }
-      }
-    } catch (err) {
-      console.log("Err in become method", err);
-    }
-  };
-  // `handleCloseModal` is triggered when the user wants to close the new user flow modal
-  const handleCloseModal = () => {
-    setIsModal(false);
-    if (Parse?.User?.current()) {
-      Parse.User.logOut();
-    }
-  };
-
-  // `validateInput` is used to verify the phone pattern
-  function validateInput(input) {
-    if (input) {
-      const pattern = /^(?!.*\+.*\+)[\d+-]*$/;
-      return pattern.test(input);
-    } else {
-      return true;
-    }
-  }
-  return (
-    <div>
-      <div className="w-full h-screen flex flex-col justify-center items-center text-sm md:text-xl ">
-        {message === "Verifying SSO..." && <Loader />}
-        <div className="text-base-content">{message}</div>
-      </div>
-      <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
-        <div className="relative">
-          {isLoader && (
-            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
-              <Loader />
-            </div>
-          )}
-          <form
-            className="px-4 py-3 text-base-content"
-            onSubmit={handleSubmitbtn}
-          >
-            <div className="mb-3">
-              <label htmlFor="Company" className="block text-xs font-semibold">
-                Phone <span className="text-[13px] text-[red]">*</span>
-              </label>
-              <input
-                type="tel"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                id="Phone"
-                value={userDetails.phone}
-                onChange={(e) =>
-                  setUserDetails({
-                    ...userDetails,
-                    phone: e.target.value
-                  })
-                }
-                disabled={isLoader}
-                required
-              />
-              <p className="text-[10px] text-[red] ml-2">
-                {!validateInput(userDetails.phone) && "Invalid phone value"}
-              </p>
-            </div>
-            <div className="mb-3">
-              <label htmlFor="Company" className="block text-xs font-semibold">
-                Company <span className="text-[13px] text-[red]">*</span>
-              </label>
-              <input
-                type="text"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                id="Company"
-                value={userDetails.Company}
-                onChange={(e) =>
-                  setUserDetails({
-                    ...userDetails,
-                    Company: e.target.value
-                  })
-                }
-                disabled={isLoader}
-                required
-              />
-            </div>
-            <div className="mb-3">
-              <label htmlFor="JobTitle" className="block text-xs font-semibold">
-                Job Title
-                <span className="text-[13px] text-[red]">*</span>
-              </label>
-              <input
-                type="text"
-                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
-                id="JobTitle"
-                value={userDetails.Destination}
-                onChange={(e) =>
-                  setUserDetails({
-                    ...userDetails,
-                    Destination: e.target.value
-                  })
-                }
-                disabled={isLoader}
-                required
-              />
-            </div>
-            <div className="mt-4">
-              <button type="submit" className="op-btn op-btn-primary">
-                Login
-              </button>
-              <button
-                type="button"
-                className="op-btn op-btn-ghost ml-2"
-                onClick={handleCloseModal}
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-        </div>
-      </ModalUi>
-    </div>
-  );
-};
-
-export default SSOVerify;

apps/OpenSign/src/pages/Signup.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import Title from "../components/Title";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, NavLink, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
@@ -11,8 +11,7 @@ import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
 import { showTenant } from "../redux/reducers/ShowTenant";
 import { isEnableSubscription } from "../constant/const";
-import { getAppLogo, openInNewTab } from "../constant/Utils";
-import Loader from "../primitives/Loader";
+import { getAppLogo } from "../constant/Utils";
 const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
@@ -34,7 +33,7 @@ const Signup = () => {
   const [lengthValid, setLengthValid] = useState(false);
   const [caseDigitValid, setCaseDigitValid] = useState(false);
   const [specialCharValid, setSpecialCharValid] = useState(false);
-  const [isAuthorize, setIsAuthorize] = useState(false);
+
   const togglePasswordVisibility = () => setShowPassword(!showPassword);
 
   const clearStorage = async () => {
@@ -502,58 +501,80 @@ const Signup = () => {
     setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
   };
   return (
-    <div className="">
+    <div className="bg-white">
       {state.loading && (
-        <div className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50">
-          <Loader />
+        <div
+          style={{
+            position: "fixed",
+            width: "100vw",
+            height: "100vh",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            top: 0,
+            left: 0,
+            zIndex: 2
+          }}
+        >
+          <div
+            style={{
+              position: "fixed",
+              fontSize: "50px",
+              color: "#3ac9d6",
+              top: "50%",
+              left: "45%"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
+
       <Title title={"Signup page"} />
+
       {appInfo && appInfo.applogo ? (
-        <div className="md:p-10 lg:p-16">
-          <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+        <div>
+          <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 ">
             <div className="w-[250px] h-[66px] inline-block overflow-hidden">
               {image && (
                 <img src={image} className="object-contain h-full" alt="logo" />
               )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div>
+              <div className="">
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
+                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
-                        Name <span className="text-[red] text-[13px]">*</span>
+                        Name{" "}
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
                         type="text"
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         required
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Email <span className="text-[red] text-[13px]">*</span>
+                        Email{" "}
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
                         id="email"
-                        type="email"
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        type="text"
+                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={email}
-                        onChange={(e) =>
-                          setEmail(e.target.value?.toLowerCase())
-                        }
+                        onChange={(e) => setEmail(e.target.value)}
                         required
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Phone <span className="text-[red] text-[13px]">*</span>
+                        Phone{" "}
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
                         type="tel"
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                         required
@@ -561,11 +582,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Company{" "}
-                        <span className="text-[red] text-[13px]">*</span>
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
                         type="text"
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                         required
@@ -573,11 +594,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Job Title{" "}
-                        <span className="text-[red] text-[13px]">*</span>
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <input
                         type="text"
-                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
                         required
@@ -585,19 +606,21 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Password{" "}
-                        <span className="text-[red] text-[13px]">*</span>
+                        <span style={{ color: "red", fontSize: 13 }}>*</span>
                       </label>
                       <div className="relative">
                         <input
                           type={showPassword ? "text" : "password"}
-                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                           name="password"
                           value={password}
                           onChange={(e) => handlePasswordChange(e)}
                           required
                         />
                         <span
-                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content`}
+                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
+                            showPassword ? "text-[#007bff]" : "text-black"
+                          }`}
                           onClick={togglePasswordVisibility}
                         >
                           {showPassword ? (
@@ -635,62 +658,34 @@ const Signup = () => {
                             {specialCharValid ? "✓" : "✗"} Password should
                             contain special character
                           </p>
+                          {/* </>
+                          )} */}
                         </div>
                       )}
-                      <div className="mt-2.5 ml-1 flex flex-row items-center">
-                        <input
-                          type="checkbox"
-                          className="op-checkbox op-checkbox-sm"
-                          id="termsandcondition"
-                          checked={isAuthorize}
-                          onChange={(e) => setIsAuthorize(e.target.checked)}
-                          required
-                        />
-                        <label
-                          className="text-xs cursor-pointer ml-1 mb-0"
-                          htmlFor="termsandcondition"
-                        >
-                          I agree to the
-                        </label>
-                        <span
-                          className="underline cursor-pointer ml-1"
-                          onClick={() =>
-                            openInNewTab(
-                              "https://www.opensignlabs.com/terms-and-conditions"
-                            )
-                          }
-                        >
-                          Terms of Service
-                        </span>
-                        <span>.</span>
-                      </div>
                     </div>
                   </div>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
+                  <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
                     <button
                       type="submit"
-                      className="op-btn op-btn-primary"
+                      className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
                       disabled={state.loading}
                     >
                       {state.loading ? "Loading..." : "Register"}
                     </button>
-                    <button
-                      type="button"
-                      className="op-btn op-btn-secondary"
-                      disabled={state.loading}
-                      onClick={() =>
-                        navigate(location.search ? "/" + location.search : "/")
-                      }
+                    <NavLink
+                      className="rounded-sm cursor-pointer bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] w-full py-3 shadow uppercase"
+                      to={location.search ? "/" + location.search : "/"}
+                      style={width < 768 ? { textAlign: "center" } : {}}
                     >
                       Login
-                    </button>
+                    </NavLink>
                   </div>
                 </form>
               </div>
               {width >= 768 && (
                 <div className="self-center">
                   <div className="mx-auto md:w-[300px] lg:w-[400px] xl:w-[500px]">
-                    <img src={login_img} alt="loader" width="100%" />
+                    <img src={login_img} alt="bisec" width="100%" />
                   </div>
                 </div>
               )}
@@ -699,9 +694,16 @@ const Signup = () => {
           <Alert type={state.alertType}>{state.alertMsg}</Alert>
         </div>
       ) : (
-        <div className="fixed w-full h-full flex justify-center items-center z-50">
-          <Loader />
-        </div>
+        <div
+          style={{
+            position: "fixed",
+            fontSize: "50px",
+            color: "#3ac9d6",
+            top: "50%",
+            left: "45%"
+          }}
+          className="loader-37"
+        ></div>
       )}
     </div>
   );

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -2,10 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
-import { isEnableSubscription } from "../constant/const";
-import Confetti from "react-confetti";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import axios from "axios";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
+import Loader from "../primitives/LoaderWithMsg";
+import loader from "../assets/images/loader2.gif";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -47,7 +47,7 @@ import Title from "../components/Title";
 import ModalUi from "../primitives/ModalUi";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
 import VerifyEmail from "../components/pdf/VerifyEmail";
-import Loader from "../primitives/Loader";
+
 //For signYourself inProgress section signer can add sign and complete doc sign.
 function SignYourSelf() {
   const [pdfDetails, setPdfDetails] = useState([]);
@@ -70,6 +70,7 @@ function SignYourSelf() {
   const [dragKey, setDragKey] = useState();
   const [signKey, setSignKey] = useState();
   const [imgWH, setImgWH] = useState({});
+  const [isCeleb, setIsCeleb] = useState(false);
   const [pdfNewWidth, setPdfNewWidth] = useState();
   const [pdfOriginalWidth, setPdfOriginalWidth] = useState();
   const [successEmail, setSuccessEmail] = useState(false);
@@ -108,7 +109,6 @@ function SignYourSelf() {
   const [isDontShow, setIsDontShow] = useState(false);
   const [extUserId, setExtUserId] = useState("");
   const [isCompleted, setIsCompleted] = useState(false);
-  const [isCelebration, setIsCelebration] = useState(false);
   const [pdfArrayBuffer, setPdfArrayBuffer] = useState("");
   const [activeMailAdapter, setActiveMailAdapter] = useState("");
   const [isEmailVerified, setIsEmailVerified] = useState(true);
@@ -229,12 +229,31 @@ function SignYourSelf() {
           setIsUiLoading(false);
           setIsSignPad(false);
           setIsEmail(true);
-          setIsCelebration(true);
           setXyPostion([]);
           setSignBtnPosition([]);
-          setTimeout(() => {
-            setIsCelebration(false);
-          }, 5000);
+        }
+      }
+
+      if (!isCompleted) {
+        //check current user email verified or not
+        const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
+        let isEmailVerified;
+        isEmailVerified = currentUser?.emailVerified;
+        if (isEmailVerified) {
+          setIsEmailVerified(isEmailVerified);
+        } else {
+          try {
+            const userQuery = new Parse.Query(Parse.User);
+            const user = await userQuery.get(currentUser.objectId, {
+              sessionToken: localStorage.getItem("accesstoken")
+            });
+            if (user) {
+              isEmailVerified = user?.get("emailVerified");
+              setIsEmailVerified(isEmailVerified);
+            }
+          } catch (e) {
+            setHandleError("Error: Something went wrong!");
+          }
         }
       }
     } else if (
@@ -461,13 +480,13 @@ function SignYourSelf() {
         Width: widgetTypeExist
           ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getWidth
           : dragTypeValue === "initials"
-            ? defaultWidthHeight(dragTypeValue).width
-            : "",
+          ? defaultWidthHeight(dragTypeValue).width
+          : "",
         Height: widgetTypeExist
           ? calculateInitialWidthHeight(dragTypeValue, widgetValue).getHeight
           : dragTypeValue === "initials"
-            ? defaultWidthHeight(dragTypeValue).height
-            : "",
+          ? defaultWidthHeight(dragTypeValue).height
+          : "",
         options: addWidgetOptions(dragTypeValue)
       };
 
@@ -584,122 +603,94 @@ function SignYourSelf() {
   };
   //function for send placeholder's co-ordinate(x,y) position embed signature url or stamp url
   async function embedWidgetsData() {
-    //check current user email is verified or not
-    const currentUser = JSON.parse(JSON.stringify(Parse.User.current()));
-    let isEmailVerified;
-    isEmailVerified = currentUser?.emailVerified;
-    if (isEmailVerified) {
-      setIsEmailVerified(isEmailVerified);
-    } else {
-      try {
-        const userQuery = new Parse.Query(Parse.User);
-        const user = await userQuery.get(currentUser.objectId, {
-          sessionToken: localStorage.getItem("accesstoken")
-        });
-        if (user) {
-          isEmailVerified = user?.get("emailVerified");
-          setIsEmailVerified(isEmailVerified);
-        }
-      } catch (e) {
-        setHandleError("Error: Something went wrong!");
-      }
-    }
-    if (isEmailVerified) {
-      let showAlert = false,
-        isSignatureExist = false;
-      try {
-        for (let i = 0; i < xyPostion?.length; i++) {
-          const requiredWidgets = xyPostion[i].pos.filter(
-            (position) => position.type !== "checkbox"
-          );
-          if (requiredWidgets && requiredWidgets?.length > 0) {
-            let checkSigned;
-            for (let i = 0; i < requiredWidgets?.length; i++) {
-              checkSigned = requiredWidgets[i]?.options?.response;
-              if (!checkSigned) {
-                const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
-                let checkDefaultSigned =
-                  requiredWidgets[i]?.options?.defaultValue;
-                if (!checkSignUrl) {
-                  if (!checkDefaultSigned) {
-                    if (!showAlert) {
-                      showAlert = true;
-                    }
+    let showAlert = false;
+    try {
+      for (let i = 0; i < xyPostion?.length; i++) {
+        const requiredWidgets = xyPostion[i].pos.filter(
+          (position) => position.type !== "checkbox"
+        );
+        if (requiredWidgets && requiredWidgets?.length > 0) {
+          let checkSigned;
+          for (let i = 0; i < requiredWidgets?.length; i++) {
+            checkSigned = requiredWidgets[i]?.options?.response;
+            if (!checkSigned) {
+              const checkSignUrl = requiredWidgets[i]?.pos?.SignUrl;
+              let checkDefaultSigned =
+                requiredWidgets[i]?.options?.defaultValue;
+              if (!checkSignUrl) {
+                if (!checkDefaultSigned) {
+                  if (!showAlert) {
+                    showAlert = true;
                   }
                 }
               }
             }
           }
-          //condition to check exist signature widget or not
-          if (!isSignatureExist) {
-            isSignatureExist = xyPostion[i].pos.some(
-              (data) => data?.type === "signature"
-            );
-          }
         }
-        if (xyPostion.length === 0 || !isSignatureExist) {
-          setIsAlert({
-            header: "Fields required",
-            isShow: true,
-            alertMessage:
-              "Please ensure there's at least one signature widget added"
-          });
-          return;
-        } else if (showAlert) {
-          setIsAlert({
-            isShow: true,
-            alertMessage:
-              "Please ensure all field is accurately filled and meets all requirements."
-          });
-          return;
-        } else {
-          setIsUiLoading(true);
-          const existingPdfBytes = pdfArrayBuffer;
-          // Load a PDFDocument from the existing PDF bytes
-          try {
-            const pdfDoc = await PDFDocument.load(existingPdfBytes);
-            const isSignYourSelfFlow = true;
-            const extUserPtr = pdfDetails[0].ExtUserPtr;
-            const HeaderDocId = extUserPtr?.HeaderDocId;
-            //embed document's object id to all pages in pdf document
-            if (!HeaderDocId) {
-              await embedDocId(pdfDoc, documentId, allPages);
-            }
-            //embed multi signature in pdf
-            const pdfBytes = await multiSignEmbed(
-              xyPostion,
-              pdfDoc,
-              pdfOriginalWidth,
-              isSignYourSelfFlow,
-              containerWH
-            );
-            // console.log("pdf", pdfBytes);
-            //function for call to embed signature in pdf and get digital signature pdf
-            await signPdfFun(pdfBytes, documentId);
-          } catch (err) {
-            setIsUiLoading(false);
-            if (err && err.message.includes("is encrypted.")) {
-              setIsAlert({
-                isShow: true,
-                alertMessage: `Currently encrypted pdf files are not supported.`
-              });
-            } else {
-              console.log("err in signing", err);
-              setIsAlert({
-                isShow: true,
-                alertMessage: `Something went wrong.`
-              });
-            }
-          }
-        }
-      } catch (err) {
-        console.log("err in embedselfsign ", err);
-        setIsUiLoading(false);
+      }
+      if (xyPostion.length === 0) {
         setIsAlert({
           isShow: true,
-          alertMessage: "something went wrong, please try again later."
+          alertMessage: "Please complete your signature!"
         });
+        return;
+      } else if (showAlert) {
+        setIsAlert({
+          isShow: true,
+          alertMessage: "Please complete your signature!"
+        });
+        return;
+      } else {
+        setIsCeleb(true);
+        setTimeout(() => {
+          setIsCeleb(false);
+        }, 3000);
+        setIsUiLoading(true);
+        const existingPdfBytes = pdfArrayBuffer;
+        // Load a PDFDocument from the existing PDF bytes
+        try {
+          const pdfDoc = await PDFDocument.load(existingPdfBytes);
+          const isSignYourSelfFlow = true;
+          const extUserPtr = pdfDetails[0].ExtUserPtr;
+          const HeaderDocId = extUserPtr?.HeaderDocId;
+          //embed document's object id to all pages in pdf document
+          if (!HeaderDocId) {
+            await embedDocId(pdfDoc, documentId, allPages);
+          }
+          //embed multi signature in pdf
+          const pdfBytes = await multiSignEmbed(
+            xyPostion,
+            pdfDoc,
+            pdfOriginalWidth,
+            isSignYourSelfFlow,
+            containerWH
+          );
+          // console.log("pdf", pdfBytes);
+          //function for call to embed signature in pdf and get digital signature pdf
+          await signPdfFun(pdfBytes, documentId);
+        } catch (err) {
+          setIsUiLoading(false);
+          if (err && err.message.includes("is encrypted.")) {
+            setIsAlert({
+              isShow: true,
+              alertMessage: `Currently encrypted pdf files are not supported.`
+            });
+          } else {
+            console.log("err in signing", err);
+            setIsAlert({
+              isShow: true,
+              alertMessage: `Something went wrong.`
+            });
+          }
+        }
       }
+    } catch (err) {
+      console.log("err in embedselfsign ", err);
+      setIsUiLoading(false);
+      setIsAlert({
+        isShow: true,
+        alertMessage: "something went wrong, please try again later."
+      });
     }
   }
   //function for get digital signature
@@ -722,13 +713,13 @@ function SignYourSelf() {
     // for adding it in completion certificate
     let getSignature;
     for (let item of xyPostion) {
-      if (!getSignature) {
-        const typeExist = item.pos.some((data) => data?.type);
-        if (typeExist) {
-          getSignature = item.pos.find((data) => data?.type === "signature");
-        } else {
-          getSignature = item.pos.find((data) => !data.isStamp);
-        }
+      const typeExist = item.pos.some((data) => data?.type);
+      if (typeExist) {
+        getSignature = item.pos.find((data) => data?.type === "signature");
+        break;
+      } else {
+        getSignature = item.pos.find((data) => !data.isStamp);
+        break;
       }
     }
     let base64Sign = getSignature.SignUrl;
@@ -1092,29 +1083,38 @@ function SignYourSelf() {
     <DndProvider backend={HTML5Backend}>
       <Title title={"Self Sign"} />
       {isLoading.isLoad ? (
-        <LoaderWithMsg isLoading={isLoading} />
+        <Loader isLoading={isLoading} />
       ) : handleError ? (
         <HandleError handleError={handleError} />
       ) : (
         <div>
           {isUiLoading && (
-            <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
-              <Loader />
-              <span className="font-bold text-[13px]">
+            <div
+              style={{
+                position: "absolute",
+                height: "100vh",
+                width: "100%",
+                display: "flex",
+                justifyContent: "center",
+                flexDirection: "column",
+                alignItems: "center",
+                zIndex: "999",
+                backgroundColor: "#e6f2f2",
+                opacity: 0.8
+              }}
+            >
+              <img
+                alt="no img"
+                src={loader}
+                style={{ width: "100px", height: "100px" }}
+              />
+              <span style={{ fontSize: "13px", fontWeight: "bold" }}>
                 This might take some time
               </span>
             </div>
           )}
-          {isCelebration && (
-            <div className="relative z-[999]">
-              <Confetti width={window.innerWidth} height={window.innerHeight} />
-            </div>
-          )}
 
-          <div
-            className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
-            ref={divRef}
-          >
+          <div className="signatureContainer" ref={divRef}>
             {!isEmailVerified && (
               <VerifyEmail
                 isVerifyModal={isVerifyModal}
@@ -1159,8 +1159,9 @@ function SignYourSelf() {
               }}
             >
               <ModalUi
+                headerColor={"#dc3545"}
                 isOpen={isAlert.isShow}
-                title={isAlert?.header || "Alert"}
+                title={"Alert"}
                 handleClose={() => {
                   setIsAlert({
                     isShow: false,
@@ -1168,24 +1169,55 @@ function SignYourSelf() {
                   });
                 }}
               >
-                <div className="p-[20px] h-full">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>{isAlert.alertMessage}</p>
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
+                  <button
+                    onClick={() => {
+                      setIsAlert({
+                        isShow: false,
+                        alertMessage: ""
+                      });
+                    }}
+                    type="button"
+                    className="finishBtn cancelBtn"
+                  >
+                    Ok
+                  </button>
                 </div>
               </ModalUi>
 
               {/* this modal is used show this document is already sign */}
               <ModalUi
                 isOpen={showAlreadySignDoc.status}
-                title={"Document signed"}
+                title={"Sign Documents"}
                 handleClose={() => {
                   setShowAlreadySignDoc({ status: false });
                 }}
               >
-                <div className="p-[20px] h-full">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>{showAlreadySignDoc.mssg}</p>
-                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   <button
-                    className="op-btn op-btn-ghost shadow-md"
+                    className="finishBtn cancelBtn"
                     onClick={() => setShowAlreadySignDoc({ status: false })}
                   >
                     Close
@@ -1239,6 +1271,7 @@ function SignYourSelf() {
               <EmailComponent
                 isEmail={isEmail}
                 pdfUrl={pdfUrl}
+                isCeleb={isCeleb}
                 setIsEmail={setIsEmail}
                 pdfName={pdfDetails[0] && pdfDetails[0].Name}
                 setSuccessEmail={setSuccessEmail}
@@ -1311,7 +1344,7 @@ function SignYourSelf() {
                 maxHeight: window.innerHeight - 70 + "px",
                 backgroundColor: "white"
               }}
-              className="overflow-y-auto hide-scrollbar"
+              className="autoSignScroll"
             >
               {!isCompleted ? (
                 <div>
@@ -1323,6 +1356,7 @@ function SignYourSelf() {
                     handleDivClick={handleDivClick}
                     handleMouseLeave={handleMouseLeave}
                     isDragSign={isDragSign}
+                    themeColor={themeColor}
                     dragStamp={dragStamp}
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
@@ -1343,22 +1377,31 @@ function SignYourSelf() {
         </div>
       )}
       <ModalUi
+        headerColor={"#dc3545"}
         isOpen={validateAlert}
         title={"Validation alert"}
         handleClose={() => {
           setValidateAlert(false);
         }}
       >
-        <div className="p-[20px] h-full">
+        <div style={{ height: "100%", padding: 20 }}>
           <p>
             The input does not meet the criteria set by the regular expression.
           </p>
 
-          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+          <div
+            style={{
+              height: "1px",
+              backgroundColor: "#9f9f9f",
+              width: "100%",
+              marginTop: "15px",
+              marginBottom: "15px"
+            }}
+          ></div>
           <button
             onClick={() => setValidateAlert(false)}
             type="button"
-            className="op-btn op-btn-ghost shadow-md"
+            className="finishBtn cancelBtn"
           >
             Close
           </button>

apps/OpenSign/src/pages/TemplatePlaceholder.js

@@ -3,13 +3,13 @@ import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { useParams, useNavigate } from "react-router-dom";
 import axios from "axios";
 import "../styles/signature.css";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, themeColor } from "../constant/const";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useDrag, useDrop } from "react-dnd";
 import WidgetComponent from "../components/pdf/WidgetComponent";
 import Tour from "reactour";
-import LoaderWithMsg from "../primitives/LoaderWithMsg";
+import Loader from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
@@ -36,7 +36,6 @@ import AddRoleModal from "../components/pdf/AddRoleModal";
 import PlaceholderCopy from "../components/pdf/PlaceholderCopy";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import DropdownWidgetOption from "../components/pdf/DropdownWidgetOption";
-import Parse from "parse";
 const TemplatePlaceholder = () => {
   const navigate = useNavigate();
   const { templateId } = useParams();
@@ -705,29 +704,35 @@ const TemplatePlaceholder = () => {
           Name: pdfDetails[0]?.Name || "",
           Note: pdfDetails[0]?.Note || "",
           Description: pdfDetails[0]?.Description || "",
-          SendinOrder: pdfDetails[0]?.SendinOrder || false,
-          AutomaticReminders: pdfDetails[0]?.AutomaticReminders,
-          RemindOnceInEvery: parseInt(pdfDetails[0]?.RemindOnceInEvery),
-          NextReminderDate: pdfDetails[0]?.NextReminderDate
+          SendinOrder: pdfDetails[0]?.SendinOrder || false
         };
-        const updateTemplate = new Parse.Object("contracts_Template");
-        updateTemplate.id = templateId;
-        for (const key in data) {
-          updateTemplate.set(key, data[key]);
-        }
-        await updateTemplate.save(null, {
-          sessionToken: localStorage.getItem("accesstoken")
-        });
 
-        setIsCreateDocModal(true);
-        setIsMailSend(true);
-        const loadObj = {
-          isLoad: false
-        };
-        setIsLoading(loadObj);
+        await axios
+          .put(
+            `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
+              "_appName"
+            )}_Template/${templateId}`,
+            data,
+            {
+              headers: {
+                "Content-Type": "application/json",
+                "X-Parse-Application-Id": localStorage.getItem("parseAppId"),
+                "X-Parse-Session-Token": localStorage.getItem("accesstoken")
+              }
+            }
+          )
+          .then(() => {
+            setIsCreateDocModal(true);
+            setIsMailSend(true);
+            const loadObj = {
+              isLoad: false
+            };
+            setIsLoading(loadObj);
+          })
+          .catch((err) => {
+            console.log("axois err ", err);
+          });
       } catch (e) {
-        setIsLoading(false);
-        alert("Something went wrong, please try again later.");
         console.log("error", e);
       }
     } else {
@@ -1202,19 +1207,17 @@ const TemplatePlaceholder = () => {
     setIsCheckbox(false);
   };
 
+  console.log("signerpos", signerPos);
   return (
     <div>
       <Title title={"Template"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
-          <LoaderWithMsg isLoading={isLoading} />
+          <Loader isLoading={isLoading} />
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div
-            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
-            ref={divRef}
-          >
+          <div className="signatureContainer" ref={divRef}>
             {/* this component used for UI interaction and show their functionality */}
             {!checkTourStatus && (
               //this tour component used in your html component where you want to put
@@ -1257,21 +1260,23 @@ const TemplatePlaceholder = () => {
             >
               {/* this modal is used show alert set placeholder for all signers before send mail */}
               <ModalUi
+                headerColor={"#dc3545"}
                 isOpen={isSendAlert}
                 title={"Fields required"}
                 handleClose={() => setIsSendAlert(false)}
               >
-                <div className="h-full p-[20px]">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>Please add at least one signature field for all roles.</p>
                 </div>
               </ModalUi>
               <ModalUi
+                headerColor={"#dc3545"}
                 isOpen={!IsReceipent}
                 title={"Roles"}
                 handleClose={() => setIsReceipent(true)}
               >
-                <div className="h-full p-[20px] text-center font-medium">
-                  <p>Please add roles first</p>
+                <div style={{ height: "100%", padding: 20 }}>
+                  <p>Please add a role</p>
                 </div>
               </ModalUi>
               {/* this modal is used show send mail  message and after send mail success message */}
@@ -1280,18 +1285,32 @@ const TemplatePlaceholder = () => {
                 title={"Create Document"}
                 handleClose={() => setIsCreateDocModal(false)}
               >
-                <div className="h-full p-[20px]">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>
                     Do you want to create a document using the template you just
                     created ?
                   </p>
-                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   {currentEmail.length > 0 && (
                     <>
                       <button
-                        onClick={() => handleCreateDocModal()}
+                        onClick={() => {
+                          handleCreateDocModal();
+                        }}
+                        style={{
+                          background: themeColor,
+                          color: "white"
+                        }}
                         type="button"
-                        className="op-btn op-btn-primary"
+                        className="finishBtn"
                       >
                         Yes
                       </button>
@@ -1300,7 +1319,7 @@ const TemplatePlaceholder = () => {
                           setIsCreateDocModal(false);
                         }}
                         type="button"
-                        className="op-btn op-btn-secondary ml-2"
+                        className="finishBtn cancelBtn"
                       >
                         No
                       </button>
@@ -1308,21 +1327,32 @@ const TemplatePlaceholder = () => {
                   )}
                 </div>
               </ModalUi>
-              {isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
+              {isCreateDoc && <Loader isLoading={isLoading} />}
               <ModalUi
+                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div className="h-full p-[20px]">
+                <div style={{ height: "100%", padding: 20 }}>
                   <p>Please select signer for add placeholder!</p>
-                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+                  <div
+                    style={{
+                      height: "1px",
+                      backgroundColor: "#9f9f9f",
+                      width: "100%",
+                      marginTop: "15px",
+                      marginBottom: "15px"
+                    }}
+                  ></div>
                   <button
-                    onClick={() => setIsShowEmail(false)}
+                    onClick={() => {
+                      setIsShowEmail(false);
+                    }}
                     type="button"
-                    className="op-btn op-btn-primary"
+                    className="finishBtn cancelBtn"
                   >
                     Ok
                   </button>
@@ -1372,7 +1402,7 @@ const TemplatePlaceholder = () => {
                 // signerObjId={signerObjId}
                 Id={uniqueId}
               />
-              {/* pdf header which contain finish, back button */}
+              {/* pdf header which contain funish back button */}
               <Header
                 completeBtnTitle={"Save"}
                 isPlaceholder={true}
@@ -1475,10 +1505,10 @@ const TemplatePlaceholder = () => {
               </div>
             ) : (
               <div>
-                <div className="hidden md:block w-[180px] h-full bg-base-100">
+                <div className="signerComponent">
                   <div
                     style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                    className="overflow-y-auto hide-scrollbar"
+                    className="autoSignScroll"
                   >
                     <SignerListPlace
                       isMailSend={isMailSend}

apps/OpenSign/src/pages/UserProfile.js

@@ -1,8 +1,4 @@
-import React, {
-  useState,
-  useEffect
-  // useRef
-} from "react";
+import React, { useState, useEffect } from "react";
 import { Navigate, useNavigate } from "react-router-dom";
 import Parse from "parse";
 import { SaveFileSize } from "../constant/saveFileSize";
@@ -12,11 +8,10 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
 import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
 import Upgrade from "../primitives/Upgrade";
 import ModalUi from "../primitives/ModalUi";
-import Loader from "../primitives/Loader";
 
 function UserProfile() {
   const navigate = useNavigate();
@@ -32,10 +27,6 @@ function UserProfile() {
   const [percentage, setpercentage] = useState(0);
   const [isDisableDocId, setIsDisableDocId] = useState(false);
   const [isSubscribe, setIsSubscribe] = useState(false);
-  // const [publicUserName, setPublicUserName] = useState(
-  //   extendUser && extendUser?.[0]?.UserName
-  // );
-  // const previousPublicUserName = useRef(publicUserName);
   const [company, setCompany] = useState(
     extendUser && extendUser?.[0]?.Company
   );
@@ -46,7 +37,6 @@ function UserProfile() {
   const [otp, setOtp] = useState("");
   const [otpLoader, setOtpLoader] = useState(false);
   const [isEmailVerified, setIsEmailVerified] = useState(false);
-  // const [userNameError, setUserNameError] = useState("");
   useEffect(() => {
     getUserDetail();
   }, []);
@@ -84,72 +74,46 @@ function UserProfile() {
       }
     }
   };
-  //function to check public username already exist
-  // const handleCheckPublicUserName = async () => {
-  //   try {
-  //     const res = await Parse.Cloud.run("getpublicusername", {
-  //       username: publicUserName
-  //     });
-  //     if (res) {
-  //       setIsLoader(false);
-  //       setUserNameError("user name already exist");
-  //       setTimeout(() => {
-  //         setUserNameError("");
-  //       }, 3000);
-  //       return res;
-  //     }
-  //   } catch (e) {
-  //     console.log("error in getpublicusername cloud function");
-  //   }
-  // };
   const handleSubmit = async (e) => {
     e.preventDefault();
-    let phn = Phone,
-      res = "";
-    //condition to call cloud function when user change publicUserName
-    // if (previousPublicUserName.current !== publicUserName) {
-    //   res = await handleCheckPublicUserName();
-    // }
-    if (!res) {
-      setIsLoader(true);
-      try {
-        const userQuery = Parse.Object.extend("_User");
-        const query = new Parse.Query(userQuery);
-        await query.get(UserProfile.objectId).then((object) => {
-          object.set("name", name);
-          object.set("ProfilePic", Image);
-          object.set("phone", phn || "");
-          object.save().then(
-            async (response) => {
-              if (response) {
-                let res = response.toJSON();
-                let rr = JSON.stringify(res);
-                localStorage.setItem("UserInformation", rr);
-                SetName(res.name);
-                SetPhone(res?.phone || "");
-                setImage(res.ProfilePic);
-                localStorage.setItem("username", res.name);
-                localStorage.setItem("profileImg", res.ProfilePic);
-                await updateExtUser({
-                  Name: res.name,
-                  Phone: res?.phone || ""
-                });
-                alert("Profile updated successfully.");
-                setEditMode(false);
-                setIsLoader(false);
-                //navigate("/dashboard/35KBoSgoAK");
-              }
-            },
-            (error) => {
-              alert("Something went wrong.");
-              console.error("Error while updating tour", error);
-              setIsLoader(false);
+    setIsLoader(true);
+    let phn = Phone;
+
+    try {
+      const tour = Parse.Object.extend("_User");
+      const query = new Parse.Query(tour);
+
+      await query.get(UserProfile.objectId).then((object) => {
+        object.set("name", name);
+        object.set("ProfilePic", Image);
+        object.set("phone", phn);
+
+        object.save().then(
+          async (response) => {
+            if (response) {
+              let res = response.toJSON();
+              let rr = JSON.stringify(res);
+              localStorage.setItem("UserInformation", rr);
+              SetName(res.name);
+              SetPhone(res.phone);
+              setImage(res.ProfilePic);
+              localStorage.setItem("username", res.name);
+              localStorage.setItem("profileImg", res.ProfilePic);
+              await updateExtUser({ Name: res.name, Phone: res.phone });
+              alert("Profile updated successfully.");
+              setEditMode(false);
+              navigate("/dashboard/35KBoSgoAK");
             }
-          );
-        });
-      } catch (error) {
-        console.log("err", error);
-      }
+          },
+          (error) => {
+            alert("Something went wrong.");
+            console.error("Error while updating tour", error);
+            setIsLoader(false);
+          }
+        );
+      });
+    } catch (error) {
+      console.log("err", error);
     }
   };
 
@@ -158,15 +122,14 @@ function UserProfile() {
     const extClass = localStorage.getItem("extended_class");
     const extData = JSON.parse(localStorage.getItem("Extand_Class"));
     const ExtUserId = extData[0].objectId;
+
     const body = {
-      Phone: obj?.Phone || "",
+      Phone: obj.Phone,
       Name: obj.Name,
       HeaderDocId: isDisableDocId,
       JobTitle: jobTitle,
       Company: company
-      // UserName: publicUserName || ""
     };
-
     await axios.put(
       parseBaseUrl + "classes/" + extClass + "/" + ExtUserId,
       body,
@@ -184,6 +147,7 @@ function UserProfile() {
 
     const json = JSON.parse(JSON.stringify([res]));
     const extRes = JSON.stringify(json);
+
     localStorage.setItem("Extand_Class", extRes);
     // console.log("updateRes ", updateRes);
   };
@@ -277,45 +241,29 @@ function UserProfile() {
     setOtpLoader(false);
     alert("OTP sent on you email");
   };
-  //function to handle onchange username and restrict 6-characters username for free users
-  // const handleOnchangeUserName = (e) => {
-  //   const value = e.target.value;
-  //   if (value.length > 6 && !isSubscribe) {
-  //     setUserNameError("Please upgrade to allow more than 6 characters.");
-  //     setTimeout(() => {
-  //       setUserNameError("");
-  //     }, 2000);
-  //   } else {
-  //     setPublicUserName(e.target.value);
-  //   }
-  // };
-  const handleCancel = () => {
-    setEditMode(false);
-    SetName(localStorage.getItem("username"));
-    SetPhone(UserProfile && UserProfile.phone);
-    setImage(localStorage.getItem("profileImg"));
-    // setPublicUserName(extendUser && extendUser?.[0]?.UserName);
-    setCompany(extendUser && extendUser?.[0]?.Company);
-    setJobTitle(extendUser?.[0]?.JobTitle);
-    setIsDisableDocId(extendUser?.[0]?.HeaderDocId);
-  };
   return (
     <React.Fragment>
       <Title title={"Profile"} />
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
-        <div className="flex justify-center items-center w-full relative">
-          {/* {userNameError && (
-            <div
-              className={`z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`}
-            >
-              {userNameError}
-            </div>
-          )} */}
-          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
+        <div className="flex justify-center items-center w-full">
+          <div className="bg-white flex flex-col justify-center shadow rounded w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
@@ -327,7 +275,7 @@ function UserProfile() {
               {editmode && (
                 <input
                   type="file"
-                  className="op-file-input op-file-input-bordered op-file-input-sm max-w-[270px] mt-4 text-sm"
+                  className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
                   accept="image/png, image/gif, image/jpeg"
                   onChange={(e) => {
                     let files = e.target.files;
@@ -353,7 +301,7 @@ function UserProfile() {
             <ul className="w-full flex flex-col p-2 text-sm">
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1.5" : "py-2"
+                  editmode ? "py-1" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Name:</span>{" "}
@@ -361,7 +309,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={name}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
@@ -370,14 +318,14 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1.5" : "py-2"
+                  editmode ? "py-1" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Phone:</span>{" "}
                 {editmode ? (
                   <input
                     type="text"
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
                     onChange={(e) => SetPhone(e.target.value)}
                     value={Phone}
                   />
@@ -391,7 +339,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1.5" : "py-2"
+                  editmode ? "py-1" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Company:</span>{" "}
@@ -399,7 +347,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={company}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
                     onChange={(e) => setCompany(e.target.value)}
                   />
                 ) : (
@@ -408,7 +356,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1.5" : "py-2"
+                  editmode ? "py-1" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Job title:</span>{" "}
@@ -416,7 +364,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={jobTitle}
-                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
+                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
                     onChange={(e) => setJobTitle(e.target.value)}
                   />
                 ) : (
@@ -442,37 +390,6 @@ function UserProfile() {
                   )}
                 </span>
               </li>
-              {/* {isEnableSubscription && (
-                <li className="flex justify-between items-center border-t-[1px] border-gray-300 py-2 break-all">
-                  <span className="font-semibold">
-                    Public profile :{" "}
-                    <Tooltip
-                      message={`this is your public URL. Copy or share it
-                   with the signer, and you will be able to see
-                   all your publicly set templates.`}
-                    />
-                  </span>
-                  <div className="flex text-xs items-center">
-                    <span>opensign-me.vercel.app/</span>
-                    {editmode ? (
-                      <input
-                        onChange={handleOnchangeUserName}
-                        value={publicUserName}
-                        disabled={!editmode}
-                        placeholder="enter user name"
-                        className="op-input op-input-bordered focus:outline-none hover:border-base-content op-input-xs"
-                      />
-                    ) : (
-                      <input
-                        value={extendUser?.[0]?.UserName}
-                        disabled
-                        placeholder="enter user name"
-                        className="op-input op-input-bordered op-input-xs"
-                      />
-                    )}
-                  </div>
-                </li>
-              )} */}
               <li className="border-y-[1px] border-gray-300 break-all">
                 <div className="flex justify-between items-center py-2">
                   <span
@@ -487,23 +404,28 @@ function UserProfile() {
                       url={
                         "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
                       }
-                    />
+                      isSubscribe={isSubscribe}
+                    />{" "}
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
-                  </span>
+                  </span>{" "}
                   <label
-                    className={`${
+                    className={
                       isSubscribe || !isEnableSubscription
-                        ? `${editmode ? "cursor-pointer" : ""}`
-                        : "pointer-events-none opacity-50"
-                    } relative block items-center mb-0`}
+                        ? `${
+                            editmode ? "cursor-pointer" : ""
+                          } relative inline-flex items-center mb-0`
+                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
+                    }
                   >
                     <input
                       disabled={editmode ? false : true}
-                      type="checkbox"
-                      className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white"
                       checked={isDisableDocId}
                       onChange={handleDisableDocId}
+                      type="checkbox"
+                      value=""
+                      className="sr-only peer"
                     />
+                    <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div>
                   </label>
                 </div>
                 {!isEnableSubscription && (
@@ -515,29 +437,44 @@ function UserProfile() {
                 )}
               </li>
             </ul>
-            <div className="flex justify-center gap-2 pt-2 pb-3 md:pt-3 md:pb-4">
+            <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4">
+              {editmode ? (
+                <button
+                  type="button"
+                  onClick={handleSubmit}
+                  className="rounded shadow focus:outline-none border-[2px] border-[#15b4e9] bg-white text-[#15b4e9] px-4 py-2 mr-4"
+                >
+                  Save
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => {
+                    setEditMode(true);
+                  }}
+                  className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4"
+                >
+                  Edit
+                </button>
+              )}
               <button
                 type="button"
-                onClick={(e) =>
-                  editmode ? handleSubmit(e) : setEditMode(true)
-                }
-                className="op-btn op-btn-primary"
-              >
-                {editmode ? "Save" : "Edit"}
-              </button>
-              <button
-                type="button"
-                onClick={() =>
-                  editmode ? handleCancel() : navigate("/changepassword")
-                }
-                className={`op-btn ${
-                  editmode ? "op-btn-ghost" : "op-btn-secondary"
+                onClick={() => {
+                  if (editmode) {
+                    setEditMode(false);
+                  } else {
+                    navigate("/changepassword");
+                  }
+                }}
+                className={`rounded shadow focus:outline-none text-white bg-[#3598dc]  ${
+                  editmode ? "px-4 py-2 " : "p-2"
                 }`}
               >
                 {editmode ? "Cancel" : "Change Password"}
               </button>
             </div>
           </div>
+
           {isVerifyModal && (
             <ModalUi
               isOpen
@@ -545,29 +482,43 @@ function UserProfile() {
               handleClose={handleCloseVerifyModal}
             >
               {otpLoader ? (
-                <div className="h-[150px] flex justify-center items-center">
-                  <Loader />
+                <div
+                  style={{
+                    height: "150px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  }}
+                >
+                  <div
+                    style={{
+                      fontSize: "45px",
+                      color: "#3dd3e0"
+                    }}
+                    className="loader-37"
+                  ></div>
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
-                  <div className="px-6 py-3 text-base-content">
+                  <div className="px-6 py-3">
                     <label className="mb-2">Enter OTP</label>
                     <input
                       required
                       type="tel"
                       pattern="[0-9]{4}"
-                      className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
+                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                       placeholder="Enter OTP received over email"
                       value={otp}
                       onChange={(e) => setOtp(e.target.value)}
                     />
                   </div>
-                  <div className="px-6 mb-3">
-                    <button type="submit" className="op-btn op-btn-primary">
+                  <hr />
+                  <div className="px-6 my-3">
+                    <button type="submit" className={submitBtn}>
                       Verify
                     </button>
                     <button
-                      className="op-btn op-btn-secondary ml-2"
+                      className={`${rejectBtn} ml-2`}
                       onClick={(e) => handleResend(e)}
                     >
                       Resend

apps/OpenSign/src/pages/Webhook.js

@@ -4,12 +4,11 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription } from "../constant/const";
+import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
 import { checkIsSubscribed, openInNewTab } from "../constant/Utils";
 import Parse from "parse";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import Loader from "../primitives/Loader";
 
 function Webhook() {
   const navigation = useNavigate();
@@ -98,15 +97,28 @@ function Webhook() {
   return (
     <React.Fragment>
       <Title title={"Webhook"} />
-      {isGenerate && <Alert type="success">Webhook added successfully.</Alert>}
-      {isErr && <Alert type="danger">Something went wrong.</Alert>}
+      {isGenerate && <Alert type="success">Webhook added successfully!</Alert>}
+      {isErr && <Alert type="danger">Something went wrong!</Alert>}
 
       {isLoader ? (
-        <div className="h-[100vh] flex justify-center items-center">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       ) : (
-        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
+        <div className="bg-white flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ Webhook{" "}
@@ -134,14 +146,14 @@ function Webhook() {
               <button
                 type="button"
                 onClick={handleModal}
-                className="op-btn op-btn-primary "
+                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none"
               >
                 {webhook ? "Update Webhook" : "Add Webhook"}
               </button>
             </li>
           </ul>
 
-          <div className="flex items-center justify-center ">
+          <div className="flex   items-center justify-center ">
             <button
               type="button"
               onClick={() =>
@@ -149,7 +161,7 @@ function Webhook() {
                   "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook"
                 )
               }
-              className="op-btn op-btn-secondary my-2"
+              className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
             >
               View Docs
             </button>
@@ -191,27 +203,24 @@ function Webhook() {
           >
             {error && <Alert type="danger">{error}</Alert>}
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-base-content">
+              <div className="text-lg font-normal text-black">
                 <label className="text-sm ml-2">Webhook</label>
                 <input
                   value={webhook}
                   onChange={(e) => setWebhook(e.target.value)}
                   placeholder="Enter webhook url"
-                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
                 />
               </div>
-              <hr className="bg-[#ccc] mt-3" />
-              <div className="flex items-center mt-3 gap-2">
+              <hr className="bg-[#ccc] mt-4 " />
+              <div className="flex items-center mt-3 gap-2 text-white">
                 <button
                   onClick={handleSubmit}
-                  className="op-btn op-btn-primary ml-[2px]"
+                  className={submitBtn + "ml-[2px]"}
                 >
                   Yes
                 </button>
-                <button
-                  onClick={handleModal}
-                  className="op-btn op-btn-secondary"
-                >
+                <button onClick={handleModal} className={rejectBtn}>
                   No
                 </button>
               </div>

apps/OpenSign/src/polyfills.js

@@ -1,16 +0,0 @@
-// below code is used to handle undefined Promise.withResolvers for safari
-if (typeof Promise.withResolvers === "undefined") {
-  Promise.withResolvers = function () {
-    let resolve, reject;
-    const promise = new Promise((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    return { promise, resolve, reject };
-  };
-}
-
-// Usage:
-// const { promise, resolve, reject } = Promise.withResolvers()
-// console.log(promise, resolve, reject) // Promise { <pending> } [Function (anonymous)] [Function (anonymous)]
-// ... Do something async and then call resolve or reject!

apps/OpenSign/src/primitives/AddUser.js

@@ -2,8 +2,7 @@ import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
 import "../styles/AddUser.css";
-import Loader from "./Loader";
-const AddContact = (props) => {
+const AddUser = (props) => {
   const [name, setName] = useState("");
   const [phone, setPhone] = useState("");
   const [email, setEmail] = useState("");
@@ -22,7 +21,7 @@ const AddContact = (props) => {
     );
     if (savedUserDetails && addYourself) {
       setName(savedUserDetails.name);
-      setPhone(savedUserDetails?.phone || "");
+      setPhone(savedUserDetails.phone);
       setEmail(savedUserDetails.email);
     }
   }, [addYourself]);
@@ -51,9 +50,7 @@ const AddContact = (props) => {
     try {
       const contactQuery = new Parse.Object("contracts_Contactbook");
       contactQuery.set("Name", name);
-      if (phone) {
-        contactQuery.set("Phone", phone);
-      }
+      contactQuery.set("Phone", phone);
       contactQuery.set("Email", email);
       contactQuery.set("UserRole", "contracts_Guest");
 
@@ -71,10 +68,8 @@ const AddContact = (props) => {
         _user.set("name", name);
         _user.set("username", email);
         _user.set("email", email);
-        _user.set("password", email);
-        if (phone) {
-          _user.set("phone", phone);
-        }
+        _user.set("phone", phone);
+        _user.set("password", phone);
 
         const user = await _user.save();
         if (user) {
@@ -196,36 +191,40 @@ const AddContact = (props) => {
   };
 
   return (
-    <div className="h-full px-[20px] py-[10px]">
+    <div className="addusercontainer">
       {isLoader && (
-        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <Loader />
+        <div className="loaderdiv">
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       )}
-      <div className="w-full mx-auto p-[8px]">
-        <div className="text-[14px] font-[700]">Add User</div>
+      <div className="form-wrapper">
+        <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div>
+
         {isUserExist && (
-          <div className="mb-[0.75rem] flex items-center mt-1">
+          <div className="form-section">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="op-checkbox op-checkbox-sm"
+              className="form-checkbox"
             />
-            <label
-              htmlFor="addYourself"
-              className="ml-[0.5rem] text-base-content mb-0"
-            >
+            <label htmlFor="addYourself" className="checkbox-label ">
               Add Yourself
             </label>
           </div>
         )}
-        <form className="text-base-content" onSubmit={handleSubmit}>
-          <div className="mb-[0.75rem]">
-            <label htmlFor="name" className="text-[13px]">
+        <form onSubmit={handleSubmit}>
+          <div className="form-section">
+            <label htmlFor="name" style={{ fontSize: 13 }}>
               Name
-              <span className="text-[13px] text-[red]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
@@ -234,46 +233,48 @@ const AddContact = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
             />
           </div>
-          <div className="mb-[0.75rem]">
-            <label htmlFor="email" className="text-[13px]">
+          <div className="form-section">
+            <label htmlFor="email" style={{ fontSize: 13 }}>
               Email
-              <span className="text-[13px] text-[red]"> *</span>
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="email"
               id="email"
               value={email}
-              onChange={(e) => setEmail(e.target.value?.toLowerCase())}
+              onChange={(e) => setEmail(e.target.value)}
               required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
+              className="addUserInput"
             />
           </div>
-          <div className="mb-[0.75rem]">
-            <label htmlFor="phone" className="text-[13px]">
+          <div className="form-section">
+            <label htmlFor="phone" style={{ fontSize: 13 }}>
               Phone
+              <span style={{ color: "red", fontSize: 13 }}> *</span>
             </label>
             <input
               type="text"
               id="phone"
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
+              required
               disabled={addYourself}
-              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+              className="addUserInput"
             />
           </div>
 
-          <div className="mt-6 flex justify-start gap-2">
-            <button type="submit" className="op-btn op-btn-primary">
+          <div className="buttoncontainer">
+            <button type="submit" className="submitbutton">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="op-btn op-btn-secondary"
+              className="resetbutton"
             >
               Reset
             </button>
@@ -284,4 +285,4 @@ const AddContact = (props) => {
   );
 };
 
-export default AddContact;
+export default AddUser;

apps/OpenSign/src/primitives/Alert.js

@@ -5,25 +5,25 @@ const Alert = ({ children, type }) => {
   function theme(color) {
     switch (color) {
       case "success":
-        return "op-alert-success";
+        return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]";
       case "info":
-        return "op-alert-info";
+        return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]";
       case "danger":
-        return "op-alert-error";
-      case "warning":
-        return "op-alert-warning";
+        return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]";
       default:
-        return "";
+        return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]";
     }
   }
   return (
-    children && (
-      <div className="z-[1000] fixed top-20 left-1/2 transform -translate-x-1/2 text-sm">
-        <div className={`op-alert ${textcolor}`}>
-          <span>{children}</span>
+    <>
+      {children && (
+        <div
+          className={`z-40 fixed top-20 left-1/2 transform -translate-x-1/2 border-[1px] text-sm ${textcolor} rounded py-[.75rem] px-[1.25rem] z-50`}
+        >
+          {children}
         </div>
-      </div>
-    )
+      )}
+    </>
   );
 };
 

apps/OpenSign/src/primitives/HandleError.js

@@ -2,8 +2,15 @@ import React from "react";
 
 function HandleError({ handleError }) {
   return (
-    <div className="flex justify-center items-center h-[100vh]">
-      <span className="text-[20px] text-[gray]">{handleError}</span>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh"
+      }}
+    >
+      <span style={{ fontSize: "20px", color: "gray" }}>{handleError}</span>
     </div>
   );
 }

apps/OpenSign/src/primitives/LazyPage.js

@@ -1,12 +1,24 @@
 import React, { Suspense } from "react";
-import Loader from "./Loader";
 
 const LazyPage = ({ Page }) => {
   return (
     <Suspense
       fallback={
-        <div className="flex justify-center items-center h-[100vh]">
-          <Loader />
+        <div
+          style={{
+            height: "100vh",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          }}
+        >
+          <div
+            style={{
+              fontSize: "45px",
+              color: "#3dd3e0"
+            }}
+            className="loader-37"
+          ></div>
         </div>
       }
     >

apps/OpenSign/src/primitives/LinkUserModal.js

@@ -1,6 +1,6 @@
 import React from "react";
 import SelectSigners from "../components/shared/fields/SelectSigners";
-import AddContact from "./AddContact";
+import AddUser from "./AddUser";
 import ModalUi from "./ModalUi";
 
 const LinkUserModal = (props) => {
@@ -18,8 +18,32 @@ const LinkUserModal = (props) => {
         closePopup={props.closePopup}
         signersData={props?.signersData}
       />
-      <div className="op-divider text-base-content mx-[25%] my-1">or</div>
-      <AddContact details={props.handleAddUser} closePopup={props.closePopup} />
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          margin: "0 30%",
+          color: "#808080"
+        }}
+      >
+        <span
+          style={{
+            height: 1,
+            width: "100%",
+            backgroundColor: "#ccc"
+          }}
+        ></span>
+        <span>or</span>
+        <span
+          style={{
+            height: 1,
+            width: "100%",
+            backgroundColor: "#ccc"
+          }}
+        ></span>
+      </div>
+      <AddUser details={props.handleAddUser} closePopup={props.closePopup} />
     </ModalUi>
   );
 };

apps/OpenSign/src/primitives/Loader.js

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

apps/OpenSign/src/primitives/LoaderWithMsg.js

@@ -1,14 +1,27 @@
 import React from "react";
-import Loader from "./Loader";
+import loader from "../assets/images/loader2.gif";
 
-function LoaderWithMsg({ isLoading }) {
+function Loader({ isLoading }) {
   return (
-    <div className="flex flex-col justify-center items-center h-[100vh]">
-      {/* <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> */}
-      <Loader />
-      <span className="text-[13px] text-base-cotent">{isLoading.message}</span>
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        flexDirection: "column"
+      }}
+    >
+      <img
+        alt="no img"
+        src={loader}
+        style={{ width: "80px", height: "80px" }}
+      />
+      <span style={{ fontSize: "13px", color: "gray" }}>
+        {isLoading.message}
+      </span>
     </div>
   );
 }
 
-export default LoaderWithMsg;
+export default Loader;

apps/OpenSign/src/primitives/ModalUi.js

@@ -6,35 +6,39 @@ const ModalUi = ({
   children,
   title,
   isOpen,
+  headColor,
   handleClose,
   showHeader = true,
   showClose = true,
-  reduceWidth,
+  styleClass,
   showHeaderMessage
 }) => {
   return (
     <>
       {isOpen && (
-        <dialog className="op-modal op-modal-open">
+        <div className="fixed z-[999] 2   top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
           <div
-            className={`${
-              reduceWidth || "md:min-w-[500px]"
-            } op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
+            className={
+              styleClass
+                ? styleClass
+                : "fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[500px] overflow-y-auto hide-scrollbar"
+            }
           >
             {showHeader && (
-              <>
-                <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
-                  {title}
-                </h3>
+              <div
+                className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"
+                style={{ background: headColor ? headColor : "#32a3ac" }}
+              >
+                <div className="text-[1.2rem] font-normal">{title}</div>
                 {showClose && (
-                  <button
-                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
+                  <div
+                    className="text-[1.5rem] cursor-pointer"
                     onClick={() => handleClose && handleClose()}
                   >
-                    ✕
-                  </button>
+                    &times;
+                  </div>
                 )}
-              </>
+              </div>
             )}
             {!isEnableSubscription && showHeaderMessage && (
               <PremiumAlertHeader
@@ -45,7 +49,7 @@ const ModalUi = ({
             )}
             <div>{children}</div>
           </div>
-        </dialog>
+        </div>
       )}
     </>
   );

apps/OpenSign/src/primitives/PdfDeclineModal.js

@@ -1,5 +1,6 @@
 import React from "react";
 import "../styles/signature.css";
+import { rejectBtn } from "../constant/const";
 
 function CustomModal({
   show,
@@ -11,12 +12,12 @@ function CustomModal({
 }) {
   return (
     show && (
-      <dialog className="op-modal op-modal-open absolute z-[1999]">
-        <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]">
+      <div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
+        <div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
+          <div className="bg-[#de4337] text-white p-[10px] rounded-t">
             {headMsg && headMsg}
-          </h3>
-          <div className="p-[10px] px-[20px]">
+          </div>
+          <div className="p-[15px]">
             <p className="text-[15px]">{bodyMssg && bodyMssg}</p>
           </div>
           {footerMessage && (
@@ -24,7 +25,8 @@ function CustomModal({
               <div className="h-[1px] bg-[#9f9f9f] w-full"></div>
               <div className="m-[15px] ">
                 <button
-                  className="op-btn op-btn-primary mr-2"
+                  className={`${rejectBtn} text-white mr-2`}
+                  style={{ background: "#de4337" }}
                   type="button"
                   onClick={() => declineDoc()}
                 >
@@ -32,7 +34,7 @@ function CustomModal({
                 </button>
                 <button
                   type="button"
-                  className="op-btn op-btn-secondary"
+                  className={rejectBtn}
                   onClick={() => setIsDecline({ isDeclined: false })}
                 >
                   Close
@@ -41,7 +43,7 @@ function CustomModal({
             </>
           )}
         </div>
-      </dialog>
+      </div>
     )
   );
 }

apps/OpenSign/src/primitives/Tooltip.js

@@ -1,9 +1,17 @@
 import React from "react";
 import { Tooltip as ReactTooltip } from "react-tooltip";
 import { openInNewTab } from "../constant/Utils";
-const Tooltip = ({ id, message, url, iconColor }) =>
+import { isEnableSubscription } from "../constant/const";
+const Tooltip = ({ id, message, url, iconColor, isSubscribe }) =>
   url ? (
-    <button onClick={() => openInNewTab(url)} className={"text-center"}>
+    <button
+      onClick={() => openInNewTab(url)}
+      className={
+        isSubscribe || !isEnableSubscription
+          ? "text-center"
+          : "text-center opacity-20 pointer-events-none"
+      }
+    >
       <sup>
         <i
           className="fa-solid fa-question rounded-full"

apps/OpenSign/src/primitives/TourContentWithBtn.js

@@ -12,14 +12,22 @@ export default function TourContentWithBtn({ message, isChecked }) {
   return (
     <div>
       <p>{message}</p>
-      <label className="flex items-center justify-center mb-0">
+      <label
+        style={{
+          textAlign: "center",
+          display: "flex",
+          justifyContent: "center"
+        }}
+      >
         <input
           type="checkbox"
-          className="op-checkbox op-checkbox-xs mr-1"
+          style={{ marginRight: 3 }}
           checked={isCheck}
           onChange={handleCheck}
-        />
-        <span className="#787878 text-[12px]">Don&apos;t show this again</span>
+        />{" "}
+        <span style={{ color: "#787878", fontSize: 12 }}>
+          Don&apos;t show this again
+        </span>
       </label>
     </div>
   );

apps/OpenSign/src/primitives/Upgrade.js

@@ -1,13 +1,20 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import { openInNewTab } from "../constant/Utils";
 
-function Upgrade({ message }) {
+function Upgrade({ message, newWindow }) {
+  const navigation = useNavigate();
+
   return (
     <sup>
       <span
         onClick={() => {
-          const url = window.location.origin + "/subscription";
-          openInNewTab(url);
+          if (newWindow) {
+            const url = window.location.origin + "/subscription";
+            openInNewTab(url);
+          } else {
+            navigation("/subscription");
+          }
         }}
         className="text-blue-800 text-sm cursor-pointer underline"
       >

apps/OpenSign/src/primitives/Validate.js

@@ -49,10 +49,13 @@ const Validate = () => {
       <Outlet />
     </div>
   ) : (
-    <ModalUi showHeader={false} isOpen={true} showClose={false}>
+    <ModalUi title={"Session Expired"} isOpen={true} showClose={false}>
       <div className="flex flex-col justify-center items-center py-4 md:py-5 gap-5">
-        <p className="text-xl font-medium">Your session has expired.</p>
-        <button onClick={handleLoginBtn} className="op-btn op-btn-neutral">
+        <p className="text-xl font-normal">Your session has expired.</p>
+        <button
+          onClick={handleLoginBtn}
+          className="text-base px-3 py-1.5 rounded shadow-md text-white bg-[#1ab6ce]"
+        >
           Login
         </button>
       </div>

apps/OpenSign/src/styles/AddUser.css

@@ -90,6 +90,7 @@
   background-size: 1rem auto;
 }
 
+
 @media (max-width: 375px) {
   .validationlist {
     background-position: right 0.5rem top 50%;