From f8d6547c244f3ef01c3cbdf0ef5505dbe265efab Mon Sep 17 00:00:00 2001
From: prafull-opensignlabs <prafull.navkar@nxglabs.com>
Date: Sun, 16 Jun 2024 15:12:20 +0530
Subject: [PATCH] style: update css of folder component and remove unncessary
 css file

---
 .../components/dashboard/DashboardButton.js   |   1 -
 .../src/components/dashboard/DashboardCard.js |   1 -
 .../src/components/pdf/EditTemplate.js        |  10 +-
 .../components/shared/fields/CreateFolder.js  |   8 +-
 .../components/shared/fields/SelectFolder.js  |  22 ++-
 .../components/shared/fields/SelectSigners.js |   1 -
 apps/OpenSign/src/constant/Utils.js           |   2 +-
 apps/OpenSign/src/pages/Dashboard.js          |   1 -
 apps/OpenSign/src/pages/DebugPdf.js           | 130 +++-----------
 apps/OpenSign/src/pages/Login.js              |   1 -
 apps/OpenSign/src/pages/Pgsignup.js           | 165 +++++++++---------
 apps/OpenSign/src/pages/SignyourselfPdf.js    |   2 +-
 apps/OpenSign/src/primitives/AddContact.js    |   3 +-
 apps/OpenSign/src/styles/AddUser.css          |  79 ---------
 apps/OpenSign/src/styles/loader.css           |  66 -------
 apps/OpenSign/src/styles/pgsignup.css         | 136 ---------------
 16 files changed, 137 insertions(+), 491 deletions(-)
 delete mode 100644 apps/OpenSign/src/styles/loader.css
 delete mode 100644 apps/OpenSign/src/styles/pgsignup.css

diff --git a/apps/OpenSign/src/components/dashboard/DashboardButton.js b/apps/OpenSign/src/components/dashboard/DashboardButton.js
index 53676563b..83eb96927 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardButton.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardButton.js
@@ -1,5 +1,4 @@
 import React from "react";
-import "../../styles/loader.css";
 import { useNavigate } from "react-router-dom";
 import { openInNewTab } from "../../constant/Utils";
 
diff --git a/apps/OpenSign/src/components/dashboard/DashboardCard.js b/apps/OpenSign/src/components/dashboard/DashboardCard.js
index 31bf47f2e..725432ea4 100644
--- a/apps/OpenSign/src/components/dashboard/DashboardCard.js
+++ b/apps/OpenSign/src/components/dashboard/DashboardCard.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from "react";
 import axios from "axios";
 import Parse from "parse";
 import getReplacedHashQuery from "../../constant/getReplacedHashQuery";
-import "../../styles/loader.css";
 import { useNavigate } from "react-router-dom";
 import Tooltip from "../../primitives/Tooltip";
 
diff --git a/apps/OpenSign/src/components/pdf/EditTemplate.js b/apps/OpenSign/src/components/pdf/EditTemplate.js
index 9bc91a957..81597c892 100644
--- a/apps/OpenSign/src/components/pdf/EditTemplate.js
+++ b/apps/OpenSign/src/components/pdf/EditTemplate.js
@@ -61,7 +61,7 @@ const EditTemplate = ({ template, onSuccess }) => {
     <div className="max-h-[300px] md:max-h-[400px] overflow-y-scroll p-[10px]">
       <div className="text-base-content">
         <form onSubmit={handleSubmit}>
-          <div>
+          <div className="mb-[0.35rem]">
             <label htmlFor="name" className="text-[13px]">
               File
             </label>
@@ -69,7 +69,7 @@ const EditTemplate = ({ template, onSuccess }) => {
               {getFileName(template.URL)}
             </div>
           </div>
-          <div className="form-section">
+          <div className="mb-[0.35rem]">
             <label htmlFor="name" className="text-[13px]">
               Name
               <span className="text-[13px] text-[red]"> *</span>
@@ -83,7 +83,7 @@ const EditTemplate = ({ template, onSuccess }) => {
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
+          <div className="mb-[0.35rem]">
             <label htmlFor="Note" className="text-[13px]">
               Note
             </label>
@@ -96,7 +96,7 @@ const EditTemplate = ({ template, onSuccess }) => {
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
+          <div className="mb-[0.35rem]">
             <label htmlFor="Description" className="text-[13px]">
               Description
             </label>
@@ -109,7 +109,7 @@ const EditTemplate = ({ template, onSuccess }) => {
               className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
             />
           </div>
-          <div className="form-section">
+          <div className="mb-[0.35rem]">
             <label className="text-[13px]">Send In Order</label>
             <div className="flex items-center gap-[8px] ml-[8px] mb-[5px]">
               <input
diff --git a/apps/OpenSign/src/components/shared/fields/CreateFolder.js b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
index db41ce925..51a838dcf 100644
--- a/apps/OpenSign/src/components/shared/fields/CreateFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/CreateFolder.js
@@ -124,7 +124,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
             Name<span className="text-red-500 text-[13px]">*</span>
           </label>
           <input
-            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"
             value={name}
             onChange={(e) => setName(e.target.value)}
             required
@@ -135,7 +135,7 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
           <select
             value={selectedParent}
             onChange={handleOptions}
-            className="px-3 py-2 w-full border-[1px] border-gray-300 rounded focus:outline-none text-xs"
+            className="op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content w-full text-xs"
           >
             <option>select</option>
             {folderList.length > 0 &&
@@ -150,9 +150,9 @@ const CreateFolder = ({ parentFolderId, onSuccess, folderCls }) => {
           <button
             onClick={handleCreateFolder}
             disabled={isLoader}
-            className="flex items-center rounded p-2 bg-[#32a3ac] text-white mt-3"
+            className="op-btn op-btn-primary op-btn-sm mt-3"
           >
-            <i className="fa-solid fa-plus mr-1"></i>
+            <i className="fa-solid fa-plus"></i>
             <span>Create</span>
           </button>
         </div>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectFolder.js b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
index b6c353515..d754b8afb 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectFolder.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectFolder.js
@@ -178,7 +178,7 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
         >
           <div>
             <i
-              className="far fa-folder-open text-[40px] text-[#33bbff]"
+              className="far fa-folder-open text-[40px] text-neutral"
               style={{ fontSize: "40px" }}
               aria-hidden="true"
             ></i>
@@ -250,12 +250,12 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
                 folderList.map((folder) => (
                   <div
                     key={folder.Name}
-                    className="border-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
+                    className="border-b-[1px] border-[#8a8a8a] px-2 py-2 mb-2 cursor-pointer "
                     onClick={() => handleSelect(folder)}
                   >
                     <div className="flex items-center gap-2">
                       <i
-                        className="fa fa-folder text-[#33bbff] text-[1.4rem]"
+                        className="fa fa-folder text-neutral text-[1.4rem]"
                         aria-hidden="true"
                       ></i>
                       <span className="font-semibold">{folder.Name}</span>
@@ -280,22 +280,28 @@ const SelectFolder = ({ required, onSuccess, folderCls, isReset }) => {
         <hr />
         <div className="flex justify-between items-center py-[.75rem] px-[1.25rem]">
           <div
-            className="text-[30px] cursor-pointer text-[#32a3ac]"
+            className="op-btn op-btn-seconday op-btn-sm"
             title="Save Here"
             onClick={handleCreate}
           >
             {isAdd ? (
-              <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+              <>
+                <i className="fa-solid fa-arrow-left" aria-hidden="true"></i>
+                <span className="text-xs">Back</span>
+              </>
             ) : (
-              <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+              <>
+                <i className="fa-solid fa-square-plus" aria-hidden="true"></i>
+                <span className="">Add folder</span>
+              </>
             )}
           </div>
           <div
-            className="text-[30px] cursor-pointer"
+            className="op-btn op-btn-primary op-btn-sm"
             title="Save Here"
             onClick={handleSubmit}
           >
-            <i className="fas fa-save" aria-hidden="true"></i>
+            <i className="fas fa-save" aria-hidden="true"></i>Save here
           </div>
         </div>
       </ModalUi>
diff --git a/apps/OpenSign/src/components/shared/fields/SelectSigners.js b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
index 52525870a..3be4ea090 100644
--- a/apps/OpenSign/src/components/shared/fields/SelectSigners.js
+++ b/apps/OpenSign/src/components/shared/fields/SelectSigners.js
@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import Parse from "parse";
-import "../../../styles/AddUser.css";
 import AsyncSelect from "react-select/async";
 
 const SelectSigners = (props) => {
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index ccb54f9c3..b007e7b0c 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -386,7 +386,7 @@ export const getWidgetType = (item) => {
             {item.type}
           </span>
         </div>
-        <div className="text-[20px] op-btn op-btn-primary w-[40px] h-full flex justify-center items-center">
+        <div className="text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center">
           <i className={item.icon}></i>
         </div>
       </div>
diff --git a/apps/OpenSign/src/pages/Dashboard.js b/apps/OpenSign/src/pages/Dashboard.js
index 37efc5da5..610555709 100644
--- a/apps/OpenSign/src/pages/Dashboard.js
+++ b/apps/OpenSign/src/pages/Dashboard.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "../styles/loader.css";
 import GetDashboard from "../components/dashboard/GetDashboard";
 import { useNavigate, useParams } from "react-router-dom";
 import Title from "../components/Title";
diff --git a/apps/OpenSign/src/pages/DebugPdf.js b/apps/OpenSign/src/pages/DebugPdf.js
index a56323e69..fa3b4d815 100644
--- a/apps/OpenSign/src/pages/DebugPdf.js
+++ b/apps/OpenSign/src/pages/DebugPdf.js
@@ -1,7 +1,5 @@
 import React, { useEffect, useState } from "react";
 import RenderAllPdfPage from "../components/pdf/RenderAllPdfPage";
-import "../styles/signature.css";
-import "../styles/AddUser.css";
 import Title from "../components/Title";
 import RenderDebugPdf from "../components/RenderDebugPdf";
 import { pdfjs } from "react-pdf";
@@ -217,14 +215,18 @@ const DebugPdf = () => {
   };
   return (
     <div>
-      {copied && <Alert type="success">Copied</Alert>}
+      {copied && (
+        <Alert type="success">
+          <span className="ml-3">Copied</span>
+        </Alert>
+      )}
       <Title title={"Debug Pdf"} />
       {width < 800 ? (
         <HandleError handleError={"Debug PDF only availble for PC"} />
       ) : (
         <>
           {!isModal && (
-            <div className="signatureContainer">
+            <div className="flex flex-row justify-between">
               {/* this component used to render all pdf pages in left side */}
               <RenderAllPdfPage
                 signPdfUrl={pdf}
@@ -253,106 +255,55 @@ const DebugPdf = () => {
                   />
                 </div>
               </div>
-              <div style={{ backgroundColor: "white", width: 220 }}>
-                <div
-                  style={{
-                    fontSize: 18,
-                    fontWeight: 500,
-                    padding: "10px 12px",
-                    borderBottom: "1px solid grey"
-                  }}
-                >
+              <div className="w-[220px] bg-base-100">
+                <div className="text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]">
                   PDF details
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   Name: {pdfDetails?.name}
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   Pdf type: {pdfDetails?.pdftype}
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   Total Pages: {pdfDetails?.totalPages}
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   Current Page: {pdfDetails?.currentPage}
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   Base64 : {pdfDetails?.base64.slice(0, 10)}...
                   <span
-                    style={{
-                      borderRadius: 4,
-                      padding: "3px 5px",
-                      border: "1px solid gray",
-                      fontSize: 12,
-                      margin: 2,
-                      cursor: "pointer"
-                    }}
+                    className="op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[25px] h-[25px] text-[12px] m-[2px] "
                     onClick={() => copytoclipboard(pdfDetails?.base64)}
                   >
                     <i className="fa-solid fa-copy"></i>
                   </span>
                 </div>
-                <div
-                  style={{
-                    fontSize: 18,
-                    fontWeight: 500,
-                    padding: "10px 12px",
-                    borderBottom: "1px solid grey"
-                  }}
-                >
+                <div className="text-[18px] font-medium py-[10px] px-[12px] border-b-[1px] border-[gray]">
                   Last click
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   x co-ordinate: {pdfDetails?.x}
                 </div>
-                <div style={{ fontSize: 14, padding: "5px 12px" }}>
+                <div className="text-[14px] py-[5px] px-[12px]">
                   y co-ordinate: {pdfDetails?.y}
                 </div>
-
-                <div
-                  style={{
-                    fontSize: 18,
-                    fontWeight: 500,
-                    padding: "10px 12px",
-                    borderBottom: "1px solid grey",
-                    borderTop: "1px solid grey"
-                  }}
-                >
+                <div className="text-[18px] font-medium py-[10px] px-[12px] border-y-[1px] border-[gray]">
                   Annotation
                 </div>
-                <ul
-                  style={{
-                    listStyle: "none",
-                    padding: 10,
-                    height: 500,
-                    overflowY: "auto",
-                    scrollbarWidth: 5
-                  }}
-                >
+                <ul className=" list-none p-[10px] h-[500px] overflow-y-auto">
                   {annotations.map((coord, index) => (
                     <li key={index}>
-                      <span style={{ fontSize: 13, fontWeight: 500 }}>{`Box ${
+                      <span className="text-[13px] font-medium">{`Box ${
                         index + 1
                       }:`}</span>
-                      <code
-                        style={{
-                          fontSize: 12,
-                          color: "black",
-                          cursor: "pointer"
-                        }}
-                      >
+                      <code className="text-[12px] text-base-content select-none">
                         {` ["page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}]`}
                       </code>
                       <div>
                         <span
-                          style={{
-                            borderRadius: 4,
-                            padding: "3px 5px",
-                            border: "1px solid gray",
-                            fontSize: 12,
-                            margin: 2,
-                            cursor: "pointer"
-                          }}
+                          className="op-btn op-btn-outline op-btn-primary op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
                           onClick={() =>
                             copytoclipboard(
                               `"page":${coord?.page}, "x": ${coord.x}, "y": ${coord.y}, "w": ${coord.width}, "h": ${coord.height}`
@@ -362,14 +313,7 @@ const DebugPdf = () => {
                           <i className="fa-solid fa-copy"></i>
                         </span>
                         <span
-                          style={{
-                            borderRadius: 4,
-                            padding: "3px 5px",
-                            border: "1px solid gray",
-                            fontSize: 12,
-                            margin: 2,
-                            cursor: "pointer"
-                          }}
+                          className="op-btn op-btn-outline op-btn-error op-btn-xs rounded-md w-[23px] h-[20px] text-[12px] m-[2px] "
                           onClick={() => handleDelete(coord.key)}
                         >
                           <i className="fa-solid fa-trash-can"></i>
@@ -382,38 +326,16 @@ const DebugPdf = () => {
             </div>
           )}
           <ModalUi title={"Select PDF"} isOpen={isModal}>
-            <form onSubmit={handleSubmit} style={{ margin: "10px" }}>
+            <form onSubmit={handleSubmit} className="m-[10px]">
               <input
                 type="file"
                 onChange={(e) => handleFileChange(e.target.files)}
-                style={{
-                  width: "100%",
-                  border: "1px solid grey",
-                  borderRadius: "4px",
-                  padding: "5px",
-                  fontSize: 12
-                }}
+                className="op-file-input op-file-input-bordered op-file-input-sm focus:outline-none hover:border-base-content w-full h-[40px] text-xs"
                 accept=".pdf"
                 required
               />
-              <div
-                style={{ borderTop: "1px solid grey", margin: "10px 0" }}
-              ></div>
               <button
-                style={{
-                  background: "#32a3ac",
-                  borderRadius: "2px",
-                  boxShadow:
-                    "0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18)",
-                  border: "none",
-                  textTransform: "uppercase",
-                  fontSize: "13px",
-                  fontWeight: "600",
-                  padding: "0.375rem 0.75rem",
-                  textAlign: "center",
-                  color: "#ffffff",
-                  outline: "none"
-                }}
+                className="op-btn op-btn-primary w-full mt-3 mb-1"
                 type="submit"
               >
                 Submit
diff --git a/apps/OpenSign/src/pages/Login.js b/apps/OpenSign/src/pages/Login.js
index 14d660232..937d9b07c 100644
--- a/apps/OpenSign/src/pages/Login.js
+++ b/apps/OpenSign/src/pages/Login.js
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import Parse from "parse";
-import "../styles/loader.css";
 import { useDispatch } from "react-redux";
 import axios from "axios";
 import Title from "../components/Title";
diff --git a/apps/OpenSign/src/pages/Pgsignup.js b/apps/OpenSign/src/pages/Pgsignup.js
index 6be61a83d..67b8172d6 100644
--- a/apps/OpenSign/src/pages/Pgsignup.js
+++ b/apps/OpenSign/src/pages/Pgsignup.js
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import "../styles/pgsignup.css";
 import Parse from "parse";
 import axios from "axios";
 import { useDispatch } from "react-redux";
@@ -409,95 +408,101 @@ const PgSignUp = () => {
     }
   };
   return (
-    <div className="bg-white">
+    <div className="w-full h-screen">
       <Title title={"Pgsignup page"} />
       {isLoader ? (
         <div className="flex justify-center items-center h-[100vh]">
           <Loader />
         </div>
       ) : (
-        <form id="signup" className="pgsignup-content" onSubmit={handleSubmit}>
-          <div className="pgsignup-container">
-            <h1 className="text-2xl md:text-3xl font-bold">Choose Password</h1>
-            <hr className="hrt" />
-            <label htmlFor="password">
-              <b className="text-[13px]">Password</b>
-            </label>
-            <input
-              type="password"
-              placeholder="Enter Password"
-              name="password"
-              className="inputt"
-              value={formData.password}
-              onChange={handlePassowordChange}
-              required
-            />
-
-            <label htmlFor="confirmPassword">
-              <b className="text-[13px]">Confirm Password</b>
-            </label>
-            <input
-              type="password"
-              placeholder="Confirm Password"
-              name="confirmPassword"
-              className="confirmInputt"
-              style={{
-                border: validationMessage
-                  ? validationMessage === "Passwords match!"
-                    ? "2px solid green"
-                    : "2px solid red"
-                  : "2px solid transparent",
-                outline: "none"
-              }}
-              value={formData.confirmPassword}
-              onChange={handleConFirmPassowordChange}
-              required
-            />
-            <div
-              className="icon"
-              style={{
-                margin: validationMessage ? "0 2px 0 2px" : "0 2px 22px 2px",
-                color:
-                  validationMessage === "Passwords match!" ? "green" : "red",
-                fontSize: 11
-              }}
-            >
-              {validationMessage}
-            </div>
-            {formData.password.length > 0 && (
-              <div className="mt-1 text-[11px]">
-                <p
-                  className={`${
-                    lengthValid ? "text-green-600" : "text-red-600"
-                  }`}
-                >
-                  {lengthValid ? "✓" : "✗"} Password should be 8 characters long
-                </p>
-                <p
-                  className={`${
-                    caseDigitValid ? "text-green-600" : "text-red-600"
-                  }`}
-                >
-                  {caseDigitValid ? "✓" : "✗"} Password should contain uppercase
-                  letter, lowercase letter, digit
-                </p>
-                <p
-                  className={`${
-                    specialCharValid ? "text-green-600" : "text-red-600"
-                  }`}
-                >
-                  {specialCharValid ? "✓" : "✗"} Password should contain special
-                  character
-                </p>
+        <div className="py-10 lg:p-16 flex justify-center">
+          <form
+            id="signup"
+            className="w-[90%] md:w-[55%] bg-base-100 text-base-content op-card shadow-md"
+            onSubmit={handleSubmit}
+          >
+            <div className="p-[16px]">
+              <h1 className="text-2xl md:text-3xl font-bold">
+                Choose Password
+              </h1>
+              <hr className="border-[1px] border-[#cecece] mb-[5px]" />
+              <label htmlFor="password">
+                <b className="text-[13px]">Password</b>
+              </label>
+              <input
+                type="password"
+                placeholder="Enter Password"
+                name="password"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                value={formData.password}
+                onChange={handlePassowordChange}
+                required
+              />
+              <label htmlFor="confirmPassword">
+                <b className="text-[13px]">Confirm Password</b>
+              </label>
+              <input
+                type="password"
+                placeholder="Confirm Password"
+                name="confirmPassword"
+                className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                style={{
+                  border: validationMessage
+                    ? validationMessage === "Passwords match!"
+                      ? "1px solid green"
+                      : "1px solid red"
+                    : ""
+                }}
+                value={formData.confirmPassword}
+                onChange={handleConFirmPassowordChange}
+                required
+              />
+              <div
+                className={`${
+                  validationMessage === "Passwords match!"
+                    ? "text-[green]"
+                    : "text-[red]"
+                } ml-[13px] text-[11px]`}
+              >
+                {validationMessage}
               </div>
-            )}
-            <div className="clearfix">
-              <button type="submit" className="signupbtn">
+              {formData.password.length > 0 && (
+                <div className="mt-1 text-[11px]">
+                  <p
+                    className={`${
+                      lengthValid ? "text-green-600" : "text-red-600"
+                    }`}
+                  >
+                    {lengthValid ? "✓" : "✗"} Password should be 8 characters
+                    long
+                  </p>
+                  <p
+                    className={`${
+                      caseDigitValid ? "text-green-600" : "text-red-600"
+                    }`}
+                  >
+                    {caseDigitValid ? "✓" : "✗"} Password should contain
+                    uppercase letter, lowercase letter, digit
+                  </p>
+                  <p
+                    className={`${
+                      specialCharValid ? "text-green-600" : "text-red-600"
+                    }`}
+                  >
+                    {specialCharValid ? "✓" : "✗"} Password should contain
+                    special character
+                  </p>
+                </div>
+              )}
+              <button
+                type="submit"
+                className="op-btn op-btn-primary w-full mt-[8px]"
+              >
                 Submit
               </button>
             </div>
-          </div>
-        </form>
+          </form>
+        </div>
       )}
     </div>
   );
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index f8820d901..2dcfe44fe 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -1098,7 +1098,7 @@ function SignYourSelf() {
       ) : (
         <div>
           {isUiLoading && (
-            <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-start bg-[#e6f2f2] bg-opacity-80">
+            <div className="absolute h-[100vh] w-full z-[999] flex flex-col justify-center items-center bg-[#e6f2f2] bg-opacity-80">
               <Loader />
               <span className="font-bold text-[13px]">
                 This might take some time
diff --git a/apps/OpenSign/src/primitives/AddContact.js b/apps/OpenSign/src/primitives/AddContact.js
index f42a31ecc..a852eb1e6 100644
--- a/apps/OpenSign/src/primitives/AddContact.js
+++ b/apps/OpenSign/src/primitives/AddContact.js
@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Parse from "parse";
 import axios from "axios";
-import "../styles/AddUser.css";
 import Loader from "./Loader";
 const AddContact = (props) => {
   const [name, setName] = useState("");
@@ -203,7 +202,7 @@ const AddContact = (props) => {
         </div>
       )}
       <div className="w-full mx-auto p-[8px]">
-        <div className="text-[14px] font-[700]">Add User</div>
+        <div className="text-[14px] font-[700]">Add Contact</div>
         {isUserExist && (
           <div className="mb-[0.75rem] flex items-center mt-1">
             <input
diff --git a/apps/OpenSign/src/styles/AddUser.css b/apps/OpenSign/src/styles/AddUser.css
index 64b1a7aeb..0ce531387 100644
--- a/apps/OpenSign/src/styles/AddUser.css
+++ b/apps/OpenSign/src/styles/AddUser.css
@@ -1,82 +1,3 @@
-.addusercontainer {
-  height: 100%;
-  padding: 10px 20px 10px 20px;
-}
-
-.loaderdiv {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-
-.form-wrapper {
-  width: 100%;
-  margin-left: auto;
-  margin-right: auto;
-  padding: 8px;
-}
-
-.form-section {
-  margin-bottom: 0.75rem;
-}
-
-.checkbox-label {
-  margin-left: 0.5rem;
-  color: #4b5563;
-}
-
-.addUserInput {
-  padding: 0.5rem 0.75rem;
-  width: 100%;
-  border-width: 1px;
-  border-color: #d1d5db;
-  border-radius: 0.375rem;
-  outline: none;
-  font-size: 0.75rem;
-}
-
-.buttoncontainer {
-  margin-top: 1rem;
-  display: flex;
-  justify-content: flex-start;
-}
-
-.submitbutton {
-  background: #1ab6ce;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  border: none;
-  text-transform: uppercase;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 0.375rem 0.75rem;
-  text-align: center;
-  color: #ffffff;
-  outline: none;
-}
-
-/* For classes: bg-[#188ae2] text-sm text-white px-4 py-2 rounded ml-2 shadow focus:outline-none */
-.resetbutton {
-  background-color: #188ae2;
-  border-radius: 2px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.18);
-  border: none;
-  text-transform: uppercase;
-  font-size: 13px;
-  font-weight: 600;
-  padding: 0.375rem 0.75rem;
-  text-align: center;
-  color: #ffffff;
-  outline: none;
-  margin-left: 8px;
-}
-
 .validationlist {
   position: absolute;
   left: 0;
diff --git a/apps/OpenSign/src/styles/loader.css b/apps/OpenSign/src/styles/loader.css
deleted file mode 100644
index 940d1c557..000000000
--- a/apps/OpenSign/src/styles/loader.css
+++ /dev/null
@@ -1,66 +0,0 @@
-fieldset {
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-[class*="loader-"] {
-  display: inline-block;
-  width: 1em;
-  height: 1em;
-  color: inherit;
-  vertical-align: middle;
-  pointer-events: none;
-}
-
-.loader-37 {
-  border-right: 0.1em solid currentcolor;
-  border-radius: 100%;
-  -webkit-animation: loader-37 800ms linear infinite;
-  animation: loader-37 800ms linear infinite;
-}
-.loader-37:before,
-.loader-37:after {
-  content: "";
-  width: 0.8em;
-  height: 0.8em;
-  display: block;
-  position: absolute;
-  top: calc(50% - 0.4em);
-  left: calc(50% - 0.4em);
-  border-left: 0.08em solid currentcolor;
-  border-radius: 100%;
-  animation: loader-37 400ms linear infinite reverse;
-}
-.loader-37:after {
-  width: 0.6em;
-  height: 0.6em;
-  top: calc(50% - 0.3em);
-  left: calc(50% - 0.3em);
-  border: 0;
-  border-right: 0.05em solid currentcolor;
-  -webkit-animation: none;
-  animation: none;
-}
-
-@-webkit-keyframes loader-37 {
-  from {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-  to {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-}
-
-@keyframes loader-37 {
-  from {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-  to {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-}
diff --git a/apps/OpenSign/src/styles/pgsignup.css b/apps/OpenSign/src/styles/pgsignup.css
deleted file mode 100644
index b5f96ee0b..000000000
--- a/apps/OpenSign/src/styles/pgsignup.css
+++ /dev/null
@@ -1,136 +0,0 @@
-/* Full-width input fields */
-.inputt {
-  width: 100%;
-  padding: 8px;
-  margin-bottom: 10px;
-  /* margin: 5px 0 14px 0; */
-  display: inline-block;
-  border: none;
-  background: #f1f1f1;
-  color: black;
-  font-size: 12px;
-}
-
-/* Add a background color when the inputs get focus */
-.inputt:focus {
-  background-color: #ddd;
-  outline: none;
-}
-
-.confirmInputt {
-  width: 100%;
-  padding: 8px;
-  /* margin: 5px 0 14px 0; */
-  display: inline-block;
-  background: #f1f1f1;
-  color: black;
-  font-size: 12px;
-}
-
-.inputt::placeholder,
-.confirmInputt::placeholder {
-  color: #474e5d;
-  opacity: 1;
-  /* Firefox */
-}
-
-.inputt:-ms-input-placeholder,
-.confirmInputt:-ms-input-placeholder {
-  /* Internet Explorer 10-11 */
-  color: #474e5d;
-}
-
-/* Set a style for all buttons */
-.signupbtn {
-  background-color: #15b4e9;
-  color: white;
-  padding: 12px 12px;
-  margin: 8px 0;
-  border: none;
-  cursor: pointer;
-  opacity: 0.9;
-  float: left;
-  width: 50%;
-}
-
-.signupbtn:hover {
-  opacity: 1;
-}
-
-/* Add padding to pgsignup-container elements */
-.pgsignup-container {
-  padding: 16px;
-}
-
-/* The pgsignup (background) */
-.pgsignup {
-  display: none;
-  /* Hidden by default */
-  position: fixed;
-  /* Stay in place */
-  z-index: 1;
-  /* Sit on top */
-  left: 0;
-  top: 0;
-  width: 100%;
-  /* Full width */
-  height: 100%;
-  /* Full height */
-  overflow: auto;
-  /* Enable scroll if needed */
-  background-color: #474e5d;
-  padding-top: 50px;
-}
-
-/* pgsignup Content/Box */
-.pgsignup-content {
-  background-color: #fefefe;
-  margin: 5% auto 15% auto;
-  /* 5% from the top, 15% from the bottom and centered */
-  border: 1px solid #888;
-  width: 50%;
-  /* Could be more or less, depending on screen size */
-}
-
-/* Style the horizontal ruler */
-.hrt {
-  border: 1px solid #f1f1f1;
-  margin-bottom: 25px;
-}
-
-.clearfix {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-/* Clear floats */
-.clearfix::after {
-  content: "";
-  clear: both;
-  display: table;
-}
-
-/* Change styles for cancel button and signup button on extra small screens */
-@media screen and (max-width: 768px) {
-  /* pgsignup Content/Box */
-  .pgsignup-content {
-    background-color: #fefefe;
-    margin: 5% auto 15% auto;
-    /* 5% from the top, 15% from the bottom and centered */
-    border: 1px solid #888;
-    width: 90%;
-    /* Could be more or less, depending on screen size */
-  }
-
-  .signupbtn {
-    width: 100%;
-    font-size: 16px;
-  }
-
-  /* Style the horizontal ruler */
-  .hrt {
-    border: 1px solid #f1f1f1;
-    margin-bottom: 16px;
-  }
-}