Merge branch 'staging' into main

.github/workflows/Docker.yml

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

apps/OpenSign/package-lock.json

@@ -34,7 +34,6 @@
         "react-gtm-module": "^2.0.11",
         "react-helmet": "^6.1.0",
         "react-konva": "^18.2.10",
-        "react-modal": "^3.16.1",
         "react-pdf": "^9.0.0",
         "react-quill": "^2.0.0",
         "react-redux": "^9.1.2",
@@ -58,6 +57,7 @@
         "@babel/runtime-corejs2": "^7.24.7",
         "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",
@@ -9041,6 +9041,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-selector-tokenizer": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
+      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "fastparse": "^1.1.2"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
@@ -9264,6 +9274,15 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/culori": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
+      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/cz-conventional-changelog": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/cz-conventional-changelog/-/cz-conventional-changelog-3.3.0.tgz",
@@ -9284,6 +9303,25 @@
         "@commitlint/load": ">6.1.1"
       }
     },
+    "node_modules/daisyui": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.2.tgz",
+      "integrity": "sha512-ed3EFwPRLN+9+/MYPRB1pYjk6plRCBMobfBdSeB3voAS81KdL2pCKtbwJfUUpDdOnJ0F8T6oRdVX02P6UCD0Hg==",
+      "dev": true,
+      "dependencies": {
+        "css-selector-tokenizer": "^0.8",
+        "culori": "^3",
+        "picocolors": "^1",
+        "postcss-js": "^4"
+      },
+      "engines": {
+        "node": ">=16.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/daisyui"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -10928,11 +10966,6 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
-    "node_modules/exenv": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz",
-      "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw=="
-    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -11119,6 +11152,12 @@
         "punycode": "^1.3.2"
       }
     },
+    "node_modules/fastparse": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
+      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
+      "dev": true
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -20126,24 +20165,6 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
-    "node_modules/react-modal": {
-      "version": "3.16.1",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.1.tgz",
-      "integrity": "sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==",
-      "dependencies": {
-        "exenv": "^1.2.0",
-        "prop-types": "^15.7.2",
-        "react-lifecycles-compat": "^3.0.0",
-        "warning": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18"
-      }
-    },
     "node_modules/react-native-crypto-js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/react-native-crypto-js/-/react-native-crypto-js-1.0.0.tgz",

apps/OpenSign/package.json

@@ -29,7 +29,6 @@
     "react-gtm-module": "^2.0.11",
     "react-helmet": "^6.1.0",
     "react-konva": "^18.2.10",
-    "react-modal": "^3.16.1",
     "react-pdf": "^9.0.0",
     "react-quill": "^2.0.0",
     "react-redux": "^9.1.2",
@@ -88,6 +87,7 @@
     "@babel/runtime-corejs2": "^7.24.7",
     "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",

apps/OpenSign/public/index.html

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

apps/OpenSign/src/App.js

@@ -17,6 +17,7 @@ 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"));
@@ -34,23 +35,10 @@ pdfjs.GlobalWorkerOptions.workerSrc = new URL(
   "pdfjs-dist/legacy/build/pdf.worker.min.mjs",
   import.meta.url
 ).toString();
-const Loader = () => {
+const AppLoader = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <div
-        style={{
-          fontSize: "45px",
-          color: "#3dd3e0"
-        }}
-        className="loader-37"
-      ></div>
+    <div className="flex justify-center items-center h-[100vh]">
+      <Loader />
     </div>
   );
 };
@@ -79,9 +67,9 @@ function App() {
   };
 
   return (
-    <div className="bg-[#eef1f5]">
+    <div className="bg-base-200">
       {isloading ? (
-        <Loader />
+        <AppLoader />
       ) : (
         <BrowserRouter>
           <Routes>

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 { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
+import Loader from "../primitives/Loader";
 
 const AddSigner = (props) => {
   const [name, setName] = useState("");
@@ -227,38 +227,29 @@ 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">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+          <Loader />
         </div>
       )}
-      <div className="w-full mx-auto p-2">
+      <div className="w-full mx-auto p-2 text-base-content">
         {isUserExist && (
-          <div className="mb-3">
+          <div className="mb-3 flex items-center">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="ml-2 text-gray-700">
+            <label htmlFor="addYourself" className="ml-2 mb-0">
               Add Yourself
             </label>
           </div>
         )}
         <form onSubmit={handleSubmit}>
           <div className="mb-3">
-            <label
-              htmlFor="name"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="name" className="block text-xs font-semibold">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -267,16 +258,13 @@ const AddSigner = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="email"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="email" className="block text-xs font-semibold">
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="email"
@@ -285,14 +273,11 @@ const AddSigner = (props) => {
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs lowercase"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="phone"
-              className="block text-xs text-gray-700 font-semibold"
-            >
+            <label htmlFor="phone" className="block text-xs font-semibold">
               Phone
             </label>
             <input
@@ -301,23 +286,17 @@ const AddSigner = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               disabled={addYourself}
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-
-          <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 "
-            >
+          <div className="mt-4 flex gap-x-2 justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              style={{ backgroundColor: modalCancelBtnColor }}
-              className="px-4 py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>

apps/OpenSign/src/components/AddUser.js

@@ -3,6 +3,7 @@ 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("");
@@ -195,13 +196,7 @@ 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">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+          <Loader />
         </div>
       )}
       <div className="w-full mx-auto">
@@ -213,7 +208,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -221,7 +216,7 @@ const AddUser = (props) => {
               value={name}
               onChange={(e) => setName(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -230,7 +225,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="email"
@@ -238,7 +233,7 @@ const AddUser = (props) => {
               value={email}
               onChange={(e) => setEmail(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="mb-3">
@@ -247,7 +242,7 @@ const AddUser = (props) => {
               className="block text-xs text-gray-700 font-semibold"
             >
               Phone
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[red] text-[13px]"> *</span>
             </label>
             <input
               type="text"
@@ -255,7 +250,7 @@ const AddUser = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               required
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 

apps/OpenSign/src/components/BulkSendUi.js

@@ -1,6 +1,7 @@
 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([]);
@@ -170,14 +171,8 @@ const BulkSendUi = (props) => {
   return (
     <>
       {isSubmit && (
-        <div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37 "
-          ></div>
+        <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 ? (
@@ -185,14 +180,14 @@ const BulkSendUi = (props) => {
           <>
             {props.Placeholders?.some((x) => !x.signerObjId) ? (
               <form onSubmit={handleSubmit}>
-                <div className=" min-h-max max-h-[250px] overflow-y-auto">
+                <div className="min-h-max max-h-[250px] overflow-y-auto">
                   {forms?.map((form, index) => (
                     <div
                       key={form.Id}
-                      className="p-3 rounded-xl border-[1px] border-gray-400 m-4 bg-white text-black grid grid-cols-1 md:grid-cols-2 gap-2 relative"
+                      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}>
+                        <div className="flex flex-col" key={field.fieldId}>
                           <label>{field.label}</label>
                           <SuggestionInput
                             required
@@ -208,7 +203,7 @@ const BulkSendUi = (props) => {
                       {forms?.length > 1 && (
                         <button
                           onClick={() => handleRemoveForm(index)}
-                          className="absolute right-3 top-1 border border-gray-300 rounded-lg px-2 py-1"
+                          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>
@@ -220,13 +215,13 @@ const BulkSendUi = (props) => {
                 <div className="flex flex-col mx-4 mb-4 gap-3">
                   <button
                     onClick={handleAddForm}
-                    className="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
+                    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="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
+                    className="op-btn op-btn-secondary focus:outline-none"
                   >
                     <i className="fa-solid fa-paper-plane"></i>{" "}
                     <span>Send</span>

apps/OpenSign/src/components/Footer.js

@@ -45,12 +45,16 @@ const Footer = () => {
   };
   return (
     <>
-      <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>
+      <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>
       <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-black p-2 text-sm focus:outline-none"
+        className="text-base-content p-2 text-sm focus:outline-none"
       >
         {isFullScreen ? (
           <i className="fa-solid fa-compress"></i>

apps/OpenSign/src/components/Header.js

@@ -45,7 +45,11 @@ const Header = ({ showSidebar }) => {
   const closeDropdown = () => {
     setIsOpen(false);
     if (Parse?.User?.current()) {
-      Parse.User.logOut();
+      try {
+        Parse.User.logOut();
+      } catch (err) {
+        console.log("Err", err);
+      }
     }
     let appdata = localStorage.getItem("userSettings");
     let applogo = localStorage.getItem("appLogo");
@@ -89,14 +93,16 @@ const Header = ({ showSidebar }) => {
   }, [isOpen]);
 
   return (
-    <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="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="h-[25px] md:h-[40px] w-auto overflow-hidden">
           <img
             className="object-contain h-full w-auto"
@@ -105,10 +111,7 @@ const Header = ({ showSidebar }) => {
           />
         </div>
       </div>
-      <div
-        id="profile-menu"
-        className="flex justify-between items-center gap-x-3"
-      >
+      <div id="profile-menu" className="flex-none gap-2">
         {!isSubscribe && (
           <div>
             <button
@@ -120,7 +123,7 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {isPro && (
-          <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">
+          <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">
             PRO
           </div>
         )}
@@ -140,60 +143,66 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         {width >= 768 && (
-          <div onClick={toggleDropdown} className="cursor-pointer text-sm">
+          <div
+            onClick={toggleDropdown}
+            className="cursor-pointer text-base-content text-sm"
+          >
             {username && username}
           </div>
         )}
-        <div className="relative">
-          <div className="cursor-pointer">
-            <i onClick={toggleDropdown} className="fa-solid fa-angle-down"></i>
+        <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>
-          <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"
-            }`}
+          <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"
           >
-            <ul>
-              <li
-                className="hover:bg-gray-100 rounded-t-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={() => openInNewTab("https://docs.opensignlabs.com")}
-              >
+            <li onClick={() => openInNewTab("https://docs.opensignlabs.com")}>
+              <span>
                 <i className="fa-solid fa-book"></i> Docs
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/profile");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/profile");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-user"></i> Profile
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  setIsOpen(false);
-                  navigate("/changepassword");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                setIsOpen(false);
+                navigate("/changepassword");
+              }}
+            >
+              <span>
                 <i className="fa-solid fa-lock"></i> Change Password
-              </li>
-              <li
-                className="hover:bg-gray-100 py-1 px-2 cursor-pointer font-normal"
-                onClick={() => {
-                  window.open("https://console.opensignlabs.com/");
-                }}
-              >
+              </span>
+            </li>
+            <li
+              onClick={() => {
+                window.open("https://console.opensignlabs.com/");
+              }}
+            >
+              <span>
                 <i className="fa-regular fa-id-card"></i> Console
-              </li>
-              <li
-                className="hover:bg-gray-100 rounded-b-lg py-1 px-2 cursor-pointer font-normal"
-                onClick={closeDropdown}
-              >
+              </span>
+            </li>
+            <li onClick={closeDropdown}>
+              <span>
                 <i className="fa-solid fa-arrow-right-from-bracket"></i> Log Out
-              </li>
-            </ul>
-          </div>
+              </span>
+            </li>
+          </ul>
         </div>
       </div>
     </div>

apps/OpenSign/src/components/LoginFacebook.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import Parse from "parse";
+import Loader from "../primitives/Loader";
 // import FacebookLogin from "react-facebook-login";
 
 const LoginFacebook = ({
@@ -112,29 +113,10 @@ const LoginFacebook = ({
     }
   };
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       {thirdpartyLoader && (
-        <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 className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       {/* <FacebookLogin
@@ -146,11 +128,10 @@ const LoginFacebook = ({
       /> */}
       {isModal && (
         <div
-          className="modal fade show"
+          className="modal fade show block z-[1]"
           id="exampleModal"
           tabIndex="-1"
           role="dialog"
-          style={{ display: "block", zIndex: 1 }}
         >
           <div className="modal-dialog" role="document">
             <div className="modal-content">
@@ -163,13 +144,8 @@ const LoginFacebook = ({
               <div className="modal-body">
                 <form>
                   <div className="form-group">
-                    <label
-                      htmlFor="Phone"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Phone{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
+                    <label htmlFor="Phone" className="col-form-label">
+                      Phone <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
                       type="tel"
@@ -186,13 +162,8 @@ const LoginFacebook = ({
                     />
                   </div>
                   <div className="form-group">
-                    <label
-                      htmlFor="Company"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
-                      Company{" "}
-                      <span style={{ fontSize: 13, color: "red" }}>*</span>
+                    <label htmlFor="Company" className="col-form-label">
+                      Company <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
                       type="text"
@@ -212,16 +183,14 @@ const LoginFacebook = ({
                     <button
                       type="button"
                       onClick={() => handleSubmitbtn()}
-                      className="btn btn-info"
-                      style={{ marginRight: 10 }}
+                      className="btn btn-info mr-[10px]"
                     >
                       Sign up
                     </button>
                     <button
                       type="button"
-                      className="btn btn-secondary"
+                      className="btn btn-secondary w-[90px]"
                       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 { modalCancelBtnColor, modalSubmitBtnColor } from "../constant/const";
+import Loader from "../primitives/Loader";
 
 /*
  * `GoogleSignInBtn`as it's name indicates it render google sign in button
@@ -207,45 +207,22 @@ const GoogleSignInBtn = ({
     localStorage.setItem("parseAppId", appid);
   };
   return (
-    <div style={{ position: "relative" }}>
+    <div className="relative">
       {thirdpartyLoader && (
-        <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 className="fixed flex justify-center items-center inset-0 bg-black bg-opacity-25 z-20 ">
+          <Loader />
         </div>
       )}
       <div ref={googleBtn} className="text-sm"></div>
       <ModalUi showClose={false} isOpen={isModal} title="Sign up form">
-        <form className="px-4 py-3">
+        <form className="px-4 py-3 text-base-content">
           <div className="mb-3">
-            <label
-              htmlFor="Phone"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Phone" className="block text-xs font-semibold">
+              Phone <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="tel"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              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) =>
@@ -258,16 +235,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <label
-              htmlFor="Company"
-              style={{ display: "flex" }}
-              className="block text-xs text-gray-700 font-semibold"
-            >
-              Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+            <label htmlFor="Company" className="block text-xs font-semibold">
+              Company <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              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) =>
@@ -280,16 +253,12 @@ const GoogleSignInBtn = ({
             />
           </div>
           <div className="mb-3">
-            <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 htmlFor="JobTitle" className="block text-xs font-semibold">
+              Job Title <span className="text-[13px] text-[red]">*</span>
             </label>
             <input
               type="text"
-              className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+              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) =>
@@ -301,20 +270,18 @@ const GoogleSignInBtn = ({
               required
             />
           </div>
-          <div>
+          <div className="flex flex-row gap-2">
             <button
               type="button"
-              className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+              className="op-btn op-btn-primary"
               onClick={() => handleSubmitbtn()}
-              style={{ marginRight: 10, backgroundColor: modalSubmitBtnColor }}
             >
               Sign up
             </button>
             <button
               type="button"
-              className="p-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+              className="op-btn op-btn-ghost"
               onClick={handleCloseModal}
-              style={{ width: 90, backgroundColor: modalCancelBtnColor }}
             >
               Cancel
             </button>

apps/OpenSign/src/components/RenderDebugPdf.js

@@ -4,27 +4,11 @@ import { Stage, Layer, Rect } from "react-konva";
 const RenderDebugPdf = (props) => {
   return (
     <div>
-      <div
-        style={{
-          position: "sticky",
-          top: 0,
-          padding: 10,
-          zIndex: 1,
-          backgroundColor: "white",
-          border: "1px solid grey",
-          margin: "5px 0"
-        }}
-      >
+      <div className="sticky top-0 p-[10px] z-10 bg-white border-[1px] border-[gray] my-[5px]">
         {`Co-ordinates: X - ${props.hoverCoordinates.x}, Y - ${props.hoverCoordinates.y}`}
       </div>
       <div
-        style={{
-          flex: 1,
-          position: "relative",
-          border: "1px solid grey",
-          overflow: "auto",
-          cursor: "crosshair"
-        }}
+        className="relative flex-1 cursor-crosshair border-[1px] border-[gray] overflow-auto"
         onMouseMove={props.handleMouseMoveDiv}
       >
         <Document
@@ -57,7 +41,7 @@ const RenderDebugPdf = (props) => {
           onMouseUp={props.handleMouseUp}
           width={props.pdfDimension.width}
           height={props.pdfDimension.height}
-          style={{ position: "absolute", top: 0, left: 0 }}
+          className="absolute top-0 right-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 px-3 py-2 flex text-white rounded-md shadow overflow-hidden`}
+      } w-full shadow-md px-3 py-2 op-card bg-base-100`}
     >
-      <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">
+      <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">
           <i
             className={`${
               props.Icon ? props.Icon : "fa fa-solid fa-info"
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="">
-          <div className="text-base lg:text-lg text-black"> {props.Label}</div>
+        <div className="op-card-title text-lg ml-3 text-base-content">
+          {props.Label}
         </div>
       </div>
     </div>

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

@@ -336,25 +336,29 @@ 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">
-        <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 text-white">
+        <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="">
+        <div className="font-medium">
           <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-2 right-1">
-        <Tooltip id={props.Label} iconColor={"white"} message={props?.Data?.tourMessage} />
+      <div className="text-xs absolute top-3 right-2">
+        <Tooltip
+          id={props.Label}
+          iconColor={"white"}
+          message={props?.Data?.tourMessage}
+        />
       </div>
     </div>
   );

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

@@ -3,6 +3,7 @@ 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([]);
@@ -121,21 +122,8 @@ function DashboardReport(props) {
   return (
     <>
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[250px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "../../styles/AddUser.css";
 import { checkIsSubscribed, getFileName } from "../../constant/Utils";
 import PremiumAlertHeader from "../../primitives/PremiumAlertHeader";
 import Upgrade from "../../primitives/Upgrade";
@@ -60,28 +59,20 @@ const EditTemplate = ({ template, onSuccess }) => {
   };
   return (
     <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
-      <div className="form-wrapper">
+      <div className="text-base-content">
         <form onSubmit={handleSubmit}>
           <div>
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               File
             </label>
-            <div
-              style={{
-                padding: "0.5rem 0.75rem",
-                border: "1px solid #d1d5db",
-                borderRadius: "0.375rem",
-                fontSize: "0.75rem",
-                fontWeight: "700"
-              }}
-            >
+            <div className="op-input op-input-bordered op-input-sm focus:outline-none py-2 font-semibold w-full text-xs">
               {getFileName(template.URL)}
             </div>
           </div>
           <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -89,11 +80,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               value={formData.Name}
               onChange={(e) => handleStrInput(e)}
               required
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Note" style={{ fontSize: 13 }}>
+            <label htmlFor="Note" className="text-[13px]">
               Note
             </label>
             <input
@@ -102,11 +93,11 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Note"
               value={formData.Note}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label htmlFor="Description" style={{ fontSize: 13 }}>
+            <label htmlFor="Description" className="text-[13px]">
               Description
             </label>
             <input
@@ -115,46 +106,32 @@ const EditTemplate = ({ template, onSuccess }) => {
               id="Description"
               value={formData.Description}
               onChange={(e) => handleStrInput(e)}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
           <div className="form-section">
-            <label style={{ fontSize: 13 }}>Send In Order</label>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <label className="text-[13px]">Send In Order</label>
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"true"}
+                className="op-radio op-radio-xs"
                 name="SendinOrder"
                 checked={formData.SendinOrder === "true"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>Yes</div>
+              <div className="text-[12px]">Yes</div>
             </div>
-            <div
-              style={{
-                display: "flex",
-                alignItems: "center",
-                gap: 8,
-                marginLeft: 8,
-                marginBottom: 5
-              }}
-            >
+            <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
                 type="radio"
                 value={"false"}
                 name="SendinOrder"
+                className="op-radio op-radio-xs"
                 checked={formData.SendinOrder === "false"}
                 onChange={handleStrInput}
               />
-              <div style={{ fontSize: 12 }}>No</div>
+              <div className="text-[12px]">No</div>
             </div>
           </div>
           <div className="text-xs mt-2">
@@ -186,10 +163,8 @@ const EditTemplate = ({ template, onSuccess }) => {
                 checked={formData.AutomaticReminders}
                 onChange={handleAutoReminder}
                 type="checkbox"
-                value=""
-                className="sr-only peer"
+                className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white mt-2"
               />
-              <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 mt-2"></div>
             </label>
           </div>
           {isSubscribe && formData?.AutomaticReminders === true && (
@@ -202,15 +177,14 @@ const EditTemplate = ({ template, onSuccess }) => {
                 type="number"
                 value={formData.RemindOnceInEvery}
                 name="RemindOnceInEvery"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 onChange={handleStrInput}
                 required
               />
             </div>
           )}
-          {/* <SelectFolder onSuccess={handleFolder} folderCls={"contracts_Template"} /> */}
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="mt-[1rem] flex justify-start">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
           </div>

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

@@ -1,52 +1,42 @@
 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 (
-    <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>
+    <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}
+          />
         </div>
       </div>
-    </React.Fragment>
+    </form>
   );
 }

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

@@ -5,7 +5,7 @@ import axios from "axios";
 import { getBase64FromUrl } from "../../constant/Utils";
 import { themeColor } from "../../constant/const";
 import printModule from "print-js";
-import loader from "../../assets/images/loader2.gif";
+import Loader from "../../primitives/Loader";
 
 function EmailComponent({
   isEmail,
@@ -173,143 +173,59 @@ function EmailComponent({
         <div className="modaloverlay">
           <div className="modalcontainer">
             {isLoading && (
-              <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" }}>
+              <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">
                   This might take some time
                 </span>
               </div>
             )}
             <div style={{ background: "#32a3ac" }} className="modalheader">
-              <span style={{ color: "white" }}>Successfully signed!</span>
-
-              <div style={{ display: "flex", flexDirection: "row" }}>
+              <span className="text-white">Successfully signed!</span>
+              <div className="flex flex-row">
                 <div></div>
                 {!isAndroid && (
                   <button
                     onClick={handleToPrint}
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      alignItems: "center"
-                    }}
-                    className="btn btn-primary btn-sm"
+                    className="op-btn op-btn-neutral op-btn-sm text-[15px]"
                   >
-                    <i
-                      className="fa fa-print"
-                      style={{
-                        fontSize: "15px",
-                        marginRight: "3px",
-                        color: "white"
-                      }}
-                      aria-hidden="true"
-                    ></i>
+                    <i className="fa fa-print" aria-hidden="true"></i>
                     Print
                   </button>
                 )}
-
                 <button
-                  className="btn btn-danger btn-sm"
+                  className="op-btn op-btn-primary op-btn-sm text-[15px] ml-2"
                   onClick={() => handleDownloadPdf()}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    marginLeft: "10px"
-                  }}
                 >
-                  <i
-                    className="fa fa-download"
-                    style={{
-                      color: "white",
-                      fontSize: "15px",
-                      marginRight: "3px"
-                    }}
-                    aria-hidden="true"
-                  ></i>
+                  <i className="fa fa-download" aria-hidden="true"></i>
                   Download
                 </button>
               </div>
             </div>
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="h-full p-[20px]">
               {isEmailCelebration && (
                 <div className="absolute w-[100%] flex justify-center items-center">
-                  <img
-                    alt="print img"
-                    width={300}
-                    height={250}
-                    src={celebration}
-                  />
+                  <img alt="celeb" width={300} height={250} src={celebration} />
                 </div>
               )}
-
-              <p
-                style={{
-                  fontFamily: "system-ui",
-                  verticalAlign: "baseline",
-                  fontWeight: "500",
-                  color: "#403f3e",
-                  fontSize: "15px",
-                  marginBottom: "5px"
-                }}
-              >
+              <p className="font-medium text-[15px] mb-[5px] text-base-content align-baseline">
                 Recipients added here will get a copy of the signed document.
               </p>
               {emailList.length > 0 ? (
                 <>
                   <div className="addEmail">
-                    <div
-                      style={{
-                        display: "flex",
-                        flexDirection: "row",
-
-                        flexWrap: "wrap"
-                      }}
-                    >
+                    <div className="flex flex-row flex-wrap">
                       {emailList.map((data, ind) => {
                         return (
                           <div
-                            className="emailChip"
-                            style={{
-                              display: "flex",
-                              flexDirection: "row",
-                              alignItems: "center"
-                            }}
+                            className="flex flex-row items-center bg-[#47a3ad] m-[4px] rounded-md py-[5px] px-[10px]"
                             key={ind}
                           >
-                            <span
-                              style={{
-                                color: "white",
-                                fontSize: "13px"
-                              }}
-                            >
+                            <span className="text-white text-[13px]">
                               {data}
                             </span>
                             <span
-                              style={{
-                                color: "white",
-                                fontSize: 13,
-                                fontWeight: 600,
-                                marginLeft: 7,
-                                cursor: "pointer"
-                              }}
+                              className="text-white text-[13px] font-semibold ml-[7px] cursor-pointer"
                               onClick={() => removeChip(ind)}
                             >
                               <i className="fa-solid fa-xmark"></i>
@@ -322,7 +238,7 @@ function EmailComponent({
                       <input
                         type="text"
                         value={emailValue}
-                        className="addEmailInput"
+                        className="p-[10px] pb-[20px] rounded w-full text-[15px] bg-white outline-none"
                         onChange={handleEmailValue}
                         onKeyDown={handleEnterPress}
                         onBlur={() => {
@@ -340,7 +256,7 @@ function EmailComponent({
                   <input
                     type="text"
                     value={emailValue}
-                    className="emailInput"
+                    className="p-[10px] pb-[20px] rounded w-full text-[15px] outline-none bg-white border-2 border-[#47a3ad]"
                     onChange={handleEmailValue}
                     onKeyDown={handleEnterPress}
                     placeholder="Add the email addresses"
@@ -353,67 +269,36 @@ function EmailComponent({
                   />
                 </div>
               )}
-              <span
-                style={{
-                  cursor: emailValue && "pointer"
-                }}
+              <button
+                className={`${
+                  emailValue ? "cursor-pointer" : "cursor-default"
+                } op-btn op-btn-primary op-btn-sm m-2 shadow-md`}
                 onClick={() => {
                   if (emailValue) {
                     handleEnterPress("add");
                   }
                 }}
               >
-                <i
-                  style={{
-                    backgroundColor: themeColor,
-                    padding: "5px 7px",
-                    marginTop: "10px",
-                    color: "white",
-                    borderRadius: "2px"
-                  }}
-                  className="fa fa-plus"
-                  aria-hidden="true"
-                ></i>
-              </span>
+                <i className="fa fa-plus" aria-hidden="true"></i>
+              </button>
 
-              <div
-                style={{
-                  background: "#e3e2e1",
-                  marginTop: "10px",
-                  padding: "5px",
-                  borderRadius: "3px"
-                }}
-              >
-                <span style={{ fontWeight: "700" }}>Note:</span>
-                <span style={{ fontSize: "15px" }}>
-                  {" "}
+              <div className="bg-[#e3e2e1] mt-[10px] p-[5px] rounded">
+                <span className="font-bold">Note: </span>
+                <span className="text-[15px]">
                   You can only send to ten recipients at a time.
                 </span>
               </div>
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%",
-                  marginTop: "15px",
-                  marginBottom: "15px"
-                }}
-              ></div>
+              <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
               <button
-                disabled={emailList.length === 0 && true}
-                style={{
-                  background: themeColor,
-                  color: "white"
-                }}
                 type="button"
-                className={emailList.length === 0 ? "defaultBtn" : "finishBtn"}
-                onClick={() => sendEmail()}
+                className="op-btn op-btn-primary"
+                onClick={() => emailList.length > 0 && sendEmail()}
               >
                 Send
               </button>
               <button
                 type="button"
-                className="finishBtn cancelBtn"
+                className="op-btn op-btn-ghost ml-2"
                 onClick={() => {
                   setIsEmail(false);
                   setEmailValue("");

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

@@ -8,8 +8,8 @@ import {
 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 ModalUi from "../../primitives/ModalUi";
+import Loader from "../../primitives/Loader";
 
 function Header({
   isPdfRequestFiles,
@@ -42,14 +42,7 @@ function Header({
   const navigate = useNavigate();
   const [isDownloading, setIsDownloading] = useState("");
   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 = {
@@ -71,56 +64,22 @@ function Header({
               : window.innerWidth - 30 + "px"
           }}
         >
-          <div className="preBtn2">
+          <div className="flex justify-between items-center py-[5px] px-[10px] ">
             <div onClick={() => navigate(-1)}>
               <i
-                className="fa fa-arrow-left"
+                className="fa fa-arrow-left text-base-content"
                 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
-                    style={{
-                      color: themeColor,
-                      border: "none",
-                      fontWeight: "650",
-                      fontSize: "16px",
-                      padding: "0px 3px 0px 5px"
-                    }}
-                  >
+                  <div className="op-link op-link-primary no-underline text-[16px] font-semibold pr-[3px] pl-[5px]">
                     <i className="fa fa-ellipsis-v" aria-hidden="true"></i>
                   </div>
                 </DropdownMenu.Trigger>
@@ -135,16 +94,10 @@ function Header({
                         handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
                       }
                     >
-                      <div
-                        style={{
-                          display: "flex",
-                          flexDirection: "row"
-                        }}
-                      >
+                      <div className="flex flex-row">
                         <i
-                          className="fa fa-arrow-down"
+                          className="fa fa-arrow-down mr-[2px]"
                           aria-hidden="true"
-                          style={{ marginRight: "2px" }}
                         ></i>
                         Download
                       </div>
@@ -159,15 +112,9 @@ function Header({
                           )
                         }
                       >
-                        <div
-                          style={{
-                            border: "none",
-                            backgroundColor: "#fff"
-                          }}
-                        >
+                        <div className="border-none bg-[#fff]">
                           <i
-                            className="fa-solid fa-award"
-                            style={{ marginRight: "2px" }}
+                            className="fa-solid fa-award mr-[2px]"
                             aria-hidden="true"
                           ></i>
                           Certificate
@@ -179,15 +126,9 @@ function Header({
                         className="DropdownMenuItem"
                         onClick={() => setIsEmail(true)}
                       >
-                        <div
-                          style={{
-                            display: "flex",
-                            flexDirection: "row"
-                          }}
-                        >
+                        <div className="flex flex-row">
                           <i
-                            className="fa fa-envelope"
-                            style={{ marginRight: "2px" }}
+                            className="fa fa-envelope mr-[2px]"
                             aria-hidden="true"
                           ></i>
                           Mail
@@ -200,16 +141,10 @@ function Header({
                         handleToPrint(e, pdfUrl, setIsDownloading)
                       }
                     >
-                      <div
-                        style={{
-                          display: "flex",
-                          flexDirection: "row"
-                        }}
-                      >
+                      <div className="flex flex-row">
                         <i
-                          className="fa fa-print"
+                          className="fa fa-print mr-[2px]"
                           aria-hidden="true"
-                          style={{ marginRight: "2px" }}
                         ></i>
                         Print
                       </div>
@@ -239,8 +174,9 @@ function Header({
                             alertSendEmail();
                           }
                         }}
-                        className="border-none font-[650] text-[14px]"
-                        style={{ color: isMailSend ? "gray" : themeColor }}
+                        className={`${
+                          isMailSend ? "" : "op-link-primary"
+                        } op-link no-underline font-[650] text-[14px]`}
                         data-tut={dataTut4}
                       >
                         {completeBtnTitle ? completeBtnTitle : "Send"}
@@ -255,18 +191,14 @@ function Header({
                             embedWidgetsData();
                           }
                         }}
-                        style={{ color: themeColor }}
-                        className="border-none font-[650] text-[14px]"
+                        className="border-none font-[650] text-[14px] op-link op-link-primary no-underline"
                       >
                         Finish
                       </div>
                     )}
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild>
-                        <div
-                          className="border-none font-[650] text-[18px] px-2 ml-[4px]"
-                          style={{ color: themeColor }}
-                        >
+                        <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"
@@ -318,12 +250,12 @@ function Header({
                   signersdata.length !== filterPrefill.length && (
                     <div>
                       {filterPrefill.length === 0 ? (
-                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        <span className="text-[13px] text-[#f5405e]">
                           Add {signersdata.length - filterPrefill.length}{" "}
                           recipients signature
                         </span>
                       ) : (
-                        <span style={{ fontSize: "13px", color: "#f5405e" }}>
+                        <span className="text-[13px] text-[#f5405e]">
                           Add {signersdata.length - filterPrefill.length} more
                           recipients signature
                         </span>
@@ -343,21 +275,15 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
                 <button
                   disabled={isMailSend && true}
                   data-tut="reactourFour"
-                  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();
-                  }}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
+                  onClick={() => alertSendEmail()}
                 >
                   {completeBtnTitle
                     ? completeBtnTitle
@@ -376,34 +302,34 @@ function Header({
                     onClick={() =>
                       handleDownloadCertificate(pdfDetails, setIsDownloading)
                     }
-                    className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                    className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
                   >
                     <i
                       className="fa-solid fa-award py-[3px]"
                       aria-hidden="true"
                     ></i>
-                    <span className="hidden lg:block ml-1">Certificate</span>
+                    <span className="hidden lg:block">Certificate</span>
                   </button>
                 )}
 
                 <button
                   onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                   type="button"
-                  className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                  className="op-btn op-btn-neutral op-btn-sm mr-[5px] shadow"
                 >
                   <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block ml-1">Print</span>
+                  <span className="hidden lg:block">Print</span>
                 </button>
 
                 <button
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
                   onClick={() =>
                     handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
                   }
                 >
                   <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
-                  <span className="hidden lg:block ml-1">Download</span>
+                  <span className="hidden lg:block">Download</span>
                 </button>
               </div>
             ) : (
@@ -411,61 +337,56 @@ function Header({
                 <button
                   onClick={() => navigate(-1)}
                   type="button"
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                  className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
                 >
                   Back
                 </button>
                 {currentSigner && (
                   <>
                     <button
-                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#de4337]"
+                      className="op-btn op-btn-secondary op-btn-sm mr-[5px] shadow"
                       onClick={() => handleDeclinePdfAlert()}
                     >
                       Decline
                     </button>
                     <button
                       type="button"
-                      className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                      className="op-btn op-btn-primary op-btn-sm mr-[5px] shadow"
                       onClick={() => embedWidgetsData()}
                     >
                       Finish
                     </button>
-                    <DropdownMenu.Root>
-                      <DropdownMenu.Trigger asChild>
-                        <div
-                          className="border-none font-[650] text-[16px] py-[3px] px-[11px] shadow rounded bg-white"
-                          style={{ color: themeColor }}
+                    <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
+                            )
+                          }
                         >
-                          <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
-                              )
-                            }
-                          >
+                          <span className="font-semibold text-[12px]">
                             <i
-                              className="fa fa-arrow-down mr-[5px]"
+                              className="fa fa-arrow-down"
                               aria-hidden="true"
-                            ></i>
-                            <span className="font-[500]">Download</span>
-                          </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                      </DropdownMenu.Portal>
-                    </DropdownMenu.Root>
+                            ></i>{" "}
+                            Download
+                          </span>
+                        </li>
+                      </ul>
+                    </div>
                   </>
                 )}
               </div>
@@ -478,56 +399,51 @@ function Header({
                   onClick={() =>
                     handleDownloadCertificate(pdfDetails, setIsDownloading)
                   }
-                  className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                  className="op-btn op-btn-secondary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
                 >
-                  <i
-                    className="fa-solid fa-award py-[3px]"
-                    aria-hidden="true"
-                  ></i>
-                  <span className="hidden lg:block ml-1">Certificate</span>
+                  <i className="fa-solid fa-award" aria-hidden="true"></i>
+                  <span className="hidden lg:block">Certificate</span>
                 </button>
               )}
               <button
                 onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)}
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                className="op-btn op-btn-neutral op-btn-sm font-medium text-[13px] mr-[5px] shadow"
               >
-                <i className="fa fa-print py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Print</span>
+                <i className="fa fa-print" aria-hidden="true"></i>
+                <span className="hidden lg:block">Print</span>
               </button>
               <button
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                className="op-btn op-btn-primary op-btn-sm font-medium text-[13px] mr-[5px] shadow"
                 onClick={() =>
                   handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading)
                 }
               >
-                <i className="fa fa-download py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Download</span>
+                <i className="fa fa-download" aria-hidden="true"></i>
+                <span className="hidden lg:block">Download</span>
               </button>
               <button
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#3ba7e5]"
+                className="op-btn op-btn-info op-btn-sm font-medium text-[13px] mr-[5px] shadow"
                 onClick={() => setIsEmail(true)}
               >
-                <i className="fa fa-envelope py-[3px]" aria-hidden="true"></i>
-                <span className="hidden lg:block ml-1">Mail</span>
+                <i className="fa fa-envelope" aria-hidden="true"></i>
+                <span className="hidden lg:block">Mail</span>
               </button>
             </div>
           ) : (
             <div className="flex">
               <button
-                onClick={() => {
-                  navigate(-1);
-                }}
+                onClick={() => navigate(-1)}
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-black font-[500] text-sm mr-[5px] bg-white"
+                className="op-btn op-btn-ghost op-btn-sm mr-[5px]"
               >
                 Back
               </button>
               <button
                 type="button"
-                className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[18px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                className="op-btn op-btn-primary op-btn-sm mr-[5px]"
                 onClick={() => {
                   if (!pdfUrl) {
                     embedWidgetsData();
@@ -542,10 +458,7 @@ function Header({
       )}
       {isDownloading === "pdf" && (
         <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30">
-          <div
-            style={{ fontSize: "45px", color: "#3dd3e0" }}
-            className="loader-37"
-          ></div>
+          <Loader />
         </div>
       )}
       <ModalUi
@@ -557,7 +470,7 @@ function Header({
         }
         handleClose={() => setIsDownloading("")}
       >
-        <div className="p-3 md:p-5 text-[13px] md:text-base text-center">
+        <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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 
 function PrevNext({ pageNumber, allPages, changePage }) {
   //for go to previous page
@@ -12,40 +11,30 @@ function PrevNext({ pageNumber, allPages, changePage }) {
   }
 
   return (
-    <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 || "--"}
+    <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>
         </span>
-        <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>
+        <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>
     </div>
   );
 }

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

@@ -7,37 +7,15 @@ 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);
   };
@@ -116,18 +94,21 @@ const RecipientList = (props) => {
               data-tut="reactourFirst"
               onMouseEnter={() => setIsHover(ind)}
               onMouseLeave={() => setIsHover(null)}
-              className={
+              className={`${
                 props.sendInOrder
                   ? props.isMailSend
-                    ? "disabled"
-                    : "dragCursor"
-                  : props.isMailSend && "disabled"
-              }
-              style={
-                (!isMobile && isHover === ind) || props.isSelectListId === ind
-                  ? onHoverStyle(ind, obj?.blockColor)
-                  : nonHoverStyle(ind)
-              }
+                    ? "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"
+              }}
               onClick={(e) => {
                 e.preventDefault();
                 props.setSignerObjId(obj?.objectId || "");
@@ -141,38 +122,16 @@ const RecipientList = (props) => {
                 }
               }}
             >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  width: "100%"
-                }}
-              >
+              <div className="flex flex-row items-center w-full">
                 <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],
-                    width: 30,
-                    height: 30,
-                    display: "flex",
-                    borderRadius: 30 / 2,
-                    justifyContent: "center",
-                    alignItems: "center",
-                    marginRight: "12px"
+                      : nameColor[ind % nameColor.length]
                   }}
                 >
-                  <span
-                    className={props.sendInOrder && "dragCursor"}
-                    style={{
-                      fontSize: "12px",
-                      textAlign: "center",
-                      fontWeight: "bold",
-                      color: "white",
-                      textTransform: "uppercase"
-                    }}
-                  >
+                  <span className="text-white uppercase font-bold text-center text-[12px]">
                     {isWidgetExist(obj.Id) ? (
                       <i className="fa-solid fa-check"></i>
                     ) : (
@@ -185,67 +144,72 @@ const RecipientList = (props) => {
                   </span>
                 </div>
                 <div
-                  style={{
-                    display: "flex",
-                    flexDirection: obj.Name ? "column" : "row",
-                    alignItems: "center"
-                  }}
+                  className={`${
+                    obj?.Name ? "flex-col" : "flex-row"
+                  } flex items-center`}
                 >
                   {obj.Name ? (
-                    <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`}
+                    >
+                      {obj.Name}
+                    </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>
-                    </>
+                    <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>
                   )}
                   {obj.Name && (
-                    <span className={"useEmail"}>
+                    <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`}
+                    >
                       {obj?.Role || obj?.Email}
                     </span>
                   )}
                 </div>
               </div>
               {isMobile && props.sendInOrder && (
-                <div
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    alignItems: "center",
-                    gap: 5
-                  }}
-                >
+                <div className="flex flex-row items-center gap-[5px]">
                   <div
                     onClick={(e) => {
                       if (ind !== 0) {
@@ -253,7 +217,7 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, "up");
                       }
                     }}
-                    style={{ color: ind === 0 ? "gray" : "black" }}
+                    className={ind === 0 ? "text-[gray]" : "text-black"}
                   >
                     ▲
                   </div>
@@ -264,10 +228,11 @@ const RecipientList = (props) => {
                         handleChangeSequence(e, ind, null, "down");
                       }
                     }}
-                    style={{
-                      color:
-                        ind === props.signersdata.length - 1 ? "gray" : "black"
-                    }}
+                    className={
+                      ind === props.signersdata.length - 1
+                        ? "text-[gray]"
+                        : "text-black"
+                    }
                   >
                     ▼
                   </div>
@@ -279,7 +244,12 @@ const RecipientList = (props) => {
                     e.stopPropagation();
                     props.handleDeleteUser(obj.Id);
                   }}
-                  style={{ cursor: "pointer", marginLeft: "5px" }}
+                  className={`${
+                    (!isMobile && isHover === ind) ||
+                    props.isSelectListId === ind
+                      ? "text-[#424242]"
+                      : "text-base-content"
+                  } cursor-pointer ml-[5px]`}
                 >
                   <i className="fa-regular fa-trash-can"></i>
                 </div>

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

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import RSC from "react-scrollbars-custom";
 import { Document, Page } from "react-pdf";
-import { themeColor } from "../../constant/const";
 
 function RenderAllPdfPage({
   signPdfUrl,
@@ -40,15 +39,7 @@ function RenderAllPdfPage({
     const ispageNumber = signPageNumber.includes(index + 1);
     return (
       ispageNumber && (
-        <div
-          style={{
-            position: "absolute",
-            zIndex: 2,
-            top: -12,
-            right: -7,
-            transform: "translate(50% -50%)"
-          }}
-        >
+        <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"
@@ -58,24 +49,10 @@ function RenderAllPdfPage({
     );
   };
   return (
-    <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"
-          >
+    <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">
             Pages
           </div>
 
@@ -95,21 +72,11 @@ function RenderAllPdfPage({
                 {Array.from(new Array(allPages), (el, index) => (
                   <div
                     key={index}
-                    style={{
-                      width: "100px",
-                      border:
-                        pageNumber - 1 === index
-                          ? "2px solid red"
-                          : "2px solid #878787",
-                      // padding: "5px",
-                      margin: "10px",
-
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-
-                      position: "relative"
-                    }}
+                    className={`${
+                      pageNumber - 1 === index
+                        ? "border-[red]"
+                        : "border-[#878787]"
+                    } border-2 w-[100px] m-[10px] flex justify-center items-center relative`}
                     onClick={() => {
                       setPageNumber(index + 1);
                       if (setSignBtnPosition) {
@@ -119,13 +86,7 @@ function RenderAllPdfPage({
                   >
                     {signerPos && addSignatureBookmark(index)}
 
-                    <div
-                      style={{
-                        position: "relative",
-                        zIndex: 1,
-                        overflow: "hidden"
-                      }}
-                    >
+                    <div className="relative z-[1] overflow-hidden">
                       <Page
                         key={`page_${index + 1}`}
                         pageNumber={index + 1}

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

@@ -215,18 +215,16 @@ function RenderPdf({
     const handleAllUserName = (Id, Role, type) => {
       return (
         <React.Fragment>
-          <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+          <div className="text-black text-[8px] font-medium">
             {
               pdfDetails[0].Signers?.find(
                 (signer) => signer.objectId === data.signerObjId
               )?.Name
             }
           </div>
-          {type && (
-            <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-          )}
+          {type && <div className="text-[11px] font-bold">{type}</div>}
           {Role && (
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+            <div className="text-black text-[8px] font-medium">
               {`(${Role})`}
             </div>
           )}
@@ -290,14 +288,12 @@ function RenderPdf({
       if (checkSign?.Name) {
         return (
           <>
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+            <div className="text-black text-[8px] font-medium">
               {checkSign?.Name}
             </div>
-            {type && (
-              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-            )}
+            {type && <div className="text-[11px] font-bold">{type}</div>}
             {Role && (
-              <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
+              <div className="text-black text-[8px] font-medium">
                 {`(${Role})`}
               </div>
             )}
@@ -306,24 +302,16 @@ function RenderPdf({
       } else {
         return (
           <>
-            {type && (
-              <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-            )}
-            <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-              {Role}
-            </div>
+            {type && <div className="text-[11px] font-bold">{type}</div>}
+            <div className="text-black text-[8px] font-medium">{Role}</div>
           </>
         );
       }
     } else {
       return (
         <>
-          {type && (
-            <div style={{ fontWeight: "700", fontSize: 11 }}>{type}</div>
-          )}
-          <div style={{ color: "black", fontSize: 8, fontWeight: "500" }}>
-            {Role}
-          </div>
+          {type && <div className="text-[11px] font-bold">{type}</div>}
+          <div className="text-black text-[8px] font-medium">{Role}</div>
         </>
       );
     }
@@ -462,17 +450,9 @@ function RenderPdf({
                   }))}
 
           {/* this component for render pdf document is in middle of the component */}
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center"
-            }}
-          >
+          <div className="flex items-center justify-center">
             <Document
-              onLoadError={() => {
-                setPdfLoadFail(true);
-              }}
+              onLoadError={() => setPdfLoadFail(true)}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               // ref={pdfRef}'
@@ -519,10 +499,7 @@ function RenderPdf({
         >
           <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,6 +1,5 @@
 import React, { useRef, useState, useEffect } from "react";
 import SignatureCanvas from "react-signature-canvas";
-import { themeColor } from "../../constant/const";
 
 function SignPad({
   isSignPad,
@@ -78,21 +77,16 @@ function SignPad({
   //save button component
   const SaveBtn = () => {
     return (
-      <div style={{ marginTop: "2px" }}>
+      <div>
         {(isTab === "draw" || isTab === "uploadImage") && (
           <button
-            style={{
-              color: "black",
-              border: "1px solid #ccc"
-            }}
             type="button"
-            className="finishBtn saveBtn"
+            className="op-btn op-btn-ghost mr-1 mt-[2px]"
             onClick={() => handleClear()}
           >
             Clear
           </button>
         )}
-
         <button
           onClick={() => {
             setCurrWidgetsDetails({});
@@ -127,19 +121,12 @@ 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
-              ? "finishBtn saveBtn"
-              : "disabledFinish saveBtn"
-          }
+              ? ""
+              : "pointer-events-none"
+          } op-btn op-btn-primary shadow-lg`}
         >
           Save
         </button>
@@ -214,8 +201,8 @@ function SignPad({
     const fontfamily = fontStyle
       ? fontStyle
       : fontSelect
-      ? fontSelect
-      : "Fasthand";
+        ? fontSelect
+        : "Fasthand";
 
     //creating span for getting text content width
     const span = document.createElement("span");
@@ -256,7 +243,7 @@ function SignPad({
 
   const PenColorComponent = (props) => {
     return (
-      <div style={{ display: "flex", flexDirection: "row" }}>
+      <div className="flex flex-row items-start">
         {allColor.map((data, key) => {
           return (
             <i
@@ -267,10 +254,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 &&
@@ -296,33 +283,14 @@ function SignPad({
   return (
     <div>
       {isSignPad && (
-        <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
-                    }}
-                  >
+        <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">
                     {isStamp ? (
-                      <span style={{ color: themeColor }} className="signTab">
+                      <span className="op-link-primary op-link">
                         {widgetType === "image"
                           ? "Upload image"
                           : "Upload stamp image"}
@@ -337,23 +305,14 @@ function SignPad({
                               setIsTab("draw");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "draw" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "draw"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Draw
                           </span>
-
-                          <div
-                            style={{
-                              border:
-                                isTab === "draw"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -363,22 +322,14 @@ function SignPad({
                               setIsTab("uploadImage");
                               setSignatureType("");
                             }}
-                            style={{
-                              color:
-                                isTab === "uploadImage" ? themeColor : "#515252"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "uploadImage"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Upload Image
                           </span>
-                          <div
-                            style={{
-                              border:
-                                isTab === "uploadImage"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         <div>
                           <span
@@ -389,23 +340,14 @@ function SignPad({
                               setSignatureType("");
                               setImage();
                             }}
-                            style={{
-                              color: isTab === "type" ? themeColor : "#515252",
-                              marginLeft: "2px"
-                            }}
-                            className="signTab"
+                            className={`${
+                              isTab === "type"
+                                ? "op-link-primary"
+                                : "no-underline"
+                            } op-link underline-offset-8 ml-[2px]`}
                           >
                             Type
                           </span>
-
-                          <div
-                            style={{
-                              border:
-                                isTab === "type"
-                                  ? "1.5px solid #108783"
-                                  : "1.5px solid #ffffff"
-                            }}
-                          ></div>
                         </div>
                         {!isInitial && defaultSign ? (
                           <div>
@@ -417,24 +359,14 @@ function SignPad({
                                 setSignatureType("");
                                 setImage();
                               }}
-                              style={{
-                                color:
-                                  isTab === "mysignature"
-                                    ? themeColor
-                                    : "#515252"
-                              }}
-                              className="signTab"
+                              className={`${
+                                isTab === "mysignature"
+                                  ? "op-link-primary"
+                                  : "no-underline"
+                              } op-link underline-offset-8 ml-[2px]`}
                             >
                               My Signature
                             </span>
-                            <div
-                              style={{
-                                border:
-                                  isTab === "mysignature"
-                                    ? "1.5px solid #108783"
-                                    : "1.5px solid #ffffff"
-                              }}
-                            ></div>
                           </div>
                         ) : (
                           isInitial &&
@@ -448,24 +380,14 @@ function SignPad({
                                   setSignatureType("");
                                   setImage();
                                 }}
-                                style={{
-                                  color:
-                                    isTab === "mysignature"
-                                      ? themeColor
-                                      : "#515252"
-                                }}
-                                className="signTab"
+                                className={`${
+                                  isTab === "mysignature"
+                                    ? "op-link-primary"
+                                    : "no-underline"
+                                } op-link underline-offset-8 ml-[2px]`}
                               >
                                 My Initials
                               </span>
-                              <div
-                                style={{
-                                  border:
-                                    isTab === "mysignature"
-                                      ? "1.5px solid #108783"
-                                      : "1.5px solid #ffffff"
-                                }}
-                              ></div>
                             </div>
                           )
                         )}
@@ -475,8 +397,7 @@ function SignPad({
                 </div>
               </div>
               <div
-                className="closebtn"
-                style={{ color: "black" }}
+                className="text-[1.5rem] cursor-pointer"
                 onClick={() => {
                   setPenColor("blue");
                   setIsSignPad(false);
@@ -493,10 +414,10 @@ function SignPad({
                 &times;
               </div>
             </div>
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="p-[20px] h-full">
               {isDefaultSign ? (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -514,24 +435,19 @@ function SignPad({
                     >
                       <img
                         alt="stamp img"
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                          background: "rgb(255, 255, 255)",
-                          objectFit: "contain"
-                        }}
+                        className="w-full h-full object-contain bg-white"
                         draggable="false"
                         src={isInitial ? myInitial : defaultSign}
                       />
                     </div>
                   </div>
-                  <div style={{ display: "flex", justifyContent: "flex-end" }}>
+                  <div className="flex justify-end">
                     <SaveBtn />
                   </div>
                 </>
               ) : isImageSelect || isStamp ? (
                 !image ? (
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <div
                       style={{
                         border: "1.3px solid #007bff",
@@ -562,7 +478,7 @@ function SignPad({
                   </div>
                 ) : (
                   <>
-                    <div style={{ display: "flex", justifyContent: "center" }}>
+                    <div className="flex justify-center">
                       <div
                         style={{
                           border: "1.3px solid #007bff",
@@ -581,39 +497,26 @@ function SignPad({
                           ref={imageRef}
                           src={image.src}
                           draggable="false"
-                          style={{
-                            objectFit: "contain",
-                            height: "100%",
-                            width: "100%"
-                          }}
+                          className=" object-contain h-full w-full"
                         />
                       </div>
                     </div>
-                    <div
-                      style={{ display: "flex", justifyContent: "flex-end" }}
-                    >
+                    <div className="flex justify-end">
                       <SaveBtn />
                     </div>
                   </>
                 )
               ) : isTab === "type" ? (
                 <div>
-                  <div
-                    style={{
-                      display: "flex",
-                      justifyContent: "space-between",
-                      alignItems: "center"
-                    }}
-                  >
+                  <div className="flex justify-between items-center">
                     <span className="signatureText">
                       {isInitial ? "Initials" : "Signature"}:
                     </span>
-
                     <input
                       maxLength={isInitial ? 3 : 30}
                       style={{ fontFamily: fontSelect, color: penColor }}
                       type="text"
-                      className="signatureInput"
+                      className="ml-1 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-[20px]"
                       placeholder="Your signature"
                       value={signValue}
                       onChange={(e) => {
@@ -622,7 +525,6 @@ function SignPad({
                       }}
                     />
                   </div>
-
                   <div className="fontOptionContainer">
                     {fontOptions.map((font, ind) => {
                       return (
@@ -653,21 +555,14 @@ function SignPad({
                     })}
                   </div>
 
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent convertToImg={convertToImg} />
                     <SaveBtn />
                   </div>
                 </div>
               ) : (
                 <>
-                  <div style={{ display: "flex", justifyContent: "center" }}>
+                  <div className="flex justify-center">
                     <SignatureCanvas
                       ref={canvasRef}
                       penColor={penColor}
@@ -687,14 +582,7 @@ function SignPad({
                       dotSize={1}
                     />
                   </div>
-                  <div
-                    style={{
-                      display: "flex",
-                      flexDirection: "row",
-                      justifyContent: "space-between",
-                      marginTop: "10px"
-                    }}
-                  >
+                  <div className="flex flex-row justify-between mt-[10px]">
                     <PenColorComponent />
                     <SaveBtn />
                   </div>

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { themeColor } from "../../constant/const";
 import "../../styles/signature.css";
 function Signedby({ pdfDetails }) {
   const getFirstLetter = (name) => {
@@ -8,50 +7,18 @@ function Signedby({ pdfDetails }) {
   };
 
   return (
-    <div className="signerComponent">
-      <div
-        style={{
-          background: themeColor,
-          color: "white"
-        }}
-        className="signedStyle"
-      >
+    <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">
         Signed By
       </div>
-      <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"
-              }}
-            >
+      <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">
               {getFirstLetter(pdfDetails.ExtUserPtr.Name)}
             </span>
           </div>
-          <div style={{ display: "flex", flexDirection: "column" }}>
+          <div className="flex flex-col">
             <span className="userName">{pdfDetails.ExtUserPtr.Name}</span>
             <span className="useEmail">{pdfDetails.ExtUserPtr.Email}</span>
           </div>

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

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

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

@@ -1,16 +1,13 @@
 import React from "react";
-import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
+import Loader from "../../primitives/Loader";
 
 function VerifyEmail(props) {
   return (
-    <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"
-        >
+    <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">
           OTP verification
-        </div>
+        </h3>
         {props.isVerifyModal ? (
           <form
             onSubmit={(e) => {
@@ -18,25 +15,24 @@ function VerifyEmail(props) {
               props.handleVerifyEmail(e);
             }}
           >
-            <div className="px-6 py-3">
+            <div className="px-6 py-3 text-base-content">
               <label className="mb-2">Enter OTP</label>
               <input
                 required
                 type="tel"
                 pattern="[0-9]{4}"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content 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={submitBtn}>
+              <button type="submit" className="op-btn op-btn-primary">
                 Verify
               </button>
               <button
-                className={`${rejectBtn} ml-2`}
+                className="op-btn op-btn-secondary ml-2"
                 onClick={(e) => props.handleResend(e)}
               >
                 Resend
@@ -44,29 +40,15 @@ function VerifyEmail(props) {
             </div>
           </form>
         ) : props.otpLoader ? (
-          <div
-            style={{
-              height: "150px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center"
-            }}
-          >
-            <div
-              style={{
-                fontSize: "45px",
-                color: "#3dd3e0"
-              }}
-              className="loader-37"
-            ></div>
+          <div className="h-[150px] flex items-center justify-center">
+            <Loader />
           </div>
         ) : (
-          <div className="px-6 py-3">
-            <p className="mb-2">Please verify your email !</p>
-            <hr />
+          <div className="px-6 py-3 text-base-content">
+            <p className="mb-2 text-sm">Please verify your email !</p>
             <div className="px-0 mt-3">
               <button
-                className={submitBtn}
+                className="op-btn op-btn-primary"
                 type="submit"
                 onClick={() => {
                   props.handleVerifyBtn();
@@ -78,7 +60,7 @@ function VerifyEmail(props) {
           </div>
         )}
       </div>
-    </div>
+    </dialog>
   );
 }
 

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

@@ -9,7 +9,6 @@ import {
   textWidget,
   widgets
 } from "../../constant/Utils";
-import { themeColor } from "../../constant/const";
 function WidgetComponent({
   dragSignature,
   signRef,
@@ -256,117 +255,82 @@ function WidgetComponent({
             className="stickyfooter"
             style={{ width: window.innerWidth + "px" }}
           >
-            {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
+            <div className="mx-1">
+              {isSigners && (
+                <div
+                  data-tut={dataTut}
+                  className="py-[10px] flex justify-center items-center op-card"
                   style={{
-                    fontSize: "13px",
-                    fontWeight: "700",
-                    textAlign: "center"
+                    background: blockColor
+                      ? blockColor
+                      : isSelectListId
+                        ? color[isSelectListId % color.length]
+                        : color[0]
                   }}
+                  onClick={() => handleModal()}
                 >
-                  {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}
-                        </>
-                      )}
+                  <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>
                     </div>
-                  )}
-                  <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 && (
+                  </span>
+                </div>
+              )}
+            </div>
+            <div className="mx-1">
+              {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={() => setIsAddSigner(true)}
+                  className="op-btn op-btn-accent w-full my-[2px]"
+                  onClick={() => handleAddSigner()}
                 >
                   <i className="fa-solid fa-plus"></i>
-                  <span style={{ marginLeft: 2 }}>Add recipients</span>
+                  <span>Add role</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}
-              style={{
-                background: "white",
-                borderTop: `2px solid ${themeColor}`
-              }}
+              className="bg-base-100 border-[2px] border-t-primary"
             >
-              <div
-                style={{
-                  display: "flex",
-                  overflowX: "scroll",
-                  whiteSpace: "nowrap",
-                  padding: "10px 5px 10px 1px"
-                }}
-              >
+              <div className="flex whitespace-nowrap overflow-x-scroll pt-[10px] pb-[5px] pr-[5px]">
                 <WidgetList
                   updateWidgets={updateWidgets}
                   handleDivClick={handleDivClick}
@@ -383,20 +347,14 @@ function WidgetComponent({
       ) : (
         <div
           data-tut={dataTut}
-          className={
-            isMailSend ? "disabled signerComponent " : "signerComponent"
-          }
+          className={`${
+            isMailSend ? "bg-opacity-50 pointer-events-none" : ""
+          } hidden md:block w-[180px] h-full bg-base-100`}
         >
-          <div
-            style={{
-              background: themeColor,
-              padding: "5px"
-            }}
-          >
-            <span className="signedStyle">Fields</span>
+          <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>
-
-          <div className="signLayoutContainer1">
+          <div className="flex flex-col items-center my-3">
             <WidgetList
               updateWidgets={updateWidgets}
               handleDivClick={handleDivClick}
@@ -413,7 +371,7 @@ function WidgetComponent({
           handleClose={handleModal}
         >
           {signersdata.length > 0 ? (
-            <div style={{ maxHeight: "600px", overflow: "auto" }}>
+            <div className="max-h-[600px] overflow-auto pb-1">
               <RecipientList
                 signerPos={signerPos}
                 signersdata={signersdata}
@@ -433,14 +391,7 @@ function WidgetComponent({
               />
             </div>
           ) : (
-            <div
-              style={{
-                padding: 20,
-                fontSize: 15,
-                fontWeight: "500",
-                textAlign: "center"
-              }}
-            >
+            <div className=" p-[20px] text-[15px] font-medium text-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} style={{ marginBottom: "5px" }}>
+      <div key={ind} className="mb-[5px]">
         <div
-          className="widgets"
+          className="select-none"
           onClick={() => {
             props.addPositionOfSignature &&
               props.addPositionOfSignature("onclick", item);

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

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

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

@@ -1,6 +1,7 @@
 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 = {
@@ -113,11 +114,8 @@ 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 ">
-            <div
-              style={{ fontSize: "45px", color: "#3dd3e0" }}
-              className="loader-37"
-            ></div>
+          <div className="absolute h-full w-full flex justify-center items-center">
+            <Loader />
           </div>
         )}
         <h1 className="text-base font-semibold">Create Folder</h1>

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

@@ -174,7 +174,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       <div className="relative max-w-sm">
         <div
           onClick={() => SetIsOpen(true)}
-          className=" cursor-pointer rounded px-[20px] py-[20px] bg-white border border-gray-200 shadow flex max-w-sm gap-8 items-center"
+          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

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

@@ -3,16 +3,6 @@ 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();
@@ -79,32 +69,44 @@ const SelectSigners = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
-      <div className="form-wrapper">
-        <div className="form-section" style={{ marginBottom: 0 }}>
-          <label style={{ fontSize: 14, fontWeight: "700" }}>Choose User</label>
+    <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>
           <AsyncSelect
             cacheOptions
             defaultOptions
             value={selected}
             loadingMessage={() => "Loading..."}
-            noOptionsMessage={() => "User not Found"}
+            noOptionsMessage={() => "Contact not found"}
             loadOptions={loadOptions}
             onChange={handleOptions}
-            styles={customStyles}
+            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>
-        {isError ? (
-          <p style={{ color: "red", fontSize: "12px", margin: "5px" }}>
-            Please select signer
-          </p>
-        ) : (
-          <p style={{ color: "transparent", fontSize: "12px", margin: "5px" }}>
-            .
-          </p>
-        )}
+        <p
+          className={`${
+            isError ? "text-[red]" : "text-transparent"
+          } text-[11px] ml-[6px] my-[2px]`}
+        >
+          Please select signer
+        </p>
         <div>
-          <button className="submitbutton" onClick={() => handleAdd()}>
+          <button className="op-btn op-btn-primary" onClick={() => handleAdd()}>
             Submit
           </button>
         </div>

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

@@ -1,15 +1,30 @@
 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
@@ -17,7 +32,6 @@ function arrayMove(array, from, to) {
  */
 
 const SignersInput = (props) => {
-  Modal.setAppElement("body");
   const [state, setState] = useState(undefined);
   // const [editFormData, setEditFormData] = useState([]);
   const [selected, setSelected] = useState([]);
@@ -108,15 +122,17 @@ 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-50">
+        <span className="absolute ml-1 text-xs z-30">
           <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 style={{ display: "flex", gap: 5 }}>
-        <div style={{ flexWrap: "wrap", width: "100%" }}>
+      <div className="flex gap-x-[5px]">
+        <div className="w-full">
           <Select
             onSortEnd={onSortEnd}
             distance={4}
@@ -126,6 +142,22 @@ 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
@@ -133,66 +165,29 @@ const SignersInput = (props) => {
             setIsModel(true);
             openModal();
           }}
-          style={{
-            cursor: "pointer",
-            borderRadius: 4,
-            border: "1px solid #ccc",
-            minHeight: 38,
-            minWidth: 48,
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center"
-          }}
+          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"
         >
           <i className="fas fa-plus"></i>
         </div>
-        <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>
+        <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>
       </div>
     </div>
   );

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

@@ -61,24 +61,24 @@ const SuggestionInput = (props) => {
     }
   };
   return (
-    <div className="flex flex-col items-center relative">
+    <div className="flex flex-col items-center relative text-base-content">
       <input
         type={props?.type || "text"}
         value={inputValue}
         onChange={handleInputChange}
         placeholder="Enter Email..."
-        className="w-full border-[1px] border-gray-400 p-2 text-black rounded lowercase"
+        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-white border border-gray-300 rounded shadow-md"
+          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-gray-100"
+              className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
               onClick={() => handleSuggestionClick(suggestion)}
             >
               {suggestion.Email}

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

@@ -3,7 +3,7 @@ import { NavLink } from "react-router-dom";
 
 const Menu = ({ item, isOpen, closeSidebar }) => {
   return (
-    <li key={item.title} role="none">
+    <li key={item.title} role="none" className="my-0.5">
       <NavLink
         to={
           item.pageType
@@ -12,8 +12,8 @@ const Menu = ({ item, isOpen, closeSidebar }) => {
         }
         className={({ isActive }) =>
           `${
-            isActive ? "text-[#0056b3] bg-[#eef1f5]" : ""
-          } mx-auto flex items-center hover:bg-[#eef1f5] p-3 lg:p-4 cursor-pointer`
+            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`
         }
         onClick={closeSidebar}
         tabIndex={isOpen ? 0 : -1}

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

@@ -9,6 +9,7 @@ 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");
@@ -33,10 +34,18 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
     }
   };
 
+  const toggleSubmenu = (title) => {
+    setSubmenuOpen({ [title]: !submenuOpen[title] });
+  };
+
+  const handleMenuItem = () => {
+    closeSidebar();
+    setSubmenuOpen({});
+  };
   return (
     <aside
-      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"}`}
+      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"}`}
     >
       <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">
@@ -47,13 +56,20 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
           />
         </div>
         <div>
-          <p className="text-[14px] font-bold">{username}</p>
-          <p className={`text-[12px] ${tenantname ? "mt-2" : ""}`}>
+          <p className="text-[14px] font-bold text-base-content">{username}</p>
+          <p
+            className={`text-[12px] text-base-content ${
+              tenantname ? "mt-2" : ""
+            }`}
+          >
             {tenantname}
           </p>
         </div>
       </div>
-      <nav aria-label="OpenSign Sidebar Navigation">
+      <nav
+        className="op-menu op-menu-sm"
+        aria-label="OpenSign Sidebar Navigation"
+      >
         <ul
           className="text-sm"
           role="menubar"
@@ -65,19 +81,21 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
                 key={item.title}
                 item={item}
                 isOpen={isOpen}
-                closeSidebar={closeSidebar}
+                closeSidebar={handleMenuItem}
               />
             ) : (
               <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-black gap-3">
+      <footer className="mt-4 flex justify-center items-center text-[25px] text-base-content gap-3">
         <SocialMedia />
       </footer>
     </aside>

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

@@ -1,19 +1,13 @@
-import React, { useState } from "react";
+import React from "react";
 import { NavLink } from "react-router-dom";
 
-const Submenu = ({ item, closeSidebar }) => {
-  const [submenuOpen, setSubmenuOpen] = useState(false);
+const Submenu = ({ item, closeSidebar, toggleSubmenu, submenuOpen }) => {
   const { title, icon, children } = item;
-
-  const toggleSubmenu = () => {
-    setSubmenuOpen(!submenuOpen);
-  };
-
   return (
-    <li role="none">
+    <li role="none" className="my-0.5">
       <button
-        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]"
+        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 "
         aria-expanded={submenuOpen}
         aria-haspopup="true"
         aria-controls={`submenu-${title}`}
@@ -23,23 +17,29 @@ const Submenu = ({ item, closeSidebar }) => {
           <span className="ml-3 lg:ml-4">{title}</span>
           <i
             className={`${
-              submenuOpen ? "fa-solid fa-angle-down" : "fa-solid fa-angle-right"
+              submenuOpen[item.title]
+                ? "fa-solid fa-angle-down"
+                : "fa-solid fa-angle-right"
             }`}
             aria-hidden="true"
           ></i>
         </div>
       </button>
-      {submenuOpen && (
+      {submenuOpen[item.title] && (
         <ul id={`submenu-${title}`} role="menu" aria-label={`${title} submenu`}>
           {children.map((childItem) => (
-            <li key={childItem.title} role="none">
+            <li key={childItem.title} role="none" className="my-0.5">
               <NavLink
                 to={
                   childItem.pageType
                     ? `/${childItem.pageType}/${childItem.objectId}`
                     : `/${childItem.objectId}`
                 }
-                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"
+                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`
+                }
                 onClick={closeSidebar}
                 role="menuitem"
                 tabIndex={submenuOpen ? 0 : -1}

apps/OpenSign/src/constant/Utils.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import moment from "moment";
-import { isEnableSubscription, themeColor } from "./const";
+import { isEnableSubscription } from "./const";
 import React from "react";
 import { rgb } from "pdf-lib";
 import Parse from "parse";
@@ -376,43 +376,21 @@ export const addWidgetOptions = (type) => {
       return {};
   }
 };
-export const getWidgetType = (item, marginLeft) => {
+export const getWidgetType = (item) => {
   return (
-    <>
-      <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]">
+    <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">
             {item.type}
           </span>
         </div>
-        <div
-          style={{
-            backgroundColor: themeColor,
-            padding: "0 5px",
-            display: "flex",
-            alignItems: "center"
-          }}
-        >
-          <i
-            style={{ color: "white", fontSize: item.iconSize }}
-            className={item.icon}
-          ></i>
+        <div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
+          <i className={item.icon}></i>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

apps/OpenSign/src/constant/const.js

@@ -1,12 +1,6 @@
 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,17 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
-    background-color: white;
+body {
+  background-color: white;
 }
 
 /* Custom CSS to hide scrollbar */
 .hide-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-  
-.hide-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+  display: none;
+}
+
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
-  

apps/OpenSign/src/json/ReportJson.js

@@ -14,8 +14,7 @@ export default function reportJson(id) {
           {
             btnId: "1231",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -23,8 +22,7 @@ export default function reportJson(id) {
           {
             btnId: "2142",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -43,8 +41,7 @@ export default function reportJson(id) {
             btnId: "4536",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -62,8 +59,7 @@ export default function reportJson(id) {
           {
             btnId: "8901",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -71,8 +67,7 @@ export default function reportJson(id) {
           {
             btnId: "1588",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -80,7 +75,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
@@ -124,8 +119,7 @@ export default function reportJson(id) {
           {
             btnId: "1378",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -133,8 +127,7 @@ export default function reportJson(id) {
           {
             btnId: "1278",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -152,8 +145,7 @@ export default function reportJson(id) {
           {
             btnId: "1458",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -161,8 +153,7 @@ export default function reportJson(id) {
           {
             btnId: "1358",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -180,8 +171,7 @@ export default function reportJson(id) {
           {
             btnId: "1898",
             hoverLabel: "View",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-eye",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -189,8 +179,7 @@ export default function reportJson(id) {
           {
             btnId: "1998",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -208,8 +197,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "Share",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-share",
             redirectUrl: "",
             action: "share"
@@ -217,8 +205,7 @@ export default function reportJson(id) {
           {
             btnId: "1999",
             hoverLabel: "View",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-eye",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -226,7 +213,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",
@@ -269,8 +256,7 @@ export default function reportJson(id) {
             btnId: "2001",
             btnLabel: "sign",
             hoverLabel: "Sign",
-            btnColor: "#3ac9d6",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-signature",
             redirectUrl: "pdfRequestFiles",
             action: "redirect"
@@ -286,8 +272,7 @@ export default function reportJson(id) {
           {
             btnId: "2003",
             hoverLabel: "Edit",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa-solid fa-pen",
             redirectUrl: "draftDocument",
             action: "redirect"
@@ -295,8 +280,7 @@ export default function reportJson(id) {
           {
             btnId: "2004",
             hoverLabel: "Delete",
-            btnColor: "#ff4848",
-            textColor: "white",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa fa-trash",
             redirectUrl: "",
             action: "delete"
@@ -312,8 +296,7 @@ export default function reportJson(id) {
           {
             btnId: "2204",
             hoverLabel: "Delete",
-            btnColor: "#f55a42",
-            textColor: "white",
+            btnColor: "op-btn-outline op-btn-error",
             btnIcon: "fa-solid fa-trash",
             action: "delete"
           }
@@ -332,8 +315,7 @@ export default function reportJson(id) {
             btnId: "2234",
             btnLabel: "Use",
             hoverLabel: "Use",
-            btnColor: "#4bd396",
-            textColor: "white",
+            btnColor: "op-btn-primary",
             btnIcon: "fa fa-plus",
             redirectUrl: "placeHolderSign",
             action: "redirect",
@@ -345,6 +327,7 @@ export default function reportJson(id) {
             btnId: "1631",
             btnLabel: "Quick send",
             hoverLabel: "Quick send",
+            btnColor: "op-btn-secondary",
             btnIcon: "fa-solid fa-envelope",
             redirectUrl: "",
             action: "bulksend",
@@ -355,7 +338,7 @@ export default function reportJson(id) {
           {
             btnId: "2234",
             hoverLabel: "option",
-            btnColor: "transparent",
+            btnColor: "",
             textColor: "black",
             btnIcon: "fa-solid fa-ellipsis-vertical fa-lg",
             action: "option",

apps/OpenSign/src/json/dashboardJson.js

@@ -0,0 +1,90 @@
+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/layout/HomeLayout.js

@@ -12,6 +12,7 @@ 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();
@@ -247,27 +248,14 @@ const HomeLayout = () => {
   };
   return (
     <div>
-      <div className="sticky top-0 z-50">
+      <div className="sticky top-0 z-[101]">
         {!isLoader && <Header showSidebar={showSidebar} />}
       </div>
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div
-              style={{
-                height: "100vh",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="flex h-[100vh] justify-center items-center">
+              <Loader />
             </div>
           ) : (
             <>
@@ -277,7 +265,7 @@ const HomeLayout = () => {
                   id="renderList"
                   className="relative h-screen flex flex-col justify-between w-full overflow-y-auto"
                 >
-                  <div className="bg-[#eef1f5] p-3">{<Outlet />}</div>
+                  <div className="bg-base-200 p-3">{<Outlet />}</div>
                   <div className="z-30">
                     <Footer />
                   </div>

apps/OpenSign/src/pages/ChangePassword.js

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

apps/OpenSign/src/pages/Dashboard.js

@@ -1,20 +1,19 @@
 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 [classnameArray, setclassnameArray] = useState([]);
-  const [loading, setloading] = useState(false);
-  const [defaultQuery, setDefaultQuery] = useState("");
+  const [dashboard, setdashboard] = useState({});
+  const [loading, setloading] = useState(true);
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {
@@ -30,53 +29,10 @@ const Dashboard = () => {
   }, [id]);
 
   const getDashboard = async (id) => {
-    setloading(true);
     try {
-      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
+      const dashboard = dashboardJson.find((x) => x.id === id);
+      setdashboard(dashboard);
+      const dashboardTour = dashboard.columns
         .filter((col) => {
           if (col.widget.data && col.widget.data.tourSection) {
             return col;
@@ -90,14 +46,7 @@ const Dashboard = () => {
             // style: { backgroundColor: "#abd4d2" },
           };
         });
-      dispatch(saveTourSteps(arr));
-      // console.log("arr ", arr);
-      setclassnameArray(classArray);
-      if (localStorage.getItem("DashboardDefaultFilter")) {
-        setDefaultQuery(localStorage.getItem("DashboardDefaultFilter"));
-      } else {
-        setDefaultQuery(DefaultQuery);
-      }
+      dispatch(saveTourSteps(dashboardTour));
       setloading(false);
     } catch (e) {
       console.error("Problem", e);
@@ -105,32 +54,16 @@ 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" />
-      {_dash}
+      {loading ? (
+        <div className="h-[300px] w-full bg-white flex justify-center items-center rounded-md">
+          <Loader />
+        </div>
+      ) : (
+        <GetDashboard dashboard={dashboard} />
+      )}
     </React.Fragment>
   );
 };

apps/OpenSign/src/pages/ForgetPassword.js

@@ -1,21 +1,26 @@
 import React, { useEffect, useState } from "react";
 import Title from "../components/Title";
-import { NavLink } from "react-router-dom";
+import { useNavigate } 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 });
@@ -51,15 +56,26 @@ function ForgotPassword() {
 
   useEffect(() => {
     dispatch(fetchAppInfo());
+    saveLogo();
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
-
-  let image = appInfo.applogo;
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
   return (
-    <div className="bg-white">
+    <div>
       <Title title="Forgot password page" />
       {sentStatus === "success" && (
         <Alert type="success">
@@ -69,29 +85,31 @@ function ForgotPassword() {
       {sentStatus === "failed" && (
         <Alert type={"danger"}>Please setup email adapter </Alert>
       )}
-      <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 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="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-            <div className="">
+            <div>
               <form onSubmit={handleSubmit}>
                 <h2 className="text-[30px] mt-6">Welcome Back !</h2>
                 <span className="text-[12px] text-[#878787]">
                   Reset Your Password
                 </span>
-                <div className="shadow-md rounded my-4">
+                <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                   <div className="px-6 py-4">
                     <label className="block text-xs">Email</label>
                     <input
-                      type="text"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      type="email"
                       name="email"
+                      className="op-input op-input-bordered op-input-sm w-full"
                       value={state.email}
                       onChange={handleChange}
                       required
@@ -99,19 +117,16 @@ function ForgotPassword() {
                     <hr className="my-2 border-none" />
                   </div>
                 </div>
-                <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"
-                  >
+                <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">
                     Submit
                   </button>
-                  <NavLink
-                    to="/"
-                    className="rounded-sm bg-white border-[1px] border-[#15b4e9] text-[#15b4e9] px-4 py-3 text-xs font-semibold shadow uppercase cursor-pointer"
+                  <button
+                    onClick={() => navigate("/", { replace: true })}
+                    className="op-btn op-btn-secondary"
                   >
                     Login
-                  </NavLink>
+                  </button>
                 </div>
               </form>
             </div>

apps/OpenSign/src/pages/Form.js

@@ -14,11 +14,12 @@ import { SaveFileSize } from "../constant/saveFileSize";
 import { checkIsSubscribed, getFileName, toDataUrl } from "../constant/Utils";
 import { PDFDocument } from "pdf-lib";
 import axios from "axios";
-import { isEnableSubscription, submitBtn } from "../constant/const";
+import { isEnableSubscription } 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() {
@@ -484,6 +485,9 @@ const Forms = (props) => {
     setpercentage(0);
     setTimeout(() => setIsReset(false), 50);
   };
+  const handleCancel = () => {
+    navigate("/dashboard/35KBoSgoAK");
+  };
   const handlePasswordSubmit = async (e) => {
     e.preventDefault();
     setIsPassword(false);
@@ -561,7 +565,7 @@ const Forms = (props) => {
     setFormData((prev) => ({ ...prev, autoreminder: !formData.autoreminder }));
   };
   return (
-    <div className="shadow-md rounded my-2 p-3 bg-[#ffffff] md:border-[1px] md:border-gray-600/50">
+    <div className="shadow-md rounded my-2 p-3 bg-base-100 text-base-content md:border-[1px] md:border-gray-600/50">
       <Title title={props?.title} />
       {isAlert && (
         <Alert type={isErr ? "danger" : "success"}>
@@ -571,16 +575,8 @@ const Forms = (props) => {
         </Alert>
       )}
       {isSubmit ? (
-        <div style={{ height: "300px" }}>
-          <div
-            style={{
-              marginLeft: "45%",
-              marginTop: "150px",
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[300px] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>
@@ -591,29 +587,30 @@ const Forms = (props) => {
           >
             <form onSubmit={handlePasswordSubmit}>
               <div className="px-6 pt-3 pb-2">
-                <label className="mb-2 text-xs">Password</label>
+                <label className="mb-2 text-xs text-base-content">
+                  Password
+                </label>
                 <input
                   type="text"
                   name="password"
                   value={formData.password}
                   onChange={(e) => handleStrInput(e)}
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                   placeholder="Enter pdf password"
                   required
                 />
-                {!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>
-                )}
+                <p
+                  className={`${
+                    !isCorrectPass
+                      ? "text-red-600"
+                      : "text-transparent pointer-events-none"
+                  } ml-2 text-[11px] `}
+                >
+                  Please provide correct password
+                </p>
               </div>
-              <hr />
-              <div className="px-6 my-3">
-                <button type="submit" className={submitBtn}>
+              <div className="px-6 mb-3">
+                <button type="submit" className="op-btn op-btn-primary">
                   Submit
                 </button>
               </div>
@@ -629,12 +626,12 @@ const Forms = (props) => {
                     style={{ width: `${percentage}%` }}
                   ></div>
                 </div>
-                <span className="text-black text-sm">{percentage}%</span>
+                <span className="text-base-content text-sm">{percentage}%</span>
               </div>
             )}
             {isDecrypting && (
               <div className="flex items-center gap-x-2">
-                <span className="text-black text-sm">
+                <span className="text-base-content text-sm">
                   Decrypting pdf please wait...
                 </span>
               </div>
@@ -648,13 +645,13 @@ const Forms = (props) => {
               </label>
               {fileupload.length > 0 ? (
                 <div className="flex gap-2 justify-center items-center">
-                  <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="flex justify-between items-center op-input op-input-bordered op-input-sm w-full text-x text-[13px]">
                     <div className="break-all">
                       file selected : {getFileName(fileupload)}
                     </div>
                     <div
                       onClick={() => setFileUpload("")}
-                      className="cursor-pointer px-[10px] text-[20px] font-bold bg-white text-red-500"
+                      className="cursor-pointer px-[10px] text-[20px] font-bold text-red-500"
                     >
                       <i className="fa-solid fa-xmark"></i>
                     </div>
@@ -667,10 +664,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="bg-white px-2 py-1.5 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     onChange={(e) => handleFileInput(e)}
                     ref={inputFileRef}
                     accept={
@@ -698,7 +695,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Name"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Name}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -708,7 +705,7 @@ const Forms = (props) => {
               <label className="block">Description</label>
               <input
                 name="Description"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Description}
                 onChange={(e) => handleStrInput(e)}
               />
@@ -726,7 +723,7 @@ const Forms = (props) => {
               </label>
               <input
                 name="Note"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 value={formData.Note}
                 onChange={(e) => handleStrInput(e)}
                 required
@@ -748,7 +745,7 @@ const Forms = (props) => {
                 <input
                   type="number"
                   name="TimeToCompleteDays"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                   value={formData.TimeToCompleteDays}
                   onChange={(e) => handleStrInput(e)}
                   required
@@ -786,7 +783,6 @@ const Forms = (props) => {
                             <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
@@ -822,6 +818,7 @@ const Forms = (props) => {
                     <input
                       type="radio"
                       value={"true"}
+                      className="op-radio op-radio-xs"
                       name="SendinOrder"
                       checked={formData.SendinOrder === "true"}
                       onChange={handleStrInput}
@@ -833,6 +830,7 @@ const Forms = (props) => {
                       type="radio"
                       value={"false"}
                       name="SendinOrder"
+                      className="op-radio op-radio-xs"
                       checked={formData.SendinOrder === "false"}
                       onChange={handleStrInput}
                     />
@@ -865,13 +863,11 @@ const Forms = (props) => {
                     } 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}
-                      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 mt-2"></div>
                   </label>
                 </div>
                 {formData?.autoreminder === true && (
@@ -884,7 +880,7 @@ const Forms = (props) => {
                       type="number"
                       value={formData.remindOnceInEvery}
                       name="remindOnceInEvery"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       onChange={handleStrInput}
                       required
                     />
@@ -892,21 +888,21 @@ const Forms = (props) => {
                 )}
               </>
             )}
-            <div className="flex items-center mt-3 gap-2 text-white">
+            <div className="flex items-center mt-3 gap-2">
               <button
                 className={`${
-                  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`}
+                  isSubmit ? "cursor-progress" : ""
+                } op-btn op-btn-primary`}
                 type="submit"
                 disabled={isSubmit}
               >
                 Next
               </button>
               <div
-                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()}
+                className="op-btn op-btn-ghost"
+                onClick={() => handleCancel()}
               >
-                Reset
+                Cancel
               </div>
             </div>
           </form>

apps/OpenSign/src/pages/GenerateToken.js

@@ -4,10 +4,11 @@ import axios from "axios";
 import { useNavigate } from "react-router-dom";
 import Alert from "../primitives/Alert";
 import ModalUi from "../primitives/ModalUi";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } 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();
@@ -109,24 +110,11 @@ function GenerateToken() {
       {copied && <Alert type="success">Copied</Alert>}
       {isErr && <Alert type="danger">Something went wrong!</Alert>}
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-screen">
+          <Loader />
         </div>
       ) : (
-        <div className="bg-white flex flex-col justify-center shadow rounded">
+        <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded">
           {!isEnableSubscription && <PremiumAlertHeader />}
           <h1 className={"ml-4 mt-3 mb-2 font-semibold"}>
             OpenSign™ API{" "}
@@ -155,7 +143,7 @@ function GenerateToken() {
                     {apiToken ? apiToken : "_____"}
                   </span>
                   <button
-                    className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-2.5 py-2 focus:outline-none ml-2"
+                    className="op-btn op-btn-accent op-btn-sm ml-2"
                     onClick={() => copytoclipboard(apiToken)}
                   >
                     <i className="fa-solid fa-copy"></i>
@@ -164,7 +152,7 @@ function GenerateToken() {
               </div>
               <button
                 onClick={apiToken ? handleModal : handleSubmit}
-                className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white text-xs md:text-sm lg:text-base px-2 py-2 focus:outline-none"
+                className="op-btn op-btn-primary"
               >
                 {apiToken ? "Regenerate Token" : "Generate Token"}
               </button>
@@ -178,7 +166,7 @@ function GenerateToken() {
                   "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1"
                 )
               }
-              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"
+              className="op-btn op-btn-secondary my-2"
             >
               View Docs
             </button>
@@ -219,7 +207,7 @@ function GenerateToken() {
             handleClose={handleModal}
           >
             <div className="m-[20px]">
-              <div className="text-lg font-normal text-black">
+              <div className="text-lg font-normal text-base-content">
                 Are you sure you want to regenerate token it will expire old
                 token?
               </div>
@@ -227,11 +215,14 @@ function GenerateToken() {
               <div className="flex items-center mt-3 gap-2 text-white">
                 <button
                   onClick={handleSubmit}
-                  className={submitBtn + "ml-[2px]"}
+                  className="op-btn op-btn-primary ml-[2px]"
                 >
                   Yes
                 </button>
-                <button onClick={handleModal} className={rejectBtn}>
+                <button
+                  onClick={handleModal}
+                  className="op-btn op-btn-secondary"
+                >
                   No
                 </button>
               </div>

apps/OpenSign/src/pages/GuestLogin.js

@@ -1,16 +1,12 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import loader from "../assets/images/loader2.gif";
 import axios from "axios";
-import {
-  isEnableSubscription,
-  modalSubmitBtnColor,
-  themeColor
-} from "../constant/const";
+import { isEnableSubscription } 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();
@@ -185,16 +181,14 @@ function GuestLogin() {
     setContact((prev) => ({ ...prev, [e.target.name]: e.target.value }));
   };
   return (
-    <div style={{ padding: "2rem", background: "white" }}>
+    <div className="p-[2rem]">
       {isLoading ? (
         <div className="flex flex-col justify-center items-center h-[100vh]">
-          <img className="w-[80px] h-[80px]" alt="loader" src={loader} />
-          <span style={{ fontSize: "13px", color: "gray" }}>
-            {isLoading.message}
-          </span>
+          <Loader />
+          <span className="text-[13px] text-[gray]">{isLoading.message}</span>
         </div>
       ) : (
-        <div className="m-1 md:m-2 border-[0.5px] border-[#c5c7c9] p-[30px] shadow-md">
+        <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" />
@@ -203,24 +197,23 @@ function GuestLogin() {
           {contactId ? (
             <>
               {!EnterOTP ? (
-                <div className="w-full md:w-[50%]">
+                <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 rounded shadow-md">
+                  <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
                     <input
                       type="email"
                       name="mobile"
                       value={email}
-                      className="outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs disabled:bg-[#e0e5f5]"
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       disabled
                     />
                   </div>
-                  <div className="mt-4">
+                  <div className="mt-2">
                     <button
-                      className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
-                      style={{ background: themeColor }}
+                      className="op-btn op-btn-primary"
                       onClick={(e) => handleSendOTPBtn(e)}
                       disabled={loading}
                     >
@@ -229,25 +222,27 @@ function GuestLogin() {
                   </div>
                 </div>
               ) : (
-                <form className="w-full md:w-[50%]" onSubmit={VerifyOTP}>
+                <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 my-2 rounded shadow-md">
-                    <p>Enter Verification Code</p>
+                  <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>
                     <input
                       type="number"
-                      className="mt-1 outline-none px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs bg-[#e0e5f5]"
+                      className="mt-2 op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                       name="OTP"
                       value={OTP}
                       onChange={(e) => setOTP(e.target.value)}
                     />
                   </div>
-                  <div className="mt-4">
+                  <div className="mt-2">
                     <button
-                      style={{ background: themeColor }}
-                      className="w-[100px] text-white text-sm font-medium py-1 rounded-sm shadow-md hover:shadow-lg focus:outline-none"
+                      className="op-btn op-btn-primary"
                       type="submit"
                       disabled={loading}
                     >
@@ -258,16 +253,16 @@ function GuestLogin() {
               )}
             </>
           ) : (
-            <div className="w-full md:w-[50%]">
+            <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 rounded shadow-md"
+                className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md"
                 onSubmit={handleUserData}
               >
-                <div className="mb-3">
+                <div className="mb-2">
                   <label
                     htmlFor="name"
                     className="block text-xs text-gray-700 font-semibold"
@@ -280,12 +275,12 @@ function GuestLogin() {
                     name="name"
                     value={contact.name}
                     onChange={handleInputChange}
-                    className="px-3 py-2 w-full border-[1px] border-gray-300 rounded disabled:bg-[#e0e5f5] focus:outline-none text-xs"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                     disabled={loading}
                     required
                   />
                 </div>
-                <div className="mb-3">
+                <div className="mb-2">
                   <label
                     htmlFor="email"
                     className="block text-xs text-gray-700 font-semibold"
@@ -298,12 +293,12 @@ function GuestLogin() {
                     name="email"
                     value={contact.email}
                     onChange={handleInputChange}
-                    className="px-3 py-2 w-full border-[1px] border-gray-300 disabled:bg-[#e0e5f5] rounded focus:outline-none text-xs"
+                    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-3">
+                <div className="mb-2">
                   <label
                     htmlFor="phone"
                     className="block text-xs text-gray-700 font-semibold"
@@ -315,15 +310,14 @@ function GuestLogin() {
                     name="phone"
                     value={contact.phone}
                     onChange={handleInputChange}
-                    className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                    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-4 flex justify-start">
+                <div className="mt-2 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 "
+                    className="op-btn op-btn-primary"
                     disabled={loading}
                   >
                     {loading ? "Loading..." : "Next"}

apps/OpenSign/src/pages/Login.js

@@ -10,16 +10,13 @@ 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,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+import { isEnableSubscription } 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";
 function Login() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -1063,47 +1060,30 @@ function Login() {
     }
   };
   return (
-    <div className="bg-white">
+    <div>
       <Title title={"Login Page"} />
       {state.loading && (
         <div
           aria-live="assertive"
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
+          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50"
         >
-          <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>
+          <Loader />
         </div>
       )}
       {appInfo && appInfo.appId ? (
         <>
-          <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
+            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 className="w-[250px] h-[66px] inline-block overflow-hidden">
                 {image && (
                   <img
                     src={image}
                     className="object-contain h-full"
-                    alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                    alt="applogo"
                   />
                 )}
               </div>
@@ -1115,20 +1095,20 @@ function Login() {
                       <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">
+                      <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="text"
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                          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-2 border-none" />
+                        <hr className="my-1 border-none" />
                         {!isLoginSSO && (
                           <>
                             <label className="block text-xs" htmlFor="password">
@@ -1140,18 +1120,14 @@ function Login() {
                                 type={
                                   state.passwordVisible ? "text" : "password"
                                 }
-                                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded text-xs"
+                                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 top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                                  state.passwordVisible
-                                    ? "text-[#007bff]"
-                                    : "text-black"
-                                }`}
+                                className="absolute cursor-pointer top-[50%] right-[10px] -translate-y-[50%] text-base-content"
                                 onClick={togglePasswordVisibility}
                               >
                                 {state.passwordVisible ? (
@@ -1166,45 +1142,40 @@ function Login() {
                         <div className="relative mt-1">
                           <NavLink
                             to="/forgetpassword"
-                            className="text-[13px] text-[#002864] hover:underline underline-offset-1 focus:outline-none cursor-pointer ml-1"
+                            className="text-[13px] op-link op-link-primary underline-offset-1 focus:outline-none ml-1"
                           >
                             Forgot Password?
                           </NavLink>
                         </div>
                       </div>
                     </fieldset>
-                    <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-2 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"
+                        className="op-btn op-btn-primary"
                         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"
+                      <button
+                        type="button"
+                        className="op-btn op-btn-accent"
+                        disabled={state.loading}
+                        onClick={() =>
+                          navigate(
+                            location.search
+                              ? "/signup" + location.search
+                              : "/signup"
+                          )
                         }
-                        style={width < 768 ? { textAlign: "center" } : {}}
                       >
                         Create Account
-                      </NavLink>
+                      </button>
                     </div>
                   </form>
-                  <br />
-                  {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>
+                  {(appInfo.googleClietId || isEnableSubscription) && (
+                    <div className="op-divider my-4 text-sm">OR</div>
                   )}
-                  <br />
                   <div className="flex flex-col justify-center items-center gap-y-3">
                     {/* {appInfo?.fbAppId && (
                       <LoginFacebook
@@ -1248,18 +1219,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">
+            <form className="px-4 py-3 text-base-content">
               <div className="mb-3">
                 <label
                   htmlFor="Company"
                   style={{ display: "flex" }}
                   className="block text-xs text-gray-700 font-semibold"
                 >
-                  Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+                  Company <span className="text-[red] text-[13px]">*</span>
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  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) =>
@@ -1278,11 +1249,11 @@ function Login() {
                   className="block text-xs text-gray-700 font-semibold"
                 >
                   Job Title
-                  <span style={{ fontSize: 13, color: "red" }}>*</span>
+                  <span className="text-[red] text-[13px]">*</span>
                 </label>
                 <input
                   type="text"
-                  className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                  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) =>
@@ -1294,23 +1265,18 @@ function Login() {
                   required
                 />
               </div>
-              <div className="mt-4">
+              <div className="mt-4 gap-2 flex flex-row">
                 <button
                   type="button"
-                  className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
+                  className="op-btn op-btn-primary"
                   onClick={(e) => handleSubmitbtn(e)}
-                  style={{
-                    marginRight: 10,
-                    backgroundColor: modalSubmitBtnColor
-                  }}
                 >
                   Login
                 </button>
                 <button
                   type="button"
-                  className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                  className="op-btn op-btn-ghost"
                   onClick={handleCloseModal}
-                  style={{ width: 75, backgroundColor: modalCancelBtnColor }}
                 >
                   Cancel
                 </button>
@@ -1320,15 +1286,11 @@ function Login() {
         </>
       ) : (
         <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
-        ></div>
+          aria-live="assertive"
+          className="fixed w-full h-full flex justify-center items-center z-50"
+        >
+          <Loader />
+        </div>
       )}
     </div>
   );

apps/OpenSign/src/pages/Managesign.js

@@ -6,6 +6,8 @@ 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");
@@ -17,7 +19,7 @@ const ManageSign = () => {
   const [isvalue, setIsValue] = useState(false);
   const allColor = ["blue", "red", "black"];
   const [isLoader, setIsLoader] = useState(true);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [isAlert, setIsAlert] = useState({ type: "success", message: "" });
   const [Initials, setInitials] = useState("");
   const [isInitials, setIsInitials] = useState(false);
   const [id, setId] = useState("");
@@ -185,12 +187,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "danger",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     } else {
       try {
@@ -201,12 +211,20 @@ const ManageSign = () => {
         updateSign.set("UserId", userId);
         const res = await updateSign.save();
         setIsLoader(false);
-        setIsSuccess(true);
+        setIsAlert({
+          type: "success",
+          message: "Signature saved successfully."
+        });
+        setTimeout(() => setIsAlert({}), 2000);
         return res;
       } catch (err) {
         console.log(err);
         setIsLoader(false);
-        alert(`${err.message}`);
+        setIsAlert({
+          type: "success",
+          message: `${err.message}`
+        });
+        setTimeout(() => setIsAlert({}), 2000);
       }
     }
   };
@@ -224,24 +242,13 @@ const ManageSign = () => {
     setIsValue(true);
   };
   return (
-    <div className="relative h-full bg-white flex shadow rounded overflow-auto">
+    <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto">
       {isLoader && (
-        <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 className="absolute bg-black bg-opacity-30 z-50 w-full h-full flex justify-center items-center">
+          <Loader />
         </div>
       )}
+      {isAlert?.message && <Alert type={isAlert.type}>{isAlert.message}</Alert>}
       <div
         className="mainDiv"
         style={{
@@ -249,39 +256,13 @@ const ManageSign = () => {
           paddingRight: "10px"
         }}
       >
-        <div style={{ margin: 20 }}>
-          <div
-            style={{
-              fontWeight: "700",
-              fontSize: 15,
-              color: "#000",
-              paddingBottom: 8
-            }}
-          >
-            My Signature
-          </div>
+        <div className="m-[20px]">
+          <div className="font-[700] text-[15px] pb-[8px]">My Signature</div>
           <div className="signBlock mt-4">
             <div>
-              <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
-                    }}
-                  >
+              <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]">
                     <>
                       <span
                         onClick={() => handleSignatureBtn()}
@@ -307,24 +288,14 @@ const ManageSign = () => {
                     />
                   </div>
                 </div>
-                <div style={{ position: "relative" }}>
+                <div className="relative">
                   <div>
                     {image ? (
-                      <div
-                        style={{
-                          position: "relative",
-                          border: "2px solid #888"
-                        }}
-                        className="signatureCanvas"
-                      >
+                      <div className="signatureCanvas relative border-[2px] border-[#888]">
                         <img
                           alt="preview image"
                           src={image}
-                          style={{
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "contain"
-                          }}
+                          className="w-full h-full object-contain"
                         />
                       </div>
                     ) : (
@@ -366,10 +337,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) {
@@ -474,10 +445,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) {
@@ -509,20 +480,11 @@ 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="customBtn successBtn"
+              className="op-btn op-btn-primary"
               onClick={(e) => handleSubmit(e)}
             >
               save

apps/OpenSign/src/pages/Opensigndrive.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState, useRef } from "react";
 import "../styles/opensigndrive.css";
-import loader from "../assets/images/loader2.gif";
-import { themeColor, iconColor } from "../constant/const";
+import { iconColor } from "../constant/const";
 import { getDrive } from "../constant/Utils";
 import { useNavigate } from "react-router-dom";
 import Title from "../components/Title";
@@ -10,27 +9,15 @@ 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 DriveBody = React.lazy(
+  () => import("../components/opensigndrive/DriveBody")
 );
-const Loader = () => {
+const AppLoader = () => {
   return (
-    <div
-      style={{
-        height: "100vh",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      }}
-    >
-      <div
-        style={{
-          fontSize: "45px",
-          color: "#3dd3e0"
-        }}
-        className="loader-37"
-      ></div>
+    <div className="h-[100vh] flex justify-center items-center">
+      <Loader />
     </div>
   );
 };
@@ -279,7 +266,8 @@ function Opensigndrive() {
     setNewFolderName(value);
   };
   //function for create folder
-  const handleAddFolder = async () => {
+  const handleAddFolder = async (e) => {
+    e.preventDefault();
     if (newFolderName) {
       setIsFolderLoader(true);
       const getParentObjId = folderName[folderName.length - 1];
@@ -450,21 +438,10 @@ function Opensigndrive() {
         <React.Fragment key={id}>
           <span
             onClick={() => handleRoute(id, folderData)}
-            style={{
-              color: "#a64b4e",
-              fontWeight: "400",
-              cursor: "pointer"
-            }}
+            className="text-[#a64b4e] font-normal cursor-pointer"
           >
             {data.name}
-            <span
-              style={{
-                color: "#a64b4e",
-                fontWeight: "200",
-                cursor: "pointer",
-                margin: "0 4px"
-              }}
-            >
+            <span className="text-[#a64b4e] font-extralight cursor-pointer mx-[4px]">
               &gt;
             </span>
           </span>
@@ -545,411 +522,290 @@ function Opensigndrive() {
     }
   }
   return (
-    <div style={{ backgroundColor: "white" }} className="folderComponent">
+    <div className="bg-base-100 text-base-content rounded-xl w-full">
       <Title title={"OpenSign™ Drive"} drive={true} />
-
-      <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
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginTop: "15px",
-                marginBottom: "15px"
-              }}
-            ></div>
-            <button
-              onClick={() =>
-                setIsAlert({
-                  isShow: false,
-                  alertMessage: ""
-                })
-              }
-              type="button"
-              className="finishBtn cancelBtn"
+      <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"
             >
-              Close
-            </button>
-          </div>
-        </ModalUi>
-        <ModalUi
-          isOpen={isFolder}
-          title={"Add New Folder"}
-          handleClose={oncloseFolder}
-        >
-          <div style={{ height: "100%", padding: 20 }}>
-            {folderLoader ? (
-              <div
-                style={{
-                  height: "200px",
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center"
-                }}
-              >
-                <img
-                  alt="loader img"
-                  src={loader}
-                  style={{ width: "50px", height: "50px" }}
-                />
-                <span style={{ fontSize: "13px", color: "gray" }}>
-                  Loading...
-                </span>
+              <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
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  handleAddFolder();
-                }}
-                style={{ display: "flex", flexDirection: "column" }}
-              >
-                <label
-                  style={{
-                    margin: "10px 0px 10px 0px",
-                    fontSize: "15px",
-                    fontWeight: "400"
-                  }}
-                >
-                  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>
+            </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>
-
-        {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}
+              className="w-full whitespace-nowrap cursor-pointer select-none overflow-x-auto"
+            >
+              {handleFolderTab(folderName)}
+            </div>
+            <div className="dropMenuBD">
               <div
-                data-tut="reactourFirst"
-                onMouseEnter={(e) => handleMouseEnter(e)}
-                ref={scrollRef}
-                style={{
-                  width: "100%"
-                }}
-                className="folderPath"
+                id="folder-menu"
+                className={
+                  isNewFol ? "dropdown show dropDownStyle" : "dropdown"
+                }
+                onClick={() => setIsNewFol(!isNewFol)}
               >
-                {handleFolderTab(folderName)}
-              </div>
-              <div className="dropMenuBD">
-                <div
-                  id="folder-menu"
-                  className={
-                    isNewFol ? "dropdown show dropDownStyle" : "dropdown"
-                  }
-                  onClick={() => setIsNewFol(!isNewFol)}
-                >
-                  <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
-                      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 className="sort" data-tut="reactourSecond">
+                  <i
+                    className="fa fa-plus-square"
+                    aria-hidden="true"
+                    style={{ fontSize: "25px", color: `${iconColor}` }}
+                  ></i>
                 </div>
                 <div
-                  id="menu-container"
-                  className={isShowSort ? "dropdown show" : "dropdown"}
-                  onClick={() => setIsShowSort(!isShowSort)}
+                  className={isNewFol ? "dropdown-menu show" : "dropdown-menu"}
+                  aria-labelledby="dropdownMenuButton"
+                  aria-expanded={isNewFol ? "true" : "false"}
                 >
-                  <div
-                    data-tut="reactourThird"
-                    className=" sort  "
-                    data-toggle="dropdown"
-                  >
-                    <i
-                      className="fa fa-sort-amount-asc"
-                      aria-hidden="true"
-                      style={{
-                        marginRight: "5px",
-                        fontSize: "14px",
-                        color: `${iconColor}`
-                      }}
-                    ></i>
+                  <div className="flex flex-col">
                     <span
-                      style={{
-                        fontSize: "15px",
-                        color: `${iconColor}`
-                      }}
+                      className="dropdown-item itemColor"
+                      onClick={() => setIsFolder(true)}
                     >
-                      {selectedSort}
+                      <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
-                    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>
+              <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-sort-amount-asc mr-[5px] text-[14px]"
+                    aria-hidden="true"
+                    style={{ 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 mr-[5px"
+                            aria-hidden="true"
+                          ></i>
+                        )}
+                        {value}
+                      </span>
+                    );
+                  })}
 
-                <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"
+                  <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)}>
+                    <i
                       onClick={() => setIsList(!isList)}
-                    >
-                      <i
-                        className="fa fa-list"
-                        aria-hidden="true"
-                        style={{ fontSize: "23px", color: `${iconColor}` }}
-                      ></i>
-                    </div>
-                  )}
-                </div>
+                      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>
 
-            {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>
+          {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>
+          )}
+        </>
+      )}
     </div>
   );
 }

apps/OpenSign/src/pages/PageNotFound.js

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

apps/OpenSign/src/pages/PdfRequestFiles.js

@@ -4,7 +4,6 @@ import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
 import axios from "axios";
-import loader from "../assets/images/loader2.gif";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useLocation, useNavigate, useParams } from "react-router-dom";
@@ -35,7 +34,7 @@ import {
   handleDownloadCertificate,
   darkenColor
 } from "../constant/Utils";
-import Loader from "../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import Header from "../components/pdf/PdfHeader";
 import RenderPdf from "../components/pdf/RenderPdf";
@@ -46,6 +45,7 @@ import ModalUi from "../primitives/ModalUi";
 import VerifyEmail from "../components/pdf/VerifyEmail";
 import TourContentWithBtn from "../primitives/TourContentWithBtn";
 import { appInfo } from "../constant/appinfo";
+import Loader from "../primitives/Loader";
 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }
@@ -1161,9 +1161,9 @@ function PdfRequestFiles() {
 
     await axios
       .put(
-        `${localStorage.getItem("baseUrl")}classes/${localStorage.getItem(
-          "_appName"
-        )}_Document/${documentId}`,
+        `${localStorage.getItem(
+          "baseUrl"
+        )}classes/contracts_Document/${documentId}`,
         data,
         {
           headers: {
@@ -1388,47 +1388,29 @@ function PdfRequestFiles() {
       ) : (
         <>
           {isLoading.isLoad ? (
-            <Loader isLoading={isLoading} />
+            <LoaderWithMsg isLoading={isLoading} />
           ) : handleError ? (
             <HandleError handleError={handleError} />
           ) : (
             <div>
               {isUiLoading && (
-                <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" }}>
+                <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">
                     This might take some time
                   </span>
                 </div>
               )}
               {isCelebration && (
-                <div style={{ position: "relative", zIndex: "1000" }}>
+                <div className="relative z-[1000]">
                   <Confetti
                     width={window.innerWidth}
                     height={window.innerHeight}
                   />
                 </div>
               )}
-
               <div
-                className="relative flex flex-col md:flex-row justify-between bg-[#ebebeb]"
+                className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
                 style={{
                   pointerEvents:
                     isExpired ||
@@ -1440,7 +1422,6 @@ function PdfRequestFiles() {
               >
                 {!requestSignTour && requestSignTourFunction()}
                 <ModalUi
-                  headerColor={"#dc3545"}
                   isOpen={isAlert.isShow}
                   title={"Alert message"}
                   handleClose={() => {
@@ -1450,28 +1431,15 @@ function PdfRequestFiles() {
                     });
                   }}
                 >
-                  <div style={{ height: "100%", padding: 20 }}>
+                  <div className="h-full p-[20px]">
                     <p>{isAlert.alertMessage}</p>
-
-                    <div
-                      style={{
-                        height: "1px",
-                        backgroundColor: "#9f9f9f",
-                        width: "100%",
-                        marginTop: "15px",
-                        marginBottom: "15px"
-                      }}
-                    ></div>
-
+                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                     <button
-                      onClick={() => {
-                        setIsAlert({
-                          isShow: false,
-                          alertMessage: ""
-                        });
-                      }}
+                      onClick={() =>
+                        setIsAlert({ isShow: false, alertMessage: "" })
+                      }
                       type="button"
-                      className="finishBtn cancelBtn"
+                      className="op-btn op-btn-primary"
                     >
                       Ok
                     </button>
@@ -1525,63 +1493,44 @@ function PdfRequestFiles() {
                 )}
 
                 <ModalUi
-                  headerColor={defaultSignImg ? themeColor : "#dc3545"}
                   isOpen={defaultSignAlert.isShow}
                   title={"Auto sign"}
-                  handleClose={() => {
-                    setDefaultSignAlert({
-                      isShow: false,
-                      alertMessage: ""
-                    });
-                  }}
+                  handleClose={() =>
+                    setDefaultSignAlert({ isShow: false, alertMessage: "" })
+                  }
                 >
-                  <div style={{ height: "100%", padding: 20 }}>
+                  <div className="h-full p-[20px]">
                     <p>{defaultSignAlert.alertMessage}</p>
-
-                    <div
-                      style={{
-                        height: "1px",
-                        backgroundColor: "#9f9f9f",
-                        width: "100%",
-                        marginTop: "15px",
-                        marginBottom: "15px"
-                      }}
-                    ></div>
+                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                     {defaultSignImg ? (
                       <>
                         <button
                           onClick={() => addDefaultSignature()}
-                          style={{
-                            background: themeColor
-                          }}
                           type="button"
-                          className="finishBtn"
+                          className="op-btn op-btn-primary"
                         >
                           Yes
                         </button>
                         <button
-                          onClick={() => {
+                          onClick={() =>
                             setDefaultSignAlert({
                               isShow: false,
                               alertMessage: ""
-                            });
-                          }}
+                            })
+                          }
                           type="button"
-                          className="finishBtn cancelBtn"
+                          className="op-btn op-btn-secondary"
                         >
                           Close
                         </button>
                       </>
                     ) : (
                       <button
-                        onClick={() => {
-                          setIsAlert({
-                            isShow: false,
-                            alertMessage: ""
-                          });
-                        }}
+                        onClick={() =>
+                          setIsAlert({ isShow: false, alertMessage: "" })
+                        }
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-primary"
                       >
                         Ok
                       </button>
@@ -1621,7 +1570,7 @@ function PdfRequestFiles() {
                       "md:min-w-[440px] md:max-w-[400px]"
                     }
                   >
-                    <div style={{ height: "100%", padding: 20 }}>
+                    <div className="h-full p-[20px] text-base-content">
                       {isCompleted?.message ? (
                         <p>{isCompleted?.message}</p>
                       ) : (
@@ -1642,32 +1591,27 @@ function PdfRequestFiles() {
                                 setIsDownloading
                               )
                             }
-                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#08bc66]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-secondary"
                           >
                             <i
-                              className="fa-solid fa-award py-[3px]"
+                              className="fa-solid fa-award"
                               aria-hidden="true"
                             ></i>
-                            <span className="hidden lg:block ml-1">
-                              Certificate
-                            </span>
+                            <span className="hidden lg:block">Certificate</span>
                           </button>
                           <button
                             onClick={(e) =>
                               handleToPrint(e, pdfUrl, setIsDownloading)
                             }
                             type="button"
-                            className="flex flex-row items-center  shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#188ae2]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-neutral"
                           >
-                            <i
-                              className="fa fa-print py-[3px]"
-                              aria-hidden="true"
-                            ></i>
-                            <span className="hidden lg:block ml-1">Print</span>
+                            <i className="fa fa-print" aria-hidden="true"></i>
+                            <span className="hidden lg:block">Print</span>
                           </button>
                           <button
                             type="button"
-                            className="flex flex-row items-center shadow rounded-[3px] py-[3px] px-[11px] text-white font-[500] text-[13px] mr-[5px] bg-[#f14343]"
+                            className="font-[500] text-[13px] mr-[5px] op-btn op-btn-primary"
                             onClick={() =>
                               handleDownloadPdf(
                                 pdfDetails,
@@ -1677,12 +1621,10 @@ function PdfRequestFiles() {
                             }
                           >
                             <i
-                              className="fa fa-download py-[3px]"
+                              className="fa fa-download"
                               aria-hidden="true"
                             ></i>
-                            <span className="hidden lg:block ml-1">
-                              Download
-                            </span>
+                            <span className="hidden lg:block">Download</span>
                           </button>
                         </div>
                       )}
@@ -1690,10 +1632,7 @@ function PdfRequestFiles() {
                   </ModalUi>
                   {isDownloading === "pdf" && (
                     <div className="fixed z-[1000] inset-0 flex justify-center items-center bg-black bg-opacity-30">
-                      <div
-                        style={{ fontSize: "45px", color: "#3dd3e0" }}
-                        className="loader-37"
-                      ></div>
+                      <Loader />
                     </div>
                   )}
                   <ModalUi
@@ -1789,63 +1728,37 @@ function PdfRequestFiles() {
                   )}
                 </div>
                 <div>
-                  <div className="signerComponent">
+                  <div className="hidden md:block w-[180px] h-full bg-base-100">
                     <div
                       style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                      className="autoSignScroll"
+                      className="overflow-y-auto hide-scrollbar"
                     >
                       {signedSigners.length > 0 && (
                         <div data-tut="reactourSecond">
-                          <div
-                            style={{ background: themeColor }}
-                            className="signedStyle"
-                          >
+                          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
                             Signed by
                           </div>
-                          <div style={{ marginTop: "2px" }}>
+                          <div className="mt-[2px]">
                             {signedSigners.map((obj, ind) => {
                               return (
                                 <div
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
                                   style={{
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    padding: "10px 0",
                                     background: checkSignerBackColor(obj)
                                   }}
                                   key={ind}
                                 >
                                   <div
-                                    className="signerStyle"
+                                    className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
                                     style={{
-                                      background: checkUserNameColor(obj),
-                                      width: 30,
-                                      height: 30,
-                                      display: "flex",
-                                      borderRadius: 30 / 2,
-                                      justifyContent: "center",
-                                      alignItems: "center",
-                                      margin: "0 10px 0 5px"
+                                      background: checkUserNameColor(obj)
                                     }}
                                   >
-                                    <span
-                                      style={{
-                                        fontSize: "12px",
-                                        textAlign: "center",
-                                        fontWeight: "bold",
-                                        color: "black",
-                                        textTransform: "uppercase"
-                                      }}
-                                    >
+                                    <span className="text-[12px] text-center font-bold text-white uppercase">
                                       {getFirstLetter(obj?.Name || obj?.Role)}
                                     </span>
                                   </div>
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      flexDirection: "column"
-                                    }}
-                                  >
+                                  <div className="flex flex-col">
                                     <span className="userName">
                                       {obj?.Name || obj?.Role}
                                     </span>
@@ -1862,61 +1775,30 @@ function PdfRequestFiles() {
 
                       {unsignedSigners.length > 0 && (
                         <div data-tut="reactourFirst">
-                          <div
-                            style={{
-                              background: themeColor,
-                              color: "white",
-                              padding: "5px",
-                              fontFamily: "sans-serif",
-                              marginTop: signedSigners.length > 0 && "20px"
-                            }}
-                          >
+                          <div className="mx-2 pr-2 pt-2 pb-1 text-[15px] text-base-content font-semibold border-b-[1px] border-base-300">
                             Yet to sign
                           </div>
-                          <div style={{ marginTop: "5px" }}>
+                          <div className="mt-[5px]">
                             {unsignedSigners.map((obj, ind) => {
                               return (
                                 <div
+                                  className="rounded-xl mx-1 flex flex-row items-center py-[10px] mt-1"
                                   style={{
-                                    display: "flex",
-                                    flexDirection: "row",
-                                    alignItems: "center",
-                                    padding: "10px 0",
                                     background: checkSignerBackColor(obj)
                                   }}
                                   key={ind}
                                 >
                                   <div
-                                    className="signerStyle"
+                                    className="flex w-[30px] h-[30px] rounded-full justify-center items-center mx-1"
                                     style={{
-                                      background: checkUserNameColor(obj),
-                                      width: 30,
-                                      height: 30,
-                                      display: "flex",
-                                      borderRadius: 30 / 2,
-                                      justifyContent: "center",
-                                      alignItems: "center",
-                                      margin: "0 10px 0 5px"
+                                      background: checkUserNameColor(obj)
                                     }}
                                   >
-                                    <span
-                                      style={{
-                                        fontSize: "12px",
-                                        textAlign: "center",
-                                        fontWeight: "bold",
-                                        color: "black",
-                                        textTransform: "uppercase"
-                                      }}
-                                    >
+                                    <span className="text-[12px] text-center font-bold text-black uppercase">
                                       {getFirstLetter(obj?.Name || obj?.email)}
                                     </span>
                                   </div>
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      flexDirection: "column"
-                                    }}
-                                  >
+                                  <div className="flex flex-col">
                                     <span className="userName">
                                       {obj?.Name || obj?.Role}
                                     </span>
@@ -1947,34 +1829,21 @@ function PdfRequestFiles() {
               </div>
             </div>
           )}
-
           <ModalUi
-            headerColor={"#dc3545"}
             isOpen={validateAlert}
             title={"Validation alert"}
-            handleClose={() => {
-              setValidateAlert(false);
-            }}
+            handleClose={() => setValidateAlert(false)}
           >
-            <div style={{ height: "100%", padding: 20 }}>
+            <div className="h-[100%] p-[20px]">
               <p>
                 The input does not meet the criteria set by the regular
                 expression.
               </p>
-
-              <div
-                style={{
-                  height: "1px",
-                  backgroundColor: "#9f9f9f",
-                  width: "100%",
-                  marginTop: "15px",
-                  marginBottom: "15px"
-                }}
-              ></div>
+              <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
               <button
                 onClick={() => setValidateAlert(false)}
                 type="button"
-                className="finishBtn cancelBtn"
+                className="op-btn op-btn-ghost"
               >
                 Close
               </button>

apps/OpenSign/src/pages/Pgsignup.js

@@ -8,6 +8,7 @@ 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();
@@ -411,21 +412,8 @@ const PgSignUp = () => {
     <div className="bg-white">
       <Title title={"Pgsignup page"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex justify-center items-center h-[100vh]">
+          <Loader />
         </div>
       ) : (
         <form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>

apps/OpenSign/src/pages/PlaceHolderSign.js

@@ -10,9 +10,8 @@ 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 Loader from "../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
@@ -49,7 +48,8 @@ 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();
@@ -1014,7 +1014,11 @@ function PlaceHolderSign() {
           className="flex flex-row justify-between items-center mb-1"
           key={ind}
         >
-          {copied && <Alert type="success">Copied</Alert>}
+          {copied && (
+            <Alert type="success">
+              <div className="ml-3">Copied</div>
+            </Alert>
+          )}
           <span className="w-[220px] md:w-[300px] whitespace-nowrap overflow-hidden text-ellipsis  ">
             {data.signerEmail}
           </span>
@@ -1022,26 +1026,13 @@ function PlaceHolderSign() {
             <button
               onClick={() => copytoclipboard(data.url)}
               type="button"
-              className="flex flex-row items-center text-white font-[500]"
+              className="flex flex-row items-center op-link op-link-primary"
             >
-              <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>
+              <i className="fa-solid fa-link" aria-hidden="true"></i>
+              <span className=" hidden md:block ml-1 ">Copy link</span>
             </button>
-            <RWebShare
-              data={{
-                url: data.url,
-                title: "Sign url"
-              }}
-            >
-              <i
-                className="fa-solid fa-share-from-square cursor-pointer "
-                style={{ color: themeColor }}
-              ></i>
+            <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>
           </div>
         </div>
@@ -1633,32 +1624,18 @@ function PlaceHolderSign() {
       <Title title={state?.title ? state.title : "New Document"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
-          <Loader isLoading={isLoading} />
+          <LoaderWithMsg isLoading={isLoading} />
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
+            ref={divRef}
+          >
             {isUiLoading && (
-              <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" }}>
+              <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">
                   This might take some time
                 </span>
               </div>
@@ -1704,11 +1681,6 @@ 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
@@ -1718,10 +1690,7 @@ function PlaceHolderSign() {
                 handleClose={() => setIsSendAlert({})}
                 showHeaderMessage={isSendAlert.mssg === "confirm"}
               >
-                <div
-                  className="max-h-96 overflow-y-scroll scroll-hide"
-                  style={{ padding: 20 }}
-                >
+                <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
                   {isSendAlert.mssg === "sure" ? (
                     <span>
                       Please ensure there&apos;s at least one signature widget
@@ -1732,85 +1701,67 @@ function PlaceHolderSign() {
                   ) : (
                     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 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"
+                        {!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);
                                 }}
                               >
-                                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" />
+                                <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
+                              </button>
                             )}
                           </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>
                       </>
                     )
                   )}
@@ -1818,28 +1769,15 @@ function PlaceHolderSign() {
                   {isSendAlert.mssg === "confirm" && (
                     <>
                       <div className="flex justify-center items-center mt-3">
-                        <span
-                          style={{
-                            height: 1,
-                            width: "20%",
-                            backgroundColor: "#ccc"
-                          }}
-                        ></span>
+                        <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
                         <span className="ml-[5px] mr-[5px]">or</span>
-                        <span
-                          style={{
-                            height: 1,
-                            width: "20%",
-                            backgroundColor: "#ccc"
-                          }}
-                        ></span>
+                        <span className="h-[1px] w-[20%] bg-[#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}
@@ -1849,77 +1787,61 @@ function PlaceHolderSign() {
                   setSignerPos([]);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-[100%] p-[20px]">
                   {mailStatus === "success" ? (
-                    <p>You have successfully sent mails to all recipients!</p>
+                    <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>Please setup mail adapter to send mail!</p>
                   )}
-                  {isCurrUser && (
-                    <p>Do you want to sign documents right now ?</p>
+                  {!mailStatus && (
+                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   )}
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
                   {isCurrUser && (
                     <button
-                      onClick={() => {
-                        handleRecipientSign();
-                      }}
-                      style={{
-                        background: themeColor,
-                        color: "white"
-                      }}
+                      onClick={() => handleRecipientSign()}
                       type="button"
-                      className="finishBtn"
+                      className="op-btn op-btn-primary mr-1"
                     >
                       Yes
                     </button>
                   )}
-
                   <button
                     onClick={() => {
                       setIsSend(false);
                       setSignerPos([]);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-ghost"
                   >
                     {isCurrUser ? "No" : "Close"}
                   </button>
                 </div>
               </ModalUi>
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-[100%] p-[20px]">
                   <p>Please select signer for add placeholder!</p>
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
                   <button
                     onClick={() => {
                       setIsShowEmail(false);
                     }}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -2073,12 +1995,13 @@ function PlaceHolderSign() {
               </div>
             ) : (
               <div>
-                <div className="signerComponent" aria-disabled>
+                <div
+                  className="hidden md:block w-[180px] h-full bg-base-100"
+                  aria-disabled
+                >
                   <div
-                    style={{
-                      maxHeight: window.innerHeight - 70 + "px"
-                    }}
-                    className="autoSignScroll"
+                    style={{ maxHeight: window.innerHeight - 70 + "px" }}
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       signerPos={signerPos}
@@ -2124,33 +2047,22 @@ function PlaceHolderSign() {
       </DndProvider>
       <div>
         <ModalUi
-          headerColor={"#dc3545"}
           isOpen={isAlreadyPlace.status}
           title={"Document Alert"}
           showClose={false}
         >
-          <div style={{ height: "100%", padding: 20 }}>
+          <div className="h-[100%] p-[20px]">
             <p>{isAlreadyPlace.message}</p>
-
-            <div
-              style={{
-                height: "1px",
-                backgroundColor: "#9f9f9f",
-                width: "100%",
-                marginTop: "15px",
-                marginBottom: "15px"
-              }}
-            ></div>
+            <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
             <button
               onClick={() => handleRecipientSign()}
               type="button"
-              className="finishBtn cancelBtn"
+              className="op-btn op-btn-primary"
             >
               View
             </button>
           </div>
         </ModalUi>
-
         <LinkUserModal
           handleAddUser={handleAddUser}
           isAddUser={isAddUser}

apps/OpenSign/src/pages/PlanSubscriptions.js

@@ -4,6 +4,8 @@ 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
@@ -84,55 +86,33 @@ const PlanSubscriptions = () => {
     <>
       <Title title={"Subscriptions"} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="flex items-center justify-center h-screen">
+          <Loader />
         </div>
       ) : (
-        <div
-          style={{
-            backgroundColor: "white",
-            overflowY: "auto",
-            maxHeight: "100%"
-          }}
-        >
+        <div className="overflow-y-auto max-h-full">
           <div className="block my-2">
             <div className="flex flex-col justify-center items-center w-full">
-              <div className="mb-6 mt-2 flex flex-row border-[1px] p-2 border-gray-300 rounded text-sm">
-                <span
+              <div
+                role="tablist"
+                className="op-tabs op-tabs-boxed bg-base-100 my-2 shadow-lg transition-all"
+              >
+                <a
                   onClick={() => setYearlyVisible(false)}
-                  className={`${
-                    !yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${!yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Monthly
-                </span>
-                <span
+                </a>
+                <a
                   onClick={() => setYearlyVisible(true)}
-                  className={`${
-                    yearlyVisible
-                      ? "bg-[#002862] text-white"
-                      : "bg-white text-black"
-                  } px-4 py-1 rounded cursor-pointer`}
+                  role="tab"
+                  className={`${yearlyVisible ? "op-tab-active" : ""} op-tab`}
                 >
                   Yearly (10% off)
-                </span>
+                </a>
               </div>
-              <ul className="flex flex-col md:flex-row h-full bg-white justify-center">
+              <ul className="op-card flex flex-col md:flex-row h-full bg-base-100 justify-center shadow-lg">
                 {plansArr.map((item) => (
                   <li
                     className="flex flex-col text-center border-collapse border-[1px] border-gray-300 max-w-[250px]"
@@ -207,9 +187,7 @@ 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 style={{ position: "relative" }}>
-                            {subitem}
-                          </span>
+                          <span className="relative">{subitem}</span>
                         </li>
                       ))}
                     </ul>
@@ -217,22 +195,23 @@ const PlanSubscriptions = () => {
                 ))}
               </ul>
             </div>
-            <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 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>
-            <div className="flex flex-col justify-center w-full items-center">
+            <div className="flex flex-col justify-center items-center">
               <h3 className="text-[#002862] mt-1 mb-2">
                 Host it yourself for free
               </h3>
-              <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"}
+              <div
+                className="op-btn op-btn-primary w-[200px]"
+                onClick={() =>
+                  openInNewTab("https://github.com/OpenSignLabs/OpenSign")
+                }
               >
                 Visit Github
-              </NavLink>
+              </div>
             </div>
           </div>
         </div>

apps/OpenSign/src/pages/Report.js

@@ -7,6 +7,7 @@ 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();
@@ -173,21 +174,8 @@ const Report = () => {
     <>
       <Title title={reportName} />
       {isLoader ? (
-        <div
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </div>
       ) : (
         <>

apps/OpenSign/src/pages/SSOVerify.js

@@ -3,16 +3,12 @@ import { useLocation, useNavigate } from "react-router-dom";
 import Parse from "parse";
 import axios from "axios";
 import { appInfo } from "../constant/appinfo";
-import {
-  isEnableSubscription,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+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 "../assets/images/loader2.gif";
+import Loader from "../primitives/Loader";
 
 const SSOVerify = () => {
   const location = useLocation();
@@ -291,36 +287,27 @@ const SSOVerify = () => {
   return (
     <div>
       <div className="w-full h-screen flex flex-col justify-center items-center text-sm md:text-xl ">
-        {message === "Verifying SSO..." && (
-          <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
-        )}
-        <div className="text-[gray]">{message}</div>
+        {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">
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+              <Loader />
             </div>
           )}
-          <form className="px-4 py-3" onSubmit={handleSubmitbtn}>
+          <form
+            className="px-4 py-3 text-base-content"
+            onSubmit={handleSubmitbtn}
+          >
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Phone <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="tel"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                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) =>
@@ -337,16 +324,12 @@ const SSOVerify = () => {
               </p>
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Company <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                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) =>
@@ -360,17 +343,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="JobTitle"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
+              <label htmlFor="JobTitle" className="block text-xs font-semibold">
                 Job Title
-                <span style={{ fontSize: 13, color: "red" }}>*</span>
+                <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                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) =>
@@ -384,21 +363,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mt-4">
-              <button
-                type="submit"
-                className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                style={{
-                  marginRight: 10,
-                  backgroundColor: modalSubmitBtnColor
-                }}
-              >
+              <button type="submit" className="op-btn op-btn-primary">
                 Login
               </button>
               <button
                 type="button"
-                className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                className="op-btn op-btn-ghost ml-2"
                 onClick={handleCloseModal}
-                style={{ width: 75, backgroundColor: modalCancelBtnColor }}
               >
                 Cancel
               </button>

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, NavLink, useLocation } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import login_img from "../assets/images/login_img.svg";
 import { useWindowSize } from "../hook/useWindowSize";
 import Alert from "../primitives/Alert";
@@ -12,6 +12,7 @@ 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";
 const Signup = () => {
   const { width } = useWindowSize();
   const navigate = useNavigate();
@@ -501,68 +502,45 @@ const Signup = () => {
     setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword));
   };
   return (
-    <div className="bg-white">
+    <div className="">
       {state.loading && (
-        <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 className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-50">
+          <Loader />
         </div>
       )}
-
       <Title title={"Signup page"} />
-
       {appInfo && appInfo.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="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="logo" />
               )}
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
-              <div className="">
+              <div>
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
+                  <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
-                        Name{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Name <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         required
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Email{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Email <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         id="email"
-                        type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs lowercase"
+                        type="email"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={email}
                         onChange={(e) =>
                           setEmail(e.target.value?.toLowerCase())
@@ -571,12 +549,11 @@ const Signup = () => {
                       />
                       <hr className="my-2 border-none" />
                       <label>
-                        Phone{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        Phone <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="tel"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={phone}
                         onChange={(e) => setPhone(e.target.value)}
                         required
@@ -584,11 +561,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Company{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={company}
                         onChange={(e) => setCompany(e.target.value)}
                         required
@@ -596,11 +573,11 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Job Title{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <input
                         type="text"
-                        className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                        className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                         value={jobTitle}
                         onChange={(e) => setJobTitle(e.target.value)}
                         required
@@ -608,21 +585,19 @@ const Signup = () => {
                       <hr className="my-2 border-none" />
                       <label>
                         Password{" "}
-                        <span style={{ color: "red", fontSize: 13 }}>*</span>
+                        <span className="text-[red] text-[13px]">*</span>
                       </label>
                       <div className="relative">
                         <input
                           type={showPassword ? "text" : "password"}
-                          className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                          className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                           name="password"
                           value={password}
                           onChange={(e) => handlePasswordChange(e)}
                           required
                         />
                         <span
-                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer ${
-                            showPassword ? "text-[#007bff]" : "text-black"
-                          }`}
+                          className={`absolute top-[50%] right-[10px] -translate-y-[50%] cursor-pointer text-base-content`}
                           onClick={togglePasswordVisibility}
                         >
                           {showPassword ? (
@@ -665,6 +640,7 @@ const Signup = () => {
                       <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)}
@@ -690,28 +666,31 @@ const Signup = () => {
                       </div>
                     </div>
                   </div>
-                  <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 text-center text-xs font-bold mt-2">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2">
                     <button
                       type="submit"
-                      className="rounded-sm bg-[#3ac9d6] text-white w-full py-3 shadow uppercase"
+                      className="op-btn op-btn-primary"
                       disabled={state.loading}
                     >
                       {state.loading ? "Loading..." : "Register"}
                     </button>
-                    <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" } : {}}
+                    <button
+                      type="button"
+                      className="op-btn op-btn-secondary"
+                      disabled={state.loading}
+                      onClick={() =>
+                        navigate(location.search ? "/" + location.search : "/")
+                      }
                     >
                       Login
-                    </NavLink>
+                    </button>
                   </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="bisec" width="100%" />
+                    <img src={login_img} alt="loader" width="100%" />
                   </div>
                 </div>
               )}
@@ -720,16 +699,9 @@ const Signup = () => {
           <Alert type={state.alertType}>{state.alertMsg}</Alert>
         </div>
       ) : (
-        <div
-          style={{
-            position: "fixed",
-            fontSize: "50px",
-            color: "#3ac9d6",
-            top: "50%",
-            left: "45%"
-          }}
-          className="loader-37"
-        ></div>
+        <div className="fixed w-full h-full flex justify-center items-center z-50">
+          <Loader />
+        </div>
       )}
     </div>
   );

apps/OpenSign/src/pages/SignyourselfPdf.js

@@ -2,11 +2,10 @@ import React, { useState, useRef, useEffect } from "react";
 import { PDFDocument } from "pdf-lib";
 import "../styles/signature.css";
 import Parse from "parse";
-import { isEnableSubscription, themeColor } from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import Confetti from "react-confetti";
 import axios from "axios";
-import Loader from "../primitives/LoaderWithMsg";
-import loader from "../assets/images/loader2.gif";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -48,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([]);
@@ -1093,43 +1092,29 @@ function SignYourSelf() {
     <DndProvider backend={HTML5Backend}>
       <Title title={"Self Sign"} />
       {isLoading.isLoad ? (
-        <Loader isLoading={isLoading} />
+        <LoaderWithMsg isLoading={isLoading} />
       ) : handleError ? (
         <HandleError handleError={handleError} />
       ) : (
         <div>
           {isUiLoading && (
-            <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" }}>
+            <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]">
                 This might take some time
               </span>
             </div>
           )}
           {isCelebration && (
-            <div style={{ position: "relative", zIndex: "999" }}>
+            <div className="relative z-[999]">
               <Confetti width={window.innerWidth} height={window.innerHeight} />
             </div>
           )}
 
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
+            ref={divRef}
+          >
             {!isEmailVerified && (
               <VerifyEmail
                 isVerifyModal={isVerifyModal}
@@ -1174,7 +1159,6 @@ function SignYourSelf() {
               }}
             >
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isAlert.isShow}
                 title={isAlert?.header || "Alert"}
                 handleClose={() => {
@@ -1184,7 +1168,7 @@ function SignYourSelf() {
                   });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{isAlert.alertMessage}</p>
                 </div>
               </ModalUi>
@@ -1197,20 +1181,11 @@ function SignYourSelf() {
                   setShowAlreadySignDoc({ status: false });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{showAlreadySignDoc.mssg}</p>
-
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   <button
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-ghost shadow-md"
                     onClick={() => setShowAlreadySignDoc({ status: false })}
                   >
                     Close
@@ -1336,7 +1311,7 @@ function SignYourSelf() {
                 maxHeight: window.innerHeight - 70 + "px",
                 backgroundColor: "white"
               }}
-              className="autoSignScroll"
+              className="overflow-y-auto hide-scrollbar"
             >
               {!isCompleted ? (
                 <div>
@@ -1348,7 +1323,6 @@ function SignYourSelf() {
                     handleDivClick={handleDivClick}
                     handleMouseLeave={handleMouseLeave}
                     isDragSign={isDragSign}
-                    themeColor={themeColor}
                     dragStamp={dragStamp}
                     dragRef={dragRef}
                     isDragStamp={isDragStamp}
@@ -1369,31 +1343,22 @@ function SignYourSelf() {
         </div>
       )}
       <ModalUi
-        headerColor={"#dc3545"}
         isOpen={validateAlert}
         title={"Validation alert"}
         handleClose={() => {
           setValidateAlert(false);
         }}
       >
-        <div style={{ height: "100%", padding: 20 }}>
+        <div className="p-[20px] h-full">
           <p>
             The input does not meet the criteria set by the regular expression.
           </p>
 
-          <div
-            style={{
-              height: "1px",
-              backgroundColor: "#9f9f9f",
-              width: "100%",
-              marginTop: "15px",
-              marginBottom: "15px"
-            }}
-          ></div>
+          <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
           <button
             onClick={() => setValidateAlert(false)}
             type="button"
-            className="finishBtn cancelBtn"
+            className="op-btn op-btn-ghost shadow-md"
           >
             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, themeColor } from "../constant/const";
+import { isEnableSubscription } 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 Loader from "../primitives/LoaderWithMsg";
+import LoaderWithMsg from "../primitives/LoaderWithMsg";
 import HandleError from "../primitives/HandleError";
 import SignerListPlace from "../components/pdf/SignerListPlace";
 import Header from "../components/pdf/PdfHeader";
@@ -1207,11 +1207,14 @@ const TemplatePlaceholder = () => {
       <Title title={"Template"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
-          <Loader isLoading={isLoading} />
+          <LoaderWithMsg isLoading={isLoading} />
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div className="signatureContainer" ref={divRef}>
+          <div
+            className="op-card overflow-hidden flex flex-row justify-between bg-base-300 relative"
+            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
@@ -1254,22 +1257,20 @@ 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 style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <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 style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <p>Please add a role</p>
                 </div>
               </ModalUi>
@@ -1279,32 +1280,18 @@ const TemplatePlaceholder = () => {
                 title={"Create Document"}
                 handleClose={() => setIsCreateDocModal(false)}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <p>
                     Do you want to create a document using the template you just
                     created ?
                   </p>
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   {currentEmail.length > 0 && (
                     <>
                       <button
-                        onClick={() => {
-                          handleCreateDocModal();
-                        }}
-                        style={{
-                          background: themeColor,
-                          color: "white"
-                        }}
+                        onClick={() => handleCreateDocModal()}
                         type="button"
-                        className="finishBtn"
+                        className="op-btn op-btn-primary"
                       >
                         Yes
                       </button>
@@ -1313,7 +1300,7 @@ const TemplatePlaceholder = () => {
                           setIsCreateDocModal(false);
                         }}
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-secondary ml-2"
                       >
                         No
                       </button>
@@ -1321,32 +1308,21 @@ const TemplatePlaceholder = () => {
                   )}
                 </div>
               </ModalUi>
-              {isCreateDoc && <Loader isLoading={isLoading} />}
+              {isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
               <ModalUi
-                headerColor={"#dc3545"}
                 isOpen={isShowEmail}
                 title={"signers alert"}
                 handleClose={() => {
                   setIsShowEmail(false);
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="h-full p-[20px]">
                   <p>Please select signer for add placeholder!</p>
-                  <div
-                    style={{
-                      height: "1px",
-                      backgroundColor: "#9f9f9f",
-                      width: "100%",
-                      marginTop: "15px",
-                      marginBottom: "15px"
-                    }}
-                  ></div>
+                  <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
                   <button
-                    onClick={() => {
-                      setIsShowEmail(false);
-                    }}
+                    onClick={() => setIsShowEmail(false)}
                     type="button"
-                    className="finishBtn cancelBtn"
+                    className="op-btn op-btn-primary"
                   >
                     Ok
                   </button>
@@ -1396,7 +1372,7 @@ const TemplatePlaceholder = () => {
                 // signerObjId={signerObjId}
                 Id={uniqueId}
               />
-              {/* pdf header which contain funish back button */}
+              {/* pdf header which contain finish, back button */}
               <Header
                 completeBtnTitle={"Save"}
                 isPlaceholder={true}
@@ -1499,10 +1475,10 @@ const TemplatePlaceholder = () => {
               </div>
             ) : (
               <div>
-                <div className="signerComponent">
+                <div className="hidden md:block w-[180px] h-full bg-base-100">
                   <div
                     style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                    className="autoSignScroll"
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       isMailSend={isMailSend}

apps/OpenSign/src/pages/UserProfile.js

@@ -12,10 +12,11 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
 import axios from "axios";
 import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
 import Tooltip from "../primitives/Tooltip";
-import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
+import { isEnableSubscription } 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();
@@ -296,37 +297,25 @@ function UserProfile() {
     // 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
-          style={{
-            height: "100vh",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          }}
-        >
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="h-[100vh] flex justify-center items-center">
+          <Loader />
         </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]`}
+              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-white flex flex-col justify-center shadow rounded w-[450px]">
+          <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]">
             <div className="flex flex-col justify-center items-center my-4">
               <div className="w-[200px] h-[200px] overflow-hidden rounded-full">
                 <img
@@ -338,7 +327,7 @@ function UserProfile() {
               {editmode && (
                 <input
                   type="file"
-                  className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] text-black rounded"
+                  className="op-file-input op-file-input-bordered op-file-input-sm max-w-[270px] mt-4 text-sm"
                   accept="image/png, image/gif, image/jpeg"
                   onChange={(e) => {
                     let files = e.target.files;
@@ -364,7 +353,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" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Name:</span>{" "}
@@ -372,7 +361,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={name}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetName(e.target.value)}
                   />
                 ) : (
@@ -381,14 +370,14 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Phone:</span>{" "}
                 {editmode ? (
                   <input
                     type="text"
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => SetPhone(e.target.value)}
                     value={Phone}
                   />
@@ -402,7 +391,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Company:</span>{" "}
@@ -410,7 +399,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={company}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => setCompany(e.target.value)}
                   />
                 ) : (
@@ -419,7 +408,7 @@ function UserProfile() {
               </li>
               <li
                 className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${
-                  editmode ? "py-1" : "py-2"
+                  editmode ? "py-1.5" : "py-2"
                 }`}
               >
                 <span className="font-semibold">Job title:</span>{" "}
@@ -427,7 +416,7 @@ function UserProfile() {
                   <input
                     type="text"
                     value={jobTitle}
-                    className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded"
+                    className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-sm"
                     onChange={(e) => setJobTitle(e.target.value)}
                   />
                 ) : (
@@ -463,7 +452,7 @@ function UserProfile() {
                    all your publicly set templates.`}
                     />
                   </span>
-                  <div className="flex items-center">
+                  <div className="flex text-xs items-center">
                     <span>opensign-me.vercel.app/</span>
                     {editmode ? (
                       <input
@@ -471,14 +460,14 @@ function UserProfile() {
                         value={publicUserName}
                         disabled={!editmode}
                         placeholder="enter user name"
-                        className="border-[1px] border-gray-200 rounded-[3px]"
+                        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="border-[1px] border-gray-200 rounded-[3px]"
+                        className="op-input op-input-bordered op-input-xs"
                       />
                     )}
                   </div>
@@ -498,27 +487,23 @@ function UserProfile() {
                       url={
                         "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid"
                       }
-                    />{" "}
+                    />
                     {!isSubscribe && isEnableSubscription && <Upgrade />}
-                  </span>{" "}
+                  </span>
                   <label
-                    className={
+                    className={`${
                       isSubscribe || !isEnableSubscription
-                        ? `${
-                            editmode ? "cursor-pointer" : ""
-                          } relative inline-flex items-center mb-0`
-                        : "relative inline-flex items-center mb-0 pointer-events-none opacity-50"
-                    }
+                        ? `${editmode ? "cursor-pointer" : ""}`
+                        : "pointer-events-none opacity-50"
+                    } relative block items-center mb-0`}
                   >
                     <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 && (
@@ -530,44 +515,29 @@ function UserProfile() {
                 )}
               </li>
             </ul>
-            <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>
-              )}
+            <div className="flex justify-center gap-2 pt-2 pb-3 md:pt-3 md:pb-4">
               <button
                 type="button"
-                onClick={() => {
-                  if (editmode) {
-                    handleCancel();
-                  } else {
-                    navigate("/changepassword");
-                  }
-                }}
-                className={`rounded shadow focus:outline-none text-white bg-[#3598dc]  ${
-                  editmode ? "px-4 py-2 " : "p-2"
+                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"
                 }`}
               >
                 {editmode ? "Cancel" : "Change Password"}
               </button>
             </div>
           </div>
-
           {isVerifyModal && (
             <ModalUi
               isOpen
@@ -575,43 +545,29 @@ function UserProfile() {
               handleClose={handleCloseVerifyModal}
             >
               {otpLoader ? (
-                <div
-                  style={{
-                    height: "150px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  }}
-                >
-                  <div
-                    style={{
-                      fontSize: "45px",
-                      color: "#3dd3e0"
-                    }}
-                    className="loader-37"
-                  ></div>
+                <div className="h-[150px] flex justify-center items-center">
+                  <Loader />
                 </div>
               ) : (
                 <form onSubmit={(e) => handleVerifyEmail(e)}>
-                  <div className="px-6 py-3">
+                  <div className="px-6 py-3 text-base-content">
                     <label className="mb-2">Enter OTP</label>
                     <input
                       required
                       type="tel"
                       pattern="[0-9]{4}"
-                      className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+                      className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
                       placeholder="Enter OTP received over email"
                       value={otp}
                       onChange={(e) => setOtp(e.target.value)}
                     />
                   </div>
-                  <hr />
-                  <div className="px-6 my-3">
-                    <button type="submit" className={submitBtn}>
+                  <div className="px-6 mb-3">
+                    <button type="submit" className="op-btn op-btn-primary">
                       Verify
                     </button>
                     <button
-                      className={`${rejectBtn} ml-2`}
+                      className="op-btn op-btn-secondary ml-2"
                       onClick={(e) => handleResend(e)}
                     >
                       Resend

apps/OpenSign/src/pages/Webhook.js

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

apps/OpenSign/src/primitives/AddContact.js

@@ -2,6 +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 [name, setName] = useState("");
   const [phone, setPhone] = useState("");
@@ -195,40 +196,36 @@ const AddContact = (props) => {
   };
 
   return (
-    <div className="addusercontainer">
+    <div className="h-full px-[20px] py-[10px]">
       {isLoader && (
-        <div className="loaderdiv">
-          <div
-            style={{
-              fontSize: "45px",
-              color: "#3dd3e0"
-            }}
-            className="loader-37"
-          ></div>
+        <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30">
+          <Loader />
         </div>
       )}
-      <div className="form-wrapper">
-        <div style={{ fontSize: 14, fontWeight: "700" }}>Add User</div>
-
+      <div className="w-full mx-auto p-[8px]">
+        <div className="text-[14px] font-[700]">Add User</div>
         {isUserExist && (
-          <div className="form-section">
+          <div className="mb-[0.75rem] flex items-center mt-1">
             <input
               type="checkbox"
               id="addYourself"
               checked={addYourself}
               onChange={handleAddYourselfChange}
-              className="form-checkbox"
+              className="op-checkbox op-checkbox-sm"
             />
-            <label htmlFor="addYourself" className="checkbox-label ">
+            <label
+              htmlFor="addYourself"
+              className="ml-[0.5rem] text-base-content mb-0"
+            >
               Add Yourself
             </label>
           </div>
         )}
-        <form onSubmit={handleSubmit}>
-          <div className="form-section">
-            <label htmlFor="name" style={{ fontSize: 13 }}>
+        <form className="text-base-content" onSubmit={handleSubmit}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="name" className="text-[13px]">
               Name
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="text"
@@ -237,13 +234,13 @@ const AddContact = (props) => {
               onChange={(e) => setName(e.target.value)}
               required
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="email" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="email" className="text-[13px]">
               Email
-              <span style={{ color: "red", fontSize: 13 }}> *</span>
+              <span className="text-[13px] text-[red]"> *</span>
             </label>
             <input
               type="email"
@@ -252,11 +249,11 @@ const AddContact = (props) => {
               onChange={(e) => setEmail(e.target.value?.toLowerCase())}
               required
               disabled={addYourself}
-              className="addUserInput lowercase"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
             />
           </div>
-          <div className="form-section">
-            <label htmlFor="phone" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="phone" className="text-[13px]">
               Phone
             </label>
             <input
@@ -265,18 +262,18 @@ const AddContact = (props) => {
               value={phone}
               onChange={(e) => setPhone(e.target.value)}
               disabled={addYourself}
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
 
-          <div className="buttoncontainer">
-            <button type="submit" className="submitbutton">
+          <div className="mt-6 flex justify-start gap-2">
+            <button type="submit" className="op-btn op-btn-primary">
               Submit
             </button>
             <button
               type="button"
               onClick={() => handleReset()}
-              className="resetbutton"
+              className="op-btn op-btn-secondary"
             >
               Reset
             </button>

apps/OpenSign/src/primitives/Alert.js

@@ -5,25 +5,25 @@ const Alert = ({ children, type }) => {
   function theme(color) {
     switch (color) {
       case "success":
-        return "border-[#c3e6cb] bg-[#d4edda] text-[#155724]";
+        return "op-alert-success";
       case "info":
-        return "border-[#adcdeb] bg-[#c1daf0] text-[#153756]";
+        return "op-alert-info";
       case "danger":
-        return "border-[#f0a8a8] bg-[#f4bebe] text-[#c42121]";
+        return "op-alert-error";
+      case "warning":
+        return "op-alert-warning";
       default:
-        return "border-[#d6d6d6] bg-[#d9d9d9] text-[#575757]";
+        return "";
     }
   }
   return (
-    <>
-      {children && (
-        <div
-          className={`z-[1000] 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}
+    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>
         </div>
-      )}
-    </>
+      </div>
+    )
   );
 };
 

apps/OpenSign/src/primitives/HandleError.js

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

apps/OpenSign/src/primitives/LazyPage.js

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

apps/OpenSign/src/primitives/LinkUserModal.js

@@ -18,31 +18,7 @@ const LinkUserModal = (props) => {
         closePopup={props.closePopup}
         signersData={props?.signersData}
       />
-      <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>
+      <div className="op-divider text-base-content mx-[25%] my-1">or</div>
       <AddContact details={props.handleAddUser} closePopup={props.closePopup} />
     </ModalUi>
   );

apps/OpenSign/src/primitives/Loader.js

@@ -0,0 +1,9 @@
+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,27 +1,14 @@
 import React from "react";
-import loader from "../assets/images/loader2.gif";
+import Loader from "./Loader";
 
-function Loader({ isLoading }) {
+function LoaderWithMsg({ isLoading }) {
   return (
-    <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 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>
   );
 }
 
-export default Loader;
+export default LoaderWithMsg;

apps/OpenSign/src/primitives/ModalUi.js

@@ -6,7 +6,6 @@ const ModalUi = ({
   children,
   title,
   isOpen,
-  headColor,
   handleClose,
   showHeader = true,
   showClose = true,
@@ -16,27 +15,26 @@ const ModalUi = ({
   return (
     <>
       {isOpen && (
-        <div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
+        <dialog className="op-modal op-modal-open">
           <div
             className={`${
               reduceWidth || "md:min-w-[500px]"
-            } 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%]  overflow-y-auto hide-scrollbar `}
+            } op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
           >
             {showHeader && (
-              <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>
+              <>
+                <h3 className="text-base-content font-bold text-lg pt-[15px] px-[20px]">
+                  {title}
+                </h3>
                 {showClose && (
-                  <div
-                    className="text-[1.5rem] cursor-pointer"
+                  <button
+                    className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-2"
                     onClick={() => handleClose && handleClose()}
                   >
-                    &times;
-                  </div>
+                    ✕
+                  </button>
                 )}
-              </div>
+              </>
             )}
             {!isEnableSubscription && showHeaderMessage && (
               <PremiumAlertHeader
@@ -47,7 +45,7 @@ const ModalUi = ({
             )}
             <div>{children}</div>
           </div>
-        </div>
+        </dialog>
       )}
     </>
   );

apps/OpenSign/src/primitives/PdfDeclineModal.js

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

apps/OpenSign/src/primitives/TourContentWithBtn.js

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

apps/OpenSign/src/styles/AddUser.css

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

apps/OpenSign/src/styles/opensigndrive.css

@@ -208,7 +208,6 @@
   height: 100px;
   margin: 10px;
   display: inline-block;
-
   cursor: pointer;
 }
 

apps/OpenSign/src/styles/signature.css

@@ -858,7 +858,6 @@ option {
 
   #navbar {
     overflow: hidden;
-    z-index: 49;
   }
 
   /* Navbar links */

apps/OpenSign/tailwind.config.js

@@ -4,5 +4,70 @@ module.exports = {
   theme: {
     extend: {}
   },
-  plugins: []
+  plugins: [require("daisyui")],
+  daisyui: {
+    // themes: true,
+    themes: [
+      "light",
+      "dark",
+      "cupcake",
+      "bumblebee",
+      "emerald",
+      "corporate",
+      "synthwave",
+      "retro",
+      "cyberpunk",
+      "valentine",
+      "halloween",
+      "garden",
+      "forest",
+      "aqua",
+      "lofi",
+      "pastel",
+      "fantasy",
+      "wireframe",
+      "black",
+      "luxury",
+      "dracula",
+      "cmyk",
+      "autumn",
+      "business",
+      "acid",
+      "lemonade",
+      "night",
+      "coffee",
+      "winter",
+      "dim",
+      "nord",
+      "sunset",
+      {
+        opensigncss: {
+          primary: "#034687",
+          "primary-content": "#ccd9e8",
+          secondary: "#151B25",
+          "secondary-content": "#cacccf",
+          accent: "#E10032",
+          "accent-content": "#ffd8d5",
+          neutral: "#F0D7D9",
+          "neutral-content": "#141111",
+          "base-100": "#ffffff",
+          "base-200": "#dedede",
+          "base-300": "#bebebe",
+          "base-content": "#161616",
+          info: "#00b6ff",
+          "info-content": "#f5f5f4",
+          success: "#00a96e",
+          "success-content": "#f5f5f4",
+          warning: "#ffbe00",
+          "warning-content": "#ccd9e8",
+          error: "#ff0000",
+          "error-content": "#f3f4f6",
+          "--rounded-btn": "1.9rem",
+          "--tab-border": "2px",
+          "--tab-radius": "0.7rem"
+        }
+      }
+    ],
+    prefix: "op-"
+  }
 };