Frontend - Leaderboard improvements

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "1.0.95",
+  "version": "1.0.103",
   "scripts": {
     "install:deps": "npm install",
     "start": "npm install && ng serve --configuration local --open",

frontend/src/app/core/services/firestore.service.ts

@@ -39,8 +39,4 @@ export class FirestoreService {
     const docRef = doc(this.heartbeatCollection, id);
     return deleteDoc(docRef);
   }
-
-  getHeartbeatCollection() {
-    return this.heartbeatCollection;
-  }
 }

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.html

@@ -0,0 +1,3 @@
+<a href="https://mdvpmchvuew.typeform.com/to/EtWUgcSz" class="gradient fx-row-full-cent p-absolute w-100 pointer">
+  Round 1 Applications Close in 5d 5h 12m - Apply <span class="mina-icon icon-200">arrow_right_alt</span>
+</a>

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.scss

@@ -0,0 +1,16 @@
+@import 'leaderboard-variables';
+
+.gradient {
+  height: 52px;
+  background: $mina-brand-gradient;
+  top: 0;
+  left: 0;
+  font-family: "IBM Plex Mono", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color: $mina-base-primary;
+
+  @media (max-width: 767px) {
+    font-size: 3.1vw;
+  }
+}

frontend/src/app/features/leaderboard/leaderboard-apply/leaderboard-apply.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mina-leaderboard-apply',
+  templateUrl: './leaderboard-apply.component.html',
+  styleUrl: './leaderboard-apply.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LeaderboardApplyComponent {
+
+}

frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.html

@@ -0,0 +1,11 @@
+<mina-leaderboard-apply></mina-leaderboard-apply>
+
+<div class="flex-column h-100 w-100 overflow-scroll">
+  <mina-leaderboard-header></mina-leaderboard-header>
+  <main class="flex-1 flex-column w-100">
+    <h2>Mina Web Node Testing Program</h2>
+    <h1>Details</h1>
+    <h3><b>TBD</b></h3>
+  </main>
+  <mina-leaderboard-footer></mina-leaderboard-footer>
+</div>

frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.scss

@@ -0,0 +1,41 @@
+@import 'leaderboard-variables';
+
+:host {
+  display: block;
+  height: 100%;
+  padding-top: 52px;
+  background-color: $mina-cta-primary;
+  color: $mina-base-primary;
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
+main,
+mina-leaderboard-header,
+mina-leaderboard-footer {
+  max-width: 1200px;
+  width: 100%;
+  padding: 0 48px;
+  margin: 0 auto;
+
+  @media (max-width: 1023px) {
+    padding: 0;
+  }
+}
+
+h2 {
+  margin-top: 72px;
+  margin-bottom: 16px;
+  color: $mina-base-secondary;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+h1 {
+  margin-top: 0;
+  margin-bottom: 80px;
+  color: $mina-base-primary;
+  font-size: 80px;
+  font-weight: 400;
+  line-height: 80px;
+}

frontend/src/app/features/leaderboard/leaderboard-details/leaderboard-details.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mina-leaderboard-details',
+  templateUrl: './leaderboard-details.component.html',
+  styleUrl: './leaderboard-details.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LeaderboardDetailsComponent {
+
+}

frontend/src/app/features/leaderboard/leaderboard-filters/leaderboard-filters.component.html

@@ -14,7 +14,7 @@
           <span class="mina-icon icon-300"
                 [class.flip]="currentSort.sortDirection === SortDirection.DSC"
                 [class.show]="currentSort.sortBy === 'blocksProduced'">arrow_upward</span>
-          <span class="text f-400">Block Production</span>
+          <span class="text f-400 text-nowrap">Block Production</span>
         </div>
       </div>
     </div>

frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.html

@@ -1,8 +1,8 @@
 <div class="flex-row flex-between align-center flex-column-reverse-sm align-start-sm">
   <div>© 2025 Mina Foundation. All rights reserved.</div>
   <div class="right-side fx-row-vert-cent flex-column-sm align-start-sm">
-    <a>Terms of Service</a>
-    <a>Privacy Policy</a>
-    <a>Impressum</a>
+    <a href="/leaderboard/terms-and-conditions">Terms and Conditions</a>
+    <a href="/leaderboard/privacy-policy">Privacy Policy</a>
+    <a href="/leaderboard/impressum">Impressum</a>
   </div>
 </div>

frontend/src/app/features/leaderboard/leaderboard-footer/leaderboard-footer.component.scss

@@ -24,6 +24,7 @@
   }
 
   a {
+    color: $mina-base-primary;
     cursor: pointer;
     transition: .15s ease;
 

frontend/src/app/features/leaderboard/leaderboard-header/leaderboard-header.component.html

@@ -1,6 +1,5 @@
 <div class="menu fx-row-vert-cent flex-between">
-  <img src="assets/images/logo/logo-text.svg" alt="">
-  <!-- Hamburger Menu Trigger -->
+  <img src="assets/images/logo/logo-text.svg" alt="" class="pointer" routerLink="">
   <span class="hamburger-trigger mina-icon icon-200 f-40" (click)="toggleMenu(); $event.stopPropagation()">{{ isMenuOpen ? 'close' : 'menu' }}</span>
 
   <div class="dropdown-menu fx-row-vert-cent"
@@ -9,6 +8,6 @@
        (clickOutside)="closeMenu()">
     <a [class.active]="route === '/'" routerLink="">Mina Web Node</a>
     <a [class.active]="route === '/leaderboard'" routerLink="/leaderboard">Leaderboard</a>
-    <a href="" target="_blank">Round 1 Details</a>
+    <a [class.active]="route === '/leaderboard/details'" href="/leaderboard/details">Round 1 Details</a>
   </div>
 </div>

frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.html

@@ -0,0 +1,11 @@
+<mina-leaderboard-apply></mina-leaderboard-apply>
+
+<div class="flex-column h-100 w-100 overflow-scroll">
+  <mina-leaderboard-header></mina-leaderboard-header>
+  <main class="flex-1 flex-column w-100">
+    <h2>Mina Web Node Testing Program</h2>
+    <h1>Impressum</h1>
+    <h3><b>TBD</b></h3>
+  </main>
+  <mina-leaderboard-footer></mina-leaderboard-footer>
+</div>

frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.scss

@@ -0,0 +1,41 @@
+@import 'leaderboard-variables';
+
+:host {
+  display: block;
+  height: 100%;
+  padding-top: 52px;
+  background-color: $mina-cta-primary;
+  color: $mina-base-primary;
+  font-family: "IBM Plex Sans", sans-serif;
+}
+
+main,
+mina-leaderboard-header,
+mina-leaderboard-footer {
+  max-width: 1200px;
+  width: 100%;
+  padding: 0 48px;
+  margin: 0 auto;
+
+  @media (max-width: 1023px) {
+    padding: 0;
+  }
+}
+
+h2 {
+  margin-top: 72px;
+  margin-bottom: 16px;
+  color: $mina-base-secondary;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 28px;
+}
+
+h1 {
+  margin-top: 0;
+  margin-bottom: 80px;
+  color: $mina-base-primary;
+  font-size: 80px;
+  font-weight: 400;
+  line-height: 80px;
+}

frontend/src/app/features/leaderboard/leaderboard-impressum/leaderboard-impressum.component.ts

@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'mina-leaderboard-impressum',
+  templateUrl: './leaderboard-impressum.component.html',
+  styleUrl: './leaderboard-impressum.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class LeaderboardImpressumComponent {
+
+}

frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.html

@@ -1,7 +1,4 @@
-<div class="gradient fx-row-full-cent p-absolute w-100 pointer">
-  Round 1 Applications Close in 5d 5h 12m - Apply <span class="mina-icon icon-200">arrow_right_alt</span>
-</div>
-
+<mina-leaderboard-apply></mina-leaderboard-apply>
 <div class="flex-column h-100 w-100 overflow-y-scroll">
   <mina-leaderboard-header></mina-leaderboard-header>
   <main class="flex-1 flex-column">
@@ -65,7 +62,7 @@ <h4>The Mina Web Node, part 1</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore .</p>
         <div class="line w-100"></div>
         <div class="flex-row flex-start">
-          <a href="" class="fx-row-vert-cent">Learn more <span class="mina-icon icon-300">arrow_right_alt</span></a>
+          <a href="/leaderboard/details" class="fx-row-vert-cent">Learn more <span class="mina-icon icon-300">arrow_right_alt</span></a>
         </div>
       </div>
     </div>

frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.scss

@@ -10,20 +10,6 @@
   font-family: "IBM Plex Sans", sans-serif;
 }
 
-.gradient {
-  height: 52px;
-  background: $mina-brand-gradient;
-  top: 0;
-  font-family: "IBM Plex Mono", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: $mina-base-primary;
-
-  @media (max-width: 767px) {
-    font-size: 3.1vw;
-  }
-}
-
 main,
 mina-leaderboard-header,
 mina-leaderboard-footer {
@@ -162,6 +148,10 @@ section {
     font-weight: 300;
     max-width: 760px;
 
+    @media (max-width: 1023px) {
+      font-size: 10vw;
+    }
+
     span {
       color: $black5;
     }

frontend/src/app/features/leaderboard/leaderboard-landing-page/leaderboard-landing-page.component.ts

@@ -1,6 +1,4 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
-import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
-import { LeaderboardActions } from '@leaderboard/leaderboard.actions';
 
 @Component({
   selector: 'mina-leaderboard-landing-page',
@@ -9,10 +7,9 @@ import { LeaderboardActions } from '@leaderboard/leaderboard.actions';
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'flex-column h-100 align-center' },
 })
-export class LeaderboardLandingPageComponent extends StoreDispatcher implements OnInit {
+export class LeaderboardLandingPageComponent implements OnInit {
 
   ngOnInit(): void {
-    this.dispatch2(LeaderboardActions.getHeartbeats());
   }
 
 }

frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.html

@@ -1,6 +1,4 @@
-<div class="gradient fx-row-full-cent p-absolute w-100">
-  Round 1 Applications Close in 5d 5h 12m - Apply <span class="mina-icon icon-200">arrow_right_alt</span>
-</div>
+<mina-leaderboard-apply></mina-leaderboard-apply>
 
 <div class="flex-column h-100 w-100 overflow-auto">
   <mina-leaderboard-header></mina-leaderboard-header>

frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.scss

@@ -5,20 +5,6 @@
   background-color: $mina-cta-primary;
 }
 
-.gradient {
-  height: 52px;
-  background: $mina-brand-gradient;
-  top: 0;
-  font-family: "IBM Plex Mono", sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  color: $mina-base-primary;
-
-  @media (max-width: 767px) {
-    font-size: 3.1vw;
-  }
-}
-
 main,
 mina-leaderboard-header,
 mina-leaderboard-footer {

frontend/src/app/features/leaderboard/leaderboard-page/leaderboard-page.component.ts

@@ -1,6 +1,8 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { StoreDispatcher } from '@shared/base-classes/store-dispatcher.class';
 import { LeaderboardActions } from '@leaderboard/leaderboard.actions';
+import { timer } from 'rxjs';
+import { untilDestroyed } from '@ngneat/until-destroy';
 
 @Component({
   selector: 'mina-leaderboard-page',
@@ -12,7 +14,11 @@ import { LeaderboardActions } from '@leaderboard/leaderboard.actions';
 export class LeaderboardPageComponent extends StoreDispatcher implements OnInit {
 
   ngOnInit(): void {
-    this.dispatch2(LeaderboardActions.getHeartbeats());
+    timer(0, 5000)
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.dispatch2(LeaderboardActions.getHeartbeats());
+      });
   }
 
 }

frontend/src/app/features/leaderboard/leaderboard-privacy-policy/leaderboard-privacy-policy.component.html

@@ -0,0 +1,11 @@
+<mina-leaderboard-apply></mina-leaderboard-apply>
+
+<div class="flex-column h-100 w-100 overflow-scroll">
+  <mina-leaderboard-header></mina-leaderboard-header>
+  <main class="flex-1 flex-column w-100">
+    <h2>Mina Web Node Testing Program</h2>
+    <h1>Privacy Policy</h1>
+    <h3><b>TBD</b></h3>
+  </main>
+  <mina-leaderboard-footer></mina-leaderboard-footer>
+</div>