From e8b0b333a12601b53683ee524b311cd05be53491 Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Tue, 18 Jun 2024 14:41:50 +0530
Subject: [PATCH] feat: update design of signers Ui, style of some buttons and
 update primary , neutral color

---
 apps/OpenSign/src/components/Header.js        |  2 +-
 .../src/components/opensigndrive/DriveBody.js |  6 +-
 .../components/shared/fields/CreateFolder.js  |  2 +-
 .../components/shared/fields/SelectFolder.js  | 28 ++++---
 apps/OpenSign/src/index.css                   | 19 +++++
 apps/OpenSign/src/pages/GenerateToken.js      |  2 +-
 apps/OpenSign/src/pages/Webhook.js            |  2 +-
 .../src/primitives/GetReportDisplay.js        | 78 +++++++++++--------
 apps/OpenSign/src/primitives/ModalUi.js       |  5 +-
 apps/OpenSign/src/primitives/Upgrade.js       |  2 +-
 apps/OpenSign/tailwind.config.js              |  4 +-
 11 files changed, 95 insertions(+), 55 deletions(-)

diff --git a/apps/OpenSign/src/components/Header.js b/apps/OpenSign/src/components/Header.js
index 66fb02933..d2288aaf1 100644
--- a/apps/OpenSign/src/components/Header.js
+++ b/apps/OpenSign/src/components/Header.js
@@ -115,7 +115,7 @@ const Header = ({ showSidebar }) => {
         {!isSubscribe && (
           <div>
             <button
-              className="text-xs bg-[#002864] p-2 text-white rounded shadow"
+              className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-sm md:op-btn-md op-btn-accent"
               onClick={() => navigate("/subscription")}
             >
               Upgrade Now
diff --git a/apps/OpenSign/src/components/opensigndrive/DriveBody.js b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
index 7f8db20c1..bdc49e30f 100644
--- a/apps/OpenSign/src/components/opensigndrive/DriveBody.js
+++ b/apps/OpenSign/src/components/opensigndrive/DriveBody.js
@@ -321,7 +321,7 @@ function DriveBody(props) {
         <tr onClick={() => handleOnclikFolder(data)}>
           <td className="cursor-pointer flex items-center">
             <i
-              className="fa fa-folder mr-[8px] text-[26px] text-[#f0ad26]"
+              className="fa fa-folder mr-[8px] text-[26px] op-text-secondary"
               aria-hidden="true"
             ></i>
             <span className="text-[12px] font-medium">{data.Name}</span>
@@ -334,7 +334,7 @@ function DriveBody(props) {
       ) : (
         <tr onClick={() => checkPdfStatus(data)}>
           <td className="cursor-pointer flex items-center">
-            <i className="fa-solid fa-file-lines mr-[8px] text-[26px] text-neutral"></i>
+            <i className="fa-solid fa-file-lines mr-[8px] text-[26px] op-text-primary"></i>
             <span className="text-[12px] font-medium">{data.Name}</span>
           </td>
           <td>{createddate}</td>
@@ -364,7 +364,7 @@ function DriveBody(props) {
                 className="w-full h-full"
               /> */}
               <i
-                className="fa-solid fa-folder text-[100px] mx-auto text-secondary"
+                className="fa-solid fa-folder text-[100px] mx-auto op-text-secondary"
                 onClick={() => handleOnclikFolder(data)}
               ></i>
               {rename === data.objectId ? (
diff --git a/apps/OpenSign/src/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index 51a838dcf..b23164719 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -118,7 +118,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
             <Loader />
           </div>
         )}
-        <h1 className="text-base font-semibold">Create Folder</h1>
+        <h1 className="text-base font-semibold mt-[0.4rem]">Create Folder</h1>
         <div className="text-xs mt-2">
           <label className="block">
             Name<span className="text-red-500 text-[13px]">*</span>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index d754b8afb..37a004600 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -44,12 +44,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
       const FolderQuery = new Parse.Query(folderCls);
       if (folderPtr) {
         FolderQuery.equalTo("Folder", folderPtr);
-        FolderQuery.equalTo("Type", "Folder");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.descending("Type");
       } else {
         FolderQuery.doesNotExist("Folder");
-        FolderQuery.equalTo("Type", "Folder");
         FolderQuery.notEqualTo("IsArchive", true);
+        FolderQuery.descending("Type");
       }
 
       const res = await FolderQuery.find();
@@ -220,7 +220,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
         handleClose={handleCancel}
       >
         <div className="w-full min-w-[300px] md:min-w-[500px] max-w-[500px] px-3">
-          <div className="py-2 text-[#ac4848] text-[14px] font-[500]">
+          <div className="pt-1 text-[#ac4848] text-[14px] font-[500]">
             <span
               className="cursor-pointer"
               title="OpenSign™ Drive"
@@ -241,21 +241,31 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
                   {" / "}
                 </React.Fragment>
               ))}
-            <hr />
+            <hr className="bg-[#8a8a8a] mt-[0.750rem]" />
           </div>
-          <div className="mt-2 mb-3">
+          <div className="mb-2">
             <div className="max-h-[210px] overflow-auto">
               {!isAdd &&
                 folderList.length > 0 &&
                 folderList.map((folder) => (
                   <div
-                    key={folder.Name}
-                    className="border-b-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
-                    onClick={() => handleSelect(folder)}
+                    key={folder.objectId}
+                    className={`${
+                      folder.Type === "Folder"
+                        ? "cursor-pointer"
+                        : "cursor-default"
+                    } border-b-[1px] border-[#8a8a8a] py-2 mb-0.5"`}
+                    onClick={() =>
+                      folder.Type === "Folder" && handleSelect(folder)
+                    }
                   >
                     <div className="flex items-center gap-2">
                       <i
-                        className="fa fa-folder text-neutral text-[1.4rem]"
+                        className={`${
+                          folder.Type === "Folder"
+                            ? "fa fa-folder op-text-secondary"
+                            : "fa fa-file op-text-primary"
+                        } text-[1.4rem]`}
                         aria-hidden="true"
                       ></i>
                       <span className="font-semibold">{folder.Name}</span>
diff --git a/apps/OpenSign/src/index.css b/apps/OpenSign/src/index.css
index 8450fd603..f7911aca5 100644
--- a/apps/OpenSign/src/index.css
+++ b/apps/OpenSign/src/index.css
@@ -50,3 +50,22 @@ body {
   @apply text-warning;
 }
 
+/* CSS for scrollbar customization */
+* {
+  scrollbar-width: thin; /* For Firefox */
+  scrollbar-color: gray; /* For Firefox */
+}
+
+/* For webkit-based browsers like Chrome, Safari */
+*::-webkit-scrollbar {
+  width: 5px;
+}
+
+*::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: gray;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/apps/OpenSign/src/pages/GenerateToken.js b/apps/OpenSign/src/pages/GenerateToken.js
index 5317dbe22..dc683c8e8 100644
--- a/apps/OpenSign/src/pages/GenerateToken.js
+++ b/apps/OpenSign/src/pages/GenerateToken.js
@@ -191,7 +191,7 @@ function GenerateToken() {
                     <button
                       type="button"
                       onClick={() => navigation("/subscription")}
-                      className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+                      className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
                     >
                       Upgrade Now
                     </button>
diff --git a/apps/OpenSign/src/pages/Webhook.js b/apps/OpenSign/src/pages/Webhook.js
index 87c871b8f..c414c23b3 100644
--- a/apps/OpenSign/src/pages/Webhook.js
+++ b/apps/OpenSign/src/pages/Webhook.js
@@ -175,7 +175,7 @@ function Webhook() {
                     <button
                       type="button"
                       onClick={() => navigation("/subscription")}
-                      className="rounded hover:bg-[#15b4e9] border-[1px] border-[#15b4e9] text-[#15b4e9] hover:text-white px-11 py-2 text-xs md:text-base focus:outline-none"
+                      className="text-xs md:text-sm shadow op-btn op-btn-outline op-btn-accent"
                     >
                       Upgrade Now
                     </button>
diff --git a/apps/OpenSign/src/primitives/GetReportDisplay.js b/apps/OpenSign/src/primitives/GetReportDisplay.js
index 41fb655d4..3da282f0b 100644
--- a/apps/OpenSign/src/primitives/GetReportDisplay.js
+++ b/apps/OpenSign/src/primitives/GetReportDisplay.js
@@ -1303,46 +1303,56 @@ const ReportTable = (props) => {
                               ))}
                           </div>
                           {isViewShare[item.objectId] && (
-                            <div className="fixed z-[999] inset-0 w-full h-full bg-black bg-opacity-[75%]">
-                              <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-sm bg-white rounded shadow-md max-h-90 min-w-[90%] md:min-w-[400px] overflow-y-auto max-h-[340px] md:max-h-[400px] hide-scrollbar">
+                            <ModalUi
+                              isOpen
+                              showHeader={
+                                props.ReportName === "Templates" && true
+                              }
+                              title={"Signers"}
+                              reduceWidth={"md:max-w-[450px]"}
+                              handleClose={() => setIsViewShare({})}
+                            >
+                              {props.ReportName !== "Templates" && (
                                 <div
-                                  className="cursor-pointer absolute text-white text-[22px] font-medium rounded-full z-50 top-1 right-3"
+                                  className="op-btn op-btn-sm op-btn-circle op-btn-ghost text-base-content absolute right-2 top-1 z-40"
                                   onClick={() => setIsViewShare({})}
                                 >
-                                  &times;
+                                  ✕
                                 </div>
-
-                                <table className="table-auto w-full">
-                                  <thead className="text-white h-[38px] sticky top-0 bg-[#32a3ac]">
-                                    <tr>
+                              )}
+                              <table className="op-table w-full overflow-auto">
+                                <thead className="h-[38px] sticky top-0 text-base-content text-sm pt-[15px] px-[20px]">
+                                  <tr>
+                                    {props.ReportName === "Templates" && (
+                                      <th className="p-2 pl-3 w-[30%]">
+                                        Roles
+                                      </th>
+                                    )}
+                                    <th className="pl-3 py-2">
+                                      {props.ReportName === "Templates"
+                                        ? "Email"
+                                        : "Signers"}
+                                    </th>
+                                  </tr>
+                                </thead>
+                                <tbody>
+                                  {item.Placeholders.map((x, i) => (
+                                    <tr key={i} className="text-sm font-medium">
                                       {props.ReportName === "Templates" && (
-                                        <th className="p-2 pl-3">Roles</th>
-                                      )}
-                                      <th className="p-2">Signers</th>
-                                    </tr>
-                                  </thead>
-                                  <tbody>
-                                    {item.Placeholders.map((x, i) => (
-                                      <tr
-                                        key={i}
-                                        className="text-sm font-normal text-black odd:bg-white even:bg-gray-200"
-                                      >
-                                        {props.ReportName === "Templates" && (
-                                          <td className="text-[12px] p-2 pl-3">
-                                            {x.Role && x.Role}
-                                          </td>
-                                        )}
-                                        <td className="text-[12px] p-2 break-all">
-                                          {x.email
-                                            ? x.email
-                                            : x?.signerPtr?.Email || "-"}
+                                        <td className="text-[12px] p-2 pl-3 w-[30%]">
+                                          {x.Role && x.Role}
                                         </td>
-                                      </tr>
-                                    ))}
-                                  </tbody>
-                                </table>
-                              </div>
-                            </div>
+                                      )}
+                                      <td className="pl-3 text-[12px] py-2 break-all">
+                                        {x.email
+                                          ? x.email
+                                          : x?.signerPtr?.Email || "-"}
+                                      </td>
+                                    </tr>
+                                  ))}
+                                </tbody>
+                              </table>
+                            </ModalUi>
                           )}
                           {isDeleteModal[item.objectId] && (
                             <ModalUi
diff --git a/apps/OpenSign/src/primitives/ModalUi.js b/apps/OpenSign/src/primitives/ModalUi.js
index 18b184cc0..94e163d33 100644
--- a/apps/OpenSign/src/primitives/ModalUi.js
+++ b/apps/OpenSign/src/primitives/ModalUi.js
@@ -12,14 +12,15 @@ const ModalUi = ({
   reduceWidth,
   showHeaderMessage
 }) => {
+  const width = reduceWidth;
   return (
     <>
       {isOpen && (
         <dialog className="op-modal op-modal-open">
           <div
             className={`${
-              reduceWidth || "md:min-w-[500px]"
-            } op-modal-box p-0 max-h-90 min-w-[90%] overflow-y-auto hide-scrollbar text-sm`}
+              width || "md:min-w-[500px]"
+            } op-modal-box p-0 max-h-90 overflow-y-auto hide-scrollbar text-sm`}
           >
             {showHeader && (
               <>
diff --git a/apps/OpenSign/src/primitives/Upgrade.js b/apps/OpenSign/src/primitives/Upgrade.js
index 187d278f3..baaca3121 100644
--- a/apps/OpenSign/src/primitives/Upgrade.js
+++ b/apps/OpenSign/src/primitives/Upgrade.js
@@ -9,7 +9,7 @@ function Upgrade({ message }) {
           const url = window.location.origin + "/subscription";
           openInNewTab(url);
         }}
-        className="text-blue-800 text-sm cursor-pointer underline"
+        className="op-link op-link-accent text-sm"
       >
         {message ? message : "Upgrade now"}
       </span>
diff --git a/apps/OpenSign/tailwind.config.js b/apps/OpenSign/tailwind.config.js
index f3a4f7697..2d28abc95 100644
--- a/apps/OpenSign/tailwind.config.js
+++ b/apps/OpenSign/tailwind.config.js
@@ -42,13 +42,13 @@ module.exports = {
       "sunset",
       {
         opensigncss: {
-          primary: "#034687",
+          primary: "#002864",
           "primary-content": "#ccd9e8",
           secondary: "#151B25",
           "secondary-content": "#cacccf",
           accent: "#E10032",
           "accent-content": "#ffd8d5",
-          neutral: "#F0D7D9",
+          neutral: "#DBE8E1",
           "neutral-content": "#141111",
           "base-100": "#ffffff",
           "base-200": "#dedede",