diff --git a/src/components/CaptureTheFlag/CTF.jsx b/src/components/CaptureTheFlag/CTF.jsx
index 7b2c5ea2..3473678f 100644
--- 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",
}}
>
-
+
Leaderboard
diff --git a/src/components/Dashboard/Profile/UserPoints/UserPoints.jsx b/src/components/Dashboard/Profile/UserPoints/UserPoints.jsx
index 8780368a..f54abc2a 100644
--- 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 }) => {
- {userRank === 1 ? : null}
+ {userRank === 1 ? : null}
{userRank}
Rank
diff --git a/src/components/Dashboard/Profile/UserPoints/UserPointsElements.jsx b/src/components/Dashboard/Profile/UserPoints/UserPointsElements.jsx
index 56959db7..bafa8958 100644
--- 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
index fff6bb0d..ab8f122e 100644
--- 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
index 05bc05cc..a2d4d506 100644
--- 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,7 +74,7 @@ const Leaderboard = () => {
Rank
Users
- Points
+ Points
{userDetails &&
[...userDetails]
@@ -78,17 +82,38 @@ const Leaderboard = () => {
.sort((a, b) => (b?.exp || 0) - (a?.exp || 0))
.map((user, index) => (
- {index + 1}
+
+
+ {index === 0 ? (
+
+
+ {index+1}
+
+ ) : <> {index + 1}>
+ }
+
+
- {index === 0 ? : null}
- {user?.username}
+ {index === 0 ? (
+
+
+ {user?.username}
+
+
+ ):{user?.username}
+ }
- {index === 0 ? : null}
- {user?.exp || 0}
+
+ {index === 0 ? (
+
+ {user?.exp || 0}
+
+ ) :<>{user?.exp || 0}>}
+
))}
diff --git a/src/components/Other/CyberGames/Leaderboard/LeaderboardElements.jsx b/src/components/Other/CyberGames/Leaderboard/LeaderboardElements.jsx
index de31e3f1..28d17700 100644
--- 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;
`;