diff --git a/apps/OpenSign/public/index.html b/apps/OpenSign/public/index.html index 61c83ee32..2559267fc 100644 --- a/apps/OpenSign/public/index.html +++ b/apps/OpenSign/public/index.html @@ -1,5 +1,5 @@ - + diff --git a/apps/OpenSign/src/App.js b/apps/OpenSign/src/App.js index 4ccd4fa77..5115d329f 100644 --- a/apps/OpenSign/src/App.js +++ b/apps/OpenSign/src/App.js @@ -32,21 +32,8 @@ const Webhook = lazy(() => import("./pages/Webhook")); pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.mjs`; const Loader = () => { return ( -
-
+
+
); }; diff --git a/apps/OpenSign/src/components/AddSigner.js b/apps/OpenSign/src/components/AddSigner.js index aa7801085..8aa93b8ea 100644 --- a/apps/OpenSign/src/components/AddSigner.js +++ b/apps/OpenSign/src/components/AddSigner.js @@ -225,14 +225,8 @@ const AddSigner = (props) => { return (
{isLoader && ( -
-
+
+
)}
@@ -257,7 +251,7 @@ const AddSigner = (props) => { className="block text-xs text-gray-700 font-semibold" > Name - * + * { className="block text-xs text-gray-700 font-semibold" > Email - * + * { {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> + <div className="fixed inset-0 flex justify-center items-center bg-black bg-opacity-30 z-50 text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> )} <div className="w-full mx-auto"> @@ -213,7 +207,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" @@ -230,7 +224,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" @@ -247,7 +241,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" diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js index 9c4451787..66fb02933 100644 --- a/apps/OpenSign/src/components/Header.js +++ b/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"); diff --git a/apps/OpenSign/src/components/LoginFacebook.js b/apps/OpenSign/src/components/LoginFacebook.js index f9ca16a30..a3d91b2e0 100644 --- a/apps/OpenSign/src/components/LoginFacebook.js +++ b/apps/OpenSign/src/components/LoginFacebook.js @@ -112,29 +112,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 w-[100vw] h-[100vh] bg-black bg-opacity-30 left-0 top-0 z-[20] text-[50px] text-[#3ac9d6]"> + <div className="loader-37 fixed top-[45%] left-[45%]"></div> </div> )} {/* <FacebookLogin @@ -168,8 +149,7 @@ const LoginFacebook = ({ style={{ display: "flex" }} className="col-form-label" > - Phone{" "} - <span style={{ fontSize: 13, color: "red" }}>*</span> + Phone <span className="text-[red] text-[13px]">*</span> </label> <input type="tel" @@ -191,8 +171,7 @@ const LoginFacebook = ({ style={{ display: "flex" }} className="col-form-label" > - Company{" "} - <span style={{ fontSize: 13, color: "red" }}>*</span> + Company <span className="text-[red] text-[13px]">*</span> </label> <input type="text" diff --git a/apps/OpenSign/src/components/RenderDebugPdf.js b/apps/OpenSign/src/components/RenderDebugPdf.js index a3bb5673f..26a30ee47 100644 --- a/apps/OpenSign/src/components/RenderDebugPdf.js +++ b/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 diff --git a/apps/OpenSign/src/components/dashboard/GetDashboard.js b/apps/OpenSign/src/components/dashboard/GetDashboard.js index 6b172969c..7cffbc4fc 100644 --- a/apps/OpenSign/src/components/dashboard/GetDashboard.js +++ b/apps/OpenSign/src/components/dashboard/GetDashboard.js @@ -37,9 +37,10 @@ const GetDashboard = (props) => { case "Card": return ( <div - className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md" + 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={ @@ -78,8 +79,9 @@ const GetDashboard = (props) => { case "Card": return ( <div - className="op-card bg-[#2ed8b6] w-full h-[140px] px-3 pt-4 mb-3 shadow-md" - 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 diff --git a/apps/OpenSign/src/components/pdf/AddRoleModal.js b/apps/OpenSign/src/components/pdf/AddRoleModal.js index d6e485015..5f90fcc68 100644 --- a/apps/OpenSign/src/components/pdf/AddRoleModal.js +++ b/apps/OpenSign/src/components/pdf/AddRoleModal.js @@ -9,10 +9,7 @@ const AddRoleModal = (props) => { handleClose={props.handleCloseRoleModal} > <div className="addusercontainer"> - <form - style={{ display: "flex", flexDirection: "column" }} - onSubmit={props.handleAddRole} - > + <form className="flex flex-col" onSubmit={props.handleAddRole}> <input value={props.roleName} onChange={(e) => props.setRoleName(e.target.value)} @@ -23,37 +20,18 @@ const AddRoleModal = (props) => { } 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-secondary ml-2" > Close </button> diff --git a/apps/OpenSign/src/components/pdf/DefaultSignature.js b/apps/OpenSign/src/components/pdf/DefaultSignature.js index 1887d5164..ec2ff9248 100644 --- a/apps/OpenSign/src/components/pdf/DefaultSignature.js +++ b/apps/OpenSign/src/components/pdf/DefaultSignature.js @@ -19,53 +19,29 @@ function DefaultSignature({ defaultSignImg, xyPostion, setDefaultSignAlert }) { return ( <div data-tut="reactourThird"> <div + className="text-white p-[5px] mt-[5px]" style={{ - background: themeColor, - color: "white", - padding: "5px", - fontFamily: "sans-serif", - marginTop: "5px" + background: themeColor }} > 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> ); diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js index 419983798..fe3294d13 100644 --- a/apps/OpenSign/src/components/pdf/PdfHeader.js +++ b/apps/OpenSign/src/components/pdf/PdfHeader.js @@ -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 = { @@ -64,160 +57,165 @@ function Header({ {isMobile && isShowHeader ? ( <div id="navbar" - className={isGuestSigner ? "stickySignerHead" : "stickyHead"} + className={isGuestSigner ? "stickySignerHead" : "stickyHead z-[1000]"} style={{ width: isGuestSigner ? window.innerWidth : window.innerWidth - 30 + "px" }} > - <div className="preBtn2"> - <div onClick={() => navigate(-1)}> - <i - className="fa fa-arrow-left" - aria-hidden="true" - style={{ color: themeColor, cursor: "pointer" }} - ></i> - </div> - <div> - <i - onClick={() => { - if (pageNumber > 1) { - previousPage(); - } - }} - className="fa fa-backward" - style={{ color: "gray", cursor: "pointer" }} - ></i> - <span - style={{ - fontSize: "13px", - fontWeight: "600", - marginLeft: "10px", - marginRight: "10px" - }} - > - {pageNumber || (allPages ? 1 : "--")} of {allPages || "--"} - </span> - <i - onClick={() => { - if (pageNumber < allPages) { - nextPage(); - } - }} - className="fa fa-forward" - style={{ color: "gray", cursor: "pointer" }} - ></i> - </div> + <div className="flex justify-between items-center py-[5px] px-[10px] "> + <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-dropdown op-dropdown-end"> + <div tabIndex={0} role="button" className="op-btn op-btn-sm"> + <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="DropdownMenuContent" - sideOffset={5} - > - <DropdownMenu.Item - className="DropdownMenuItem" + <span className="font-semibold text-[12px]"> + <i className="fa fa-arrow-down" aria-hidden="true"></i>{" "} + Download + </span> + </li> + {isCompleted && ( + <li onClick={() => - handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading) + handleDownloadCertificate(pdfDetails, setIsDownloading) } > - <div - style={{ - display: "flex", - flexDirection: "row" - }} - > - <i - className="fa fa-arrow-down" - aria-hidden="true" - style={{ marginRight: "2px" }} - ></i> - Download - </div> - </DropdownMenu.Item> - {isCompleted && ( - <DropdownMenu.Item - className="DropdownMenuItem" - onClick={() => - handleDownloadCertificate( - pdfDetails, - setIsDownloading - ) - } - > - <div - style={{ - border: "none", - backgroundColor: "#fff" - }} - > - <i - className="fa-solid fa-award" - style={{ marginRight: "2px" }} - aria-hidden="true" - ></i> - Certificate - </div> - </DropdownMenu.Item> - )} - {isSignYourself && ( - <DropdownMenu.Item - className="DropdownMenuItem" - onClick={() => setIsEmail(true)} - > - <div - style={{ - display: "flex", - flexDirection: "row" - }} - > - <i - className="fa fa-envelope" - style={{ marginRight: "2px" }} - aria-hidden="true" - ></i> - Mail - </div> - </DropdownMenu.Item> - )} - <DropdownMenu.Item - className="DropdownMenuItem" - onClick={(e) => - handleToPrint(e, pdfUrl, setIsDownloading) - } - > - <div - style={{ - display: "flex", - flexDirection: "row" - }} - > - <i - className="fa fa-print" - aria-hidden="true" - style={{ marginRight: "2px" }} - ></i> - Print - </div> - </DropdownMenu.Item> - </DropdownMenu.Content> - </DropdownMenu.Portal> - </DropdownMenu.Root> + <span className="font-semibold text-[12px]"> + <i className="fa-solid fa-award" aria-hidden="true"></i>{" "} + Certificate + </span> + </li> + )} + {isSignYourself && ( + <li onClick={() => setIsEmail(true)}> + <span className="font-semibold text-[12px]"> + <i className="fa fa-envelope" aria-hidden="true"></i>{" "} + Mail + </span> + </li> + )} + <li + onClick={(e) => handleToPrint(e, pdfUrl, setIsDownloading)} + > + <span className="font-semibold text-[12px]"> + <i className="fa fa-print" aria-hidden="true"></i> Print + </span> + </li> + </ul> + </div> ) : ( + // <DropdownMenu.Root> + // <DropdownMenu.Trigger asChild> + // <div + // style={{ + // color: themeColor, + // border: "none", + // fontWeight: "650", + // fontSize: "16px", + // padding: "0px 3px 0px 5px" + // }} + // > + // <i className="fa fa-ellipsis-v" aria-hidden="true"></i> + // </div> + // </DropdownMenu.Trigger> + // <DropdownMenu.Portal> + // <DropdownMenu.Content + // className="DropdownMenuContent" + // sideOffset={5} + // > + // <DropdownMenu.Item + // className="DropdownMenuItem" + // onClick={() => + // handleDownloadPdf(pdfDetails, pdfUrl, setIsDownloading) + // } + // > + // <div className="flex flex-row"> + // <i + // className="fa fa-arrow-down" + // aria-hidden="true" + // style={{ marginRight: "2px" }} + // ></i> + // Download + // </div> + // </DropdownMenu.Item> + // {isCompleted && ( + // <DropdownMenu.Item + // className="DropdownMenuItem" + // onClick={() => + // handleDownloadCertificate( + // pdfDetails, + // setIsDownloading + // ) + // } + // > + // <div className="border-none bg-white"> + // <i + // className="fa-solid fa-award" + // style={{ marginRight: "2px" }} + // aria-hidden="true" + // ></i> + // Certificate + // </div> + // </DropdownMenu.Item> + // )} + // {isSignYourself && ( + // <DropdownMenu.Item + // className="DropdownMenuItem" + // onClick={() => setIsEmail(true)} + // > + // <div + // style={{ + // display: "flex", + // flexDirection: "row" + // }} + // > + // <i + // className="fa fa-envelope" + // style={{ marginRight: "2px" }} + // aria-hidden="true" + // ></i> + // Mail + // </div> + // </DropdownMenu.Item> + // )} + // <DropdownMenu.Item + // className="DropdownMenuItem" + // onClick={(e) => + // handleToPrint(e, pdfUrl, setIsDownloading) + // } + // > + // <div + // style={{ + // display: "flex", + // flexDirection: "row" + // }} + // > + // <i + // className="fa fa-print" + // aria-hidden="true" + // style={{ marginRight: "2px" }} + // ></i> + // Print + // </div> + // </DropdownMenu.Item> + // </DropdownMenu.Content> + // </DropdownMenu.Portal> + // </DropdownMenu.Root> <div className="flex justify-around items-center"> {/* current signer is checking user send request and check status of pdf sign than if current user exist than show finish button else no @@ -261,6 +259,37 @@ function Header({ Finish </div> )} + <div className="op-dropdown op-dropdown-end"> + <div + tabIndex={0} + role="button" + className="op-btn op-btn-sm" + > + <i className="fa fa-ellipsis-v" aria-hidden="true"></i> + </div> + <ul + tabIndex={0} + className="op-dropdown-content z-[1] op-menu op-menu-sm p-1 shadow bg-base-100 rounded-box mt-1" + > + <li + onClick={() => + handleDownloadPdf( + pdfDetails, + pdfUrl, + setIsDownloading + ) + } + > + <span className="font-semibold text-[12px]"> + <i + className="fa fa-arrow-down" + aria-hidden="true" + ></i>{" "} + Download + </span> + </li> + </ul> + </div> <DropdownMenu.Root> <DropdownMenu.Trigger asChild> <div @@ -355,9 +384,7 @@ function Header({ background: isMailSend ? "rgb(203, 203, 203)" : "#188ae2", color: isMailSend ? "rgb(77, 75, 75)" : "white" }} - onClick={() => { - alertSendEmail(); - }} + onClick={() => alertSendEmail()} > {completeBtnTitle ? completeBtnTitle @@ -376,34 +403,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 +438,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> @@ -517,9 +539,7 @@ function Header({ ) : ( <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" > diff --git a/apps/OpenSign/src/components/pdf/PrevNext.js b/apps/OpenSign/src/components/pdf/PrevNext.js index ea3fc5bec..a236648ea 100644 --- a/apps/OpenSign/src/components/pdf/PrevNext.js +++ b/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-primary 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 cursor-pointer" 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-primary 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 cursor-pointer" aria-hidden="true"></i> + </span> + <span className="lg:block hidden">Next</span> + </button> </div> ); } diff --git a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js index 2fae32a0d..a55961f9d 100644 --- a/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js +++ b/apps/OpenSign/src/components/pdf/RenderAllPdfPage.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import RSC from "react-scrollbars-custom"; import { Document, Page } from "react-pdf"; -import { themeColor } from "../../constant/const"; +// import { themeColor } from "../../constant/const"; function RenderAllPdfPage({ signPdfUrl, @@ -40,15 +40,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,23 +50,25 @@ function RenderAllPdfPage({ ); }; return ( - <div className="showPages"> + <div> <div - style={{ - display: "flex", - flexDirection: "row", - boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px", - backgroundColor: "white", - height: "100%" - }} + className=" hidden md:flex flex-row bg-base-100 h-full" + // 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 className="w-[140px]"> <div - style={{ - background: themeColor - // color:"white" - }} - className="signedStyle" + className="px-3 pt-2 pb-1 text-[15px] text-base-content font-semibold " + // style={{ + // background: themeColor + // // color:"white" + // }} + // className="signedStyle" > Pages </div> @@ -95,21 +89,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 +103,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} diff --git a/apps/OpenSign/src/components/pdf/SignerListPlace.js b/apps/OpenSign/src/components/pdf/SignerListPlace.js index 9a8bab189..f7fd2d4ea 100644 --- a/apps/OpenSign/src/components/pdf/SignerListPlace.js +++ b/apps/OpenSign/src/components/pdf/SignerListPlace.js @@ -7,12 +7,13 @@ function SignerListPlace(props) { return ( <div> <div - style={{ - background: themeColor, - padding: "5px" - }} + className="pt-2 pb-1 px-3 font-semibold text-base-content " + // style={{ + // background: themeColor, + // padding: "5px" + // }} > - <span className="signedStyle"> + <span className=" relative"> {props.title ? props.title : "Recipients"} <span className="absolute text-xs z-[30] mt-1 ml-0.5"> {props?.title === "Roles" && ( @@ -68,7 +69,7 @@ function SignerListPlace(props) { </span> </span> </div> - <div className="signerList"> + <div className="overflow-auto hide-scrollbar max-h-[180px]"> <RecipientList {...props} /> </div> {props.handleAddSigner ? ( diff --git a/apps/OpenSign/src/components/pdf/WidgetComponent.js b/apps/OpenSign/src/components/pdf/WidgetComponent.js index 543e34835..43466ecee 100644 --- a/apps/OpenSign/src/components/pdf/WidgetComponent.js +++ b/apps/OpenSign/src/components/pdf/WidgetComponent.js @@ -386,16 +386,23 @@ function WidgetComponent({ className={ isMailSend ? "disabled signerComponent " : "signerComponent" } + // className="bg-base-100" > <div - style={{ - background: themeColor, - padding: "5px" - }} + // style={{ + // background: themeColor, + // padding: "5px" + // }} + className="text-base-content px-3 py-2 text-[15px] border-y-[1px] border-base-content" > - <span className="signedStyle">Fields</span> + <span + // className="signedStyle" + > + Fields + </span> </div> + {/* <div className="flex flex-col w-full h-auto my-3 items-center"> */} <div className="signLayoutContainer1"> <WidgetList updateWidgets={updateWidgets} diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js index dfcad24e6..8337329b5 100644 --- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js +++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js @@ -127,7 +127,7 @@ const WidgetNameModal = (props) => { <div className="form-section"> <label htmlFor="name" style={{ fontSize: 13 }}> Name - <span style={{ color: "red", fontSize: 13 }}> *</span> + <span className="text-[red] text-[13px]"> *</span> </label> <input className="addUserInput" diff --git a/apps/OpenSign/src/components/sidebar/Sidebar.js b/apps/OpenSign/src/components/sidebar/Sidebar.js index 92c8778b6..f8335350c 100644 --- a/apps/OpenSign/src/components/sidebar/Sidebar.js +++ b/apps/OpenSign/src/components/sidebar/Sidebar.js @@ -44,7 +44,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => { }; return ( <aside - className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-40 hide-scrollbar + 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"> diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js index 25a91a20c..71387f3e6 100644 --- a/apps/OpenSign/src/constant/Utils.js +++ b/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"; @@ -380,10 +380,9 @@ export const getWidgetType = (item, marginLeft) => { return ( <> <div - className="signatureBtn widgets" + className="border-2 border-accent rounded-md flex justify-between w-fit md:w-[150px] ml-1 select-none" + // 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` }} > @@ -391,25 +390,23 @@ export const getWidgetType = (item, marginLeft) => { {!isMobile && ( <i className="fa-sharp fa-solid fa-grip-vertical" - style={{ color: "#908d8d", fontSize: "13px", marginLeft: 4 }} + style={{ fontSize: "13px", marginLeft: 4 }} ></i> )} - <span className=" font-[400] text-[15px] text-black ml-[5px]"> + <span className=" font-[400] text-[15px] text-base-content ml-[5px]"> {item.type} </span> </div> <div - style={{ - backgroundColor: themeColor, - padding: "0 5px", - display: "flex", - alignItems: "center" - }} + className=" bg-accent flex items-center px-[5px]" + // style={{ + // backgroundColor: themeColor, + // padding: "0 5px", + // display: "flex", + // alignItems: "center" + // }} > - <i - style={{ color: "white", fontSize: item.iconSize }} - className={item.icon} - ></i> + <i style={{ fontSize: item.iconSize }} className={item.icon}></i> </div> </div> </> diff --git a/apps/OpenSign/src/constant/const.js b/apps/OpenSign/src/constant/const.js index 7dd32bcff..058c181fd 100644 --- a/apps/OpenSign/src/constant/const.js +++ b/apps/OpenSign/src/constant/const.js @@ -1,10 +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 themeColor = "#47a3ad"; export const iconColor = "#686968"; export const isEnableSubscription = process.env.REACT_APP_ENABLE_SUBSCRIPTION; diff --git a/apps/OpenSign/src/json/dashboardJson.js b/apps/OpenSign/src/json/dashboardJson.js index deea5021f..4badee5f3 100644 --- a/apps/OpenSign/src/json/dashboardJson.js +++ b/apps/OpenSign/src/json/dashboardJson.js @@ -7,7 +7,7 @@ const dashboardJson = [ widget: { type: "Card", icon: "fas fa-signature", - bgColor: "#f0058e", + bgColor: "bg-[#f0058e]", label: "Need your Signature", description: null, data: { @@ -30,7 +30,7 @@ const dashboardJson = [ widget: { type: "Card", icon: "fas fa-sign-out-alt", - bgColor: "#g0058e", + bgColor: "bg-[#2ed8b6]", label: "Out for signatures", description: null, data: { diff --git a/apps/OpenSign/src/layout/HomeLayout.js b/apps/OpenSign/src/layout/HomeLayout.js index 5427af365..592f74c56 100644 --- a/apps/OpenSign/src/layout/HomeLayout.js +++ b/apps/OpenSign/src/layout/HomeLayout.js @@ -247,7 +247,7 @@ const HomeLayout = () => { }; return ( <div> - <div className="sticky top-0 z-50"> + <div className="sticky top-0 z-[101]"> {!isLoader && <Header showSidebar={showSidebar} />} </div> {isUserValid ? ( diff --git a/apps/OpenSign/src/pages/Form.js b/apps/OpenSign/src/pages/Form.js index 1ec79f513..a8831c564 100644 --- a/apps/OpenSign/src/pages/Form.js +++ b/apps/OpenSign/src/pages/Form.js @@ -14,7 +14,7 @@ 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"; @@ -586,29 +586,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> diff --git a/apps/OpenSign/src/pages/GuestLogin.js b/apps/OpenSign/src/pages/GuestLogin.js index a691e50ea..eea52d304 100644 --- a/apps/OpenSign/src/pages/GuestLogin.js +++ b/apps/OpenSign/src/pages/GuestLogin.js @@ -2,7 +2,7 @@ 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, 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"; @@ -181,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> + <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" /> @@ -199,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} > @@ -225,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} > @@ -254,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" @@ -276,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" @@ -294,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" @@ -311,11 +310,11 @@ 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" className="op-btn op-btn-primary" diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js index 0cb15546b..86bd9369f 100644 --- a/apps/OpenSign/src/pages/Login.js +++ b/apps/OpenSign/src/pages/Login.js @@ -1224,7 +1224,7 @@ function Login() { 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" @@ -1247,7 +1247,7 @@ 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" diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js index 3f25695f5..3176180a9 100644 --- a/apps/OpenSign/src/pages/PlaceHolderSign.js +++ b/apps/OpenSign/src/pages/PlaceHolderSign.js @@ -1039,7 +1039,7 @@ function PlaceHolderSign() { }} > <i - className="fa-solid fa-share-from-square cursor-pointer " + className="fa-solid fa-share-from-square cursor-pointer" style={{ color: themeColor }} ></i> </RWebShare> @@ -1639,26 +1639,13 @@ function PlaceHolderSign() { ) : ( <div className="signatureContainer" 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 - }} - > + <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80"> <img - alt="no img" + alt="loader" src={loader} - style={{ width: "100px", height: "100px" }} + className="w-[100px] h-[100px]" /> - <span style={{ fontSize: "13px", fontWeight: "bold" }}> + <span className="text-[13px] font-bold"> This might take some time </span> </div> @@ -1718,10 +1705,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]"> {isSendAlert.mssg === "sure" ? ( <span> Please ensure there's at least one signature widget @@ -1751,7 +1735,7 @@ function PlaceHolderSign() { /> <div className={ - "flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer " + "flex justify-end items-center gap-1 mt-2 underline text-blue-700 focus:outline-none cursor-pointer " } onClick={() => { setRequestBody(defaultBody); @@ -1764,26 +1748,20 @@ function PlaceHolderSign() { )} <div className={ - "flex flex-row md:items-center gap-2 md:gap-6 mt-2 " + "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" - }} + className="op-btn op-btn-primary font-[500] text-sm shadow" > 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" + onClick={() => setIsCustomize(false)} + className="op-btn op-btn-ghost font-[500] text-sm" > Close </button> @@ -1793,12 +1771,8 @@ function PlaceHolderSign() { {!isCustomize && (isSubscribe || !isEnableSubscription) && ( <span - className={ - "cursor-pointer underline text-blue-700 focus:outline-none" - } - onClick={() => { - setIsCustomize(!isCustomize); - }} + className="link link-primary text-sm" + onClick={() => setIsCustomize(!isCustomize)} > Cutomize Email </span> @@ -1818,21 +1792,9 @@ 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> </> @@ -1849,7 +1811,7 @@ 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> ) : ( @@ -1858,31 +1820,16 @@ function PlaceHolderSign() { {isCurrUser && ( <p>Do you want to sign documents right now ?</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> {isCurrUser && ( <button - onClick={() => { - handleRecipientSign(); - }} - style={{ - background: themeColor, - color: "white" - }} + onClick={() => handleRecipientSign()} type="button" - className="finishBtn" + className="op-btn op-btn-primary" > Yes </button> )} - <button onClick={() => { setIsSend(false); @@ -1903,17 +1850,9 @@ function PlaceHolderSign() { 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); @@ -2129,18 +2068,9 @@ function PlaceHolderSign() { 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" diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js index 5e27cc1cb..f4aa4e71f 100644 --- a/apps/OpenSign/src/pages/Signup.js +++ b/apps/OpenSign/src/pages/Signup.js @@ -523,8 +523,7 @@ const Signup = () => { <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" @@ -535,8 +534,7 @@ const Signup = () => { /> <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" @@ -550,8 +548,7 @@ 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" @@ -563,7 +560,7 @@ 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" @@ -575,7 +572,7 @@ 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" @@ -587,7 +584,7 @@ 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 @@ -670,7 +667,7 @@ const Signup = () => { <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-center text-xs font-bold mt-2"> <button type="submit" - className="op-btn op-btn-primary" + className="op-btn op-btn-accent" disabled={state.loading} > {state.loading ? "Loading..." : "Register"} diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js index d6fb21f50..f41449a6a 100644 --- a/apps/OpenSign/src/pages/TemplatePlaceholder.js +++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js @@ -1211,7 +1211,10 @@ const TemplatePlaceholder = () => { ) : 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 @@ -1259,7 +1262,7 @@ const TemplatePlaceholder = () => { 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> @@ -1269,7 +1272,7 @@ const TemplatePlaceholder = () => { 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,20 +1282,12 @@ 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 @@ -1330,17 +1325,9 @@ const TemplatePlaceholder = () => { 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); @@ -1396,7 +1383,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 +1486,10 @@ const TemplatePlaceholder = () => { </div> ) : ( <div> - <div className="signerComponent"> + <div className="w-[180px] bg-base-100 h-full"> <div style={{ maxHeight: window.innerHeight - 70 + "px" }} - className="autoSignScroll" + className="autoSignScroll hide-scrollbar" > <SignerListPlace isMailSend={isMailSend} diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js index e4dbea321..46789d7cc 100644 --- a/apps/OpenSign/src/primitives/GetReportDisplay.js +++ b/apps/OpenSign/src/primitives/GetReportDisplay.js @@ -970,9 +970,11 @@ const ReportTable = (props) => { {/* {props.ReportName === "Templates" && isEnableSubscription && ( <th className="px-4 py-2">Public</th> )} */} - {/* {props.actions?.length > 0 && ( - <th className="px-4 py-2">Action</th> - )} */} + {props.actions?.length > 0 && ( + <th className="px-4 py-2 text-transparent pointer-events-none"> + Action + </th> + )} </tr> </thead> <tbody className="text-[12px]"> diff --git a/apps/OpenSign/src/primitives/HandleError.js b/apps/OpenSign/src/primitives/HandleError.js index a9227d4cf..c75477705 100644 --- a/apps/OpenSign/src/primitives/HandleError.js +++ b/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> ); } diff --git a/apps/OpenSign/src/primitives/LazyPage.js b/apps/OpenSign/src/primitives/LazyPage.js index e4a7a7304..5d44911e2 100644 --- a/apps/OpenSign/src/primitives/LazyPage.js +++ b/apps/OpenSign/src/primitives/LazyPage.js @@ -4,21 +4,8 @@ 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] text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> } > diff --git a/apps/OpenSign/src/primitives/LoaderWithMsg.js b/apps/OpenSign/src/primitives/LoaderWithMsg.js index 02392ee4e..d639f651f 100644 --- a/apps/OpenSign/src/primitives/LoaderWithMsg.js +++ b/apps/OpenSign/src/primitives/LoaderWithMsg.js @@ -3,23 +3,9 @@ import loader from "../assets/images/loader2.gif"; function Loader({ 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]" /> + <span className="text-[13px] text-base-cotent">{isLoading.message}</span> </div> ); } diff --git a/apps/OpenSign/src/styles/signature.css b/apps/OpenSign/src/styles/signature.css index a9e7ef8e4..69773d5b8 100644 --- a/apps/OpenSign/src/styles/signature.css +++ b/apps/OpenSign/src/styles/signature.css @@ -858,7 +858,6 @@ option { #navbar { overflow: hidden; - z-index: 49; } /* Navbar links */ diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js index 1cefffd4c..6270181a0 100644 --- a/apps/OpenSign/tailwind.config.js +++ b/apps/OpenSign/tailwind.config.js @@ -6,7 +6,65 @@ module.exports = { }, plugins: [require("daisyui")], daisyui: { - themes: true, + // 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" + } + } + ], prefix: "op-" } };