frontend/package.json

@@ -18,7 +18,7 @@
     "@angular/compiler": "^19.2.0",
     "@angular/core": "^19.2.0",
     "@angular/forms": "^19.2.0",
-    "@angular/material": "^19.2.19",
+    "@angular/material": "^19.2.18",
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",

frontend/src/app/app.routes.ts

@@ -108,17 +108,5 @@ export const routes: Routes = [
   {
     path: 'forms',
     loadComponent: () => import('./pages/forms/forms.component').then(m => m.FormsComponent)
-  },
-  {
-    path: 'community',
-    loadComponent: () => import('./pages/altitude/community/community.component').then(m => m.CommunityComponent)
-  },
-  {
-    path: 'nicknames',
-    loadComponent: () => import('./pages/reference/nicknames/nicknames.component').then(m => m.NicknamesComponent)
-  },
-  {
-    path: 'nickgenerator',
-    loadComponent: () => import('./pages/reference/nickgenerator/nickgenerator.component').then(m => m.NickgeneratorComponent)
-  },
+  }
 ];

frontend/src/app/community/community.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "@header/header.component";
+import {HeaderComponent} from "../header/header.component";
 
 @Component({
   selector: 'app-community',

frontend/src/app/nickgenerator/nickgenerator.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "@header/header.component";
+import {HeaderComponent} from "../header/header.component";
 
 @Component({
   selector: 'app-nickgenerator',

frontend/src/app/nicknames/nicknames.component.html

@@ -29,7 +29,7 @@
               color options. These colors will be in the form of <span
                 style="font-family: 'opensans-bold', sans-serif;">#XXXXXX</span>; write down the colors that you like so
               that you can easily use them later.</p>
-            <img ngSrc="/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
+            <img ngSrc="/public/img/random/colors.png" alt="RGB colors" style="width: 100%; padding:0;" height="130"
                  width="480">
             <p>Output of /colorsextra</p>
             <p>Furthermore, you can also use the <a [routerLink]="['/nickgenerator']">nickname generation tool</a> to

frontend/src/app/nicknames/nicknames.component.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {HeaderComponent} from "@header/header.component";
+import {HeaderComponent} from "../header/header.component";
 import {NgOptimizedImage} from '@angular/common';
 import {RouterLink} from '@angular/router';
 

frontend/src/app/pages/header/header/header.component.html

@@ -62,17 +62,12 @@
                   <li><a href="https://alttd.com/blog/">Blog</a></li>
                 </ul>
               </li>
-              <li *ngIf="!isAuthenticated">
-                <a (click)="openLoginDialog()">
-                  Login
-                </a>
-              </li>
             </ul>
           </div>
         </div>
         <a href="/"><img ngSrc="/public/img/logos/logo.png" priority alt="Altitude Server Logo" height="319"
                          width="550"></a>
-        <ul id="nav_list">
+        <ul>
           <li class="nav_li"><a [id]="getCurrentPageId(['home'])" class="nav_link" href="/" [ngClass]="active">Home</a>
           </li>
           <li class="nav_li">
@@ -142,13 +137,12 @@
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
             </ul>
           </li>
-          <li class="nav_li login-button" *ngIf="!isAuthenticated">
-            <a class="nav_link fake_link" (click)="openLoginDialog()">
-              Login
-            </a>
-          </li>
         </ul>
-
+        <ng-container *ngIf="!isAuthenticated">
+          <button mat-button (click)="openLoginDialog()" style="color: white">
+            Login
+          </button>
+        </ng-container>
         <app-theme></app-theme>
       </div>
     </nav>

frontend/src/app/pages/header/header/header.component.scss

@@ -259,10 +259,6 @@ nav img {
   display: none;
 }
 
-.login-button {
-  margin-left: 40px;
-}
-
 @-moz-document url-prefix() {
   .dropdown2 {
     top: 12px;
@@ -275,6 +271,12 @@ nav img {
   }
 }
 
+@media (max-width: 1000px) {
+  #scroll-button {
+    padding-top: 5px;
+  }
+}
+
 @media (max-width: 1150px) {
   .dropdown {
     top: -10px;
@@ -303,6 +305,10 @@ nav img {
     display: block;
     width: 100%;
   }
+
+  .switch-div {
+    top: 65px;
+  }
 }
 
 @media (max-width: 690px) {
@@ -334,6 +340,10 @@ nav img {
     background: none;
     border-bottom: 3px solid var(--pureblack);
   }
+
+  .switch-div {
+    top: 33px;
+  }
 }
 
 @media (min-width: 690px) {

frontend/src/app/pages/home/home.component.scss

@@ -322,7 +322,6 @@ main .container {
 
   #header-img {
     width: 65%;
-    height: 18%;
   }
 
   .title {

frontend/src/app/shared-components/theme/theme.component.html

@@ -1,4 +1,4 @@
-<div class="switch-div">
+<div class="switch-div" style="z-index: 1;">
   <label class="switch">
     <input type="checkbox" [checked]="isDarkMode" (change)="toggleTheme()" id="slider">
     <span class="slider round"></span>

frontend/src/app/shared-components/theme/theme.component.scss

@@ -7,9 +7,7 @@
 }
 
 .switch-div {
-  position: absolute;
   right: 40px;
-  z-index: 1;
 }
 
 /* Hide default HTML checkbox */
@@ -74,16 +72,3 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
-
-@media (max-width: 1150px) {
-  .switch-div {
-    top: 65px;
-  }
-}
-
-@media (max-width: 690px) {
-  .switch-div {
-    top: 33px;
-    margin-right: 25px;
-  }
-}