style: updated css in guest login, header, loader, reports & update profile img

apps/OpenSign/public/index.html

@@ -7,7 +7,7 @@
   <!-- <link rel="icon" type="image/png"
     href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAALlJREFUaEPtmN0NwjAMBpNxYDKYiM1Yp90g93CKStH1NbIdfz921Dker2Pc+Js1cDF7MXAxASMGYkAigBI6vh9ZwoXP53uZoAYcvhwdA3mAVbI2aSb+9zFKU4IURB6j/HoPUIEa2G3iGIAhQQDlAUIoE2diabIklISS0NoFPebo77RF6OenEF3QntOm128he0GKrwHyACFoz2MgBqSGkpAEcHs47oHtN5AFakACqMNjQEMoE8SABFCHn4HE2zGHSLeEAAAAAElFTkSuQmCC"
     sizes="40x40" /> -->
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="The fastest way to sign PDFs & request signatures from others" />
   <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->

apps/OpenSign/src/components/Footer.js

@@ -58,7 +58,7 @@ const Footer = () => {
       <button
         className={`${
           showButton ? "block" : "hidden"
-        } fixed bottom-4 right-4 px-3 p-2 text-xl bg-blue-500 text-white rounded focus:outline-none`}
+        } fixed bottom-4 right-4 px-3 p-2 text-xl op-bg-secondary text-white rounded focus:outline-none`}
         onClick={scrollToTop}
       >
         <i className="fa-solid fa-angle-up"></i>

apps/OpenSign/src/components/Header.js

@@ -96,7 +96,7 @@ const Header = ({ showSidebar }) => {
     <div className="op-navbar bg-base-100 shadow">
       <div className="flex-none">
         <button
-          className="op-btn op-btn-square op-btn-ghost focus:outline-none"
+          className="op-btn op-btn-square op-btn-ghost focus:outline-none hover:bg-transparent op-btn-sm no-animation"
           onClick={showSidebar}
         >
           <i className="fa-solid fa-bars text-xl text-base-content"></i>
@@ -151,7 +151,11 @@ const Header = ({ showSidebar }) => {
           </div>
         )}
         <div className="op-dropdown op-dropdown-end" id="profile-menu">
-          <div tabIndex={0} role="button" className="op-btn op-btn-ghost">
+          <div
+            tabIndex={0}
+            role="button"
+            className="op-btn op-btn-ghost op-btn-xs w-[10px] h-[20px] hover:bg-transparent"
+          >
             <i
               tabIndex={0}
               role="button"

apps/OpenSign/src/components/dashboard/DashboardButton.js

@@ -35,9 +35,7 @@ const DashboardButton = (props) => {
             } text-[25px] lg:text-[30px]`}
           ></i>
         </span>
-        <div className="op-card-title text-lg ml-3 text-base-content">
+        <div className=" text-lg ml-3 text-base-content">{props.Label}</div>
-          {props.Label}
-        </div>
       </div>
     </div>
   );

apps/OpenSign/src/components/pdf/PdfHeader.js

@@ -198,7 +198,7 @@ function Header({
                     )}
                     <DropdownMenu.Root>
                       <DropdownMenu.Trigger asChild>
-                        <div className="font-[650] text-[18px] px-2 ml-[4px] op-link op-link-info no-underline">
+                        <div className="font-[650] text-[18px] px-2 ml-[4px] text-base-content no-underline">
                           <i
                             className="fa fa-ellipsis-v"
                             aria-hidden="true"

apps/OpenSign/src/components/pdf/TextFontSetting.js

@@ -1,23 +1,23 @@
 import React from "react";
 import ModalUi from "../../primitives/ModalUi";
 import { fontColorArr, fontsizeArr } from "../../constant/Utils";
-import { themeColor } from "../../constant/const";
 
 function TextFontSetting(props) {
   return (
     <ModalUi
       headerColor={"#dc3545"}
       isOpen={props.isTextSetting}
+      reduceWidth={"max-w-[350px]"}
       title={"Text field"}
       handleClose={() => {
         props.setIsTextSetting(false);
       }}
     >
-      <div style={{ height: "100%", padding: 20 }}>
+      <div className="h-full p-[20px]">
-        <div className="flex items-center gap-4">
+        <div className="flex items-center">
-          <span>Font size: </span>
+          <span>Font size:</span>
           <select
-            className="border-[1px] border-gray-300 px-[5px]"
+            className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
             value={
               props.fontSize || props.currWidgetsDetails?.options?.fontSize
             }
@@ -25,20 +25,20 @@ function TextFontSetting(props) {
           >
             {fontsizeArr.map((size, ind) => {
               return (
-                <option style={{ fontSize: "13px" }} value={size} key={ind}>
+                <option className="text-[13px]" value={size} key={ind}>
                   {size}
                 </option>
               );
             })}
           </select>
-          <div className="flex flex-row gap-1">
+          <div className="flex flex-row gap-1 items-center ml-4">
             <span>color: </span>
             <select
               value={
                 props.fontColor || props.currWidgetsDetails?.options?.fontColor
               }
               onChange={(e) => props.setFontColor(e.target.value)}
-              className="border-[1px] border-gray-300 px-[2px] ml-[10px] "
+              className="ml-[7px] op-select op-select-bordered op-select-sm focus:outline-none hover:border-base-content text-xs"
             >
               {fontColorArr.map((color, ind) => {
                 return (
@@ -54,17 +54,16 @@ function TextFontSetting(props) {
                   props.fontColor ||
                   props.currWidgetsDetails?.options?.fontColor
               }}
-              className="w-5 h-[19px]"
+              className="w-5 h-[19px] ml-1"
             ></span>
           </div>
         </div>
 
-        <div className="h-[1px] bg-[#9f9f9f] w-full mt-[15px] mb-[15px]"></div>
+        <div className="h-[1px] bg-[#9f9f9f] w-full mt-[15px] mb-2"></div>
         <button
           onClick={() => props.handleSaveFontSize()}
-          style={{ background: themeColor }}
           type="button"
-          className="finishBtn "
+          className="op-btn op-btn-primary mt-2"
         >
           save
         </button>

apps/OpenSign/src/components/sidebar/Sidebar.js

@@ -12,7 +12,9 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
   const [submenuOpen, setSubmenuOpen] = useState(false);
   let username = localStorage.getItem("username");
   const image = localStorage.getItem("profileImg") || dp;
-  const tenantname = localStorage.getItem("TenantName");
+  const tenantname = localStorage.getItem("Extand_Class")
+    ? JSON.parse(localStorage.getItem("Extand_Class"))?.[0]?.Company
+    : "";
 
   useEffect(() => {
     if (localStorage.getItem("accesstoken")) {

apps/OpenSign/src/constant/Utils.js

@@ -376,14 +376,14 @@ export const addWidgetOptions = (type) => {
 };
 export const getWidgetType = (item, isHeader) => {
   return (
-    <div className="op-btn w-fit  md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
+    <div className="op-btn w-fit md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
       <div className="w-full h-full flex md:justify-between items-center">
         <div className="flex justify-start items-center text-[13px] ml-1">
           {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
           <span
             className={`${
-              isHeader && "md:text-[8px]  lg:text-[15px]"
+              isHeader && "md:text-[8px] lg:text-[15px]"
-            } md:inline-block text-center text-[15px] ml-[5px] font-semibold`}
+            } md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0`}
           >
             {item.type}
           </span>

apps/OpenSign/src/pages/GuestLogin.js

@@ -191,7 +191,7 @@ function GuestLogin() {
         <div className="m-1 md:m-2 p-[30px] text-base-content bg-base-100 op-card shadow-md">
           <div className="md:w-[250px] md:h-[66px] inline-block overflow-hidden mt-2 mb-11">
             {appLogo && (
-              <img src={appLogo} className="object-contain h-full" alt="logo" />
+              <img src={appLogo} className="object-contain" alt="logo" />
             )}
           </div>
           {contactId ? (
@@ -199,7 +199,7 @@ function GuestLogin() {
               {!EnterOTP ? (
                 <div className="w-full md:w-[50%] text-base-content">
                   <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
-                  <legend className="text-[12px] text-[#878787] mt-2">
+                  <legend className="text-[12px] text-[#878787] mt-2 mb-1">
                     Verification code is sent to your email
                   </legend>
                   <div className="p-[20px] outline outline-1 outline-slate-300/50 my-2 op-card shadow-md">
@@ -207,17 +207,17 @@ function GuestLogin() {
                       type="email"
                       name="mobile"
                       value={email}
-                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
+                      className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full disabled:text-[#5c5c5c] text-xs"
                       disabled
                     />
                   </div>
-                  <div className="mt-2">
+                  <div className="mt-3">
                     <button
                       className="op-btn op-btn-primary"
                       onClick={(e) => handleSendOTPBtn(e)}
                       disabled={loading}
                     >
-                      {loading ? "Loading..." : "Send OTP"}
+                      {loading ? "Loading..." : "Get verification code"}
                     </button>
                   </div>
                 </div>
@@ -228,7 +228,7 @@ function GuestLogin() {
                 >
                   <h1 className="text-2xl md:text-[30px]">Welcome Back!</h1>
                   <legend className="text-[12px] text-[#878787] mt-2">
-                    You will get a OTP via Email
+                    You will get a verification code via Email
                   </legend>
                   <div className="p-[20px] pt-[15px] outline outline-1 outline-slate-300/50 op-card my-2 shadow-md">
                     <p className="text-sm">Enter Verification Code</p>
@@ -240,7 +240,7 @@ function GuestLogin() {
                       onChange={(e) => setOTP(e.target.value)}
                     />
                   </div>
-                  <div className="mt-2">
+                  <div className="mt-2.5">
                     <button
                       className="op-btn op-btn-primary"
                       type="submit"
@@ -298,7 +298,7 @@ function GuestLogin() {
                     disabled
                   />
                 </div>
-                <div className="mb-2">
+                <div className="mt-2.5">
                   <label
                     htmlFor="phone"
                     className="block text-xs text-gray-700 font-semibold"

apps/OpenSign/src/pages/Login.js

@@ -1103,6 +1103,7 @@ function Login() {
                           type="email"
                           className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                           name="email"
+                          autoComplete="username"
                           value={state.email}
                           onChange={handleChange}
                           required
@@ -1122,6 +1123,7 @@ function Login() {
                                 className="op-input op-input-bordered op-input-sm focus:outline-none hover:border-base-content w-full text-xs"
                                 name="password"
                                 value={state.password}
+                                autoComplete="current-password"
                                 onChange={handleChange}
                                 required
                               />

apps/OpenSign/src/primitives/GetReportDisplay.js

@@ -1583,11 +1583,11 @@ const ReportTable = (props) => {
             </tbody>
           </table>
         </div>
-        <div className="op-join flex flex-wrap items-center p-2 ">
+        <div className="op-join flex flex-wrap items-center p-2">
           {props.List.length > props.docPerPage && (
             <button
               onClick={() => paginateBack()}
-              className="op-join-item op-btn "
+              className="op-join-item op-btn op-btn-sm"
             >
               Prev
             </button>
@@ -1599,7 +1599,7 @@ const ReportTable = (props) => {
               disabled={x === "..."}
               className={`${
                 x === currentPage ? "op-btn-active" : ""
-              } op-join-item op-btn`}
+              } op-join-item op-btn op-btn-sm`}
             >
               {x}
             </button>
@@ -1607,7 +1607,7 @@ const ReportTable = (props) => {
           {props.List.length > props.docPerPage && (
             <button
               onClick={() => paginateFront()}
-              className="op-join-item op-btn"
+              className="op-join-item op-btn op-btn-sm"
             >
               Next
             </button>
@@ -1616,7 +1616,7 @@ const ReportTable = (props) => {
         {props.List?.length <= 0 && (
           <div
             className={`${
-              isDashboard ? "h-[330px]" : ""
+              isDashboard ? "h-[317px]" : ""
             } flex flex-col items-center justify-center w-ful bg-base-100 text-base-content rounded-xl py-4`}
           >
             <div className="w-[60px] h-[60px] overflow-hidden">

apps/OpenSign/src/primitives/Loader.js

@@ -2,7 +2,7 @@ import React from "react";
 
 const Loader = () => {
   return (
-    <div className="op-loading op-loading-infinity w-[4rem] text-accent"></div>
+    <div className="op-loading op-loading-infinity w-[4rem] text-neutral"></div>
   );
 };
 

apps/OpenSign/tailwind.config.js

@@ -49,7 +49,7 @@ module.exports = {
           accent: "#E10032",
           "accent-content": "#ffd8d5",
           neutral: "#99c2ff",
-          "neutral-content": "#f1f1f1",
+          "neutral-content": "#31353b",
           "base-100": "#ffffff",
           "base-200": "#dedede",
           "base-300": "#bebebe",