Skip to content

Commit

Permalink
fix table head
Browse files Browse the repository at this point in the history
  • Loading branch information
@kayceeDev
kayceeDev committed Feb 2, 2025
1 parent da1234c commit 8254b9e
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 23 deletions.
2 changes: 1 addition & 1 deletion frontend/src/pages/DashboardLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function DashboardLayout({ children, title = 'zkLend Position' })
<div className="min-h-screen flex w-screen lg:w-[calc(100vw-372px)] lg:ml-[372px] md:justify-center ">
<Sidebar items={dashboardItems} />
<div className="relative flex justify-center border border-solid items-center w-full h-full">
<div className="flex flex-col justify-center gap-2.5 p-6 pt-5 mt-24 mb-12 h-full w-full md:w-auto max-w-[400px] md:max-w-none">
<div className="flex flex-col justify-center gap-2.5 p-6 pt-5 mt-24 mb-12 h-full w-full md:w-auto md:max-w-none">
<h1 className="mt-4 text-2xl font-semibold text-second-primary text-center">{title}</h1>
<div className="w-full gap-6 rounded-2xl text-second-primary text-center flex justify-center flex-col ">
{children}
Expand Down
51 changes: 29 additions & 22 deletions frontend/src/pages/position-history/PositionHistory.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,20 +32,23 @@ function PositionHistory() {
pending: 'text-[#83919F]',
};


return (
<DashboardLayout title="Position History">
<div className="flex flex-col items-center justify-center gap-0.5 pt-6 rounded-lg text-primary text-center">
<div className="flex gap-2 min-[800px]:w-[600px] w-full">
<Card
label="Health Factor"
value={cardData?.health_ratio || '0.00'}
icon={<HealthIcon className="mr-[5px] w-8 h-8 bg-border-color rounded-full flex items-center justify-center p-2" />}
icon={
<HealthIcon className="mr-[5px] w-8 h-8 bg-border-color rounded-full flex items-center justify-center p-2" />
}
/>
<Card
label="Borrow Balance"
cardData={cardData?.borrowed || '0.00'}
icon={<EthIcon className="mr-[5px] w-8 h-8 bg-border-color rounded-full flex items-center justify-center p-2" />}
icon={
<EthIcon className="mr-[5px] w-8 h-8 bg-border-color rounded-full flex items-center justify-center p-2" />
}
/>
</div>
</div>
Expand All @@ -54,24 +57,24 @@ function PositionHistory() {
<p>Position History</p>
</div>

<div className="border w-full max-[1500px]:max-w-[650px] border-[#36294E] rounded-lg overflow-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-[#12072180] [&::-webkit-scrollbar-thumb]:bg-[#36294E] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#4b3b69]">
<div className="border max-[400px]:w-[500px] max-[1500px]:max-w-[650px] border-[#36294E] rounded-lg overflow-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar]:h-1 [&::-webkit-scrollbar-track]:bg-[#12072180] [&::-webkit-scrollbar-thumb]:bg-[#36294E] [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-[#4b3b69]">
{isPending ? (
<div className="flex justify-center items-center">
<Spinner loading={isPending} />
</div>
) : (
<table className="w-full table-auto">
<table className="w-full table-auto">
<thead>
<tr className="border-b border-[#36294E] text-[#9CA3AF] text-[clamp(0.5rem,2vw,1rem)] font-normal">
<th className="py-4 px-4 text-left w-[5%]">#</th>
<tr className="border-b border-[#36294E] text-[#9CA3AF] text-[clamp(0.5rem,2vw,1rem)] font-normal whitespace-nowrap">
<th className=" py-4 px-4 text-left w-[5%]">#</th>
<th className="py-4 px-4 text-left w-[12%]">Token</th>
<th className="py-4 px-4 text-center w-[8%]">Amount</th>
<th className="py-4 px-4 text-center w-[15%]">Created At</th>
<th className="py-4 px-4 text-center w-[10%]">Status</th>
<th className="py-4 px-4 text-center w-[12%]">Start Price</th>
<th className="py-4 px-4 text-center w-[10%]">Multiplier</th>
<th className="py-4 px-4 text-center w-[10%]">Liquidated</th>
<th className="py-4 px-4 text-center w-[15%]">Closed At</th>
<th className=" py-4 px-4 text-center w-[8%]">Amount</th>
<th className="py-4 px-4 hidden lg:table-cell text-center w-[15%]">Created At</th>
<th className=" py-4 px-4 text-center w-[10%]">Status</th>
<th className=" hidden lg:table-cell py-4 px-4 text-center w-[12%]">Start Price</th>
<th className=" hidden lg:table-cell py-4 px-4 text-center w-[10%]">Multiplier</th>
<th className=" hidden lg:table-cell py-4 px-4 text-center w-[10%]">Liquidated</th>
<th className="hidden lg:table-cell py-4 px-4 text-center w-[15%]">Closed At</th>
<th className="py-4 px-4 text-center w-[3%]">
<img src={filterIcon} alt="filter-icon" draggable="false" />
</th>
Expand All @@ -95,17 +98,21 @@ function PositionHistory() {
</div>
</td>
<td className="py-4 px-4 text-white text-center">{data.amount}</td>
<td className="py-4 px-4 text-white text-center">{data.created_at}</td>
<td className={`py-4 px-4 text-center font-semibold ${statusStyles[data.status.toLowerCase()]}`}>
<td className="py-4 px-4 hidden lg:table-cell text-white text-center">{data.created_at}</td>
<td
className={`py-4 px-4 text-center font-semibold ${statusStyles[data.status.toLowerCase()]}`}
>
{data.status}
</td>
<td className="py-4 px-4 text-white text-center">{data.start_price}</td>
<td className="py-4 px-4 text-white text-center">{data.multiplier}</td>
<td className="py-4 px-4 text-white text-center">{data.is_liquidated.toString()}</td>
<td className="py-4 px-4 text-white text-center">{data.closed_at}</td>
<td className="py-4 px-4 text-center">
<td className="py-4 hidden lg:table-cell px-4 text-white text-center">{data.start_price}</td>
<td className="py-4 hidden lg:table-cell px-4 text-white text-center">{data.multiplier}</td>
<td className="py-4 hidden lg:table-cell px-4 text-white text-center">
{data.is_liquidated.toString()}
</td>
<td className="py-4 hidden lg:table-cell px-4 text-white text-center">{data.closed_at}</td>
<td className="py-4 px-4 text-center">
<button
className="text-white p-1 rounded hover:bg-white/10 transition-colors"
className="t p-1 rounded text-[#433B5A] hover:bg-white/10 hover:text-[#fff] cursor-pointer transition-colors"
onClick={() => setSelectedPosition({ data, index })}
>
&#x22EE;
Expand Down

0 comments on commit 8254b9e

Please sign in to comment.