From 149a16f1509571eb01401e1bc7002295e3934754 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 13 Jun 2024 13:27:06 +0530
Subject: [PATCH] style: update design of template ui

---
 apps/OpenSign/src/components/LoginFacebook.js |  21 +--
 .../src/components/dashboard/GetDashboard.js  |   4 +-
 .../src/components/opensigndrive/DriveBody.js |  66 ++-----
 .../src/components/pdf/EmailComponent.js      | 177 +++---------------
 apps/OpenSign/src/components/pdf/PdfHeader.js |  90 +++------
 .../src/components/pdf/RecipientList.js       |  10 +-
 apps/OpenSign/src/components/pdf/RenderPdf.js |  40 ++--
 .../src/components/pdf/SignerListPlace.js     |  47 ++---
 .../src/components/pdf/WidgetComponent.js     |  25 +--
 .../OpenSign/src/components/pdf/WidgetList.js |   4 +-
 apps/OpenSign/src/constant/Utils.js           |  37 +---
 apps/OpenSign/src/pages/SignyourselfPdf.js    |  56 ++----
 .../OpenSign/src/pages/TemplatePlaceholder.js |  18 +-
 .../src/primitives/GetReportDisplay.js        |  12 +-
 14 files changed, 151 insertions(+), 456 deletions(-)

diff --git a/apps/OpenSign/src/components/LoginFacebook.js b/apps/OpenSign/src/components/LoginFacebook.js
index a3d91b2e0..4b9278654 100644
--- a/apps/OpenSign/src/components/LoginFacebook.js
+++ b/apps/OpenSign/src/components/LoginFacebook.js
@@ -127,11 +127,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">
@@ -144,11 +143,7 @@ const LoginFacebook = ({
               <div className="modal-body">
                 <form>
                   <div className="form-group">
-                    <label
-                      htmlFor="Phone"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
+                    <label htmlFor="Phone" className="col-form-label">
                       Phone <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
@@ -166,11 +161,7 @@ const LoginFacebook = ({
                     />
                   </div>
                   <div className="form-group">
-                    <label
-                      htmlFor="Company"
-                      style={{ display: "flex" }}
-                      className="col-form-label"
-                    >
+                    <label htmlFor="Company" className="col-form-label">
                       Company <span className="text-[red] text-[13px]">*</span>
                     </label>
                     <input
@@ -191,16 +182,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>
diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js
index 7cffbc4fc..14948fac9 100644
--- a/apps/OpenSign/src/components/dashboard/GetDashboard.js
+++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js
@@ -39,7 +39,7 @@ const GetDashboard = (props) => {
           <div
             className={`${
               col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
-            } op-card  w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
+            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
             data-tut={col.widget.data.tourSection}
           >
             <Suspense
@@ -81,7 +81,7 @@ const GetDashboard = (props) => {
           <div
             className={`${
               col?.widget?.bgColor ? col.widget.bgColor : "bg-[#2ed8b6]"
-            } op-card  w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
+            } op-card w-full h-[140px] px-3 pt-4 mb-3 shadow-md"`}
           >
             <Suspense fallback={<div>please wait</div>}>
               <DashboardCard
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 5e6ae978d..978ed96d9 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -313,32 +313,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 +336,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,9 +349,8 @@ 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>
@@ -403,12 +383,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>
@@ -426,8 +401,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>
@@ -464,12 +439,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>
@@ -514,7 +484,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>
                     );
                   })}
@@ -525,21 +495,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()}
               </>
diff --git a/apps/OpenSign/src/components/pdf/EmailComponent.js b/apps/OpenSign/src/components/pdf/EmailComponent.js
index 66c4cc682..ef8a9a2ab 100644
--- a/apps/OpenSign/src/components/pdf/EmailComponent.js
+++ b/apps/OpenSign/src/components/pdf/EmailComponent.js
@@ -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">
+                <img alt="loader" src={loader} className="w-[70px] h-[70px]" />
+                <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("");
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index 1b1cb2b7f..59bd7b17d 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -102,16 +102,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>
@@ -126,15 +120,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
@@ -146,15 +134,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
@@ -167,16 +149,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>
@@ -285,12 +261,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>
@@ -310,18 +286,14 @@ 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"
-                  }}
+                  className="op-btn op-btn-primary op-btn-sm mr-[5px]"
                   onClick={() => alertSendEmail()}
                 >
                   {completeBtnTitle
@@ -438,40 +410,37 @@ 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>
           ) : (
@@ -479,13 +448,13 @@ 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
                 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();
@@ -499,11 +468,8 @@ function Header({
         </div>
       )}
       {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>
+        <div className="fixed z-[200] inset-0 flex justify-center items-center bg-black bg-opacity-30 text-[45px] text-[#3dd3e0]">
+          <div className="loader-37"></div>
         </div>
       )}
       <ModalUi
diff --git a/apps/OpenSign/src/components/pdf/RecipientList.js b/apps/OpenSign/src/components/pdf/RecipientList.js
index 780ee2a5d..88fb4eb34 100644
--- a/apps/OpenSign/src/components/pdf/RecipientList.js
+++ b/apps/OpenSign/src/components/pdf/RecipientList.js
@@ -21,6 +21,7 @@ const RecipientList = (props) => {
       marginTop: "2px",
       display: "flex",
       flexDirection: "row",
+      borderRadius: 12,
       borderBottom: "1px solid #e3e1e1",
       alignItems: "center"
     };
@@ -141,14 +142,7 @@ const RecipientList = (props) => {
                 }
               }}
             >
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  alignItems: "center",
-                  width: "100%"
-                }}
-              >
+              <div className="flex flex-row items-center w-full">
                 <div
                   style={{
                     background: obj?.blockColor
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 2bac6b85e..1bd89d36f 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/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,13 +450,7 @@ 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);
diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js
index 9241c04bc..6ec80773a 100644
--- a/apps/OpenSign/src/components/pdf/SignerListPlace.js
+++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js
@@ -6,33 +6,18 @@ import { Tooltip } from "react-tooltip";
 function SignerListPlace(props) {
   return (
     <div>
-      <div
-        className="pt-2 pb-1 px-3 font-semibold text-base-content "
-        // style={{
-        //   background: themeColor,
-        //   padding: "5px"
-        // }}
-      >
-        <span className=" relative">
+      <div className="pt-2 pb-1 px-3 font-semibold text-base-content">
+        <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>
@@ -74,29 +59,23 @@ function SignerListPlace(props) {
       </div>
       {props.handleAddSigner ? (
         <div
+          role="button"
           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"
+          className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+          disabled={props?.isMailSend ? true : false}
           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>
+          <i className="fa-solid fa-plus"></i> Add role
         </div>
       ) : (
         <div
+          role="button"
           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"
+          className="op-btn op-btn-primary op-btn-outline w-full my-[2px]"
+          disabled={props?.isMailSend ? true : false}
           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>
+          <i className="fa-solid fa-plus"></i> Add recipients
         </div>
       )}
     </div>
diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js
index 43466ecee..bd1814fc2 100644
--- a/apps/OpenSign/src/components/pdf/WidgetComponent.js
+++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js
@@ -323,16 +323,11 @@ function WidgetComponent({
             {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"
+                className="op-btn op-btn-primary w-full my-[2px]"
                 onClick={() => handleAddSigner()}
               >
                 <i className="fa-solid fa-plus"></i>
-                <span style={{ marginLeft: 2 }}>Add role</span>
+                <span>Add role</span>
               </div>
             ) : (
               setIsAddSigner && (
@@ -354,19 +349,9 @@ function WidgetComponent({
 
             <div
               ref={scrollContainerRef}
-              style={{
-                background: "white",
-                borderTop: `2px solid ${themeColor}`
-              }}
+              className="bg-white 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 py-[10px] pr-[5px]">
                 <WidgetList
                   updateWidgets={updateWidgets}
                   handleDivClick={handleDivClick}
@@ -403,7 +388,7 @@ function WidgetComponent({
           </div>
 
           {/* <div className="flex flex-col w-full h-auto my-3 items-center"> */}
-          <div className="signLayoutContainer1">
+          <div className="flex flex-col items-center my-3">
             <WidgetList
               updateWidgets={updateWidgets}
               handleDivClick={handleDivClick}
diff --git a/apps/OpenSign/src/components/pdf/WidgetList.js b/apps/OpenSign/src/components/pdf/WidgetList.js
index 1fb284977..195b6ba36 100644
--- a/apps/OpenSign/src/components/pdf/WidgetList.js
+++ b/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);
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 71387f3e6..ccb54f9c3 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -376,40 +376,21 @@ export const addWidgetOptions = (type) => {
       return {};
   }
 };
-export const getWidgetType = (item, marginLeft) => {
+export const getWidgetType = (item) => {
   return (
-    <>
-      <div
-        className="border-2 border-accent rounded-md flex justify-between w-fit md:w-[150px] ml-1 select-none"
-        // className="signatureBtn widgets"
-        style={{
-          marginLeft: marginLeft && `${marginLeft}px`
-        }}
-      >
-        <div className="flex items-center mr-1">
-          {!isMobile && (
-            <i
-              className="fa-sharp fa-solid fa-grip-vertical"
-              style={{ fontSize: "13px", marginLeft: 4 }}
-            ></i>
-          )}
-          <span className=" font-[400] text-[15px] text-base-content 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
-          className=" bg-accent flex items-center px-[5px]"
-          // style={{
-          //   backgroundColor: themeColor,
-          //   padding: "0 5px",
-          //   display: "flex",
-          //   alignItems: "center"
-          // }}
-        >
-          <i style={{ 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>
   );
 };
 
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 39fdfa1e9..811062040 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -1099,32 +1099,15 @@ function SignYourSelf() {
       ) : (
         <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">
+              <img alt="loader" src={loader} className="w-[100px] h-[100px]" />
+              <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>
           )}
@@ -1184,7 +1167,7 @@ function SignYourSelf() {
                   });
                 }}
               >
-                <div style={{ height: "100%", padding: 20 }}>
+                <div className="p-[20px] h-full">
                   <p>{isAlert.alertMessage}</p>
                 </div>
               </ModalUi>
@@ -1197,20 +1180,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
@@ -1376,24 +1350,16 @@ function SignYourSelf() {
           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>
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index f41449a6a..5e38214f4 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -3,7 +3,7 @@ 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";
@@ -1291,15 +1291,9 @@ const TemplatePlaceholder = () => {
                   {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>
@@ -1308,7 +1302,7 @@ const TemplatePlaceholder = () => {
                           setIsCreateDocModal(false);
                         }}
                         type="button"
-                        className="finishBtn cancelBtn"
+                        className="op-btn op-btn-secondary ml-2"
                       >
                         No
                       </button>
@@ -1486,10 +1480,10 @@ const TemplatePlaceholder = () => {
               </div>
             ) : (
               <div>
-                <div className="w-[180px] bg-base-100 h-full">
+                <div className="w-[180px] h-full bg-base-100">
                   <div
                     style={{ maxHeight: window.innerHeight - 70 + "px" }}
-                    className="autoSignScroll hide-scrollbar"
+                    className="overflow-y-auto hide-scrollbar"
                   >
                     <SignerListPlace
                       isMailSend={isMailSend}
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 46789d7cc..f5f1e0972 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -959,7 +959,7 @@ const ReportTable = (props) => {
             </div>
           )}
         </div>
-        <table className="op-table op-table-zebra border-collapse">
+        <table className="op-table op-table-zebra border-collapse h-[317px]">
           <thead className="text-[14px]">
             <tr className="border-y-[1px]">
               {props.heading?.map((item, index) => (
@@ -1038,11 +1038,15 @@ const ReportTable = (props) => {
                       {props.heading.includes("Sr.No") && (
                         <th className="px-4 py-2">{startIndex + index + 1}</th>
                       )}
-                      <td className="px-4 py-2 font-semibold w-56">
+                      <td className="px-4 py-2 font-semibold min-w-56">
                         {item?.Name}{" "}
                       </td>
                       {props.heading.includes("Note") && (
-                        <td className="px-4 py-2">{item?.Note || "-"}</td>
+                        <td className="px-4 py-2">
+                          {item?.Note?.length > 25
+                            ? item?.Note?.slice(0, 25) + "..."
+                            : item?.Note || "-"}
+                        </td>
                       )}
                       {props.heading.includes("Folder") && (
                         <td className="px-4 py-2">
@@ -1245,7 +1249,7 @@ const ReportTable = (props) => {
                                   act.action !== "option"
                                     ? `${
                                         act?.btnColor ? act.btnColor : ""
-                                      } op-btn op-btn-sm`
+                                      } op-btn op-btn-sm mr-1`
                                     : "text-base-content focus:outline-none text-lg mr-2 relative"
                                 }
                               >