From 2d8f080562349d49e23e34d274401cbb6619f4f9 Mon Sep 17 00:00:00 2001
From: AAYUSH TALREJA <amtalreja02@gmail.com>
Date: Sun, 5 Oct 2025 00:10:20 +0530
Subject: [PATCH 1/3] refactor: enhance PlayCard and Like components for
 improved UI and functionality

- Updated Like component to use button type and improved styling.
- Refactored PlayCard to include language badges, better avatar handling, and description truncation.
- Adjusted CSS for play card hover effects and card header styling.
- Added line clamp utility for text truncation in PlayCard description.
- Enhanced PlayShare button with consistent sizing.
---
 src/common/components/Like/Like.jsx |  12 ++-
 src/common/playlists/PlayCard.jsx   | 140 ++++++++++++++++++++--------
 src/common/playlists/PlayShare.jsx  |   2 +-
 src/common/playlists/playlist.css   |  22 +++--
 4 files changed, 125 insertions(+), 51 deletions(-)

diff --git a/src/common/components/Like/Like.jsx b/src/common/components/Like/Like.jsx
index 460ad60ff4..183ab07142 100644
--- a/src/common/components/Like/Like.jsx
+++ b/src/common/components/Like/Like.jsx
@@ -8,10 +8,14 @@ const Like = ({ onLikeClick, likeObj }) => {
   };
 
   return (
-    <button className="action counted -mr-0.5" onClick={likeClickHandler}>
-      <AiOutlineLike className={liked ? 'hidden' : 'icon'} size="24px" />
-      <AiFillLike className={liked ? 'icon' : 'hidden'} size="24px" />
-      {number > 0 ? <div className="count-value">{number}</div> : <div />}
+    <button
+      className="inline-flex items-center gap-1 -mr-0.5"
+      type="button"
+      onClick={likeClickHandler}
+    >
+      <AiOutlineLike className={liked ? 'hidden' : 'icon'} size={24} />
+      <AiFillLike className={liked ? 'icon' : 'hidden'} size={24} />
+      {number > 0 && <span className="text-sm leading-none align-middle">{number}</span>}
     </button>
   );
 };
diff --git a/src/common/playlists/PlayCard.jsx b/src/common/playlists/PlayCard.jsx
index f4ad450e19..3a4648616d 100644
--- a/src/common/playlists/PlayCard.jsx
+++ b/src/common/playlists/PlayCard.jsx
@@ -1,62 +1,122 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { BsPlayCircleFill } from 'react-icons/bs';
 import { BiLogoTypescript, BiLogoJavascript } from 'react-icons/bi';
 import PlayShare from './PlayShare.jsx';
-
-import Shimmer from 'react-shimmer-effect';
 import Like from 'common/components/Like/Like';
 import userImage from 'images/user.png';
 
+const formatDate = (dateString) => dateString || '';
+
 function PlayCard({ play, cover, likeObject }) {
-  return (
-    <Link to={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}>
-      <div className="play-card-container">
-        <div className="play-thumb-container">
-          <Shimmer>
-            <img alt="" className="play-card-thumb-img" src={cover} />
-          </Shimmer>
-          <BsPlayCircleFill className="play-icon" color="white" size={80} />
+  const [isExpanded, setIsExpanded] = useState(false);
+  if (!play || !play.github || !play.slug) return null;
+
+  const avatarSrc =
+    play?.user?.avatarUrl && play.user.avatarUrl.length ? play.user.avatarUrl : userImage;
+
+  const LanguageBadge = () => {
+    if (play.language === 'ts') {
+      return (
+        <div className="flex items-start space-x-1 bg-blue-100 text-blue-800 text-xs font-semibold px-2.5 py-0.5 rounded-md w-fit mb-3">
+          <BiLogoTypescript color="#007acc" size={16} />
+          <span>Typescript</span>
         </div>
+      );
+    }
+    if (play.language === 'js') {
+      return (
+        <div className="flex items-start space-x-1 bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded-md w-fit mb-3">
+          <BiLogoJavascript color="#F0DB4F" size={16} />
+          <span>Javascript</span>
+        </div>
+      );
+    }
+
+    return null;
+  };
+
+  const linkTo = `/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`;
 
-        {/* <div className="border" /> */}
-        <div className="card-header">{play.name}</div>
-        {play.user && (
-          <div className="author">
-            <img
-              alt="avatar"
-              className="rounded-full border border-zink"
-              height="25px"
-              loading="lazy"
-              src={
-                play?.user.avatarUrl
-                  ? play?.user.avatarUrl.length
-                    ? play?.user.avatarUrl
-                    : userImage
-                  : userImage
-              }
-              width="25px"
+  return (
+    <Link className="group block" to={linkTo}>
+      <div className="play-card-container max-w-sm bg-white rounded-xl overflow-hidden flex flex-col h-full">
+        {cover && (
+          <div className="relative h-48">
+            <img alt={play.name} className="w-full h-full object-cover" src={cover} />
+            <div className="absolute inset-0 thumb-overlay pointer-events-none" />
+            <BsPlayCircleFill
+              className="absolute inset-0 m-auto z-10 opacity-0 transition-opacity duration-200 pointer-events-none"
+              color="white"
+              size={80}
             />
-            <div className="author-name">{play?.user.displayName}</div>
           </div>
         )}
-        <div className="play-actions mt-4">
-          <div className="like-container">
-            <Like likeObj={likeObject()} onLikeClick={null} />
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <PlayShare
-                cover={cover}
-                link={`/plays/${encodeURI(play.github.toLowerCase())}/${play.slug}`}
+
+        <div className="p-5 flex flex-col flex-grow">
+          <LanguageBadge />
+
+          {play.user?.displayName && (
+            <div className="flex items-center text-sm text-gray-600 mb-4">
+              <img
+                alt="avatar"
+                className="rounded-full h-6 w-6 object-cover mr-2"
+                loading="lazy"
+                src={avatarSrc}
               />
-              {play.language === 'ts' ? (
-                <BiLogoTypescript className="lang-icon" color="#007acc" size={25} />
-              ) : (
-                <BiLogoJavascript className="lang-icon" color="#F0DB4F" size={25} />
+              <span className="font-semibold text-gray-800">{play.user.displayName}</span>
+              {play.date && (
+                <>
+                  <span className="mx-2">—</span>
+                  <span className="text-gray-500">{formatDate(play.date)}</span>
+                </>
               )}
             </div>
+          )}
+
+          <div className="card-header text-md font-bold text-gray-900 mb-2">{play.name}</div>
+
+          {play.description && (
+            <div className="mb-6 flex-grow">
+              <p className={`text-gray-700 text-xs ${!isExpanded ? 'line-clamp-3' : ''}`}>
+                {play.description}
+              </p>
+            </div>
+          )}
+
+          <div className="mt-auto flex items-center justify-between pt-4 border-t border-gray-100">
+            {likeObject &&
+              (() => {
+                const data = likeObject?.();
+
+                return (
+                  <div className="inline-flex items-center gap-2 whitespace-nowrap">
+                    <Like likeObj={data} onLikeClick={null} />
+                  </div>
+                );
+              })()}
+
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-3" onClick={(e) => e.preventDefault()}>
+                <PlayShare cover={cover} link={linkTo} />
+              </div>
+            </div>
           </div>
         </div>
       </div>
+
+      <style>
+        {`
+    .group:hover .play-card-container .relative .z-10 { opacity: 1; }
+
+    .group:hover .play-card-container .relative .thumb-overlay {
+      background-color: rgba(0, 0, 0, 0.4);
+      backdrop-filter: blur(6px);
+      -webkit-backdrop-filter: blur(6px);
+      transition: background-color 200ms ease, backdrop-filter 200ms ease;
+    }
+  `}
+      </style>
     </Link>
   );
 }
diff --git a/src/common/playlists/PlayShare.jsx b/src/common/playlists/PlayShare.jsx
index 63f9498157..51e1140ac4 100644
--- a/src/common/playlists/PlayShare.jsx
+++ b/src/common/playlists/PlayShare.jsx
@@ -115,7 +115,7 @@ function PlayShare({ cover, link }) {
           setShowModal(true);
         }}
       >
-        <IoShareOutline className="mx-2" />
+        <IoShareOutline className="mx-2 w-6 h-6" />
       </button>
     </div>
   );
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 28dc9fc45d..1f2f595f00 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -842,17 +842,18 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  border: 2px solid #757575;
+  border: 2px solid #efefef;
   border-radius: 8px;
   overflow: hidden;
   transition: transform 0.2s ease-in-out;
   width: 300px;
-  height: 100%;
+  /* height: 100%; */
   padding: 12px;
 }
 
 .play-card-container:hover {
-  transform: scale(105%);
+  transform: scale(103%);
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease-in-out;
 }
 
@@ -881,9 +882,9 @@
   font-weight: 200;
 }
 .card-header {
-  font-size: 18px;
-  padding: 10px;
-  text-align: center;
+  font-size: 15px;
+  padding: 10px 0px;
+  text-align: start;
 }
 
 .img {
@@ -960,3 +961,12 @@
 .play-card-container:hover .lang-icon {
   filter: none;
 }
+
+/* Line clamp utility for text truncation */
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}

From 6737b30c8f59b25ee265ac43c2a350abb637a84c Mon Sep 17 00:00:00 2001
From: AAYUSH TALREJA <amtalreja02@gmail.com>
Date: Sun, 5 Oct 2025 13:04:17 +0530
Subject: [PATCH 2/3] style: update playlist card width for improved layout

---
 src/common/playlists/playlist.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 1f2f595f00..4b90f9f7fc 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -846,7 +846,7 @@
   border-radius: 8px;
   overflow: hidden;
   transition: transform 0.2s ease-in-out;
-  width: 300px;
+  width: 350px;
   /* height: 100%; */
   padding: 12px;
 }

From 151b9aca53e08e938801dbcbbc65ab2aa6be0133 Mon Sep 17 00:00:00 2001
From: AAYUSH TALREJA <amtalreja02@gmail.com>
Date: Mon, 13 Oct 2025 12:50:45 +0530
Subject: [PATCH 3/3] style: update leaderboard styles and UI

---
 src/common/playleaderboard/LeaderBoard.jsx    |   1 -
 .../playleaderboard/TopPlayCreators.jsx       | 122 ++++++---
 src/common/playleaderboard/leaderBoard.css    | 231 +++++++++++++++---
 3 files changed, 276 insertions(+), 78 deletions(-)

diff --git a/src/common/playleaderboard/LeaderBoard.jsx b/src/common/playleaderboard/LeaderBoard.jsx
index 9b7f70a77c..32856f0706 100644
--- a/src/common/playleaderboard/LeaderBoard.jsx
+++ b/src/common/playleaderboard/LeaderBoard.jsx
@@ -78,7 +78,6 @@ const LeaderBoard = () => {
           <div className="flex flex-col m-4 items-center">
             {publishedPlays && top10Contributors && (
               <>
-                <div className="leaderboard-heading">Top play creators of all time</div>
                 <div>
                   <TopPlayCreators topPlayCreators={top10Contributors} />
                 </div>
diff --git a/src/common/playleaderboard/TopPlayCreators.jsx b/src/common/playleaderboard/TopPlayCreators.jsx
index c2151b1f71..719ed2c12f 100644
--- a/src/common/playleaderboard/TopPlayCreators.jsx
+++ b/src/common/playleaderboard/TopPlayCreators.jsx
@@ -1,56 +1,100 @@
+import React from 'react';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
+import Paper from '@mui/material/Paper';
+import TagRoundedIcon from '@mui/icons-material/TagRounded';
 import './leaderBoard.css';
 
 const TopPlayCreators = ({ topPlayCreators }) => {
-  const profilePicture = (name, avatarUrl) => {
-    return (
-      <div className="flex flex-row items-center gap-4">
-        <img
-          alt={name}
-          className="rounded-full border-solid h-8 w-8"
-          src={avatarUrl}
-          title={name}
-        />
-        <div className="leaderboard-table-cell">{name}</div>
-      </div>
-    );
+  const firstPlace = topPlayCreators.length > 0 ? topPlayCreators[0] : null;
+  const secondPlace = topPlayCreators.length > 1 ? topPlayCreators[1] : null;
+  const thirdPlace = topPlayCreators.length > 2 ? topPlayCreators[2] : null;
+
+  const renderRankIcon = (rank) => {
+    return <TagRoundedIcon className="rank-icon rank-same" />;
   };
 
   return (
-    <TableContainer className="leaderboard-container">
-      <Table aria-label="leader board">
-        <TableHead>
-          <TableRow>
-            <TableCell align="left" className="leaderboard-table-header">
-              Name
-            </TableCell>
-            <TableCell align="center" className="leaderboard-table-header">
-              Number of plays
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {topPlayCreators.map((creator) => (
-            <TableRow
-              key={creator.displayName}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
-            >
-              <TableCell align="left" className="leaderboard-table-cell" component="th" scope="row">
-                {profilePicture(creator.displayName, creator.avatarUrl)}
-              </TableCell>
-              <TableCell align="center" className="leaderboard-table-cell">
-                {creator.count}
+    <div className="leaderboard-wrapper">
+      <h2 className="leaderboard-title">Top Play Creators of All Time</h2>
+
+      <div className="podium-container">
+        {secondPlace && (
+          <div className="podium-card podium-second">
+            <img
+              alt={secondPlace.displayName}
+              className="podium-avatar"
+              src={secondPlace.avatarUrl}
+            />
+            <div className="podium-name">{secondPlace.displayName}</div>
+            <div className="podium-rank">2nd</div>
+          </div>
+        )}
+        {firstPlace && (
+          <div className="podium-card podium-first">
+            <img
+              alt={firstPlace.displayName}
+              className="podium-avatar"
+              src={firstPlace.avatarUrl}
+            />
+            <div className="podium-name">{firstPlace.displayName}</div>
+            <div className="podium-rank">1st</div>
+          </div>
+        )}
+        {thirdPlace && (
+          <div className="podium-card podium-third">
+            <img
+              alt={thirdPlace.displayName}
+              className="podium-avatar"
+              src={thirdPlace.avatarUrl}
+            />
+            <div className="podium-name">{thirdPlace.displayName}</div>
+            <div className="podium-rank">3rd</div>
+          </div>
+        )}
+      </div>
+
+      <TableContainer className="leaderboard-table-container" component={Paper}>
+        <Table aria-label="leaderboard table">
+          <TableHead>
+            <TableRow>
+              <TableCell className="leaderboard-table-header">Place</TableCell>
+              <TableCell className="leaderboard-table-header">Creator Name</TableCell>
+              <TableCell align="right" className="leaderboard-table-header">
+                Number of Plays
               </TableCell>
             </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
+          </TableHead>
+          <TableBody>
+            {topPlayCreators.map((creator, index) => (
+              <TableRow key={creator.displayName}>
+                <TableCell className="leaderboard-table-cell rank-cell">
+                  {renderRankIcon(index + 1)}
+                  {index + 1}
+                </TableCell>
+                <TableCell className="leaderboard-table-cell">
+                  <div className="user-profile">
+                    <img
+                      alt={creator.displayName}
+                      className="table-avatar"
+                      src={creator.avatarUrl}
+                    />
+                    {creator.displayName}
+                  </div>
+                </TableCell>
+                <TableCell align="right" className="leaderboard-table-cell points-cell">
+                  {creator.count} Plays
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+      </TableContainer>
+    </div>
   );
 };
 
diff --git a/src/common/playleaderboard/leaderBoard.css b/src/common/playleaderboard/leaderBoard.css
index 0af9bc10e9..bab6f4799f 100644
--- a/src/common/playleaderboard/leaderBoard.css
+++ b/src/common/playleaderboard/leaderBoard.css
@@ -1,39 +1,194 @@
-.leaderboard-container {
-  border: 0 solid black;
-  border-radius: 5px;
-  background-color: white;
-  margin-top: 10px;
-  margin-bottom: 20px;
-  padding: 5px 2rem 1rem 2rem;
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
-    0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-    var(--tw-shadow);
-}
+/* .leaderboard-container {
+    border: 0 solid black;
+    border-radius: 5px;
+    background-color: white;
+    margin-top: 10px;
+    margin-bottom: 20px;
+    padding: 5px 2rem 1rem 2rem;
+    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
+      0 8px 10px -6px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+      var(--tw-shadow);
+  }
+  
+  .leaderboard-table-cell {
+    padding: 6px !important;
+  }
+  
+  .leaderboard-table-header {
+    font-weight: 700 !important;
+    font-family: var(--ff-accent) !important;
+  }
+  
+  .leaderboard-heading {
+    font-family: var(--ff-accent);
+    font-size: 32px !important;
+  }
+  
+  .leaderboard-text {
+    font-family: var(--ff-accent) !important;
+    font-size: var(--fs-md) !important;
+  }
+  
+  .leaderboard-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+  } */
+  
+.leaderboard-wrapper {
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    font-family: 'Inter', sans-serif;
+    max-width: 800px;
+    margin: 20px auto;
+  }
+  
+  .leaderboard-title {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1a202c;
+    margin-bottom: 24px;
+  }
+  
+  .podium-container {
+    display: flex;
+    justify-content: center;
+    align-items: flex-end;
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+  
+  .podium-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 16px;
+    border-radius: 12px;
+    width: 120px;
+    color: #4a5568;
+    border: 1px solid #e2e8f0;
+    transition: transform 0.2s ease-in-out;
+  }
+  
+  .podium-card:hover {
+      transform: translateY(-5px);
+  }
+  
+  .podium-avatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    border: 3px solid #fff;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin-bottom: 8px;
+  }
+  
+  .podium-name {
+    font-weight: 600;
+    font-size: 14px;
+    color: #2d3748;
+  }
+  
+  .podium-rank {
+      font-size: 12px;
+      font-weight: 500;
+      margin-bottom: 4px;
+  }
+  
+  .podium-points {
+    font-weight: 700;
+    font-size: 14px;
+    color: #1a202c;
+  }
+  
+  .podium-second {
+    background-color: #f7fafc;
+    height: 170px;
+    order: 1;
+  }
+  
+  .podium-first {
+    background-color: #fffbef; 
+    height: 200px;
+    border-color: #f6e05e; 
+    order: 2;
+  }
+  
+  .podium-third {
+    background-color: #fdf5f2;
+    height: 150px;
+    order: 3;
+  }
+  
+  .winner-announcement {
+    text-align: center;
+    color: #4a5568;
+    font-size: 14px;
+    margin-bottom: 32px;
+    line-height: 1.5;
+  }
+  
 
-.leaderboard-table-cell {
-  padding: 6px !important;
-}
-
-.leaderboard-table-header {
-  font-weight: 700 !important;
-  font-family: var(--ff-accent) !important;
-}
-
-.leaderboard-heading {
-  font-family: var(--ff-accent);
-  font-size: 32px !important;
-}
-
-.leaderboard-text {
-  font-family: var(--ff-accent) !important;
-  font-size: var(--fs-md) !important;
-}
-
-.leaderboard-loader {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
+  .leaderboard-table-container {
+    box-shadow: none !important;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px !important;
+  }
+  
+  .leaderboard-table-header {
+    font-weight: 600 !important;
+    font-size: 12px !important;
+    color: #718096 !important;
+    text-transform: uppercase;
+    background-color: #f7fafc !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+  }
+  
+  .leaderboard-table-cell {
+    font-size: 14px !important;
+    color: #2d3748 !important;
+    border-bottom: 1px solid #e2e8f0 !important;
+  }
+  
+  .user-profile {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-weight: 500;
+  }
+  
+  .table-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+  }
+  
+  .rank-cell {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600 !important;
+  }
+  
+  .points-cell {
+    font-weight: 600 !important;
+  }
+  
+  .rank-icon {
+    font-size: 16px !important;
+  }
+  .rank-up {
+    color: #38a169; 
+  }
+  .rank-down {
+    color: #e53e3e; 
+  }
+  .rank-same {
+    color: #a0aec0; 
+  }
\ No newline at end of file