feat: leaderboard responsive improvements

mrgnlabs · Oct 16, 2023 · 38111be · 38111be
1 parent 94c4238
commit 38111be
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 21 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsLeaderBoard.tsx
@@ -181,26 +181,19 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
 
   return (
     <>
-      <p>Total users: {leaderboardSettings.totalUserCount}</p>
       <TableContainer
         component={Paper}
-        className="h-full w-4/5 mt-10 sm:w-full bg-[#131619] rounded-xl overflow-x-auto"
+        className="h-full w-full mt-10 sm:w-full bg-[#131619] rounded-xl overflow-x-auto"
       >
         <Table>
           <TableHead>
             <TableRow className="bg-zinc-800">
               <TableCell
                 align="center"
-                className={clsx(
-                  "text-white text-base font-aeonik border-none cursor-pointer",
-                  leaderboardSettings.orderCol === "total_points" && "flex items-center justify-center gap-3"
-                )}
+                className="text-white text-base font-aeonik border-none cursor-pointer"
                 onClick={() => setOrderCol("total_points")}
               >
                 Rank
-                {leaderboardSettings.orderCol === "total_points" && (
-                  <SortIcon orderDir={leaderboardSettings.orderDir} />
-                )}
               </TableCell>
               <TableCell className="text-white text-base font-aeonik border-none">User</TableCell>
               <TableCell
@@ -249,10 +242,16 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
               </TableCell>
               <TableCell
                 align="right"
-                className="text-white text-base font-aeonik border-none cursor-pointer"
+                className={clsx(
+                  "text-white text-base font-aeonik border-none cursor-pointer",
+                  leaderboardSettings.orderCol === "total_points" && "flex flex-row items-center justify-end gap-3"
+                )}
                 onClick={() => setOrderCol("total_points")}
               >
                 Total Points
+                {leaderboardSettings.orderCol === "total_points" && (
+                  <SortIcon orderDir={leaderboardSettings.orderDir} />
+                )}
               </TableCell>
             </TableRow>
           </TableHead>
@@ -266,8 +265,8 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                         className={clsx(
                           "border-none",
                           index === 0 && "w-[10%]",
-                          index === 1 && "w-[15%]",
-                          index > 1 && "w-[15%]"
+                          index === 1 && "w-[15%] min-w-[190px]",
+                          index > 1 && "w-[15%] min-w-[190px]"
                         )}
                         key={index}
                       >
@@ -314,7 +313,7 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                   </TableCell>
                   <TableCell
                     className={clsx(
-                      "text-base border-none font-aeonik w-[15%]",
+                      "text-base border-none font-aeonik w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >
@@ -323,15 +322,15 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                       target="_blank"
                       rel="noopener noreferrer"
                       style={{ textDecoration: "none", color: "inherit" }}
-                      className="hover:text-[#DCE85D]"
+                      className={clsx("hover:text-[#DCE85D]")}
                     >
                       {data.id}
                     </a>
                   </TableCell>
                   <TableCell
                     align="right"
                     className={clsx(
-                      "border-none font-mono text-sm w-[15%]",
+                      "border-none font-mono text-sm w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >
@@ -340,7 +339,7 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                   <TableCell
                     align="right"
                     className={clsx(
-                      "border-none font-mono text-sm w-[15%]",
+                      "border-none font-mono text-sm w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >
@@ -349,7 +348,7 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                   <TableCell
                     align="right"
                     className={clsx(
-                      "border-none font-mono text-sm w-[15%]",
+                      "border-none font-mono text-sm w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >
@@ -360,7 +359,7 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                   <TableCell
                     align="right"
                     className={clsx(
-                      "border-none font-mono text-sm w-[15%]",
+                      "border-none font-mono text-sm w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >
@@ -369,7 +368,7 @@ export const PointsLeaderBoard: FC<PointsLeaderBoardProps> = ({ currentUserId })
                   <TableCell
                     align="right"
                     className={clsx(
-                      "border-none font-mono text-sm w-[15%]",
+                      "border-none font-mono text-sm w-[15%] min-w-[190px]",
                       data.id === currentUserId ? "text-[#DCE85D]" : "text-white"
                     )}
                   >

diff --git a/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx b/apps/marginfi-v2-ui/src/components/desktop/Points/PointsOverview.tsx
@@ -12,7 +12,7 @@ interface PointsOverviewProps {
 export const PointsOverview: FC<PointsOverviewProps> = ({ userPointsData }) => {
   return (
     <>
-      <div className="grid grid-cols-2 gap-5 max-w-[800px] mx-auto w-full">
+      <div className="grid grid-cols-2 gap-5 max-w-[800px] mx-auto w-full mt-2">
         <Card className="bg-[#131619] h-24 rounded-xl" elevation={0}>
           <CardContent>
             <Typography color="#868E95" className="font-aeonik font-[300] text-base flex gap-1" gutterBottom>

diff --git a/apps/marginfi-v2-ui/src/pages/points.tsx b/apps/marginfi-v2-ui/src/pages/points.tsx
@@ -54,7 +54,7 @@ const Points: FC = () => {
   return (
     <>
       <PageHeader>points</PageHeader>
-      <div className="flex flex-col items-center w-full sm:w-4/5 max-w-7xl gap-5 py-[64px] sm:py-[32px]">
+      <div className="flex flex-col items-center w-full max-w-8xl px-10 gap-5 py-[64px] sm:py-[32px]">
         {!connected ? (
           <PointsConnectWallet />
         ) : currentFirebaseUser ? (

diff --git a/apps/marginfi-v2-ui/tailwind.config.js b/apps/marginfi-v2-ui/tailwind.config.js
@@ -32,6 +32,9 @@ module.exports = {
         warning: "#daa204",
         error: "#e07d6f",
       },
+      maxWidth: {
+        "8xl": "90rem",
+      },
     },
     fontFamily: {
       aeonik: ['"Aeonik Pro"'],