From 6a365f77343be7b31ceafa0c6fa0c2b170a414ef Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Thu, 13 Jun 2024 20:21:25 +0530
Subject: [PATCH] style: update widget detail popups

---
 .../src/components/pdf/AddRoleModal.js        |   2 +-
 apps/OpenSign/src/components/pdf/PdfHeader.js |   2 +-
 .../src/components/pdf/PlaceholderCopy.js     |   8 +-
 apps/OpenSign/src/components/pdf/RenderPdf.js |   9 +-
 .../src/components/pdf/WidgetNameModal.js     | 113 ++++++------------
 apps/OpenSign/src/pages/PdfRequestFiles.js    |   3 -
 apps/OpenSign/src/styles/AddUser.css          |   1 -
 7 files changed, 45 insertions(+), 93 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/AddRoleModal.js b/apps/OpenSign/src/components/pdf/AddRoleModal.js
index 5f90fcc68..6770c06f2 100644
--- a/apps/OpenSign/src/components/pdf/AddRoleModal.js
+++ b/apps/OpenSign/src/components/pdf/AddRoleModal.js
@@ -8,7 +8,7 @@ const AddRoleModal = (props) => {
       isOpen={props.isModalRole}
       handleClose={props.handleCloseRoleModal}
     >
-      <div className="addusercontainer">
+      <div className="h-full py-[10px] px-[20px]">
         <form className="flex flex-col" onSubmit={props.handleAddRole}>
           <input
             value={props.roleName}
diff --git a/apps/OpenSign/src/components/pdf/PdfHeader.js b/apps/OpenSign/src/components/pdf/PdfHeader.js
index 59bd7b17d..3b98f5645 100644
--- a/apps/OpenSign/src/components/pdf/PdfHeader.js
+++ b/apps/OpenSign/src/components/pdf/PdfHeader.js
@@ -481,7 +481,7 @@ function Header({
         }
         handleClose={() => setIsDownloading("")}
       >
-        <div className="p-3 md:p-5 text-[13px] md:text-base text-center">
+        <div className="p-3 md:p-5 text-[13px] md:text-base text-center text-base-content">
           {isDownloading === "certificate"}{" "}
           <p>
             Your completion certificate is being generated. Please wait
diff --git a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
index 17d86206c..cd6958efc 100644
--- a/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
+++ b/apps/OpenSign/src/components/pdf/PlaceholderCopy.js
@@ -195,13 +195,13 @@ function PlaceholderCopy(props) {
         props.setIsPageCopy(false);
       }}
     >
-      <div style={{ height: "100%", padding: 20 }}>
+      <div className="h-full p-[20px] text-base-content">
         {copyType.map((data, key) => {
           return (
-            <div key={key} style={{ display: "flex", flexDirection: "column" }}>
-              <label key={key} style={{ fontSize: "16px", fontWeight: "500" }}>
+            <div key={key} className="flex flex-col">
+              <label className="text-[16px] font-medium">
                 <input
-                  style={{ accentColor: "red", marginRight: "10px" }}
+                  className="mr-[10px] accent-[red]"
                   type="radio"
                   value={data}
                   onChange={() => setSelectCopyType(data)}
diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 1bd89d36f..875f4177b 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -452,9 +452,7 @@ function RenderPdf({
           {/* this component for render pdf document is in middle of the component */}
           <div className="flex items-center justify-center">
             <Document
-              onLoadError={() => {
-                setPdfLoadFail(true);
-              }}
+              onLoadError={() => setPdfLoadFail(true)}
               loading={"Loading Document.."}
               onLoadSuccess={pageDetails}
               // ref={pdfRef}'
@@ -501,10 +499,7 @@ function RenderPdf({
         >
           <div
             data-tut="reactourForth"
-            style={{
-              border: "0.1px solid #ebe8e8",
-              width: pdfOriginalWidth
-            }}
+            style={{ border: "0.1px solid #ebe8e8", width: pdfOriginalWidth }}
             ref={drop}
             id="container"
           >
diff --git a/apps/OpenSign/src/components/pdf/WidgetNameModal.js b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
index 8337329b5..4bcc477e2 100644
--- a/apps/OpenSign/src/components/pdf/WidgetNameModal.js
+++ b/apps/OpenSign/src/components/pdf/WidgetNameModal.js
@@ -122,15 +122,15 @@ const WidgetNameModal = (props) => {
           props.widgetName === textInputWidget
             ? "pt-0"
             : ""
-        } p-[20px]`}
+        } p-[20px] text-base-content`}
       >
-        <div className="form-section">
-          <label htmlFor="name" style={{ fontSize: 13 }}>
+        <div className="mb-[0.75rem] text-[13px]">
+          <label htmlFor="name">
             Name
-            <span className="text-[red] text-[13px]"> *</span>
+            <span className="text-[red]"> *</span>
           </label>
           <input
-            className="addUserInput"
+            className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             name="name"
             value={formdata.name}
             onChange={(e) => handleChange(e)}
@@ -140,14 +140,15 @@ const WidgetNameModal = (props) => {
         {(props.defaultdata?.type === textInputWidget ||
           props.widgetName === textInputWidget) && (
           <>
-            <div className="form-section">
+            <div className="mb-[0.75rem]">
               <div className="flex items-center gap-1">
                 <label
                   htmlFor="textvalidate"
-                  className={
-                    !props.isSubscribe && isEnableSubscription && "disabled"
-                  }
-                  style={{ fontSize: 13 }}
+                  className={`${
+                    !props.isSubscribe && isEnableSubscription
+                      ? "bg-opacity-50 pointer-events-none"
+                      : ""
+                  } text-[13px]`}
                 >
                   Validation
                 </label>
@@ -157,19 +158,15 @@ const WidgetNameModal = (props) => {
                 {!props.isSubscribe && isEnableSubscription && <Upgrade />}
               </div>
               <div
-                className={
-                  !props.isSubscribe && isEnableSubscription && "disabled"
-                }
-                style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  gap: 10,
-                  marginBottom: "0.5rem"
-                }}
+                className={`${
+                  !props.isSubscribe && isEnableSubscription
+                    ? "bg-opacity-50 pointer-events-none"
+                    : ""
+                } flex flex-row gap-[10px] mb-[0.5rem]`}
               >
-                <div style={{ width: "100%", position: "relative" }}>
+                <div className="w-full relative group">
                   <input
-                    className="relative z-20 w-[87%] md:w-[92%] p-2.5 border-[1px] border-[#d1d5db] rounded-l-md outline-none text-xs"
+                    className="z-20 relative op-input op-input-bordered rounded-r-none op-input-sm focus:outline-none group-hover:border-base-content w-[87%] md:w-[92%] text-xs"
                     name="textvalidate"
                     placeholder="Enter custom regular expression"
                     value={formdata.textvalidate}
@@ -177,7 +174,7 @@ const WidgetNameModal = (props) => {
                     // onBlur={() => handleBlurRegex()}
                   />
                   <select
-                    className="validationlist addUserInput"
+                    className="validationlist op-input op-input-bordered op-input-sm focus:outline-none group-hover:border-base-content w-full text-xs"
                     name="textvalidate"
                     value={formdata.textvalidate}
                     onChange={(e) => handleChange(e)}
@@ -185,17 +182,13 @@ const WidgetNameModal = (props) => {
                   >
                     <option
                       disabled={formdata?.textvalidate}
-                      style={{ fontSize: "13px" }}
+                      className="text-[13px]"
                     >
                       Select...
                     </option>
                     {inputOpt.map((data, ind) => {
                       return (
-                        <option
-                          style={{ fontSize: "13px" }}
-                          key={ind}
-                          value={data}
-                        >
+                        <option className="text-[13px]" key={ind} value={data}>
                           {data}
                         </option>
                       );
@@ -205,12 +198,12 @@ const WidgetNameModal = (props) => {
               </div>
             </div>
 
-            <div className="form-section">
-              <label htmlFor="name" style={{ fontSize: 13 }}>
+            <div className="mb-[0.75rem]">
+              <label htmlFor="name" className="text-[13px]">
                 Default value
               </label>
               <input
-                className="addUserInput"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                 name="defaultValue"
                 value={formdata.defaultValue}
                 onChange={(e) => handledefaultChange(e)}
@@ -228,37 +221,22 @@ const WidgetNameModal = (props) => {
                   style={{ fontSize: 12 }}
                 >
                   <i
-                    className="fas fa-exclamation-circle"
-                    style={{ color: "#fab005", fontSize: 15 }}
-                  ></i>{" "}
+                    className="fas fa-exclamation-circle text-[15px]"
+                    style={{ color: "#fab005" }}
+                  ></i>
                   invalid default value
                 </div>
               )}
             </div>
           </>
         )}
-        <div className="form-section">
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "row",
-              gap: 10,
-              marginBottom: "0.5rem"
-            }}
-          >
+        <div className="mb-[0.75rem]">
+          <div className="flex flex-row gap-[10px] mb-[0.5rem]">
             {statusArr.map((data, ind) => {
               return (
-                <div
-                  key={ind}
-                  style={{
-                    display: "flex",
-                    flexDirection: "row",
-                    gap: 5,
-                    alignItems: "center"
-                  }}
-                >
+                <div key={ind} className="flex flex-row gap-[5px] items-center">
                   <input
-                    style={{ accentColor: "red", marginRight: "10px" }}
+                    className="mr-[3px] accent-[red]"
                     type="radio"
                     name="status"
                     onChange={() =>
@@ -268,9 +246,7 @@ const WidgetNameModal = (props) => {
                       formdata.status.toLowerCase() === data.toLowerCase()
                     }
                   />
-                  <div style={{ fontSize: "13px", fontWeight: "500" }}>
-                    {data}
-                  </div>
+                  <div className="text-[13px] font-medium">{data}</div>
                 </div>
               );
             })}
@@ -278,35 +254,20 @@ const WidgetNameModal = (props) => {
         </div>
         {(props.defaultdata?.type === textInputWidget ||
           props?.widgetName === textInputWidget) && (
-          <div className="form-section">
-            <label htmlFor="hint" style={{ fontSize: 13 }}>
+          <div className="mb-[0.75rem]">
+            <label htmlFor="hint" className="text-[13px]">
               Hint
             </label>
             <input
-              className="addUserInput"
+              className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
               name="hint"
               value={formdata.hint}
               onChange={(e) => handleChange(e)}
             />
           </div>
         )}
-        <div
-          style={{
-            height: 1,
-            backgroundColor: "#b7b3b3",
-            width: "100%",
-            marginBottom: "16px"
-          }}
-        ></div>
-        <button
-          style={{
-            color: "white",
-            padding: "5px 20px",
-            backgroundColor: "#32a3ac"
-          }}
-          type="submit"
-          className="finishBtn"
-        >
+        <div className="h-[1px] w-full mb-[16px] bg-[#b7b3b3]"></div>
+        <button type="submit" className="op-btn op-btn-primary">
           Save
         </button>
       </form>
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index ba2fb66fd..97d0d9d50 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1413,7 +1413,6 @@ function PdfRequestFiles() {
                   />
                 </div>
               )}
-
               <div
                 className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
                 style={{
@@ -1840,7 +1839,6 @@ function PdfRequestFiles() {
               </div>
             </div>
           )}
-
           <ModalUi
             isOpen={validateAlert}
             title={"Validation alert"}
@@ -1851,7 +1849,6 @@ function PdfRequestFiles() {
                 The input does not meet the criteria set by the regular
                 expression.
               </p>
-
               <div className="h-[1px] bg-[#9f9f9f] w-full my-[15px]"></div>
               <button
                 onClick={() => setValidateAlert(false)}
diff --git a/apps/OpenSign/src/styles/AddUser.css b/apps/OpenSign/src/styles/AddUser.css
index c83395db4..64b1a7aeb 100644
--- a/apps/OpenSign/src/styles/AddUser.css
+++ b/apps/OpenSign/src/styles/AddUser.css
@@ -90,7 +90,6 @@
   background-size: 1rem auto;
 }
 
-
 @media (max-width: 375px) {
   .validationlist {
     background-position: right 0.5rem top 50%;