From f3b2ba85747cf79e6ec5b0c8ffca6b7f3abc7ec7 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Fri, 16 Feb 2024 11:04:12 +0200
Subject: [PATCH] styling

---
 pages/leaderboard/[period].tsx | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/pages/leaderboard/[period].tsx b/pages/leaderboard/[period].tsx
index b10e0e4e9..417244424 100644
--- a/pages/leaderboard/[period].tsx
+++ b/pages/leaderboard/[period].tsx
@@ -614,19 +614,25 @@ const MarketBreakdownModal = ({ markets }: { markets: MarketSummary[] }) => {
     <>
       <button onClick={() => setIsOpen(true)}>View Breakdown</button>
       <Modal open={isOpen} onClose={() => setIsOpen(false)}>
-        <Dialog.Panel className="flex max-h-[250px] flex-col gap-y-6 overflow-y-auto rounded-ztg-10 bg-white p-[15px] py-5 md:max-h-[600px]">
-          <div>
-            total:{" "}
-            {markets.reduce<number>((prev, curr) => {
-              return prev + curr.profit;
-            }, 0)}
-          </div>
+        <Dialog.Panel className="flex max-h-[350px] w-full max-w-[600px] flex-col gap-y-6 overflow-y-auto rounded-ztg-10 bg-white p-[15px] py-5 md:max-h-[600px]">
+          <div className="text-lg font-bold">Market Profit Breakdown</div>
           {markets
             .sort((a, b) => b.profit - a.profit)
             .map((market, index) => (
-              <div key={index}>
-                <div>{market.question}</div>
-                <div>${market.profit.toFixed(2)}</div>
+              <div key={index} className="flex">
+                <Link
+                  href={`/markets/${market.marketId}`}
+                  className="line-clamp-1 max-w-[80%]"
+                >
+                  {market.question}
+                </Link>
+                <div
+                  className={`ml-auto ${
+                    market.profit > 0 ? "text-green-600" : "text-red-600"
+                  }`}
+                >
+                  ${market.profit.toFixed(2)}
+                </div>
               </div>
             ))}
         </Dialog.Panel>