feat: Leaderboard design Improvement (#470)

* ui fixed with first leaderboard user to be highlighted
th3cyb3rhub · Oct 9, 2023 · e705eb1 · e705eb1
1 parent 781049e
commit e705eb1
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 26 deletions.
diff --git a/src/components/CaptureTheFlag/CTF.jsx b/src/components/CaptureTheFlag/CTF.jsx
@@ -20,7 +20,7 @@ import UnderMaintenance from "../Other/UnderMaintenance/UnderMaintenance";
 import apiStatus from "../../features/apiStatus";
 // import CtfCard from "./CtfCard";
 import CtfChallenges from "./CTFCards/CtfChallenges";
-import { CrownIcon } from "../Header/Navbar/NavbarElements";
+import { RankTrophy } from "../Header/Navbar/NavbarElements";
 import { RouteLink } from "../Dashboard/Sidebar/SidebarElements";
 import LoadingSpinner from "../Other/MixComponents/Spinner/LoadingSpinner";
 
@@ -125,7 +125,7 @@ const CTF = () => {
                                 backgroundColor: "#252525",
                             }}
                         >
-                            <CrownIcon style={{ fontSize: "1.5rem" }} />
+                            <RankTrophy style={{ fontSize: "1rem" }} />
                             <span> Leaderboard </span>
                         </SearchDifficulty>
                     </RouteLink>

diff --git a/src/components/Dashboard/Profile/UserPoints/UserPoints.jsx b/src/components/Dashboard/Profile/UserPoints/UserPoints.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    RankCgCrown,
+    RankTrophy,
     RankContainer,
     RankNumber,
     RankNumberContainer,
@@ -23,7 +23,7 @@ const UserPoints = ({ userDetail, allUserDetail, blogs }) => {
         <UserPointsContainer>
             <RankContainer>
                 <RankNumberContainer>
-                    {userRank === 1 ? <RankCgCrown /> : null}
+                    {userRank === 1 ? <RankTrophy /> : null}
                     <RankNumber userRank={userRank}>{userRank}</RankNumber>
                 </RankNumberContainer>
                 <h5>Rank</h5>

diff --git a/src/components/Dashboard/Profile/UserPoints/UserPointsElements.jsx b/src/components/Dashboard/Profile/UserPoints/UserPointsElements.jsx
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { TbCrown } from "react-icons/tb";
+import { BsTrophyFill } from "react-icons/bs";
 
 export const UserPointsContainer = styled.div`
     background: #090909;
@@ -36,10 +36,8 @@ export const RankNumber = styled.p`
     font-weight: 600;
 `;
 
-export const RankCgCrown = styled(TbCrown)`
-    margin-bottom: -10px;
-    color: #ff6b08;
-    font-size: 30px;
+export const RankTrophy = styled(BsTrophyFill)`
+    color: white;
 `;
 
 export const UserExpContainer = styled.div``;

diff --git a/src/components/Header/Navbar/NavbarElements.jsx b/src/components/Header/Navbar/NavbarElements.jsx
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import { Link, Link as LinkRouter } from "react-router-dom";
 import { AiFillCaretDown } from "react-icons/ai";
-import { TbCrown } from "react-icons/tb";
+import { BsTrophyFill } from "react-icons/bs";
 
 export const DropdownIcon = styled(AiFillCaretDown)`
     margin: 5px 0 0 5px;
@@ -190,8 +190,8 @@ export const RouterNavLeaderboardButtonLink = styled(Link)`
     }
 `;
 
-export const CrownIcon = styled(TbCrown)`
-    color: #ff6b08;
+export const RankTrophy = styled(BsTrophyFill)`
+    color: white;
     font-size: 30px;
 `;
 

diff --git a/src/components/Other/CyberGames/Leaderboard/Leaderboard.jsx b/src/components/Other/CyberGames/Leaderboard/Leaderboard.jsx
@@ -6,15 +6,19 @@ import {
     LeaderboardHeader,
     LeaderboardTable,
     LeaderboardTableData,
+    LeaderboardTablePoints,
     LeaderboardTableHeader,
+    LeaderboardTableHeaderPoints,
     LeaderboardTableRow,
     RefreshButton,
     TopPlayerSection,
     Username,
+    LeaderboardTextIconData,
+    LeaderboardFirstRow,
 } from "./LeaderboardElements";
 import { Wrapper } from "../../../Dashboard/Profile/ProfileElements";
 import { RouterLink } from "../../../Tools/ToolsElements";
-import { RankCgCrown } from "../../../Dashboard/Profile/UserPoints/UserPointsElements";
+import { RankTrophy } from "../../../Dashboard/Profile/UserPoints/UserPointsElements";
 import UnderMaintenance from "../../UnderMaintenance/UnderMaintenance";
 import { CircleSpinner } from "react-spinners-kit";
 import apiStatus from "../../../../features/apiStatus";
@@ -70,25 +74,46 @@ const Leaderboard = () => {
                             <LeaderboardTableRow>
                                 <LeaderboardTableHeader>Rank</LeaderboardTableHeader>
                                 <LeaderboardTableHeader>Users</LeaderboardTableHeader>
-                                <LeaderboardTableHeader>Points</LeaderboardTableHeader>
+                                <LeaderboardTableHeaderPoints>Points</LeaderboardTableHeaderPoints>
                             </LeaderboardTableRow>
                             {userDetails &&
                                 [...userDetails]
                                     // .sort((a, b) => a?.username.localeCompare(b?.username))
                                     .sort((a, b) => (b?.exp || 0) - (a?.exp || 0))
                                     .map((user, index) => (
                                         <LeaderboardTableRow key={index}>
-                                            <LeaderboardTableData>{index + 1}</LeaderboardTableData>
+                                            <LeaderboardTableData>
+                                                <LeaderboardTextIconData>
+                                                    {index === 0 ? (
+                                                        <LeaderboardFirstRow>
+                                                            <RankTrophy style={{ color: '#FFD700' }} />
+                                                            {index+1}
+                                                        </LeaderboardFirstRow>
+                                                    ) : <> <RankTrophy /> {index + 1}</>
+                                                }
+                                                </LeaderboardTextIconData>
+                                            </LeaderboardTableData>
                                             <LeaderboardTableData>
                                                 <TopPlayerSection>
-                                                    {index === 0 ? <RankCgCrown style={{ margin: "0" }} /> : null}
                                                     <RouterLink to={`/@${user?.username}`}>
-                                                        <Username>{user?.username}</Username>
+                                                        {index === 0 ? (
+                                                            <Username>
+                                                                    <LeaderboardFirstRow>
+                                                                    {user?.username}
+                                                                    </LeaderboardFirstRow>
+                                                                </Username>
+                                                        ):<Username>{user?.username}</Username>
+                                                        }
                                                     </RouterLink>
-                                                    {index === 0 ? <RankCgCrown style={{ margin: "0" }} /> : null}
                                                 </TopPlayerSection>
                                             </LeaderboardTableData>
-                                            <LeaderboardTableData>{user?.exp || 0}</LeaderboardTableData>
+                                            <LeaderboardTablePoints>
+                                                {index === 0 ? (
+                                                    <LeaderboardFirstRow>
+                                                    {user?.exp || 0}
+                                                    </LeaderboardFirstRow>
+                                                ) :<>{user?.exp || 0}</>}
+                                            </LeaderboardTablePoints>
                                         </LeaderboardTableRow>
                                     ))}
                         </tbody>

diff --git a/src/components/Other/CyberGames/Leaderboard/LeaderboardElements.jsx b/src/components/Other/CyberGames/Leaderboard/LeaderboardElements.jsx
@@ -31,23 +31,50 @@ export const LeaderboardTable = styled.table`
 export const LeaderboardTableRow = styled.tr`
     background-color: #181818;
     color: #dadada;
-    text-align: center;
-    align-items: center;
     padding: 8px;
+    &:hover{
+        background-color: #333333;
+    }
 `;
 
 export const LeaderboardTableHeader = styled.th`
+    background-color: #101010;
+    border: 1px solid #181818;
+    text-align:start;
+    padding: 12px;
+`;
+export const LeaderboardTableHeaderPoints = styled.th`
     background-color: #101010;
     border: 1px solid #181818;
     padding: 12px;
-    text-align: center;
+    text-align: right;
 `;
 
 export const LeaderboardTableData = styled.td`
-    background: #131313;
     border: 1px solid #181818;
-    padding: 5px;
-    text-align: center;
+    padding: 5px 12px;
+    text-align: start;
+`;
+
+export const LeaderboardTextIconData = styled.span`
+    display: flex;
+    justify-content: start;
+    align-items: center;
+    gap: 5px;
+`
+export const LeaderboardFirstRow = styled.span`
+    font-size: 20px;
+    font-weight: bold;
+    display: flex;
+    justify-content: end;
+    align-items: center;
+    gap: 5px
+`
+
+export const LeaderboardTablePoints = styled.td`
+    border: 1px solid #181818;
+    padding: 5px 12px;
+    text-align: right;
 `;
 
 export const RefreshSection = styled.div`
@@ -67,7 +94,7 @@ export const RefreshButton = styled(MdRefresh)`
 export const TopPlayerSection = styled.div`
     display: flex;
     flex-direction: row;
-    justify-content: center;
+    justify-content: start;
     align-items: center;
     gap: 5px;
 `;