feat: improved leaderboard page sizing + popup

Author: kevinjosethomas

src/components/Leaderboard/LeaderboardColumn.tsx

@@ -19,9 +19,9 @@ export const LeaderboardColumn: React.FC<Props> = ({
 }: Props) => {
   return (
     <div className="flex flex-col rounded border border-white/10 bg-background-1/60">
-      <div className="flex flex-row items-center justify-start gap-3 rounded-t bg-background-2 px-6 py-4">
-        <i className="*:h-6 *:w-6">{icon}</i>
-        <h2 className="text-2xl font-bold uppercase">{name}</h2>
+      <div className="flex flex-row items-center justify-start gap-2 rounded-t bg-background-2 px-4 py-2">
+        <i className="*:h-5 *:w-5">{icon}</i>
+        <h2 className="text-xl font-bold uppercase">{name}</h2>
       </div>
       <div className="flex w-full flex-col rounded-b">
         {ranking.map((player, index) => (

src/components/Leaderboard/LeaderboardEntry.tsx

@@ -128,7 +128,7 @@ export const LeaderboardEntry = ({
 
   return (
     <div
-      className={`relative flex w-full items-center justify-between px-6 py-2 ${index % 2 === 0 ? 'bg-opacity-0' : 'bg-white bg-opacity-[0.015]'}`}
+      className={`relative flex w-full items-center justify-between px-4 py-1.5 ${index % 2 === 0 ? 'bg-opacity-0' : 'bg-white bg-opacity-[0.015]'}`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
@@ -145,19 +145,19 @@ export const LeaderboardEntry = ({
       </div>
       <p>{elo}</p>
       {isPopupVisible && stats && (
-        <div className="absolute left-0 top-[100%] z-20 flex w-full max-w-[26rem] flex-col overflow-hidden rounded border border-white/10 bg-background-1">
-          <div className="flex w-full justify-between bg-backdrop/50 px-4 py-2">
+        <div className="absolute left-0 top-[100%] z-20 flex w-full max-w-[26rem] flex-col overflow-hidden rounded-lg border-2 border-white/20 bg-background-1 outline outline-1 outline-white/5 backdrop-blur-sm">
+          <div className="flex w-full justify-between border-b border-white/10 bg-gradient-to-r from-background-2/80 to-background-2/60 px-4 py-2">
             <p>
               <span className="font-bold">{display_name}</span>&apos;s {type}{' '}
               Statistics
             </p>
             <Link href={`/profile/${display_name}`}>
-              <i className="material-symbols-outlined select-none text-lg text-primary hover:text-human-1">
+              <i className="material-symbols-outlined select-none text-lg text-primary transition-colors hover:text-human-1">
                 open_in_new
               </i>
             </Link>
           </div>
-          <div className="flex items-center justify-between px-4 py-2">
+          <div className="flex items-center justify-between bg-gradient-to-b from-background-1 to-background-1/95 px-4 py-3">
             <div className="flex flex-col items-center justify-center gap-0.5 text-human-1">
               <p className="text-sm xl:text-base">Rating</p>
               <b className="text-3xl xl:text-3xl">{stats[ratingKey]}</b>

src/pages/leaderboard.tsx

@@ -22,6 +22,25 @@ const Leaderboard: React.FC = () => {
       id: 'regular' | 'train' | 'turing' | 'hand' | 'brain'
     }[]
   >()
+
+  const getTimeAgo = (date: Date) => {
+    const now = new Date()
+    const diffInMinutes = Math.floor(
+      (now.getTime() - date.getTime()) / (1000 * 60),
+    )
+
+    if (diffInMinutes < 1) return 'Just now'
+    if (diffInMinutes < 60)
+      return `${diffInMinutes} minute${diffInMinutes > 1 ? 's' : ''} ago`
+
+    const diffInHours = Math.floor(diffInMinutes / 60)
+    if (diffInHours < 24)
+      return `${diffInHours} hour${diffInHours > 1 ? 's' : ''} ago`
+
+    const diffInDays = Math.floor(diffInHours / 24)
+    return `${diffInDays} day${diffInDays > 1 ? 's' : ''} ago`
+  }
+
   const fetchLeaderboard = useCallback(async () => {
     const lb = await getLeaderboard()
     setLastUpdated(new Date(lb.last_updated + 'Z'))
@@ -65,31 +84,21 @@ const Leaderboard: React.FC = () => {
 
   return (
     <LeaderboardProvider>
-      <div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-8 py-[2%]">
+      <div className="mx-auto flex h-full w-[90%] flex-col items-start justify-center gap-4 py-[1%]">
         <Head>
           <title>Leaderboard – Maia Chess</title>
           <meta
             name="description"
             content="Top users across all Maia Chess leaderboards"
           />
         </Head>
-        <div className="flex flex-col">
-          <h1 className="text-4xl font-bold">Rating Leaderboards</h1>
-          <p>
-            Last Updated:{' '}
-            {lastUpdated
-              ? lastUpdated.toLocaleString(undefined, {
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric',
-                  hour: '2-digit',
-                  minute: '2-digit',
-                  hour12: true,
-                })
-              : '...'}
+        <div className="flex w-full flex-row items-end justify-between">
+          <h1 className="text-3xl font-bold">Rating Leaderboards</h1>
+          <p className="text-sm text-secondary">
+            Last updated: {lastUpdated ? getTimeAgo(lastUpdated) : '...'}
           </p>
         </div>
-        <div className="grid h-full w-full grid-cols-1 justify-start gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <div className="grid h-full w-full grid-cols-1 justify-start gap-3 md:grid-cols-2 lg:grid-cols-3">
           {leaderboard?.map((column, index) => (
             <LeaderboardColumn key={index} {...column} />
           ))}