From 3624743c675c8d9e4425fdb54bd110a6f44b4e55 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Mon, 8 May 2023 21:13:00 +0100
Subject: [PATCH] pagination display re-aligned

---
 src/components/History/HistoryTable.jsx                     | 4 ++--
 src/components/History/index.jsx                            | 6 +++---
 src/components/MyActiveJobs/MyActiveJobTable.jsx            | 4 ++--
 src/components/MyJobs/MyJobTable.jsx                        | 4 ++--
 src/components/MyWallet/AddFund.jsx                         | 2 +-
 src/components/MyWallet/ConfirmAddFund.jsx                  | 2 +-
 src/components/MyWallet/ConfirmTransfer.jsx                 | 4 ++--
 src/components/MyWallet/TransferFund.jsx                    | 4 ++--
 src/components/MyWallet/WalletComponent/CouponTable.jsx     | 4 ++--
 src/components/MyWallet/WalletComponent/PurchasesTable.jsx  | 4 ++--
 .../MyWallet/WalletComponent/RecentActivityTable.jsx        | 4 ++--
 src/components/MyWallet/WalletComponent/ReferralTable.jsx   | 4 ++--
 src/components/Pagination/PaginatedList.jsx                 | 2 +-
 src/components/Referral/ReferralDisplay.jsx                 | 2 +-
 14 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/History/HistoryTable.jsx b/src/components/History/HistoryTable.jsx
index b4642b2..3d545b7 100644
--- a/src/components/History/HistoryTable.jsx
+++ b/src/components/History/HistoryTable.jsx
@@ -25,7 +25,7 @@ export default function HistoryTable({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
         className || ""
       }`}
     >
@@ -43,7 +43,7 @@ export default function HistoryTable({ className }) {
         />
       </div>
       {data.length &&
-      <div className="relative w-full overflow-x-auto sm:rounded-lg">
+      <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
             <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index 0fd3d53..3c01355 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -204,7 +204,7 @@ export default function History() {
             <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
                 {/* PURCHASE SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
                         {purchaseHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />
@@ -217,9 +217,9 @@ export default function History() {
 
                 {/* RECENT ACTIVITY SECTION */}
                 <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                    <div className="wallet w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                         <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                        {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                         {paymentHistory.loading ? 
                         <LoadingSpinner size='16' color='sky-blue' />
                         :
diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx
index f389c3c..6707ff7 100644
--- a/src/components/MyActiveJobs/MyActiveJobTable.jsx
+++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx
@@ -23,12 +23,12 @@ export default function MyActiveJobTable({MyJobList, className }) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
             {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     {/*<tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">*/}
diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index 3e3effc..bd28b23 100644
--- a/src/components/MyJobs/MyJobTable.jsx
+++ b/src/components/MyJobs/MyJobTable.jsx
@@ -23,7 +23,7 @@ export default function MyJobTable({MyJobList, className }) {
 
     return (
         <div
-            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
+            className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow ${
                 className || ""
             }`}
         >
@@ -41,7 +41,7 @@ export default function MyJobTable({MyJobList, className }) {
                 />
             </div>
             {MyJobList && MyJobList?.result_list &&
-            <div className="relative w-full overflow-x-auto sm:rounded-lg">
+            <div className="relative w-full overflow-x-auto sm:rounded-lg flex flex-col justify-between h-full">
                 <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
                     <tbody>
                     <tr className="text-base text-thin-light-gray whitespace-nowrap border-b dark:border-[#5356fb29]  default-border-b dark:border-[#5356fb29] ottom ">
diff --git a/src/components/MyWallet/AddFund.jsx b/src/components/MyWallet/AddFund.jsx
index 0f3271f..3c37e51 100644
--- a/src/components/MyWallet/AddFund.jsx
+++ b/src/components/MyWallet/AddFund.jsx
@@ -73,7 +73,7 @@ function AddFund({payment}) {
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="wallet w-full  md:p-8 p-4 h-full max-h-[590px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index 7532948..a34e675 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -117,7 +117,7 @@ function ConfirmAddFund({payment}) {
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
                 <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :
diff --git a/src/components/MyWallet/ConfirmTransfer.jsx b/src/components/MyWallet/ConfirmTransfer.jsx
index 5363634..3e1f5d5 100644
--- a/src/components/MyWallet/ConfirmTransfer.jsx
+++ b/src/components/MyWallet/ConfirmTransfer.jsx
@@ -151,9 +151,9 @@ function ConfirmTransfer({payment, wallet}) {
             }
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :
diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx
index 551911e..46af3ef 100644
--- a/src/components/MyWallet/TransferFund.jsx
+++ b/src/components/MyWallet/TransferFund.jsx
@@ -223,9 +223,9 @@ function TransferFund({payment, wallet}) {
             </div>
     
             <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+                <div className="wallet w-full  md:p-8 p-4 h-full max-h-[650px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                     <h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                    <p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
+                    {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
                     {payment.loading ?
                     <LoadingSpinner size='16' color='sky-blue' />
                     :
diff --git a/src/components/MyWallet/WalletComponent/CouponTable.jsx b/src/components/MyWallet/WalletComponent/CouponTable.jsx
index 5993df3..b495dc0 100644
--- a/src/components/MyWallet/WalletComponent/CouponTable.jsx
+++ b/src/components/MyWallet/WalletComponent/CouponTable.jsx
@@ -15,7 +15,7 @@ function CouponTable({coupon}) {
     }
 
   return (
-    <>
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -59,7 +59,7 @@ function CouponTable({coupon}) {
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/MyWallet/WalletComponent/PurchasesTable.jsx b/src/components/MyWallet/WalletComponent/PurchasesTable.jsx
index 6c23ce7..58fdc74 100644
--- a/src/components/MyWallet/WalletComponent/PurchasesTable.jsx
+++ b/src/components/MyWallet/WalletComponent/PurchasesTable.jsx
@@ -15,7 +15,7 @@ function PurchasesTable({purchase}) {
     }
 
   return (
-    <>
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -59,7 +59,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} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
index 32067a2..3dfee83 100644
--- a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+++ b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
@@ -15,7 +15,7 @@ function RecentActivityTable({payment}) {
     }
 
   return (
-    <>
+    <div className='flex flex-col justify-between h-full'>
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
@@ -59,7 +59,7 @@ function RecentActivityTable({payment}) {
     {/* PAGINATION BUTTON */}
     <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payment?.data?.length ? true : false} data={payment?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/MyWallet/WalletComponent/ReferralTable.jsx b/src/components/MyWallet/WalletComponent/ReferralTable.jsx
index 02418c6..15e25d7 100644
--- a/src/components/MyWallet/WalletComponent/ReferralTable.jsx
+++ b/src/components/MyWallet/WalletComponent/ReferralTable.jsx
@@ -15,7 +15,7 @@ function ReferralTable({history}) {
     }
 
   return (
-    <>
+    <div className='flex flex-col justify-between h-full'>
         <table className="referral-list w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>
@@ -53,7 +53,7 @@ function ReferralTable({history}) {
         {/* PAGINATION BUTTON */}
         <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
         {/* END OF PAGINATION BUTTON */}
-    </>
+    </div>
   )
 }
 
diff --git a/src/components/Pagination/PaginatedList.jsx b/src/components/Pagination/PaginatedList.jsx
index bf6a1c5..50d95cf 100644
--- a/src/components/Pagination/PaginatedList.jsx
+++ b/src/components/Pagination/PaginatedList.jsx
@@ -5,7 +5,7 @@ const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
 
   if(data.length){
     return (
-      <div className='p-3 flex justify-center items-center space-x-2'>
+      <div className='p-3 flex justify-center items-center space-x-2 border-t-2'>
         {/* Render pagination buttons */}
           {!prev &&
               <button
diff --git a/src/components/Referral/ReferralDisplay.jsx b/src/components/Referral/ReferralDisplay.jsx
index 8489016..bb155a7 100644
--- a/src/components/Referral/ReferralDisplay.jsx
+++ b/src/components/Referral/ReferralDisplay.jsx
@@ -162,7 +162,7 @@ function ReferralDisplay() {
         </div>
 
         <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-            <div className="referral w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+            <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
                 <h2 className='mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Referral List</h2>
                 {referralList.loading ? 
                 (