mirror of
https://github.com/OpenSignLabs/OpenSign.git
synced 2026-08-17 21:25:54 +02:00
style: change ui design of popups
This commit is contained in:
prafull-opensignlabs
@@ -170,14 +170,8 @@ const BulkSendUi = (props) => {
|
||||
return (
|
||||
<>
|
||||
{isSubmit && (
|
||||
<div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40">
|
||||
<div
|
||||
style={{
|
||||
fontSize: "45px",
|
||||
color: "#3dd3e0"
|
||||
}}
|
||||
className="loader-37 "
|
||||
></div>
|
||||
<div className="absolute z-[999] h-full w-full flex justify-center items-center bg-black bg-opacity-40 text-[45px] text-[#3dd3e0]">
|
||||
<div className="loader-37"></div>
|
||||
</div>
|
||||
)}
|
||||
{props.Placeholders?.length > 0 ? (
|
||||
@@ -185,14 +179,14 @@ const BulkSendUi = (props) => {
|
||||
<>
|
||||
{props.Placeholders?.some((x) => !x.signerObjId) ? (
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className=" min-h-max max-h-[250px] overflow-y-auto">
|
||||
<div className="min-h-max max-h-[250px] overflow-y-auto">
|
||||
{forms?.map((form, index) => (
|
||||
<div
|
||||
key={form.Id}
|
||||
className="p-3 rounded-xl border-[1px] border-gray-400 m-4 bg-white text-black grid grid-cols-1 md:grid-cols-2 gap-2 relative"
|
||||
className="p-3 op-card border-[1px] border-gray-400 m-4 bg-base-200 text-base-content grid grid-cols-1 md:grid-cols-2 gap-2 relative"
|
||||
>
|
||||
{form?.fields?.map((field, fieldIndex) => (
|
||||
<div className="flex flex-col " key={field.fieldId}>
|
||||
<div className="flex flex-col" key={field.fieldId}>
|
||||
<label>{field.label}</label>
|
||||
<SuggestionInput
|
||||
required
|
||||
@@ -220,13 +214,13 @@ const BulkSendUi = (props) => {
|
||||
<div className="flex flex-col mx-4 mb-4 gap-3">
|
||||
<button
|
||||
onClick={handleAddForm}
|
||||
className="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
|
||||
className="op-btn op-btn-primary focus:outline-none"
|
||||
>
|
||||
<i className="fa-solid fa-plus"></i> <span>Add new</span>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-[#32a3ac] p-2 text-white w-full rounded-full focus:outline-none"
|
||||
className="op-btn op-btn-secondary focus:outline-none"
|
||||
>
|
||||
<i className="fa-solid fa-paper-plane"></i>{" "}
|
||||
<span>Send</span>
|
||||
|
||||
@@ -1,16 +1,12 @@
|
||||
import React from "react";
|
||||
import { rejectBtn, submitBtn, themeColor } from "../../constant/const";
|
||||
|
||||
function VerifyEmail(props) {
|
||||
return (
|
||||
<div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
|
||||
<div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
|
||||
<div
|
||||
style={{ backgroundColor: themeColor }}
|
||||
className=" text-white p-[10px] rounded-t"
|
||||
>
|
||||
<dialog className="op-modal op-modal-open absolute z-[1999]">
|
||||
<div className="md:w-[40%] w-[80%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
|
||||
<h3 className="font-bold text-lg pt-[15px] px-[20px] text-base-content">
|
||||
OTP verification
|
||||
</div>
|
||||
</h3>
|
||||
{props.isVerifyModal ? (
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
@@ -18,25 +14,24 @@ function VerifyEmail(props) {
|
||||
props.handleVerifyEmail(e);
|
||||
}}
|
||||
>
|
||||
<div className="px-6 py-3">
|
||||
<div className="px-6 py-3 text-base-content">
|
||||
<label className="mb-2">Enter OTP</label>
|
||||
<input
|
||||
required
|
||||
type="tel"
|
||||
pattern="[0-9]{4}"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
|
||||
placeholder="Enter OTP received over email"
|
||||
value={props.otp}
|
||||
onChange={(e) => props.setOtp(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="px-6 my-3">
|
||||
<button type="submit" className={submitBtn}>
|
||||
<button type="submit" className="op-btn op-btn-primary">
|
||||
Verify
|
||||
</button>
|
||||
<button
|
||||
className={`${rejectBtn} ml-2`}
|
||||
className="op-btn op-btn-secondary ml-2"
|
||||
onClick={(e) => props.handleResend(e)}
|
||||
>
|
||||
Resend
|
||||
@@ -44,29 +39,15 @@ function VerifyEmail(props) {
|
||||
</div>
|
||||
</form>
|
||||
) : props.otpLoader ? (
|
||||
<div
|
||||
style={{
|
||||
height: "150px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "45px",
|
||||
color: "#3dd3e0"
|
||||
}}
|
||||
className="loader-37"
|
||||
></div>
|
||||
<div className="h-[150px] flex items-center justify-center text-[45px] text-[#3dd3e0]">
|
||||
<div className="loader-37"></div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="px-6 py-3">
|
||||
<p className="mb-2">Please verify your email !</p>
|
||||
<hr />
|
||||
<div className="px-6 py-3 text-base-content">
|
||||
<p className="mb-2 text-sm">Please verify your email !</p>
|
||||
<div className="px-0 mt-3">
|
||||
<button
|
||||
className={submitBtn}
|
||||
className="op-btn op-btn-primary"
|
||||
type="submit"
|
||||
onClick={() => {
|
||||
props.handleVerifyBtn();
|
||||
@@ -78,7 +59,7 @@ function VerifyEmail(props) {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -61,24 +61,24 @@ const SuggestionInput = (props) => {
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div className="flex flex-col items-center relative">
|
||||
<div className="flex flex-col items-center relative text-base-content">
|
||||
<input
|
||||
type={props?.type || "text"}
|
||||
value={inputValue}
|
||||
onChange={handleInputChange}
|
||||
placeholder="Enter Email..."
|
||||
className="w-full border-[1px] border-gray-400 p-2 text-black rounded lowercase"
|
||||
className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs lowercase"
|
||||
required={props.required}
|
||||
/>
|
||||
{showSuggestions && (
|
||||
<ul
|
||||
ref={ref}
|
||||
className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-white border border-gray-300 rounded shadow-md"
|
||||
className="absolute z-50 left-0 top-[2.55rem] w-full max-h-[100px] overflow-auto bg-base-200 border border-gray-300 rounded shadow-md"
|
||||
>
|
||||
{suggestions.map((suggestion, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-gray-100"
|
||||
className="py-2 px-2 w-full text-sm cursor-pointer hover:bg-base-300"
|
||||
onClick={() => handleSuggestionClick(suggestion)}
|
||||
>
|
||||
{suggestion.Email}
|
||||
|
||||
@@ -4,7 +4,7 @@ import axios from "axios";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Alert from "../primitives/Alert";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
|
||||
import { isEnableSubscription } from "../constant/const";
|
||||
import { checkIsSubscribed, copytoData, openInNewTab } from "../constant/Utils";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
@@ -219,7 +219,7 @@ function GenerateToken() {
|
||||
handleClose={handleModal}
|
||||
>
|
||||
<div className="m-[20px]">
|
||||
<div className="text-lg font-normal text-black">
|
||||
<div className="text-lg font-normal text-base-content">
|
||||
Are you sure you want to regenerate token it will expire old
|
||||
token?
|
||||
</div>
|
||||
@@ -227,11 +227,14 @@ function GenerateToken() {
|
||||
<div className="flex items-center mt-3 gap-2 text-white">
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
className={submitBtn + "ml-[2px]"}
|
||||
className="op-btn op-btn-primary ml-[2px]"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button onClick={handleModal} className={rejectBtn}>
|
||||
<button
|
||||
onClick={handleModal}
|
||||
className="op-btn op-btn-secondary"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@ import sanitizeFileName from "../primitives/sanitizeFileName";
|
||||
import axios from "axios";
|
||||
import PremiumAlertHeader from "../primitives/PremiumAlertHeader";
|
||||
import Tooltip from "../primitives/Tooltip";
|
||||
import { isEnableSubscription, rejectBtn, submitBtn } from "../constant/const";
|
||||
import { isEnableSubscription } from "../constant/const";
|
||||
import { checkIsSubscribed, handleSendOTP } from "../constant/Utils";
|
||||
import Upgrade from "../primitives/Upgrade";
|
||||
import ModalUi from "../primitives/ModalUi";
|
||||
@@ -549,25 +549,24 @@ function UserProfile() {
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={(e) => handleVerifyEmail(e)}>
|
||||
<div className="px-6 py-3">
|
||||
<div className="px-6 py-3 text-base-content">
|
||||
<label className="mb-2">Enter OTP</label>
|
||||
<input
|
||||
required
|
||||
type="tel"
|
||||
pattern="[0-9]{4}"
|
||||
className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
|
||||
className="w-full op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content text-xs"
|
||||
placeholder="Enter OTP received over email"
|
||||
value={otp}
|
||||
onChange={(e) => setOtp(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<div className="px-6 my-3">
|
||||
<button type="submit" className={submitBtn}>
|
||||
<div className="px-6 mb-3">
|
||||
<button type="submit" className="op-btn op-btn-primary">
|
||||
Verify
|
||||
</button>
|
||||
<button
|
||||
className={`${rejectBtn} ml-2`}
|
||||
className="op-btn op-btn-secondary ml-2"
|
||||
onClick={(e) => handleResend(e)}
|
||||
>
|
||||
Resend
|
||||
|
||||
@@ -703,15 +703,17 @@ const ReportTable = (props) => {
|
||||
|
||||
return (
|
||||
<div className="flex flex-row gap-2 justify-center items-center">
|
||||
<div className="flex justify-center items-center bg-gray-200 text-xs text-black shadow rounded-full w-[65px] h-[23px] cursor-default">
|
||||
<div className="flex justify-center items-center bg-base-300 text-base-content shadow-md op-card w-[65px] h-[32px] cursor-default">
|
||||
{audit?.Activity ? audit?.Activity : "Awaited"}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleNextBtn(user, doc)}
|
||||
className={`${
|
||||
audit?.Activity !== "Signed" ? "bg-[#32a3ac] shadow-md" : ""
|
||||
} flex justify-center items-center text-center text-white rounded w-[60px] h-[30px]`}
|
||||
className={
|
||||
audit?.Activity !== "Signed"
|
||||
? "op-btn op-btn-primary op-btn-sm"
|
||||
: " text-transparent cursor-default pointer-events-none"
|
||||
}
|
||||
disabled={audit?.Activity === "Signed"}
|
||||
>
|
||||
{audit?.Activity !== "Signed" && "Resend"}
|
||||
@@ -916,7 +918,7 @@ const ReportTable = (props) => {
|
||||
<div className="loader-37"></div>
|
||||
</div>
|
||||
)}
|
||||
<div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content rounded-xl">
|
||||
<div className="p-2 overflow-x-scroll w-full bg-base-100 text-base-content op-card shadow-lg">
|
||||
{/* {isCelebration && (
|
||||
<div className="relative z-[1000]">
|
||||
<Confetti width={window.innerWidth} height={window.innerHeight} />
|
||||
@@ -945,7 +947,7 @@ const ReportTable = (props) => {
|
||||
<i
|
||||
data-tut="reactourFirst"
|
||||
onClick={() => navigate("/form/template")}
|
||||
className="fa-solid fa-square-plus text-sky-400 text-[25px]"
|
||||
className="fa-solid fa-square-plus text-accent text-[25px]"
|
||||
></i>
|
||||
)}
|
||||
{props.form && (
|
||||
@@ -953,7 +955,7 @@ const ReportTable = (props) => {
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleContactFormModal()}
|
||||
>
|
||||
<i className="fa-solid fa-square-plus text-sky-400 text-[25px]"></i>
|
||||
<i className="fa-solid fa-square-plus text-accent text-[25px]"></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -1048,7 +1050,7 @@ const ReportTable = (props) => {
|
||||
<td className="px-4 py-2">
|
||||
<button
|
||||
onClick={() => handleDownload(item)}
|
||||
className="text-[blue] hover:text-[blue] hover:underline focus:outline-none"
|
||||
className="op-link op-link-primary"
|
||||
title={"Download"}
|
||||
>
|
||||
{item?.URL ? "Download" : "-"}
|
||||
@@ -1061,7 +1063,7 @@ const ReportTable = (props) => {
|
||||
{item?.Placeholders ? (
|
||||
<button
|
||||
onClick={() => handleViewSigners(item)}
|
||||
className="text-[blue] hover:underline focus:outline-none"
|
||||
className="op-link op-link-primary"
|
||||
>
|
||||
View
|
||||
</button>
|
||||
@@ -1228,10 +1230,11 @@ const ReportTable = (props) => {
|
||||
</td>
|
||||
)} */}
|
||||
<td className="px-2 py-2">
|
||||
<div className="text-white flex flex-row gap-x-2 gap-y-1 justify-start items-center">
|
||||
<div className="text-base-content flex flex-row gap-x-2 gap-y-1 justify-start items-center">
|
||||
{props.actions?.length > 0 &&
|
||||
props.actions.map((act, index) => (
|
||||
<button
|
||||
<div
|
||||
role="button"
|
||||
data-tut={act?.selector}
|
||||
key={index}
|
||||
onClick={() => handleActionBtn(act, item)}
|
||||
@@ -1252,29 +1255,30 @@ const ReportTable = (props) => {
|
||||
)}
|
||||
{isOption[item.objectId] &&
|
||||
act.action === "option" && (
|
||||
<div className="absolute -right-2 top-5 p-1.5 bg-white text-nowrap rounded shadow-md z-[20] overflow-hidden">
|
||||
<ul className="absolute -right-2 top-6 z-[20] op-dropdown-content op-menu shadow bg-base-100 text-base-content rounded-box ">
|
||||
{act.subaction?.map((subact) => (
|
||||
<div
|
||||
<li
|
||||
key={subact.btnId}
|
||||
className="hover:bg-gray-300 rounded cursor-pointer px-2 py-1.5 flex justify-start items-center text-black"
|
||||
onClick={() =>
|
||||
handleActionBtn(subact, item)
|
||||
}
|
||||
title={subact.hoverLabel}
|
||||
>
|
||||
<i
|
||||
className={`${subact.btnIcon} mr-1.5`}
|
||||
></i>
|
||||
{subact.btnLabel && (
|
||||
<span className="ml-[4px] text-[13px] capitalize font-medium">
|
||||
{subact.btnLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span>
|
||||
<i
|
||||
className={`${subact.btnIcon} mr-1.5`}
|
||||
></i>
|
||||
{subact.btnLabel && (
|
||||
<span className="text-[13px] capitalize font-medium">
|
||||
{subact.btnLabel}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{isViewShare[item.objectId] && (
|
||||
|
||||
@@ -13,30 +13,32 @@ const ModalUi = ({
|
||||
reduceWidth,
|
||||
showHeaderMessage
|
||||
}) => {
|
||||
const headerColor = headColor ? `text-${headColor}` : "text-base-content";
|
||||
return (
|
||||
<>
|
||||
{isOpen && (
|
||||
<div className="fixed z-[999] top-0 left-0 w-[100%] h-[100%] bg-black bg-opacity-[75%]">
|
||||
<dialog className="op-modal op-modal-open">
|
||||
<div
|
||||
className={`${
|
||||
reduceWidth || "md:min-w-[500px]"
|
||||
} fixed z-[1000] top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-base-100 rounded-xl shadow-md max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar `}
|
||||
} op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
|
||||
>
|
||||
{showHeader && (
|
||||
<div
|
||||
className="flex justify-between rounded-t items-center py-[15px] px-[20px] text-white"
|
||||
style={{ background: headColor ? headColor : "#32a3ac" }}
|
||||
>
|
||||
<div className="text-[1.2rem] font-normal">{title}</div>
|
||||
<>
|
||||
<h3
|
||||
className={`${headerColor} font-bold text-lg pt-[15px] px-[20px]`}
|
||||
>
|
||||
{title}
|
||||
</h3>
|
||||
{showClose && (
|
||||
<div
|
||||
className="text-[1.5rem] cursor-pointer"
|
||||
<button
|
||||
className="op-btn op-btn-sm op-btn-circle op-btn-ghost absolute right-2 top-2"
|
||||
onClick={() => handleClose && handleClose()}
|
||||
>
|
||||
×
|
||||
</div>
|
||||
✕
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isEnableSubscription && showHeaderMessage && (
|
||||
<PremiumAlertHeader
|
||||
@@ -47,7 +49,7 @@ const ModalUi = ({
|
||||
)}
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
import "../styles/signature.css";
|
||||
import { rejectBtn } from "../constant/const";
|
||||
|
||||
function CustomModal({
|
||||
show,
|
||||
@@ -12,12 +11,12 @@ function CustomModal({
|
||||
}) {
|
||||
return (
|
||||
show && (
|
||||
<div className="bg-black bg-opacity-[75%] absolute z-[999] flex flex-col items-center justify-center w-full h-full rounded">
|
||||
<div className="bg-white rounded outline-none md:w-[40%] w-[80%]">
|
||||
<div className="bg-[#de4337] text-white p-[10px] rounded-t">
|
||||
<dialog className="op-modal op-modal-open absolute z-[1999]">
|
||||
<div className="w-[80%] md:w-[40%] op-modal-box p-0 overflow-y-auto hide-scrollbar text-sm">
|
||||
<h3 className="text-[#de4337] font-bold text-lg pt-[15px] px-[20px]">
|
||||
{headMsg && headMsg}
|
||||
</div>
|
||||
<div className="p-[15px]">
|
||||
</h3>
|
||||
<div className="p-[10px] px-[20px]">
|
||||
<p className="text-[15px]">{bodyMssg && bodyMssg}</p>
|
||||
</div>
|
||||
{footerMessage && (
|
||||
@@ -25,8 +24,7 @@ function CustomModal({
|
||||
<div className="h-[1px] bg-[#9f9f9f] w-full"></div>
|
||||
<div className="m-[15px] ">
|
||||
<button
|
||||
className={`${rejectBtn} text-white mr-2`}
|
||||
style={{ background: "#de4337" }}
|
||||
className="op-btn op-btn-primary mr-2"
|
||||
type="button"
|
||||
onClick={() => declineDoc()}
|
||||
>
|
||||
@@ -34,7 +32,7 @@ function CustomModal({
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={rejectBtn}
|
||||
className="op-btn op-btn-secondary"
|
||||
onClick={() => setIsDecline({ isDeclined: false })}
|
||||
>
|
||||
Close
|
||||
@@ -43,7 +41,7 @@ function CustomModal({
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user