history table list adjusted and wallet display fixed

src/components/AuthPages/VerifyLink/index2.jsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import debounce from "../../../hooks/debounce";
@@ -6,8 +7,12 @@ import usersService from "../../../services/UsersService";
 import InputCom from "../../Helpers/Inputs/InputCom";
 import AuthLayout from "../AuthLayout2";
 import LoadingSpinner from '../../../components/Spinners/LoadingSpinner'
+import { updateUserDetails } from "../../../store/UserDetails";
 
 export default function VerifyLink() {
+
+  const dispatch = useDispatch();
+
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [msgError, setMsgError] = useState("");
@@ -50,12 +55,14 @@ export default function VerifyLink() {
           ) {
             localStorage.setItem("email", `${data?.email}`);
             localStorage.setItem("member_id", `${data?.member_id}`);
+            localStorage.setItem("uid", `${data?.uid}`);
             localStorage.setItem("session_token", `${data?.session}`);
-            localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid);
-
-            navigate("/", { replace: true });
-            setLinkLoader(false);
+            localStorage.setItem("wallet_available_status", `${data?.wallet_available_status}`);
+            dispatch(updateUserDetails({ ...data }));
+            setTimeout(() => {
+              navigate("/", { replace: true });
+              setLinkLoader(false);
+            }, 2000);
           } else {
             setLinkLoader(false);
             setMsgError("Invalid Link or Password Combination");

src/components/Cards/AvailableJobsCard.jsx

@@ -85,7 +85,7 @@ export default function AvailableJobsCard({
                 //   backgroundImage: `url('${image}')`,
                 // }}
               >
-                <div className="flex flex-col h-full bg-slate-100 p-2 rounded-md">
+                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
                   <p>{datas.description}</p>
                 </div>
               </div>
@@ -95,7 +95,7 @@ export default function AvailableJobsCard({
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
                   <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
                       {thePrice}
                     </p>

src/components/History/JobsCompleted.jsx

@@ -55,20 +55,20 @@ function JobsCompleted() {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4">Amount</th>
+            <th className="p-4">Date</th>
+            <th className="p-4">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -77,9 +77,9 @@ function JobsCompleted() {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4">{date}</td>
+                        <td className="p-4">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -97,7 +97,7 @@ function JobsCompleted() {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/RewardsTable.jsx

@@ -52,20 +52,20 @@ export const RewardsTable = memo(() => {
     <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
     : familyRewardHistory.data.length ?
     <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
-            <tr className='text-slate-600'>
-            <th className="p-2"></th>
-            <th className="p-2">Amount</th>
-            <th className="p-2">Date</th>
-            <th className="p-2">Confirmation</th>
+        <thead className='w-full'>
+            <tr className='text-slate-600 dark:text-white'>
+            <th className="p-4"></th>
+            <th className="p-4">Amount</th>
+            <th className="p-4">Date</th>
+            <th className="p-4">Confirmation</th>
             </tr>
         </thead>
         <tbody>
             {currentReward.map((item, index) => {
                 let date = new Date(item.added).toLocaleDateString()
                 return (
-                    <tr key={index} className='text-slate-500'>
-                        <td className="p-2">
+                    <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                        <td className="p-4">
                             <div className='flex items-center gap-2'>
                                 <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
@@ -74,9 +74,9 @@ export const RewardsTable = memo(() => {
                                 </div>
                             </div>
                         </td>
-                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
-                        <td className="p-2">{date}</td>
-                        <td className="p-2">{item.confirmation}</td>
+                        <td className="p-4">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-4">{date}</td>
+                        <td className="p-4">{item.confirmation}</td>
                     </tr>
                 )
             }
@@ -94,7 +94,7 @@ export const RewardsTable = memo(() => {
     }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/History/index.jsx

@@ -276,7 +276,7 @@ export default function History() {
                     </button>
                 </div> */}
                 {/* END OF switch button */}
-                <div className="history-tables w-full bg-red-50 overflow-x-auto">
+                <div className="history-tables w-full bg-red-50 dark:bg-dark-white overflow-x-auto">
                     {/* PURCHASE SECTION */}
                     {selectedTab == 'purchases' &&
                         <div className="wallet w-full">

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -80,18 +80,18 @@ function ActiveJobs(props) {
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 30mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 5000);
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -74,18 +74,18 @@ function ActiveJobsMedia(props) {
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 30mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });
       }, 5000);
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/MyWallet/WalletComponent/PurchasesTable.jsx

@@ -18,21 +18,21 @@ function PurchasesTable({purchase}) {
     <div className='flex flex-col justify-between min-h-[500px]'>
         {purchase.data.length ?
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-            <thead className='border-b-2'>
-                <tr className='text-slate-600'>
-                <th className="p-2">Trx.</th>
-                <th className="p-2">Amount</th>
-                <th className="p-2">Fee</th>
+            <thead className='w-full'>
+                <tr className='text-slate-600 dark:text-white'>
+                <th className="p-4">Trx.</th>
+                <th className="p-4">Amount</th>
+                <th className="p-4">Fee</th>
                 </tr>
             </thead>
             <tbody>
                 {currentPurchase.map((item, index) => (
-                <tr key={index} className='text-slate-500'>
-                    <td className="p-2">{item.added_date}<br />
+                <tr key={index} className='dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300'>
+                    <td className="p-4">{item.added_date}<br />
                     <b>{item.confirmation} </b>
                     </td>
-                    <td className="p-2">{item.amount}</td>
-                    <td className="p-2">{item.fee}</td>
+                    <td className="p-4">{item.amount}</td>
+                    <td className="p-4">{item.fee}</td>
                 </tr>
                 ))}
             </tbody>
@@ -48,7 +48,7 @@ function PurchasesTable({purchase}) {
         }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList borderTop={false} onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -21,28 +21,28 @@ function RecentActivityTable({ payment }) {
     <div className="flex flex-col justify-between min-h-[500px]">
       {payment?.data?.length > 0 ? 
         <table className="wallet-activity w-full table-auto border-collapse text-left">
-          <thead className="border-b-2">
-            <tr className="text-slate-600">
-              <th className="p-2">Date</th>
-              <th className="p-2">Trx.</th>
-              <th className="p-2">Amnt./Fee</th>
-              <th className="p-2">Status</th>
+          <thead className="w-full">
+            <tr className="text-slate-600 dark:text-white">
+              <th className="p-4">Date</th>
+              <th className="p-4">Trx.</th>
+              <th className="p-4">Amnt./Fee</th>
+              <th className="p-4">Status</th>
             </tr>
           </thead>
           <tbody>
             {currentActivity.map((item, index) => (
-              <tr key={index} className="text-slate-500">
-                <td className="p-2">{item.trx_date}</td>
+              <tr key={index} className="dark:text-white dark:bg-dark-white border-y dark:border-[#5356fb29] hover:bg-gray-50 dark:hover:bg-gray-50 dark:hover:text-black transition-all duration-300">
+                <td className="p-4">{item.trx_date}</td>
                 <td
                   className="p-4"
                   dangerouslySetInnerHTML={{ __html: item.recipient }}
                 ></td>
-                <td className="p-2">
+                <td className="p-4">
                   {item.amount}
                   <br />
                   {item.fee}
                 </td>
-                <td className="p-2">{item.status}</td>
+                <td className="p-4">{item.status}</td>
               </tr>
             ))}
           </tbody>
@@ -70,6 +70,7 @@ function RecentActivityTable({ payment }) {
         data={payment?.data}
         start={indexOfFirstItem}
         stop={indexOfLastItem}
+        borderTop={false}
       />
       {/* END OF PAGINATION BUTTON */}
     </div>

src/components/Pagination/PaginatedList.jsx

@@ -1,7 +1,7 @@
-const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+const PaginatedList = ({ onClick, prev, next, data, start, stop, borderTop=true }) => {
   if (data?.length > process.env.REACT_APP_ITEM_PER_PAGE) {
     return (
-      <div className="p-3 flex justify-center items-center min-h-[70px] space-x-2 border-t-2 w-full">
+      <div className={`p-3 flex justify-center items-center min-h-[70px] space-x-2 w-full ${borderTop ? 'border-t-2' : 'border-t-0'}`}>
         {/* Render pagination buttons */}
         {!prev && (
           <button

src/components/Partials/Layout.jsx

@@ -53,12 +53,12 @@ export default function Layout({ children }) {
               <Header sidebarHandler={() => setMobileSidebar.toggle()} logoutModalHandler={logoutModalHandler} />
             </div>
             {/* container */}
-            <div className="nft-container 2xl:space-x-8 h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center xl:flex-row xl:justify-between gap-4">
-              <div className="flex-[80%] 2xl:flex-[85%] w-full">
+            <div className="nft-container h-full mb-12 lg:mt-[140px] mt-24 xl:mt-10 flex flex-col items-start justify-center 2xl:flex-row 2xl:justify-between gap-10">
+              <div className="w-full 2xl:w-[calc(100%-250px)]">
                 {children && children}
               </div>
 
-              <div className="nft-right-side-content flex-[20%] 2xl:flex-[15%] w-full h-full 2xl:flex justify-center 2xl:justify-end relative">
+              <div className="nft-right-side-content w-full 2xl:w-[200px] 2xl:flex justify-center 2xl:justify-end relative">
                 <RightSideBar myJobList={userJobList} />
               </div>
             </div>

src/components/Partials/Sidebar.jsx

@@ -106,7 +106,7 @@ export default function Sidebar({
           }`}
         >
           <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-sky-blue">Menu</h1>
+            <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Menu</h1>
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
@@ -141,11 +141,11 @@ export default function Sidebar({
         {userDetails?.account_type !== "FAMILY" && (
           <div
             className={`menu-item transition-all duration-300 ease-in-out ${
-              sidebar ? "my-5" : ""
+              sidebar ? "mb-5" : "mb-2"
             }`}
           >
             <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
+              <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Family</h1>
             </div>
             <div className="items">
               <ul className="flex flex-col space-y-6">
@@ -206,8 +206,8 @@ export default function Sidebar({
                 }`}
               >
                 <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
-                    My Jobs
+                  <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>
+                    Jobs
                   </h1>
                 </div>
                 <div className="items">
@@ -321,7 +321,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
         </span>
         <span
           className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-            sidebar ? "active flex-1" : "w-0"
+            sidebar ? "active flex-1" : "hidden"
           }`}
         >
           {title && title}