style: change ui design of login, signup, forgetpassword page

apps/OpenSign/src/layout/HomeLayout.js

@@ -253,21 +253,8 @@ const HomeLayout = () => {
       {isUserValid ? (
         <>
           {isLoader ? (
-            <div
-              style={{
-                height: "100vh",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center"
-              }}
-            >
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="flex h-[100vh] justify-center items-center text-[45px] text-[#3dd3e0]">
+              <div className="loader-37"></div>
             </div>
           ) : (
             <>

apps/OpenSign/src/pages/ForgetPassword.js

@@ -7,6 +7,8 @@ import Alert from "../primitives/Alert";
 import { appInfo } from "../constant/appinfo";
 import { useDispatch } from "react-redux";
 import { fetchAppInfo } from "../redux/reducers/infoReducer";
+import { isEnableSubscription } from "../constant/const";
+import { getAppLogo } from "../constant/Utils";
 
 function ForgotPassword() {
   const dispatch = useDispatch();
@@ -17,6 +19,8 @@ function ForgotPassword() {
     hideNav: ""
   });
   const [sentStatus, setSentStatus] = useState("");
+  const [image, setImage] = useState();
+
   const handleChange = (event) => {
     const { name, value } = event.target;
     setState({ ...state, [name]: value });
@@ -52,13 +56,24 @@ function ForgotPassword() {
 
   useEffect(() => {
     dispatch(fetchAppInfo());
+    saveLogo();
     resize();
     window.addEventListener("resize", resize);
     return () => window.removeEventListener("resize", resize);
     // eslint-disable-next-line
   }, []);
-
-  let image = appInfo.applogo;
+  const saveLogo = async () => {
+    if (isEnableSubscription) {
+      const logo = await getAppLogo();
+      if (logo) {
+        setImage(logo);
+      } else {
+        setImage(appInfo?.applogo || undefined);
+      }
+    } else {
+      setImage(appInfo?.applogo || undefined);
+    }
+  };
   return (
     <div>
       <Title title="Forgot password page" />
@@ -71,12 +86,14 @@ function ForgotPassword() {
         <Alert type={"danger"}>Please setup email adapter </Alert>
       )}
       <div className="md:p-10 lg:p-16">
-        <div className=" md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 ">
-          <div className="w-[250px] h-[66px] inline-block">
-            {state.hideNav ? (
-              <img src={image} width="100%" alt="" />
-            ) : (
-              <img src={image} width="100%" alt="" />
+        <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
+          <div className="w-[250px] h-[66px] inline-block overflow-hidden">
+            {image && (
+              <img
+                src={image}
+                className="object-contain h-full"
+                alt="applogo"
+              />
             )}
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-x-2">
@@ -86,7 +103,7 @@ function ForgotPassword() {
                 <span className="text-[12px] text-[#878787]">
                   Reset Your Password
                 </span>
-                <div className="shadow-md rounded my-4">
+                <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                   <div className="px-6 py-4">
                     <label className="block text-xs">Email</label>
                     <input

apps/OpenSign/src/pages/Login.js

@@ -1064,28 +1064,9 @@ function Login() {
       {state.loading && (
         <div
           aria-live="assertive"
-          style={{
-            position: "fixed",
-            width: "100vw",
-            height: "100vh",
-            backgroundColor: "rgba(0,0,0,0.2)",
-            top: 0,
-            left: 0,
-            zIndex: 2
-          }}
+          className="fixed w-full h-full flex justify-center items-center bg-black bg-opacity-30 z-20 text-[50px] text-[#3ac9d6]"
         >
-          <div
-            role="status"
-            style={{
-              position: "fixed",
-              fontSize: "50px",
-              color: "#3ac9d6",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)"
-            }}
-            className="loader-37"
-          >
+          <div role="status" className="loader-37">
             <span className="sr-only">Loading...</span>
           </div>
         </div>
@@ -1097,13 +1078,13 @@ function Login() {
             role="region"
             className="md:p-10 lg:p-16"
           >
-            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 ">
+            <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
               <div className="w-[250px] h-[66px] inline-block overflow-hidden">
                 {image && (
                   <img
                     src={image}
                     className="object-contain h-full"
-                    alt="The image displays the OpenSign logo with a stylized blue square with an open corner, accompanied by the tagline Seal the Deal, Openly."
+                    alt="applogo"
                   />
                 )}
               </div>
@@ -1115,7 +1096,7 @@ function Login() {
                       <legend className="text-[12px] text-[#878787]">
                         Login to your account
                       </legend>
-                      <div className="px-6 py-4 outline outline-1 outline-slate-300/50 my-2 rounded shadow-md">
+                      <div className="w-full px-6 py-3 my-1 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                         <label className="block text-xs" htmlFor="email">
                           Email
                         </label>
@@ -1128,7 +1109,7 @@ function Login() {
                           onChange={handleChange}
                           required
                         />
-                        <hr className="my-2 border-none" />
+                        <hr className="my-1 border-none" />
                         {!isLoginSSO && (
                           <>
                             <label className="block text-xs" htmlFor="password">
@@ -1190,7 +1171,7 @@ function Login() {
                       </NavLink>
                     </div>
                   </form>
-                  {appInfo.googleClietId && (
+                  {(appInfo.googleClietId || isEnableSubscription) && (
                     <div className="op-divider my-4 text-sm">OR</div>
                   )}
                   <div className="flex flex-col justify-center items-center gap-y-3">

apps/OpenSign/src/pages/SSOVerify.js

@@ -3,11 +3,7 @@ import { useLocation, useNavigate } from "react-router-dom";
 import Parse from "parse";
 import axios from "axios";
 import { appInfo } from "../constant/appinfo";
-import {
-  isEnableSubscription,
-  modalCancelBtnColor,
-  modalSubmitBtnColor
-} from "../constant/const";
+import { isEnableSubscription } from "../constant/const";
 import { fetchSubscription } from "../constant/Utils";
 import { useDispatch } from "react-redux";
 import { showTenant } from "../redux/reducers/ShowTenant";
@@ -294,33 +290,26 @@ const SSOVerify = () => {
         {message === "Verifying SSO..." && (
           <img alt="loader" src={loader} className="w-[80px] h-[80px]" />
         )}
-        <div className="text-[gray]">{message}</div>
+        <div className="text-base-content">{message}</div>
       </div>
       <ModalUi isOpen={isModal} title="Additional Info" showClose={false}>
         <div className="relative">
           {isLoader && (
-            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center">
-              <div
-                style={{
-                  fontSize: "45px",
-                  color: "#3dd3e0"
-                }}
-                className="loader-37"
-              ></div>
+            <div className="absolute w-full h-full bg-black bg-opacity-25 flex justify-center items-center text-[45px] text-[#3dd3e0]">
+              <div className="loader-37"></div>
             </div>
           )}
-          <form className="px-4 py-3" onSubmit={handleSubmitbtn}>
+          <form
+            className="px-4 py-3 text-base-content"
+            onSubmit={handleSubmitbtn}
+          >
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Phone <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Phone <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="tel"
-                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"
                 id="Phone"
                 value={userDetails.phone}
                 onChange={(e) =>
@@ -337,16 +326,12 @@ const SSOVerify = () => {
               </p>
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="Company"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
-                Company <span style={{ fontSize: 13, color: "red" }}>*</span>
+              <label htmlFor="Company" className="block text-xs font-semibold">
+                Company <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                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"
                 id="Company"
                 value={userDetails.Company}
                 onChange={(e) =>
@@ -360,17 +345,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mb-3">
-              <label
-                htmlFor="JobTitle"
-                style={{ display: "flex" }}
-                className="block text-xs text-gray-700 font-semibold"
-              >
+              <label htmlFor="JobTitle" className="block text-xs font-semibold">
                 Job Title
-                <span style={{ fontSize: 13, color: "red" }}>*</span>
+                <span className="text-[13px] text-[red]">*</span>
               </label>
               <input
                 type="text"
-                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"
                 id="JobTitle"
                 value={userDetails.Destination}
                 onChange={(e) =>
@@ -384,21 +365,13 @@ const SSOVerify = () => {
               />
             </div>
             <div className="mt-4">
-              <button
-                type="submit"
-                className="px-3 py-1.5 text-white rounded shadow-md text-center focus:outline-none "
-                style={{
-                  marginRight: 10,
-                  backgroundColor: modalSubmitBtnColor
-                }}
-              >
+              <button type="submit" className="op-btn op-btn-primary">
                 Login
               </button>
               <button
                 type="button"
-                className="py-1.5 text-black border-[1px] border-[#ccc] shadow-md rounded focus:outline-none"
+                className="op-btn op-btn-ghost ml-2"
                 onClick={handleCloseModal}
-                style={{ width: 75, backgroundColor: modalCancelBtnColor }}
               >
                 Cancel
               </button>

apps/OpenSign/src/pages/Signup.js

@@ -503,15 +503,14 @@ const Signup = () => {
   return (
     <div className="">
       {state.loading && (
-        <div className="fixed w-[100vw] h-[100vh] top-0 left-0 z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]">
-          <div className="loader-37 fixed text-[50px] top-[50%] left-[45%]"></div>
+        <div className="fixed w-[100vw] h-[100vh] flex justify-center items-center z-20 bg-black bg-opacity-25 text-[#3ac9d6] text-[50px]">
+          <div className="loader-37 "></div>
         </div>
       )}
-
       <Title title={"Signup page"} />
       {appInfo && appInfo.applogo ? (
         <div className="md:p-10 lg:p-16">
-          <div className="md:p-4 lg:p-10 p-5 bg-base-100 text-base-content md:border-[1px] md:border-gray-400 ">
+          <div className="md:p-4 lg:p-10 p-4 bg-base-100 text-base-content op-card">
             <div className="w-[250px] h-[66px] inline-block overflow-hidden">
               {image && (
                 <img src={image} className="object-contain h-full" alt="logo" />
@@ -521,7 +520,7 @@ const Signup = () => {
               <div>
                 <form onSubmit={handleSubmit}>
                   <h2 className="text-[30px] mt-6">Create Account !</h2>
-                  <div className="outline outline-1 outline-slate-300/50 shadow-md rounded my-4">
+                  <div className="w-full my-4 op-card bg-base-100 shadow-md outline outline-1 outline-slate-300/50">
                     <div className="px-6 py-4 text-xs">
                       <label className="block ">
                         Name{" "}