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

@@ -8,7 +8,7 @@
           suggested by our community!</p>
         <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
           <a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
-            <img priority ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
+            <img ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
           </a>
           <a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
             <img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">

frontend/src/app/pages/forms/appeal/appeal.component.html

@@ -7,52 +7,13 @@
   </app-header>
   <main>
     <section class="darkmodeSection appeal-container">
-      <div class="form-container">
+      <section class="columnSection">
-        <div class="pages">
+        <div class="columnContainer">
-          @if (currentPageIndex === 0) {
+          <div class="columnParagraph">
-            <section class="formPage">
+            <p>hi</p>
-              <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
+          </div>
-              <h1>Punishment Appeal</h1>
-              <p>We aim to respond within 48 hours.</p>
-            </section>
-          }
-
-          <!-- Page 2 -->
-          @if (currentPageIndex === 1) {
-            <section class="formPage">
-              <h1>Page 2</h1>
-              <p>This is the second page of the form.</p>
-            </section>
-          }
-
-          <!-- Page 3 -->
-          @if (currentPageIndex === 2) {
-            <section class="formPage">
-              <h1>Page 3</h1>
-              <p>This is the third page of the form.</p>
-            </section>
-          }
         </div>
-
+      </section>
-        <!-- Navigation dots -->
-        <div class="form-navigation">
-          <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
-            <mat-icon>navigate_before</mat-icon>
-          </button>
-
-          @for (i of totalPages; track i) {
-            <div
-              class="nav-dot"
-              [class.active]="i === currentPageIndex"
-              (click)="goToPage(i)">
-            </div>
-          }
-
-          <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
-            <mat-icon>navigate_next</mat-icon>
-          </button>
-        </div>
-      </div>
     </section>
   </main>
 </div>

frontend/src/app/pages/forms/appeal/appeal.component.scss

@@ -12,75 +12,5 @@ main {
   flex: 1;
   display: flex;
   flex-direction: column;
-}
+  overflow-y: auto;
-
-.form-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.formPage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  width: 100%;
-  height: 100%;
-  animation: fadeIn 0.5s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.navigation-buttons {
-  display: flex;
-  gap: 16px;
-  margin-top: 20px;
-}
-
-.form-navigation {
-  display: flex;
-  justify-content: center;
-  gap: 10px;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-}
-
-
-.nav-dot {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  background-color: rgba(255, 255, 255, 0.3);
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-  margin-top: auto;
-  margin-bottom: auto;
-
-  &.active {
-    background-color: #fff;
-  }
-}
-
-.nav-button {
-  color: #1f9bde;
-}
-
-.pages {
-  margin-top: auto;
-  margin-bottom: auto;
 }

frontend/src/app/pages/forms/appeal/appeal.component.ts

@@ -2,17 +2,11 @@ import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {AppealsService, MinecraftAppeal} from '@api';
 import {HeaderComponent} from '@header/header.component';
-import {NgOptimizedImage} from '@angular/common';
-import {MatButtonModule} from '@angular/material/button';
-import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'app-appeal',
   imports: [
-    HeaderComponent,
+    HeaderComponent
-    NgOptimizedImage,
-    MatButtonModule,
-    MatIconModule
   ],
   templateUrl: './appeal.component.html',
   styleUrl: './appeal.component.scss'
@@ -126,30 +120,6 @@ export class AppealComponent implements OnInit, AfterViewInit {
     this.appealApi.submitMinecraftAppeal(appeal).subscribe()
   }
 
-  public currentPageIndex: number = 0;
-  public totalPages: number[] = [0, 1, 2];
-
-  public goToPage(pageIndex: number): void {
-    if (pageIndex >= 0 && pageIndex < this.totalPages.length) {
-      this.currentPageIndex = pageIndex;
-    }
-  }
-
-  public previousPage() {
-    this.goToPage(this.currentPageIndex - 1);
-  }
-
-  public nextPage() {
-    this.goToPage(this.currentPageIndex + 1);
-  }
-
-  public isFirstPage(): boolean {
-    return this.currentPageIndex === 0;
-  }
-
-  public isLastPage(): boolean {
-    return this.currentPageIndex === this.totalPages.length - 1;
-  }
 }
 
 interface Appeal {