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; `;