From 6fde71e947782ba90f974cde639937b4daf242fc Mon Sep 17 00:00:00 2001 From: prafull-opensignlabs Date: Fri, 7 Jun 2024 14:24:15 +0530 Subject: [PATCH] feat: implement daisy-ui in all pages --- .../src/components/opensigndrive/DriveBody.js | 26 +- apps/OpenSign/src/pages/ChangePassword.js | 15 +- apps/OpenSign/src/pages/ForgetPassword.js | 11 +- apps/OpenSign/src/pages/GenerateToken.js | 8 +- apps/OpenSign/src/pages/Login.js | 10 +- apps/OpenSign/src/pages/Managesign.js | 88 +-- apps/OpenSign/src/pages/Opensigndrive.js | 691 ++++++++---------- apps/OpenSign/src/pages/Signup.js | 32 +- apps/OpenSign/src/pages/UserProfile.js | 129 ++-- apps/OpenSign/src/pages/Webhook.js | 23 +- apps/OpenSign/src/styles/opensigndrive.css | 1 - apps/OpenSign/tailwind.config.js | 2 +- 12 files changed, 407 insertions(+), 629 deletions(-) diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js index 1a40f878b..7650a85ba 100644 --- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js +++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js @@ -376,23 +376,15 @@ function DriveBody(props) { ) ) : listType === "list" && data.Type === "Folder" ? ( -
+
-
+
no img handleOnclikFolder(data)} src={folder} - width={100} - height={103} + className="w-full h-full" /> {rename === data.objectId ? ( PDF checkPdfStatus(data)} data-tut={props.dataTutSixth} @@ -587,13 +579,9 @@ function DriveBody(props) {
) : ( -
+
{props.pdfData.map((data, ind) => { - return ( -
- {handleFolderData(data, ind, "list")} -
- ); + return
{handleFolderData(data, ind, "list")}
; })}
)} diff --git a/apps/OpenSign/src/pages/ChangePassword.js b/apps/OpenSign/src/pages/ChangePassword.js index c815558da..13b9977a7 100644 --- a/apps/OpenSign/src/pages/ChangePassword.js +++ b/apps/OpenSign/src/pages/ChangePassword.js @@ -49,13 +49,13 @@ function ChangePassword() { return ; } return ( -
+
<div className="text-xl font-bold border-b-[1px] border-gray-300"> Change Password </div> <div className="m-2"> - <form onSubmit={handleSubmit}> + <form onSubmit={handleSubmit} className=" flex flex-col gap-y-2"> <div> <label htmlFor="currentpassword" className="block text-xs ml-1"> Current Password @@ -65,7 +65,7 @@ function ChangePassword() { name="currentpassword" value={currentpassword} onChange={(e) => setCurrentPassword(e.target.value)} - className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm text-xs w-full" placeholder="Current Password" required /> @@ -79,7 +79,7 @@ function ChangePassword() { name="newpassword" value={newpassword} onChange={(e) => setnewpassword(e.target.value)} - className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm text-xs w-full" placeholder="New Password" required /> @@ -91,17 +91,14 @@ function ChangePassword() { <input type="password" name="confirmpassword" - className="px-3 py-2 mb-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs" + className="op-input op-input-bordered op-input-sm text-xs w-full" value={confirmpassword} onChange={(e) => setconfirmpassword(e.target.value)} placeholder="Confirm Password" required /> </div> - <button - type="submit" - className="bg-[#188ae2] m-2 px-4 py-3 rounded-sm shadow-md text-white text-xs font-semibold uppercase" - > + <button type="submit" className="op-btn op-btn-primary shadow-md m-2"> Change Password </button> </form> diff --git a/apps/OpenSign/src/pages/ForgetPassword.js b/apps/OpenSign/src/pages/ForgetPassword.js index 53e048387..92e5a24f0 100644 --- a/apps/OpenSign/src/pages/ForgetPassword.js +++ b/apps/OpenSign/src/pages/ForgetPassword.js @@ -59,7 +59,7 @@ function ForgotPassword() { let image = appInfo.applogo; return ( - <div className="bg-white"> + <div> <Title title="Forgot password page" /> {sentStatus === "success" && ( <Alert type="success"> @@ -69,8 +69,8 @@ function ForgotPassword() { {sentStatus === "failed" && ( <Alert type={"danger"}>Please setup email adapter </Alert> )} - <div> - <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> + <div className="md:p-10 lg:p-16"> + <div className=" md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> <div className="w-[250px] h-[66px] inline-block"> {state.hideNav ? ( <img src={image} width="100%" alt="" /> @@ -100,10 +100,7 @@ function ForgotPassword() { </div> </div> <div className="flex justify-between items-center px-4"> - <button - type="submit" - className="rounded-sm bg-[#3ac9d6] text-white px-4 py-3 text-xs font-semibold shadow uppercase" - > + <button type="submit" className="op-btn op-btn-primary"> Submit </button> <NavLink diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js index 47251abe6..54a140495 100644 --- a/apps/OpenSign/src/pages/GenerateToken.js +++ b/apps/OpenSign/src/pages/GenerateToken.js @@ -126,7 +126,7 @@ function GenerateToken() { ></div> </div> ) : ( - <div className="bg-white flex flex-col justify-center shadow rounded"> + <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded"> {!isEnableSubscription && <PremiumAlertHeader />} <h1 className={"ml-4 mt-3 mb-2 font-semibold"}> OpenSign™ API{" "} @@ -155,7 +155,7 @@ function GenerateToken() { {apiToken ? apiToken : "_____"} </span> <button - className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-2.5 py-2 focus:outline-none ml-2" + className="op-btn op-btn-primary op-btn-sm ml-2" onClick={() => copytoclipboard(apiToken)} > <i className="fa-solid fa-copy"></i> @@ -164,7 +164,7 @@ function GenerateToken() { </div> <button onClick={apiToken ? handleModal : handleSubmit} - className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white text-xs md:text-sm lg:text-base px-2 py-2 focus:outline-none" + className="op-btn op-btn-primary" > {apiToken ? "Regenerate Token" : "Generate Token"} </button> @@ -178,7 +178,7 @@ function GenerateToken() { "https://docs.opensignlabs.com/docs/API-docs/opensign-api-v-1" ) } - className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none" + className="op-btn op-btn-primary my-2" > View Docs </button> diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js index 382bf79b5..ff8de89ee 100644 --- a/apps/OpenSign/src/pages/Login.js +++ b/apps/OpenSign/src/pages/Login.js @@ -1063,7 +1063,7 @@ function Login() { } }; return ( - <div className="bg-white"> + <div> <Title title={"Login Page"} /> {state.loading && ( <div @@ -1096,8 +1096,12 @@ function Login() { )} {appInfo && appInfo.appId ? ( <> - <div aria-labelledby="loginHeading" role="region"> - <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-4 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> + <div + aria-labelledby="loginHeading" + role="region" + className="md:p-10 lg:p-16 " + > + <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> <div className="w-[250px] h-[66px] inline-block overflow-hidden"> {image && ( <img diff --git a/apps/OpenSign/src/pages/Managesign.js b/apps/OpenSign/src/pages/Managesign.js index 7c4acd5a3..d481e4292 100644 --- a/apps/OpenSign/src/pages/Managesign.js +++ b/apps/OpenSign/src/pages/Managesign.js @@ -224,13 +224,10 @@ const ManageSign = () => { setIsValue(true); }; return ( - <div className="relative h-full bg-white flex shadow rounded overflow-auto"> + <div className="relative h-full bg-base-100 text-base-content flex shadow rounded overflow-auto"> {isLoader && ( - <div className="absolute bg-black bg-opacity-75 z-50 w-full h-full flex justify-center items-center"> - <div - style={{ color: "#3dd3e0" }} - className="loader-37 text-[45px]" - ></div> + <div className="absolute bg-black text-[45px] text-[#3dd3e0] bg-opacity-75 z-50 w-full h-full flex justify-center items-center"> + <div className="loader-37 "></div> </div> )} {isSuccess && ( @@ -249,39 +246,13 @@ const ManageSign = () => { paddingRight: "10px" }} > - <div style={{ margin: 20 }}> - <div - style={{ - fontWeight: "700", - fontSize: 15, - color: "#000", - paddingBottom: 8 - }} - > - My Signature - </div> + <div className="m-[20px]"> + <div className="font-[700] text-[15px] pb-[8px]">My Signature</div> <div className="signBlock mt-4"> <div> - <div style={{ position: "relative" }}> - <div - style={{ - display: "flex", - flexDirection: "row", - justifyContent: "space-between", - width: "50%", - paddingLeft: 10 - }} - > - <div - style={{ - display: "flex", - flexDirection: "row", - justifyContent: "space-around", - alignItems: "center", - gap: 10, - marginBottom: 10 - }} - > + <div className="relative"> + <div className="flex flex-row justify-between w-1/2 pl-[10px]"> + <div className="flex flex-row justify-around items-center gap-[10px] mb-[10px]"> <> <span onClick={() => handleSignatureBtn()} @@ -307,24 +278,14 @@ const ManageSign = () => { /> </div> </div> - <div style={{ position: "relative" }}> + <div className="relative"> <div> {image ? ( - <div - style={{ - position: "relative", - border: "2px solid #888" - }} - className="signatureCanvas" - > + <div className="signatureCanvas relative border-[2px] border-[#888]"> <img alt="preview image" src={image} - style={{ - width: "100%", - height: "100%", - objectFit: "contain" - }} + className="w-full h-full object-contain" /> </div> ) : ( @@ -366,10 +327,10 @@ const ManageSign = () => { key === 0 && penColor === "blue" ? "2px solid blue" : key === 1 && penColor === "red" - ? "2px solid red" - : key === 2 && penColor === "black" - ? "2px solid black" - : "2px solid white" + ? "2px solid red" + : key === 2 && penColor === "black" + ? "2px solid black" + : "2px solid white" }} onClick={() => { if (key === 0) { @@ -474,10 +435,10 @@ const ManageSign = () => { key === 0 && initialPen === "blue" ? "2px solid blue" : key === 1 && initialPen === "red" - ? "2px solid red" - : key === 2 && initialPen === "black" - ? "2px solid black" - : "2px solid white" + ? "2px solid red" + : key === 2 && initialPen === "black" + ? "2px solid black" + : "2px solid white" }} onClick={() => { if (key === 0) { @@ -509,20 +470,11 @@ const ManageSign = () => { </div> </div> </div> - {/* {!warning && ( - <div className="warning signWarning" style={{ fontSize: 12 }}> - <i - className="fas fa-exclamation-circle" - style={{ color: "#fab005", fontSize: 15 }} - ></i>{" "} - Please upload signature/Image - </div> - )} */} </div> </div> <div style={{ paddingTop: 10 }}> <button - className="customBtn successBtn" + className="op-btn op-btn-primary" onClick={(e) => handleSubmit(e)} > save diff --git a/apps/OpenSign/src/pages/Opensigndrive.js b/apps/OpenSign/src/pages/Opensigndrive.js index a1678fcd9..0637e6526 100644 --- a/apps/OpenSign/src/pages/Opensigndrive.js +++ b/apps/OpenSign/src/pages/Opensigndrive.js @@ -11,8 +11,8 @@ import TourContentWithBtn from "../primitives/TourContentWithBtn"; import Tour from "reactour"; import axios from "axios"; -const DriveBody = React.lazy(() => - import("../components/opensigndrive/DriveBody") +const DriveBody = React.lazy( + () => import("../components/opensigndrive/DriveBody") ); const Loader = () => { return ( @@ -279,7 +279,8 @@ function Opensigndrive() { setNewFolderName(value); }; //function for create folder - const handleAddFolder = async () => { + const handleAddFolder = async (e) => { + e.preventDefault(); if (newFolderName) { setIsFolderLoader(true); const getParentObjId = folderName[folderName.length - 1]; @@ -545,411 +546,331 @@ function Opensigndrive() { } } return ( - <div style={{ backgroundColor: "white" }} className="folderComponent"> + <div className="bg-base-100 text-base-content rounded-xl w-full"> <Title title={"OpenSign™ Drive"} drive={true} /> - - <div> - <ModalUi - headerColor={"#dc3545"} - isOpen={isAlert.isShow} - title={"Alert"} - handleClose={() => { - setIsAlert({ - isShow: false, - alertMessage: "" - }); - }} - > - <div style={{ height: "100%", padding: 20 }}> - <p>{isAlert.alertMessage}</p> - - <div - style={{ - height: "1px", - backgroundColor: "#9f9f9f", - width: "100%", - marginTop: "15px", - marginBottom: "15px" - }} - ></div> - <button - onClick={() => - setIsAlert({ - isShow: false, - alertMessage: "" - }) - } - type="button" - className="finishBtn cancelBtn" + <ModalUi + headerColor={"#dc3545"} + isOpen={isAlert.isShow} + title={"Alert"} + handleClose={() => { + setIsAlert({ + isShow: false, + alertMessage: "" + }); + }} + > + <div className="h-full p-[20px] pb-[15px]"> + <p>{isAlert.alertMessage}</p> + <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div> + <button + onClick={() => + setIsAlert({ + isShow: false, + alertMessage: "" + }) + } + type="button" + className="op-btn op-btn-neutral op-btn-sm" + > + Close + </button> + </div> + </ModalUi> + <ModalUi + isOpen={isFolder} + title={"Add New Folder"} + handleClose={oncloseFolder} + > + <div className="h-full p-[20px] pt-[10px] pb-[15px]"> + {folderLoader ? ( + <div className="h-[200px] flex flex-col justify-center items-center"> + <img alt="loader" src={loader} className="w-[50px] h-[50px]" /> + <span className="text-[13px] text-[gray]">Loading...</span> + </div> + ) : ( + <form + onSubmit={handleAddFolder} + className="flex flex-col text-base-content" > - Close - </button> - </div> - </ModalUi> - <ModalUi - isOpen={isFolder} - title={"Add New Folder"} - handleClose={oncloseFolder} - > - <div style={{ height: "100%", padding: 20 }}> - {folderLoader ? ( + <label className="py-[8px] text-[15px] font-[400] mb-0"> + Name + <span className="text-[red]">*</span> + </label> + <input + required + className="op-input op-input-bordered op-input-sm" + type="text" + value={newFolderName} + onChange={(e) => handleFolderName(e)} + /> + <span className="text-[red] text-[12px] mt-[6px]">{error}</span> <div style={{ - height: "200px", - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center" + height: "1px", + backgroundColor: "#9f9f9f", + width: "100%", + marginTop: "15px", + marginBottom: "15px" }} - > - <img - alt="loader img" - src={loader} - style={{ width: "50px", height: "50px" }} - /> - <span style={{ fontSize: "13px", color: "gray" }}> - Loading... - </span> + ></div> + <div style={{ display: "flex", flexDirection: "row" }}> + <button + style={{ background: themeColor }} + type="submit" + className="finishBtn" + > + Add + </button> + <button + type="button" + className="finishBtn cancelBtn" + onClick={oncloseFolder} + > + Close + </button> </div> - ) : ( - <form - onSubmit={(e) => { - e.preventDefault(); - handleAddFolder(); - }} - style={{ display: "flex", flexDirection: "column" }} - > - <label - style={{ - margin: "10px 0px 10px 0px", - fontSize: "15px", - fontWeight: "400" - }} - > - Name - <span style={{ color: "red" }}>*</span> - </label> - - <input - required - className="form-control inputStyle" - type="text" - value={newFolderName} - onChange={(e) => handleFolderName(e)} - // className="addFolderInput" - /> - <span - style={{ color: "red", fontSize: "12px", marginTop: "6px" }} - > - {error} - </span> - <div - style={{ - height: "1px", - backgroundColor: "#9f9f9f", - width: "100%", - marginTop: "15px", - marginBottom: "15px" - }} - ></div> - <div style={{ display: "flex", flexDirection: "row" }}> - <button - style={{ background: themeColor }} - type="submit" - className="finishBtn" - > - Add - </button> - <button - type="button" - className="finishBtn cancelBtn" - onClick={oncloseFolder} - > - Close - </button> - </div> - </form> + </form> + )} + </div> + </ModalUi> + {isLoading.isLoad ? ( + <div className="flex flex-col justify-center items-center h-[100vh] w-full"> + <img alt="loader" src={loader} className="w-[80px] h-[80px]" /> + <span className="text-[13px] text-[gray]">{isLoading.message}</span> + </div> + ) : handleError ? ( + <div className="flex justify-center items-center h-[100vh] w-full"> + <span className="text-[20px] text-[gray]">{handleError}</span> + </div> + ) : ( + <> + <div className="flex flex-row justify-between items-center px-[25px] pt-[20px]"> + {tourData && ( + <Tour + onRequestClose={closeTour} + steps={tourData} + isOpen={isTour} + closeWithMask={false} + scrollOffset={-100} + rounded={5} + /> )} - </div> - </ModalUi> - - {isLoading.isLoad ? ( - <div - style={{ - display: "flex", - justifyContent: "center", - alignItems: "center", - height: "100vh", - width: "100%", - flexDirection: "column" - }} - > - <img - alt="loader img" - src={loader} - style={{ width: "80px", height: "80px" }} - /> - <span style={{ fontSize: "13px", color: "gray" }}> - {isLoading.message} - </span> - </div> - ) : handleError ? ( - <div - style={{ - display: "flex", - justifyContent: "center", - alignItems: "center", - height: "100vh", - width: "100%" - }} - > - <span style={{ fontSize: "20px", color: "gray" }}> - {handleError} - </span> - </div> - ) : ( - <> - <div className="folderContainer"> - {tourData && ( - <Tour - onRequestClose={closeTour} - steps={tourData} - isOpen={isTour} - closeWithMask={false} - scrollOffset={-100} - rounded={5} - /> - )} - + <div + data-tut="reactourFirst" + onMouseEnter={(e) => handleMouseEnter(e)} + ref={scrollRef} + className="w-full whitespace-nowrap cursor-pointer select-none overflow-x-auto" + > + {handleFolderTab(folderName)} + </div> + <div className="dropMenuBD"> <div - data-tut="reactourFirst" - onMouseEnter={(e) => handleMouseEnter(e)} - ref={scrollRef} - style={{ - width: "100%" - }} - className="folderPath" + id="folder-menu" + className={ + isNewFol ? "dropdown show dropDownStyle" : "dropdown" + } + onClick={() => setIsNewFol(!isNewFol)} > - {handleFolderTab(folderName)} - </div> - <div className="dropMenuBD"> - <div - id="folder-menu" - className={ - isNewFol ? "dropdown show dropDownStyle" : "dropdown" - } - onClick={() => setIsNewFol(!isNewFol)} - > - <div className="sort" data-tut="reactourSecond"> - <i - className="fa fa-plus-square" - aria-hidden="true" - style={{ fontSize: "25px", color: `${iconColor}` }} - ></i> - </div> - <div - className={ - isNewFol ? "dropdown-menu show" : "dropdown-menu" - } - aria-labelledby="dropdownMenuButton" - aria-expanded={isNewFol ? "true" : "false"} - > - {" "} - <div - style={{ - display: "flex", - flexDirection: "column" - }} - > - <span - className="dropdown-item itemColor" - onClick={() => setIsFolder(true)} - > - <i - style={{ marginRight: "5px" }} - className="fa fa-plus" - aria-hidden="true" - ></i> - Create folder - </span> - <span - className="dropdown-item itemColor" - onClick={() => navigate("/form/sHAnZphf69")} - > - <i - style={{ marginRight: "5px" }} - className="fas fa-pen-nib" - ></i> - Sign Yourself - </span> - <span - className="dropdown-item itemColor" - onClick={() => navigate("/form/8mZzFxbG1z")} - > - {" "} - <i - style={{ marginRight: "5px" }} - className="fa fa-file-signature" - ></i> - Request Signatures{" "} - </span> - </div> - </div> + <div className="sort" data-tut="reactourSecond"> + <i + className="fa fa-plus-square" + aria-hidden="true" + style={{ fontSize: "25px", color: `${iconColor}` }} + ></i> </div> <div - id="menu-container" - className={isShowSort ? "dropdown show" : "dropdown"} - onClick={() => setIsShowSort(!isShowSort)} + className={isNewFol ? "dropdown-menu show" : "dropdown-menu"} + aria-labelledby="dropdownMenuButton" + aria-expanded={isNewFol ? "true" : "false"} > - <div - data-tut="reactourThird" - className=" sort " - data-toggle="dropdown" - > - <i - className="fa fa-sort-amount-asc" - aria-hidden="true" - style={{ - marginRight: "5px", - fontSize: "14px", - color: `${iconColor}` - }} - ></i> + <div className="flex flex-col"> <span - style={{ - fontSize: "15px", - color: `${iconColor}` - }} + className="dropdown-item itemColor" + onClick={() => setIsFolder(true)} > - {selectedSort} + <i + style={{ marginRight: "5px" }} + className="fa fa-plus" + aria-hidden="true" + ></i> + Create folder + </span> + <span + className="dropdown-item itemColor" + onClick={() => navigate("/form/sHAnZphf69")} + > + <i + style={{ marginRight: "5px" }} + className="fas fa-pen-nib" + ></i> + Sign Yourself + </span> + <span + className="dropdown-item itemColor" + onClick={() => navigate("/form/8mZzFxbG1z")} + > + <i + style={{ marginRight: "5px" }} + className="fa fa-file-signature" + ></i> + Request Signatures{" "} </span> </div> - <div - className={ - isShowSort ? "dropdown-menu show" : "dropdown-menu" - } - aria-labelledby="dropdownMenuButton" - aria-expanded={isShowSort ? "true" : "false"} + </div> + </div> + <div + id="menu-container" + className={isShowSort ? "dropdown show" : "dropdown"} + onClick={() => setIsShowSort(!isShowSort)} + > + <div + data-tut="reactourThird" + className=" sort " + data-toggle="dropdown" + > + <i + className="fa fa-sort-amount-asc" + aria-hidden="true" + style={{ + marginRight: "5px", + fontSize: "14px", + color: `${iconColor}` + }} + ></i> + <span + style={{ + fontSize: "15px", + color: `${iconColor}` + }} > - {sortingValue.map((value, ind) => { - return ( - <span - key={ind} - onClick={() => { - setSelectedSort(value); - sortingData(value, null, pdfData); - }} - className="dropdown-item itemColor" - style={{ - paddingLeft: selectedSort !== value && "33px" - }} - > - {selectedSort === value && ( - <i - className="fa fa-check" - aria-hidden="true" - style={{ marginRight: "5px" }} - ></i> - )} - {value} - </span> - ); - })} - - <hr className="hrStyle" /> - {sortOrder.map((order, ind) => { - return ( - <span - key={ind} - onClick={() => { - setSortingOrder(order); - sortingData(null, order, pdfData); - }} - className="dropdown-item itemColor" - style={{ - paddingLeft: sortingOrder !== order && "33px" - }} - > - {sortingOrder === order && ( - <i - className="fa fa-check" - aria-hidden="true" - style={{ marginRight: "5px" }} - ></i> - )} - {order} - </span> - ); - })} - </div> + {selectedSort} + </span> </div> + <div + className={ + isShowSort ? "dropdown-menu show" : "dropdown-menu" + } + aria-labelledby="dropdownMenuButton" + aria-expanded={isShowSort ? "true" : "false"} + > + {sortingValue.map((value, ind) => { + return ( + <span + key={ind} + onClick={() => { + setSelectedSort(value); + sortingData(value, null, pdfData); + }} + className="dropdown-item itemColor" + style={{ + paddingLeft: selectedSort !== value && "33px" + }} + > + {selectedSort === value && ( + <i + className="fa fa-check" + aria-hidden="true" + style={{ marginRight: "5px" }} + ></i> + )} + {value} + </span> + ); + })} - <div> - {isList ? ( - <div className="sort" onClick={() => setIsList(!isList)}> - <i - onClick={() => setIsList(!isList)} - className="fa fa-th-large" - style={{ fontSize: "24px", color: `${iconColor}` }} - aria-hidden="true" - ></i> - </div> - ) : ( - <div - data-tut="reactourForth" - className="sort" + <hr className="hrStyle" /> + {sortOrder.map((order, ind) => { + return ( + <span + key={ind} + onClick={() => { + setSortingOrder(order); + sortingData(null, order, pdfData); + }} + className="dropdown-item itemColor" + style={{ + paddingLeft: sortingOrder !== order && "33px" + }} + > + {sortingOrder === order && ( + <i + className="fa fa-check" + aria-hidden="true" + style={{ marginRight: "5px" }} + ></i> + )} + {order} + </span> + ); + })} + </div> + </div> + + <div> + {isList ? ( + <div className="sort" onClick={() => setIsList(!isList)}> + <i onClick={() => setIsList(!isList)} - > - <i - className="fa fa-list" - aria-hidden="true" - style={{ fontSize: "23px", color: `${iconColor}` }} - ></i> - </div> - )} - </div> + className="fa fa-th-large" + style={{ fontSize: "24px", color: `${iconColor}` }} + aria-hidden="true" + ></i> + </div> + ) : ( + <div + data-tut="reactourForth" + className="sort" + onClick={() => setIsList(!isList)} + > + <i + className="fa fa-list" + aria-hidden="true" + style={{ fontSize: "23px", color: `${iconColor}` }} + ></i> + </div> + )} </div> </div> + </div> - {pdfData && pdfData.length === 0 ? ( - <div - style={{ - display: "flex", - justifyContent: "center", - alignItems: "center", - height: "50vh", - width: "100%" - }} - > - <span style={{ fontWeight: "bold" }}>No Data Found!</span> - </div> - ) : ( - <div data-tut="reactourFifth"> - <React.Suspense fallback={<Loader />}> - <DriveBody - dataTutSixth="reactourSixth" - dataTutSeventh="reactourSeventh" - pdfData={pdfData} - setFolderName={setFolderName} - setIsLoading={setIsLoading} - setDocId={setDocId} - getPdfDocumentList={getPdfDocumentList} - isDocId={docId} - setPdfData={setPdfData} - isList={isList} - setIsAlert={setIsAlert} - setSkip={setSkip} - sortingData={sortingData} - /> - {loading && ( - <div style={{ textAlign: "center" }}>Loading...</div> - )} - </React.Suspense> - </div> - )} - </> - )} - </div> + {pdfData && pdfData.length === 0 ? ( + <div + style={{ + display: "flex", + justifyContent: "center", + alignItems: "center", + height: "50vh", + width: "100%" + }} + > + <span style={{ fontWeight: "bold" }}>No Data Found!</span> + </div> + ) : ( + <div data-tut="reactourFifth"> + <React.Suspense fallback={<Loader />}> + <DriveBody + dataTutSixth="reactourSixth" + dataTutSeventh="reactourSeventh" + pdfData={pdfData} + setFolderName={setFolderName} + setIsLoading={setIsLoading} + setDocId={setDocId} + getPdfDocumentList={getPdfDocumentList} + isDocId={docId} + setPdfData={setPdfData} + isList={isList} + setIsAlert={setIsAlert} + setSkip={setSkip} + sortingData={sortingData} + /> + {loading && ( + <div className="text-center pb-[20px]">Loading...</div> + )} + </React.Suspense> + </div> + )} + </> + )} </div> ); } diff --git a/apps/OpenSign/src/pages/Signup.js b/apps/OpenSign/src/pages/Signup.js index 24b437d47..1064e6998 100644 --- a/apps/OpenSign/src/pages/Signup.js +++ b/apps/OpenSign/src/pages/Signup.js @@ -501,44 +501,24 @@ const Signup = () => { setSpecialCharValid(/[!@#$%^&*()\-_=+{};:,<.>]/.test(newPassword)); }; return ( - <div className="bg-white"> + <div className=""> {state.loading && ( - <div - style={{ - position: "fixed", - width: "100vw", - height: "100vh", - backgroundColor: "rgba(0,0,0,0.2)", - top: 0, - left: 0, - zIndex: 2 - }} - > - <div - style={{ - position: "fixed", - fontSize: "50px", - color: "#3ac9d6", - top: "50%", - left: "45%" - }} - className="loader-37" - ></div> + <div className="fixed w-[100vw] h-[100vh] top-0 left-0 z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]"> + <div className="loader-37 fixed text-[50px] top-[50%] left-[45%]"></div> </div> )} <Title title={"Signup page"} /> - {appInfo && appInfo.applogo ? ( - <div> - <div className="md:m-10 lg:m-16 md:p-4 lg:p-10 p-5 bg-[#ffffff] md:border-[1px] md:border-gray-400 "> + <div className="md:p-10 lg:p-16"> + <div className="md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 "> <div className="w-[250px] h-[66px] inline-block overflow-hidden"> {image && ( <img src={image} className="object-contain h-full" alt="logo" /> )} </div> <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2"> - <div className=""> + <div> <form onSubmit={handleSubmit}> <h2 className="text-[30px] mt-6">Create Account !</h2> <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4"> diff --git a/apps/OpenSign/src/pages/UserProfile.js b/apps/OpenSign/src/pages/UserProfile.js index a603806e0..b8b261fff 100644 --- a/apps/OpenSign/src/pages/UserProfile.js +++ b/apps/OpenSign/src/pages/UserProfile.js @@ -292,37 +292,25 @@ function UserProfile() { setPublicUserName(extendUser && extendUser?.[0]?.UserName); setCompany(extendUser && extendUser?.[0]?.Company); setJobTitle(extendUser?.[0]?.JobTitle); + setIsDisableDocId(extendUser?.[0]?.HeaderDocId); }; return ( <React.Fragment> <Title title={"Profile"} /> {isLoader ? ( - <div - style={{ - height: "100vh", - display: "flex", - alignItems: "center", - justifyContent: "center" - }} - > - <div - style={{ - fontSize: "45px", - color: "#3dd3e0" - }} - className="loader-37" - ></div> + <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> ) : ( <div className="flex justify-center items-center w-full relative"> {userNameError && ( <div - className={`z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`} + className={`z-[1000] fixed top-[50%] transform border-[1px] text-sm border-[#f0a8a8] bg-[#f4bebe] text-[#c42121] rounded py-[.75rem] px-[1.25rem]`} > {userNameError} </div> )} - <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded w-[450px]"> + <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded-xl w-[450px]"> <div className="flex flex-col justify-center items-center my-4"> <div className="w-[200px] h-[200px] overflow-hidden rounded-full"> <img @@ -334,7 +322,7 @@ function UserProfile() { {editmode && ( <input type="file" - className="max-w-[270px] text-sm py-1 px-2 mt-4 border-[1px] border-[#15b4e9] rounded" + className="op-file-input op-file-input-bordered op-file-input-sm max-w-[270px] mt-4 text-sm" accept="image/png, image/gif, image/jpeg" onChange={(e) => { let files = e.target.files; @@ -360,7 +348,7 @@ function UserProfile() { <ul className="w-full flex flex-col p-2 text-sm"> <li className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${ - editmode ? "py-1" : "py-2" + editmode ? "py-1.5" : "py-2" }`} > <span className="font-semibold">Name:</span>{" "} @@ -368,7 +356,7 @@ function UserProfile() { <input type="text" value={name} - className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded" + className="op-input op-input-bordered op-input-sm text-sm" onChange={(e) => SetName(e.target.value)} /> ) : ( @@ -377,14 +365,14 @@ function UserProfile() { </li> <li className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${ - editmode ? "py-1" : "py-2" + editmode ? "py-1.5" : "py-2" }`} > <span className="font-semibold">Phone:</span>{" "} {editmode ? ( <input type="text" - className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded" + className="op-input op-input-bordered op-input-sm text-sm" onChange={(e) => SetPhone(e.target.value)} value={Phone} /> @@ -398,7 +386,7 @@ function UserProfile() { </li> <li className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${ - editmode ? "py-1" : "py-2" + editmode ? "py-1.5" : "py-2" }`} > <span className="font-semibold">Company:</span>{" "} @@ -406,7 +394,7 @@ function UserProfile() { <input type="text" value={company} - className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] rounded" + className="op-input op-input-bordered op-input-sm text-sm" onChange={(e) => setCompany(e.target.value)} /> ) : ( @@ -415,7 +403,7 @@ function UserProfile() { </li> <li className={`flex justify-between items-center border-t-[1px] border-gray-300 break-all ${ - editmode ? "py-1" : "py-2" + editmode ? "py-1.5" : "py-2" }`} > <span className="font-semibold">Job title:</span>{" "} @@ -423,8 +411,7 @@ function UserProfile() { <input type="text" value={jobTitle} - className="py-1 px-2 text-sm op-input op-input-bordered rounded-xl" - // className="py-1 px-2 text-sm border-[1px] border-[#15b4e9] text-black rounded" + className="op-input op-input-bordered op-input-sm text-sm" onChange={(e) => setJobTitle(e.target.value)} /> ) : ( @@ -460,7 +447,7 @@ function UserProfile() { all your publicly set templates.`} /> </span> - <div className="flex items-center"> + <div className="flex text-xs items-center"> <span>opensign-me.vercel.app/</span> {editmode ? ( <input @@ -468,14 +455,14 @@ function UserProfile() { value={publicUserName} disabled={!editmode} placeholder="enter user name" - className="border-[1px] border-gray-200 rounded-[3px]" + className="op-input op-input-bordered op-input-xs" /> ) : ( <input value={extendUser?.[0]?.UserName} disabled placeholder="enter user name" - className="border-[1px] border-gray-200 rounded-[3px]" + className="op-input op-input-bordered op-input-xs" /> )} </div> @@ -495,27 +482,23 @@ function UserProfile() { url={ "https://docs.opensignlabs.com/docs/help/Settings/disabledocumentid" } - />{" "} + /> {!isSubscribe && isEnableSubscription && <Upgrade />} - </span>{" "} + </span> <label - className={ + className={`${ isSubscribe || !isEnableSubscription - ? `${ - editmode ? "cursor-pointer" : "" - } relative inline-flex items-center mb-0` - : "relative inline-flex items-center mb-0 pointer-events-none opacity-50" - } + ? `${editmode ? "cursor-pointer" : ""}` + : "pointer-events-none opacity-50" + } relative block items-center mb-0`} > <input disabled={editmode ? false : true} + type="checkbox" + className="op-toggle transition-all checked:[--tglbg:#3368ff] checked:bg-white" checked={isDisableDocId} onChange={handleDisableDocId} - type="checkbox" - value="" - className="sr-only peer" /> - <div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-1 peer-focus:ring-black rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-black peer-checked:bg-blue-600"></div> </label> </div> {!isEnableSubscription && ( @@ -527,44 +510,27 @@ function UserProfile() { )} </li> </ul> - <div className="flex justify-center pt-2 pb-3 md:pt-3 md:pb-4"> - {editmode ? ( - <button - type="button" - onClick={handleSubmit} - className="rounded shadow focus:outline-none border-[2px] border-[#15b4e9] bg-white text-[#15b4e9] px-4 py-2 mr-4" - > - Save - </button> - ) : ( - <button - type="button" - onClick={() => { - setEditMode(true); - }} - className="rounded shadow focus:outline-none text-white bg-[#e7505a] px-4 py-2 mr-4" - > - Edit - </button> - )} + <div className="flex justify-center gap-2 pt-2 pb-3 md:pt-3 md:pb-4"> <button type="button" - onClick={() => { - if (editmode) { - handleCancel(); - } else { - navigate("/changepassword"); - } - }} - className={`rounded shadow focus:outline-none text-white bg-[#3598dc] ${ - editmode ? "px-4 py-2 " : "p-2" - }`} + onClick={(e) => + editmode ? handleSubmit(e) : setEditMode(true) + } + className="op-btn op-btn-primary" + > + {editmode ? "Save" : "Edit"} + </button> + <button + type="button" + onClick={() => + editmode ? handleCancel() : navigate("/changepassword") + } + className="op-btn op-btn-neutral" > {editmode ? "Cancel" : "Change Password"} </button> </div> </div> - {isVerifyModal && ( <ModalUi isOpen @@ -572,21 +538,8 @@ function UserProfile() { handleClose={handleCloseVerifyModal} > {otpLoader ? ( - <div - style={{ - height: "150px", - display: "flex", - alignItems: "center", - justifyContent: "center" - }} - > - <div - style={{ - fontSize: "45px", - color: "#3dd3e0" - }} - className="loader-37" - ></div> + <div className="h-[150px] flex justify-center items-center text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> ) : ( <form onSubmit={(e) => handleVerifyEmail(e)}> diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js index c32e5b9d7..e8106bb85 100644 --- a/apps/OpenSign/src/pages/Webhook.js +++ b/apps/OpenSign/src/pages/Webhook.js @@ -101,24 +101,11 @@ function Webhook() { {isErr && <Alert type="danger">Something went wrong!</Alert>} {isLoader ? ( - <div - style={{ - height: "100vh", - display: "flex", - alignItems: "center", - justifyContent: "center" - }} - > - <div - style={{ - fontSize: "45px", - color: "#3dd3e0" - }} - className="loader-37" - ></div> + <div className="h-[100vh] flex justify-center items-center text-[45px] text-[#3dd3e0]"> + <div className="loader-37"></div> </div> ) : ( - <div className="bg-white flex flex-col justify-center shadow rounded"> + <div className="bg-base-100 text-base-content flex flex-col justify-center shadow rounded"> {!isEnableSubscription && <PremiumAlertHeader />} <h1 className={"ml-4 mt-3 mb-2 font-semibold"}> OpenSign™ Webhook{" "} @@ -146,7 +133,7 @@ function Webhook() { <button type="button" onClick={handleModal} - className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-4 py-2 text-xs md:text-base focus:outline-none" + className="op-btn op-btn-primary " > {webhook ? "Update Webhook" : "Add Webhook"} </button> @@ -161,7 +148,7 @@ function Webhook() { "https://docs.opensignlabs.com/docs/API-docs/save-update-webhook" ) } - className="rounded hover:bg-[#15b4e9] border-[1px] my-2 border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none" + className="op-btn op-btn-primary my-2" > View Docs </button> diff --git a/apps/OpenSign/src/styles/opensigndrive.css b/apps/OpenSign/src/styles/opensigndrive.css index 76b414cce..9e9f5d8ee 100644 --- a/apps/OpenSign/src/styles/opensigndrive.css +++ b/apps/OpenSign/src/styles/opensigndrive.css @@ -208,7 +208,6 @@ height: 100px; margin: 10px; display: inline-block; - cursor: pointer; } diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js index 721bb2f8d..1cefffd4c 100644 --- a/apps/OpenSign/tailwind.config.js +++ b/apps/OpenSign/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { }, plugins: [require("daisyui")], daisyui: { - themes: ["emerald", "dark"], + themes: true, prefix: "op-" } };