WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

history table list adjusted and wallet display fixed

Browse Source
This commit was merged in pull request #749.
This commit is contained in:
victorAnumudu
2024-07-09 15:26:46 +01:00
parent f880afabb0
commit 9b0ff4a1e6
8 changed files with 63 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/History/JobsCompleted.jsx
+12 -12
View File
@@ -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
+12 -12
View File
@@ -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
+1 -1
View File
@@ -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">