adjusted market modal

src/components/Home/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import {Navigate} from 'react-router-dom'
 import datas from "../../data/product_data.json";
 import Layout from "../Partials/Layout";
 import usersService from "../../services/UsersService";
@@ -43,9 +44,10 @@ export default function Home(props) {
               }
           </>
         ) : (
-          <div>
-            You are not logged in or your account type is not supported.
-          </div>
+          // <div>
+          //   You are not logged in or your account type is not supported.
+          // </div>
+          <Navigate to='/login' />
         )}
         </>
       </div>

src/components/MarketPlace/PopUp/LockJob.jsx

@@ -57,6 +57,7 @@ export default function LockJob({
         </div>
       ) : (
         <>
+        <div className='md:grid md:grid-cols-4'>
           <div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
             <div className="min-h-[200px]">
               <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
@@ -277,6 +278,7 @@ export default function LockJob({
               </div>
             </div>
           </div>
+        </div>
         </>
       )}
     </>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -133,11 +133,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
   // let addedIntDate = marketInt?.added?.split(" ")[0];
   // let expireIntDate = marketInt?.expire?.split(" ")[0];
 
-  let cleanedText = details?.job_description
-    ?.replace(/&lt;/g, "<")
-    .replace(/&gt;/g, ">")
-    .replace(/&quot;/g, '"')
-    .replace(/&amp;/g, "&");
+  let cleanedText = details?.job_description?.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&amp;/g, "&");
 
   return (
     <ModalCom action={onClose} situation={situation}>
@@ -149,7 +145,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
           <CloseIcon onClose={onClose} />
         </div>
 
-        <div className="md:grid md:grid-cols-4 bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
+        <div className="bg-white dark:bg-dark-white text-slate-900 dark:text-white rounded-lg">
           {details?.offer_depend_uid ?
           <LockJob
             marketPlaceProduct={marketPlaceProduct}
@@ -164,7 +160,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
           />
           :
           <>
-            <div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
+            <div className="px-4 py-2 w-full">
               <div className="min-h-[300px]">
                 <h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
                   {details?.offer_depend_uid && <i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>}
@@ -190,15 +186,15 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
                     danger: true,
                   },
                 ].map(({ name, content, danger }, idx) => (
-                  <div className={`my-3 md:flex items-start`} key={idx}>
+                  <div className={`my-3 flex-col gap-1`} key={idx}>
                     <label className="py-2 job-label w-full md:w-[19%]">
                       {name}
                     </label>
                     <div
-                      className={`w-full p-2 md:w-3/4 text-slate-900 dark:text-white market-pop rounded-2xl ${
+                      className={`w-full p-2 text-slate-900 dark:text-white market-pop rounded-2xl ${
                         name == "Description"
-                          ? "min-h-[150px] max-h-[150px] h-full overflow-y-auto break-words bg-slate-50"
-                          : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[150px] max-h-[150px] bg-slate-50"
+                          ? "min-h-[60px] max-h-[75px] h-full overflow-y-auto break-words bg-slate-50"
+                          : name == "Delivery Detail" ? " overflow-y-auto h-full min-h-[200px] max-h-[200px] bg-slate-50"
                           : "h-full flex items-center"
                       }`}
                     >
@@ -237,122 +233,111 @@ const MarketPopUp = ({ details, onClose, situation, marketInt, marketPlaceProduc
                 ))}
               </div>
               <hr className='my-1' />
-              <div className='w-full'>
-                <label className="job-label w-full flex gap-2 items-center">
-                  If you have any questions about this task:
-                  <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
-                    {marketMsg.state && "Message Sent!"}
-                    {errMsg.market && "Failed to send"}
-                  </span>
-                </label>
-                <div className="w-full flex items-center gap-3">
-                  <div className="w-full">
-                    <textarea
-                      className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
-                        marketMsg.loading && "italic text-[#9CA3AF]"
-                      } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
-                      rows="3"
-                      style={{ resize: "none" }}
-                      placeholder="Enter message here ..."
-                      value={marketMsg.loading ? "Sending..." : textValue}
-                      onChange={handleInputChange}
-                    />
-                  </div>
-                  <div className="relative flex flex-col">
-                    <button
-                      className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
-                      name="market-message"
-                      onClick={MarketDetail}
-                      disabled={marketMsg.loading}
-                    >
-                      {marketMsg.loading ? (
-                        <LoadingSpinner size={5} color="white" />
-                      ) : (
-                        // "Send Message"
-                        <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 11 20"
-                        id="Arrow"
-                        className="w-[0.7rem]"
+              <div className='w-full grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-8 items-center'>
+                <div className='col-span-1 md:col-span-2 flex flex-col justify-center gap-2'>
+                  <label className="job-label w-full flex gap-2 items-center">
+                    If you have any questions about this task:
+                    <span className={`text-sm ${marketMsg.state ? 'text-[#57cd89]' : 'text-red-500'}`}>
+                      {marketMsg.state && "Message Sent!"}
+                      {errMsg.market && "Failed to send"}
+                    </span>
+                  </label>
+                  <div className="w-full flex items-center gap-3">
+                    <div className="w-full">
+                      <textarea
+                        className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
+                          marketMsg.loading && "italic text-[#9CA3AF]"
+                        } bg-transparent outline-none border-2 border-slate-300 rounded-md`}
+                        rows="3"
+                        style={{ resize: "none" }}
+                        placeholder="Enter message here ..."
+                        value={marketMsg.loading ? "Sending..." : textValue}
+                        onChange={handleInputChange}
+                      />
+                    </div>
+                    <div className="relative flex flex-col">
+                      <button
+                        className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
+                        name="market-message"
+                        onClick={MarketDetail}
+                        disabled={marketMsg.loading}
                       >
-                        <path
-                          fillRule="evenodd"
-                          d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
-                          // fill=""
-                          className="color000000 svgShape fill-[#fff]"
-                        ></path>
-                      </svg>
-                      )}
-                    </button>
-                    {/* <span className="text-sm text-[#57cd89]">
-                      {marketMsg.state && "Sent!"}
-                      {errMsg.market && "Failed"}
-                    </span> */}
+                        {marketMsg.loading ? (
+                          <LoadingSpinner size={5} color="white" />
+                        ) : (
+                          // "Send Message"
+                          <svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 11 20"
+                          id="Arrow"
+                          className="w-[0.7rem]"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
+                            // fill=""
+                            className="color000000 svgShape fill-[#fff]"
+                          ></path>
+                        </svg>
+                        )}
+                      </button>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
-
-            <div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
-              <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
-                <div className="w-full flex flex-col justify-center pb-4 gap-2">
-                  <p className="job-label w-full">
-                    Interested?
+                
+                <div className="span-1 flex flex-col justify-center mb-4 gap-2">
+                  <p className="flex items-center tracking-wide">
+                    <span className="job-label">Interest Count: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
                   </p>
-                  <hr />
+                  {/* <hr /> */}
                   <button
-                    className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
+                    className="btn-gradient text-white p-1 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
                     name="market-interest"
                     onClick={ManageInterest}
                   >
                     {" "}
                     <div className="flex md:flex-col justify-center gap-2">
-                      <span>Notify</span>
-                      <span>Owner</span>
+                      <span>I am Interested</span>
+                      {/* <span>Owner</span> */}
                     </div>
                   </button>
-                  <>
-                    {manageInt.loading ? (
-                      <p className="text-sm italic">please wait...</p>
-                    ) : (
-                      <>
-                        {manageInt?.msg !== "" && (
-                          <p
-                            className={`text-sm italic ${
-                              manageInt?.state ? "text-green-500" : "text-red-500"
-                            }`}
-                          >
-                            {manageInt?.msg}
-                          </p>
-                        )}
-                      </>
-                    )}
-                  </>
-                </div>
-
-                <div className="text-slate-900">
-                  <p className="flex items-center tracking-wide">
-                    <span className="job-label">Interest: </span> <b className="ml-1">{interestCount.length > 0 ? interestCount[0].interest_count : '0'}</b>
-                  </p>
-                  <hr />
-                  <p className="my-1 flex flex-col">
-                    <span className="job-label">Expire: </span> 
-                    <span> {new Date(details.expire).toLocaleString()} </span>
-                  </p>
                 </div>
               </div>
+              <div>
+                  {manageInt.loading ? (
+                    <p className="text-sm italic">please wait...</p>
+                  ) : (
+                    <>
+                      {manageInt?.msg !== "" && (
+                        <p
+                          className={`text-sm italic ${
+                            manageInt?.state ? "text-green-500" : "text-red-500"
+                          }`}
+                        >
+                          {manageInt?.msg}
+                        </p>
+                      )}
+                    </>
+                  )}
+              </div>
             </div>
           </>
           }
         </div>
         
-        <div className="modal-footer-wrapper">
+        <div className="modal-footer-wrapper flex justify-between gap-2 items-center">
+          <div className="text-slate-900">
+            <p className="my-1 flex flex-col">
+              <span className="job-label">Expire: </span> 
+              <span> {new Date(details.expire).toLocaleString()} </span>
+            </p>
+          </div>
           <button
             className="custom-btn bg-transparent border border-red-500 text-red-500 ml-auto"
             name="cancel"
             onClick={onClose}
           >
-            Cancel
+            Close
           </button>
         </div>
       </div>

src/components/Partials/Header.jsx

@@ -480,7 +480,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                           {/* end Language list items*/}
                         </li>
                         <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg">
-                          <Link to="#" className="notifications">
+                          <Link to="/settings" className="notifications">
                             <div className="name">
                               <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
                                 Account Settings

src/index.css

@@ -1,6 +1,6 @@
 /* Regular Weight */
 @font-face {
-  font-family: "Product Sans";
+  font-family: Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif,"Product Sans";
   src: url("./assets/fonts/Product Sans Regular.ttf");
 }
 .nft-main-container {
@@ -8,7 +8,7 @@
 }
 /* Bold Weight */
 @font-face {
-  font-family: "Product Sans";
+  font-family: Roboto,"Product Sans";
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 .SENDER {

src/middleware/AuthRoute.jsx

@@ -90,7 +90,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
         apiCall
           .loadProfile()
           .then((res) => {
-            if (res?.data?.internal_return < 0) {
+            if (!res?.data?.internal_return || res?.data?.internal_return < 0) {
               setIsLogin({ loading: false, status: false });
               return;
             }

src/services/UsersService.js

@@ -1695,7 +1695,7 @@ class usersService {
     if(localStorage && localStorage.getItem('myloc')){
       reqData.loc = localStorage.getItem('myloc')
     }
-    return Axios.post(endPoint, reqData)
+    return Axios.post(endPoint, reqData,{timeout: 7000 })
         .then((response) => {
           // console.log(response);
           // console.log("~~~~~~~ WrenchBoard::POST ~~~~~~~~");