diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index d3e02553..17dd95d9 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -37,6 +37,10 @@ const navLinks = [ title: "Rewards", link: "/rewards", }, + { + title: "Battlecharts", + link: "/battlecharts", + }, ] as NavLinkProps[]; const RewardsTitle = () => ( @@ -45,6 +49,12 @@ const RewardsTitle = () => ( ); +const NewTitle = ({ title }: { title: string }) => ( +
+
NEW
{title} +
+); + const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => ( { @@ -61,7 +71,13 @@ const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => ( to={link} key={i} > - {title === "Rewards" ? : title} + {title === "Rewards" ? ( + + ) : title === "Battlecharts" ? ( + + ) : ( + title + )} ); diff --git a/src/components/Header/header.module.css b/src/components/Header/header.module.css index 235adbee..cf5ac294 100644 --- a/src/components/Header/header.module.css +++ b/src/components/Header/header.module.css @@ -7,14 +7,19 @@ .navlink { color: white; - margin: 1em 1.5em; + margin: 1em 1.2em; text-decoration: none; + font-size: 18px; } .active { color: rgba(255, 255, 255, 0.6); } +.active div { + color: rgba(255, 255, 255, 0.6); +} + .navlinkcontainer { display: flex; flex-flow: row; @@ -27,13 +32,20 @@ .logo { display: flex; margin-right: auto; - padding-right: 4rem; } .rewardsheader { display: flex; align-items: center; - gap: 15px; + gap: 10px; +} + +.badge { + background: #FAB000; + color: black; + font-size: 12px; + padding: 0 5px; + border-radius: 3px; } @media (max-width: 720px) { diff --git a/src/components/Leaderboard/Leaderboard.tsx b/src/components/Leaderboard/Leaderboard.tsx index 7a19a484..cb7bb057 100644 --- a/src/components/Leaderboard/Leaderboard.tsx +++ b/src/components/Leaderboard/Leaderboard.tsx @@ -32,6 +32,7 @@ const LeaderboardItem = ({ position, address, data, className }: ItemProps) => { {data.map((v) => ( {v} ))} + {className === styles.user &&
YOU
} ); }; diff --git a/src/components/Leaderboard/leaderboard.module.css b/src/components/Leaderboard/leaderboard.module.css index d3f5341d..b2a15e5a 100644 --- a/src/components/Leaderboard/leaderboard.module.css +++ b/src/components/Leaderboard/leaderboard.module.css @@ -23,6 +23,7 @@ .leaderboard tbody tr { display: flex; + position: relative; align-items: center; justify-content: space-between; padding: 12px; @@ -40,6 +41,17 @@ border: solid 1px var(--LIGHT-GREY); } +.badge { + background: #FAB000; + color: black; + font-size: 12px; + padding: 0 5px; + border-radius: 3px; + position: absolute; + top: -10px; + left: 9px; +} + .first { background: #FFC640; }