feat: add battlecharts header link

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 = () => (
   </div>
 );
 
+const NewTitle = ({ title }: { title: string }) => (
+  <div className={styles.rewardsheader}>
+    <div className={styles.badge}>NEW</div> {title}
+  </div>
+);
+
 const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => (
   <NavLink
     className={(p) => {
@@ -61,7 +71,13 @@ const navLink = ({ title, link }: NavLinkProps, i: number): ReactNode => (
     to={link}
     key={i}
   >
-    {title === "Rewards" ? <RewardsTitle /> : title}
+    {title === "Rewards" ? (
+      <RewardsTitle />
+    ) : title === "Battlecharts" ? (
+      <NewTitle title={title} />
+    ) : (
+      title
+    )}
   </NavLink>
 );
 

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) {

src/components/Leaderboard/Leaderboard.tsx

@@ -32,6 +32,7 @@ const LeaderboardItem = ({ position, address, data, className }: ItemProps) => {
       {data.map((v) => (
         <td>{v}</td>
       ))}
+      {className === styles.user && <div className={styles.badge}>YOU</div>}
     </tr>
   );
 };

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